/* Brain Stars — styles and themes.
   Six looks, each a full token set, chosen per child (data-theme on <html>):
     playroom = "Sunny Sky" (5+, default, logo colours)   jungle (5+)   ocean (5+)
     galaxy (8+)   arcade (10+)   studio (12+, also used for parent screens)
   --primary is the big navy-style colour, --cta the yellow "go" colour,
   --deep the dark panel used for the answer sheet and results. */

:root, [data-theme="playroom"] {
  --bg:#EAF4FF; --surface:#FFFFFF; --soft:#F2F7FE; --ink:#102A5E; --muted:#4A5A86; --line:#D5E3F5; --edge:#D5E3F5; --track:#E3ECF8;
  --primary:#102A5E; --primary-ink:#FFFFFF; --primary-edge:#071739; --primary-soft:#DCE6F7;
  --cta:#FFD21F; --cta-ink:#102A5E; --cta-edge:#E09B00;
  --deep:#102A5E; --deep-ink:#FFFFFF; --deep-soft:#1E3F82; --deep-muted:#B8C8EC; --deep-hi:#9EDBFA; --deep-line:#3A5BA0;
  --accent:#102A5E; --accent-ink:#FFFFFF; --c1:#FF2E93; --c2:#10A6EE; --c3:#F2AE00; --c4:#12A877; --c5:#6A4CFF;
  --star:#FFD21F; --star-ink:#102A5E; --good:#12A877; --good-edge:#0B6E4E; --good-soft:#DDF6EC; --bad:#E5484D; --bad-soft:#FFE6E7; --flame:#FF7A1A;
  --shadow:rgba(16,42,94,.10); --deco1:#D3E8FF; --deco2:#FFF1B8; --deco3:#FFD6EA;
  --display:"Baloo 2","Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif; --dw:800;
  --r:22px; --depth:5px; color-scheme:light;
}
[data-theme="jungle"] {
  --bg:#E2F4D8; --surface:#FFFFFF; --soft:#F1F9EC; --ink:#173A22; --muted:#4D6B55; --line:#C6E3B6; --edge:#C6E3B6; --track:#E2F0DA;
  --primary:#1E8F4E; --primary-ink:#FFFFFF; --primary-edge:#136B39; --primary-soft:#D6EEDC;
  --cta:#FFD21F; --cta-ink:#173A22; --cta-edge:#D9A400;
  --deep:#145A32; --deep-ink:#FFFFFF; --deep-soft:#1E7342; --deep-muted:#CFEBD8; --deep-hi:#FFE27A; --deep-line:#3C8E5C;
  --accent:#1E8F4E; --accent-ink:#FFFFFF; --c1:#FF7A45; --c2:#2BB3C0; --c3:#F2AE00; --c4:#1E8F4E; --c5:#8A5A2B;
  --star:#FFD21F; --star-ink:#173A22; --good:#1E9B55; --good-edge:#136B39; --good-soft:#DDF5E3; --bad:#DE4B3E; --bad-soft:#FDE6E2; --flame:#FF7A1A;
  --shadow:rgba(23,58,34,.10); --deco1:#C8EBB4; --deco2:#FFF0A8; --deco3:#BFE7E3;
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif; --body:"Nunito","Segoe UI",system-ui,sans-serif; --dw:800;
  --r:22px; --depth:5px; color-scheme:light;
}
[data-theme="ocean"] {
  --bg:#D8F1FA; --surface:#FFFFFF; --soft:#EEF9FD; --ink:#0A3557; --muted:#4A6A85; --line:#B9E0EF; --edge:#B9E0EF; --track:#DDF0F8;
  --primary:#0A80B5; --primary-ink:#FFFFFF; --primary-edge:#065E86; --primary-soft:#D3ECF7;
  --cta:#FF6B6B; --cta-ink:#FFFFFF; --cta-edge:#D94848;
  --deep:#0A4A73; --deep-ink:#FFFFFF; --deep-soft:#0E6194; --deep-muted:#CBE9F6; --deep-hi:#8FE3FF; --deep-line:#2C7FB0;
  --accent:#0A80B5; --accent-ink:#FFFFFF; --c1:#FF6B6B; --c2:#0A80B5; --c3:#F2AE00; --c4:#22BF99; --c5:#6C7BFF;
  --star:#FFC94A; --star-ink:#0A3557; --good:#14A06A; --good-edge:#0C7A4F; --good-soft:#DDF5EC; --bad:#E5484D; --bad-soft:#FFE6E7; --flame:#FF7A1A;
  --shadow:rgba(10,53,87,.10); --deco1:#B5E4F5; --deco2:#C8F0E6; --deco3:#FFE2C2;
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif; --body:"Nunito","Segoe UI",system-ui,sans-serif; --dw:800;
  --r:24px; --depth:5px; color-scheme:light;
}
[data-theme="galaxy"] {
  --bg:#0C1238; --surface:#1A2163; --soft:#141A52; --ink:#EEF1FF; --muted:#A8B0E6; --line:#2A327A; --edge:#080C29; --track:#2A327A;
  --primary:#7C5CFF; --primary-ink:#FFFFFF; --primary-edge:#5537E0; --primary-soft:#2A2F80;
  --cta:#3DD5FF; --cta-ink:#0C1238; --cta-edge:#1A9CC4;
  --deep:#1A2163; --deep-ink:#FFFFFF; --deep-soft:#262F86; --deep-muted:#A8B0E6; --deep-hi:#3DD5FF; --deep-line:#3B44A0;
  --accent:#7C5CFF; --accent-ink:#FFFFFF; --c1:#FF4FD8; --c2:#3DD5FF; --c3:#FFD447; --c4:#3DF0B0; --c5:#9B7BFF;
  --star:#FFD447; --star-ink:#2B2200; --good:#22C98C; --good-edge:#138A60; --good-soft:#13394A; --bad:#FF5C8A; --bad-soft:#3D1838; --flame:#FF8A3D;
  --shadow:rgba(0,0,0,.35); --deco1:#2B2F7A; --deco2:#4A1E6E; --deco3:#123E66;
  --display:"Chakra Petch","Trebuchet MS",system-ui,sans-serif; --body:"Nunito","Segoe UI",system-ui,sans-serif; --dw:700;
  --r:18px; --depth:4px; color-scheme:dark;
}
[data-theme="arcade"] {
  --bg:#0A0A12; --surface:#17171F; --soft:#101018; --ink:#F5F5FF; --muted:#A3A3BF; --line:#2B2B3D; --edge:#000000; --track:#2B2B3D;
  --primary:#FFE14D; --primary-ink:#111111; --primary-edge:#C9A800; --primary-soft:#2B2B3D;
  --cta:#FF3B6B; --cta-ink:#FFFFFF; --cta-edge:#B81E45;
  --deep:#17171F; --deep-ink:#F5F5FF; --deep-soft:#24242F; --deep-muted:#A3A3BF; --deep-hi:#FFE14D; --deep-line:#3A3A50;
  --accent:#FFE14D; --accent-ink:#111111; --c1:#FF3B6B; --c2:#29E0FF; --c3:#FFE14D; --c4:#3DFF8A; --c5:#B45CFF;
  --star:#FFE14D; --star-ink:#111111; --good:#1FCB66; --good-edge:#0E8A42; --good-soft:#0F3322; --bad:#FF3B6B; --bad-soft:#3A1220; --flame:#FF8A3D;
  --shadow:rgba(0,0,0,.5); --deco1:#29E0FF; --deco2:#FF3B6B; --deco3:#B45CFF;
  --display:"Bungee","Impact",system-ui,sans-serif; --body:"Rubik","Segoe UI",system-ui,sans-serif; --dw:400;
  --r:10px; --depth:4px; color-scheme:dark;
}
[data-theme="studio"] {
  --bg:#F3F4F8; --surface:#FFFFFF; --soft:#F3F4F8; --ink:#15182B; --muted:#5A6077; --line:#E3E6EE; --edge:#E3E6EE; --track:#ECEEF4;
  --primary:#15182B; --primary-ink:#FFFFFF; --primary-edge:#000000; --primary-soft:#E6E7F0;
  --cta:#FFD21F; --cta-ink:#15182B; --cta-edge:#E0B400;
  --deep:#15182B; --deep-ink:#FFFFFF; --deep-soft:#262A42; --deep-muted:#B8BCD0; --deep-hi:#A5B4FC; --deep-line:#3A3F5C;
  --accent:#4F46E5; --accent-ink:#FFFFFF; --c1:#E8457C; --c2:#4F46E5; --c3:#F5B400; --c4:#10B981; --c5:#8B5CF6;
  --star:#F5B400; --star-ink:#2E2200; --good:#0E9F6E; --good-edge:#08754F; --good-soft:#E3F7EF; --bad:#DC3545; --bad-soft:#FCE8EA; --flame:#F97316;
  --shadow:rgba(21,24,43,.06); --deco1:#E6E8F7; --deco2:#F1E7F3; --deco3:#E3F2EE;
  --display:"Sora","Segoe UI",system-ui,sans-serif; --body:"Manrope","Segoe UI",system-ui,sans-serif; --dw:700;
  --r:14px; --depth:4px; color-scheme:light;
}

* { box-sizing:border-box }
html, body { min-height:100% }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.5; overflow-x:hidden; transition:background-color .4s }
h1,h2,h3 { font-family:var(--display); margin:0; text-wrap:balance; line-height:1.12; font-weight:800 }
[data-theme="galaxy"] h1,[data-theme="galaxy"] h2,[data-theme="galaxy"] h3 { font-weight:700; letter-spacing:.3px }
[data-theme="arcade"] h1,[data-theme="arcade"] h2,[data-theme="arcade"] h3 { font-weight:400; letter-spacing:.5px }
[data-theme="studio"] h1,[data-theme="studio"] h2,[data-theme="studio"] h3 { font-weight:700; letter-spacing:-.4px }
h2 { font-size:clamp(1.5rem,5vw,2rem) } h3 { font-size:1.2rem }
p { margin:0 }
a { color:var(--accent) }
[data-theme="arcade"] a { color:var(--c2) }
button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline:3px solid var(--c2); outline-offset:3px }
img { max-width:100% }
.ico { width:1.25em; height:1.25em; flex:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; fill:none; vertical-align:-.22em }

