/* Browser-local appearance only; game canvases and original artwork retain their colors. */
:root[data-theme="red"]{--bg:hsl(0 17% 14%);--surface:hsl(0 20% 19%);--raised:hsl(0 23% 24%);--fill:hsl(0 26% 34%);--line:hsl(0 22% 42%);--edge:hsl(0 55% 76%);--ink:hsl(0 40% 94%);--muted:hsl(0 25% 75%);--light:hsl(0 45% 86%);--shadow:hsl(0 20% 9%)}
:root[data-theme="green"]{--bg:hsl(132 17% 14%);--surface:hsl(132 20% 19%);--raised:hsl(132 23% 24%);--fill:hsl(132 26% 34%);--line:hsl(132 22% 42%);--edge:hsl(132 55% 76%);--ink:hsl(132 40% 94%);--muted:hsl(132 25% 75%);--light:hsl(132 45% 86%);--shadow:hsl(132 20% 9%)}
:root[data-theme="blue"]{--bg:hsl(214 17% 14%);--surface:hsl(214 20% 19%);--raised:hsl(214 23% 24%);--fill:hsl(214 26% 34%);--line:hsl(214 22% 42%);--edge:hsl(214 55% 76%);--ink:hsl(214 40% 94%);--muted:hsl(214 25% 75%);--light:hsl(214 45% 86%);--shadow:hsl(214 20% 9%)}
:root[data-theme="pink"]{--bg:hsl(333 17% 14%);--surface:hsl(333 20% 19%);--raised:hsl(333 23% 24%);--fill:hsl(333 26% 34%);--line:hsl(333 22% 42%);--edge:hsl(333 55% 76%);--ink:hsl(333 40% 94%);--muted:hsl(333 25% 75%);--light:hsl(333 45% 86%);--shadow:hsl(333 20% 9%)}
:root[data-theme="purple"]{--bg:hsl(272 17% 14%);--surface:hsl(272 20% 19%);--raised:hsl(272 23% 24%);--fill:hsl(272 26% 34%);--line:hsl(272 22% 42%);--edge:hsl(272 55% 76%);--ink:hsl(272 40% 94%);--muted:hsl(272 25% 75%);--light:hsl(272 45% 86%);--shadow:hsl(272 20% 9%)}
:root[data-theme="yellow"]{--bg:hsl(48 17% 14%);--surface:hsl(48 20% 19%);--raised:hsl(48 23% 24%);--fill:hsl(48 26% 34%);--line:hsl(48 22% 42%);--edge:hsl(48 55% 76%);--ink:hsl(48 40% 94%);--muted:hsl(48 25% 75%);--light:hsl(48 45% 86%);--shadow:hsl(48 20% 9%)}

