/* Brain Stars game skin — applied to every kid screen (html.kid). The parent area keeps its calm look.
   Fonts: Erica One (titles, big numbers, play buttons) and Outfit Bold (labels, buttons, tabs), both
   SIL Open Font License, served from /fonts (no third-party requests). Questions and answers keep the
   plain system font so they stay easy to read. */
@font-face { font-family:"Erica One"; src:url("../fonts/EricaOne-Regular.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:"Outfit"; src:url("../fonts/Outfit-Bold.woff") format("woff"); font-weight:700; font-style:normal; font-display:swap }
:root { --f-display:"Erica One", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; --f-ui:"Outfit", ui-rounded, "SF Pro Rounded", system-ui, sans-serif }

/* ---------- game icons (js/gicons.js) ---------- */
.gi { --gis:48px; position:relative; display:inline-grid; place-items:center; flex:none; width:var(--gis); height:var(--gis); border-radius:30%;
  background:radial-gradient(120% 90% at 30% 15%, color-mix(in srgb,var(--gi-a) 70%,#fff) 0, var(--gi-a) 38%, var(--gi-d) 100%);
  box-shadow:inset 0 2px 0 #ffffff80, inset 0 -3px 0 #0000002e, 0 3px 0 color-mix(in srgb,var(--gi-d) 70%,#000), 0 6px 12px #00000040; color:var(--gi-g) }
.gi::before { content:""; position:absolute; left:14%; right:14%; top:7%; height:34%; border-radius:50% 50% 45% 45%; background:linear-gradient(#ffffff70,#ffffff00); pointer-events:none }
.gi svg { position:relative; width:62%; height:62%; filter:drop-shadow(0 1.5px 0 color-mix(in srgb,var(--gi-d) 75%,#000)) }
.gi .d { fill:none; stroke:var(--gi-d); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.gi .df { fill:var(--gi-d) }
.gi.bare { --gi-d:var(--bare-d,#1b1f4e); width:var(--gis,24px); height:var(--gis,24px); background:none; box-shadow:none; border-radius:0; color:inherit }
.gi.bare::before { display:none } .gi.bare svg { width:100%; height:100%; filter:none }
.gi.sm { --gis:34px } .gi.lg { --gis:64px } .gi.xl { --gis:88px; border-radius:28% }

/* ---------- skin tokens ---------- */
html.kid { --g-p1:color-mix(in srgb,var(--a-panel1) 93%,transparent); --g-p2:color-mix(in srgb,var(--a-panel2) 95%,transparent); --g-solid:var(--a-panel2);
  --g-line:#ffffff2b; --g-ink:#F6F7FF; --g-soft:var(--a-soft); --g-edge:color-mix(in srgb,var(--a-base) 72%,#000); --g-well:#00000038; --g-well-line:#ffffff1f;
  --g-acc:var(--a-kicker); --g-glow:#0007; --ink:var(--g-ink); --muted:var(--g-soft) }
html.kid.look-light { --g-p1:#ffffffee; --g-p2:color-mix(in srgb,var(--l-panel2) 94%,transparent); --g-solid:#fff; --g-line:var(--l-line); --g-ink:var(--l-ink);
  --g-soft:var(--l-soft); --g-edge:var(--l-edge); --g-well:color-mix(in srgb,var(--l-cur) 70%,#fff); --g-well-line:var(--l-line); --g-acc:var(--l-accent);
  --g-glow:color-mix(in srgb,var(--l-accent) 22%,transparent) }

/* ---------- type ---------- */
html.kid h1, html.kid h2, html.kid h3, html.kid .eyebrow, html.kid .label, html.kid legend, html.kid .flabel, html.kid .field label, html.kid label.lbl,
html.kid .btn, html.kid .chip, html.kid .tabs button, html.kid .chips button, html.kid .mtabs button, html.kid .bs-nav, html.kid .bs-dnav, html.kid .bs-pill,
html.kid .bs-tag, html.kid .bs-role, html.kid .bs-kicker, html.kid .bs-label, html.kid .bs-eyebrow, html.kid .bs-next, html.kid .bs-change, html.kid .bs-mini,
html.kid .bs-xp-top strong, html.kid .bs-meta, html.kid .metric span, html.kid .quizbar, html.kid .toast, html.kid .linkbtn, html.kid .textlink, html.kid .pf, html.kid .ccard, html.kid .themecard .tn { font-family:var(--f-ui); font-weight:700 }
html.kid .intro h1, html.kid .bs-caption h1, html.kid .bs-play h2, html.kid .bs-playbtn, html.kid .bs-tile strong, html.kid .bs-lvchip, html.kid .bs-stars,
html.kid .metric strong, html.kid h2.big, html.kid .chcount, html.kid .chcode, html.kid .codebig, html.kid .fcode strong { font-family:var(--f-display); font-weight:400; font-style:normal; letter-spacing:.01em }
html.kid .intro h1 { font-size:clamp(2.1rem,4.4vw,3.2rem); line-height:1.04; color:#fff; text-shadow:0 3px 0 var(--g-edge), 0 6px 18px #000a }
html.kid.look-light .intro h1 { color:var(--l-ink); text-shadow:0 3px 0 #fff, 0 0 18px #fff }
html.kid .intro .eyebrow { letter-spacing:.16em; font-size:.8125rem }
html.kid .intro p { font-weight:600 }
html.kid .view > h2.light, html.kid h2.gh { font-size:1.6rem; color:#fff; text-shadow:0 2px 0 var(--g-edge), 0 4px 14px #0009; margin-bottom:-6px }
html.kid.look-light .view > h2.light, html.kid.look-light h2.gh { color:var(--l-ink); text-shadow:0 0 12px #fff, 0 0 3px #fff }
html.kid .bs-caption h1 { font-size:clamp(44px,5vw,76px); letter-spacing:.02em; text-transform:none; text-shadow:0 4px 0 #0005, 0 6px 20px #000a }
html.kid .bs-play h2 { letter-spacing:.01em; font-size:clamp(24px,2.8vw,34px) }
html.kid .bs-playbtn { letter-spacing:.03em; font-size:clamp(20px,2vw,26px) }
html.kid .bs-tile strong { font-size:19px; letter-spacing:.02em; text-shadow:0 2px 0 #0003 }
html.kid .bs-lvchip { font-size:28px }

/* ---------- panels ---------- */
html.kid .panel, html.kid .card { background:linear-gradient(165deg,var(--g-p1),var(--g-p2)); color:var(--g-ink); border:2px solid var(--g-line); border-radius:26px;
  box-shadow:inset 0 1px 0 #ffffff26, 0 7px 0 var(--g-edge), 0 18px 34px var(--g-glow); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
html.kid .panel .eyebrow, html.kid .card .eyebrow { color:var(--g-acc) }
html.kid .panel p, html.kid .card p { color:inherit }
html.kid .helper, html.kid .note, html.kid .muted, html.kid .panel small { color:var(--g-soft) }
html.kid hr, html.kid .rule { border-top-color:var(--g-line) }
html.kid .panel h2, html.kid .panel h3 { letter-spacing:0 }
html.kid .leavedlg { background:var(--g-solid); color:var(--g-ink); border:2px solid var(--g-line); box-shadow:0 7px 0 var(--g-edge) }

/* ---------- buttons ---------- */
html.kid .btn { --edge:#C2650F; border:0; border-radius:16px; letter-spacing:.015em; color:#3B2100; text-shadow:0 1px 0 #ffffff8c;
  background:linear-gradient(180deg,#FFF27A 0,#FFCB3A 55%,#FFA31F); box-shadow:inset 0 2px 0 #ffffffb3, inset 0 -3px 0 #0000001c, 0 5px 0 var(--edge), 0 10px 18px #0005 }
html.kid .btn:active:not(:disabled) { transform:translateY(4px); box-shadow:inset 0 2px 0 #ffffffb3, 0 1px 0 var(--edge) }
html.kid .btn.ghost, html.kid .btn.sec, html.kid .btn.outline { --edge:var(--g-edge); color:var(--g-ink); text-shadow:none; background:color-mix(in srgb,var(--g-ink) 10%,transparent);
  border:2px solid var(--g-line); box-shadow:inset 0 1px 0 #ffffff1f, 0 4px 0 var(--edge) }
html.kid.look-light .btn.ghost, html.kid.look-light .btn.sec, html.kid.look-light .btn.outline { background:#fff }
html.kid .btn.danger { --edge:#8E1F2A; color:#fff; text-shadow:0 1px 0 #0004; background:linear-gradient(#FF8585,#D93A47); border:0 }
html.kid .btn .st path { fill:#3B2100; stroke:#3B2100 }
html.kid .btn.ghost .st path { fill:#FFD447; stroke:#B07800 }
html.kid .btn .ico { stroke-width:2.8 }
html.kid .btn.loading::after { border-color:#3B2100; border-right-color:transparent }
html.kid .linkbtn, html.kid .panel .textlink { color:var(--g-acc) }
html.kid .iconbtn { background:color-mix(in srgb,var(--g-ink) 10%,transparent); color:var(--g-ink); border:2px solid var(--g-line); box-shadow:0 3px 0 var(--g-edge) }

/* ---------- chips, tabs, toggles ---------- */
html.kid .chip { background:var(--g-well); color:var(--g-ink); border:1px solid var(--g-well-line); font-size:.875rem }
html.kid .chip .st path { fill:#FFD447; stroke:#B07800 }
html.kid .chip.gold { background:linear-gradient(#FFE873,#FFC23A); color:#4A2A00; border-color:#ffffff80 }
html.kid .chip.green { background:#1E9E6A; color:#fff; border-color:#ffffff40 } html.kid .chip.red { background:#D93A47; color:#fff }
html.kid .chip.dark { background:#00000059; color:#fff }
html.kid .tabs { display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:4px; border:0; background:var(--g-well); padding:5px; border-radius:18px; box-shadow:inset 0 2px 6px #0003 }
html.kid .tabs button { margin:0; border:0; border-radius:14px; padding:10px 6px; color:var(--g-soft); font-size:1rem; min-height:46px }
html.kid .tabs button[aria-selected="true"] { color:#3B2100; background:linear-gradient(#FFF27A,#FFC23A); box-shadow:inset 0 2px 0 #fff9, 0 3px 0 #C2650F; border:0 }
html.kid .chips button, html.kid .mtabs button { background:var(--g-well); color:var(--g-ink); border:2px solid var(--g-well-line) }
html.kid .chips button[aria-checked="true"], html.kid .chips button[aria-pressed="true"], html.kid .mtabs button[aria-selected="true"] { background:linear-gradient(#FFF27A,#FFC23A); color:#3B2100; border-color:#fff8; box-shadow:0 3px 0 #C2650F }
html.kid .toggle { background:#ffffff2e; border-color:var(--g-line) } html.kid .toggle::after { border-color:#0003 }
html.kid .toggle[aria-checked="true"] { background:#2BC487 }
html.kid.look-light .toggle { background:#d9cfe6 }

/* ---------- forms ---------- */
html.kid input, html.kid select, html.kid textarea, html.kid .search { background:var(--g-well); border:2px solid var(--g-well-line); color:var(--g-ink) }
html.kid .search input { background:transparent; border:0 }
html.kid input::placeholder { color:var(--g-soft) }
html.kid .search .ico { color:var(--g-soft) }
html.kid.look-light input, html.kid.look-light select, html.kid.look-light textarea, html.kid.look-light .search { background:#fff }
html.kid .choice, html.kid .vopt, html.kid .choice.chmode { background:var(--g-well); border:2px solid var(--g-well-line); color:var(--g-ink); border-radius:16px }
html.kid .choice input { accent-color:#FFC23A }
html.kid .vopt[aria-checked="true"], html.kid .chmode[aria-checked="true"] { border-color:#FFC23A; background:color-mix(in srgb,#FFC23A 18%,transparent) }
html.kid .chmode .radio { background:transparent; border-color:var(--g-ink) }
html.kid .chmode[aria-checked="true"] .radio { background:radial-gradient(circle,#FFC23A 0 45%,transparent 50%) }
html.kid .field label, html.kid .flabel, html.kid label.lbl { color:var(--g-ink) }

/* ---------- progress, metrics, lists ---------- */
html.kid .kbar { background:var(--g-well); box-shadow:inset 0 2px 4px #0004; height:14px }
html.kid .kbar i { background:linear-gradient(90deg,#FF9A3D,#FFE04D); box-shadow:inset 0 3px 0 #fff6 }
html.kid .metric { background:var(--g-well); border:2px solid var(--g-well-line); border-radius:20px; align-items:center; text-align:center }
html.kid .metric strong { color:#FFD447; font-size:2.6rem; text-shadow:0 3px 0 #0006 }
html.kid.look-light .metric strong { color:var(--l-accent); text-shadow:0 2px 0 #fff }
html.kid .metric span { color:var(--g-soft) }
html.kid .summary div, html.kid .items > .it { border-color:var(--g-line) }
html.kid .lvline .row span:last-child { color:var(--g-soft) }
html.kid .ebadge, html.kid .fp, html.kid .chp, html.kid .chrow, html.kid .pf, html.kid .fcode, html.kid .player { background:var(--g-well); border:2px solid var(--g-well-line); color:var(--g-ink) }
html.kid .fp[aria-checked="true"], html.kid .pf[aria-checked="true"], html.kid .chrow.me { border-color:#FFC23A; background:color-mix(in srgb,#FFC23A 18%,transparent) }
html.kid .player small, html.kid .chp small, html.kid .ebadge small { color:var(--g-soft) }
html.kid .pod .step { background:var(--g-well); border:2px solid var(--g-well-line); color:var(--g-ink); font-family:var(--f-display); font-weight:400 }
html.kid .pod.p1 .step { background:linear-gradient(#FFF27A,#FFC23A); color:#3B2100 }
html.kid .chrow .bar { background:var(--g-well) } html.kid .chrow .bar span { background:linear-gradient(90deg,#FF9A3D,#FFE04D) }
html.kid .levelup { background:linear-gradient(#FFF27A,#FFC23A); color:#3B2100; border:0; box-shadow:0 5px 0 #C2650F }
html.kid .coach { background:color-mix(in srgb,#D93A47 22%,transparent); border-color:#FF8585; color:var(--g-ink) }
html.kid .err { background:color-mix(in srgb,#D93A47 25%,transparent); color:#fff; border-color:#FF8585 }
html.kid .ok { background:color-mix(in srgb,#1E9E6A 30%,transparent); color:#fff; border-color:#55E3A6 }
html.kid.look-light .err { color:#8E1F2A; background:#FFECEE } html.kid.look-light .ok { color:#0E6B4A; background:#E5F9EE }
html.kid .savenote.saved { color:#55E3A6 } html.kid .savenote.error { color:#FF8585 }
html.kid.look-light .savenote.saved { color:#0E8A5A } html.kid.look-light .savenote.error { color:#C42B38 }

/* ---------- sheet & toast ---------- */
html.kid .sheet { background:linear-gradient(var(--a-panel1),var(--a-panel2)); color:var(--g-ink); border:2px solid var(--g-line); border-bottom:0; box-shadow:0 -10px 40px #0008 }
html.kid.look-light .sheet { background:linear-gradient(#fff,var(--l-panel2)) }
html.kid .grab { background:var(--g-line) }
html.kid .toast { background:var(--a-panel1); border:2px solid var(--g-line); color:#fff; box-shadow:0 6px 0 var(--g-edge), 0 14px 30px #0007 }
html.kid.look-light .toast { background:#fff; color:var(--l-ink) }
html.kid .sheet .textlink { color:var(--g-acc) }

/* ---------- quiz: a bright, high-contrast card on every look ---------- */
html.kid .qpanel { --q-ink:#121A46; background:linear-gradient(#ffffff,#F3F5FF); color:var(--q-ink); border:0; -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--a-kicker) 70%,#fff), 0 9px 0 var(--g-edge), 0 20px 40px #0007 }
html.kid.look-light .qpanel { box-shadow:0 0 0 4px var(--l-line), 0 9px 0 var(--l-edge), 0 20px 40px var(--g-glow) }
html.kid .qpanel .eyebrow { color:#5B45D6 } html.kid .qpanel .helper, html.kid .qpanel small { color:#4A557E }
html.kid .qpanel .chip { background:#EEF0FF; color:var(--q-ink); border-color:#DCE1F5 }
html.kid .qpanel .chip.gold { background:linear-gradient(#FFE873,#FFC23A); color:#4A2A00 }
html.kid .qpanel .btn.ghost { background:#fff; color:var(--q-ink); border:2px solid #D3D9F2; --edge:#BFC7E6 }
html.kid .question { color:var(--q-ink) }
html.kid .ans { border:2px solid #DCE1F5; border-radius:18px; box-shadow:0 4px 0 #C8CFEA; color:var(--q-ink); background:#fff }
html.kid .ans b { color:#fff; font-family:var(--f-display); font-weight:400; font-size:1.15rem; border-radius:12px; box-shadow:inset 0 2px 0 #fff6, 0 2px 0 #0002; background:#2C8BEA }
html.kid .answers .ans:nth-child(2) b { background:#E84393 } html.kid .answers .ans:nth-child(3) b { background:#16A673 } html.kid .answers .ans:nth-child(4) b { background:#F07A1E }
html.kid .ans:not(:disabled):hover { border-color:#8A97E8; box-shadow:0 6px 0 #B5BEE6; transform:translateY(-2px) }
html.kid .ans:not(:disabled):active { transform:translateY(3px); box-shadow:0 1px 0 #C8CFEA }
html.kid .ans.right { background:#E3F8EC; border-color:#16A673; box-shadow:0 4px 0 #16A673 } html.kid .ans.right b { background:#16A673 }
html.kid .ans.wrong { background:#FFEBEE; border-color:#D93A47; box-shadow:0 4px 0 #D93A47 } html.kid .ans.wrong b { background:#D93A47 }
html.kid .feedback { color:var(--q-ink); border-radius:18px }
html.kid .feedback h2 { font-family:var(--f-ui) }
html.kid .quizbar { color:#fff; text-shadow:0 2px 8px #000a }
html.kid.look-light .quizbar { color:var(--l-ink); text-shadow:0 0 10px #fff }
html.kid .quizbar .chip { background:#00000055; color:#fff; border:1px solid #ffffff33 }
html.kid .quizbar .kbar, html.kid .view > .kbar { background:#00000045 }

/* ---------- the layout shell: one header on every kid screen, one nav ---------- */
@media (min-width:901px) { html.kid .bs-nav { display:none } html.kid .wrap.bs-tabbed { padding-bottom:48px } }
html.kid .wrap, html.kid.bs-arcade .wrap { max-width:1400px; padding-left:clamp(14px,3vw,48px); padding-right:clamp(14px,3vw,48px) }
html.kid[data-view="quiz"] .view, html.kid[data-view="chplay"] .view { max-width:920px }
html.kid footer { color:#ffffffb3; text-shadow:0 1px 4px #000a } html.kid.look-light footer { color:var(--l-soft); text-shadow:none }

/* ---------- icons in the shell ---------- */
.bs-dnav .gi.bare { --gis:19px; --bare-d:#141a44 }
.bs-dnav button[aria-current="page"] .gi.bare, .bs-dnav button:hover .gi.bare { --bare-d:var(--a-cur) }
.bs-nav .gi.bare { --gis:26px; --bare-d:var(--a-nav) }
.bs-nav button[aria-current="page"] { color:#FFE264 } .bs-nav button[aria-current="page"] .gi.bare { --bare-d:var(--a-cur) }
html.look-light .bs-dnav .gi.bare { --bare-d:#fff } html.look-light .bs-dnav button[aria-current="page"] .gi.bare { --bare-d:var(--l-cur) }
html.look-light .bs-nav .gi.bare { --bare-d:#fff } html.look-light .bs-nav button[aria-current="page"] .gi.bare { --bare-d:var(--l-cur) }
.bs-playbtn .gi.bare { --gis:24px; --bare-d:#FFC135 } html.look-light .bs-playbtn:not(.off) .gi.bare { --bare-d:var(--l-btn2) }
.bs-change .gi.bare { --gis:17px; --bare-d:var(--a-hero) } .bs-change.pick .gi.bare { --bare-d:#FFE264 }
.bs-meta .gi.bare { --gis:15px; vertical-align:-2px; margin-right:4px; color:#FFD447 }
.bs-tile { overflow:hidden }
.bs-tile .gi.bare.tgl { --gis:32px; color:#fff; --bare-d:#00000040; margin-bottom:auto; filter:drop-shadow(0 2px 0 #0003) }
.bs-tile .bs-bigico { position:absolute; right:-10px; bottom:-14px; opacity:.17; pointer-events:none } .bs-tile .bs-bigico .gi.bare { --gis:104px; color:#fff; --bare-d:transparent }
.bs-tile strong, .bs-tile small { position:relative }
.bs-mini .gi { --gis:44px }
.braverow .gi { --gis:40px }
.kgi { --gis:54px } .kgi.xl { --gis:92px }

/* ---------- Topics: colourful game tiles ---------- */
html.kid .tfind { flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px; padding:16px 18px }
html.kid .tfind .search { flex:1 1 260px; width:auto; align-self:auto }
.tgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px }
.ttile { --ta:#38C3FF; --td:#1665D8; position:relative; overflow:hidden; min-height:150px; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; text-align:left;
  padding:16px 16px 16px; border-radius:22px; border:2px solid #ffffff66; color:#fff; cursor:pointer;
  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 7px 0 color-mix(in srgb,var(--td) 60%,#000), 0 14px 24px #0005; transition:transform .13s }
.ttile:hover { transform:translateY(-3px) } .ttile:active { transform:translateY(6px); box-shadow:inset 0 2px 0 #ffffff70, 0 1px 0 color-mix(in srgb,var(--td) 60%,#000) }
.ttile:focus-visible { outline:4px solid #fff; outline-offset:4px }
.ttile .gi.bare.tgl { --gis:40px; color:#fff; --bare-d:color-mix(in srgb,var(--td) 80%,#000); margin-bottom:auto; filter:drop-shadow(0 3px 0 #0003) }
.ttile .bs-bigico { position:absolute; right:-12px; bottom:-18px; opacity:.18; pointer-events:none } .ttile .bs-bigico .gi.bare { --gis:122px; color:#fff; --bare-d:transparent }
.ttile strong { position:relative; font-family:var(--f-display); font-weight:400; font-size:1.3rem; line-height:1.1; letter-spacing:.01em; text-shadow:0 2px 0 #0003; overflow-wrap:anywhere }
.ttile small { position:relative; font-family:var(--f-ui); font-weight:700; font-size:.875rem; opacity:.95 }
.ttile .tbar { position:relative; display:block; height:9px; border-radius:9px; background:#00000038; overflow:hidden; margin-top:6px; box-shadow:inset 0 1px 3px #0003 }
.ttile .tbar i { display:block; height:100%; border-radius:9px; background:linear-gradient(90deg,#fff,#FFF27A) }
.ttile .tgo { position:absolute; right:12px; top:12px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#ffffff38; box-shadow:inset 0 1px 0 #fff8 }
.ttile .tgo .gi.bare { --gis:16px; color:#fff; --bare-d:transparent; margin-left:2px }
.ttile.tsurprise { --ta:#FFE873; --td:#EF8E0B; color:#4A2A00; grid-column:span 2; min-height:150px }
.ttile.tsurprise strong { font-size:1.7rem; text-shadow:0 2px 0 #fff8 } .ttile.tsurprise .gi.bare.tgl { color:#5A3200; --bare-d:#FFC23A }
.ttile.tsurprise .bs-bigico .gi.bare { color:#5A3200 } .ttile.tsurprise .tgo { background:#5A320020 } .ttile.tsurprise .tgo .gi.bare { color:#5A3200 }
.view.enter .ttile { animation:popIn .4s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay:calc(var(--i,0) * 30ms) }
@media (max-width:520px) { .tgrid { grid-template-columns:1fr 1fr; gap:11px } .ttile { min-height:132px; padding:13px } .ttile strong { font-size:1.08rem } .ttile small { font-size:.78rem } .ttile .gi.bare.tgl { --gis:34px } .ttile .tgo { width:30px; height:30px } }
@media (max-width:340px) { .tgrid { grid-template-columns:1fr } .ttile.tsurprise { grid-column:auto } }

/* ---------- Me: tabs fit on phones ---------- */
html.kid .metabs .tabs button { font-size:.9375rem; padding:10px 4px; min-width:0; overflow:hidden; text-overflow:ellipsis }
@media (max-width:380px) { html.kid .metabs .tabs button { font-size:.8125rem } }
html.kid .qpanel .iconbtn, html.kid .feedback .iconbtn { background:#fff; color:#121A46; border:2px solid #D3D9F2; box-shadow:0 3px 0 #BFC7E6 }
html.kid .ans b { font-family:var(--f-ui); font-weight:700 }

/* ---------- Champion select: neutral spotlight stage ---------- */
html.kid .metabs.mechamp { gap:16px }
.cselect { --cc:#1760ea; width:100%; align-self:stretch; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); grid-template-areas:"stage info" "head head" "roster roster"; gap:18px 22px; align-items:center }
.cs-stage { grid-area:stage; position:relative; overflow:hidden; border-radius:22px; aspect-ratio:4/3.1; min-height:280px; isolation:isolate; outline-offset:4px; touch-action:pan-y; user-select:none;
  background:
    radial-gradient(60% 55% at 50% 30%, #ffffff1c, transparent 70%),
    repeating-linear-gradient(90deg, #ffffff07 0 1px, transparent 1px 44px),
    linear-gradient(180deg,#2a2d3d 0%,#1a1c27 58%,#101118 100%);
  box-shadow:inset 0 0 0 2px #ffffff14, inset 0 -40px 60px #0007, 0 10px 26px #0006 }
.cs-spot { position:absolute; z-index:0; left:50%; top:-12%; width:70%; height:105%; transform:translateX(-50%); background:linear-gradient(180deg,#ffffff2e,#ffffff08 70%,transparent); clip-path:polygon(38% 0,62% 0,100% 100%,0 100%); filter:blur(6px); pointer-events:none }
.cs-floor { position:absolute; z-index:1; left:50%; bottom:7%; width:62%; height:15%; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--cc) 60%,transparent), color-mix(in srgb,var(--cc) 18%,transparent) 60%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 45%,transparent), 0 0 30px color-mix(in srgb,var(--cc) 50%,transparent) }
.cs-champ { position:absolute; z-index:2; left:50%; bottom:10%; height:84%; width:auto; max-width:92%; object-fit:contain; transform:translateX(-50%); filter:drop-shadow(0 14px 10px #000a); animation:idle 3.4s ease-in-out infinite; transform-origin:50% 100%; pointer-events:none }
.cs-champ.jump { animation:jump .7s cubic-bezier(.3,1.4,.5,1), idle 3.4s .7s ease-in-out infinite }
.cs-champ.in-r { animation:csInR .32s cubic-bezier(.2,1,.3,1), idle 3.4s .32s ease-in-out infinite } .cs-champ.in-l { animation:csInL .32s cubic-bezier(.2,1,.3,1), idle 3.4s .32s ease-in-out infinite }
@keyframes csInR { from { opacity:0; transform:translateX(-10%) } } @keyframes csInL { from { opacity:0; transform:translateX(-90%) } }
.cs-stage.locked .cs-champ { filter:brightness(0) drop-shadow(0 0 1px #ffffff80) drop-shadow(0 0 10px color-mix(in srgb,var(--cc) 70%,transparent)); opacity:.92; animation:none }
.cs-lockbadge { position:absolute; z-index:3; left:50%; top:44%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:14px; background:#000a; border:2px solid #ffffff38; color:#fff; font-family:var(--f-ui); font-weight:700; font-size:1.05rem; white-space:nowrap }
.cs-lockbadge .gi.bare { --gis:20px; --bare-d:#000 }
.cs-arrow { position:absolute; z-index:4; top:50%; transform:translateY(-50%); width:56px; height:56px; border-radius:50%; border:3px solid #ffffffd0; display:grid; place-items:center; cursor:pointer;
  background:linear-gradient(#FFF27A,#FFC23A); color:#4A2A00; box-shadow:inset 0 2px 0 #fff9, 0 4px 0 #C2650F, 0 8px 16px #0007; transition:transform .1s }
.cs-arrow:hover { transform:translateY(-50%) scale(1.06) } .cs-arrow:active { transform:translateY(calc(-50% + 3px)); box-shadow:inset 0 2px 0 #fff9, 0 1px 0 #C2650F }
.cs-arrow.prev { left:14px } .cs-arrow.next { right:14px } .cs-arrow .gi.bare { --gis:24px }
.cs-arrow:focus-visible, .cs-stage:focus-visible { outline:4px solid #fff; outline-offset:3px }
.cs-count { position:absolute; z-index:3; right:14px; top:12px; font-family:var(--f-ui); font-weight:700; font-size:.875rem; color:#ffffffd0; background:#0008; border-radius:99px; padding:5px 11px }
.cs-info { grid-area:info; display:flex; flex-direction:column; gap:8px; min-width:0 }
.cs-name { font-family:var(--f-display) !important; font-weight:400 !important; font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; margin-top:4px; letter-spacing:.01em; text-shadow:0 3px 0 #0005 }
html.kid.look-light .cs-name { text-shadow:none; color:var(--l-ink) }
.cs-title { font-family:var(--f-ui); font-weight:700; font-size:1.2rem; color:var(--g-acc,#C4B8FF) }
.cs-desc { font-size:1.0625rem; color:var(--g-soft,#ccd) }
.cs-info .btn { align-self:flex-start; margin-top:6px } .cs-choose .gi.bare { --gis:20px; --bare-d:#FFC23A }
.cs-mine { display:flex; align-items:center; gap:10px; font-weight:700; margin-top:6px } .cs-mine .gi { --gis:34px }
.cs-locked { display:flex; flex-direction:column; gap:8px; margin-top:4px } .cs-locked strong { display:inline-flex; align-items:center; gap:6px; font-family:var(--f-ui) } .cs-locked .gi.bare { --gis:18px; --bare-d:transparent }
.cs-rosterhead { grid-area:head; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:4px }
.cs-rosterhead .chips button { min-height:40px; padding:6px 14px }
html.kid .cselect .champgrid.cs-roster { grid-area:roster; display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; padding:6px 4px 14px; margin:0 -4px; scrollbar-width:thin }
html.kid .cs-roster .ccard { flex:0 0 96px; scroll-snap-align:center; background:var(--g-well); border:2px solid var(--g-well-line); color:var(--g-ink); border-radius:18px; padding:6px 6px 8px; gap:4px; font-size:.875rem }
html.kid .cs-roster .ccard img { border-radius:13px; background:radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--cc) 55%,#fff), color-mix(in srgb,var(--cc) 25%,#1a1c27)) }
html.kid .cs-roster .ccard[aria-checked="true"] { border:3px solid #FFC23A; background:color-mix(in srgb,#FFC23A 20%,transparent); transform:translateY(-3px); box-shadow:0 6px 14px #0005 }
html.kid .cs-roster .ccard.locked img { filter:brightness(0) opacity(.55) }
html.kid .cs-roster .ccard .clevel { top:10px; background:#000b; font-family:var(--f-ui); gap:3px; padding:3px 8px }
html.kid .cs-roster .ccard .clevel .gi.bare { --gis:11px; --bare-d:transparent }
@media (max-width:760px) { .cselect { grid-template-columns:1fr; grid-template-areas:"stage" "info" "head" "roster"; gap:14px } .cs-stage { aspect-ratio:1/1; min-height:0 } .cs-arrow { width:48px; height:48px } .cs-arrow.prev { left:8px } .cs-arrow.next { right:8px } .cs-name { font-size:2.6rem } }
html.reduce-motion .cs-champ { animation:none !important }

/* ---------- theme picker: real previews ---------- */
html.kid .themes { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px }
.themecard .tp { position:relative; display:block; height:104px; border-radius:12px; overflow:hidden; background:var(--tp-bg) center 40%/cover no-repeat, var(--tp-base); box-shadow:inset 0 0 0 1px #0003 }
.themecard .tp::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in srgb,var(--tp-base) 45%,transparent), transparent 45%, color-mix(in srgb,var(--tp-base) 40%,transparent)) }
.themecard .tp .tp-bar { position:absolute; left:8px; right:8px; top:7px; height:9px; border-radius:6px; background:color-mix(in srgb,var(--tp-panel) 85%,transparent) }
.themecard .tp .tp-card { position:absolute; left:8px; bottom:8px; width:58%; height:44px; border-radius:9px; background:linear-gradient(160deg,var(--tp-panel),var(--tp-panel2)); box-shadow:0 3px 0 #0004; border:1px solid #ffffff40 }
.themecard .tp .tp-card i { position:absolute; left:7px; right:7px; height:5px; border-radius:4px; background:var(--tp-ink); opacity:.85 } .themecard .tp .tp-card i:first-child { top:8px; width:56% } .themecard .tp .tp-card i:nth-child(2) { top:17px; opacity:.45 }
.themecard .tp .tp-btn { position:absolute; left:7px; bottom:6px; width:34px; height:9px; border-radius:5px; background:var(--tp-btn) }
.themecard .tp .tp-tiles { position:absolute; right:8px; bottom:8px; display:grid; grid-template-columns:1fr 1fr; gap:4px; width:32% }
.themecard .tp .tp-tiles b { display:block; aspect-ratio:1; border-radius:6px; box-shadow:0 2px 0 #0003 }
html.kid .themecard { background:var(--g-well); border:2px solid var(--g-well-line); color:var(--g-ink); box-shadow:0 3px 0 var(--g-edge); padding:6px 6px 9px; gap:8px }
html.kid .themecard .tn { color:var(--g-ink); font-size:.9375rem }
html.kid .themecard[aria-checked="true"], html.kid .themecard[aria-pressed="true"] { border:3px solid #FFC23A; box-shadow:0 0 0 3px #FFC23A40, 0 3px 0 var(--g-edge); padding:5px 5px 8px }
.themecard[aria-checked="true"] .tp::after { content:"✓"; position:absolute; right:7px; top:20px; width:26px; height:26px; border-radius:50%; background:#FFC23A; color:#3B2100; font-weight:900; font-size:15px; display:grid; place-items:center; box-shadow:0 2px 0 #C2650F }
.themecard .tp { background:var(--tp-base) }
.themecard .tp .tp-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40% }
.themecard .tp::before { z-index:1 } .themecard .tp > span { z-index:2 } .themecard[aria-checked="true"] .tp::after { z-index:3 }
html.kid .cs-roster .ccard .cport { display:block; width:100%; aspect-ratio:1; border-radius:13px; overflow:hidden; background:radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--cc) 55%,#fff), color-mix(in srgb,var(--cc) 25%,#1a1c27)) }
html.kid .cs-roster .ccard .cport img { display:block; width:100%; height:100%; object-fit:contain; background:none; border-radius:0 }
html.kid .cs-roster .ccard.locked .cport { background:radial-gradient(circle at 50% 35%, #5d6378, #2a2d3d) }
html.kid .cs-roster .ccard.locked .cport img { filter:brightness(0) opacity(.75) }
/* numbers read best in the label font (the title font's digits are too quirky for scores) */
html.kid .bs-lvchip, html.kid .bs-stars, html.kid .metric strong, html.kid .chcount, html.kid .chcode, html.kid .codebig, html.kid .fcode strong, html.kid .pod .step { font-family:var(--f-ui); font-weight:700; letter-spacing:0 }
html.kid .metric strong { font-size:2.8rem } html.kid .bs-lvchip { font-size:27px }

/* ---------- results: one big play button, the rest as icon tiles ---------- */
html.kid .rs .btn.playnext { align-self:stretch; min-height:68px; font-size:1.3rem; border-radius:20px }
html.kid .rs .btn.playnext .gi.bare { --gis:22px; --bare-d:#FFC23A }
.acttiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; width:100%; align-self:stretch }
.acttile { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px 12px; border-radius:18px; cursor:pointer; font-family:var(--f-ui); font-weight:700; font-size:1rem;
  background:var(--g-well,#0003); border:2px solid var(--g-well-line,#fff2); color:var(--g-ink,#fff); box-shadow:0 4px 0 var(--g-edge,#0006); transition:transform .12s }
.acttile:hover { transform:translateY(-2px) } .acttile:active { transform:translateY(3px); box-shadow:0 1px 0 var(--g-edge,#0006) }
.acttile .gi { --gis:46px }

/* ---------- challenge lobby: versus arena ---------- */
html.kid .lobbybox .lmode { display:block; font-family:var(--f-ui); font-size:1.25rem }
.varena { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; width:100%; align-self:stretch; align-items:stretch }
.varena.duo { grid-template-columns:1fr auto 1fr; align-items:center }
.vslot { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:18px 10px 16px; border-radius:20px; background:var(--g-well,#0003); border:2px solid var(--g-well-line,#fff2); min-width:0 }
.vslot .ava { width:84px; height:84px; border-radius:50%; box-shadow:0 0 0 4px #ffffff30 }
.vslot strong { font-family:var(--f-ui); font-size:1.35rem; line-height:1.15; overflow-wrap:anywhere }
.vslot small { color:var(--g-soft,#ccd); font-size:.875rem }
.vstat { display:inline-flex; align-items:center; gap:6px; font-family:var(--f-ui); font-weight:700; font-size:.9rem; border-radius:99px; padding:4px 12px }
.vstat .gi.bare { --gis:14px; --bare-d:transparent }
.vslot.ready { border-color:#55E3A6 } .vslot.ready .ava { box-shadow:0 0 0 4px #55E3A6 } .vslot.ready .vstat { background:#1E9E6A; color:#fff }
.vslot.wait .ava { opacity:.8; box-shadow:0 0 0 4px #FFC23A; animation:waitPulse 1.6s ease-in-out infinite } .vslot.wait .vstat { background:linear-gradient(#FFF27A,#FFC23A); color:#4A2A00 }
.vslot.wait .vstat .dots i { background:#4A2A00; width:5px; height:5px }
@keyframes waitPulse { 50% { box-shadow:0 0 0 8px #FFC23A55 } }
.vslot.open { border-style:dashed } .vempty { width:84px; height:84px; border-radius:50%; display:grid; place-items:center; border:3px dashed var(--g-line,#fff4); color:var(--g-soft,#ccd) } .vempty .gi.bare { --gis:30px; --bare-d:transparent }
.vsbadge { font-family:var(--f-display); font-size:2.2rem; color:#FFD447; text-shadow:0 3px 0 #C2650F, 0 6px 14px #0007; transform:rotate(-8deg) }
html.kid.look-light .vsbadge { color:var(--l-accent); text-shadow:0 3px 0 #fff }
.joincode { display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; width:100%; align-self:stretch; padding:12px 16px; border-radius:16px; border:2px dashed var(--g-line,#fff4); color:var(--g-soft,#ccd); font-size:.9375rem }
.joincode span { display:inline-flex; align-items:center; gap:8px; flex:1 1 220px } .joincode .gi.bare { --gis:18px; --bare-d:transparent; flex:none }
.joincode b { color:var(--g-ink,#fff) }
.joincode strong { font-family:var(--f-ui); font-weight:700; font-size:1.6rem; letter-spacing:.12em; color:var(--g-ink,#fff); white-space:nowrap }
html.kid .lobbybox .btn .gi.bare { --gis:20px; --bare-d:#FFC23A }
@media (max-width:420px) { .varena.duo { grid-template-columns:1fr; } .vsbadge { justify-self:center; margin:-6px 0 } }
html.reduce-motion .vslot.wait .ava { animation:none }

/* ---------- incoming challenge pop-up ---------- */
html.kid #invite .invite { background:linear-gradient(var(--a-panel1),var(--a-panel2)); color:#fff; border:3px solid #FFC23A; border-radius:24px; box-shadow:0 6px 0 #C2650F, 0 20px 50px #000a; padding:22px 18px 18px }
html.kid.look-light #invite .invite { background:#fff; color:var(--l-ink) }
html.kid #invite .invite strong { font-family:var(--f-ui); font-size:1.25rem }
html.kid #invite .invite .muted { color:var(--g-soft) }
html.kid #invite .invite .ava { box-shadow:0 0 0 3px #FFC23A }
.inv-tag { position:absolute; top:-15px; left:18px; display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:99px; background:linear-gradient(#FFF27A,#FFC23A); color:#4A2A00; font-family:var(--f-ui); font-weight:700; font-size:.875rem; box-shadow:0 3px 0 #C2650F }
.inv-tag .gi.bare { --gis:14px; --bare-d:#FFC23A }
#invite .invite { position:fixed }
html.kid #invite .invite .btn .gi.bare { --gis:18px; --bare-d:#FFC23A }
.joincode span { display:block; flex:1 1 220px } .joincode span .gi.bare { display:inline-grid; vertical-align:-3px; margin-right:6px }
@media (max-width:420px) { .varena.duo { grid-template-columns:1fr auto 1fr } .vsbadge { margin:0; font-size:1.6rem } .vslot { padding:14px 6px } .vslot .ava, .vempty { width:66px; height:66px } .vslot strong { font-size:1.1rem } .vstat { font-size:.78rem; padding:3px 8px } }
@media (max-width:340px) { .varena.duo { grid-template-columns:1fr } .vsbadge { justify-self:center } }

/* =========================================================================================
   HOME LOBBY — no boxes: the champion stands on the full-screen scene, buttons float around it.
   desktop:  [left rail] [champion] [right rail] / [level] [Daily 10] [PLAY]
   phone:    [level] / [rail][champion][rail] / [Daily 10] / [PLAY]
   ========================================================================================= */
.hud { position:relative; display:grid; grid-template-columns:minmax(150px,280px) minmax(0,1fr) minmax(150px,280px); grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"left stage right" "level mode play"; gap:14px 24px; min-height:calc(100vh - 118px); min-height:calc(100dvh - 118px); padding-bottom:8px }
.hud-stage { grid-area:stage; position:relative; min-height:400px }
.hud-stage .bs-champ { top:auto; bottom:7%; left:50%; height:84%; width:auto; max-width:100%; transform:translateX(-50%); filter:drop-shadow(0 22px 14px #000a); animation:hud-float 3.4s ease-in-out infinite }
.hud-stage .bs-champ.jump { animation:hud-jump .7s cubic-bezier(.3,1.4,.5,1), hud-float 3.4s .7s ease-in-out infinite }
@keyframes hud-float { 0%,100% { transform:translateX(-50%) translateY(0) } 50% { transform:translateX(-50%) translateY(-12px) } }
@keyframes hud-jump { 30% { transform:translateX(-50%) translateY(-40px) scale(1.05,.95) } 60% { transform:translateX(-50%) translateY(0) scale(.97,1.03) } 100% { transform:translateX(-50%) } }
.hud-floor { position:absolute; left:50%; bottom:3%; width:min(70%,460px); height:14%; transform:translateX(-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,#ffffff66,#ffffff1a 55%,transparent); box-shadow:0 0 0 3px #ffffff40, 0 0 40px #ffffff40 }
.hud-name { position:absolute; z-index:3; left:50%; top:0; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; width:max-content; max-width:100% }
.hud-hi { font-family:var(--f-ui); font-weight:700; font-size:.875rem; letter-spacing:.12em; text-transform:uppercase; color:#FFE264; text-shadow:0 2px 6px #000c }
.hud-name h1 { font-family:var(--f-display); font-weight:400; font-size:clamp(40px,4.6vw,68px); line-height:1; color:#fff; text-shadow:0 4px 0 #0005, 0 6px 20px #000b; margin:0 }
.hud-name .bs-role { position:static }
.hud-name .bs-change { position:static; margin-top:6px; background:#000000a6; border-color:#ffffff59 }
.hud-name .bs-change.pick { background:#FFE264 }

/* floating side buttons */
.hud-rail { display:flex; flex-direction:column; gap:12px; align-self:center; z-index:2 }
.hud-rail.left { grid-area:left; align-items:flex-start } .hud-rail.right { grid-area:right; align-items:flex-end }
.hud-btn { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; width:92px; padding:4px 0; background:none; border:0; color:#fff; cursor:pointer; transition:transform .12s }
.hud-btn .gi { --gis:64px; border-radius:22px }
.hud-btn:hover { transform:translateY(-3px) scale(1.03) } .hud-btn:active { transform:translateY(3px) scale(.97) }
.hud-btn:focus-visible { outline:3px solid #fff; outline-offset:4px; border-radius:16px }
.hud-lbl { font-family:var(--f-ui); font-weight:700; font-size:.9375rem; line-height:1.1; text-shadow:0 2px 0 #0008, 0 2px 8px #000c; max-width:100%; overflow-wrap:anywhere; text-align:center }
.hud-badge { position:absolute; top:-4px; right:6px; min-width:26px; height:26px; padding:0 7px; border-radius:99px; display:grid; place-items:center; background:#FF4D6D; color:#fff; font-family:var(--f-ui); font-weight:700; font-size:.8125rem; border:2px solid #fff; box-shadow:0 2px 0 #0005 }

/* bottom HUD: level, Daily 10, PLAY */
.hud-level, .hud-modecard { background:linear-gradient(180deg,#0e1230d9,#0a0d24e6); border:2px solid #ffffff26; border-radius:20px; box-shadow:0 6px 0 #0006, 0 12px 26px #0006; color:#fff; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.hud-level { grid-area:level; align-self:end; display:flex; align-items:center; gap:12px; padding:12px 14px }
.hud-level .bs-lvchip { width:52px; height:52px; font-size:26px; flex:none }
.hud-level strong { display:block; font-family:var(--f-ui); font-size:1.05rem }
.hud-level .bs-track { display:block; margin:7px 0 4px; height:12px }
.hud-level small { display:block; font-family:var(--f-ui); font-weight:700; font-size:.8125rem; color:#C6CEEC }
.hud-mode { grid-area:mode; align-self:end; display:flex; flex-direction:column; gap:8px; min-width:0; position:relative }
.hud-modecard { display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px }
.hud-modecard .gi { --gis:52px }
.hud-modename { display:block; font-family:var(--f-display); font-weight:400; font-size:1.45rem; line-height:1.1; margin:2px 0 }
.hud-mode .bs-sub { font-size:.8125rem; color:#C6CEEC; gap:5px }
.hud-mode .bs-dots i { width:14px; height:7px }
.hud-infobtn { background:none; border:0; padding:0; cursor:pointer; flex:none; border-radius:14px } .hud-infobtn .gi { --gis:40px }
.hud-infobtn:focus-visible { outline:3px solid #fff; outline-offset:3px }
.bravepill { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; border-radius:99px; padding:7px 14px 7px 10px; min-height:40px; cursor:pointer;
  font-family:var(--f-ui); font-weight:700; font-size:.875rem; color:#fff; background:#000000a6; border:2px solid #ffffff40 }
.bravepill .gi.bare { --gis:16px; color:#FFD447; --bare-d:transparent }
.bravepill[aria-checked="true"] { background:linear-gradient(#FFF27A,#FFC23A); color:#3B2100; border-color:#fff } .bravepill[aria-checked="true"] .gi.bare { color:#3B2100 }
.hud-event { display:flex; align-items:center; gap:10px; align-self:stretch; text-align:left; padding:8px 12px 8px 8px; border-radius:16px; cursor:pointer; color:#fff;
  background:linear-gradient(90deg, color-mix(in srgb,var(--ev) 70%,#000) , #0a0d24d9); border:2px solid color-mix(in srgb,var(--ev) 70%,#fff) }
.hud-event .ev-ic { width:36px; height:36px; border-radius:11px; background:var(--ev); display:grid; place-items:center; flex:none } .hud-event .ev-ic .ico { width:20px; height:20px; color:#fff }
.hud-event strong { display:block; font-family:var(--f-ui); font-size:.9375rem; line-height:1.15 } .hud-event small { display:block; font-family:var(--f-ui); font-weight:700; font-size:.78rem; opacity:.9 }
html.kid .hud-play.bs-playbtn { grid-area:play; align-self:end; min-width:0; width:100%; min-height:104px; flex-direction:column; gap:0; border-radius:24px; padding:10px 18px; font-size:clamp(30px,3vw,44px); line-height:1 }
.hud-play > span { display:inline-flex; align-items:center } .hud-play .gi.bare { position:absolute; left:20px; top:50%; transform:translateY(-50%); --gis:30px }
.hud-play small { font-family:var(--f-ui); font-weight:700; font-size:.9rem; letter-spacing:.02em; opacity:.85; margin-top:4px }
.hud-play { position:relative }
.hud-info { position:absolute; z-index:20; left:50%; bottom:130px; transform:translateX(-50%); width:min(460px,calc(100vw - 32px)); padding:16px 18px; border-radius:22px;
  background:linear-gradient(var(--a-panel1),var(--a-panel2)); border:2px solid #ffffff38; color:#fff; box-shadow:0 8px 0 #0006, 0 20px 50px #000a; display:flex; flex-direction:column; gap:10px; animation:popIn .25s cubic-bezier(.3,1.5,.5,1) }
.hud-info strong { font-family:var(--f-ui) } .hud-info .bs-rates { color:#C6CEEC } .hud-info .braverow { font-size:.875rem; color:#C6CEEC } .hud-info .braverow strong { color:#FFD447 }
.hud-info .hud-today { display:flex; align-items:center; gap:8px; font-family:var(--f-ui); font-weight:700 } .hud-info .hud-today .st { width:22px; height:22px } .hud-info .hud-today b { color:#FFD447; font-size:1.4rem }
.hud-info .iconbtn .gi.bare { --gis:16px; --bare-d:transparent }
.hud-info .bs-panel { box-shadow:none }

/* light looks: dark text on the HUD, white glass widgets */
html.look-light .hud-lbl, html.look-light .hud-name h1 { color:var(--l-ink); text-shadow:0 0 10px #fff, 0 0 3px #fff }
html.look-light .hud-hi { color:var(--l-accent); text-shadow:0 0 8px #fff }
html.look-light .hud-level, html.look-light .hud-modecard { background:#ffffffe6; border-color:var(--l-line); color:var(--l-ink); box-shadow:0 6px 0 var(--l-edge), 0 12px 26px color-mix(in srgb,var(--l-accent) 18%,transparent) }
html.look-light .hud-level small, html.look-light .hud-mode .bs-sub { color:var(--l-soft) }
html.look-light .hud-info { background:#fff; color:var(--l-ink); border-color:var(--l-line) } html.look-light .hud-info .bs-rates, html.look-light .hud-info .braverow { color:var(--l-soft) }
html.look-light .bravepill:not([aria-checked="true"]) { background:#fff; color:var(--l-ink); border-color:var(--l-line) }
html.look-light .hud-floor { background:radial-gradient(closest-side,#ffffffaa,#ffffff40 55%,transparent) }

/* tablets and phones */
@media (max-width:900px) {
  .hud { grid-template-columns:76px minmax(0,1fr) 76px; grid-template-rows:auto clamp(270px,43vh,430px) auto auto; grid-template-areas:"level level level" "left stage right" "mode mode mode" "play play play"; gap:10px 6px; min-height:0 }
  .hud-stage { min-height:0 }
  .hud-stage .bs-champ { height:78%; bottom:4% }
  .hud-name { top:2px } .hud-name h1 { font-size:clamp(30px,8vw,48px) } .hud-hi { font-size:.75rem } .hud-name .bs-role { font-size:9px; padding:5px 8px }
  .hud-name .bs-change { font-size:10.5px; padding:7px 10px; min-height:36px; margin-top:2px }
  .hud-name .bs-role, .hud-hi { display:none }
  .hud-rail { gap:8px; align-self:center } .hud-btn { width:72px; gap:3px } .hud-btn .gi { --gis:48px; border-radius:17px } .hud-lbl { font-size:.75rem }
  .hud-badge { min-width:22px; height:22px; font-size:.6875rem; right:2px; top:-5px; padding:0 5px }
  .hud-level { padding:8px 12px; border-radius:16px } .hud-level .bs-lvchip { width:40px; height:40px; font-size:20px } .hud-level .bs-track { margin:4px 0 2px; height:9px } .hud-level strong { font-size:.9375rem }
  .hud-mode { flex-direction:row; flex-wrap:wrap; align-items:stretch } .hud-modecard { flex:1 1 100%; padding:9px 10px } .hud-modecard .gi { --gis:42px } .hud-modename { font-size:1.15rem }
  .hud-event { flex:1 1 auto; padding:6px 10px 6px 6px } .hud-event .ev-ic { width:30px; height:30px }
  .bravepill { align-self:center }
  html.kid .hud-play.bs-playbtn { min-height:68px; font-size:28px; flex-direction:row; gap:10px; border-radius:20px } .hud-play small { display:none } .hud-play .gi.bare { position:static; transform:none; --gis:24px }
  .hud-info { bottom:auto; top:40px; position:fixed }
}
@media (max-width:360px) { .hud { grid-template-columns:62px minmax(0,1fr) 62px } .hud-btn { width:60px } .hud-btn .gi { --gis:42px } .hud-lbl { font-size:.6875rem } }
html.reduce-motion .hud-stage .bs-champ { animation:none !important }
@media (prefers-reduced-motion:reduce) { .hud-stage .bs-champ { animation:none !important } }
/* lobby fixes: nameplate under the champion, Brave as a rail toggle, phone fits PLAY above the nav */
.hud-name { top:auto; bottom:0; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 10px }
.hud-name h1 { order:-1; flex-basis:100% }
.hud-name .bs-change { margin-top:0 }
.hud-hi { position:absolute; z-index:3; left:50%; top:0; transform:translateX(-50%); white-space:nowrap }
.hud-stage .bs-champ { bottom:118px; height:calc(100% - 150px) }
.hud-floor { bottom:96px; height:58px }
html.kid .hud-modename { font-family:var(--f-ui); font-weight:700; font-size:1.4rem }
.hud-badge.off { background:#3B416E } .hud-badge.on { background:#1E9E6A }
.bravebtn[aria-checked="true"] .gi { box-shadow:inset 0 2px 0 #ffffff80, 0 0 0 3px #FFE264, 0 0 18px #FFC23A }
@media (max-width:900px) {
  .hud { grid-template-rows:auto clamp(250px,40vh,400px) auto auto }
  .hud-stage .bs-champ { bottom:66px; height:calc(100% - 80px) } .hud-floor { bottom:50px; height:34px; width:60% }
  .hud-hi { display:none }
  .hud-name { gap:4px 8px } .hud-name h1 { flex-basis:auto; order:0; font-size:clamp(26px,7vw,40px) }
  .hud-rail { gap:6px }
}
@media (max-width:600px) { .hud-event { display:none } }
@media (max-width:380px) { .hud-btn .gi { --gis:44px } }
@media (max-width:900px) { .hud-stage .bs-champ { bottom:84px; height:calc(100% - 96px) } .hud-floor { bottom:70px } }
.hud-mode, .hud-modecard, .hud-modecard > .grow { min-width:0 } .hud-modecard { overflow-wrap:anywhere } .hud-mode .bs-dots { flex-wrap:wrap }