/* ---------- backdrop ---------- */
.sky { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.blob { position:absolute; border-radius:50%; opacity:.75; animation:drift 18s ease-in-out infinite alternate }
.b1 { width:340px; height:340px; background:var(--deco1); top:-120px; left:-100px }
.b2 { width:280px; height:280px; background:var(--deco2); top:40%; right:-120px; animation-delay:-6s }
.b3 { width:300px; height:300px; background:var(--deco3); bottom:-140px; left:20%; animation-delay:-11s }
.shape { position:absolute; opacity:.45; animation:float 9s ease-in-out infinite }
.shape svg { display:block }
.tw { position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; opacity:0; animation:twinkle 3s ease-in-out infinite }
.grid { position:absolute; inset:-50% -10% 0; opacity:0; background-image:linear-gradient(var(--deco3) 1px,transparent 1px),linear-gradient(90deg,var(--deco3) 1px,transparent 1px); background-size:44px 44px; transform:perspective(500px) rotateX(60deg); transform-origin:bottom; animation:gridmove 4s linear infinite }
.planet { position:absolute; width:180px; height:180px; right:-50px; top:12%; border-radius:50%; background:radial-gradient(circle at 35% 35%,#9B7BFF,#4A2BB5 60%,#241567); box-shadow:0 0 60px rgba(124,92,255,.5); opacity:0 }
.planet::after { content:""; position:absolute; inset:70px -40px; border-radius:50%; border:6px solid rgba(55,200,255,.55); transform:rotate(-18deg) }
.leaf { position:absolute; opacity:0 }
[data-theme="galaxy"] .tw { opacity:1 } [data-theme="galaxy"] .planet { opacity:.9 } [data-theme="galaxy"] .blob { opacity:.45; filter:blur(30px) }
[data-theme="galaxy"] .shape { opacity:.25 }
[data-theme="arcade"] .grid { opacity:.35 } [data-theme="arcade"] .blob,[data-theme="arcade"] .shape { opacity:0 }
[data-theme="arcade"] .tw { opacity:.6; background:var(--c2) }
[data-theme="jungle"] .leaf { opacity:.55 } [data-theme="jungle"] .shape { opacity:.25 }
[data-theme="studio"] .blob { opacity:.6; filter:blur(40px) } [data-theme="studio"] .shape { opacity:0 }
@keyframes drift { to { transform:translate(40px,30px) scale(1.08) } }
@keyframes float { 0%,100% { transform:translateY(0) rotate(0) } 50% { transform:translateY(-18px) rotate(12deg) } }
@keyframes twinkle { 0%,100% { opacity:.15 } 50% { opacity:.95 } }
@keyframes gridmove { to { background-position:0 44px } }
@keyframes sway { 0%,100% { transform:rotate(-6deg) } 50% { transform:rotate(6deg) } }

/* ---------- layout ---------- */
.wrap { position:relative; z-index:1; max-width:780px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-block:14px 56px; display:flex; flex-direction:column; gap:18px }
.view { display:flex; flex-direction:column; gap:18px }
.view.enter { animation:viewIn .42s cubic-bezier(.25,1.2,.4,1) }
@keyframes viewIn { from { opacity:0; transform:translateY(18px) scale(.985) } to { opacity:1; transform:none } }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.grow { flex:1; min-width:0 }
.center { justify-content:center; text-align:center }
.muted { color:var(--muted) } .small { font-size:.88rem }
.label { font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.note { font-size:.86rem; color:var(--muted) }
.demo-banner { position:relative; z-index:2; background:var(--c3); color:#2B2200; font-weight:800; font-size:.82rem; text-align:center; padding:6px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px)) }

/* ---------- header ---------- */
.top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.logo { display:flex; align-items:center; gap:6px; background:none; border:0; padding:0; text-align:left }
.logo-mark { width:46px; height:46px; flex:none; filter:drop-shadow(0 3px 6px rgba(47,60,140,.25)); transition:transform .25s cubic-bezier(.3,1.6,.5,1) }
.logo:hover .logo-mark { transform:rotate(-8deg) scale(1.06) }
.word { font-family:var(--display); font-weight:800; font-size:1.8rem; line-height:1; letter-spacing:-.5px }
.word b:nth-child(1) { color:var(--word1) } .word b:nth-child(2) { color:var(--word2) }
.word small { display:block; font-family:var(--body); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:800; margin-top:2px }
[data-theme="arcade"] .word { font-weight:400; font-size:1.45rem; letter-spacing:1px }
.tools { display:flex; gap:8px; align-items:center }
.iconbtn { width:44px; height:44px; border-radius:50%; border:0; background:var(--surface); box-shadow:0 3px 0 var(--line); display:grid; place-items:center; color:var(--muted) }
.chip-me { display:flex; align-items:center; gap:7px; border:0; background:var(--surface); border-radius:999px; padding:3px 12px 3px 3px; box-shadow:0 3px 0 var(--line); font-weight:800; max-width:160px }
.chip-me .ava { width:38px; height:38px }
.chip-me span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
@media (max-width:480px) { .chip-me span { display:none } .chip-me { padding:3px } .word small { display:none } }
@keyframes bob { 0%,100% { transform:translateY(0) rotate(-4deg) } 50% { transform:translateY(-4px) rotate(4deg) } }

/* ---------- surfaces & controls ---------- */
.card { background:var(--surface); border-radius:var(--r); padding:20px; box-shadow:0 var(--depth) 0 var(--line),0 14px 30px var(--shadow); display:flex; flex-direction:column; gap:14px }
[data-theme="studio"] .card { border:1px solid var(--line) }
[data-theme="arcade"] .card { border:2px solid var(--line) }
[data-theme="galaxy"] .card { border:1px solid var(--line); background:linear-gradient(160deg,var(--surface),var(--soft)) }
.btn { --c:var(--accent); --t:var(--accent-ink); display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:calc(var(--r) * .72); padding:13px 20px; font-weight:800; font-size:1.02rem; background:var(--c); color:var(--t); box-shadow:0 var(--depth) 0 color-mix(in srgb,var(--c) 66%,#000); transition:transform .08s,box-shadow .08s,filter .15s; text-decoration:none }
.btn:hover { filter:brightness(1.05) }
.btn:active { transform:translateY(calc(var(--depth) - 1px)); box-shadow:0 1px 0 color-mix(in srgb,var(--c) 66%,#000) }
[data-theme="studio"] .btn { box-shadow:0 1px 2px var(--shadow) }
[data-theme="arcade"] .btn { letter-spacing:.02em }
.btn.c1 { --c:var(--c1); --t:#fff } .btn.c2 { --c:var(--c2); --t:#fff } .btn.c4 { --c:var(--c4); --t:#fff } .btn.star { --c:var(--star); --t:var(--star-ink) }
[data-theme="arcade"] .btn.c2,[data-theme="arcade"] .btn.c4,[data-theme="galaxy"] .btn.c4 { --t:#0A0A12 }
.btn.ghost { --c:var(--soft); --t:var(--ink); box-shadow:0 calc(var(--depth) * .8) 0 var(--line) }
[data-theme="studio"] .btn.ghost { border:1px solid var(--line); box-shadow:none }
.btn.danger { --c:var(--bad-soft); --t:var(--bad); box-shadow:0 3px 0 color-mix(in srgb,var(--bad) 30%,transparent) }
.btn.big { font-size:1.2rem; padding:17px 26px }
.btn.sm { padding:8px 13px; font-size:.86rem; box-shadow:0 3px 0 color-mix(in srgb,var(--c) 66%,#000) }
.btn.ghost.sm { box-shadow:0 3px 0 var(--line) }
.btn.wide { width:100% }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none }
.btn.loading { position:relative; color:transparent }
.btn.loading::after { content:""; position:absolute; width:20px; height:20px; border-radius:50%; border:3px solid var(--t); border-right-color:transparent; animation:spin .7s linear infinite }
@keyframes spin { to { transform:rotate(360deg) } }
.linkbtn { border:0; background:none; padding:0; color:var(--accent); font-weight:800; text-decoration:underline; text-underline-offset:3px }
[data-theme="arcade"] .linkbtn { color:var(--c2) }
.field { display:flex; flex-direction:column; gap:6px }
.field label { font-weight:800; font-size:.92rem }
input, select { font:inherit; font-weight:600; color:var(--ink); background:var(--soft); border:2px solid var(--line); border-radius:calc(var(--r) * .6); padding:12px 14px; min-width:0; width:100% }
input:focus, select:focus { border-color:var(--c2); outline:none }
.row input { width:auto }
.check { display:flex; gap:10px; align-items:flex-start; font-size:.9rem }
.check input { width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--accent) }
.err { background:var(--bad-soft); color:var(--bad); border-radius:12px; padding:10px 14px; font-weight:700; font-size:.92rem }
.ok { background:var(--good-soft); color:var(--good); border-radius:12px; padding:10px 14px; font-weight:700; font-size:.92rem }
.tabs { display:flex; gap:4px; background:var(--soft); padding:4px; border-radius:999px }
.tabs button { flex:1; border:0; background:none; padding:9px 10px; border-radius:999px; font-weight:800; color:var(--muted); font-size:.92rem }
.tabs button[aria-selected="true"] { background:var(--surface); color:var(--ink); box-shadow:0 2px 6px var(--shadow) }
.pill { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:4px 11px 4px 7px; font-weight:800; font-size:.95rem; background:var(--star); color:var(--star-ink); font-variant-numeric:tabular-nums; white-space:nowrap }
.pill.soft { background:var(--soft); color:var(--ink) }
.st { width:18px; height:18px } .st path { fill:#FFF6D0; stroke:var(--star-ink); stroke-width:1.4; stroke-linejoin:round }
.pill.soft .st path { fill:var(--star); stroke:var(--star-ink) }
.badge { --c:var(--c2); display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 8px; border-radius:999px; font-weight:800; font-size:.82rem; background:color-mix(in srgb,var(--c) 18%,var(--surface)); color:var(--ink) }
.badge .ico { color:var(--c) }

/* ---------- mascot & hero ---------- */
.hero { display:flex; align-items:center; gap:14px }
.hero .m, .hero .ava.big { width:92px; height:92px; flex:none }
.hero .m { animation:bob 3s ease-in-out infinite }
.bubble { position:relative; background:var(--surface); border-radius:20px; padding:14px 18px; box-shadow:0 calc(var(--depth) * .9) 0 var(--line); font-family:var(--display); font-weight:800; font-size:1.3rem; line-height:1.2 }
[data-theme="studio"] .bubble,[data-theme="arcade"] .bubble,[data-theme="galaxy"] .bubble { border:1px solid var(--line) }
[data-theme="arcade"] .bubble { font-weight:400; font-size:1.05rem }
.bubble::before { content:""; position:absolute; left:-10px; top:50%; margin-top:-10px; border:10px solid transparent; border-right-color:var(--surface); border-left:0 }
.bubble small { display:block; font-family:var(--body); font-size:.9rem; font-weight:600; color:var(--muted); margin-top:3px }
[data-theme="studio"] .hero .m { width:64px; height:64px }
.cheer { animation:cheer .7s cubic-bezier(.3,1.6,.5,1) }
@keyframes cheer { 0% { transform:translateY(0) rotate(0) scale(1) } 40% { transform:translateY(-16px) rotate(-14deg) scale(1.08) } 100% { transform:none } }
.sad { animation:sad .6s ease-in-out }
@keyframes sad { 30% { transform:rotate(-8deg) translateY(3px) } 60% { transform:rotate(6deg) } }

/* ---------- profiles ---------- */
.kids { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px }
.kid { position:relative; border:0; background:var(--surface); border-radius:var(--r); padding:18px 12px 16px; display:flex; flex-direction:column; align-items:center; gap:7px; box-shadow:0 var(--depth) 0 var(--line),0 12px 24px var(--shadow); transition:transform .18s cubic-bezier(.3,1.6,.5,1); animation:popIn .45s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay:calc(var(--i,0) * 60ms) }
[data-theme="studio"] .kid,[data-theme="arcade"] .kid,[data-theme="galaxy"] .kid { border:1px solid var(--line) }
.kid:hover { transform:translateY(-5px) rotate(-1.5deg) }
.kid:active { transform:scale(.97) }
.kid .ava { width:86px; height:86px }
.kid .name { font-family:var(--display); font-size:1.3rem; font-weight:800; line-height:1 }
.kid .age { font-size:.8rem; color:var(--muted); font-weight:700 }
.kid.add { border:2px dashed var(--line); background:transparent; box-shadow:none; color:var(--muted); justify-content:center; font-weight:800 }
.ava { border-radius:50%; display:block; flex:none }
@keyframes popIn { from { opacity:0; transform:scale(.8) translateY(10px) } }

/* ---------- home tiles ---------- */
.playcard { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--c5))); color:var(--accent-ink); border-radius:calc(var(--r) + 4px); padding:22px; display:flex; align-items:center; gap:16px; border:0; text-align:left; box-shadow:0 var(--depth) 0 color-mix(in srgb,var(--accent) 60%,#000),0 16px 30px var(--shadow); transition:transform .15s }
.playcard:hover { transform:translateY(-3px) }
.playcard:active { transform:translateY(2px) }
.playcard .go { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.25); display:grid; place-items:center; flex:none; animation:pulse 2s ease-in-out infinite }
.playcard .go .ico { width:30px; height:30px }
.playcard h2 { color:inherit }
.playcard small { display:block; opacity:.9; font-weight:700; font-size:.92rem }
.playcard::after { content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.12) }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,255,255,.4) } 50% { box-shadow:0 0 0 12px rgba(255,255,255,0) } }
.switch-row { display:flex; align-items:center; gap:12px; background:var(--soft); border-radius:16px; padding:10px 14px }
.toggle { position:relative; width:52px; height:30px; border-radius:99px; border:0; background:var(--line); flex:none; transition:background .2s }
.toggle::after { content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:transform .25s cubic-bezier(.3,1.6,.5,1); box-shadow:0 2px 4px rgba(0,0,0,.2) }
.toggle[aria-checked="true"] { background:var(--c1) }
.toggle[aria-checked="true"]::after { transform:translateX(22px) }
.topics { display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:10px }
.tile { --c:var(--c2); border:3px solid transparent; background:var(--soft); border-radius:calc(var(--r) * .8); padding:12px 8px; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; font-weight:800; font-size:.88rem; line-height:1.15; transition:transform .15s cubic-bezier(.3,1.6,.5,1) }
.tile:hover { transform:translateY(-3px) }
.tile .ib { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--c); color:#fff; box-shadow:0 calc(var(--depth) * .8) 0 color-mix(in srgb,var(--c) 62%,#000) }
[data-theme="arcade"] .tile .ib,[data-theme="galaxy"] .tile .ib { color:#0A0A12 }
.tile .ib .ico { width:24px; height:24px }
.tile small { font-weight:700; color:var(--muted); font-size:.74rem }
.tile[aria-pressed="true"] { border-color:var(--c); background:color-mix(in srgb,var(--c) 16%,var(--surface)) }
.tile[aria-pressed="true"] .ib { animation:wob .5s }
@keyframes wob { 30% { transform:rotate(-12deg) scale(1.1) } 60% { transform:rotate(8deg) } }
.links { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.linkcard { display:flex; align-items:center; gap:12px; border:0; text-align:left; background:var(--surface); border-radius:var(--r); padding:14px; box-shadow:0 var(--depth) 0 var(--line); font-weight:800 }
[data-theme="studio"] .linkcard,[data-theme="arcade"] .linkcard,[data-theme="galaxy"] .linkcard { border:1px solid var(--line) }
.linkcard .ib { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb,var(--c,var(--c1)) 18%,var(--surface)); color:var(--c,var(--c1)); flex:none }
.linkcard small { display:block; color:var(--muted); font-weight:600; font-size:.82rem }
@media (max-width:420px) { .links { grid-template-columns:1fr } }

/* ---------- quiz ---------- */
.qtop { display:flex; align-items:center; gap:10px }
.prog { flex:1; height:16px; border-radius:99px; background:var(--soft); box-shadow:inset 0 2px 0 var(--line); overflow:hidden }
.prog span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--c4),var(--c2)); transition:width .6s cubic-bezier(.3,1.4,.5,1) }
.qnum { font-family:var(--display); font-weight:800; white-space:nowrap }
.streak { display:inline-flex; align-items:center; gap:3px; font-weight:800; color:var(--accent) }
[data-theme="arcade"] .streak { color:var(--c1) }
.streak .ico { fill:currentColor; stroke:none; animation:flick .6s ease-in-out infinite alternate }
@keyframes flick { to { transform:scale(1.18) rotate(6deg) } }
.qcard { position:relative; background:var(--surface); border-radius:calc(var(--r) + 4px); padding:22px 20px 20px; box-shadow:0 calc(var(--depth) + 2px) 0 var(--line),0 16px 34px var(--shadow); display:flex; flex-direction:column; gap:16px }
[data-theme="studio"] .qcard,[data-theme="arcade"] .qcard,[data-theme="galaxy"] .qcard { border:1px solid var(--line) }
.qcard.enter { animation:cardIn .5s cubic-bezier(.25,1.4,.45,1) }
@keyframes cardIn { from { transform:translateY(18px) scale(.97); opacity:0 } to { transform:none; opacity:1 } }
.question { font-family:var(--display); font-weight:800; font-size:clamp(1.4rem,5vw,2rem); line-height:1.2; text-wrap:balance }
[data-theme="galaxy"] .question { font-weight:700 }
.answers { display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:540px) { .answers { grid-template-columns:1fr } }
.ans { --c:var(--c1); position:relative; display:flex; align-items:center; gap:12px; text-align:left; border:0; background:var(--soft); border-radius:calc(var(--r) * .8); padding:14px; font-weight:700; font-size:1.05rem; min-height:66px; box-shadow:0 var(--depth) 0 color-mix(in srgb,var(--c) 45%,var(--line)); transition:transform .12s,opacity .3s }
.ans:nth-child(2) { --c:var(--c2) } .ans:nth-child(3) { --c:var(--c3) } .ans:nth-child(4) { --c:var(--c4) }
[data-theme="studio"] .ans { border:1px solid var(--line); box-shadow:none }
[data-theme="arcade"] .ans { border:2px solid color-mix(in srgb,var(--c) 60%,transparent); box-shadow:0 0 0 transparent }
.qcard.enter .ans { animation:ansIn .45s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay:calc(120ms + var(--i) * 70ms) }
@keyframes ansIn { from { opacity:0; transform:translateY(16px) scale(.94) } }
.ans:not(:disabled):hover { transform:translateY(-3px) }
[data-theme="arcade"] .ans:not(:disabled):hover { box-shadow:0 0 18px color-mix(in srgb,var(--c) 50%,transparent) }
.ans:not(:disabled):active { transform:translateY(3px) }
.ans b { font-family:var(--display); width:38px; height:38px; flex:none; border-radius:calc(var(--r) * .5); display:grid; place-items:center; background:var(--c); color:#fff; font-size:1.1rem }
.ans:nth-child(3) b, [data-theme="arcade"] .ans b, [data-theme="galaxy"] .ans b { color:#14141F }
.ans.right { background:var(--good-soft); box-shadow:0 var(--depth) 0 var(--good); animation:bounce .55s !important; opacity:1 }
.ans.right b { background:var(--good); color:#fff }
.ans.wrong { background:var(--bad-soft); box-shadow:0 var(--depth) 0 var(--bad); animation:shake .45s !important }
.ans.wrong b { background:var(--bad); color:#fff }
.ans.dim { opacity:.45 }
.ans:disabled { cursor:default }
@keyframes bounce { 30% { transform:scale(1.07) } 60% { transform:scale(.97) } 100% { transform:scale(1) } }
@keyframes shake { 20%,60% { transform:translateX(-8px) } 40%,80% { transform:translateX(8px) } }
.coach { display:flex; flex-direction:column; gap:10px; border-radius:20px; padding:10px 12px 12px; animation:coachIn .45s cubic-bezier(.3,1.6,.5,1) }
.coach-top { display:flex; align-items:center; gap:12px }
.why { display:flex; align-items:flex-start; gap:10px; background:var(--surface); color:var(--ink); border-radius:calc(var(--r) * .7); padding:12px; font-size:1rem; line-height:1.5; animation:whyIn .5s .15s cubic-bezier(.3,1.4,.5,1) backwards }
.why p { margin:0; min-width:0 }
.why strong { color:var(--accent) }
.why-ico { width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--star); color:var(--star-ink) }
.why-ico .ico { width:20px; height:20px }
.why .iconbtn { width:38px; height:38px; flex:none; background:var(--soft) }
@keyframes whyIn { from { opacity:0; transform:translateY(8px) } }
.coach .m { width:62px; height:62px; flex:none }
.coach.ok { background:var(--good-soft) } .coach.no { background:var(--bad-soft) }
.coach .say { font-family:var(--display); font-weight:800; font-size:1.15rem; line-height:1.2 }
.coach .say small { display:block; font-family:var(--body); font-weight:600; font-size:.9rem; color:var(--muted) }
@keyframes coachIn { from { transform:translateY(14px) scale(.9); opacity:0 } }
.floater { position:fixed; z-index:30; pointer-events:none; font-family:var(--display); font-weight:800; font-size:1.7rem; color:var(--accent); text-shadow:0 2px 0 var(--surface); animation:floatUp 1.1s ease-out forwards }
[data-theme="arcade"] .floater { color:var(--c3) }
@keyframes floatUp { 0% { transform:translate(-50%,0) scale(.6); opacity:0 } 20% { transform:translate(-50%,-14px) scale(1.2); opacity:1 } 100% { transform:translate(-50%,-90px) scale(1); opacity:0 } }
.flystar { position:fixed; left:-14px; top:-14px; z-index:45; pointer-events:none }

/* ---------- results ---------- */
.result { align-items:center; text-align:center }
.trophy { width:130px; height:130px; animation:trophyIn .8s cubic-bezier(.3,1.6,.5,1) }
@keyframes trophyIn { 0% { transform:scale(0) rotate(-30deg) } 60% { transform:scale(1.15) rotate(8deg) } 100% { transform:none } }
.bignum { font-family:var(--display); font-size:3.4rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:8px; color:var(--accent) }
[data-theme="arcade"] .bignum { color:var(--c3); font-weight:400 }
.bignum .st { width:46px; height:46px }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100% }
.stat { background:var(--soft); border-radius:16px; padding:12px 6px; text-align:center }
.stat .v { font-family:var(--display); font-size:1.6rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1 }

/* ---------- gifts ---------- */
.gifts { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px }
.gift { --c:var(--c1); background:var(--surface); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:10px; box-shadow:0 var(--depth) 0 var(--line),0 12px 24px var(--shadow); animation:popIn .4s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay:calc(var(--i,0) * 45ms) }
[data-theme="studio"] .gift,[data-theme="arcade"] .gift,[data-theme="galaxy"] .gift { border:1px solid var(--line) }
.gift:nth-child(4n+2) { --c:var(--c2) } .gift:nth-child(4n+3) { --c:var(--c4) } .gift:nth-child(4n+4) { --c:var(--c5) }
.gift .gi { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:color-mix(in srgb,var(--c) 18%,var(--surface)); color:var(--c) }
.gift .gi .ico { width:30px; height:30px }
.gift.can .gi { animation:wiggle 2.4s ease-in-out infinite }
@keyframes wiggle { 0%,80%,100% { transform:rotate(0) } 85% { transform:rotate(-10deg) } 90% { transform:rotate(10deg) } 95% { transform:rotate(-6deg) } }
.gift .rname { font-family:var(--display); font-weight:800; font-size:1.15rem; line-height:1.15 }
[data-theme="arcade"] .gift .rname { font-weight:400; font-size:.98rem }
.bar { height:12px; border-radius:99px; background:var(--soft); overflow:hidden }
.bar span { display:block; height:100%; background:var(--star); border-radius:99px; transition:width .8s cubic-bezier(.3,1.3,.5,1) }
.list { display:flex; flex-direction:column; gap:8px }
.item { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border-radius:16px; background:var(--soft) }
.item .grow { min-width:110px }
.item .ava { width:40px; height:40px }
.status { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:3px 9px; border-radius:99px }
.status.pending { background:var(--star); color:var(--star-ink) } .status.given { background:var(--good-soft); color:var(--good) } .status.declined { background:var(--bad-soft); color:var(--bad) }

/* ---------- avatar maker ---------- */
.maker { display:grid; grid-template-columns:200px 1fr; gap:18px; align-items:start }
@media (max-width:600px) { .maker { grid-template-columns:1fr } }
.preview { display:flex; flex-direction:column; align-items:center; gap:10px; position:sticky; top:12px }
.preview .ava { width:180px; height:180px; box-shadow:0 10px 30px var(--shadow) }
.preview .ava.spin { animation:avaSpin .6s cubic-bezier(.3,1.4,.5,1) }
@keyframes avaSpin { 0% { transform:rotateY(0) scale(1) } 50% { transform:rotateY(180deg) scale(.85) } 100% { transform:rotateY(360deg) scale(1) } }
@media (max-width:600px) { .preview { position:static } .preview .ava { width:140px; height:140px } }
.mtabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none }
.mtabs::-webkit-scrollbar { display:none }
.mtabs button { flex:none; border:0; background:var(--soft); border-radius:999px; padding:8px 14px; font-weight:800; font-size:.88rem; color:var(--muted) }
.mtabs button[aria-selected="true"] { background:var(--accent); color:var(--accent-ink) }
.opts { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:8px }
.opt { border:3px solid transparent; background:var(--soft); border-radius:16px; padding:4px; display:grid; place-items:center; aspect-ratio:1; transition:transform .15s cubic-bezier(.3,1.6,.5,1) }
.opt:hover { transform:scale(1.06) }
.opt[aria-pressed="true"] { border-color:var(--c2); background:color-mix(in srgb,var(--c2) 14%,var(--surface)) }
.opt .ava { width:100%; height:100% }
.opt.sw { border-radius:50% }
.opt.sw span { width:70%; height:70%; border-radius:50%; display:block; box-shadow:inset 0 0 0 2px rgba(0,0,0,.08) }
.opt.word { aspect-ratio:auto; padding:10px 6px; font-weight:800; font-size:.82rem }

/* ---------- themes picker ---------- */
.themes { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px }
.themecard { border:3px solid transparent; border-radius:18px; padding:0; overflow:hidden; background:var(--soft); text-align:left; transition:transform .15s }
.themecard:hover { transform:translateY(-3px) }
.themecard[aria-pressed="true"] { border-color:var(--c2) }
.themecard .sw { height:70px; display:flex; align-items:flex-end; gap:5px; padding:10px }
.themecard .sw i { width:16px; height:16px; border-radius:50% }
.themecard .tn { padding:8px 10px; font-weight:800; font-size:.9rem; line-height:1.2 }
.themecard .tn small { display:block; color:var(--muted); font-weight:600; font-size:.76rem }

/* ---------- sheet & toast ---------- */
.scrim { position:fixed; inset:0; z-index:50; background:rgba(10,14,35,.5); animation:fade .2s }
.sheet { position:fixed; z-index:51; left:50%; bottom:0; transform:translateX(-50%); width:min(560px,100%); max-height:88vh; overflow-y:auto; background:var(--surface); color:var(--ink); border-radius:28px 28px 0 0; padding:10px max(18px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px)); display:flex; flex-direction:column; gap:14px; box-shadow:0 -10px 40px var(--shadow); animation:up .34s cubic-bezier(.3,1.3,.5,1) }
.grab { width:46px; height:5px; border-radius:9px; background:var(--line); margin:0 auto }
@keyframes up { from { transform:translate(-50%,100%) } to { transform:translate(-50%,0) } }
@keyframes fade { from { opacity:0 } }
.pfs { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px }
.pf { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; border:3px solid transparent; background:var(--soft); border-radius:20px; padding:12px 8px; font-weight:800 }
.pf .ava { width:60px; height:60px; transition:transform .2s cubic-bezier(.3,1.6,.5,1) }
.pf:hover .ava { transform:scale(1.1) rotate(-5deg) }
.pf.on { border-color:var(--c2) }
.tick { position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; background:var(--c2); color:#fff; display:grid; place-items:center }
.tick .ico { width:15px; height:15px }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom,0px)); background:var(--ink); color:var(--bg); padding:11px 20px; border-radius:999px; font-weight:800; z-index:60; max-width:calc(100% - 32px); animation:toastIn .35s cubic-bezier(.3,1.6,.5,1) }
@keyframes toastIn { from { transform:translate(-50%,20px); opacity:0 } }
#fx { position:fixed; inset:0; z-index:44; pointer-events:none; width:100%; height:100% }
.splash { min-height:60vh; display:grid; place-items:center; text-align:center }
.splash .m { width:110px; height:110px; animation:bob 1.2s ease-in-out infinite }
footer { text-align:center; font-size:.8rem; color:var(--muted); padding-top:10px }
footer a { color:var(--muted) }
details summary { cursor:pointer; font-weight:800 }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important } }


