/* Theme colors apply to the portal; game art and playfield colors are intrinsic. */
html{color-scheme:light}
html[data-theme=dark]{color-scheme:dark;background:#101522}
html[data-theme=light]{background:#f4f7ff}
.site-header .header-note{display:none}
.site-header .theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-height:44px;padding:9px 13px;border:1px solid #b6c2dc;border-radius:100px;background:#fff;color:#15234b;font-size:.875rem;font-weight:650;line-height:1.4;margin-left:auto}
.theme-toggle svg{width:19px;height:19px;flex:none}
.theme-toggle .theme-sun{display:none}
html[data-theme=light] .theme-toggle .theme-sun{display:block}
html[data-theme=light] .theme-toggle .theme-moon{display:none}
.site-header .theme-toggle:hover{background:#e7edff;border-color:#4264f5}
.site-header #profile-nav{margin-left:0}
html[data-theme=dark] body{background:#101522;color:#f4f7ff;color-scheme:dark}
html[data-theme=dark] ::selection{background:#a8e8ec;color:#15234b}
html[data-theme=dark] :is(.site-header,.site-footer){border-color:#2b354d}
html[data-theme=dark] :is(.site-header,.site-footer) .brand{color:#f4f7ff}
html[data-theme=dark] :is(.site-header,.site-footer) .brand-word>span{color:#98b0ff}
html[data-theme=dark] :is(.site-header,.site-footer) .brand img,
html[data-theme=dark] .choco-empty{content:url('/assets/brand/choco-mark-light.svg')}
html[data-theme=dark] .main-nav :is(a,button){color:#b7c2db}
html[data-theme=dark] .main-nav :is(.nav-active,button:hover){color:#fff}
html[data-theme=dark] .nav-active:after{background:#98b0ff}
html[data-theme=dark] .main-nav button span{color:#a8e8ec}
html[data-theme=dark] .site-header :is(.theme-toggle,.icon-button,#profile-nav){background:#1b2336;border-color:#36415b;color:#ecf1ff;box-shadow:none}
html[data-theme=dark] .site-header :is(.theme-toggle,.icon-button,#profile-nav):hover{background:#29334b;border-color:#819cff}
html[data-theme=dark] .site-header #profile-nav .social-avatar{color:#15234b}
html[data-theme=dark] .choco-welcome .eyebrow{color:#a6b3cf}
html[data-theme=dark] .choco-welcome h1 em{color:#98b0ff}
html[data-theme=dark] .choco-welcome .shuffle-button{background:#d9f96f;border-color:#d9f96f;color:#15234b}
html[data-theme=dark] .choco-welcome .shuffle-button svg{color:#15234b}
html[data-theme=dark] .choco-welcome .shuffle-button:hover{background:#e5ff95}
html[data-theme=dark] .feature-play{border-color:#35435f;box-shadow:0 4px 0 #060b1440}
html[data-theme=dark] .favorite-shelf>span{color:#b7c2db}
html[data-theme=dark] .favorite-shelf button{background:#1c263b;color:#e4ebff;border-color:#44516d}
html[data-theme=dark] .favorite-shelf button:hover{background:#293652}
html[data-theme=dark] .catalog-heading .eyebrow{color:#a6b3cf}
html[data-theme=dark] .lavender{color:#98b0ff}
html[data-theme=dark] .search-box{background:#1b2336;border-color:#44516d;color:#f4f7ff}
html[data-theme=dark] .search-box input{color:#f4f7ff}
html[data-theme=dark] .search-box input::placeholder{color:#a9b6d0}
html[data-theme=dark] .search-box svg{color:#acbbd9}
html[data-theme=dark] .search-box>span{border-color:#596986;color:#b5c2dc}
html[data-theme=dark] .search-box:focus-within{border-color:#98b0ff;outline-color:#98b0ff50}
html[data-theme=dark] .filter{color:#bdc8e1;border-color:#3c4861}
html[data-theme=dark] .filter.active{color:#15234b;background:#a8baff;border-color:#a8baff}
html[data-theme=dark] .filter.active>span{background:#15234b15}
html[data-theme=dark] .filter:not(.active):hover{background:#252f46;color:#fff;border-color:#819cff}
html[data-theme=dark] .catalog-count{color:#a6b3cf}
html[data-theme=dark] .game-card{background:#1a2234;color:#f4f7ff;border-color:#34415d;box-shadow:0 3px 0 #050a163b}
html[data-theme=dark] .game-card:hover{border-color:#718bd3;box-shadow:0 7px 0 #050a165c}
html[data-theme=dark] .card-title>span{color:#95a9de}
html[data-theme=dark] .game-card:hover .card-title>span{color:#d9f96f}
html[data-theme=dark] .card-description{color:#bbc6de}
html[data-theme=dark] .card-category{color:#a2b0cf}
html[data-theme=dark] .empty-state{background:#1b2336;border-color:#657795;color:#f4f7ff}
html[data-theme=dark] .empty-state p{color:#bbc6de}
html[data-theme=dark] .last-call{background:#1e2d58;border:1px solid #3f5792}
html[data-theme=dark] .site-footer>p,html[data-theme=dark] .site-footer>span{color:#a7b4d0}
html[data-theme=dark] body>:is(.site-header,main,.site-footer) :focus-visible{outline-color:#a8e8ec}
@media(max-width:1200px){.site-header{gap:18px}.site-header #header-search{display:none}.site-header #profile-nav{margin-left:0}.site-header .main-nav{gap:20px}}
@media(max-width:1050px){.site-header #profile-nav{padding:4px;max-width:44px}.site-header #profile-nav>span:last-child{display:none}.theme-toggle>[data-theme-label]{display:none}.site-header .theme-toggle{width:44px;min-width:44px;padding:0}}
@media(max-width:900px){.site-header{height:auto;min-height:82px;padding:16px 5%;gap:12px;flex-wrap:wrap}.site-header .brand{order:0;font-size:26px}.site-header .brand img{width:37px;height:37px}.site-header .theme-toggle{order:1;margin-left:auto}.site-header #profile-nav{order:2;margin-left:0}.site-header .main-nav{order:3;flex:1 0 100%;height:36px;justify-content:space-between;gap:20px}.site-header .main-nav :is(a,button){min-height:36px;font-size:.9375rem}.site-header .main-nav #multiplayer-nav{display:flex}.site-header .nav-active:after{bottom:-4px;height:3px}}
@media(max-width:380px){.site-header{column-gap:8px}.site-header .brand{font-size:23px;gap:8px}.site-header .brand img{width:31px;height:31px}.site-header .main-nav{gap:12px}}