/* Theme overrides are separate from layout. Embedded games and image overlays
   retain their own palettes; catalog chrome, fields and reading surfaces adapt. */
.theme-toggle{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--violet);font-size:23px;line-height:1}.theme-toggle:hover{border-color:var(--violet)}.header-actions{gap:12px}
:root[data-theme=light]{--bg:#f3f2f7;--surface:#fff;--raised:#eae6f1;--border:#d4cddd;--text:#21192d;--muted:#62596e;--violet:#64409d;--cyan:#17665f;color-scheme:light}
:root[data-theme=light] body{background-image:none}
:root[data-theme=light] .site-header{background:#f8f7fcf5;border-color:var(--border)}
:root[data-theme=light] .primary-nav a:hover,:root[data-theme=light] .primary-nav a[aria-current]{color:var(--text)}
:root[data-theme=light] .saved-link{color:#573580;border-color:#c8bad9;background:#eee8f6}
:root[data-theme=light] .button{color:#fff;background:#64409d}
:root[data-theme=light] .button:hover{background:#50317f}
:root[data-theme=light] .button.secondary{color:var(--text);background:#fff;border-color:#bdb0ce}
:root[data-theme=light] .button.secondary:hover{background:#ece5f5}
:root[data-theme=light] .genre-tile{background:linear-gradient(135deg,#fff,#eee8f6);border-color:#d1c6df}
:root[data-theme=light] .card-meta{color:#655a74}
:root[data-theme=light] .language,:root[data-theme=light] .card-launch{border-color:#d9d0e3}
:root[data-theme=light] .category-pills button{color:#51415f;background:#fff;border-color:#d1c3df}
:root[data-theme=light] .category-pills button[aria-pressed=true]{background:#64409d;color:#fff}
:root[data-theme=light] input,:root[data-theme=light] select,:root[data-theme=light] textarea{background:#fff;color:#21192d;border-color:#aea0bf}
:root[data-theme=light] .search-field{border-color:#bfb0d0}
:root[data-theme=light] .search-field input{background:transparent}
:root[data-theme=light] .first-run{background:radial-gradient(ellipse at 0 100%,#dac8f166,transparent 65%),#fff;border-color:#ccbcde}
:root[data-theme=light] .creator-banner{background:#ece5f4;border-color:#cbbbdb}
:root[data-theme=light] .creator-emblem{background:linear-gradient(135deg,#e4d7f5,#f7f3fc);border-color:#ad91ca}
:root[data-theme=light] .category-feature{border-color:#d1c4df}
:root[data-theme=light] .source-note{background:#eae3f3}
:root[data-theme=light] .controls-list{color:#41334f}
:root[data-theme=light] .controls-list li{border-color:#d8cee2}
:root[data-theme=light] .notice{background:#eee5fa;color:#49305f;border-color:#cbb5e0}
:root[data-theme=light] .empty-state{border-color:#b69ecb}
:root[data-theme=light] .site-footer{background:#eeebf4;border-color:#d3c9df}
:root[data-theme=light] .toast{background:#fff;color:#352442;border-color:#af95c8}
:root[data-theme=light] .player{background:#f7f4fb;border-color:#b9a5ce}
:root[data-theme=light] .player-toolbar{background:#e8e0f2}
:root[data-theme=light] .player button:not(.button){color:#493359}
:root[data-theme=light] .player-label{color:#17665f}
/* Image-backed promotional surfaces intentionally preserve readable light text. */
:root[data-theme=light] .hero-game,:root[data-theme=light] .side-feature{color:#f5f4ff}
:root[data-theme=light] .hero-copy .eyebrow{color:#70efe4}
:root[data-theme=light] .hero-copy .button{color:#102c2b;background:#70efe4}
:root[data-theme=light] .hero-corner{color:#70efe4}
:root[data-theme=light] .side-feature-1 .eyebrow{color:#70efe4}
:root[data-theme=light] .launch-copy{color:#f5f4ff}
:root[data-theme=light] .launch-copy .eyebrow{color:#c4b0ff}
:root[data-theme=light] [data-saved-count]{color:#fff;background:#64409d}
:root[data-theme=light] ::selection{background:#64409d;color:#fff}
/* Black thumb for both standardized and WebKit scrollbar implementations. */
:root[data-theme=light],:root[data-theme=light] *{scrollbar-color:#111 #e5e1eb}
:root[data-theme=light] ::-webkit-scrollbar{width:11px;height:11px}
:root[data-theme=light] ::-webkit-scrollbar-track{background:#e5e1eb}
:root[data-theme=light] ::-webkit-scrollbar-thumb{background:#111;border:2px solid #e5e1eb;border-radius:8px}
@media(max-width:820px){:root[data-theme=light] .primary-nav{background:#f8f6fc;border-color:#c7b5da}.header-actions{gap:8px}}
@media(max-width:540px){.theme-toggle{width:34px;height:38px;font-size:21px}.header-actions{gap:6px}.header-inner{gap:7px}.brand>span{font-size:15px}.menu-toggle{padding:7px}}
@media(max-width:355px){.theme-toggle{width:30px}.brand small{font-size:4px}.brand>span{font-size:13px}}
:root[data-theme=light] .arcade-strip strong{color:var(--muted)}
:root[data-theme=light] .save-button[aria-pressed=true]{background:#e4f0eb;color:#145b51}
/* Consistent optical size for Lucide theme icons in both button breakpoints. */
[data-theme-icon]{display:flex;align-items:center;justify-content:center}
[data-theme-icon] svg{width:19px;height:19px;stroke-width:1.8}
/* Saved is a persistent filled state; the short pulse only confirms the action.
   Explicit light selector overrides its earlier pale saved-state treatment. */
.save-button[aria-pressed=true],:root[data-theme=light] .save-button[aria-pressed=true]{background:#7442bd;color:#fff;border:2px solid #e2caff;box-shadow:0 0 0 2px #29143899,0 0 15px #a76aff70}
.save-button[aria-pressed=true] svg{fill:currentColor;stroke:currentColor}
.button[data-save][aria-pressed=true],:root[data-theme=light] .button[data-save][aria-pressed=true]{background:#7442bd;color:#fff;border-color:#d6b4ff}
.button[data-save][aria-pressed=true] svg{fill:currentColor}
.save-button[aria-pressed=true]:hover{background:#8650d2}
@keyframes saved-confirm{0%,100%{transform:scale(1)}45%{transform:scale(1.19)}70%{transform:scale(.95)}}
.save-confirm{animation:saved-confirm .32s ease-out}
@media(prefers-reduced-motion:reduce){.save-confirm{animation:none}}

/* Use the same canonical brand artwork as header/footer, without a second badge. */
.creator-banner .creator-emblem{background:none;border:0;box-shadow:none;border-radius:0}
.creator-emblem img{display:block;width:100%;height:100%;object-fit:contain}
/* Theme scan: one short native snapshot wipe and a transform-only light band.
   No click blocking, blur, infinite animation or per-frame JavaScript. */
.theme-scan{position:fixed;inset:0;pointer-events:none;z-index:10000;overflow:hidden;animation:scan-lifetime .52s linear both}
.theme-scan:after{content:'';position:absolute;top:0;bottom:0;left:0;width:14vw;background:linear-gradient(90deg,transparent,#b39aff12 25%,#70efe455 75%,#bdefffaa 93%,transparent);transform:translateX(110vw);animation:scan-band .52s cubic-bezier(.25,.1,.25,1) both}
@keyframes scan-band{from{transform:translateX(100vw)}to{transform:translateX(-18vw)}}
@keyframes scan-lifetime{0%,85%{opacity:1}100%{opacity:0}}
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:theme-reveal .5s cubic-bezier(.25,.1,.25,1) both;mix-blend-mode:normal}
::view-transition-group(root){animation-duration:.5s}
@keyframes theme-reveal{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@media(max-width:820px){.theme-scan:after{width:9vw;background:linear-gradient(90deg,transparent,#70efe433 75%,#c1d8ff88 95%,transparent)}}
@media(prefers-reduced-motion:reduce){.theme-scan{display:none}::view-transition-group(root),::view-transition-new(root),::view-transition-old(root){animation:none!important}}