/* Interface surfaces follow the selected palette; illustrations keep their materials. */
.theme-menu { left: auto; right: 0; width: min(360px, calc(100vw - 28px)); min-width: 0; max-height: min(calc(100dvh - 120px), var(--theme-menu-space, 500px)); overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 10px; scrollbar-gutter: stable; }
.theme-menu-item { min-height: 44px; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.theme-swatch, .theme-toggle-swatch { border-color: color-mix(in srgb, var(--text-bright) 25%, transparent); }
.theme-menu-item:focus-visible, .theme-toggle-btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.theme-menu-item.active { box-shadow: inset 0 0 0 1px var(--accent-glow); }
.boot-keyboard { background: var(--panel); border-color: var(--border); }
.boot-keyboard i { background: var(--text-muted); }
#coin-wallet { color: var(--warm) !important; background: var(--warm-dim) !important; border-color: var(--warm-border) !important; }

/* Shop shelves, product forms and the chest collection. */
.market-screen { --ink: var(--text); --gold: var(--warm); --market-panel: var(--panel); color: var(--text); }
.market-hero { background: var(--surface-warm); border-color: var(--border); }
.market-awning { background: repeating-linear-gradient(90deg, var(--accent) 0 70px, var(--panel-elevated) 70px 140px); border-bottom-color: var(--border); }
.market-awning::after { background-image: radial-gradient(ellipse at 50% 0, var(--accent-bright) 70%, transparent 73%); }
.market-welcome h1, .market-section-title h2, .market-screen .chest-hero h3 { color: var(--text-bright); }
.market-welcome p, .market-screen .chest-hero p, .market-footnote { color: var(--text-muted); }
.market-eyebrow, .market-section-title > span, .market-inventory, .market-screen .chest-kicker { color: var(--warm); }
.market-purse { background: var(--bg-soft); border-color: var(--border); }
.market-purse strong { color: var(--warm); }
.market-purse span, .market-purse small { color: var(--text-muted); }
.market-shelves > section { background: var(--surface-warm); border-color: var(--border); box-shadow: 0 7px 0 var(--panel-elevated), var(--shadow-sm); }
.market-screen .shop-product { background: var(--bg-soft); color: var(--text); border-color: var(--border); }
.market-screen .rename-product small { color: var(--text-muted); }
.market-screen .rename-mark { background: var(--warm-dim); color: var(--warm); border-color: var(--warm-border); }
.market-screen .rename-price { color: var(--warm); }
.market-screen .chest-shop { color: var(--text); }
.market-screen input { background: var(--panel); color: var(--text-bright); border-color: var(--border); }
.market-screen .rename-preview { background: var(--surface-art); color: var(--text); border-color: var(--border); }
.market-screen .rename-preview strong { color: var(--text-bright); }
.market-screen .rename-preview > span, .market-screen .rename-preview > small,
.market-screen .rename-note, .market-screen .rename-receipt, .market-screen .shop-label { color: var(--text-muted); }
.market-screen .btn-ghost { color: var(--accent-bright); border-color: var(--border); }
.market-screen .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 4px 18px var(--accent-dim); }
.market-screen :is(button, summary, input):focus-visible { outline-color: var(--accent-bright); }
.chest-shop { background: var(--surface-art); border-color: var(--border); color: var(--text); }
.chest-kicker { color: var(--accent-bright); }
.chest-tile { background: var(--bg-soft); border-color: var(--border); color: var(--text); }
.chest-tile[aria-pressed=true] { background: var(--accent-dim); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.chest-tile small { color: var(--text-muted); opacity: 1; }
.chest-boost { background: var(--surface-art); border-color: var(--border); }
.chest-boost progress { accent-color: var(--success); }
.chest-sell { color: var(--warm); background: var(--warm-dim); border-color: var(--warm-border); }
.chest-sell:hover { background: color-mix(in srgb, var(--warm) 20%, var(--panel)); }
.chest-dialog, .chest-detail-dialog { background: var(--panel); color: var(--text); border-color: var(--border); box-shadow: var(--shadow); }
.chest-dialog::backdrop, .ascension-dialog::backdrop, .secret-dialog::backdrop { background: var(--scene-scrim); }
.chest-reveal { background: radial-gradient(ellipse at 50% 20%, var(--accent-dim), transparent 65%); }
.chest-opening-title, .chest-detail-content h2, .chest-prize h2 { color: var(--text-bright); }
.chest-prize p, .chest-reveal-note, .chest-detail-help { color: var(--text-muted); }
.chest-roll-card { background: var(--bg-soft); border-color: var(--border); }
.chest-carousel { background: var(--surface-art); border-block-color: var(--border); }
.chest-spin-progress { background: var(--panel-soft); }
.chest-spin-progress i { background: linear-gradient(90deg, var(--accent), var(--warm)); }
.chest-roll-card > span:last-child { color: var(--text); }
.chest-roll-card.is-winner { background: var(--accent-dim); }
.chest-detail-bonus { background: var(--bg-soft); border-color: var(--border); }
.chest-detail-bonus h3 { color: var(--success-bright); }
.chest-detail-close { color: var(--text-muted); background: var(--bg-soft); }
.chest-tile[data-item='world_lord'] { background: var(--surface-warm); border-color: var(--warm-border); }
.chest-tile[data-item='world_lord'] small { color: var(--text-muted); }
.profile-tabs { background: var(--bg-soft); border-color: var(--border); }
.profile-tabs button[aria-selected=true] { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.profile-tabs button:focus-visible { outline-color: var(--accent-bright); }
.council-notice button { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chest-detail-dialog button:focus-visible, .chest-shop button:focus-visible { outline-color: var(--accent-bright); }

/* Forge surfaces and a separate light stone illustration. */
.forge { --forge-gold: var(--warm); --forge-ink: var(--text-bright); }
.forge-room { border-color: var(--border); background: var(--bg-soft); }
.forge-workbench { background: var(--surface-art); border-color: var(--border); color: var(--text); }
.forge-slot { background: var(--bg-soft); color: var(--text-muted); border-color: var(--border); }
.forge-slot:hover { background: var(--accent-dim); border-color: var(--accent); }
.forge-recipe { color: var(--text-muted); }
.forge-message { color: var(--warm); }
.forge-start { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 20px var(--accent-dim); }
.forge-filters [aria-pressed=true] { border-color: var(--accent); background: var(--accent-dim); color: var(--accent-bright); }
.forge-item[aria-pressed=true] { opacity: .75; }
.forge-slot:focus-visible, .forge-item:focus-visible { outline-color: var(--accent-bright); }
.forge-result strong { background: var(--panel); color: var(--text-bright); border-color: var(--warm-border); }
:root[data-theme-tone='light'] .forge-room-title { text-shadow: none; }
:root[data-theme-tone='light'] .forge-room-title h3 { color: #3b332b; }
:root[data-theme-tone='light'] .forge-room-title > span { color: #75511c; }
:root[data-theme-tone='light'] .forge-room-title p { color: #594f43; }
.ascension-dialog, .ascension-film { background: var(--surface-art); color: var(--text); border-color: var(--border); }
.ascension-film h2 { color: var(--text-bright); }
.ascension-film header > span, .ascension-chapter { color: var(--warm); }
.ascension-story, .sovereign-dialog .ascension-story { color: var(--text); }
.ascension-clock, .ascension-film footer p { color: var(--text-muted); }
.ascension-timeline progress { accent-color: var(--accent); }
.sovereign-dialog { background: var(--panel) !important; border-color: var(--warm-border) !important; box-shadow: var(--shadow) !important; }
.sovereign-dialog::backdrop { background: var(--scene-scrim); }
.sovereign-dialog .ascension-film { background: var(--surface-art); }
.sovereign-dialog header h2 { color: var(--text-bright); }
.sovereign-dialog header span { color: var(--accent-bright); }

/* City chrome, construction statistics, builders and the treasury. */
.academy-scene, .boss-valley { color: var(--text); background: var(--surface-art); border-color: var(--border); box-shadow: var(--shadow-sm); }
.city-overview { background: var(--surface-art); border-bottom-color: var(--border); }
.city-heading h2 { color: var(--text-bright); }
.city-heading p, .city-seal span { color: var(--text-muted); }
.city-seal { background: var(--warm-dim); border-color: var(--warm-border); }
.city-seal strong { color: var(--warm); }
.academy-eyebrow { color: var(--warm); }
.academy-heading h2, .boss-valley h2 { color: var(--text-bright); }
.academy-heading p, .boss-valley header p { color: var(--text-muted); }
.academy-live { color: var(--success-bright); background: var(--success-dim); border-color: var(--success-glow); }
.academy-arrival, .academy-finished { color: var(--text-bright); background: var(--panel); border-color: var(--warm-border); }
.academy-progress strong, .academy-price span { color: var(--warm); }
.academy-progress span, .academy-progress small, .academy-purchase small { color: var(--text-muted); }
.academy-message { color: var(--warm); }
.academy-progress progress { background: var(--panel-soft); accent-color: var(--accent); }
.academy-progress progress::-webkit-progress-bar { background: var(--panel-soft); }
.academy-progress progress::-webkit-progress-value { background: var(--accent); }
.academy-progress progress::-moz-progress-bar { background: var(--accent); }
.academy-purchase { background: var(--bg-soft); border-color: var(--border); }
.academy-purchase button { background: var(--accent); color: var(--accent-ink); }
.academy-reward { background: var(--surface-warm); border-color: var(--warm-border); }
.academy-reward strong { color: var(--warm); }
.academy-reward p { color: var(--text-muted); }
.academy-reward b { color: var(--success-bright); }
.academy-recent h3, .academy-recent [data-builders-list] { color: var(--text-muted); }
.academy-recent [data-builders-list] span { background: var(--bg-soft); border-color: var(--border); }
.city-build-stages li { color: var(--text-muted); background: var(--bg-soft); border-color: var(--border); }
.city-build-stages .done { color: var(--success-bright); background: var(--success-dim); }
.city-build-stages .current { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: 0 0 20px var(--accent-dim); }
.city-heroes { background: var(--surface-art); border-color: var(--border); box-shadow: var(--shadow-sm); }
.city-heroes h3, .city-heroes strong { color: var(--text-bright); }
.city-heroes > p, .city-heroes > small, .city-heroes .city-heroes-empty, .city-hero-rank { color: var(--text-muted); }
.city-heroes li b, .city-heroes li:first-child strong { color: var(--warm); }
.city-council { background: var(--surface-warm); color: var(--text); border-color: var(--warm-border); }
.city-council header > span { color: var(--warm); }
.city-council p, .council-seat details, .council-seat small, .city-council footer small { color: var(--text-muted); }
.council-seat { color: var(--text-muted); background: var(--bg-soft); border-color: var(--border); }
.council-seat[data-place='1'] { color: var(--warm); background: var(--warm-dim); border-color: var(--warm-border); }
.council-seat[data-place='2'] { color: var(--text-muted); }
.council-seat[data-place='3'] { color: var(--accent-bright); }
.council-name { color: var(--text-bright); }
.council-balance { color: var(--warm); }
.council-seal { color: var(--success-bright); }
.city-council .council-arrival { color: var(--warm); border-color: var(--warm-border); background: var(--warm-dim); }
.city-map { background: radial-gradient(ellipse at 50% 48%, var(--terrain-soft), transparent 75%), repeating-linear-gradient(35deg, #ffffff04 0 3px, transparent 3px 25px), var(--terrain); border-color: var(--border); }
.city-map-scroll { scrollbar-color: var(--accent) var(--bg-soft); }
.city-map-scroll::after { color: var(--text-muted); }
.city-plot { color: var(--terrain-ink); }
.city-plot small { color: var(--terrain-muted); }
.city-plot.active { border-color: var(--terrain-ink); }
.city-plot.active small { color: var(--terrain-ink); }
.city-plot[aria-pressed=true] { border-color: var(--terrain-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--terrain-ink) 13%, transparent); }
.city-legend { color: var(--text-muted); }
.city-legend b { color: var(--warm); }
.valley-total span, .valley-total small, .valley-stats span, .valley-note { color: var(--text-muted); }
.valley-total strong, .valley-stats b, .valley-boss-list b { color: var(--warm); }
.valley-stats > div, .valley-boss-list > div { background: var(--bg-soft); border-color: var(--border); }
.valley-shop-link { background: var(--surface-warm); border-color: var(--border); }

/* Lesson cards and floating notifications. */
.class-portal { background: var(--surface-art); border-color: var(--border); color: var(--text); }
.class-portal-copy strong { color: var(--text-bright); }
.class-portal progress { accent-color: var(--accent); }
.class-portal.unlocked { border-color: var(--success-glow); }
.lesson-bank, .card.lesson-bank { background: var(--surface-art); color: var(--text); border-color: var(--success-glow); }
.lesson-bank h2 { color: var(--text-bright); }
.lesson-bank strong { color: var(--success-bright); }
.lesson-bank small, .lesson-bank .bank-amount, .bank-foot { color: var(--text-muted); }
.bank-foot summary { color: var(--success-bright); }
.lesson-bank progress, .lesson-bank progress::-webkit-progress-bar { background: var(--panel-soft); }
.lesson-bank progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), var(--success)); }
.lesson-bank progress::-moz-progress-bar { background: linear-gradient(90deg, var(--accent), var(--success)); }
/* Boss colours tint the selected surface; their original dark gradients must
   not override light-theme text through the data-boss selector. */
.class-boss { --boss-hue: #ec7144; }
.class-boss[data-boss=frost] { --boss-hue: #80e8ff; }
.class-boss[data-boss=storm] { --boss-hue: #c49cff; }
.class-boss[data-boss=hydra] { --boss-hue: #72e5ad; }
.class-boss[data-boss=void] { --boss-hue: #ec99da; }
.class-boss[data-boss=sand] { --boss-hue: #e6bd73; }
.class-boss[data-boss=spider] { --boss-hue: #bc9de7; }
.class-boss[data-boss=kraken] { --boss-hue: #77cadd; }
.class-boss[data-boss=mirror] { --boss-hue: #e1a1ed; }
.class-boss[data-boss=chrono] { --boss-hue: #e8cb7e; }
.class-boss[data-boss=roshan] { --boss-hue: #c77b55; }
.class-boss, .class-boss[data-boss] {
  background: radial-gradient(ellipse at 10% 50%, color-mix(in srgb, var(--boss-hue) 10%, transparent), transparent 58%), var(--panel);
  color: var(--text);
  border-color: color-mix(in srgb, var(--boss-hue) 50%, var(--border));
  box-shadow: var(--shadow-sm);
}
.class-boss[data-state=won] {
  background: radial-gradient(ellipse at 10% 50%, var(--warm-dim), transparent 70%), var(--panel);
  border-color: var(--warm-border);
}
.boss-heading h2 { color: var(--text-bright); }
.boss-eyebrow, .boss-timer, .boss-numbers { color: var(--warm); }
.boss-timer { background: var(--warm-dim); border-color: var(--warm-border); }
.class-boss details { color: var(--text-muted); }
.class-boss progress, .class-boss progress::-webkit-progress-bar { background: var(--panel-soft); }
.boss-toast { background: var(--panel); color: var(--text); border-color: var(--warm-border); }
.boss-toast p { color: var(--text-muted); }
.boss-toast button { color: var(--text-muted); }
.boss-hazard-label { color: var(--text-bright); background: var(--panel); border-color: var(--border); }
.caravan-dock { background: var(--panel); color: var(--text); border-color: var(--warm-border); box-shadow: var(--shadow-sm); }
.caravan-dock strong { color: var(--success-bright); }
.caravan-dock button { background: var(--accent); color: var(--accent-ink); }
.caravan-event footer { background: var(--panel); color: var(--text); border-color: var(--warm-border); }
.caravan-chest b { color: var(--warm); }
.caravan-chest span, .caravan-rules span { color: var(--text-muted); }
.caravan-rewards li { background: var(--panel); color: var(--success-bright); border-color: var(--success-glow); }
.caravan-close { background: var(--panel); color: var(--text-muted); }
.portal-celebration { background: var(--panel); color: var(--text); border-color: var(--border); }
.portal-celebration::backdrop { background: var(--scene-scrim); }
.portal-celebration-copy > span { color: var(--accent-bright); }
.portal-bonus-big { color: var(--success-bright); }
.endless-portal { background: var(--surface-art); color: var(--text); border-color: var(--border); }
.endless-portal p { color: var(--text-muted); }
.endless-portal .eyebrow, .endless-portal .portal-orbit span { color: var(--accent-bright); }

/* Secret rooms and their forms. */
.secret-dialog { background: var(--surface-warm); color: var(--text); border-color: var(--warm-border); }
.secret-dialog h2 { color: var(--text-bright); }
.secret-dialog small { color: var(--text-muted); }
.secret-dialog input { background: var(--bg-soft); color: var(--text-bright); border-color: var(--border); }
.secret-close { color: var(--text-muted); }
.secret-toast { background: var(--panel); color: var(--success-bright); border-color: var(--success-glow); }
.secret-city-tools button { background: var(--panel-soft); color: var(--text); border-color: var(--border); }
.secret-city-tools .secret-rune { color: var(--warm); background: transparent; border-color: var(--warm-border); }
.secret-history { background: var(--warm-dim); border-color: var(--warm-border); }
.secret-history blockquote { color: var(--text); border-color: var(--warm); }
.secret-garden-names span { background: var(--success-dim); border-color: var(--success-glow); color: var(--text); }
.public-profile-overlay { background: var(--scene-scrim); }
.public-profile-kpis span { color: var(--text-muted); }

@media (max-width: 640px) {
  .theme-menu { position: fixed; left: 14px; right: 14px; bottom: 88px; top: auto; width: auto; max-height: min(70dvh, calc(100dvh - 110px)); }
}