:root {
  --readable-ink: #103e47;
  --readable-body: #284f57;
  --readable-muted: #42686e;
  --readable-soft: #55777c;
  --readable-line: rgba(27, 99, 103, .31);
  --readable-panel: rgba(249, 255, 253, .97);
  --readable-panel-soft: rgba(226, 245, 241, .95);
}

/* Keep the existing celestial palette, but remove the grey veil from reading surfaces. */
.topbar {
  background: linear-gradient(90deg, rgba(248, 255, 253, .985), rgba(225, 244, 241, .98) 50%, rgba(248, 255, 253, .985));
  border-bottom-color: rgba(37, 113, 118, .3);
  box-shadow: 0 8px 28px rgba(14, 70, 73, .15);
}

.topbar .brand b,
.time b { color: var(--readable-ink); }

.topbar .brand small,
.time small,
.top-actions button,
.top-actions button span {
  color: #315e66;
  font-weight: 600;
}

.status-card,
.action-dock {
  color: var(--readable-ink);
  background: linear-gradient(145deg, var(--readable-panel), var(--readable-panel-soft));
  border-color: rgba(35, 111, 116, .42);
  box-shadow: 0 22px 58px rgba(9, 61, 64, .2), inset 0 0 0 1px rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px) saturate(1.06) brightness(1.06);
}