/* ---------- live challenges ---------- */
.linkcard.wide { grid-column:1/-1; background:linear-gradient(120deg,color-mix(in srgb,var(--c2) 22%,var(--surface)),var(--surface)) }
.linkcard.wide > .ico:last-child, .chmode > .ico:last-child { color:var(--c,var(--c2)); flex:none }
.chmode { width:100% }
.codein { font-family:var(--display); font-size:1.4rem; letter-spacing:.2em; text-align:center; min-width:0 }
.chcode { font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,14vw,4.2rem); letter-spacing:.08em; line-height:1; color:var(--accent); white-space:nowrap; animation:bounce .6s }
.chlist { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px }
.chp { display:flex; flex-direction:column; align-items:center; gap:4px; background:var(--soft); border-radius:16px; padding:10px 6px; font-weight:800; text-align:center; animation:ansIn .45s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay:calc(var(--i) * 60ms) }
.chp .ava { width:54px; height:54px }
.chp small { font-size:.72rem; color:var(--muted); font-weight:700 }
.chp.wait { opacity:.6; justify-content:center; min-height:96px }
.dots { display:inline-flex; gap:5px } .dots i { width:8px; height:8px; border-radius:50%; background:var(--muted); animation:pulse 1s ease-in-out infinite } .dots i:nth-child(2) { animation-delay:.15s } .dots i:nth-child(3) { animation-delay:.3s }
.chgo { min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px }
.chcount { font-family:var(--display); font-weight:800; font-size:7rem; line-height:1; color:var(--accent); animation:pulse 1s ease-in-out infinite }
.chclock { display:inline-flex; align-items:center; gap:5px; font-family:var(--display); font-weight:800; font-size:1.2rem; font-variant-numeric:tabular-nums; min-width:70px; justify-content:flex-end }
.chclock .ico { width:20px; height:20px }
.chclock.hurry { color:var(--bad); animation:pulse .5s ease-in-out infinite }
.chboardcard { gap:8px; padding:14px }
.chboard { display:flex; flex-direction:column; gap:6px }
.chrow { display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:14px; background:var(--soft); transition:transform .3s }
.chrow.me { box-shadow:inset 0 0 0 2px var(--accent) }
.chrow .rk { font-family:var(--display); width:20px; text-align:center }
.chrow .ava { width:34px; height:34px; flex:none }
.chrow .nm { display:block; font-weight:800; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.chrow .bar { display:block; height:6px; margin-top:4px }
.chrow .sc { font-family:var(--display); font-weight:800; font-size:1.15rem; font-variant-numeric:tabular-nums }
.qcard .good { color:var(--good); font-weight:800 }
.podium { display:flex; align-items:flex-end; justify-content:center; gap:10px; width:100%; margin:8px 0 }
.pod { flex:1; max-width:130px; display:flex; flex-direction:column; align-items:center; gap:4px; position:relative; animation:ansIn .6s cubic-bezier(.3,1.5,.5,1) backwards }
.pod .ava { width:62px; height:62px } .pod.p1 .ava { width:80px; height:80px }
.pod strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pod .step { width:100%; border-radius:14px 14px 6px 6px; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.6rem; color:#fff; background:var(--c2); height:56px }
.pod.p1 .step { background:var(--star); color:var(--star-ink); height:92px } .pod.p3 .step { background:var(--c1); height:40px }
.pod.p1 { animation-delay:.25s } .pod.p3 { animation-delay:.1s }
.pod .crown { position:absolute; top:-34px; width:40px; animation:bounce 1s .8s } .pod .crown .trophy { width:40px; height:40px }
.codein::placeholder { font-family:var(--body,inherit); font-size:1rem; letter-spacing:0 }

/* ---------- friends and invites ---------- */
.fpick { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:10px }
.fp { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; border:0; background:var(--soft); border-radius:16px; padding:10px 6px; font-weight:800; color:var(--ink); box-shadow:0 var(--depth) 0 var(--line); transition:transform .15s, box-shadow .15s }
.fp .ava { width:54px; height:54px }
.fp span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fp:hover { transform:translateY(-2px) }
.fp.on { background:color-mix(in srgb,var(--accent) 18%,var(--surface)); box-shadow:0 var(--depth) 0 var(--accent), inset 0 0 0 2px var(--accent) }
.fp .tick { position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; animation:bounce .4s }
.fp .tick .ico { width:15px; height:15px }
.fcode { display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; background:var(--soft); border-radius:16px; padding:12px }
.fcode strong { font-family:var(--display); font-size:2rem; letter-spacing:.18em; color:var(--accent); line-height:1.1 }
.pair { display:inline-flex; flex:none } .pair .ava { width:40px; height:40px } .pair .ava + .ava { margin-left:-12px }
#invite .invite { position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(440px, calc(100% - 32px)); z-index:60; background:var(--surface); color:var(--ink); border-radius:calc(var(--r) + 4px); padding:16px; display:flex; flex-direction:column; gap:12px; box-shadow:0 0 0 3px var(--accent), 0 20px 50px rgba(0,0,0,.35); animation:inviteIn .5s cubic-bezier(.3,1.5,.5,1) }
#invite .invite .ava { width:56px; height:56px; flex:none; animation:wiggle 1.2s ease-in-out 2 }
#invite .invite strong { font-size:1.1rem }
#invite .invite .ico { width:16px; height:16px; vertical-align:-3px }
@keyframes inviteIn { from { transform:translate(-50%, 140%) } to { transform:translate(-50%, 0) } }
.fwait .ava { width:40px; height:40px; flex:none }

/* =====================================================================
   2026 redesign: logo header, bottom tabs, quest, topics, question,
   answer sheet and results. Later rules here win over the older ones.
   ===================================================================== */
h1,h2,h3,.question { font-weight:var(--dw) }
.blob { opacity:.4 } .shape { opacity:.25 }
[data-theme="galaxy"] .shape,[data-theme="studio"] .blob { opacity:.2 }
.card { box-shadow:0 var(--depth) 0 var(--edge); border:0 }
[data-theme="galaxy"] .card,[data-theme="arcade"] .card,[data-theme="studio"] .card { border:1px solid var(--line); background:var(--surface) }
.btn.cta { --c:var(--cta); --t:var(--cta-ink); box-shadow:0 5px 0 var(--cta-edge); font-family:var(--display); font-weight:var(--dw) }
.btn.cta:active { box-shadow:0 1px 0 var(--cta-edge) }
.btn.primary { --c:var(--primary); --t:var(--primary-ink); box-shadow:0 5px 0 var(--primary-edge) }
.btn.outline { --c:transparent; --t:var(--deep-ink); border:2px solid var(--deep-line); box-shadow:none }
.btn.big { min-height:58px; border-radius:20px; font-size:1.25rem }
[data-theme="arcade"] .btn.big { border-radius:10px; font-size:1rem }
.wrap.tabbed { padding-bottom:calc(112px + env(safe-area-inset-bottom,0px)) }
.wrap.flush { padding-bottom:0; min-height:100dvh }

/* header */
.top { flex-wrap:nowrap }
.logo img.wordmark { height:44px; width:auto; display:block; transition:transform .25s cubic-bezier(.3,1.6,.5,1) }
.logo:hover img.wordmark { transform:rotate(-2deg) scale(1.03) }
.tools { gap:6px }
.hpill { display:inline-flex; align-items:center; gap:5px; background:var(--surface); color:var(--ink); border-radius:999px; padding:6px 12px 6px 9px; font-weight:800; font-size:.98rem; box-shadow:0 3px 0 var(--edge); white-space:nowrap; font-variant-numeric:tabular-nums }
.hpill .st { width:20px; height:20px } .hpill .st path { fill:#FFD21F; stroke:#E09B00 }
.hpill.flame .ico { color:var(--flame); fill:var(--flame); stroke:none }
.hpill.flame.off .ico { color:var(--muted); fill:var(--muted); opacity:.5 }
[data-theme="galaxy"] .hpill,[data-theme="arcade"] .hpill,[data-theme="studio"] .hpill { box-shadow:0 0 0 1px var(--line) }
.chip-me { padding:3px; box-shadow:0 3px 0 var(--edge) } .chip-me span { display:none }
@media (max-width:420px) { .logo img.wordmark { height:34px } .hpill { padding:5px 9px 5px 7px; font-size:.9rem } .hpill .st { width:17px; height:17px } .chip-me .ava { width:34px; height:34px } }
@media (max-width:350px) { .hpill.flame { display:none } }

/* bottom tabs */
.tabbar { position:fixed; z-index:40; left:50%; transform:translateX(-50%); bottom:calc(12px + env(safe-area-inset-bottom,0px)); width:min(560px, calc(100% - 24px)); display:flex; gap:4px; padding:6px; background:var(--surface); border-radius:calc(var(--r) + 4px); box-shadow:0 4px 0 var(--edge),0 12px 30px var(--shadow) }
[data-theme="galaxy"] .tabbar,[data-theme="arcade"] .tabbar,[data-theme="studio"] .tabbar { border:1px solid var(--line) }
.tabbar button { flex:1; min-width:0; border:0; background:none; border-radius:var(--r); padding:8px 2px 7px; display:flex; flex-direction:column; align-items:center; gap:2px; font-weight:800; font-size:.74rem; color:var(--muted); transition:background .2s,color .2s }
.tabbar button .ico { width:22px; height:22px }
.tabbar button[aria-current="page"] { background:var(--primary); color:var(--primary-ink) }
[data-theme="arcade"] .tabbar button { font-size:.68rem }

/* home */
.greet { display:flex; align-items:center; gap:12px }
.greet .ava { width:58px; height:58px; box-shadow:0 3px 0 var(--edge) }
.greet h1 { font-size:1.75rem; line-height:1.05 }
.greet small { display:block; color:var(--muted); font-weight:800; font-size:.92rem; margin-top:2px }
.quest { display:flex; align-items:center; gap:14px; background:var(--surface); border-radius:var(--r); padding:14px 16px; box-shadow:0 var(--depth) 0 var(--edge) }
[data-theme="galaxy"] .quest,[data-theme="arcade"] .quest,[data-theme="studio"] .quest { border:1px solid var(--line) }
.quest .k { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--good) }
.quest strong { display:block; font-family:var(--display); font-weight:var(--dw); font-size:1.15rem; line-height:1.1 }
.quest small { display:block; color:var(--muted); font-weight:700; font-size:.86rem }
.quest .qi { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb,var(--c1) 16%,var(--surface)); color:var(--c1); flex:none }
.quest.done .qi { background:var(--good-soft); color:var(--good) }
.ring { position:relative; width:64px; height:64px; flex:none; display:grid; place-items:center }
.ring svg { position:absolute; inset:0; transform:rotate(-90deg) }
.ring circle { fill:none; stroke-width:7 } .ring .rt { stroke:var(--track) } .ring .rp { stroke:var(--c); stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.3,1.2,.5,1) }
.ring b { position:relative; font-family:var(--display); font-weight:var(--dw); font-size:.95rem; line-height:1; text-align:center }
.ring b small { display:block; font-family:var(--body); font-size:.62rem; color:var(--muted); font-weight:800 }
.ring .ico { position:relative; width:22px; height:22px; color:var(--c) }
.playcard { background:var(--primary); color:var(--primary-ink); border-radius:calc(var(--r) + 6px); padding:22px 20px; min-height:178px; align-items:flex-start; flex-direction:column; gap:4px; box-shadow:0 6px 0 var(--primary-edge) }
.playcard::after { display:none }
.playcard h2 { font-size:clamp(1.8rem,7vw,2.3rem); line-height:1; max-width:62% }
.playcard small { max-width:58%; font-size:.95rem }
.playcard .bigstar { position:absolute; right:10px; bottom:8px; width:clamp(110px,30vw,150px); height:auto; pointer-events:none; animation:bob 3.2s ease-in-out infinite }
.playcard .go-pill { margin-top:auto; display:inline-flex; align-items:center; gap:6px; background:var(--cta); color:var(--cta-ink); border-radius:999px; padding:9px 18px; font-weight:800; font-family:var(--display); font-size:1.08rem; box-shadow:0 4px 0 var(--cta-edge); position:relative }
.playcard .go-pill .ico { width:18px; height:18px }
.playcard > * { position:relative }
.playcard .bigstar { position:absolute }
.braverow { display:flex; align-items:center; gap:12px; background:var(--deep); color:var(--deep-ink); border-radius:var(--r); padding:12px 14px; box-shadow:0 4px 0 color-mix(in srgb,var(--deep) 60%,#000) }
.braverow .bi { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:var(--deep-soft); color:var(--cta); flex:none }
.braverow strong { display:block; font-family:var(--display); font-weight:var(--dw); font-size:1.1rem; line-height:1.1 }
.braverow small { color:var(--deep-muted); font-weight:700; font-size:.85rem }
.braverow .toggle { background:var(--deep-soft) } .braverow .toggle[aria-checked="true"] { background:var(--cta) }
.shead { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:-6px }
.shead h3 { font-size:1.3rem }
.keep { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.kcard { --c:var(--c2); border:0; background:var(--surface); border-radius:var(--r); padding:14px 8px 12px; display:flex; flex-direction:column; align-items:center; gap:8px; box-shadow:0 var(--depth) 0 var(--edge); font-weight:800; font-size:.9rem; line-height:1.1; text-align:center; transition:transform .15s cubic-bezier(.3,1.6,.5,1) }
.kcard:hover { transform:translateY(-3px) }
.kcard small { display:block; color:var(--muted); font-size:.74rem; font-weight:700; margin-top:2px }
[data-theme="galaxy"] .kcard,[data-theme="arcade"] .kcard,[data-theme="studio"] .kcard,[data-theme="galaxy"] .tcard,[data-theme="arcade"] .tcard,[data-theme="studio"] .tcard { border:1px solid var(--line) }

/* topics */
.ptitle { font-size:clamp(1.8rem,7vw,2.2rem); line-height:1 }
.search { display:flex; align-items:center; gap:10px; background:var(--surface); border-radius:16px; padding:0 14px; height:50px; box-shadow:0 3px 0 var(--edge) }
[data-theme="galaxy"] .search,[data-theme="arcade"] .search,[data-theme="studio"] .search { border:1px solid var(--line) }
.search .ico { color:var(--muted) }
.search input { flex:1; border:0; background:transparent; padding:0; height:100%; font-weight:700; font-size:1rem; border-radius:0 }
.search input:focus { outline:none }
.search:focus-within { box-shadow:0 0 0 3px var(--c2) }
.chips { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 6px; margin:-4px -2px -8px }
.chips::-webkit-scrollbar { display:none }
.chips button { flex:none; border:0; border-radius:999px; padding:9px 16px; font-weight:800; font-size:.9rem; background:var(--surface); color:var(--ink); box-shadow:0 3px 0 var(--edge); white-space:nowrap }
.chips button[aria-pressed="true"] { background:var(--primary); color:var(--primary-ink); box-shadow:0 3px 0 var(--primary-edge) }
.tgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
@media (min-width:620px) { .tgrid { grid-template-columns:repeat(3,minmax(0,1fr)) } }
.surprise { grid-column:1/-1; display:flex; align-items:center; gap:12px; border:0; text-align:left; background:var(--deep); color:var(--deep-ink); border-radius:var(--r); padding:14px 16px; box-shadow:0 5px 0 color-mix(in srgb,var(--deep) 60%,#000) }
.surprise .si { width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:var(--cta); color:var(--cta-ink); flex:none }
.surprise .si .ico { width:28px; height:28px }
.surprise strong { display:block; font-family:var(--display); font-weight:var(--dw); font-size:1.25rem; line-height:1.05 }
.surprise small { color:var(--deep-muted); font-weight:700; font-size:.86rem }
.tcard { --c:var(--c2); border:0; text-align:left; background:var(--surface); color:var(--ink); border-radius:var(--r); padding:14px; display:flex; flex-direction:column; gap:10px; box-shadow:0 5px 0 var(--edge); transition:transform .15s cubic-bezier(.3,1.6,.5,1); animation:popIn .4s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay:calc(var(--i,0) * 30ms) }
.tcard:hover { transform:translateY(-3px) }
.tcard:active { transform:translateY(2px) }
.tcard .tt { display:flex; align-items:center; justify-content:space-between; gap:6px }
.tcard .ti { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--c); color:#fff; flex:none }
[data-theme="galaxy"] .tcard .ti,[data-theme="arcade"] .tcard .ti { color:#0A0A12 }
.tcard .ti .ico { width:25px; height:25px }
.tcard .tn2 { font-family:var(--display); font-weight:var(--dw); font-size:1.1rem; line-height:1.05 }
.tcard .cnt { font-size:.76rem; font-weight:800; color:var(--muted); text-align:right; line-height:1.15 }
.pbar { display:block; height:8px; border-radius:999px; background:color-mix(in srgb,var(--c) 18%,var(--surface)); overflow:hidden }
.pbar i { display:block; height:100%; border-radius:999px; background:var(--c); min-width:0 }
.empty { text-align:center; padding:26px 10px; color:var(--muted); font-weight:700 }

/* question */
.qtop { gap:10px }
.qtop .iconbtn { border-radius:14px; color:var(--ink); box-shadow:0 3px 0 var(--edge) }
.segs { flex:1; display:grid; grid-template-columns:repeat(var(--n,10),minmax(0,1fr)); gap:4px }
.segs span { height:10px; border-radius:999px; background:var(--track); transition:background .3s }
.segs .ok { background:var(--good) } .segs .no { background:var(--bad) } .segs .cur { background:var(--primary) }
.streakpill { display:inline-flex; align-items:center; gap:4px; background:var(--surface); color:var(--flame); border-radius:999px; padding:6px 11px 6px 8px; font-weight:800; font-size:.95rem; box-shadow:0 3px 0 var(--edge); font-variant-numeric:tabular-nums }
.streakpill .ico { fill:currentColor; stroke:none; width:18px; height:18px }
.streakpill.hot { background:var(--flame); color:#fff; box-shadow:0 3px 0 color-mix(in srgb,var(--flame) 60%,#000) }
.streakpill.hot .ico { animation:flick .6s ease-in-out infinite alternate }
.qcard { border-radius:calc(var(--r) + 6px); padding:18px 20px 22px; gap:12px; box-shadow:0 6px 0 var(--edge) }
.qmeta { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.qmeta .qc { font-size:.84rem; font-weight:800; color:var(--muted) }
.qmeta .say-btn { margin-left:auto; width:46px; height:46px; border-radius:14px; border:0; background:var(--primary-soft); color:var(--ink); display:grid; place-items:center; flex:none }
.qmeta .say-btn .ico { width:24px; height:24px }
.qmeta .say-btn.on { background:var(--primary); color:var(--primary-ink) }
.badge { background:var(--primary-soft); color:var(--ink) }
.question { font-size:clamp(1.5rem,6vw,2.05rem); line-height:1.15 }
.answers { grid-template-columns:repeat(2,minmax(0,1fr)) }
.answers.long { grid-template-columns:1fr }
@media (max-width:540px) { .answers { grid-template-columns:repeat(2,minmax(0,1fr)) } .answers.long { grid-template-columns:1fr } }
.answers .ans { --c:var(--c1); background:var(--surface); color:var(--ink); border:3px solid var(--c); border-radius:var(--r); box-shadow:0 6px 0 color-mix(in srgb,var(--c) 40%,var(--surface)); padding:12px 14px; min-height:120px; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:10px; font-family:var(--display); font-weight:var(--dw); font-size:clamp(1.15rem,4.6vw,1.4rem); line-height:1.12; overflow-wrap:anywhere }
.answers.long .ans { min-height:68px; flex-direction:row; align-items:center; font-size:clamp(1.05rem,4vw,1.2rem) }
.answers .ans:nth-child(2) { --c:var(--c2) } .answers .ans:nth-child(3) { --c:var(--c3) } .answers .ans:nth-child(4) { --c:var(--c4) }
.answers .ans b { width:38px; height:38px; border-radius:12px; background:var(--c); color:#fff; font-size:1.15rem; flex:none }
.answers .ans:nth-child(3) b { color:#102A5E }
[data-theme="galaxy"] .answers .ans b,[data-theme="arcade"] .answers .ans b { color:#0A0A12 }
.answers .ans:not(:disabled):active { transform:translateY(4px); box-shadow:0 2px 0 color-mix(in srgb,var(--c) 40%,var(--surface)) }
.answers .ans.right { background:var(--good); color:#fff; border-color:var(--good-edge); box-shadow:0 6px 0 var(--good-edge); opacity:1 }
.answers .ans.right b { background:#fff; color:var(--good) }
.answers .ans.wrong { background:var(--bad-soft); border-color:var(--bad); box-shadow:0 6px 0 color-mix(in srgb,var(--bad) 45%,var(--surface)) }
.answers .ans.wrong b { background:var(--bad); color:#fff }
.answers .ans.dim { opacity:.5; --c:var(--line) }
.answers .ans.dim b { color:var(--muted) }
.buddy { display:flex; align-items:flex-end; gap:12px; margin-top:auto; padding-bottom:16px }
.buddy img { width:84px; height:auto; flex:none; animation:bob 3s ease-in-out infinite }
.buddy .bub { background:var(--surface); border-radius:20px 20px 20px 6px; padding:12px 16px; box-shadow:0 4px 0 var(--edge); font-weight:800; margin-bottom:24px }
[data-theme="galaxy"] .buddy .bub,[data-theme="arcade"] .buddy .bub,[data-theme="studio"] .buddy .bub { border:1px solid var(--line) }
.view.qv { flex:1 }
.fb { position:relative; margin:auto calc(-1 * max(16px,env(safe-area-inset-left,0px))) 0; background:var(--deep); color:var(--deep-ink); border-radius:32px 32px 0 0; padding:22px 20px calc(24px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:14px; animation:fbIn .45s cubic-bezier(.3,1.3,.5,1) }
@media (min-width:812px) { .fb { margin-left:0; margin-right:0; border-radius:32px; margin-bottom:18px } }
@keyframes fbIn { from { transform:translateY(60%); opacity:0 } }
.fb .fbstar { position:absolute; right:30px; top:-62px; width:100px; height:auto; transform:rotate(12deg); animation:trophyIn .7s cubic-bezier(.3,1.6,.5,1) }
.fb.no .fbstar { transform:rotate(-8deg); filter:saturate(.85) }
.fb .fbh { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-right:100px }
.fb .say { font-family:var(--display); font-weight:var(--dw); font-size:2rem; line-height:1; color:var(--cta) }
[data-theme="arcade"] .fb .say { font-size:1.4rem }
.fb.no .say { color:var(--deep-hi) }
.fb .plus { display:inline-flex; align-items:center; gap:4px; background:var(--cta); color:var(--cta-ink); border-radius:999px; padding:5px 12px; font-weight:800; font-size:.95rem }
.fb .plus .st { width:16px; height:16px } .fb .plus .st path { fill:currentColor; stroke:none }
.fb .ansline { font-weight:700; color:var(--deep-muted) } .fb .ansline strong { color:var(--deep-ink) }
.dyk { background:var(--deep-soft); border-radius:20px; padding:14px 16px; display:flex; gap:10px; align-items:flex-start }
.dyk .k { font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--deep-hi) }
.dyk p { margin-top:4px; font-weight:700; line-height:1.45 }
.dyk .iconbtn { background:color-mix(in srgb,var(--deep-ink) 12%,transparent); color:var(--deep-ink); box-shadow:none; width:42px; height:42px; flex:none }

/* results */
.rs { position:relative; overflow:hidden; background:var(--deep); color:var(--deep-ink); border-radius:calc(var(--r) + 8px); padding:26px 20px 22px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; box-shadow:0 6px 0 color-mix(in srgb,var(--deep) 60%,#000) }
.rs .cf { position:absolute; border-radius:4px; animation:float 6s ease-in-out infinite; pointer-events:none }
.rs .rstar { width:140px; height:auto; position:relative; animation:trophyIn .8s cubic-bezier(.3,1.6,.5,1) }
.rs .k { font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--deep-hi) }
.rs h1 { font-size:clamp(2rem,9vw,2.6rem); line-height:1; margin-top:2px }
.rs .sub { color:var(--deep-muted); font-weight:700; margin-top:6px }
.earned { display:inline-flex; align-items:center; gap:10px; background:var(--cta); color:var(--cta-ink); border-radius:22px; padding:10px 22px; box-shadow:0 6px 0 var(--cta-edge) }
.earned .st { width:34px; height:34px } .earned .st path { fill:currentColor; stroke:none }
.earned .n { font-family:var(--display); font-weight:var(--dw); font-size:2.5rem; line-height:1; font-variant-numeric:tabular-nums }
.earned .l { font-weight:800; font-size:.95rem; text-align:left; line-height:1.1 }
.rstats { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.rstats div { background:var(--deep-soft); border-radius:18px; padding:12px 6px }
.rstats .v { font-family:var(--display); font-weight:var(--dw); font-size:1.6rem; line-height:1 }
.rstats .l { font-size:.76rem; font-weight:800; color:var(--deep-muted); margin-top:4px }
.rstats .v.fl { color:#FFB37A } .rstats .v.gd { color:#6FE0B4 }
.lvl { width:100%; background:var(--deep-soft); border-radius:18px; padding:14px 16px; text-align:left }
.lvl .row { justify-content:space-between; font-weight:800; font-size:.9rem; flex-wrap:nowrap }
.lvl .row span:last-child { color:var(--deep-muted); white-space:nowrap }
.lvl .lb { margin-top:8px; height:12px; border-radius:999px; background:color-mix(in srgb,var(--deep) 70%,#000); overflow:hidden }
.lvl .lb i { display:block; height:100%; border-radius:999px; background:var(--deep-hi); transition:width 1s cubic-bezier(.3,1.2,.5,1) }
.rs .acts { width:100%; display:flex; flex-direction:column; gap:12px; margin-top:4px }

/* level card on Me */
.lvl.light { background:var(--soft); color:var(--ink) }
.lvl.light .row span:last-child { color:var(--muted) } .lvl.light .lb { background:var(--track) } .lvl.light .lb i { background:var(--c2) }

/* splash & heroes use the logo star */
img.m { height:auto; object-fit:contain }
.hero img.m { width:92px }
.splash img.m { width:120px }
.splash .wm { width:min(260px,70vw); height:auto; display:block; margin:0 auto 14px }
.themecard .tn { font-family:var(--display); font-weight:var(--dw) }
.themecard .tn small { font-family:var(--body) }

/* avatar shop */
.opt { position:relative }
.opt.lockd > .ava, .opt.lockd > span { filter:saturate(.55); opacity:.7 }
.opt .lk { position:absolute; right:-4px; bottom:-6px; display:inline-flex; align-items:center; gap:2px; background:var(--primary); color:var(--primary-ink); border-radius:999px; padding:2px 6px 2px 4px; font-style:normal; font-weight:800; font-size:.68rem; line-height:1.2; box-shadow:0 2px 0 var(--primary-edge) }
.opt .lk svg, .unlock .lkb svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round }
.opt.lockd[aria-pressed="true"] { border-color:var(--cta) }
.unlock { display:flex; align-items:center; gap:10px; background:var(--soft); border:2px dashed var(--cta-edge); border-radius:16px; padding:10px 12px; animation:ansIn .4s cubic-bezier(.3,1.5,.5,1) }
.unlock .lkb { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--primary); color:var(--primary-ink); flex:none }
.unlock .lkb svg { width:16px; height:16px }
.unlock strong { display:block; line-height:1.15 } .unlock small { display:block; color:var(--muted); font-weight:700; font-size:.82rem }
.unlock .btn .st { width:16px; height:16px } .unlock .btn .st path { fill:currentColor; stroke:none }
.shophead { display:flex; align-items:center; gap:10px }
.shophead strong { display:block; font-family:var(--display); font-weight:var(--dw); font-size:1.2rem; line-height:1.1 }
.shophead small { color:var(--muted); font-weight:700; font-size:.86rem }
.shopcard { display:flex; align-items:center; gap:14px; border:0; text-align:left; color:var(--ink); background:var(--surface); border-radius:var(--r); padding:12px 16px 12px 12px; box-shadow:0 var(--depth) 0 var(--edge); transition:transform .15s }
.shopcard:hover { transform:translateY(-2px) }
[data-theme="galaxy"] .shopcard,[data-theme="arcade"] .shopcard,[data-theme="studio"] .shopcard { border:1px solid var(--line) }
.shopcard .ava { width:64px; height:64px; animation:bob 3s ease-in-out infinite }
.shopcard .k { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--c1) }
.shopcard strong { display:block; font-family:var(--display); font-weight:var(--dw); font-size:1.1rem; line-height:1.1 }
.shopcard small { display:block; color:var(--muted); font-weight:700; font-size:.84rem; margin-bottom:6px }
.shopcard > .ico { color:var(--muted) }
.unlocks { position:sticky; bottom:calc(100px + env(safe-area-inset-bottom,0px)); z-index:5; display:flex; flex-direction:column; gap:8px }
.unlocks .unlock { background:var(--surface); box-shadow:0 8px 24px var(--shadow) }
.wrap.tabbed ~ .toast { bottom:calc(104px + env(safe-area-inset-bottom,0px)) }

/* heroes (layered painted art from img/heroes/) */
.hero-p { position:relative; overflow:hidden; border-radius:50%; display:block; flex:none }
.hl { position:absolute; aspect-ratio:2/3 }
.hl img { position:absolute; display:block; user-select:none; -webkit-user-drag:none }
.hl .hl-body { left:0; top:0; width:100%; height:100% }
.hl .hl-gear { transform:translate(-50%,-50%); height:auto }
.hl-magic { position:absolute; transform:translate(-50%,-50%); aspect-ratio:1; animation:hfloat 3s ease-in-out infinite }
.hl-magic img { position:relative; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 10px rgba(255,220,120,.55)) }
.hl-magic i { position:absolute; inset:-25%; border-radius:50%; background:radial-gradient(circle,rgba(255,236,150,.55),rgba(140,110,255,.18) 50%,transparent 70%); animation:pulse 2.4s ease-in-out infinite }
@keyframes hfloat { 0%,100% { transform:translate(-50%,-50%) } 50% { transform:translate(-50%,-58%) } }
.hero-stage { position:relative; width:100%; max-width:340px; aspect-ratio:3/4; margin:0 auto; border-radius:calc(var(--r) + 6px); overflow:hidden; background:radial-gradient(120% 80% at 50% 20%,#3A3FB0 0%,#1B2156 55%,#0E1236 100%) }
.hero-stage .hs-glow { position:absolute; left:10%; right:10%; top:8%; bottom:16%; border-radius:50%; background:radial-gradient(circle,rgba(125,170,255,.45),transparent 65%) }
.hero-stage .hs-plat { position:absolute; left:18%; right:18%; bottom:6%; height:9%; border-radius:50%; background:radial-gradient(ellipse at 50% 40%,#7DB8FF,#3B5BE0 55%,#1B2156 100%); box-shadow:0 0 30px rgba(125,185,255,.8),inset 0 -4px 0 rgba(0,0,0,.25) }
.hero-stage > .hl { left:50%; bottom:9%; height:88%; transform:translateX(-50%) }
.hero-stage > .hl.pop { animation:avaSpin .5s cubic-bezier(.3,1.4,.5,1) }
.hbuild { display:grid; grid-template-columns:minmax(0,320px) 1fr; gap:18px; align-items:start }
@media (max-width:640px) { .hbuild { grid-template-columns:1fr } .hero-stage { max-width:280px } }
.hopts { grid-template-columns:repeat(auto-fill,minmax(84px,1fr)) }
.htile { aspect-ratio:auto; padding:8px 4px 6px; display:flex; flex-direction:column; align-items:center; gap:4px }
.htile .ava, .htile .hsw, .htile .hi, .htile .hnone { width:60px; height:60px }
.htile .hi { object-fit:contain }
.htile .hsw { border-radius:50%; box-shadow:inset 0 0 0 3px rgba(255,255,255,.6),0 2px 0 var(--edge) }
.htile .hnone { display:grid; place-items:center; border-radius:50%; background:var(--track); color:var(--muted) }
.htile .hn { font-size:.72rem; font-weight:800; line-height:1.1; text-align:center }
.htile.lockd > .hi, .htile.lockd > .hsw { filter:saturate(.6); opacity:.75 }
.hl-head { position:absolute; inset:0; display:block }
.hl-head > img, .hl-head > .hl-fx { position:absolute; inset:0; width:100%; height:100%; object-fit:contain }
.hl-headbox { position:absolute; aspect-ratio:1; transform:translateX(-50%) }
.hero-p .hp-in { position:absolute; aspect-ratio:1 }
.hlabel { margin-top:4px }

/* Daily 10 */
.playcard .k10 { font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.85 }
.playcard .d10 { display:flex; gap:5px; margin:8px 0 2px; max-width:58% }
.playcard .d10 i { flex:1; height:9px; border-radius:99px; background:color-mix(in srgb,var(--primary-ink) 22%,transparent) }
.playcard .d10 i.on { background:var(--cta) }
.playcard .tl { display:flex; align-items:center; gap:5px; font-size:.82rem; opacity:.85; margin-top:4px }
.playcard .tl .ico { width:15px; height:15px }
.playcard.free { background:var(--deep); box-shadow:0 6px 0 color-mix(in srgb,var(--deep) 60%,#000) }
.quest.done .k { color:var(--good) }
.rs form.card { width:100% }


/* =====================================================================
   Readability and accessibility pass
   - learning content (questions, answers, explanations) always uses the body font, sentence case
   - display fonts are kept for short headings only
   - answers look neutral until one is chosen; results use icons + words, not colour alone
   ===================================================================== */
:root { --qsize:clamp(1.375rem, 1.1rem + 1.5vw, 1.75rem); --child-text:1.125rem }
#app:not(.pv) .view { font-size:var(--child-text) }
.question { font-family:var(--body); font-weight:800; font-size:var(--qsize); line-height:1.3; letter-spacing:0; text-transform:none; text-wrap:pretty }
.answers .ans { --c:var(--line); font-family:var(--body); font-weight:700; font-size:var(--child-text); line-height:1.3; text-transform:none; letter-spacing:0;
  border:3px solid var(--line); box-shadow:0 5px 0 var(--edge); min-height:96px }
.answers .ans:nth-child(n) { --c:var(--line) }
.answers.long .ans { min-height:64px; font-size:var(--child-text) }
.answers .ans b, .answers .ans:nth-child(3) b, [data-theme="galaxy"] .answers .ans b, [data-theme="arcade"] .answers .ans b { background:var(--primary-soft); color:var(--ink); font-family:var(--body); font-weight:800 }
[data-theme="galaxy"] .answers .ans b, [data-theme="arcade"] .answers .ans b { background:var(--soft); color:var(--ink); box-shadow:inset 0 0 0 2px var(--line) }
.answers .ans:not(:disabled):hover { border-color:var(--primary); transform:translateY(-2px) }
.answers .ans:not(:disabled):active { box-shadow:0 1px 0 var(--edge) }
.answers .ans .tag { display:inline-flex; align-items:center; gap:4px; font-style:normal; font-size:.82rem; font-weight:800; border-radius:999px; padding:2px 9px; margin-top:4px; line-height:1.3 }
.answers .ans.right .tag { background:#fff; color:var(--good-edge) }
.answers .ans.wrong { color:var(--ink) }
.answers .ans.wrong .tag { background:var(--bad); color:#fff }
.answers .ans .at { display:flex; flex-direction:column; align-items:flex-start; min-width:0 }
.answers .ans.dim { opacity:.6 }
.dyk p, .why p { font-size:var(--child-text); font-weight:600; line-height:1.5 }
.fb .ansline { font-size:1.05rem }
/* readable secondary labels */
.label, .quest .k, .rs .k, .dyk .k, .shopcard .k, .playcard .k10 { font-size:.8rem; letter-spacing:.06em }
.small, .note { font-size:.9rem }
.tcard .cnt, .kcard small, .tile small, .tabbar button { font-size:.8rem }
.status { font-size:.78rem; letter-spacing:.03em }
/* no textures behind learning content */
html[data-view="quiz"] .sky, html[data-view="chplay"] .sky { opacity:.35 }
html[data-view="quiz"] .grid, html[data-view="chplay"] .grid { display:none }
[data-theme="arcade"] .grid { opacity:.18 }
/* focus is always visible, including on dark themes and coloured cards */
:focus-visible { outline:3px solid var(--c2); outline-offset:3px }
.playcard:focus-visible, .surprise:focus-visible, .braverow :focus-visible, .rs :focus-visible, .fb :focus-visible { outline-color:var(--cta) }
/* selected options are marked with a tick, not only a coloured border */
.opt[aria-checked="true"], .themecard[aria-checked="true"], .pf[aria-checked="true"], .chips button[aria-checked="true"] { position:relative }
.opt[aria-checked="true"]::after, .themecard[aria-checked="true"]::after, .chmode[aria-checked="true"]::after { content:"✓"; position:absolute; top:-6px; right:-6px; width:24px; height:24px; border-radius:50%; background:var(--primary); color:var(--primary-ink); font:800 14px/24px var(--body); text-align:center; box-shadow:0 0 0 2px var(--surface) }
.opt[aria-checked="true"] { border-color:var(--primary); background:color-mix(in srgb,var(--primary) 12%,var(--surface)) }
.themecard[aria-checked="true"] { border-color:var(--primary) }
/* avatar categories wrap instead of scrolling out of sight */
.mtabs { flex-wrap:wrap; overflow:visible; padding-bottom:0 }
.mtabs button { min-height:44px }
/* screen-reader-only text */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
/* touch targets */
.iconbtn { min-width:48px; min-height:48px }
.chip-me { min-height:44px }
.earnbox { background:var(--surface); border-radius:var(--r); padding:14px 16px; box-shadow:0 var(--depth) 0 var(--edge); display:flex; flex-direction:column; gap:8px }
[data-theme="galaxy"] .earnbox,[data-theme="arcade"] .earnbox,[data-theme="studio"] .earnbox { border:1px solid var(--line) }
.earnbox .eb-row { display:flex; justify-content:space-between; align-items:center; gap:10px }
.earnbox .eb-k { font-weight:800 }
.earnbox .eb-row strong { display:inline-flex; align-items:center; gap:5px; font-size:1.3rem; font-variant-numeric:tabular-nums }
.earnbox .eb-row .st { width:22px; height:22px } .earnbox .eb-row .st path { fill:#FFD21F; stroke:#E09B00 }
.earnbox .eb-rates { margin:0; padding-left:18px; color:var(--muted); font-size:.95rem; display:flex; flex-direction:column; gap:4px }
.earnbox .eb-rates strong { color:var(--ink) }
.tcard .tg { font-size:.82rem; font-weight:700; color:var(--muted) }
.streakpill .ico { fill:none; stroke:currentColor }
.streakpill .sp-l { font-size:.78rem }
@media (max-width:360px) { .streakpill .sp-l { display:none } }

/* ---------- rewards (child) ---------- */
.gh { font-size:1.25rem; margin:6px 0 -6px }
.gift .cost { display:inline-flex; align-items:center; gap:4px; font-weight:800; background:var(--soft); border-radius:999px; padding:4px 10px 4px 7px; font-variant-numeric:tabular-nums }
.gift .cost .st { width:18px; height:18px } .gift .cost .st path { fill:#FFD21F; stroke:#E09B00 }
.gift .rname { overflow-wrap:anywhere }
.gift .btn { min-height:48px }
.gift.confirm { box-shadow:0 0 0 3px var(--primary),0 var(--depth) 0 var(--edge) }
.ask { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:0 }
.ask div { background:var(--soft); border-radius:12px; padding:8px; text-align:center }
.ask dt { font-size:.78rem; font-weight:800; color:var(--muted) }
.ask dd { margin:2px 0 0; font-weight:800; font-size:1.05rem; display:flex; align-items:center; justify-content:center; gap:3px; font-variant-numeric:tabular-nums }
.ask .st { width:16px; height:16px } .ask .st path { fill:#FFD21F; stroke:#E09B00 }
.goalb { --c:var(--c1) }
.gi.sm { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--soft); color:var(--c2); flex:none }
.status { display:inline-flex; align-items:center; gap:4px }
/* ---------- parent area: calmer, practical ---------- */
#app.pv .card { gap:12px }
.ph { font-size:1.4rem }
.shortcuts { gap:8px }
.kidcards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px }
.kidcard { background:var(--soft); border:1px solid var(--line); border-radius:var(--r); padding:14px; display:flex; flex-direction:column; gap:10px; min-width:0 }
.kc-top { display:flex; align-items:center; gap:10px } .kc-top .ava { width:52px; height:52px } .kc-top h3 { font-size:1.15rem }
.kc-facts { margin:0 } .kc-facts dt { font-size:.78rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.05em } .kc-facts dd { margin:2px 0 0 }
.kc-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap } .kc-row label { font-weight:800 } .kc-row select { width:auto; min-height:44px }
.kc-adj { display:flex; flex-direction:column; gap:6px; background:var(--surface); border-radius:12px; padding:10px }
.kc-adj label { font-weight:800 }
.rwrow { display:grid; grid-template-columns:minmax(0,1fr) 120px auto; gap:8px 10px; align-items:end; padding:12px; border-radius:16px; background:var(--soft) }
.rwrow .field { min-width:0 } .rwrow input { min-height:44px }
.rwacts { display:flex; gap:6px; flex-wrap:wrap }
.rwmsg { grid-column:1/-1; margin:0; font-size:.9rem; font-weight:700; color:var(--muted); min-height:0; display:flex; align-items:center; gap:4px }
.rwmsg:empty { display:none }
.rwmsg.bad { color:var(--bad) } .rwmsg.good { color:var(--good) }
.rwrow.removing { display:block } .rwrow.removing p { margin:0 0 8px }
@media (max-width:560px) { .rwrow { grid-template-columns:minmax(0,1fr) 110px } .rwacts { grid-column:1/-1 } }
.addrw { background:var(--soft); box-shadow:none; border:1px solid var(--line) }
.addrw .rwcost { width:130px } .ideas { gap:6px }
input[aria-invalid="true"] { border-color:var(--bad) }
/* ---------- drafts ---------- */
.savebar { gap:10px }
.savenote { margin:0; font-weight:800; display:flex; align-items:center; gap:6px; min-height:1.4em }
.savenote.saved { color:var(--good) } .savenote.error { color:var(--bad) }
.leavedlg { background:var(--surface); border:3px solid var(--primary); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:8px; box-shadow:0 10px 30px var(--shadow) }
.lockwarn { position:fixed; z-index:70; left:50%; transform:translateX(-50%); top:calc(10px + env(safe-area-inset-top,0px)); width:min(520px,calc(100% - 24px)); display:flex; align-items:center; gap:10px; background:var(--ink); color:var(--bg); border-radius:16px; padding:10px 12px 10px 16px; font-weight:800; box-shadow:0 10px 30px rgba(0,0,0,.25) }
.lockwarn span { flex:1 }
.lockwarn[hidden], .toast[hidden] { display:none }
.status { text-transform:none; letter-spacing:0 }

/* ---------- public entry ---------- */
.entry-hero { display:flex; align-items:center; gap:14px; max-width:620px; width:100%; margin:0 auto }
.entry-hero img.m { width:84px; flex:none }
.entry-hero h1 { font-size:clamp(1.6rem,6vw,2.2rem) }
.entry-hero .lead { margin-top:4px; font-size:1.1rem; font-weight:700; color:var(--muted) }
.who, .chchoices { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:620px; width:100%; margin:0 auto }
.chchoices { grid-template-columns:1fr }
@media (max-width:560px) { .who { grid-template-columns:1fr } }
.whocard { display:flex; align-items:center; gap:12px; min-height:72px; border:0; text-align:left; text-decoration:none; color:var(--ink); background:var(--surface); border-radius:var(--r); padding:14px 16px; box-shadow:0 var(--depth) 0 var(--edge); font:inherit }
.whocard .ib { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; flex:none; background:var(--cta); color:var(--cta-ink) }
.whocard.parw .ib { background:var(--primary); color:var(--primary-ink) }
.whocard strong { display:block; font-family:var(--display); font-weight:var(--dw); font-size:1.2rem; line-height:1.15 }
.whocard small { display:block; color:var(--muted); font-weight:700; font-size:.92rem }
.whocard > .ico { color:var(--muted) }
.entry-card, .demo-cta { max-width:620px; width:100%; margin:0 auto }
.eh { font-size:1.3rem }
.steps { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px; font-size:1rem }
.opts.chmodes { grid-template-columns:1fr }
.chmode[aria-checked="true"] { box-shadow:0 0 0 3px var(--primary),0 var(--depth) 0 var(--edge) }
.chmode[aria-checked="true"]::after { top:8px; right:8px }
.rules p { margin:0 }
/* ---------- presentation by age ---------- */
#app.age-young { --child-text:1.25rem; --qsize:clamp(1.5rem, 1.2rem + 1.6vw, 1.875rem) }
#app.age-young .answers .ans { min-height:112px }
#app.age-young .answers .ans b { width:44px; height:44px; font-size:1.3rem }
#app.age-young .qmeta .say-btn { width:56px; height:56px; background:var(--cta); color:var(--cta-ink) }
#app.age-young .tabbar button { font-size:.86rem }
#app.age-teen { --child-text:1.125rem }
#app.age-teen .buddy img { width:56px }
#app.age-teen .playcard .bigstar { width:96px; opacity:.9 }
html:has(#app.age-teen) .sky .shape { display:none }
.chmode { position:relative }

/* ---------- seasonal events ---------- */
.evcard { --ev:#FF7A1A; background:var(--surface); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:10px; box-shadow:0 var(--depth) 0 var(--edge), inset 0 0 0 3px color-mix(in srgb,var(--ev) 55%,transparent) }
.ev-top { display:flex; gap:12px; align-items:center }
.ev-ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; flex:none; background:var(--ev); color:#fff }
.ev-ic .ico { width:28px; height:28px }
.evcard .k { font-size:.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:color-mix(in srgb,var(--ev) 70%,var(--ink)) }
.ev-top strong { display:block; font-family:var(--display); font-weight:var(--dw); font-size:1.2rem; line-height:1.1 }
.ev-top small { display:block; color:var(--muted); font-weight:700; font-size:.92rem }
.evcard p { margin:0 }
.ev-goal { display:flex; flex-direction:column; gap:6px; font-weight:700 }
.ev-dots { display:flex; gap:5px; flex-wrap:wrap } .ev-dots i { width:22px; height:10px; border-radius:99px; background:var(--track) } .ev-dots i.on { background:var(--ev) }
.ev-done { display:flex; align-items:center; gap:6px; font-weight:800; color:var(--good) }
.badge.evb { background:color-mix(in srgb,var(--c) 20%,var(--surface)) } .badge.evb .ico { color:var(--c) }
.evline { display:flex; align-items:center; justify-content:center; gap:6px } .evline .ico { width:18px; height:18px }
.badges h3 { margin-bottom:8px }
.bshelf { display:flex; flex-wrap:wrap; gap:10px }
.ebadge { --ev:#FF7A1A; display:flex; align-items:center; gap:8px; background:var(--soft); border-radius:16px; padding:6px 12px 6px 6px; font-weight:800 }
.ebadge .ev-ic { width:38px; height:38px; border-radius:50% } .ebadge .ev-ic .ico { width:22px; height:22px }
.ebadge small { display:block; color:var(--muted); font-weight:700 }
#evdeco { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden }
#evdeco svg { position:absolute; fill:none; stroke:var(--ev); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.32; transform:rotate(var(--r)); animation:evfloat 9s ease-in-out infinite }
@keyframes evfloat { 0%,100% { translate:0 0 } 50% { translate:0 -14px } }
html[data-view="quiz"] #evdeco, html[data-view="chplay"] #evdeco { display:none }

/* =====================================================================
   Motion: things move when a screen opens (scoped to .view.enter, so a
   refresh of the same screen doesn't replay them). The global
   prefers-reduced-motion rule above switches all of this off.
   ===================================================================== */
@keyframes riseIn { from { opacity:0; transform:translateY(16px) scale(.98) } to { opacity:1; transform:none } }
@keyframes popIn2 { 0% { opacity:0; transform:scale(.6) } 70% { opacity:1; transform:scale(1.06) } 100% { transform:none } }
@keyframes ringIn { from { stroke-dashoffset:var(--c0) } to { stroke-dashoffset:var(--c1) } }
@keyframes growX { from { transform:scaleX(0) } to { transform:none } }
@keyframes dotIn { 0% { transform:scale(0) } 70% { transform:scale(1.25) } 100% { transform:none } }
@keyframes shine { 0%,72% { transform:translateX(-120%) skewX(-20deg) } 100% { transform:translateX(260%) skewX(-20deg) } }
@keyframes tabpop { 0% { transform:scale(.6) } 60% { transform:scale(1.18) } 100% { transform:none } }
@keyframes bump { 0% { transform:scale(1) } 35% { transform:scale(1.18) } 100% { transform:scale(1) } }
@keyframes wiggleIn { 0%,100% { transform:rotate(0) } 25% { transform:rotate(-10deg) scale(1.08) } 50% { transform:rotate(8deg) } 75% { transform:rotate(-4deg) } }
@keyframes glowPulse { 0%,100% { box-shadow:0 var(--depth) 0 var(--edge), inset 0 0 0 3px color-mix(in srgb,var(--ev) 55%,transparent) } 50% { box-shadow:0 var(--depth) 0 var(--edge), inset 0 0 0 3px var(--ev), 0 0 18px color-mix(in srgb,var(--ev) 35%,transparent) } }

/* screens: cards flow in one after another */
.view.enter:not(.qv) > * { animation:riseIn .5s cubic-bezier(.2,1,.3,1) backwards }
.view.enter:not(.qv) > *:nth-child(2) { animation-delay:.06s } .view.enter:not(.qv) > *:nth-child(3) { animation-delay:.12s }
.view.enter:not(.qv) > *:nth-child(4) { animation-delay:.18s } .view.enter:not(.qv) > *:nth-child(5) { animation-delay:.24s }
.view.enter:not(.qv) > *:nth-child(6) { animation-delay:.3s } .view.enter:not(.qv) > *:nth-child(n+7) { animation-delay:.36s }
/* progress fills */
.view.enter .ring .rp { animation:ringIn 1.1s .25s cubic-bezier(.3,1,.4,1) backwards }
.view.enter .lb i, .view.enter .pbar i, .view.enter .bar span, .view.enter .ev-dots i.on { transform-origin:left center; animation:growX .9s .3s cubic-bezier(.3,1,.4,1) backwards }
.view.enter .d10 i.on { animation:dotIn .4s cubic-bezier(.3,1.6,.5,1) backwards; animation-delay:calc(.35s + var(--i) * 70ms) }
/* the big buttons feel pressable */
.btn, .playcard, .tcard, .kcard, .whocard, .linkcard, .surprise, .shopcard, .chmode, .opt, .themecard, .tabbar button { transition:transform .14s cubic-bezier(.3,1.6,.5,1), box-shadow .14s, filter .15s, background .2s, color .2s }
.btn:active:not(:disabled), .whocard:active, .linkcard:active, .surprise:active, .kcard:active, .tcard:active, .opt:active, .themecard:active, .chmode:active { transform:scale(.96) }
.playcard:active { transform:scale(.98) }
/* call-to-action pills get a light sweep */
.playcard .go-pill, .btn.cta { position:relative; overflow:hidden }
.playcard .go-pill::after, .btn.cta.big::after { content:""; position:absolute; top:0; bottom:0; left:0; width:40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:shine 3.6s ease-in-out infinite; pointer-events:none }
/* tab bar: the chosen tab pops */
.tabbar.enter button[aria-current="page"] .ico { animation:tabpop .45s cubic-bezier(.3,1.6,.5,1) }
/* header stars bump when they go up */
.hpill.bump { animation:bump .6s cubic-bezier(.3,1.6,.5,1) }
.hpill.bump .st { animation:wiggleIn .7s ease-in-out }
/* events */
.view.enter .evcard .ev-ic { animation:wiggleIn .9s .4s ease-in-out backwards }
.evcard { animation:glowPulse 3.2s ease-in-out infinite }
/* results: tiles and the star block land one by one */
.view.enter .rstats > div { animation:popIn2 .5s cubic-bezier(.3,1.5,.5,1) backwards }
.view.enter .rstats > div:nth-child(1) { animation-delay:.45s } .view.enter .rstats > div:nth-child(2) { animation-delay:.55s } .view.enter .rstats > div:nth-child(3) { animation-delay:.65s }
.view.enter .earned { animation:popIn2 .6s .25s cubic-bezier(.3,1.5,.5,1) backwards }
.view.enter .rs .acts { animation:riseIn .5s .8s cubic-bezier(.2,1,.3,1) backwards }
.levelup { display:flex; flex-direction:column; align-items:center; gap:2px; background:linear-gradient(135deg,var(--cta),#FFB000); color:var(--cta-ink); border-radius:18px; padding:10px 22px; box-shadow:0 5px 0 var(--cta-edge); animation:popIn2 .7s .5s cubic-bezier(.3,1.5,.5,1) backwards, bump 1.6s 1.4s ease-in-out 2 }
.levelup .lu-k { font-family:var(--display); font-weight:var(--dw); font-size:1.5rem; line-height:1 }
.levelup strong { font-size:1rem }
/* greeting avatar waves hello */
.view.enter .greet .ava { animation:wiggleIn 1s .3s ease-in-out backwards }
/* read-aloud voices */
.voicebox { display:flex; flex-direction:column; gap:8px }
.vlist { display:flex; flex-direction:column; gap:6px }
.vopt { display:flex; align-items:center; gap:10px; border:2px solid var(--line); background:var(--soft); color:var(--ink); border-radius:14px; padding:10px 12px; min-height:48px; text-align:left; font-weight:700 }
.vopt[aria-checked="true"] { border-color:var(--primary); background:color-mix(in srgb,var(--primary) 12%,var(--surface)) }
.vopt[aria-checked="true"]::after { content:"✓"; margin-left:auto; font-weight:800 }
.vopt .ico { color:var(--muted) }