/* Scene colours are shared by the controls and dialogs; themes tint them gently. */
body[data-theme]{
 --ui-base:221 210 191;--ui-ink:#433934;--theme-tint:#cfb89a;
 --ui-surface:color-mix(in srgb,rgb(var(--ui-base)) 82%,var(--theme-tint));
 --ui-glass:color-mix(in srgb,var(--ui-surface) 86%,transparent);
 --ui-panel:color-mix(in srgb,var(--ui-surface) 96%,transparent);
 --ui-edge:color-mix(in srgb,var(--ui-ink) 20%,transparent);
 --ui-shadow:0 4px 16px rgb(48 35 39 / .12);
 --paper:color-mix(in srgb,var(--ui-surface) 90%,var(--accent));
 --panel:var(--ui-surface);--ink:var(--ui-ink);
 --muted:color-mix(in srgb,var(--ui-ink) 92%,var(--ui-surface));
 --line:var(--ui-edge);--tile:color-mix(in srgb,var(--ui-surface) 91%,var(--accent));
 --accent-soft:color-mix(in srgb,var(--ui-surface) 76%,var(--accent));
 --button-text:#f1e8dc;
}
body[data-theme=cream]{--theme-tint:#cfb89a;--accent:#705860}
body[data-theme=dream]{--theme-tint:#b7a2c7;--accent:#6b507b;--button-text:#eee3f0}
body[data-theme=pop]{--theme-tint:#9ab8c7;--accent:#436477;--button-text:#e4edef}
body[data-scene=winter]{--ui-base:221 210 191;--ui-ink:#433934}
body[data-scene=villain]{--ui-base:204 190 212;--ui-ink:#3d3246}
body[data-scene=ocean]{--ui-base:194 215 212;--ui-ink:#2e4143}
body[data-scene=bakery]{--ui-base:224 199 165;--ui-ink:#453427}
.brand,.theme-picker,.collection-button,.scene-button,.save-button,
.viewer-tools button,.interaction-bar button,.scene-surprise,
.game-dock button,.game-dock #togglePanels{
 background:var(--ui-glass);border-color:var(--ui-edge);color:var(--ink);
 box-shadow:var(--ui-shadow);
}
.brand,.theme-picker,.collection-button{border-color:transparent}
.wardrobe{background:var(--ui-panel);border-color:transparent;box-shadow:0 10px 32px rgb(43 33 42 / .16)}
.scene-menu,dialog{background:var(--ui-panel);border-color:var(--ui-edge);box-shadow:0 14px 35px rgb(43 33 42 / .2)}
.theme-picker button{color:var(--muted)}
.theme-picker button[aria-pressed=true]{background:var(--accent-soft);border-color:transparent;color:var(--ink)}
.scene-button:hover,.save-button:hover,.viewer-tools button:hover,
.interaction-bar button:hover,.game-dock button:hover,.game-dock #togglePanels:hover,
.collection-button:hover,.scene-surprise:hover{background:var(--accent-soft);color:var(--ink);border-color:var(--ui-edge)}
.game-dock button[aria-pressed=true]{background:var(--accent-soft);color:var(--ink);border-color:color-mix(in srgb,var(--accent) 62%,transparent)}
.viewer-tools button[aria-pressed=true]{background:var(--accent);color:var(--button-text);border-color:transparent}
.outfit-card,.scene-card,.character-button{border-color:var(--ui-edge);box-shadow:none}
.outfit-card .card-text,.scene-card>span{background:color-mix(in srgb,var(--ui-surface) 94%,var(--accent));border-color:var(--ui-edge)}
.outfit-card[aria-pressed=true],.scene-card[aria-pressed=true],.character-button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.outfit-check,.scene-card[aria-pressed=true]:after{color:var(--button-text)}
.shop-link{border-color:transparent;box-shadow:0 2px 7px rgb(48 35 39 / .12)}
.reaction-bubble{background:var(--panel);color:var(--ink);box-shadow:var(--ui-shadow)}
.reaction-bubble:after{border-top-color:var(--panel)}
.drop-instruction{border-color:var(--accent-soft);color:var(--button-text);background:color-mix(in srgb,var(--accent) 25%,transparent)}
.drag-ghost{border-color:var(--accent-soft);box-shadow:var(--ui-shadow)}
.character-label,.viewer-hint{color:var(--ui-ink);text-shadow:0 1px 4px color-mix(in srgb,var(--ui-surface) 85%,transparent)}
.toast{background:var(--accent);color:var(--button-text)}
@media(max-width:760px){
 .game-dock{background:var(--ui-panel);border-color:transparent;box-shadow:var(--ui-shadow)}
 .game-dock button,.game-dock #togglePanels{background:transparent;border-color:transparent;box-shadow:none}
 .game-dock button[aria-pressed=true]{background:var(--accent-soft);border-color:transparent}
}
@media(min-width:560px) and (max-width:760px) and (max-height:700px){
 .game-dock{background:none;box-shadow:none}
 .game-dock button,.game-dock #togglePanels{background:var(--ui-glass);border-color:var(--ui-edge);box-shadow:var(--ui-shadow)}
 .game-dock button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent)}
}