/* 4thPeriod theme engine (v38). Default look: minimal iOS (clean grouped surfaces, hairlines, soft depth, big bold
   titles) with a little clay (puffy inner highlight on controls) and a little neo (solid ink tags, chunky display
   type). Every part is a variable or a data-cz-* switch set by assets/cz.js, so the Customize page can change it all.
   Loaded after glass.css and re-points its tokens, so everything built on them follows along. */

/* ---------- 1. base tokens (light) ---------- */
html:root{
  --acc:var(--lg-accent-skin,#0a84ff);--acc-ink:#fff;
  --acc-soft:color-mix(in srgb,var(--acc) 13%,transparent);--acc-mid:color-mix(in srgb,var(--acc) 26%,transparent);
  --bg0:#f2f2f7;--s0:#ffffff;--s1:#f2f2f7;--s2:#e5e5ea;--s3:#d8d8de;
  --ink:#0b0b0f;--muted:#6c6c72;--faint:#8e8e93;--hair:rgba(60,60,67,.16);--ink-edge:#111114;
  --r:20px;--bw:1px;--zoom:1;
  --r-s:calc(var(--r) * .6);--r-m:var(--r);--r-l:calc(var(--r) * 1.3);--r-xl:calc(var(--r) * 1.6);
  --edgec:var(--hair);--clay:0 0 #0000;--clay-btn:0 0 #0000;
  --sh-1:0 1px 2px rgba(0,0,0,.05);--sh-2:0 1px 2px rgba(0,0,0,.04),0 10px 30px -14px rgba(0,0,0,.16);--sh-3:0 2px 8px rgba(0,0,0,.06),0 28px 60px -24px rgba(0,0,0,.3);
  --sh-hover:0 2px 6px rgba(0,0,0,.06),0 18px 40px -16px rgba(0,0,0,.22);
  --cta-sh:0 8px 20px -10px color-mix(in srgb,var(--acc) 70%,transparent);
  --press-t:scale(.97);--btn-r:999px;--btn-h:44px;--gap:16px;--pad:20px;
  --font-b:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',ui-sans-serif,system-ui,sans-serif;
  --font-d:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',ui-sans-serif,system-ui,sans-serif;--fw-d:800;--ls-d:-.035em;
  --tag-bg:var(--ink);--tag-ink:var(--s0);--seg-on:var(--s0);--seg-on-ink:var(--ink);
  --hero-bg:var(--s0);--hero-ink:var(--ink);--hero-sub:var(--muted);--hl-bg:var(--acc);--hl-ink:var(--acc-ink);
  --tile-ink:var(--ink);--chip-bg:var(--acc-soft);--chip-ink:var(--acc);
  --t1:var(--s0);--t2:var(--s0);--t3:var(--s0);--t4:var(--s0);--t5:var(--s0);--t6:var(--s0);
  --bg-img:none;--bg-size:auto;
  /* names older page CSS still uses */
  --lg-tint:var(--s0);--lg-tint-2:var(--s1);--lg-tint-3:var(--s0);--lg-blur:none;--lg-spec:none;
  --lg-rim:0 0 0 var(--bw) var(--edgec),var(--clay);--lg-drop:var(--sh-2);--lg-accent:var(--acc);
  --bg:var(--bg0);--surface:var(--s0);--surface-2:var(--s1);--surface-3:var(--s2);--card:var(--s0);--on-card:var(--ink);--line:var(--hair);
  --primary:var(--ink);--on-primary:var(--s0);--primary-c:var(--acc-soft);--on-primary-c:var(--acc);
  --shadow-1:var(--sh-1);--shadow-2:var(--sh-2);--shadow-3:var(--sh-3);--body:var(--font-b);--display:var(--font-d);
  --cb-edge:var(--edgec);--cb-bw:var(--bw);--cb-clay:var(--clay);--cb-sh-sm:var(--sh-1);--cb-sh:var(--sh-2);--cb-sh-lg:var(--sh-3);--cb-y:var(--acc);
  --cb-p:#ffc1e0;--cb-g:#b3ecc9;--cb-b:#bcd2ff;--cb-o:#ffcb99;--cb-l:#dccbff;--cb-ink:var(--ink);--cb-paper:var(--bg0);
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
  color-scheme:light;
}
/* ---------- dark ---------- */
html:root[data-theme=dark]{--bg0:#000;--s0:#1c1c1e;--s1:#2c2c2e;--s2:#3a3a3c;--s3:#48484a;--ink:#f5f5f7;--muted:#a1a1a6;--faint:#7c7c80;--hair:rgba(255,255,255,.1);--ink-edge:#f2efe9;
  --sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 1px 2px rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.7);--sh-3:0 2px 8px rgba(0,0,0,.4),0 28px 60px -24px rgba(0,0,0,.85);--sh-hover:0 18px 40px -16px rgba(0,0,0,.8);--acc-ink:#fff;color-scheme:dark}
@media (prefers-color-scheme:dark){html:root:not([data-theme=light]){--bg0:#000;--s0:#1c1c1e;--s1:#2c2c2e;--s2:#3a3a3c;--s3:#48484a;--ink:#f5f5f7;--muted:#a1a1a6;--faint:#7c7c80;--hair:rgba(255,255,255,.1);--ink-edge:#f2efe9;
  --sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 1px 2px rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.7);--sh-3:0 2px 8px rgba(0,0,0,.4),0 28px 60px -24px rgba(0,0,0,.85);--sh-hover:0 18px 40px -16px rgba(0,0,0,.8);--acc-ink:#fff;color-scheme:dark}}
/* softer-than-black dark unless OLED is on */
html:root[data-theme=dark]:not([data-cz-oled=on]){--bg0:#101012;--s0:#1c1c1f}
@media (prefers-color-scheme:dark){html:root:not([data-theme=light]):not([data-cz-oled=on]){--bg0:#101012;--s0:#1c1c1f}}
html:root[data-cz-oled=on][data-theme=dark]{--bg0:#000;--s0:#0e0e10;--s1:#1a1a1c}
@media (prefers-color-scheme:dark){html:root[data-cz-oled=on]:not([data-theme=light]){--bg0:#000;--s0:#0e0e10;--s1:#1a1a1c}}

/* ---------- 2. switches ---------- */
/* outline */
html[data-cz-outline=none]{--edgec:transparent}
html[data-cz-outline=ink]{--edgec:var(--ink-edge)}
html[data-cz-outline=accent]{--edgec:var(--acc)}
/* shadow */
html[data-cz-shadow=none]{--sh-1:0 0 #0000;--sh-2:0 0 #0000;--sh-3:0 0 #0000;--sh-hover:0 0 #0000;--cta-sh:0 0 #0000}
html[data-cz-shadow=hard]{--sh-1:2px 2px 0 var(--ink-edge);--sh-2:4px 4px 0 var(--ink-edge);--sh-3:7px 7px 0 var(--ink-edge);--sh-hover:7px 7px 0 var(--ink-edge);--cta-sh:3px 3px 0 var(--ink-edge)}
html[data-cz-shadow=clay]{--sh-1:0 4px 10px -4px rgba(40,20,80,.25);--sh-2:0 14px 30px -12px rgba(40,20,80,.3),0 4px 10px -6px rgba(40,20,80,.15);--sh-3:0 30px 60px -24px rgba(40,20,80,.4);--sh-hover:0 22px 44px -14px rgba(40,20,80,.38)}
html[data-cz-shadow=glow]{--sh-1:0 0 0 1px var(--acc-soft);--sh-2:0 0 0 1px var(--acc-soft),0 10px 30px -12px color-mix(in srgb,var(--acc) 50%,transparent);--sh-3:0 0 0 1px var(--acc-mid),0 20px 60px -20px color-mix(in srgb,var(--acc) 60%,transparent);--sh-hover:var(--sh-3);--cta-sh:0 0 24px -4px color-mix(in srgb,var(--acc) 70%,transparent)}
/* clay puffiness */
html[data-cz-clay=soft]{--clay-btn:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 4px rgba(0,0,0,.05)}
html[data-cz-clay=full]{--clay:inset 2px 3px 0 rgba(255,255,255,.6),inset -3px -5px 10px rgba(0,0,0,.07);--clay-btn:inset 2px 3px 0 rgba(255,255,255,.65),inset -2px -4px 8px rgba(0,0,0,.09)}
html[data-theme=dark][data-cz-clay=soft],html[data-theme=dark][data-cz-clay=full]{--clay-btn:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 4px rgba(0,0,0,.25)}
html[data-theme=dark][data-cz-clay=full]{--clay:inset 2px 3px 0 rgba(255,255,255,.06),inset -3px -5px 10px rgba(0,0,0,.35)}
html[data-cz-clay=off]{--clay:0 0 #0000;--clay-btn:0 0 #0000}
@media (prefers-color-scheme:dark){html:not([data-theme=light])[data-cz-clay=soft],html:not([data-theme=light])[data-cz-clay=full]{--clay-btn:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 4px rgba(0,0,0,.25)}html:not([data-theme=light])[data-cz-clay=full]{--clay:inset 2px 3px 0 rgba(255,255,255,.06),inset -3px -5px 10px rgba(0,0,0,.35)}}
html:root[data-skin]{--acc:var(--lg-accent)}
/* fonts */
html[data-cz-font=rounded]{--font-b:'Nunito',ui-rounded,system-ui,sans-serif;--font-d:'Nunito',ui-rounded,system-ui,sans-serif;--fw-d:900;--ls-d:-.02em}
html[data-cz-font=grotesk]{--font-b:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;--font-d:'Archivo Black','Space Grotesk',ui-sans-serif,sans-serif;--fw-d:400;--ls-d:-.02em}
html[data-cz-font=serif]{--font-b:'Inter',ui-sans-serif,system-ui,sans-serif;--font-d:'Instrument Serif',ui-serif,Georgia,serif;--fw-d:400;--ls-d:-.01em}
html[data-cz-font=mono]{--font-b:'JetBrains Mono',ui-monospace,Menlo,monospace;--font-d:'JetBrains Mono',ui-monospace,Menlo,monospace;--fw-d:800;--ls-d:-.04em}
/* backgrounds (a shop theme you equipped wins unless you pick one here) */
html[data-cz-bg=dots]:not([data-skin]){--bg-img:radial-gradient(color-mix(in srgb,var(--ink) 14%,transparent) 1.1px,transparent 1.5px);--bg-size:22px 22px}
html[data-cz-bg=grid]:not([data-skin]){--bg-img:linear-gradient(color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px);--bg-size:28px 28px}
html[data-cz-bg=mesh]:not([data-skin]){--bg-img:radial-gradient(60vw 50vw at 0% 0%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 60%),radial-gradient(50vw 50vw at 100% 20%,color-mix(in srgb,#ff6fb5 18%,transparent),transparent 60%),radial-gradient(60vw 50vw at 50% 100%,color-mix(in srgb,#30d1c8 16%,transparent),transparent 60%);--bg-size:100% 100%}
html[data-cz-bg=tint]:not([data-skin]){--bg0:color-mix(in srgb,var(--acc) 9%,var(--s1))}
/* tiles (home bento + game cards) */
html[data-cz-tiles=pastel]{--t1:#ffe27a;--t2:#ffc1e0;--t3:#b3ecc9;--t4:#bcd2ff;--t5:#ffcb99;--t6:#dccbff;--tile-ink:#141318;--chip-bg:rgba(255,255,255,.6);--chip-ink:#141318;--hero-bg:#ffe27a;--hero-ink:#141318;--hero-sub:#3b3640;--hl-bg:#ff9bcf;--hl-ink:#141318}
html[data-cz-tiles=bold]{--t1:#ffd23f;--t2:#ff5fa2;--t3:#2fd08a;--t4:#4d7cff;--t5:#ff8a3d;--t6:#9b6bff;--tile-ink:#0d0c10;--chip-bg:rgba(255,255,255,.75);--chip-ink:#0d0c10;--hero-bg:var(--acc);--hero-ink:#fff;--hero-sub:rgba(255,255,255,.85);--hl-bg:#ffd23f;--hl-ink:#0d0c10}
html[data-cz-tiles=accent]{--t1:var(--acc-soft);--t2:var(--acc-soft);--t3:var(--acc-soft);--t4:var(--acc-soft);--t5:var(--acc-soft);--t6:var(--acc-soft);--hero-bg:var(--acc-soft)}
/* buttons */
html[data-cz-btn=rounded]{--btn-r:calc(var(--r) * .65)}
html[data-cz-btn=square]{--btn-r:4px}
html[data-cz-press=sink]{--press-t:translate(2px,2px)}
/* density */
html[data-cz-dens=compact]{--btn-h:38px;--gap:10px;--pad:14px}
html[data-cz-dens=roomy]{--btn-h:50px;--gap:22px;--pad:26px}
/* icons */
html[data-cz-icons=line] .ic .f{fill-opacity:0}
html[data-cz-icons=bold] .ic{stroke-width:2.6}html[data-cz-icons=bold] .ic .f{fill-opacity:.38}
/* contrast */
html[data-cz-contrast=high]{--muted:color-mix(in srgb,var(--ink) 78%,transparent);--hair:color-mix(in srgb,var(--ink) 40%,transparent)}
/* chat bubbles follow accent */
html[data-cz-bubble=accent] .ch-panel,html[data-cz-bubble=accent] .cx{--b-me:var(--acc)!important}
/* text size (everywhere except the game player) */
body{zoom:var(--zoom)}

/* ---------- 3. page + type ---------- */
html{background:var(--bg0) var(--bg-img) fixed!important;background-size:var(--bg-size)!important}
html.walled{background:var(--bg0)!important}
html:not(.walled) body::before{background:var(--bg0) var(--bg-img)!important;background-size:var(--bg-size)!important;animation:none!important}
html:root[data-skin] body::before{background:var(--lg-bg)!important}
body{font-family:var(--font-b);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand{font-family:var(--font-d);font-weight:var(--fw-d)!important;letter-spacing:var(--ls-d)!important}
html:not([data-cz-glass=on]) *,html:not([data-cz-glass=on]) *::before,html:not([data-cz-glass=on]) *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---------- 4. the material ---------- */
.bar,.tabs,.card,.tile,.prow,.tp,.modal,.menu,.notice,.nudge,.panel,header .hd,.sc,.ach,.rep,.gate,#pill,#bar,.toast,.chat-glass,.posts > *,.inst,.cont,.pe-prev{
  background-color:var(--s0)!important;background-image:none!important;box-shadow:0 0 0 var(--bw) var(--edgec),var(--clay),var(--sh-2)!important;border-color:transparent!important}
html[data-cz-glass=on]:not(.lite) :is(.bar,.card,.tile,.tp,.modal,.menu,.notice,.panel,.toast,.chat-glass,.posts > *,.b-tile,.slab){background-color:color-mix(in srgb,var(--s0) 62%,transparent)!important;-webkit-backdrop-filter:blur(24px) saturate(180%)!important;backdrop-filter:blur(24px) saturate(180%)!important}
.bar{border-radius:var(--r-l);margin:12px auto 0;width:min(1200px,calc(100% - 24px))}
html[data-cz-bar=flat] .bar{margin:0;width:100%;border-radius:0;box-shadow:0 var(--bw) 0 var(--edgec)!important;top:0}
html[data-cz-bar=flat] .bar:not(.scrolled){background-color:var(--bg0)!important}
.bar.scrolled{box-shadow:0 0 0 var(--bw) var(--edgec),var(--clay),var(--sh-3)!important}
.card{border-radius:var(--r-l)}
.tile,.prow,.tp,.panel,.sc,.ach,.rep{border-radius:var(--r)}
.modal,.gate{border-radius:var(--r-xl);box-shadow:0 0 0 var(--bw) var(--edgec),var(--clay),var(--sh-3)!important;animation:czPop .24s var(--ease-out) both}
@keyframes czPop{from{opacity:0;transform:translateY(8px) scale(.97)}}
.menu{border-radius:var(--r);animation:czPop .16s var(--ease-out) both}
.scrim{background:rgba(0,0,0,.36)!important}
.toast{border-radius:var(--btn-r)!important;color:var(--ink)!important}
.toast button{background:var(--acc)!important;color:var(--acc-ink)!important}
.about{background:#0b0b0f!important;color:#f5f5f7;box-shadow:0 0 0 var(--bw) var(--edgec),var(--sh-3)!important}
.nudge{background-color:var(--acc-soft)!important;color:var(--ink)!important}

/* ---------- 5. controls ---------- */
.btn,.chip .who,#bar .btn,.wm-btn{border-radius:var(--btn-r)!important;background-color:var(--s1)!important;background-image:none!important;color:var(--ink)!important;font-weight:650!important;
  box-shadow:0 0 0 var(--bw) var(--edgec),var(--clay-btn)!important;transition:transform .12s var(--ease-out),box-shadow .15s var(--ease-out),background-color .15s ease,filter .15s!important}
.btn{min-height:var(--btn-h)}
@media (hover:hover) and (pointer:fine){.btn:hover,.chip .who:hover{background-color:var(--s2)!important;filter:none!important}}
.btn:active,.chip .who:active{transform:var(--press-t)!important;transition-duration:60ms!important}
.btn.primary{background-color:var(--acc)!important;color:var(--acc-ink)!important;box-shadow:0 0 0 var(--bw) var(--edgec),var(--clay-btn),var(--cta-sh)!important}
@media (hover:hover) and (pointer:fine){.btn.primary:hover{background-color:color-mix(in srgb,var(--acc) 88%,#000)!important}}
.btn.dark{background-color:var(--ink)!important;color:var(--s0)!important}
.btn.tonal,.btn.qcta{background-color:var(--acc-soft)!important;color:var(--acc)!important}
html[data-cz-tiles=pastel] .btn.tonal{background-color:var(--cb-l)!important;color:#141318!important}html[data-cz-tiles=pastel] .btn.qcta{background-color:var(--cb-g)!important;color:#141318!important}
.btn[disabled]{opacity:.45}
.tabs{border-radius:calc(var(--btn-r) + 4px)!important;padding:4px!important;background-color:var(--s1)!important;box-shadow:0 0 0 var(--bw) var(--edgec)!important}
.tabs a,.tabs button{border-radius:var(--btn-r)!important;font-weight:650!important;color:var(--muted)!important}
.tabs a[aria-current=true],.tabs button[aria-selected=true]{color:var(--seg-on-ink)!important}
.tabs .ind{background:var(--seg-on)!important;border-radius:var(--btn-r)!important;box-shadow:0 0 0 var(--bw) var(--edgec),var(--sh-1),var(--clay-btn)!important;top:4px}
.tabs button[aria-selected=true]{background:var(--seg-on)!important;box-shadow:var(--sh-1)!important}
.seg button{border-radius:var(--btn-r)!important;background:var(--s1)!important;box-shadow:0 0 0 var(--bw) var(--edgec)!important;font-weight:650}
.seg button[aria-pressed=true]{background:var(--acc)!important;color:var(--acc-ink)!important}
.gfilt button,.ch-sub button,.flt button,.cats button{border-radius:var(--btn-r)!important;box-shadow:0 0 0 var(--bw) var(--edgec)!important;background:var(--s0)!important;font-weight:650!important;color:var(--ink)!important}
.gfilt button[aria-pressed=true],.ch-sub button[aria-pressed=true]{background:var(--ink)!important;color:var(--s0)!important}
.field input,.field textarea,.field select,input[type=text],input[type=search],input[type=number],input[type=email],input[type=password],textarea,select{
  background:var(--s1)!important;border:0!important;border-radius:calc(var(--r) * .7)!important;box-shadow:0 0 0 var(--bw) var(--edgec)!important;color:var(--ink)}
.field input:focus,.field textarea:focus,input:focus,textarea:focus,select:focus{box-shadow:0 0 0 var(--bw) var(--edgec),0 0 0 3px var(--acc-mid)!important;outline:none}
.modal .x{background:var(--s1)!important;box-shadow:0 0 0 var(--bw) var(--edgec)!important;border-radius:999px!important}
:focus-visible{outline:2px solid var(--acc)!important;outline-offset:2px}
.card .thumb{border-radius:calc(var(--r) * .9)!important;box-shadow:0 0 0 var(--bw) var(--edgec)!important}
.tag{background:var(--tag-bg)!important;color:var(--tag-ink)!important;border-radius:8px!important;font-weight:800!important}
.tiles .tile:nth-child(1){background-color:var(--t4)!important}.tiles .tile:nth-child(2){background-color:var(--t3)!important}.tiles .tile:nth-child(3){background-color:var(--t2)!important}.tiles .tile:nth-child(4){background-color:var(--t5)!important}
.tiles .tile:nth-child(-n+4){color:var(--tile-ink)!important}.tiles .tile:nth-child(-n+4) span{color:var(--tile-ink)!important;opacity:.7}
.brand .mark{background:var(--ink)!important;color:var(--s0)!important;border-radius:calc(var(--r) * .5)!important;box-shadow:var(--clay-btn);font-family:var(--font-d)}
html[data-cz-shadow=hard] .brand .mark{background:var(--acc)!important;color:var(--acc-ink)!important;box-shadow:0 0 0 var(--bw) var(--edgec),2px 2px 0 var(--ink-edge);rotate:-5deg}

/* ---------- 6. motion ---------- */
@media (hover:hover) and (pointer:fine){
  .card,.tile,.prow{transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)!important}
  .card:hover{transform:translateY(-3px)!important;box-shadow:0 0 0 var(--bw) var(--edgec),var(--clay),var(--sh-hover)!important}
  html[data-cz-shadow=hard] .card:hover{transform:translate(-3px,-3px)!important}
}
.card:active{transform:var(--press-t)!important}
.reveal:not(.in){filter:none!important}
html[data-cz-motion=calm] *,html[data-cz-motion=calm] *::before,html[data-cz-motion=calm] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
html[data-cz-motion=calm] .reveal{opacity:1!important;transform:none!important}
html[data-cz-motion=off] *,html[data-cz-motion=off] *::before,html[data-cz-motion=off] *::after{animation:none!important;transition:none!important}
html[data-cz-motion=off] .reveal{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none!important}.modal,.gate,.menu{animation-name:czFade!important}}
@keyframes czFade{from{opacity:0}}

/* ---------- 7. chat panel, phone tab bar, icons ---------- */
.ch-panel{border-radius:var(--r-xl)!important;box-shadow:0 0 0 var(--bw) var(--edgec),var(--sh-3)!important}
.ch-fab{background:var(--acc)!important;color:var(--acc-ink)!important;box-shadow:0 0 0 var(--bw) var(--edgec),var(--clay-btn),var(--sh-2)!important}
.ch-tabs{box-shadow:0 0 0 var(--bw) var(--edgec)!important;background:var(--s1)!important}
.ch-tabs i{background:var(--seg-on)!important;box-shadow:var(--sh-1)!important}
.ch-tabs button[aria-pressed=true]{color:var(--ink)!important}
.ch-x,.ch-coins{box-shadow:0 0 0 var(--bw) var(--edgec)!important}
.btn .ic,.tabs .ic{width:1.15em;height:1.15em}
.bnav{display:none}
@media (max-width:700px){
  html.has-bnav body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .bnav{position:fixed;z-index:70;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px;border-radius:var(--r-l);
    background:var(--s0);box-shadow:0 0 0 var(--bw) var(--edgec),var(--clay),var(--sh-3)}
  html[data-cz-glass=on]:not(.lite) .bnav{background:color-mix(in srgb,var(--s0) 65%,transparent);-webkit-backdrop-filter:blur(24px) saturate(180%)!important;backdrop-filter:blur(24px) saturate(180%)!important}
  .bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border-radius:var(--r);text-decoration:none;color:var(--muted);font:650 11px var(--font-b);transition:transform .12s var(--ease-out),background-color .15s ease}
  .bnav a .ic{width:24px;height:24px}
  .bnav a[aria-current=page]{background:var(--acc-soft);color:var(--acc)}
  .bnav a:active{transform:scale(.94)}
  html.has-bnav .mobc,html.has-bnav .ch-fab{display:none!important}
  html.has-bnav .bar a.btn:not(.primary){display:none!important}html.has-bnav .bar .bar-in{gap:6px!important}
}
@media (prefers-contrast:more){:root{--hair:color-mix(in srgb,var(--ink) 45%,transparent)}}
html.lite .card,html.lite .tile{transition-duration:.15s!important}
/* hero sits on the accent color in Bold: keep its buttons readable */
html[data-cz-tiles=bold] .b-main .btn:not(.primary){background-color:var(--s0)!important;color:var(--ink)!important}
html[data-cz-tiles=bold] .b-main .btn.primary{background-color:var(--ink)!important;color:var(--s0)!important}
html[data-cz-tiles=bold] .b-main .b-kick{background:var(--s0);color:var(--ink)}
html[data-cz-tiles=bold] .hero.bento h1 .four{color:#fff}

/* ---------- speed: skip painting work for things far off screen ---------- */
#grid .card{content-visibility:auto;contain-intrinsic-size:auto 420px}
.sec:not(#games):not(:first-of-type){content-visibility:auto;contain-intrinsic-size:auto 600px}
.bk-row,.slab{contain:layout style}
img{content-visibility:auto}

.pal-b{min-width:var(--btn-h);padding:0 12px!important;gap:8px}.pal-b .ic{width:18px;height:18px}.pal-b span,.pal-b kbd{display:none}
@media (min-width:1500px){.pal-b span{display:inline}.pal-b kbd{display:inline;font:650 11px var(--font-b);padding:2px 6px;border-radius:6px;background:var(--s2);color:var(--muted)}}
@media (max-width:700px){.pal-b{display:none!important}}
.bk-star{margin-left:auto;width:40px;height:40px;border:0;border-radius:50%;background:var(--s1);color:var(--muted);cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 var(--bw) var(--edgec)}.bk-star .ic{width:20px;height:20px}
.bk-star[aria-pressed=true]{color:#e8a400;background:color-mix(in srgb,#f5b301 18%,var(--s0))}.bk-star[aria-pressed=true] .ic .f{fill:#f5b301;fill-opacity:1}.bk-star:active{transform:scale(.9)}
.bk-eye{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-left:5px;color:#e8a400}.bk-eye .ic{width:14px;height:14px}