.theme-picker{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto}
#shell .theme-swatch{display:block;position:relative;width:20px;height:20px;min-height:20px;padding:0;border:2px solid transparent;background:var(--swatch);box-shadow:inset 0 0 0 1px #0003;cursor:pointer;border-radius:0}
#shell .theme-swatch[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:3px}
#shell .theme-swatch:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}
#shell .theme-swatch:hover{border-color:var(--ink)}
#shell .profile-area{margin-left:0}
#shell .header-inner{gap:26px}
:root[data-theme]:not([data-theme="gray"]) #shell .game-card,
:root[data-theme]:not([data-theme="gray"]) #shell .filter-row,
:root[data-theme]:not([data-theme="gray"]) #shell .site-footer{border-color:var(--line)}
:root[data-theme]:not([data-theme="gray"]) .game-art,
:root[data-theme]:not([data-theme="gray"]) input,
:root[data-theme]:not([data-theme="gray"]) select,
:root[data-theme]:not([data-theme="gray"]) .account-list span{background-color:var(--bg);color:var(--ink)}
:root[data-theme]:not([data-theme="gray"]) button.primary{background:var(--edge);color:var(--bg);border-color:var(--light);box-shadow:inset 0 1px var(--light)}
:root[data-theme]:not([data-theme="gray"]) button.secondary,
:root[data-theme]:not([data-theme="gray"]) #shell .play-button{background:var(--fill);border-color:var(--edge);color:var(--ink);box-shadow:inset 0 1px var(--line)}
:root[data-theme]:not([data-theme="gray"]) button.primary:hover{background:var(--light)}
:root[data-theme]:not([data-theme="gray"]) button.secondary:hover,
:root[data-theme]:not([data-theme="gray"]) #shell .play-button:hover{background:var(--line)}
:root[data-theme]:not([data-theme="gray"]) select option,
:root[data-theme]:not([data-theme="gray"]) select optgroup{background:var(--surface);color:var(--ink)}
:root[data-theme]:not([data-theme="gray"]) select option:checked{background:var(--edge);color:var(--bg)}
@media(min-width:761px) and (max-width:1150px){#shell .header-inner{gap:16px;flex-wrap:wrap}#shell .header-inner nav{order:3;width:100%;padding:0;border:0;justify-content:flex-start}#shell .theme-picker{margin-left:auto}}
@media(max-width:760px){#shell .header-inner{gap:16px}#shell .profile-area{margin-left:auto}#shell .theme-picker{order:4;width:100%;justify-content:center;margin:0;padding:3px 0 7px;gap:12px}#shell .theme-swatch{width:24px;height:24px;min-height:24px}#shell .header-inner nav{order:3}}

/* Launch colors communicate saved progress consistently across every theme. */
#shell #continue-play[data-launch-state="play"]:not(:disabled),
#shell #game-grid .play-button[data-launch-state="play"]:not(:disabled){--launch-color:#8ed6a0;--launch-hover:#ace8ba;--launch-edge:#c0edc9;--launch-shade:#589b69}
#shell #continue-play[data-launch-state="resume"]:not(:disabled),
#shell #game-grid .play-button[data-launch-state="resume"]:not(:disabled){--launch-color:#e6ce78;--launch-hover:#f3dfa0;--launch-edge:#f8e9b8;--launch-shade:#aa9146}
#shell #continue-play[data-launch-state]:not(:disabled),
#shell #game-grid .play-button[data-launch-state]:not(:disabled){background:var(--launch-color);color:#20251f;border-color:var(--launch-edge);box-shadow:inset 0 1px var(--launch-edge)}
#shell #continue-play[data-launch-state]:not(:disabled):hover,
#shell #game-grid .play-button[data-launch-state]:not(:disabled):hover{background:var(--launch-hover);border-color:var(--launch-edge)}
#shell #continue-play[data-launch-state]:not(:disabled):active,
#shell #game-grid .play-button[data-launch-state]:not(:disabled):active{box-shadow:inset 0 1px var(--launch-shade);transform:translateY(2px)}

/* Owner rule: show only the selected color; expand the other choices on demand.
   The selected swatch stays at the right anchor while the palette branches left. */
#shell .theme-picker{position:relative;display:block;width:20px;height:20px;padding:0;gap:0;z-index:40}
#shell .theme-palette{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;width:max-content}
#shell .theme-picker .theme-swatch[aria-pressed="true"]{order:1}
#shell .theme-picker .theme-swatch[hidden]{display:none!important}
#shell .theme-picker[data-expanded="true"] .theme-palette{right:-8px;padding:8px;background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 12px #0005}
@media(max-width:760px){#shell .theme-picker{width:24px;height:24px;margin-left:auto;order:0}}

/* Theme the portrait frame, keeping the layered character artwork untouched. */
.avatar{transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease}
:root[data-theme]:not([data-theme="gray"]) .avatar{background-color:var(--fill);border-color:var(--edge);box-shadow:inset 0 0 0 var(--avatar-rim-width,4px) var(--raised)}
.persona-preview .avatar{--avatar-rim-width:10px}
@media(prefers-reduced-motion:reduce){.avatar{transition:none}}