/* Brain Stars puzzle games, brain map, family duel, word buttons in the lobby.
   Puzzle stages sit on the bright quiz card (dark ink on white) in every theme. */
:root { --bm-logic:#9B6CFF; --bm-memory:#F05CA6; --bm-maths:#2CC98A; --bm-words:#FF9A3D; --bm-spatial:#22C3C0; --bm-knowledge:#3C9BFF }

/* ---------- lobby: word buttons instead of icons ---------- */
.hud-btn.word { width:auto; min-width:118px; padding:0; gap:0; flex-direction:row; justify-content:center; position:relative }
.hud-btn.word .hud-lbl { display:block; width:100%; padding:13px 18px 12px; border-radius:18px; font-family:var(--f-display); font-weight:400; font-size:17px; letter-spacing:.04em; text-transform:uppercase; color:#fff;
  text-shadow:0 2px 0 color-mix(in srgb,var(--td) 70%,#000); background:linear-gradient(180deg,color-mix(in srgb,var(--ta) 80%,#fff) 0,var(--ta) 40%,var(--td) 100%);
  border:2px solid #ffffffa6; box-shadow:inset 0 2px 0 #ffffff80, inset 0 -3px 0 #00000026, 0 5px 0 color-mix(in srgb,var(--td) 60%,#000), 0 10px 18px #0006 }
.hud-btn.word:hover { transform:translateY(-2px) } .hud-btn.word:active { transform:translateY(4px) } .hud-btn.word:active .hud-lbl { box-shadow:inset 0 2px 0 #ffffff80, 0 1px 0 color-mix(in srgb,var(--td) 60%,#000) }
.hud-btn.word .hud-badge { top:-9px; right:-8px }
.hud-btn.word.brave .hud-lbl { --ta:#5C6BC0; --td:#283593 } .hud-btn.word.brave.on .hud-lbl { --ta:#FFE873; --td:#EFA20B; color:#4A2A00; text-shadow:0 1px 0 #fff8 }
.hud-rail.left .hud-btn.word { align-self:stretch } .hud-rail.right .hud-btn.word { align-self:stretch }
.hud-rail { min-width:0 }
@media (max-width:900px) {
  .hud-btn.word { min-width:0; width:100% } .hud-btn.word .hud-lbl { font-size:11px; padding:10px 4px 9px; border-radius:13px; letter-spacing:.02em }
  .hud-btn.word .hud-badge { top:-8px; right:-6px }
}
@media (max-width:360px) { .hud-btn.word .hud-lbl { font-size:10px } }

/* ---------- topics: puzzle tiles ---------- */
html.kid .tgh { display:flex; align-items:center; gap:10px; margin:6px 0 -2px } html.kid .tgh .gi { --gis:34px }
.ttile .gi.tgl:not(.bare) { --gis:52px; margin-bottom:auto }
.ttile.pztile.more { --ta:#FFE873; --td:#EF8E0B; color:#4A2A00 } .ttile.pztile.more strong { text-shadow:0 2px 0 #fff8 } .ttile.pztile.more .tgo .gi.bare { color:#5A3200 }
.pzgroups { display:flex; flex-direction:column; gap:14px }

/* ---------- the puzzle card ---------- */
html.kid .pzpanel .qhead .chiprow { align-items:center } html.kid .pzpanel .qhead .gi { --gis:36px }
.pz-stage { width:100%; align-self:stretch; display:flex; flex-direction:column; align-items:center; gap:14px; color:#121A46 }
.pz-stage:empty { display:none }
.pz-tok { width:100%; height:100%; display:block }
.pz-big { font-family:var(--f-ui); font-weight:700; font-size:1.2rem; text-align:center; margin:0; color:#121A46 }
.pz-hint { margin:0; color:#4A557E; font-weight:600; text-align:center }
.pz-seq { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:16px; border-radius:18px; background:#F2F4FF; border:2px solid #DCE1F5; width:100%; box-sizing:border-box }
.pz-seq > svg, .pz-seq > .pz-num, .pz-seq > .pz-q { width:clamp(46px,9vw,72px); height:clamp(46px,9vw,72px); flex:none }
.pz-num, .pz-q { display:grid; place-items:center; border-radius:14px; background:#fff; border:2px solid #C9D1F2; font-family:var(--f-ui); font-weight:700; font-size:clamp(1.15rem,2.6vw,1.6rem); color:#121A46; box-shadow:0 3px 0 #C9D1F2 }
.pz-q { background:#FFF3C4; border:2px dashed #EFA20B; color:#B06A00; font-family:var(--f-display); font-weight:400; font-size:clamp(1.4rem,3vw,2rem) }
.pz-num { padding:0 6px; min-width:clamp(46px,9vw,72px); width:auto !important }
.pz-answers .ans { min-height:84px }
.pz-answers .pzo { display:flex; align-items:center; gap:10px }
.pz-answers .pzo .pz-tok { width:64px; height:64px; flex:none }
.pz-answers .pzo .pz-paper { width:84px; height:84px }
.pz-onum, .pz-otxt { font-family:var(--f-ui); font-weight:700; font-size:1.25rem; color:#121A46 }
.pz-answers.three { grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:680px) { .pz-answers { grid-template-columns:1fr 1fr !important } .pz-answers .ans { padding:12px; gap:10px } .pz-answers .pzo .pz-tok { width:52px; height:52px } .pz-answers.three { grid-template-columns:1fr !important } }
.pz-swatch { width:30px; height:30px; border-radius:50%; background:var(--sw); border:3px solid #1b1f4e; flex:none }

/* matrix */
.pz-matrix { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:min(330px,100%); padding:12px; border-radius:18px; background:#F2F4FF; border:2px solid #DCE1F5 }
.pz-cell { aspect-ratio:1; border-radius:12px; background:#fff; border:2px solid #DCE1F5; padding:6px; display:grid; place-items:center } .pz-cell.q { background:#FFF3C4; border:2px dashed #EFA20B }
.pz-cell .pz-q { width:70%; height:70%; border:0; box-shadow:none; background:none }

/* clues */
.pz-clues { width:100%; background:#F2F4FF; border:2px solid #DCE1F5; border-radius:18px; padding:14px 18px; box-sizing:border-box }
.pz-cluehead { margin:0 0 8px; font-weight:700; color:#121A46 }
.pz-clues ol { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px; font-size:1.0625rem; color:#121A46; font-weight:600 }
.pz-houses { display:flex; justify-content:center; gap:14px; margin-bottom:10px } .pz-house { display:flex; flex-direction:column; align-items:center; font-family:var(--f-ui); font-weight:700; color:#121A46 } .pz-house svg { width:54px; height:50px }

/* memory: flash, estimate */
.pz-memo { width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; padding:16px; border-radius:18px; background:#F2F4FF; border:2px solid #DCE1F5; box-sizing:border-box; position:relative }
.pz-start { min-width:200px }
.pz-flashgrid { display:flex; flex-wrap:wrap; justify-content:center; gap:12px }
.pz-fl { width:clamp(58px,12vw,84px); height:clamp(58px,12vw,84px); border-radius:16px; background:#fff; border:2px solid #DCE1F5; padding:6px; display:grid; place-items:center; box-sizing:border-box }
.pz-fl.back { background:repeating-linear-gradient(45deg,#C9D1F2 0 8px,#DCE1F5 8px 16px) } .pz-fl.gap { border:2px dashed #EFA20B; background:#FFF3C4; font-family:var(--f-display); font-size:1.8rem; color:#B06A00 }
.pz-memo.show .pz-fl { animation:popIn .3s cubic-bezier(.3,1.5,.5,1) backwards }
.pz-timer { position:absolute; left:14px; right:14px; top:8px; height:6px; border-radius:6px; background:#DCE1F5; overflow:hidden }
.pz-timer i { display:block; height:100%; background:linear-gradient(90deg,#FF9A3D,#FFD447); transform-origin:left; animation:pzDrain linear forwards }
@keyframes pzDrain { from { transform:scaleX(1) } to { transform:scaleX(0) } }
.pz-dots { width:min(420px,100%); height:auto; color:#121A46; background:#fff; border-radius:14px; border:2px solid #DCE1F5 }

/* simon */
.pz-simon { width:100%; display:flex; flex-direction:column; align-items:center; gap:12px }
.pz-pads { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:min(320px,86vw) }
.pz-pad { position:relative; aspect-ratio:1; border-radius:24px; border:4px solid #1b1f4e; background:color-mix(in srgb,var(--pc) 55%,#1b1f4e); padding:22%; cursor:pointer; box-shadow:0 6px 0 #1b1f4e; transition:transform .08s, filter .08s, background .08s }
.pz-pad .pz-tok { opacity:.85 } .pz-pad b { position:absolute; right:10px; bottom:6px; color:#fff; font-family:var(--f-ui); opacity:.7 }
.pz-pad.lit { background:var(--pc); filter:brightness(1.25) drop-shadow(0 0 18px var(--pc)); transform:scale(1.04) }
.pz-pad:not(:disabled):active { transform:translateY(4px); box-shadow:0 2px 0 #1b1f4e }
.pz-pad:disabled { cursor:default }
.pz-dots { display:flex } .pz-simon .pz-dots, .pz-dotrow { display:flex; gap:6px } .pz-simon .pz-dots { width:auto; background:none; border:0 }
.pz-simon .pz-dots i { width:22px; height:10px; border-radius:6px; background:#DCE1F5 } .pz-simon .pz-dots i.on { background:linear-gradient(90deg,#FF9A3D,#FFD447) }

/* spot the difference */
.pz-spotwrap { width:100%; display:flex; flex-direction:column; align-items:center; gap:10px }
.pz-spotpair { display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100% }
@media (max-width:600px) { .pz-spotpair { grid-template-columns:1fr } }
.pz-spot { display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:5px; padding:10px; border-radius:16px; background:#FFF8E8; border:3px solid #1b1f4e }
.pz-sc { aspect-ratio:1; border:0; border-radius:10px; background:#fff; padding:5px; cursor:pointer; position:relative }
.pz-sc.found::after, .pz-sc.missed::after { content:""; position:absolute; inset:-3px; border-radius:50%; border:4px solid #16A673 } .pz-sc.missed::after { border-color:#D93A47; border-style:dashed }

/* speed sort */
.pz-sort { width:100%; display:flex; flex-direction:column; gap:10px; touch-action:pan-y }
.pz-score { margin:0; text-align:center; font-family:var(--f-ui); font-weight:700; color:#4A557E }
.pz-lane { position:relative; height:240px; border-radius:18px; background:linear-gradient(#EEF1FF,#DCE1F5); border:2px solid #C9D1F2; overflow:hidden }
.pz-lane.idle { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:16px; height:auto; min-height:200px }
.pz-fall { position:absolute; left:50%; top:0; width:110px; height:100%; margin-left:-55px; will-change:transform }
.pz-fall > * { position:absolute; top:-6px; left:0; width:110px; height:80px }
.pz-fall .pz-tok { width:80px; height:80px; left:15px }
.pz-word { display:grid; place-items:center; background:#fff; border:3px solid #1b1f4e; border-radius:16px; font-family:var(--f-ui); font-weight:700; font-size:1.3rem; color:#121A46; box-shadow:0 4px 0 #1b1f4e }
.pz-buckets { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.pz-bucket { min-height:70px; border-radius:18px; border:3px solid #1b1f4e; font-family:var(--f-ui); font-weight:700; font-size:1.05rem; cursor:pointer; box-shadow:0 5px 0 #1b1f4e; color:#121A46 }
.pz-bucket.l { background:linear-gradient(#BFE6FF,#7CC8FF) } .pz-bucket.r { background:linear-gradient(#FFD1E8,#FF9ACB) }
.pz-bucket:not(:disabled):active { transform:translateY(4px); box-shadow:0 1px 0 #1b1f4e } .pz-bucket:disabled { opacity:.6 }

/* make the target */
.pz-target { width:100%; display:flex; flex-direction:column; align-items:center; gap:12px }
.pz-goal { display:flex; align-items:center; gap:12px; font-family:var(--f-ui); font-weight:700; color:#4A557E; font-size:1.1rem }
.pz-goal b { font-family:var(--f-display); font-weight:400; font-size:2.6rem; color:#121A46; background:#FFF3C4; border:3px solid #EFA20B; border-radius:18px; padding:2px 22px; box-shadow:0 4px 0 #EFA20B }
.pz-ntiles, .pz-ops, .pz-ltiles { display:flex; flex-wrap:wrap; justify-content:center; gap:10px }
.pz-ntile { min-width:68px; height:68px; padding:0 12px; border-radius:16px; border:3px solid #1b1f4e; background:#fff; font-family:var(--f-ui); font-weight:700; font-size:1.6rem; color:#121A46; box-shadow:0 5px 0 #1b1f4e; cursor:pointer }
.pz-ntile.sel { background:#FFE873; transform:translateY(-3px) }
.pz-op { width:58px; height:58px; border-radius:50%; border:3px solid #1b1f4e; background:#E6E9FF; font-family:var(--f-ui); font-weight:700; font-size:1.6rem; color:#121A46; box-shadow:0 4px 0 #1b1f4e; cursor:pointer }
.pz-op.sel { background:#9B6CFF; color:#fff } .pz-op:disabled { opacity:.45; cursor:default }
.pz-work { margin:0; padding-left:20px; color:#121A46; font-weight:700; font-family:var(--f-ui) }
.pz-tools { justify-content:center }

/* balance */
.pz-scale { position:relative; width:min(460px,100%); padding:14px 10px 6px; display:flex; flex-direction:column; align-items:center }
.pz-pans { display:grid; grid-template-columns:1fr 1fr; gap:46px; width:100% }
.pz-pan { min-height:86px; display:flex; flex-wrap:wrap; gap:6px; align-items:flex-end; justify-content:center; padding:8px 8px 12px; border-bottom:8px solid #1b1f4e; border-radius:0 0 40% 40%; background:linear-gradient(transparent 55%,#FFE9B8) }
.pz-wt { min-width:48px; height:48px; padding:0 8px; border-radius:10px; background:#3C9BFF; border:3px solid #1b1f4e; color:#fff; font-family:var(--f-ui); font-weight:700; font-size:1.25rem; display:grid; place-items:center; box-shadow:0 3px 0 #1b1f4e }
.pz-wt.q { background:#FFD447; color:#4A2A00 }
.pz-beam { width:100%; height:10px; background:#1b1f4e; border-radius:6px; margin-top:4px } .pz-post { width:14px; height:40px; background:#1b1f4e; border-radius:0 0 4px 4px; position:relative } .pz-post::after { content:""; position:absolute; left:-30px; bottom:-8px; width:74px; height:12px; border-radius:6px; background:#1b1f4e }
.pz-eq { margin:18px 0 0; font-family:var(--f-ui); font-weight:700; font-size:1.2rem; color:#121A46 }

/* word builder / word tiles */
.pz-build { width:100%; display:flex; flex-direction:column; align-items:center; gap:12px }
.pz-word.cur { min-width:200px; min-height:58px; padding:8px 18px; font-size:1.8rem; letter-spacing:.12em; text-transform:uppercase; box-shadow:none; border-style:dashed }
.pz-ltile { width:56px; height:60px; border-radius:14px; border:3px solid #1b1f4e; background:#FFF3C4; font-family:var(--f-display); font-weight:400; font-size:1.7rem; color:#121A46; display:grid; place-items:center; box-shadow:0 5px 0 #1b1f4e; cursor:pointer }
.pz-ltile:disabled { opacity:.3; transform:translateY(4px); box-shadow:0 1px 0 #1b1f4e }
.pz-ltiles.static .pz-ltile { cursor:default } .pz-ltile.gap { background:#fff; border-style:dashed; color:#B06A00 }
.pz-found { justify-content:center }
.pz-hintbtn { align-self:flex-start } .pz-hintbtn .gi.bare { --gis:18px; --bare-d:transparent }
.pz-hintbox { display:flex; align-items:center; gap:10px; width:100%; align-self:stretch; background:#FFF3C4; border:2px solid #EFA20B; border-radius:14px; padding:10px 14px; color:#4A2A00; margin:0 }
html.kid .pzpanel .pz-hintbtn { background:#fff; color:#121A46; border:2px solid #D3D9F2; --edge:#BFC7E6 }

/* spatial */
.pz-rotsrc { width:min(180px,46vw); aspect-ratio:1; background:#F2F4FF; border:2px solid #DCE1F5; border-radius:18px; padding:8px }
.pz-mirror { display:flex; align-items:center; justify-content:center; gap:14px; background:#F2F4FF; border:2px solid #DCE1F5; border-radius:18px; padding:12px 20px }
.pz-mirror .pz-tok { width:140px; height:140px } .pz-mline { width:8px; align-self:stretch; border-radius:4px; background:repeating-linear-gradient(#9FD8FF 0 10px,#5DB8F5 10px 20px) }
.pz-mirror .pz-q { width:110px; height:110px }
.pz-foldsteps { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; width:100% }
.pz-foldsteps > div { display:flex; flex-direction:column; align-items:center; gap:4px; font-weight:700; color:#4A557E }
.pz-foldsteps .pz-paper { width:110px; height:110px } .pz-foldsteps .pz-q { width:110px; height:110px }
.pz-arrow { font-size:1.8rem; color:#121A46; font-weight:900 }
.pz-maze { display:flex; flex-direction:column; align-items:center; gap:12px; width:100% }
.pz-mazesvg { width:min(380px,86vw); height:auto; border-radius:14px; border:3px solid #1b1f4e; background:#FFF8E8; touch-action:none }
.pz-dpad { display:grid; grid-template-columns:repeat(3,58px); grid-template-rows:repeat(2,58px); gap:8px }
.pz-dpad button { border-radius:16px; border:3px solid #1b1f4e; background:linear-gradient(#FFF27A,#FFC23A); color:#3B2100; font-size:1.3rem; box-shadow:0 4px 0 #C2650F; cursor:pointer }
.pz-dpad button:nth-child(1) { grid-column:2 } .pz-dpad button:nth-child(2) { grid-column:1; grid-row:2 } .pz-dpad button:nth-child(3) { grid-column:2; grid-row:2 } .pz-dpad button:nth-child(4) { grid-column:3; grid-row:2 }
.pz-dpad button:active { transform:translateY(3px); box-shadow:0 1px 0 #C2650F }
.pz-connect { width:100%; display:flex; flex-direction:column; align-items:center; gap:10px }
.pz-flow { display:grid; grid-template-columns:repeat(var(--n),1fr); width:min(380px,88vw); aspect-ratio:1; border:3px solid #1b1f4e; border-radius:14px; overflow:hidden; background:#1b1f4e; gap:2px; touch-action:none }
.pz-fc { position:relative; border:0; background:#FFF8E8; padding:0; cursor:pointer }
.pz-fc .lk { position:absolute; background:var(--fc); left:35%; top:35%; width:30%; height:30% }
.pz-fc .lk.n { top:0; height:65% } .pz-fc .lk.s { top:35%; height:65% } .pz-fc .lk.w { left:0; width:65% } .pz-fc .lk.e { left:35%; width:65% }
.pz-fc b { position:absolute; inset:16%; border-radius:50%; border:3px solid #1b1f4e; z-index:1 }
.pz-fc.sel b { box-shadow:0 0 0 4px #fff, 0 0 0 7px #1b1f4e }

/* ---------- boss round ---------- */
.bossbar { display:flex; align-items:center; gap:10px; width:100%; align-self:stretch; padding:10px 14px; border-radius:16px; background:linear-gradient(90deg,#3B1E78,#7A2BB8 55%,#C2367F); color:#fff; font-family:var(--f-ui); letter-spacing:.02em; box-shadow:0 4px 0 #24124a }
.bossbar b { color:#FFE264 } .bossbar .gi { --gis:34px }
html.kid .qpanel.boss { box-shadow:0 0 0 4px #FFC23A, 0 0 34px #FFC23A88, 0 9px 0 var(--g-edge), 0 20px 40px #0007 }

/* ---------- results: skills that grew ---------- */
.skillgain { width:100%; align-self:stretch; display:flex; flex-direction:column; gap:8px }
.sgchip { display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:16px; background:var(--g-well,#0002); border:1px solid var(--g-well-line,#fff2); font-family:var(--f-ui) }
.sgchip .gi { --gis:34px } .sgchip b { display:block; font-weight:700 } .sgchip small { display:block; color:#FFD447; font-weight:700 }

/* ---------- brain map ---------- */
.brainmap { width:100%; align-self:stretch; display:flex; flex-direction:column; gap:12px }
.bmhead h3 { font-family:var(--f-display) !important; font-weight:400 !important; font-size:1.6rem; margin:0 }
.bmrows { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px }
.bmrow { display:flex; align-items:center; gap:12px; padding:10px 14px 10px 10px; border-radius:18px; background:var(--g-well,#F2F4FF); border:1px solid var(--g-well-line,#DCE1F5) }
.bmrow .gi { --gis:52px } .bmtop { display:flex; justify-content:space-between; align-items:baseline; font-family:var(--f-ui); font-weight:700 } .bmtop span { color:var(--g-acc,#5B45D6) }
.bmbar { display:block; height:12px; border-radius:8px; background:#00000038; overflow:hidden; margin:6px 0 4px; box-shadow:inset 0 2px 3px #0003 }
.bmbar i { display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,color-mix(in srgb,var(--bmc) 70%,#fff),var(--bmc)); box-shadow:inset 0 2px 0 #fff6; transition:width .8s }
.bmrow small { color:var(--g-soft,#52617c); font-size:.8125rem }
.brainmap.compact .bmrows { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px } .brainmap.compact .bmrow .gi { --gis:36px } .brainmap.compact .bmrow { padding:6px 10px 6px 6px }
.pbm { margin-top:4px } .pbm summary { font-weight:800 }
html:not(.kid) .bmrow { background:#fff; border-color:#d2dbea } html:not(.kid) .bmbar { background:#e3e9f4 }

/* ---------- family duel ---------- */
.duelboard { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; max-width:100% }
.dp { display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:20px; background:var(--g-p2,#1b224e); border:1px solid #ffffff2e; color:#fff; font-family:var(--f-ui); min-width:0; flex:0 1 auto }
.dp.gu { flex-direction:row-reverse; padding:6px 6px 6px 12px }
.dp .ava, .dp .guava { width:40px; height:40px; flex:none } .dp .guava .gi { --gis:40px }
.dp b { font-size:1.05rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dp em { font-style:normal; font-family:var(--f-ui); font-weight:900; font-size:1.7rem; line-height:1; color:#FFD447; min-width:24px; text-align:center; font-variant-numeric:tabular-nums }
.duelboard .vsbadge { flex:none }
@media (max-width:380px) { .dp .ava, .dp .guava { width:32px; height:32px } .dp .guava .gi { --gis:32px } .dp b { font-size:.95rem; max-width:7ch } .dp em { font-size:1.4rem } }
html.look-light .dp { background:#fff; color:var(--l-ink); border-color:var(--l-line) } html.look-light .dp em { color:var(--l-accent) }
.duelpass { text-align:center; align-items:center } .duelpass h2 { font-family:var(--f-display) !important; font-weight:400 !important; font-size:clamp(2rem,6vw,3rem) }
.duelpass .btns { justify-content:center } .duelend { align-items:center; text-align:center } .duelend .btns { justify-content:center }
.duelsetup fieldset { display:flex; flex-direction:column; gap:10px } .duelsetup .btn .gi.bare, .duelend .btn .gi.bare, .duelpass .btn .gi.bare { --gis:20px; --bare-d:#FFC23A }
.kgrid.two { grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:680px) { .kgrid.two { grid-template-columns:1fr } }
@media (min-width:901px) { .hud-rail.left .hud-btn.word, .hud-rail.right .hud-btn.word { align-self:auto; width:210px } .hud-rail.left { align-items:flex-start } .hud-rail.right { align-items:flex-end } }
/* readability: letters and "?" use the clear rounded font, not the chunky title font */
.pz-ltile, .pz-q, .pz-fl.gap, .pz-goal b { font-family:var(--f-ui) !important; font-weight:700 !important }
.pz-ltile { font-size:1.6rem }
@media (max-width:600px) { .pz-ltile { width:44px; height:50px; font-size:1.35rem; border-radius:12px } .pz-ltiles { gap:7px } }
.pz-q { color:#B06A00 }
.pz-stage.pz-rotate ~ .pz-answers .pzo .pz-tok, .pz-stage.pz-fold ~ .pz-answers .pzo .pz-tok { width:92px; height:92px }
@media (max-width:600px) { .pz-stage.pz-rotate ~ .pz-answers .pzo .pz-tok, .pz-stage.pz-fold ~ .pz-answers .pzo .pz-tok { width:76px; height:76px } }
@media (max-width:440px) { .pz-build .pz-ltile { width:38px; height:46px; font-size:1.2rem; border-radius:10px } .pz-build .pz-ltiles { gap:5px } }
/* small phones: answer pictures and the mirror/fold stage shrink to fit instead of pushing the page sideways */
.pz-answers .ans, .pz-answers .pzo { min-width:0 }
.pz-answers .pzo .pz-tok, .pz-answers .pzo .pz-paper { flex:0 1 auto; min-width:0; aspect-ratio:1; height:auto !important }
.pz-mirror { max-width:100%; box-sizing:border-box } .pz-mirror .pz-tok, .pz-mirror .pz-q { flex:0 1 auto; min-width:0; aspect-ratio:1; height:auto !important }
@media (max-width:400px) {
  .pz-stage.pz-rotate ~ .pz-answers .pzo .pz-tok, .pz-stage.pz-fold ~ .pz-answers .pzo .pz-tok { width:64px }
  .pz-answers .pzo .pz-paper { width:64px }
  .pz-mirror { gap:8px; padding:10px } .pz-mirror .pz-tok { width:110px } .pz-mirror .pz-q { width:90px }
  .pz-foldsteps .pz-paper, .pz-foldsteps .pz-q { width:88px; height:88px !important }
}
@media (max-width:340px) {
  .pz-stage.pz-rotate ~ .pz-answers .pzo .pz-tok, .pz-stage.pz-fold ~ .pz-answers .pzo .pz-tok, .pz-answers .pzo .pz-paper { width:54px }
  .pz-answers .ans { padding:10px; gap:8px }
}
@media (max-width:400px) { .pz-foldsteps { flex-direction:column; gap:4px } .pz-foldsteps .pz-arrow { transform:rotate(90deg); line-height:1 } .pz-foldsteps small { text-align:center } }

/* ---------- PLAY: game picker + Solo / Duo / VS ---------- */
.pk-hero { position:relative; display:flex; align-items:center; gap:16px; width:100%; text-align:left; padding:18px 18px 18px 16px; border-radius:26px; border:2px solid #ffffff66; color:#fff; cursor:pointer; font:inherit;
  background:radial-gradient(120% 120% at 10% 0%, #FF8FC4 0, #E8458F 38%, #9B1F63 100%);
  box-shadow:inset 0 2px 0 #ffffff70, inset 0 -4px 0 #0000001f, 0 7px 0 #6d1546, 0 16px 28px #0006; transition:transform .13s; margin-bottom:6px }
.pk-hero.free { background:radial-gradient(120% 120% at 10% 0%, #8BF2B9 0, #22B573 40%, #0E7A4A 100%); box-shadow:inset 0 2px 0 #ffffff70, inset 0 -4px 0 #0000001f, 0 7px 0 #0a5534, 0 16px 28px #0006 }
.pk-hero.off { cursor:default; background:linear-gradient(160deg,#4b4f6e,#2b2e47); box-shadow:0 10px 24px #0005 }
.pk-hero:not(.off):hover { transform:translateY(-3px) } .pk-hero:not(.off):active { transform:translateY(5px) }
.pk-hero:focus-visible { outline:4px solid #fff; outline-offset:4px }
.pk-hero .gi { flex:none } .pk-hero .gi.xl { --gis:72px }
.pk-hero .grow { display:flex; flex-direction:column; gap:3px; min-width:0 }
.pk-hero .bs-kicker { font-family:var(--f-ui); font-weight:800; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; opacity:.9 }
.pk-hero strong { font-family:var(--f-display); font-weight:400; font-size:clamp(1.5rem,4.2vw,2.3rem); line-height:1.05; text-shadow:0 3px 0 #0003 }
.pk-hero small { font-family:var(--f-ui); font-weight:600; font-size:.95rem; opacity:.95 }
.pk-hero .bs-dots { margin-top:6px } .pk-hero .bs-dots i { background:#ffffff55 } .pk-hero .bs-dots i.on { background:#FFD447 }
.pk-go { flex:none; display:flex; align-items:center; gap:8px; padding:14px 22px; border-radius:18px; background:linear-gradient(#FFE37A,#FFB627); color:#5a2a00; box-shadow:inset 0 2px 0 #fff8, 0 5px 0 #b86e00; font-family:var(--f-display); font-size:1.35rem; letter-spacing:.03em }
.pk-go .gi.bare { --gis:22px; --bare-d:#b86e00; color:#5a2a00 }
.pk-cancel { margin:0 0 4px } .pk-find { padding:12px 14px !important }
.pk-chips { flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; padding:2px; -webkit-overflow-scrolling:touch } .pk-chips::-webkit-scrollbar { display:none } .pk-chips button { flex:none }
@media (max-width:560px) { .pk-hero { flex-wrap:wrap; padding:16px } .pk-hero .gi.xl { --gis:56px } .pk-hero .grow { flex:1 1 60% } .pk-go { width:100%; justify-content:center } }

.gamerow { display:flex; align-items:center; gap:12px; min-width:0 }
.gamerow > .gi { --gis:52px; flex:none } .gamerow .grow { display:flex; flex-direction:column; min-width:0 }
.gamerow .eyebrow { margin:0 } .gamerow strong { font-family:var(--f-ui); font-weight:800; font-size:1.25rem; line-height:1.15 } .gamerow small { opacity:.8; font-weight:600 }
.gamerow .btn { flex:none } .gamerow .btn .gi.bare { --gis:18px }
.modegame { padding:14px 16px !important }

.modecards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:6px 0 10px }
.modecards.two { grid-template-columns:repeat(2,minmax(0,1fr)) }
.modecard { --ta:#38C3FF; --td:#1665D8; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:250px; text-align:left; padding:20px 20px 22px; border-radius:26px; border:2px solid #ffffff66; color:#fff; cursor:pointer; font:inherit;
  background:radial-gradient(120% 90% at 20% 0%, color-mix(in srgb,var(--ta) 75%,#fff) 0, var(--ta) 35%, var(--td) 100%);
  box-shadow:inset 0 2px 0 #ffffff70, inset 0 -4px 0 #0000001f, 0 8px 0 color-mix(in srgb,var(--td) 60%,#000), 0 16px 28px #0006; transition:transform .13s }
.modecard.duo { --ta:#3EE08A; --td:#11975A } .modecard.vs { --ta:#FFA53A; --td:#E0531A } .modecard.duel { --ta:#FFD54A; --td:#D98200 }
.modecard:hover { transform:translateY(-4px) } .modecard:active { transform:translateY(7px); box-shadow:inset 0 2px 0 #ffffff70, 0 1px 0 color-mix(in srgb,var(--td) 60%,#000) }
.modecard:focus-visible { outline:4px solid #fff; outline-offset:4px }
.modecard > .gi.xl { --gis:64px; margin-bottom:22px }
.modecard .mtitle { font-family:var(--f-display); font-size:clamp(2.4rem,5vw,3.4rem); line-height:.95; letter-spacing:.02em; text-shadow:0 4px 0 #0003; margin-top:10px }
.modecard strong { font-family:var(--f-ui); font-weight:800; font-size:1.2rem }
.modecard small { font-family:var(--f-ui); font-weight:600; font-size:.98rem; line-height:1.35; opacity:.95; max-width:30ch }
.modecard .mgo { position:absolute; right:16px; top:16px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#ffffff33; border:2px solid #ffffff66 } .modecard .mgo .gi.bare { --gis:22px; color:#fff; --bare-d:transparent }
.modeback { justify-content:center }
@media (max-width:760px) { .modecards, .modecards.two { grid-template-columns:1fr; gap:14px } .modecard { min-height:0; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ico t" "ico h" "ico s"; column-gap:14px; row-gap:2px; padding:16px 60px 18px 16px; align-items:center }
  .modecard > .gi.xl { grid-area:ico; --gis:56px; margin:0 } .modecard .mtitle { grid-area:t; margin:0; font-size:2rem } .modecard strong { grid-area:h } .modecard small { grid-area:s; font-size:.9rem }
  .modecard .mgo { top:50%; transform:translateY(-50%) } }

.duogoal { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; background:#22B57322; border:2px solid #22B57355 }
.duogoal > .gi { flex:none; --gis:40px } .duogoal span { display:flex; flex-direction:column; gap:2px } .duogoal strong { font-weight:800 } .duogoal small { opacity:.9 }
.duogoal.sm { padding:8px 12px; margin:6px 0 0 } .duogoal.sm > .gi { --gis:26px } .duogoal.sm span { display:block }
.duosetup, .duelsetup { gap:16px }
.teambar { display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:16px; background:#22B5731f; margin-bottom:8px }
.teambar .tb-l { display:flex; align-items:center; gap:8px; font-weight:700 } .teambar .tb-l b { font-family:var(--f-ui); font-weight:900; font-size:1.15rem }
.teambar .bar { display:block; height:14px; border-radius:8px; background:#0000002e; overflow:hidden } .teambar .bar span { display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,#3EE08A,#FFD447); transition:width .4s }
.teambar.big .tb-l { font-size:1.15rem } .teambar.big .bar { height:20px }
.teamup { display:flex; align-items:center; justify-content:center; gap:18px; margin:6px 0 14px }
.teamup .tm { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center } .teamup .tm .ava { width:84px; height:84px }
.vsbadge.team { color:#7CF2B0; text-shadow:0 3px 0 #11975A, 0 6px 14px #0007; transform:none }
.teamres.won .teambar { background:#FFD4472a }