/* Theme tokens are independent of audience, game rules, and saved learning progress. */
html[data-theme]{
    --bg:#faf7ed;--ink:#203d31;--muted:#526454;--line:#bfceba;--forest:#205b43;--lime:#e6b64a;
    --surface:#fffdf6;--soft:#e5eddc;--card-a:#dce6cb;--card-b:#f4e8c7;--card-c:#d8e9da;--card-d:#f4e7c9;
    --hero-bg:#205b43;--hero-ink:#fffdf6;--hero-highlight:#f4d880;--hero-note:#ecf2e2;
    --button-ink:#fff;--edge:1px;--curve:24px;--button-curve:18px;--shadow:0 3px 12px #203d3110;
    --heading-font:'Manrope',sans-serif;--focus:#a33e16;--decoration:#bfceba44;
    color:var(--ink);background:var(--bg)
}
html[data-theme="ocean"]{
    --bg:#f2faff;--ink:#123e57;--muted:#416276;--line:#b1d5e5;--forest:#126a9b;--lime:#f2c94c;
    --surface:#fff;--soft:#e4f3fa;--card-a:#d4eef9;--card-b:#fff1c2;--card-c:#d9f2e9;--card-d:#e1f2fa;
    --hero-bg:#d9f2fb;--hero-ink:#124b70;--hero-highlight:#126a9b;--hero-note:#285970;
    --curve:20px;--button-curve:28px;--shadow:0 4px 18px #126a9b12;--focus:#a23c18;--decoration:#126a9b12
}
html[data-theme="sunshine"]{
    --bg:#fff9ea;--ink:#3c332c;--muted:#70533e;--line:#d6bb92;--forest:#914025;--lime:#f4c653;
    --surface:#fffcf2;--soft:#f7ecd1;--card-a:#f7e5c5;--card-b:#ffe6a1;--card-c:#e5e9ce;--card-d:#f5d9c0;
    --hero-bg:#f4c653;--hero-ink:#3c332c;--hero-highlight:#803820;--hero-note:#523b25;
    --curve:20px;--button-curve:16px;--heading-font:Georgia,'Times New Roman',serif;
    --shadow:0 3px 0 #d6bb9260;--focus:#125d83;--decoration:#9140250b
}
html[data-theme="playroom"]{
    --bg:#fffdf5;--ink:#182d40;--muted:#425669;--line:#182d40;--forest:#2057bf;--lime:#f4cf47;
    --surface:#fffdf5;--soft:#e9f0fb;--card-a:#d8e6ff;--card-b:#ffe0d5;--card-c:#fff1ad;--card-d:#d8e6ff;
    --hero-bg:#f4cf47;--hero-ink:#182d40;--hero-highlight:#2057bf;--hero-note:#233d52;
    --edge:3px;--curve:18px;--button-curve:14px;--shadow:0 5px 0 #182d40;
    --heading-font:'Manrope',sans-serif;--focus:#a02920;--decoration:#2057bf20
}
html[data-theme="storybook"]{
    --bg:#fbf5e9;--ink:#423b2b;--muted:#655f4c;--line:#c5bea8;--forest:#2b6479;--lime:#e6bf78;
    --surface:#fffcf3;--soft:#eee9da;--card-a:#dfeaf0;--card-b:#f6e0ca;--card-c:#e3e8d3;--card-d:#f6e8ce;
    --hero-bg:#f3ead7;--hero-ink:#423b2b;--hero-highlight:#795126;--hero-note:#605340;
    --curve:26px 18px 24px 16px;--button-curve:24px;--shadow:0 2px 5px #423b2b10;
    --heading-font:Georgia,'Times New Roman',serif;--focus:#984321;--decoration:#788c5815
}
html[data-theme] body{background:var(--bg);background-image:radial-gradient(var(--decoration) .65px,transparent .65px);background-size:9px 9px}
html[data-theme] :is(h1,h2,h3,.brand,.kids-catalogue-card>strong,.family-card strong){font-family:var(--heading-font)}
html[data-theme] .sidebar{background:var(--surface);border-color:var(--line)}
html[data-theme] :is(.brand-mark i,.filter.active,.site-mode-switch button[aria-pressed="true"]){background:var(--forest);color:var(--button-ink);border-color:var(--forest)}
html[data-theme] .brand{transform:none}
html[data-theme] :is(.nav button.active,.nav button:hover,.tour-invite,.close,.switcher,.stat-icon,.log-entry,.tags span,.coming,.timer){background:var(--soft);color:var(--ink);border-color:var(--line);box-shadow:none}
html[data-theme] :is(.breadcrumb,.breadcrumb strong,.nav button,.intro p,.section-head p,.game-body p,.family-card small,.stat p,.stat-note,.footer,.empty-inline,.friends-panel p,.form-note,.activity-caption,.activity-empty,.kids-instructions,.kids-practice-note,.kids-audio-note,.kids-feedback,.kids-catalogue-card small,.tour-invite>div>span){color:var(--muted)}
html[data-theme] :is(.text-link,.tour-replay,.card-cta,.question-label,.arena-top,.stat strong,.log-meta strong,.kids-progress,.kids-level-map small,.extra-settings>.section-heading,.tour-controls .ghost-btn,#tour-count){color:var(--forest)}
html[data-theme] #favorites-filter.active{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
html[data-theme] :is(.game-card,.kids-catalogue-card,.family-card,.arena,.activity-panel,.history-panel,.friends-panel,.stat,.dialog,.tour-card){border:var(--edge) solid var(--line);border-radius:var(--curve);box-shadow:var(--shadow);background:var(--surface)}
html[data-theme] :is(.game-card.playable:hover,.family-card:hover,.kids-catalogue-card:hover){transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--forest)}
html[data-theme] .hero{background:var(--hero-bg);color:var(--hero-ink);border:var(--edge) solid var(--line);border-radius:var(--curve);box-shadow:var(--shadow)}
html[data-theme] .hero h2>span{color:var(--hero-highlight)}
html[data-theme] :is(.hero p,.hero-foot,.hero-foot button){color:var(--hero-note)}
html[data-theme] .hero .pill{color:var(--hero-ink);border-color:currentColor;background:transparent}
html[data-theme] .hero .dot{background:var(--hero-highlight)}
html[data-theme] .hero:before{background-image:radial-gradient(ellipse at bottom right,var(--hero-highlight) 0,transparent 65%);opacity:.12}
html[data-theme] .orbit,html[data-theme] .orbit:before,html[data-theme] .orbit:after{border-color:var(--hero-highlight)}
html[data-theme] :is(.dark-btn,.primary-btn,.kids-game .dark-btn){background:var(--forest);color:var(--button-ink);border:var(--edge) solid var(--forest);border-radius:var(--button-curve);box-shadow:var(--shadow)}
html[data-theme] :is(.outline-btn,.site-mode-switch,.filter,.favorite,.player-chip){background:var(--surface);color:var(--ink);border-color:var(--line);border-radius:var(--button-curve);box-shadow:none}
html[data-theme] .hero-actions .dark-btn{background:var(--lime);border-color:var(--lime);color:var(--ink)}
html[data-theme] :is(.field input,.field select,.kids-player-field select,.answer-form input,.chat-form input){color:var(--ink);border-color:var(--line);background:var(--surface)}
html[data-theme] :is(.mini-tile,.letter-tile,.letter-tiles span,.question-tile){color:var(--ink);border-color:var(--line);background:var(--surface);box-shadow:var(--shadow)}
html[data-theme] :is(.game-visual,.kids-catalogue-card.kids-memory){background:var(--card-a)}
html[data-theme] :is(.game-visual.sky,.kids-catalogue-card.kids-odd,.family-card.dinosaurs){background:var(--card-c)}
html[data-theme] :is(.game-visual.peach,.kids-catalogue-card.kids-maths,.family-card.pokemon){background:var(--card-b)}
html[data-theme] :is(.kids-catalogue-card.kids-reading,.family-card.animals){background:var(--card-d)}
html[data-theme] .game-visual{border-color:var(--line)}
html[data-theme] :is(.kids-choice,.kids-levels label,.memory-card,.kids-count){background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none}
html[data-theme] :is(.kids-choice:hover,.kids-levels label:has(input:checked),.memory-card:hover,.kids-count:hover,.kids-count[aria-pressed="true"]){background:var(--soft);border-color:var(--forest)}
html[data-theme] .memory-card.face-up{background:var(--card-b)}
html[data-theme] :is(.memory-card.matched,.kids-choice.answer-correct){background:#e1f0c9;border-color:#527820}
html[data-theme] :is(.kids-levels input,.kids-player-field select){accent-color:var(--forest)}
html[data-theme] :is(.reading-story,.kids-visual){background:var(--card-b);color:var(--ink)}
html[data-theme] .progress{background:var(--soft)}
html[data-theme] .progress i{background:var(--forest)}
html[data-theme] .dialog::backdrop{background:#182d4099}
html[data-theme] :is(button,a,input,select,[role="button"]):focus-visible,
html[data-theme] .kids-level-map label:has(input:focus-visible){outline-color:var(--focus)}
html[data-theme="woodland"] .hero{border-radius:44px 22px 44px 22px}
html[data-theme="ocean"] .hero:before{opacity:.4;background:radial-gradient(ellipse at 90% 125%,#126a9b 0 27%,transparent 27.5%),radial-gradient(ellipse at 20% 130%,#137f7b 0 24%,transparent 24.5%)}
html[data-theme="sunshine"] .hero:before{opacity:.4;background:radial-gradient(circle at 85% 30%,#fff9ea 0 12%,transparent 12.5%)}
html[data-theme="playroom"] :is(.hero,.game-card,.kids-catalogue-card,.dark-btn){border-color:var(--ink)}
html[data-theme="playroom"] .kids-catalogue-card.kids-maths{background:#bf382d;color:#fff}
html[data-theme="playroom"] .kids-catalogue-card.kids-maths small{color:#fff}
html[data-theme="playroom"] .brand{transform:rotate(-3deg)}
html[data-theme="storybook"] .hero:before{opacity:.5;background:radial-gradient(ellipse at 0 100%,#788c5833 0 25%,transparent 26%),radial-gradient(ellipse at 100% 100%,#609bb133 0 20%,transparent 21%)}
html[data-theme="storybook"] :is(.game-card,.kids-catalogue-card){border-style:dashed}

/* Theme choices preview the palette without leaving the current game or page. */
.theme-trigger{display:flex;align-items:center;gap:7px;min-height:44px;padding:8px 12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;font-size:13px;font-weight:700}
.theme-trigger-mark{width:17px;height:17px;border-radius:50%;background:conic-gradient(var(--forest) 0 33%,var(--lime) 33% 66%,var(--card-c) 66%);border:1px solid var(--line)}
#theme-dialog{width:calc(100% - 24px);max-width:730px;max-height:calc(100dvh - 24px);overflow:auto}
#theme-dialog .dialog-head{gap:16px}
.theme-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}
.theme-choice{display:flex;flex-direction:column;gap:9px;text-align:left;padding:14px;border:2px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);min-width:0}
.theme-choice[aria-pressed="true"]{border-color:var(--forest);outline:1px solid var(--forest)}
.theme-choice>strong{font-size:18px}.theme-choice>span:not(.theme-preview){font-size:13px;line-height:1.6;color:var(--muted)}
.theme-selected{visibility:hidden;color:var(--forest);font-weight:700}.theme-choice[aria-pressed="true"] .theme-selected{visibility:visible}
.theme-preview{display:flex;align-items:center;gap:6px;background:var(--preview-bg);border-radius:12px;padding:12px;width:100%;min-height:76px}
.theme-preview>span{font-size:30px;margin-right:auto}.theme-preview i{width:21px;height:29px;background:var(--preview-a);border-radius:7px}.theme-preview i:nth-of-type(2){background:var(--preview-b)}.theme-preview i:nth-of-type(3){background:var(--preview-c)}.theme-preview i:nth-of-type(4){background:var(--preview-d)}
.preview-woodland{--preview-bg:#faf7ed;--preview-a:#205b43;--preview-b:#bfd5bb;--preview-c:#e6b64a;--preview-d:#d9cdb7}
.preview-ocean{--preview-bg:#e8f5fb;--preview-a:#126a9b;--preview-b:#137f7b;--preview-c:#f2c94c;--preview-d:#fff}
.preview-sunshine{--preview-bg:#fff9ea;--preview-a:#f4c653;--preview-b:#bf542e;--preview-c:#d77a54;--preview-d:#3c332c}
.preview-playroom{--preview-bg:#fffdf5;--preview-a:#2057bf;--preview-b:#db493b;--preview-c:#f4cf47;--preview-d:#182d40}
.preview-storybook{--preview-bg:#fbf5e9;--preview-a:#609bb1;--preview-b:#c77a48;--preview-c:#788c58;--preview-d:#423b2b}
#theme-status{font-size:14px;line-height:1.6;color:var(--muted);min-height:24px}
@media(max-width:600px){
    .topbar .breadcrumb{display:none}.top-right{width:100%;flex-wrap:wrap;gap:8px}
    .topbar{height:auto;min-height:66px;padding-top:8px;padding-bottom:8px}
    .theme-trigger{padding:8px 10px}.top-right .profile{margin-left:auto}
    .theme-choices{grid-template-columns:1fr}#theme-dialog{padding:20px}
}
@media(max-width:380px){.top-right .profile-name{display:none}.site-mode-switch button{padding:7px 10px}}

/* Quieter options use the same controls and work in either audience mode. */
html[data-theme="slate"]{
    --bg:#f3f5f6;--ink:#24333e;--muted:#51616b;--line:#bdc8ce;--forest:#334b5d;--lime:#dce7ec;
    --surface:#fff;--soft:#e8eef1;--card-a:#e3ebef;--card-b:#f0ede5;--card-c:#e7eeea;--card-d:#e8ecef;
    --hero-bg:#e6edf1;--hero-ink:#24333e;--hero-highlight:#334b5d;--hero-note:#465b69;
    --curve:10px;--button-curve:8px;--shadow:none;--heading-font:'Manrope',sans-serif;--focus:#a03e1e;--decoration:transparent
}
html[data-theme="paper"]{
    --bg:#f6f1e5;--ink:#343127;--muted:#625c4e;--line:#c8bfa9;--forest:#51482f;--lime:#e6dcc1;
    --surface:#fffaf0;--soft:#eee7d6;--card-a:#ece6d5;--card-b:#f1e1c9;--card-c:#e5e7d5;--card-d:#ede8dd;
    --hero-bg:#eee5d1;--hero-ink:#343127;--hero-highlight:#5a613b;--hero-note:#5c5545;
    --curve:6px;--button-curve:6px;--shadow:none;--heading-font:Georgia,'Times New Roman',serif;--focus:#235f7b;--decoration:transparent
}
html[data-theme="midnight"]{
    color-scheme:dark;--bg:#101b24;--ink:#e7eef3;--muted:#b2c2cd;--line:#516777;--forest:#91c6de;--lime:#bdd8e5;
    --surface:#192a37;--soft:#263c4b;--card-a:#243b4a;--card-b:#3a3730;--card-c:#263e3b;--card-d:#2a3643;
    --hero-bg:#1b3040;--hero-ink:#e7eef3;--hero-highlight:#abd6e8;--hero-note:#c2d3de;
    --button-ink:#15232f;--curve:12px;--button-curve:8px;--shadow:none;--heading-font:'Manrope',sans-serif;--focus:#f4c779;--decoration:transparent
}
html:is([data-theme="slate"],[data-theme="paper"],[data-theme="midnight"]) :is(.hero-art,.hero:before,.game-visual .spark,.brand small){display:none}
html:is([data-theme="slate"],[data-theme="paper"],[data-theme="midnight"]) .hero-copy{width:100%;max-width:820px}
html:is([data-theme="slate"],[data-theme="paper"],[data-theme="midnight"]) .hero{min-height:0}
html:is([data-theme="slate"],[data-theme="paper"],[data-theme="midnight"]) .hero h2{font-size:clamp(36px,5vw,56px);letter-spacing:-1px;line-height:1.12}
html:is([data-theme="slate"],[data-theme="paper"],[data-theme="midnight"]) :is(.game-body p,.section-head p,.kids-practice-note,.form-note){font-size:15px;line-height:1.7}
html:is([data-theme="slate"],[data-theme="paper"],[data-theme="midnight"]) :is(.filter,.text-link){font-size:14px;min-height:44px}
html:is([data-theme="slate"],[data-theme="paper"],[data-theme="midnight"]) :is(.game-card.playable:hover,.family-card:hover,.kids-catalogue-card:hover,.dark-btn:hover,.outline-btn:hover){transform:none}
html:is([data-theme="slate"],[data-theme="paper"],[data-theme="midnight"]) :is(.avatar,.brand,.brand small,.section-head h2 small){transform:none}
html[data-theme="midnight"] :is(.hero-actions .dark-btn,.switcher button.selected){color:var(--button-ink)}
/* These chips keep a hardcoded light fill, so they need dark text under a light --ink. */
html[data-theme="midnight"] :is(.nav button .badge,.card-cta>span,.section-head h2 small){color:var(--button-ink);border-color:var(--button-ink)}
html[data-theme="midnight"] #tour-count{background:var(--soft);border-color:var(--line)}
html[data-theme="midnight"] :is(.available,.avatar,.room-badge,.list-box,.hint,.log-entry,.own-message,.reveal,.correct-reveal,.correct-guess,.point-winner,.player-chip.me,.point-award,.public-room,.empty-state,.game-card .available){background:var(--soft);color:var(--ink);border-color:var(--line)}
html[data-theme="midnight"] :is(.kids-choice.answer-correct,.memory-card.matched){background:#264731;color:#e7eef3;border-color:#8bb279}
html[data-theme="midnight"] :is(.correct-reveal>strong,.point-winner strong,.correct-guess .guess-outcome,.empty-inline strong,.profile-name small,.extra-settings>.section-heading>span,.tour-card p,.tour-skip,.log-meta,.guess-outcome,.activity-empty,.answer-feedback,.connection,.footer button){color:var(--muted)}
html[data-theme="midnight"] :is(.form-error,.chat-feedback){color:#ffc1a8}
html[data-theme="midnight"] .list-row{border-color:var(--line)}
html[data-theme="midnight"] .family-card:after{color:var(--ink)}
html[data-theme="midnight"] .letter-tiles span:nth-child(2){background:var(--soft)}
html[data-theme="midnight"] .dialog::backdrop{background:#000b}
.preview-slate{--preview-bg:#f3f5f6;--preview-a:#24333e;--preview-b:#334b5d;--preview-c:#bdc8ce;--preview-d:#fff}
.preview-paper{--preview-bg:#f6f1e5;--preview-a:#343127;--preview-b:#5a613b;--preview-c:#c8bfa9;--preview-d:#e6dcc1}
.preview-midnight{--preview-bg:#101b24;--preview-a:#192a37;--preview-b:#91c6de;--preview-c:#516777;--preview-d:#e7eef3}
html[data-theme="midnight"] :is(.question-text,.kids-game .question-text,.row-name,.score,.eyebrow,#word-progress,.missed-words,.rank){color:var(--ink)}
html[data-theme="midnight"] :is(.score small,.row-name small){color:var(--muted)}
html[data-theme="midnight"] :is(.found-words span,.toast){background:var(--soft);color:var(--ink);border-color:var(--line)}
html[data-theme="trent"]{
 --bg:#faf9f6;--ink:#161616;--muted:#62605c;--line:#d9d5cf;--forest:#161616;--lime:#ff7900;
 --surface:#fff;--soft:#f2efea;--card-a:#f6e7d7;--card-b:#f1efeb;--card-c:#f9dfc9;--card-d:#edeae4;
 --hero-bg:#161616;--hero-ink:#fff;--hero-highlight:#ff7900;--hero-note:#e0dcd6;
 --button-ink:#fff;--focus:#a34400;--decoration:transparent;--curve:18px;--button-curve:12px;
 --shadow:0 3px 12px #1616160d
}
html[data-theme="trent"] .primary-btn{color:#161616}
html[data-theme] .trent-brand{transform:none}
.preview-trent{background:#161616;color:#ff7900}
html[data-theme="trent"] .hero:before{background:radial-gradient(ellipse at 90% 100%,#ff79001f,transparent 65%);background-size:auto;opacity:1}
html[data-theme="trent"] .hero .spark{color:#ff7900}
html[data-theme="trent"] .nav button .badge{background:#ff7900;color:#161616}
html[data-theme="trent"] .hero .art-dot{background:#ff7900}
@media(max-width:360px){html[data-theme] .sidebar{padding-inline:8px;gap:4px}}