/* Theme contract: component rules use semantic tokens with their original light
   colour as fallback. New themes define this palette, not copies of components.
   Artwork, faction colours, combat effects and map illustrations keep their colours. */
:root { color-scheme:light; }
/* Keep native scrolling and platform touch scrollbars; reserve only the page gutter. */
@media (forced-colors:none) {
    :root { scrollbar-color:var(--theme-muted,#637d85) var(--theme-canvas,#f6faf8); }
}
@media (pointer:fine) and (forced-colors:none) {
    * { scrollbar-width:thin; }
}
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) {
    color-scheme:dark;
    --theme-canvas:#101f32;
    --theme-surface:#20364d;
    --theme-elevated:#294257;
    --theme-soft:#29465b;
    --theme-hover:#345d73;
    --theme-field:#152a40;
    --theme-button:#246b80;
    --theme-ink:#f0f4f8;
    --theme-muted:#bbcddd;
    --theme-line:#425d77;
    --theme-accent:#65e1d5;
    --theme-gold:#ffd084;
    --theme-danger:#ffabb3;
    --theme-success:#87dfb2;
    --theme-decoration:#8cdcd51a;
    --theme-glow:#56c8bc24;
    --theme-warm-glow:#e6bd7020;
    --ink:var(--theme-ink);
    --muted:var(--theme-muted);
    --teal:var(--theme-accent);
    --orange:var(--theme-gold);
    --line:var(--theme-line);
    --paper:var(--theme-canvas);
}
.theme-picker { display:inline-flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--theme-line,#bddcde);border-radius:999px;background:var(--theme-soft,#e8f4f2);position:relative;flex-shrink:0;margin:0; }
.theme-picker button { display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--theme-muted,#547580);cursor:pointer;font-size:23px;line-height:1; }
.theme-picker button[aria-pressed="true"] { background:var(--theme-surface,#fff);color:var(--theme-gold,#965d09);box-shadow:0 2px 8px #0002; }
.theme-picker button:focus-visible { outline:2px solid var(--theme-accent,#168c95);outline-offset:2px; }
.theme-picker button:hover { color:var(--theme-ink,#173c4b); }
.theme-save-status:empty { display:none; }
.theme-save-status:not(:empty) { position:absolute;z-index:120;top:100%;right:0;width:230px;padding:10px;background:var(--theme-surface,#fff);color:var(--theme-danger,#a12f44);border:1px solid var(--theme-line,#bddcde);border-radius:10px;font-size:12px; }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) body { background:var(--theme-canvas);color:var(--theme-ink); }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .game-surface { --surface-line:var(--theme-line);--surface-ink:var(--theme-ink);--surface-teal:var(--theme-accent); }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) :is(.game-topbar,.sky-header) { background:linear-gradient(115deg,#213e60,#275464 62%,#253854); }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .planet-sky { opacity:.42; }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) :is(.landing-next,.account-page,.character-page,.game-shell) { background:radial-gradient(ellipse at 85% 0,#367ab044,transparent 55%),var(--theme-canvas); }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]),textarea,select) { background-color:var(--theme-field);color:var(--theme-ink);border-color:var(--theme-line); }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) ::placeholder { color:var(--theme-muted);opacity:.8; }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) dialog { color:var(--theme-ink); }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .point-label { background:var(--theme-surface);color:var(--theme-ink); }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .point-selected .point-label { background:#493e24;color:#ffe3a1; }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) :is(.sky-controls,.atlas-scale) { background:var(--theme-surface);color:var(--theme-ink); }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) :is(.training-primary,.button,.mobile-action button,.atlas-mode .selected) { color:#f4ffff; }
.account-navigation { flex-wrap:wrap; }
@media(max-width:600px) {
    .theme-picker button { width:32px;height:32px; }
    .site-header { flex-wrap:wrap;height:auto;min-height:110px;padding-block:16px;gap:12px; }
    .account-navigation { gap:10px; }
}

/* Technique headers keep their artwork/layout but share the page-header finish. */
:root .page-hero {
    background:radial-gradient(ellipse at 90% 20%,var(--theme-soft,#9fe0df66),transparent 60%),linear-gradient(125deg,var(--theme-surface,#ffffffdf),var(--theme-soft,#e9f7f5));
}

/* A brighter focal plane separates content from the quiet page background. */
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) :is(.page-hero,.clan-directory-hero,.clan-profile-hero) {
    background:radial-gradient(ellipse at 95% 5%,var(--theme-warm-glow),transparent 55%),linear-gradient(115deg,#253e61,#245a6a);
}
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .profile-details {
    background:radial-gradient(ellipse at 95% 0,var(--theme-warm-glow),transparent 55%),linear-gradient(125deg,#263e5b,#274b62);
}
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .item-showcase {
    background:radial-gradient(ellipse at 50% 85%,var(--theme-glow),transparent 65%),linear-gradient(140deg,#294968,#2b666f);
}
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) :is(.settings-card,.stat-card,.commerce-card,.directory-panel) {
    box-shadow:0 12px 30px #06172220,inset 0 1px 0 #b4e6df0c;
}

/* Public invitation: warm primary actions, crisp type, cool depth around the artwork. */
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .landing-next .sky-header {
    background:radial-gradient(ellipse at 78% 35%,#278eac38,transparent 48%),linear-gradient(135deg,#172c49,#214b60 70%,#18304a);
    mask-image:linear-gradient(#000 65%,transparent);
}
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .landing-next .hero-copy h1 { color:#f8f5ef; }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .landing-next h1 em { color:var(--theme-gold); }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .landing-next .button {
    background:linear-gradient(120deg,#ffda92,#f6b557);color:#282e3d;
    border:1px solid #ffe0a8;box-shadow:0 6px 24px #e9ad4529;
    /* A gradient-to-solid background transition otherwise fades through transparency. */
    transition:transform .2s,box-shadow .2s;
}
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .landing-next .button:hover { background:#ffe1a7;box-shadow:0 8px 28px #e9ad4540; }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .landing-next .world-card { border-color:#64cfc980;box-shadow:0 16px 40px #07142655; }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .game-main .page-hero { border-color:#52748b; }
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .game-main .page-hero .eyebrow { color:var(--theme-gold); }

/* Aura: the same semantic contract, with concentrated cyan/violet light. */
:root[data-theme="aura"] {
 --theme-canvas:#080c1c;--theme-surface:#141b32;--theme-soft:#1c2443;
 --theme-hover:#29355a;--theme-field:#0e1429;--theme-button:#5142bd;
 --theme-ink:#f0f2ff;--theme-muted:#b6bfdc;--theme-line:#394364;
 --theme-accent:#77e9ef;--theme-gold:#c3b0ff;--theme-danger:#ffabbc;
 --theme-success:#83e3bc;--theme-decoration:#a390ff16;
 --theme-glow:#51dcea28;--theme-warm-glow:#9770ff26;
}
:root[data-theme="aura"] :is(.landing-next,.account-page,.character-page,.game-shell) {
 background:radial-gradient(ellipse at 100% 8%,#723ce329,transparent 42%),radial-gradient(ellipse at 0 35%,#1bbed21a,transparent 45%),var(--theme-canvas);
}
:root[data-theme="aura"] :is(.game-topbar,.sky-header) { background:linear-gradient(115deg,#131d3e,#242048 65%,#112b40); }
:root[data-theme="aura"] .planet-sky { opacity:.24; }
:root[data-theme="aura"] :is(.page-hero,.clan-directory-hero,.clan-profile-hero) {
 background:radial-gradient(ellipse at 95% 80%,#8153e74d,transparent 55%),radial-gradient(ellipse at 5% 0,#37d8e626,transparent 55%),#141c35;
 border-color:#565286;box-shadow:inset 0 1px #a797ff24,0 8px 32px #05091c40;
}
:root[data-theme="aura"] .profile-details { background:radial-gradient(ellipse at 100% 0,#8654df30,transparent 60%),linear-gradient(120deg,#17253b,#191d36); }
:root[data-theme="aura"] .character-profile { box-shadow:0 0 35px #56dfe913; }
:root[data-theme="aura"] .item-showcase { background:radial-gradient(ellipse at 50% 90%,#56dfe938,transparent 60%),linear-gradient(135deg,#172441,#2a2050); }

:root[data-theme="aura"] .section-navigation nav a.active { background:linear-gradient(115deg,#26485b,#49377a);border-color:#8b7eca;box-shadow:0 0 20px #8d6bea20; }
:root[data-theme="aura"] .theme-picker button[aria-pressed="true"] { color:#a9f8ff;box-shadow:0 0 12px #8f6bff45,inset 0 0 0 1px #9784d480; }
:root[data-theme="aura"] .landing-next .sky-header {
 background:radial-gradient(ellipse at 85% 65%,#7642e86b,transparent 43%),radial-gradient(ellipse at 45% 80%,#1ebbd94d,transparent 48%),#090d22;
}
:root[data-theme="aura"] .landing-next h1 em {
 color:#a6caff;background:linear-gradient(100deg,#7debf1,#a5b4ff 55%,#bb91ff);background-clip:text;-webkit-text-fill-color:transparent;
}
:root[data-theme="aura"] .landing-next .hero-art { filter:drop-shadow(0 0 30px #6889f226); }
:root[data-theme="aura"] .landing-next .button {
 color:#fff;background:linear-gradient(110deg,#235985,#6340bf);border-color:#a897ee;
 box-shadow:0 5px 24px #7855e845,inset 0 1px #d5cbff36;
}
:root[data-theme="aura"] .landing-next .button:hover { background:linear-gradient(110deg,#2a6b97,#7651ce);box-shadow:0 6px 30px #7855e86b; }
:root[data-theme="aura"] .landing-next .world-card { background:linear-gradient(120deg,#132a3ef2,#251c43f5);border-color:#8b93cf;box-shadow:0 0 30px #6adbea20; }
:root[data-theme="aura"] :is(a,button,input,select,textarea):focus-visible { outline-color:#8eeaf6; }
/* Compact header switch; full selection remains in account settings. */
@media(max-width:550px) {
 .game-frame .game-topbar:has(.character-switcher) .game-top-actions>.theme-picker { grid-column:4;grid-row:1;justify-self:end; }
}

.theme-picker.theme-cycle { width:40px;height:40px;padding:2px;box-sizing:border-box;justify-content:center; }
.theme-cycle button { width:34px;height:34px;color:var(--theme-gold,#965d09); }
:root[data-theme="aura"] .theme-cycle { box-shadow:0 0 12px #8f6bff25; }

.website-admin { max-width:1300px; }
.website-metrics { display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:20px 0; }
.website-metrics article { padding:18px;border:1px solid var(--theme-line,#bddcde);border-radius:16px;background:var(--theme-surface,#fff);display:grid;gap:8px; }
.website-metrics strong { font-size:1.8rem; }
.website-table { overflow-x:auto;max-width:100%; }
.website-table table { min-width:560px;width:100%;border-collapse:collapse;text-align:left; }
.website-table :is(th,td) { padding:10px;border-bottom:1px solid var(--theme-line,#bddcde);overflow-wrap:anywhere; }
.website-admin textarea { width:100%;box-sizing:border-box; }
.website-consent { position:fixed;z-index:10000;bottom:20px;left:20px;width:min(460px,calc(100vw - 40px));box-sizing:border-box;padding:22px;background:var(--theme-surface,#fff);color:var(--theme-ink,#173c4b);border:1px solid var(--theme-line,#bddcde);border-radius:18px;box-shadow:0 10px 50px #0004; }
.website-consent p { font-size:.88rem;line-height:1.5; }
.website-consent div { display:flex;gap:10px;flex-wrap:wrap; }
.website-consent button { padding:10px 16px;background:var(--theme-soft,#e8f4f2);color:inherit;border:1px solid var(--theme-line,#bddcde);border-radius:10px;cursor:pointer; }
.legal-page { padding-block:40px;max-width:850px;line-height:1.7; }
.legal-lines { white-space:pre-line; }

/* Clan hue remains recognizable in each site theme, including the gradient end. */
:root { --clan-base:#ffffff; --clan-strength:32%; --clan-end-strength:22%; }
:root[data-theme="dark"] { --clan-base:#101923; --clan-strength:60%; --clan-end-strength:43%; }
:root[data-theme="aura"] { --clan-base:#171426; --clan-strength:60%; --clan-end-strength:43%; }
:root .clan-band, :root .clan-themed, :root .clan-theme-picker button {
 --clan-surface:color-mix(in srgb,var(--clan-tone,var(--clan-accent)) var(--clan-strength),var(--clan-base));
 color:var(--theme-ink,#214f5e);
}
:root .clan-band .clan-band-content { background:var(--clan-surface); }
:root .profile-clan .clan-band-content .clan-band-label { color:var(--theme-ink,#214f5e); }
:root .clan-band .directory-clan-arrow { background:linear-gradient(90deg,var(--clan-surface),transparent); color:var(--theme-ink,#214f5e); }
:root .clan-themed[class] { background:linear-gradient(115deg,var(--clan-surface),color-mix(in srgb,var(--clan-tone) var(--clan-end-strength),var(--clan-base))); border-color:color-mix(in srgb,var(--clan-tone,var(--clan-accent)) 45%,var(--theme-line,#bddcde)); }
:root .clan-themed :is(h1,h3,p,small,strong,.eyebrow,.clan-role) { color:var(--theme-ink,#214f5e); }
:root .clan-themed .clan-role { background:var(--clan-surface); }
:root .clan-theme-picker button { background:var(--clan-surface); }

/* Clan membership is a compact affiliation, not a selected ranking row. */
:root .players-page .directory-table tbody tr{background:transparent}
:root .players-page .directory-table tbody tr:hover{background:var(--theme-hover,#eaf7f2)}
:root .players-page .directory-clan.clan-band{position:relative;isolation:isolate;align-items:center;width:fit-content;max-width:100%;min-height:36px;gap:0;padding:0 8px;box-sizing:border-box;overflow:visible;flex:0 0 auto;border-radius:8px;background:color-mix(in srgb,var(--clan-tone) 16%,var(--theme-surface,#fff));border:1px solid color-mix(in srgb,var(--clan-tone) 35%,var(--theme-line,#bddcde))}
:root .players-page .directory-clan.clan-band::before,:root .players-page .directory-clan.clan-band::after{display:none}
:root .players-page .directory-clan .clan-band-content{flex:1;padding:5px 0;background:none;border:0;gap:8px}
:root .players-page .directory-clan .clan-band-content img{width:24px;height:24px;flex:0 0 24px;border-radius:8px;box-shadow:0 2px 5px #0000001c}
:root .players-page .directory-clan .directory-clan-arrow{flex:0 0 20px;padding:8px 4px;background:none;opacity:.65;transition:opacity .18s ease}
:root .players-page .directory-clan:hover .directory-clan-arrow{opacity:1}
:root .players-page .directory-clan .clan-band-label small{letter-spacing:.2em;opacity:.8}
:root .players-page .directory-clan:focus-visible{outline:2px solid var(--theme-ink,#214f5e);outline-offset:3px}
:root:not([data-theme="dark"]):not([data-theme="aura"]):not([data-theme="obsidian"]) .players-page .directory-clan .clan-band-label small{color:var(--theme-ink,#214f5e);opacity:1}
.players-page .directory-identity{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.players-page .directory-identity>.directory-player{align-self:flex-start}
@media(max-width:900px){:root .players-page .directory-clan .directory-clan-arrow{display:none}}
@media(prefers-reduced-motion:reduce){:root .players-page .directory-clan .directory-clan-arrow{transition:none}}

/* One continuous identity surface; decoration does not change layout metrics. */

/* Dark overview cards previously shared the exact page background colour. */
:root[data-theme="dark"] .overview-page :is(.stat-card,.overview-shortcuts>a){background:var(--theme-elevated)}
/* Mobile menu tiles must remain distinct from the shared soft menu surface. */

.online-switch::after{background:var(--theme-muted,#526c75)}
.online-filter input:checked + .online-switch::after{background:#fff}
.online-filter input:checked ~ .online-filter-label::after{content:' · aktiv';font-weight:700}
.directory-filters .online-filter input{width:38px;height:22px;left:0;top:11px;cursor:pointer}

/* Shared header controls: quiet enamel surfaces and one SVG icon family. */
:root {
 --control-top:#fbfffd;--control-bottom:#e3efed;--control-edge:#a9c9ca;
 --control-ink:#456874;--control-symbol:#996715;--control-light:#ffffffc9;
 --control-shadow:#123e4917;--control-accent:#258e99;
 --control-surface:linear-gradient(145deg,var(--control-top),var(--control-bottom));
 --control-relief:inset 0 1px 0 var(--control-light),0 2px 5px var(--control-shadow);
}
:root[data-theme="dark"] {
 --control-top:#2a4156;--control-bottom:#192d41;--control-edge:#567087;
 --control-ink:#d5e4ee;--control-symbol:#f0ce94;--control-light:#ffffff10;
 --control-shadow:#030d2040;--control-accent:#90cec9;
}
:root[data-theme="aura"] {
 --control-top:#2d2e51;--control-bottom:#191d36;--control-edge:#59577e;
 --control-ink:#e1dff7;--control-symbol:#c9b7fa;--control-light:#d9caff14;
 --control-shadow:#09072340;--control-accent:#b8a3ee;
}
.theme-glyph{position:relative;display:block;width:22px;height:22px;pointer-events:none}
.theme-glyph svg{position:absolute;inset:0;width:22px;height:22px;opacity:0;transform:scale(.65) rotate(-25deg);transition:opacity .2s ease,transform .32s cubic-bezier(.2,.7,.2,1)}
.theme-glyph[data-theme-icon="light"] .theme-glyph-light,
.theme-glyph[data-theme-icon="dark"] .theme-glyph-dark,
.theme-glyph[data-theme-icon="aura"] .theme-glyph-aura{opacity:1;transform:scale(1) rotate(0)}
:root .theme-picker.theme-cycle{width:40px;height:40px;padding:0;border:0;background:none;box-shadow:none}
:root .theme-cycle button,:root .game-sound summary{
 box-sizing:border-box;display:grid;place-items:center;width:40px;height:40px;padding:0;
 border:1px solid var(--control-edge);border-radius:50%;
 background:var(--control-surface);
 color:var(--control-ink);box-shadow:var(--control-relief);
 transition:background .2s,border-color .2s,box-shadow .2s,transform .2s;
}
:root .theme-cycle button{color:var(--control-symbol)}
:root .theme-picker button:focus-visible,:root .game-sound summary:focus-visible{outline:2px solid var(--control-accent);outline-offset:3px}
:root .game-sound[open] summary{border-color:var(--control-accent);box-shadow:inset 0 1px 0 var(--control-light),0 0 0 3px color-mix(in srgb,var(--control-accent) 13%,transparent)}
@media(hover:hover){
 :root .theme-cycle button:hover,:root .game-sound summary:hover{border-color:var(--control-accent);box-shadow:inset 0 1px 0 var(--control-light),0 3px 10px var(--control-shadow);transform:translateY(-1px)}
}
:root .theme-cycle button:active,:root .game-sound summary:active{transform:scale(.95)}
:root .theme-picker:not(.theme-cycle){padding:4px;background:linear-gradient(145deg,var(--control-top),var(--control-bottom));border-color:var(--control-edge)}
:root .theme-picker:not(.theme-cycle) button{width:36px;height:36px;color:var(--control-ink)}
:root .theme-picker:not(.theme-cycle) button[aria-pressed="true"]{color:var(--control-symbol);box-shadow:inset 0 1px 0 var(--control-light),0 2px 6px var(--control-shadow)}
:root .character-switcher{isolation:isolate;background:linear-gradient(145deg,var(--control-top),var(--control-bottom));border-color:var(--control-edge);box-shadow:inset 0 1px 0 var(--control-light),0 2px 5px var(--control-shadow)}
/* A shared surface lets light cross hit-area boundaries without visible seams.
   Only the decorative layers are rounded; the dropdown must remain unclipped. */
:root .character-switcher::before,:root .character-switcher::after{
 content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
 background-repeat:no-repeat;background-size:112px 100%;background-position:var(--switch-light-x,50%) center;
 transition:opacity .24s ease,background-position .34s cubic-bezier(.2,.8,.2,1);
}
:root .character-switcher::before{
 background-image:radial-gradient(ellipse 56px 34px at 50% 15%,var(--control-light),transparent 95%),radial-gradient(ellipse 52px 2px at 50% 0,var(--control-light),transparent);
}
:root .character-switcher::after{
 background-image:radial-gradient(ellipse 54px 34px at 50% 0,#06132155,#06132118 48%,transparent 95%),radial-gradient(ellipse 52px 10px at 50% 100%,var(--control-light),transparent 95%);
}
:root .character-switcher:has(>form:first-child button:is(:active,[data-character-switch-trigger="true"])){--switch-light-x:calc(0% - 38px)}
:root .character-switcher:has(>form:last-child button:is(:active,[data-character-switch-trigger="true"])){--switch-light-x:calc(100% + 38px)}
:root .character-switcher:has(>form button:is(:active,[data-character-switch-trigger="true"]),>.character-picker>summary:active)::before{opacity:1;transition-duration:.1s}
:root .character-switcher:has(>form button:is(:active,[data-character-switch-trigger="true"]),>.character-picker>summary:active)::after{opacity:1;transition-duration:.1s}
:root .character-switcher>form button{
 border:0;background:transparent;color:var(--control-ink);box-shadow:none;transition:color .18s ease;
}
:root .character-switcher>form button:focus-visible{outline:2px solid var(--teal);outline-offset:-3px}
@media(hover:hover){
 :root .character-switcher>form button:hover{color:var(--theme-ink);background:transparent}
}
:root .character-switcher>form button:is(:active,[data-character-switch-trigger="true"]){
 background:transparent;color:var(--theme-ink);box-shadow:none;
}
:root .character-picker summary{padding:5px 8px;gap:6px;min-height:40px;box-sizing:border-box;background:transparent}
:root .character-picker summary:hover,:root .character-picker[open] summary,:root .character-picker summary:active{background:transparent;box-shadow:none}
:root .character-picker summary:focus-visible{outline:2px solid var(--teal);outline-offset:-3px}
:root .character-picker summary>small{font-size:9px;letter-spacing:.04em;background:color-mix(in srgb,var(--control-symbol) 10%,transparent);color:var(--control-symbol);border:1px solid color-mix(in srgb,var(--control-symbol) 20%,transparent);border-radius:5px}
:root .character-picker .picker-chevron{display:inline-flex;color:var(--control-ink);transition:transform .2s}
:root .character-picker[open] .picker-chevron{transform:rotate(180deg)}
:root .character-picker-list,:root .sound-panel{border-color:var(--control-edge);border-radius:18px;background:linear-gradient(145deg,var(--theme-surface,#fbfefd),var(--theme-canvas,#f1f8f6));box-shadow:inset 0 1px 0 var(--control-light),0 18px 45px #05152230,0 3px 8px #05152212}
:root .character-picker-list{padding:10px;box-sizing:border-box;width:280px;max-height:min(520px,calc(100dvh - 120px));overflow-y:auto}
:root .character-picker[open] .character-picker-list{animation:character-picker-arrive .18s cubic-bezier(.2,.8,.2,1);transform-origin:top right}
@keyframes character-picker-arrive{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 :root .character-switcher>form button,:root .character-switcher::before,:root .character-switcher::after,:root .character-picker .picker-chevron{transition:none}
 :root .character-picker[open] .character-picker-list{animation:none}
}
:root .character-picker-list>strong{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px 14px;font-size:12px}
:root .character-picker-list>strong small{font-size:10px;font-weight:400;color:var(--theme-muted,#617d87)}
:root .character-picker-list form{display:grid;gap:4px;padding-bottom:10px;margin-bottom:5px;border-bottom:1px solid var(--theme-line,#d8e7e7)}
:root .character-picker-list button{padding:11px 10px;gap:12px;border:1px solid transparent;border-radius:11px;min-width:0;transition:background .16s,border-color .16s}
:root .character-picker-list button>span{min-width:0;overflow-wrap:anywhere}
:root .character-picker-list button img{width:34px;height:34px;box-shadow:0 0 0 2px color-mix(in srgb,var(--control-edge) 40%,transparent)}
:root .character-picker-list button small{margin-top:3px;font-size:10px;line-height:1.4}
:root .character-picker-list .is-selected{background:color-mix(in srgb,var(--control-accent) 12%,var(--theme-surface,#fff));border-color:color-mix(in srgb,var(--control-accent) 35%,transparent);box-shadow:inset 3px 0 var(--control-accent)}
:root .character-picker-list .is-selected::after{content:'✓';margin-left:auto;color:var(--control-accent);font-size:14px}
:root .character-picker-list>a{padding:10px;border-radius:8px;font-size:11px;color:var(--theme-muted,#537480)}
:root .character-picker-list>a:hover{background:var(--theme-hover,#e7f2ef);color:var(--theme-ink,#193f4c)}
@media(max-width:550px){
 :root .character-switcher{background:transparent;border:0;box-shadow:none}
 :root .character-switcher::before,:root .character-switcher::after{display:none}
 :root .character-picker summary{width:44px;height:44px;padding:4px;background:linear-gradient(145deg,var(--control-top),var(--control-bottom));border-color:var(--control-edge)}
 :root .character-picker summary .picker-chevron{display:none}
 :root .character-picker-list{max-width:calc(100vw - 28px)}
}
@media(prefers-reduced-motion:reduce){.theme-glyph svg,:root .theme-cycle button,:root .game-sound summary,:root .picker-chevron{transition:none;transform:none}}
@media(forced-colors:active){:root .theme-cycle button,:root .game-sound summary{border-color:ButtonText}:root .character-picker-list .is-selected{border-color:Highlight}}
/* Day display shares the header surface; admin-only preview keeps its footprint. */
:root[data-theme] .sky-controls {
 border-color:var(--control-edge);border-radius:24px;
 background:linear-gradient(145deg,var(--control-top),var(--control-bottom));
 color:var(--control-ink);box-shadow:inset 0 1px 0 var(--control-light),0 2px 5px var(--control-shadow);
 font-variant-numeric:tabular-nums;
}
:root .sky-controls>span{padding-inline:5px}
:root .sky-controls button {
 display:grid;place-items:center;flex-shrink:0;padding:0;
 color:var(--control-ink);transition:background .18s,color .18s,transform .18s;
}
:root .sky-controls button:focus-visible{outline:2px solid var(--control-accent);outline-offset:1px}
:root .sky-controls button:disabled{opacity:.4;cursor:default}
@media(hover:hover){:root .sky-controls button:hover:not(:disabled){background:color-mix(in srgb,var(--control-accent) 14%,transparent);color:var(--control-accent)}}
:root .sky-controls button:disabled:hover{background:transparent}
:root .sky-controls button:active:not(:disabled){transform:scale(.92)}
@media(prefers-reduced-motion:reduce){:root .sky-controls button{transition:none;transform:none}}
@media(forced-colors:active){:root[data-theme] .sky-controls{border-color:ButtonText}}

/* Availability controls share the real palette's identity without rendering a
   second miniature application. The checkbox/radio semantics remain native. */
.theme-admin-choices {display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-block:12px 20px}
.theme-admin-choice {position:relative;min-height:76px;padding:16px;border:1px solid var(--theme-line,#b9cecf);border-radius:14px;background:var(--theme-surface,#fff);overflow:hidden;isolation:isolate}
.theme-admin-choice::after {content:"";position:absolute;z-index:-1;inset:auto 0 0;height:5px;background:linear-gradient(90deg,var(--sample-base),var(--sample-accent))}
.theme-admin-choice[data-design=light] {--sample-base:#e5f3ef;--sample-accent:#2694a1}
.theme-admin-choice[data-design=dark] {--sample-base:#20364d;--sample-accent:#65e1d5}
.theme-admin-choice[data-design=aura] {--sample-base:#29244c;--sample-accent:#9b83e9}
.theme-admin-choice[data-design=obsidian] {--sample-base:#17161c;--sample-accent:#ba3f5b}
.theme-admin-choice:has(input:checked) {border-color:var(--theme-accent,#218993)}
.theme-picker button[hidden] {display:none}
.theme-cycle button:disabled {cursor:default}