.status-card {
  background: linear-gradient(160deg, #fbfffe 0%, #f1faf8 52%, #e7f7f4 100%);
  border-color: rgba(25, 97, 103, .48);
  box-shadow: 0 22px 58px rgba(7, 52, 57, .2), inset 0 0 0 1px rgba(255, 255, 255, .96);
}

.status-card::before {
  background: none;
  border-color: rgba(29, 111, 115, .25);
}

.status-card__head p,
.status-card__head h2,
.realm-line span,
.realm-line b,
.resource b,
.currency-row b,
.action-dock__head h2,
.action-dock__head h3,
.action-dock button b {
  color: var(--readable-ink);
}

.status-card__head p {
  color: #175a63;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.status-card__head h2 {
  color: #082f39;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .1em;
  text-shadow: 0 1px 0 #fff;
  white-space: nowrap;
}

.status-card .avatar-sigil {
  color: #116b70;
  background: radial-gradient(circle at 36% 28%, #ffffff 0, #e6f8f5 52%, #c8ebe7 100%);
  border-color: rgba(28, 128, 130, .52);
  box-shadow: 0 0 0 5px rgba(48, 149, 150, .07), 0 8px 20px rgba(13, 87, 91, .14);
}

.status-card .avatar-sigil i { border-color: rgba(26, 117, 122, .28); }

.status-card .icon-button--small {
  color: #0d6970;
  background: #f7fffd;
  border-color: rgba(26, 117, 122, .38);
}

.status-card__divider span,
.action-dock__head span,
.realm-line small,
.currency-row small {
  color: var(--readable-muted);
  font-weight: 600;
}

.realm-line small,
.currency-row small { font-size: 9px; }

.status-card__divider span {
  color: #2b5963;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.status-card__divider::before,
.status-card__divider::after {
  background: linear-gradient(90deg, transparent, rgba(29, 102, 108, .3));
}

.realm-line {
  margin-bottom: 19px;
  padding: 9px 10px;
  background: linear-gradient(100deg, #f0faf7, #ffffff 65%);
  border: 1px solid rgba(27, 102, 108, .25);
  border-left: 3px solid #24878a;
  box-shadow: 0 7px 18px rgba(16, 80, 84, .07);
}

.realm-line small {
  color: #23656b;
  font-size: 10px;
  font-weight: 800;
}

.realm-line span {
  color: #082f39;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .08em;
}

.realm-line > b {
  color: #8a6422;
  font-size: 16px;
  font-weight: 600;
}

.realm-line > b em {
  color: #5b6e70;
  font-size: 9px;
  font-weight: 800;
}

.action-dock > p > span {
  color: #174d56;
  font-weight: 700;
}

.action-dock > p > small {
  color: #4d7176;
  font-weight: 600;
}

.resource > div:first-child {
  color: #1d515a;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 800;
}

.resource b {
  color: #082f39;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
}

.resource b em {
  color: #4d6b70;
  font-size: 9.5px;
  font-weight: 700;
}

.status-card .resource { margin: 15px 0; }
.resource--hp > div:first-child,
.resource--hp b { color: #82423c; }
.resource--mana > div:first-child,
.resource--mana b { color: #226478; }
.resource--cultivation > div:first-child,
.resource--cultivation b { color: #80601d; }

.status-card .meter {
  height: 7px;
  background: rgba(20, 75, 82, .16);
  box-shadow: inset 0 1px 3px rgba(9, 48, 54, .16), 0 1px 0 rgba(255,255,255,.8);
}

.currency-row {
  margin: 20px 0 17px;
  padding: 13px 4px;
  background: rgba(228, 246, 242, .58);
  border-block-color: rgba(32, 102, 106, .26);
}

.currency-row span + span { border-left-color: rgba(32, 102, 106, .18); }

.currency-row small {
  color: #315e67;
  font-size: 10px;
  font-weight: 800;
}

.currency-row b {
  color: #0a3540;
  font-size: 16px;
  font-weight: 700;
}

.currency-row span:nth-child(1) b { color: #8a6220; }
.currency-row span:nth-child(2) b { color: #17655f; }
.currency-row span:nth-child(3) b { color: #7c4650; }

.realm-line,
.location-chip {
  color: var(--readable-ink);
  padding: 14px 12px;
  background: linear-gradient(120deg, #ffffff, #edf9f6);
  border-color: rgba(35, 111, 116, .38);
  box-shadow: 0 8px 20px rgba(13, 76, 80, .07);
}

.location-chip b { color: var(--readable-ink); }

.location-chip span,
.location-chip small {
  color: var(--readable-muted);
  font-weight: 600;
}

.location-chip > span {
  color: #20646a;
  font-size: 10px;
  font-weight: 800;
}

.location-chip > span small {
  color: #405f64;
  font-size: 9px;
  font-weight: 700;
}

.location-chip > b {
  color: #082f39;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .08em;
}

.location-chip > em {
  color: #a06c17;
  font-size: 22px;
  font-weight: 800;
}

.system-mini-grid button {
  color: var(--readable-ink);
  min-height: 54px;
  padding: 8px;
  background: linear-gradient(135deg, #ffffff, #eaf8f5);
  border-color: rgba(27, 103, 108, .42);
  box-shadow: 0 5px 14px rgba(15, 78, 82, .05);
}

.system-mini-grid button:hover {
  background: linear-gradient(135deg, #ffffff, rgba(224, 247, 243, .94));
  border-color: rgba(35, 137, 140, .52);
}

.system-mini-grid button > i {
  color: #176f75;
  width: 28px;
  height: 28px;
  background: rgba(218, 246, 242, .96);
  border-color: rgba(34, 119, 122, .48);
}

.system-mini-grid button > span {
  color: #082f39;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.system-mini-grid small {
  color: #2e5960;
  font-size: 9.5px;
  font-weight: 700;
}

.action-dock button {
  color: var(--readable-ink);
  background: rgba(248, 255, 253, .57);
  border-bottom-color: rgba(32, 104, 108, .2);
}

.action-dock button:hover { background: rgba(255, 255, 255, .93); }

.action-dock button small,
.action-dock small,
.action-dock em {
  color: #426970;
  font-size: 9px;
  font-weight: 600;
}

.action-dock button > i {
  color: #176f75;
  background: rgba(234, 251, 248, .96);
  border-color: rgba(35, 126, 129, .45);
}

.scene-card,
.combat-card {
  color: var(--readable-ink);
  background: linear-gradient(145deg, rgba(251, 255, 254, .98), rgba(226, 246, 242, .97));
  border-color: rgba(31, 108, 113, .44);
  box-shadow: 0 22px 62px rgba(8, 58, 62, .2), inset 0 0 0 1px rgba(255, 255, 255, .88);
  backdrop-filter: blur(18px) saturate(1.04) brightness(1.07);
}

.scene-card h1,
.combat-card h2 { color: #0d3943; }

.scene-card__eyebrow,
.scene-card__kicker {
  color: #176b73;
  font-weight: 700;
}

.scene-card__text,
.combat-message {
  color: var(--readable-body);
  font-weight: 500;
  line-height: 1.72;
}

.story-choice {
  color: var(--readable-ink);
  background: rgba(252, 255, 254, .9);
  border-color: rgba(31, 106, 111, .34);
}

.story-choice:hover,
.story-choice:focus-visible {
  background: #ffffff;
  border-color: rgba(34, 139, 141, .62);
}

.story-choice b {
  color: #0e3942;
  font-weight: 700;
}

.story-choice > small {
  color: #285b59 !important;
  font-weight: 700;
}

.story-choice > span,
.story-choice > i {
  color: #0f666d;
  background: linear-gradient(145deg, #e9fbf8, #bce7e3);
}

.free-action label {
  color: #f4ffff;
  font-size: 10px;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(3, 35, 38, .92), 0 0 3px rgba(3, 35, 38, .78);
}

.free-action label span { color: #a9f2ed; }

.free-action__ai {
  float: right;
  padding: 2px 7px;
  color: #d9e8e5;
  background: rgba(17, 59, 62, .74);
  border: 1px solid rgba(180, 220, 215, .32);
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
}

.free-action__ai.is-online {
  color: #fff0b8;
  background: rgba(27, 91, 87, .88);
  border-color: rgba(241, 210, 126, .58);
  box-shadow: 0 0 14px rgba(71, 192, 180, .2);
}

.free-action > div {
  background: rgba(247, 255, 253, .985);
  border-color: rgba(28, 102, 108, .46);
  box-shadow: 0 14px 36px rgba(7, 52, 57, .22);
}

.free-action input { color: #0d3943; }

.free-action input::placeholder {
  color: #526f74;
  opacity: 1;
}

.world-omen {
  background: linear-gradient(125deg, rgba(9, 67, 68, .93), rgba(14, 91, 88, .9));
  border-color: rgba(165, 235, 226, .42);
}

.world-omen small { color: rgba(230, 252, 248, .78); }
.world-omen b { color: #f5fffd; }

.mobile-tabs button {
  color: #365f66;
  font-size: 9px;
  font-weight: 600;
}

.settlement-modal,
.ritual-content,
.side-panel {
  color: var(--readable-ink);
  background: linear-gradient(150deg, rgba(252, 255, 254, .99), rgba(225, 245, 241, .985));
}

.settlement-modal > header p,
.settlement-result p,
.settlement-time small,
.ritual-content > header p,
.ritual-methods em,
.side-panel p {
  color: var(--readable-muted);
}

@media (max-width: 760px) {
  .status-card,
  .action-dock,
  .scene-card,
  .combat-card {
    background: linear-gradient(145deg, rgba(252, 255, 254, .985), rgba(230, 247, 244, .98));
  }

  .scene-card__text { font-size: 14px; }
  .story-choice > small { font-size: 9px !important; }
}

/* Full-site hierarchy: separate headings, body copy, labels and highlights. */
:root {
  --readable-heading: #082f39;
  --readable-copy: #244950;
  --readable-label: #176d73;
  --readable-meta: #48686d;
  --readable-gold: #9b691d;
  --readable-surface: #fbfffe;
  --readable-surface-alt: #edf8f6;
  --readable-border: rgba(21, 101, 106, .36);
  --readable-dark: #104f4b;
  --readable-dark-copy: #e8fbf7;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html,
body,
.side-panel__body,
.ritual-content,
.settlement-results,
.creation-shell {
  scrollbar-color: rgba(24, 108, 109, .5) rgba(226, 241, 237, .8);
  scrollbar-width: thin;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.side-panel__body::-webkit-scrollbar,
.ritual-content::-webkit-scrollbar,
.settlement-results::-webkit-scrollbar,
.creation-shell::-webkit-scrollbar { width: 8px; height: 8px; }

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.side-panel__body::-webkit-scrollbar-track,
.ritual-content::-webkit-scrollbar-track,
.settlement-results::-webkit-scrollbar-track,
.creation-shell::-webkit-scrollbar-track { background: rgba(226, 241, 237, .8); }

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.side-panel__body::-webkit-scrollbar-thumb,
.ritual-content::-webkit-scrollbar-thumb,
.settlement-results::-webkit-scrollbar-thumb,
.creation-shell::-webkit-scrollbar-thumb {
  background: rgba(24, 108, 109, .5);
  border: 2px solid rgba(226, 241, 237, .8);
  border-radius: 99px;
}

button:disabled,
.button:disabled,
.free-action :disabled,
.world-event-card button:disabled,
.combat-actions button.is-lacking {
  opacity: 1;
}

/* Landing page: retain the cinematic image while making every line intentional. */
.landing::before {
  background: linear-gradient(90deg, rgba(5, 29, 29, .84) 0%, rgba(6, 35, 35, .67) 36%, rgba(7, 35, 35, .18) 70%),
              linear-gradient(180deg, rgba(4, 26, 26, .05) 48%, rgba(4, 26, 26, .68));
}

.landing .seal,
.landing__title-index,
.landing__scroll-cue,
.landing__version {
  color: #f2d58e;
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0, 18, 20, .9);
}

.landing__subtitle {
  color: #f5fbf7;
  font-weight: 500;
  text-shadow: 0 3px 18px rgba(0, 18, 20, .96);
}

.landing .feature-row {
  color: #e9f4ef;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(0, 18, 20, .94);
}

.landing-continue,
.landing-cta {
  color: #fafffe;
  border-color: rgba(184, 235, 227, .62);
  text-shadow: 0 1px 5px rgba(0, 26, 29, .8);
}

.landing-continue small,
.landing-cta small,
.landing__version {
  color: #f0dfb8;
  font-size: 10px;
  font-weight: 700;
}

.landing .feature-row small {
  color: #d9e8e2;
  font-size: 9px;
  font-weight: 700;
  text-shadow: 0 2px 9px rgba(0, 18, 20, .94);
}

.landing .seal em {
  color: #e7f2ed;
  font-size: 8px;
  font-weight: 700;
}

.landing__title-index,
.landing__scroll-cue,
.landing__scroll-cue span {
  color: #f2d58e;
  font-size: 9px;
  font-weight: 700;
}

/* Account, character list and character creation use opaque paper surfaces. */
.account-card,
.profile-card,
.profile-card--new,
.profile-empty,
.creation-intro,
.creation-shell .form-section {
  color: var(--readable-copy);
  background: linear-gradient(145deg, rgba(253, 255, 253, .985), rgba(233, 244, 239, .98));
  border-color: var(--readable-border);
  box-shadow: 0 22px 58px rgba(9, 57, 58, .18), inset 0 0 0 1px rgba(255, 255, 255, .9);
  backdrop-filter: blur(18px) saturate(1.02) brightness(1.05);
}

.account-card__heading h1,
.profiles-heading h1,
.profile-card__identity b,
.profile-card__where b,
.profile-card--new b,
.profile-empty h2,
.creation-header h1,
.creation-intro h2,
.creation-shell .section-heading h2,
.creation-shell .choice-card__title,
.creation-shell .stat-editor output {
  color: var(--readable-heading);
}

.account-card__heading p,
.profiles-heading p,
.profile-card__identity small,
.profile-card__where small,
.creation-header .eyebrow,
.creation-intro small {
  color: var(--readable-label);
  font-size: 10px;
  font-weight: 700;
}

.account-card__heading > span,
.account-local-note,
.profiles-heading > span,
.profiles-footer,
.profile-card__identity em,
.profile-card__where em,
.profile-card--new small,
.profile-empty p,
.creation-shell .section-heading p,
.creation-shell .choice-card__desc,
.creation-shell .form-footer {
  color: var(--readable-copy);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
}

.account-tabs button,
.profile-logout,
.creation-account small,
.creation-account b {
  color: var(--readable-copy);
  font-size: 11px;
  font-weight: 600;
}

.account-brand small,
.profiles-header .brand small,
.topbar .brand small {
  color: #315e66;
  font-size: 9px;
  font-weight: 700;
}

.brand > i.brand-emblem,
.account-brand > i.brand-emblem,
.profiles-header .brand > i.brand-emblem,
.topbar .brand > i.brand-emblem {
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background-color: transparent;
  background-image: url("./assets/images/taixu-emblem.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 7px 18px rgba(18, 91, 94, .18), 0 0 0 1px rgba(31, 118, 120, .16);
  font-size: 0;
}

.profiles-header > div small,
.profiles-header > div span {
  color: var(--readable-copy);
  font-size: 10px;
  font-weight: 600;
}

.account-tabs button.is-active {
  color: var(--readable-heading);
  font-weight: 800;
}

.account-form label > span,
.creation-shell .field label {
  color: #173f47;
  font-size: 11px;
  font-weight: 700;
}

.account-form input,
.creation-shell .field input {
  color: var(--readable-heading);
  background: #ffffff;
  border-color: rgba(25, 93, 99, .4);
  font-size: 13px;
}

.account-form input::placeholder,
.creation-shell .field input::placeholder {
  color: #5a7277;
  opacity: 1;
}

.profile-card__number { color: var(--readable-gold); }
.profile-card__enter { color: #126c70; font-weight: 700; }

.creation-shell .choice-card,
.creation-shell .stat-row,
.creation-shell .stat-editor {
  color: var(--readable-copy);
  background: #fbfefd;
  border-color: rgba(24, 96, 101, .32);
}

.creation-shell .choice-card.is-selected {
  background: linear-gradient(145deg, #e4f5f0, #fff6dc);
  border-color: #287d79;
}

.creation-shell .choice-card__desc { margin-top: 8px; }
.creation-shell .choice-card__effect { color: #8d5d12; font-size: 11px; }
.creation-shell .stat-editor small { color: var(--readable-meta); font-size: 10px; font-weight: 700; }

.creation-shell .button--ghost {
  color: #16454c;
  background: #f4fbf9;
  border-color: rgba(25, 94, 99, .38);
}

.creation-shell .button:disabled {
  color: #65787c;
  background: #dfe9e6;
  border-color: rgba(54, 91, 95, .28);
}

/* Drawer shell: the reading plane is solid, with a visibly separate header. */
.side-panel {
  color: var(--readable-copy);
  background: linear-gradient(180deg, #f9fefd 0%, #edf8f6 100%);
  border-left: 1px solid rgba(20, 93, 99, .42);
}

.side-panel > header {
  color: var(--readable-heading);
  background: linear-gradient(115deg, #d7f0ed, #f4fbf9);
  border-bottom: 1px solid rgba(20, 99, 104, .42);
  box-shadow: 0 8px 22px rgba(12, 69, 73, .08);
}

.side-panel > header p {
  color: var(--readable-label);
  font-size: 10px;
  font-weight: 800;
}

.side-panel > header h2 {
  color: var(--readable-heading);
  font-size: 27px;
}

.side-panel > header .icon-button {
  color: #0e6269;
  background: #fafffe;
  border-color: rgba(24, 104, 109, .4);
}

.side-panel__body {
  color: var(--readable-copy);
  scrollbar-color: rgba(31, 112, 115, .45) transparent;
}

.panel-intro,
.save-note,
.empty-state {
  color: var(--readable-copy);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.75;
}

.detail-hero,
.fate-summary,
.technique-summary,
.world-event-card:not(.is-quiet) {
  color: var(--readable-dark-copy);
  background: linear-gradient(135deg, #155d58, #0d4749);
  border: 1px solid rgba(132, 215, 204, .46);
  box-shadow: 0 14px 32px rgba(8, 63, 64, .18);
}

.detail-hero h3,
.fate-summary h3,
.technique-summary h3,
.world-event-card:not(.is-quiet) h3 {
  color: #fff5d5;
}

.detail-hero p,
.fate-summary p,
.technique-summary p,
.world-event-card:not(.is-quiet) p {
  color: #e8f7f3;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
}

.fate-summary small,
.technique-summary small,
.technique-summary span,
.world-event-card:not(.is-quiet) small {
  color: #d0eee8;
  font-size: 10px;
  font-weight: 700;
}

.world-event-card.is-quiet small {
  color: var(--readable-label);
  font-size: 10px;
  font-weight: 800;
}

.technique-summary b,
.world-event-card:not(.is-quiet) em { color: #f4d47e; }

.world-event-card:not(.is-quiet) .world-event-forecast span {
  color: #effbf8;
  background: rgba(255, 255, 255, .11);
  border-color: rgba(210, 240, 234, .28);
  font-size: 10px;
  font-weight: 600;
}

.world-event-card:not(.is-quiet) .world-event-forecast b {
  color: #ffdf86;
  font-size: 9px;
  font-weight: 800;
}

.detail-grid > div,
.map-place,
.inventory-list article,
.people-list article,
.save-grid button,
.import-button,
.fate-mark,
.technique-slots article,
.technique-card,
.world-event-card.is-quiet,
.sect-ledger {
  color: var(--readable-copy);
  background: rgba(255, 255, 255, .96);
  border-color: rgba(24, 96, 101, .3);
  box-shadow: 0 7px 20px rgba(11, 69, 72, .055);
}

.detail-grid small,
.detail-list dt,
.map-place small,
.map-place em,
.inventory-list h3 small,
.people-list p,
.people-list small,
.log-list time,
.save-grid span,
.fate-mark small,
.fate-pending span,
.fate-history time,
.world-history time,
.technique-slots span,
.technique-slots small,
.technique-card small,
.technique-card em,
.npc-life h3 em,
.npc-life > b,
.npc-life summary,
.sect-ledger header span,
.sect-numbers small {
  color: var(--readable-meta);
  font-size: 10px;
  font-weight: 700;
}

.detail-grid b,
.detail-list dd,
.map-place b,
.inventory-list h3,
.people-list h3,
.save-grid b,
.fate-mark h3,
.fate-pending h3,
.fate-threads h3,
.fate-history h3,
.world-history h3,
.technique-slots b,
.technique-card h3,
.world-event-card.is-quiet h3,
.sect-ledger header b {
  color: var(--readable-heading);
}

.detail-list dd,
.map-place p,
.inventory-list p,
.inventory-list--illustrated p,
.people-list span,
.log-list p,
.fate-mark p,
.fate-pending p,
.fate-threads > div,
.fate-history p,
.world-history p,
.technique-card p,
.world-event-card.is-quiet p,
.sect-ledger p,
.npc-life details p {
  color: var(--readable-copy);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.65;
}

.inventory-list--illustrated article > div > small {
  color: var(--readable-label);
  font-size: 10px;
  font-weight: 800;
}

.map-place.is-current,
.technique-slots article.is-filled,
.technique-card.is-equipped {
  background: linear-gradient(135deg, #e2f5f0, #fff8e3);
  border-color: rgba(22, 113, 109, .55);
}

.fate-pending {
  color: #5d3612;
  background: #fff1ca;
  border-color: #b9852e;
}

.fate-threads > div em,
.fate-mark h3 em,
.technique-card em,
.sect-numbers b {
  color: var(--readable-gold);
}

.technique-card button,
.fate-pending button,
.sect-ledger button,
.world-event-card button,
.inventory-list button {
  color: #f8fffd;
  background: #156b67;
  border: 1px solid #156b67;
  font-size: 10px;
  font-weight: 700;
}

.technique-card button:disabled,
.world-event-card button:disabled {
  color: #3f5e62;
  background: #dce9e6;
  border-color: rgba(50, 92, 96, .28);
}

.mobile-action-menu button {
  color: var(--readable-copy);
  background: linear-gradient(135deg, #ffffff, #e8f7f4);
  border-color: rgba(25, 102, 106, .34);
}

.mobile-action-menu b { color: var(--readable-heading); font-weight: 600; }
.mobile-action-menu small { color: var(--readable-meta); font-size: 10px; font-weight: 600; }

/* Settlement and cultivation overlays use the same hierarchy. */
.settlement-modal,
.ritual-modal,
.ritual-content {
  color: var(--readable-copy);
  background: linear-gradient(145deg, #fbfffe, #e4f3ef);
  border-color: rgba(23, 101, 105, .45);
}

.settlement-modal > header small,
.ritual-content > header small,
.ritual-context small,
.ritual-methods small,
.settlement-result small,
.settlement-result__rarity {
  color: var(--readable-label) !important;
  font-size: 10px !important;
  font-weight: 800;
}

.settlement-modal > header h2,
.ritual-content > header h2,
.settlement-result b,
.ritual-context b,
.ritual-methods b {
  color: var(--readable-heading);
}

.settlement-modal > header p,
.settlement-result p,
.settlement-time small,
.ritual-content > header p,
.ritual-methods em {
  color: var(--readable-copy);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.65;
}

.settlement-result,
.ritual-context > span,
.ritual-methods button {
  color: var(--readable-copy);
  background: rgba(255, 255, 255, .94);
  border-color: rgba(24, 99, 103, .3);
}

.ritual-cancel {
  color: #355b61;
  font-size: 10px;
  font-weight: 700;
}

.settlement-modal > header > span {
  color: var(--readable-gold);
  font-size: 10px;
  font-weight: 800;
}

.ritual-art__caption small,
.ritual-progress small,
.ritual-progress span em,
.ritual-resolving b {
  color: #ecfffc;
  font-size: 9px;
  font-weight: 700;
  opacity: 1;
  text-shadow: 0 2px 8px rgba(0, 27, 31, .96);
}

.ritual-art__caption span { color: #f5fffd; font-weight: 600; }
.ritual-progress { background: rgba(4, 51, 59, .86); }

/* Combat remains atmospheric, but no information is allowed to fade away. */
.combat-card--cinematic .combat-card__head p,
.combat-fighter small,
.combat-fighter em,
.combat-card--cinematic .combat-actions small {
  color: #cfeee9;
  font-size: 9px;
  font-weight: 700;
}

.combat-card--cinematic .combat-message {
  color: #def5f1;
  background: rgba(4, 49, 55, .78);
  border-color: #6bd1c7;
  font-size: 11px;
}

.combat-card--cinematic .combat-actions button.is-lacking {
  color: #afc8c4;
  background: rgba(9, 55, 60, .68);
}

/* Microcopy in the permanent game chrome must be small, never faint. */
.time small,
.status-card__divider span,
.realm-line > b em,
.location-chip > span small,
.world-stage__location em,
.world-stage__location > div em,
.world-omen small,
.world-omen em,
.action-dock > p > small,
.action-dock > button > em,
.story-choice > span,
.combat-round small {
  font-size: 9px;
  font-weight: 700;
}

.world-stage__location em,
.world-stage__location > div em {
  color: #f8fff9;
  font-size: 9px;
  font-weight: 700;
  text-shadow: 0 2px 9px rgba(0, 26, 29, .94);
}

.world-omen small { color: #dcf5ef; }
.world-omen em { color: #d8f3ec; }

.scene-card__kicker,
.scene-card__eyebrow {
  font-size: 10px;
}

.action-dock > p > small { color: #365f67; }

.action-dock > button > em {
  color: rgba(31, 101, 106, .52);
}

.scene-choices {
  scrollbar-color: rgba(24, 108, 109, .46) rgba(219, 239, 235, .72);
  scrollbar-width: thin;
}

.scene-choices::-webkit-scrollbar { width: 7px; }
.scene-choices::-webkit-scrollbar-track { background: rgba(219, 239, 235, .72); border-radius: 9px; }
.scene-choices::-webkit-scrollbar-thumb { background: rgba(24, 108, 109, .46); border-radius: 9px; }

/* Daylight exposure pass: lift the whole product without flattening each location's mood. */
html { color-scheme: light; }

.landing { background-color: #dcefeb; }

.landing__backdrop {
  filter: saturate(1.03) brightness(1.15) contrast(.94);
}

.landing::before {
  background:
    linear-gradient(90deg, rgba(5, 32, 32, .64) 0%, rgba(7, 39, 39, .46) 36%, rgba(11, 45, 45, .08) 72%),
    linear-gradient(180deg, rgba(5, 31, 31, .02) 48%, rgba(5, 31, 31, .46));
}

.account-shell,
.profiles-shell {
  background: #e9f5f2;
}

.account-shell__scene,
.profiles-shell__scene {
  filter: saturate(.98) brightness(1.15) contrast(.94);
  animation-name: readable-scene-breathe;
}

.account-shell::before,
.profiles-shell::before {
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 239, 187, .34), transparent 28%),
    linear-gradient(90deg, rgba(250, 255, 253, .86) 0 32%, rgba(232, 247, 243, .52) 59%, rgba(207, 236, 229, .2) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(45, 112, 109, .06));
}

.account-shell::after,
.profiles-shell::after,
.creation-shell::after { opacity: .1; }

.creation-shell { background: #eef7f3; }

.creation-sky {
  filter: saturate(.92) brightness(1.1) contrast(.94);
}

.game-shell { background: #dcefeb; }
.world-stage { background: #b8d8d3; }

.world-stage__art {
  filter: saturate(1.02) brightness(1.14) contrast(.94);
}

.world-stage[data-location="market"] .world-stage__art {
  filter: saturate(1.03) brightness(1.2) contrast(.93);
}

.world-stage[data-location="valley"] .world-stage__art {
  filter: saturate(1.04) brightness(1.2) contrast(.93);
}

.world-stage[data-location="cavern"] .world-stage__art {
  filter: saturate(1.01) brightness(1.3) contrast(.9);
}

.world-stage__shade {
  background:
    radial-gradient(ellipse at 52% 30%, rgba(231, 250, 246, .16), transparent 58%),
    linear-gradient(180deg, rgba(20, 64, 58, .01), rgba(19, 68, 62, .03) 48%, rgba(10, 48, 43, .14) 76%, rgba(6, 36, 32, .44) 100%),
    linear-gradient(90deg, rgba(11, 48, 42, .28), transparent 27% 73%, rgba(10, 43, 38, .22));
}

.world-stage[data-location="valley"] .world-stage__shade,
.world-stage[data-location="cavern"] .world-stage__shade {
  background:
    radial-gradient(ellipse at 44% 22%, rgba(192, 236, 248, .24), transparent 58%),
    linear-gradient(90deg, rgba(5, 32, 37, .38), transparent 29% 71%, rgba(4, 28, 34, .32)),
    linear-gradient(180deg, rgba(8, 39, 43, .02), rgba(7, 40, 44, .09) 64%, rgba(4, 30, 33, .5));
}

.world-stage__light {
  top: -38%;
  left: 20%;
  width: 62%;
  height: 138%;
  opacity: .34;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 214, .72), transparent);
  filter: blur(48px);
  animation-name: readable-light-breathe;
}

.world-stage[data-location="valley"] .world-stage__light,
.world-stage[data-location="cavern"] .world-stage__light {
  opacity: .32;
  background: linear-gradient(90deg, transparent, rgba(158, 224, 247, .76), transparent);
}

.world-stage__mist { opacity: .25; }

.panel-backdrop {
  background: rgba(12, 53, 51, .42);
  backdrop-filter: blur(5px) saturate(.96);
}

.settlement-backdrop {
  background: rgba(12, 53, 51, .38);
  backdrop-filter: blur(7px) saturate(.94);
}

@keyframes readable-scene-breathe {
  to { filter: saturate(1.02) brightness(1.19) contrast(.95); transform: scale(1.012); }
}

@keyframes readable-light-breathe {
  to { opacity: .46; transform: rotate(16deg) translateX(8%); }
}

@media (max-width: 1440px) {
  .status-card__head {
    grid-template-columns: 46px minmax(0, 1fr) 28px;
    gap: 8px;
  }

  .status-card .avatar-sigil { width: 44px; height: 44px; }
  .status-card__head h2 { font-size: 21px; letter-spacing: .06em; }
}

@media (max-height: 760px) and (min-width: 761px) {
  .status-card { padding: 14px 12px; }
  .status-card__head { margin: 3px 0 10px; }
  .status-card__divider { margin-bottom: 8px; }
  .realm-line { margin-bottom: 11px; padding: 7px 8px; }
  .realm-line span { font-size: 18px; }
  .status-card .resource { margin: 9px 0; }
  .resource > div:first-child { margin-bottom: 5px; }
  .status-card .meter { height: 6px; }
  .currency-row { margin: 12px 0 10px; padding: 9px 3px; }
  .system-mini-grid { margin-bottom: 8px; gap: 6px; }
  .system-mini-grid button { min-height: 46px; padding: 6px; }
  .system-mini-grid button > i { width: 25px; height: 25px; }
  .system-mini-grid button > span { font-size: 11px; }
  .system-mini-grid small { font-size: 8.5px; }
  .location-chip { padding: 10px; }
  .location-chip > b { font-size: 17px; }
}

@media (max-width: 760px) {
  .landing::before {
    background: linear-gradient(180deg, rgba(7, 37, 37, .02), rgba(7, 37, 37, .12) 42%, rgba(5, 31, 31, .58) 86%);
  }

  .world-stage__shade {
    background:
      radial-gradient(ellipse at 50% 25%, rgba(226, 248, 244, .15), transparent 58%),
      linear-gradient(180deg, rgba(7, 42, 39, .02), rgba(7, 42, 39, .08) 48%, rgba(5, 34, 31, .34) 78%, rgba(4, 29, 27, .56));
  }

  .brand > i.brand-emblem,
  .account-brand > i.brand-emblem,
  .profiles-header .brand > i.brand-emblem,
  .topbar .brand > i.brand-emblem {
    display: block;
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .landing .feature-row { font-size: 11px; }

  .account-card__heading > span,
  .profiles-heading > span,
  .profile-card__identity em,
  .profile-card__where em,
  .creation-shell .section-heading p,
  .creation-shell .choice-card__desc { font-size: 11px; }

  .side-panel > header { min-height: 82px; }
  .side-panel > header h2 { font-size: 25px; }
  .side-panel__body { height: calc(100% - 82px); }

  .combat-fighter small,
  .combat-fighter em,
  .combat-card--cinematic .combat-actions small { font-size: 8px; }

  .combat-card--cinematic .combat-message { font-size: 10px; }
  .ritual-content > header p,
  .ritual-methods em { font-size: 10px; }
}

/* Main narrative scale: use the available center stage instead of leaving a small island of text. */
@media (min-width: 761px) {
  .scene-card,
  .combat-card {
    max-width: 980px;
    padding: 28px 34px 26px;
  }

  .free-action { max-width: 980px; }

  .scene-card__kicker,
  .scene-card__eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
  }

  .scene-card h1 {
    margin-top: 6px;
    font-size: clamp(32px, 2.35vw, 40px);
  }

  .scene-card__seal {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .scene-card__rule { margin: 15px 0 13px; }

  .scene-card__text {
    font-size: 18px;
    font-weight: 550;
    line-height: 1.82;
    letter-spacing: .045em;
  }

  .scene-choices {
    margin-top: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
  }

  .story-choice {
    min-height: 68px;
    padding: 10px 14px;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 10px;
  }

  .story-choice > span {
    width: 25px;
    height: 25px;
    font-size: 10px;
  }

  .story-choice b { font-size: 14px; }
  .story-choice > small { font-size: 10.5px !important; }
  .story-choice > i { width: 28px; height: 28px; }
}