/* Brain Stars — styles and themes.
   Layout: one centred play column over a themed backdrop; chunky tactile buttons; the mascot reacts to every answer.
   Each theme is a complete, fixed look chosen per child (data-theme on <html>).
   Original five below; ocean, candy, desert, volcano, comic, sports and midnight further down:
     playroom (5+)  candy colours      jungle (5+)  leafy greens
     galaxy (8+)    deep space neon    arcade (10+) retro neon
     studio (12+)   clean and grown-up (also used for parent screens) */

:root, [data-theme="playroom"] {
  --bg:#E2F3FF; --surface:#FFFFFF; --soft:#F1F7FF; --ink:#22264B; --muted:#5D6591; --line:#D3E3F4;
  --accent:#FF8A2B; --accent-ink:#FFFFFF; --c1:#FF5D8F; --c2:#2F8CF2; --c3:#FFC531; --c4:#1FC49A; --c5:#8A5CF6;
  --star:#FFC531; --star-ink:#3D2B00; --good:#14A06A; --good-soft:#DDF7EC; --bad:#E5484D; --bad-soft:#FFE6E7;
  --shadow:rgba(34,38,75,.14); --deco1:#FFE79A; --deco2:#FFC7DA; --deco3:#BDF0DF;
  --display:"Baloo 2","Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --r:22px; --depth:5px; --word1:#8A5CF6; --word2:#FF8A2B; --title-case:none; color-scheme:light;
}
[data-theme="jungle"] {
  --bg:#E1F4DA; --surface:#FFFFFF; --soft:#EEF8E9; --ink:#1D3324; --muted:#55705D; --line:#CAE5C0;
  --accent:#23A55A; --accent-ink:#FFFFFF; --c1:#FF7A45; --c2:#2BB3C0; --c3:#FFCB2F; --c4:#23A55A; --c5:#A15BD6;
  --star:#FFCB2F; --star-ink:#3A2A00; --good:#1E9B55; --good-soft:#DDF5E3; --bad:#DE4B3E; --bad-soft:#FDE6E2;
  --shadow:rgba(29,51,36,.14); --deco1:#BFE6A8; --deco2:#FFE59A; --deco3:#A9E2DE;
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif; --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --r:22px; --depth:5px; --word1:#23A55A; --word2:#FF7A45; color-scheme:light;
}
[data-theme="galaxy"] {
  --bg:#0D1132; --surface:#1A1F4E; --soft:#141943; --ink:#EEF0FF; --muted:#A3A9DA; --line:#2E3677;
  --accent:#7C5CFF; --accent-ink:#FFFFFF; --c1:#FF4FD8; --c2:#37C8FF; --c3:#FFD447; --c4:#3EF0B0; --c5:#9B7BFF;
  --star:#FFD447; --star-ink:#2B2200; --good:#3EF0B0; --good-soft:#13394A; --bad:#FF5C8A; --bad-soft:#3D1838;
  --shadow:rgba(0,0,0,.45); --deco1:#2B2F7A; --deco2:#4A1E6E; --deco3:#123E66;
  --display:"Chakra Petch","Trebuchet MS",system-ui,sans-serif; --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --r:18px; --depth:4px; --word1:#37C8FF; --word2:#FF4FD8; color-scheme:dark;
}
[data-theme="arcade"] {
  --bg:#0A0A12; --surface:#15151F; --soft:#101018; --ink:#F5F5FF; --muted:#9D9DB8; --line:#2B2B3D;
  --accent:#FFE14D; --accent-ink:#111111; --c1:#FF3B6B; --c2:#29E0FF; --c3:#FFE14D; --c4:#3DFF8A; --c5:#B45CFF;
  --star:#FFE14D; --star-ink:#111111; --good:#3DFF8A; --good-soft:#0F3322; --bad:#FF3B6B; --bad-soft:#3A1220;
  --shadow:rgba(0,0,0,.6); --deco1:#29E0FF; --deco2:#FF3B6B; --deco3:#B45CFF;
  --display:"Bungee","Impact",system-ui,sans-serif; --body:"Rubik","Segoe UI",system-ui,sans-serif;
  --r:10px; --depth:4px; --word1:#29E0FF; --word2:#FFE14D; color-scheme:dark;
}
[data-theme="studio"] {
  --bg:#F4F5F8; --surface:#FFFFFF; --soft:#F0F2F7; --ink:#15182B; --muted:#5A6077; --line:#E0E3EB;
  --accent:#4F46E5; --accent-ink:#FFFFFF; --c1:#E8457C; --c2:#3B82F6; --c3:#F5B400; --c4:#10B981; --c5:#8B5CF6;
  --star:#F5B400; --star-ink:#2E2200; --good:#0E9F6E; --good-soft:#E3F7EF; --bad:#DC3545; --bad-soft:#FCE8EA;
  --shadow:rgba(21,24,43,.08); --deco1:#E6E8F7; --deco2:#F1E7F3; --deco3:#E3F2EE;
  --display:"Sora","Segoe UI",system-ui,sans-serif; --body:"Manrope","Segoe UI",system-ui,sans-serif;
  --r:14px; --depth:0px; --word1:#15182B; --word2:#4F46E5; 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"] .sky::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 4px) }
[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 { text-transform:uppercase; letter-spacing:.06em; font-size:.92rem }
.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:translateX(40px) rotate(2deg) scale(.95); 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="arcade"] .question { font-weight:400; font-size:clamp(1.15rem,4.2vw,1.6rem); line-height:1.35 }
[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) }
[data-theme="arcade"] .why strong,[data-theme="comic"] .why strong { color:var(--c2) }
.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) }
[data-theme="comic"] .why { border:2px solid #111 }
@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 }
[data-theme="arcade"] .coach .say { font-weight:400; font-size:1rem }
.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 } }

/* ===================== more themes ===================== */
[data-theme="ocean"] {
  --bg:#D6F0FA; --surface:#FFFFFF; --soft:#EAF8FC; --ink:#12324A; --muted:#4D6D83; --line:#C2E2EE;
  --accent:#0E9FC2; --accent-ink:#FFFFFF; --c1:#FF6B8B; --c2:#0E9FC2; --c3:#FFC94A; --c4:#22BF99; --c5:#6C7BFF;
  --star:#FFC94A; --star-ink:#3A2800; --good:#14A06A; --good-soft:#DDF5EC; --bad:#E5484D; --bad-soft:#FFE6E7;
  --shadow:rgba(18,50,74,.14); --deco1:#A6E1F2; --deco2:#C8EFE4; --deco3:#FFE4AE;
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif; --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --r:24px; --depth:5px; --word1:#0E9FC2; --word2:#FF6B8B; color-scheme:light;
}
[data-theme="candy"] {
  --bg:#FFE8F3; --surface:#FFFFFF; --soft:#FFF3F9; --ink:#3B1F3F; --muted:#7A5A7E; --line:#F5D0E4;
  --accent:#F23D97; --accent-ink:#FFFFFF; --c1:#F23D97; --c2:#8C6CFF; --c3:#FFC94A; --c4:#2CCBAE; --c5:#FF8A5B;
  --star:#FFC94A; --star-ink:#3A2800; --good:#19A273; --good-soft:#DDF6EC; --bad:#E5484D; --bad-soft:#FFE4E8;
  --shadow:rgba(59,31,63,.13); --deco1:#FFC7E3; --deco2:#D9CCFF; --deco3:#C5F4EA;
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif; --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --r:26px; --depth:5px; --word1:#8C6CFF; --word2:#F23D97; color-scheme:light;
}
[data-theme="desert"] {
  --bg:#2A1B3D; --surface:#3A2752; --soft:#32204A; --ink:#FFF3E6; --muted:#D7BED6; --line:#56396F;
  --accent:#FF8A3D; --accent-ink:#2A1200; --c1:#FF6B6B; --c2:#FFB347; --c3:#FFD66B; --c4:#4FD1C5; --c5:#B48CFF;
  --star:#FFD66B; --star-ink:#2A1C00; --good:#4FD1A5; --good-soft:#1F4040; --bad:#FF7A7A; --bad-soft:#4A2238;
  --shadow:rgba(0,0,0,.4); --deco1:#5B2F6E; --deco2:#8A3E5C; --deco3:#C76B3A;
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif; --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --r:20px; --depth:4px; --word1:#FFB347; --word2:#FF6B6B; color-scheme:dark;
}
[data-theme="volcano"] {
  --bg:#1A1110; --surface:#2A1A17; --soft:#22140F; --ink:#FFEFE6; --muted:#C9A89A; --line:#4A2C24;
  --accent:#FF5A1F; --accent-ink:#FFFFFF; --c1:#FF3D3D; --c2:#FF8A1F; --c3:#FFD23F; --c4:#7BD389; --c5:#C77DFF;
  --star:#FFD23F; --star-ink:#2A1C00; --good:#7BD389; --good-soft:#1F3320; --bad:#FF5C5C; --bad-soft:#40181A;
  --shadow:rgba(0,0,0,.55); --deco1:#7A1E0E; --deco2:#4A1C10; --deco3:#3A2418;
  --display:"Rubik","Segoe UI",system-ui,sans-serif; --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --r:16px; --depth:4px; --word1:#FF8A1F; --word2:#FF3D3D; color-scheme:dark;
}
[data-theme="comic"] {
  --bg:#FFF6D1; --surface:#FFFFFF; --soft:#FFF2BF; --ink:#111111; --muted:#4A4A4A; --line:#111111;
  --accent:#E63946; --accent-ink:#FFFFFF; --c1:#E63946; --c2:#1D7BF2; --c3:#FFD60A; --c4:#22A866; --c5:#9B5DE5;
  --star:#FFD60A; --star-ink:#111111; --good:#1E9E5A; --good-soft:#D8F5E3; --bad:#E63946; --bad-soft:#FFE0E2;
  --shadow:rgba(0,0,0,.0); --deco1:#FFE27A; --deco2:#9FD3FF; --deco3:#FFB3B8;
  --display:"Bangers","Impact",system-ui,sans-serif; --body:"Rubik","Segoe UI",system-ui,sans-serif;
  --r:10px; --depth:4px; --word1:#1D7BF2; --word2:#E63946; color-scheme:light;
}
[data-theme="sports"] {
  --bg:#CDEDD4; --surface:#FFFFFF; --soft:#EEF8F0; --ink:#0F2F1A; --muted:#3F6B4C; --line:#B5DDBF;
  --accent:#119A4C; --accent-ink:#FFFFFF; --c1:#EF4B36; --c2:#1E6FD9; --c3:#FFC72C; --c4:#119A4C; --c5:#7A4FD6;
  --star:#FFC72C; --star-ink:#2A1F00; --good:#119A4C; --good-soft:#DBF3E2; --bad:#E0412F; --bad-soft:#FDE5E1;
  --shadow:rgba(15,47,26,.15); --deco1:#BFE6C8; --deco2:#FFFFFF; --deco3:#FFFFFF;
  --display:"Bebas Neue","Impact",system-ui,sans-serif; --body:"Rubik","Segoe UI",system-ui,sans-serif;
  --r:12px; --depth:4px; --word1:#0F2F1A; --word2:#119A4C; color-scheme:light;
}
[data-theme="midnight"] {
  --bg:#0E1117; --surface:#161B24; --soft:#121722; --ink:#E8ECF4; --muted:#9AA4B8; --line:#262E3D;
  --accent:#2DD4BF; --accent-ink:#06201C; --c1:#F472B6; --c2:#60A5FA; --c3:#FBBF24; --c4:#2DD4BF; --c5:#A78BFA;
  --star:#FBBF24; --star-ink:#231800; --good:#34D399; --good-soft:#0F2E26; --bad:#F87171; --bad-soft:#3A1A1E;
  --shadow:rgba(0,0,0,.5); --deco1:#1B2B3A; --deco2:#231C3A; --deco3:#12302C;
  --display:"Sora","Segoe UI",system-ui,sans-serif; --body:"Manrope","Segoe UI",system-ui,sans-serif;
  --r:14px; --depth:0px; --word1:#E8ECF4; --word2:#2DD4BF; color-scheme:dark;
}

/* headings per typeface */
[data-theme="comic"] h1,[data-theme="comic"] h2,[data-theme="comic"] h3,[data-theme="comic"] .word,[data-theme="comic"] .question,[data-theme="comic"] .bubble,[data-theme="comic"] .coach .say,[data-theme="comic"] .gift .rname,[data-theme="comic"] .bignum,[data-theme="comic"] .kid .name { font-weight:400; letter-spacing:1px }
[data-theme="sports"] h1,[data-theme="sports"] h2,[data-theme="sports"] h3,[data-theme="sports"] .word,[data-theme="sports"] .question,[data-theme="sports"] .bubble,[data-theme="sports"] .coach .say,[data-theme="sports"] .gift .rname,[data-theme="sports"] .bignum,[data-theme="sports"] .kid .name { font-weight:400; letter-spacing:.8px }
[data-theme="sports"] .question { font-size:clamp(1.7rem,6vw,2.4rem) }
[data-theme="sports"] .word { font-size:2.1rem }
[data-theme="midnight"] h1,[data-theme="midnight"] h2,[data-theme="midnight"] h3 { font-weight:700; letter-spacing:-.4px }
[data-theme="volcano"] h1,[data-theme="volcano"] h2,[data-theme="volcano"] h3,[data-theme="volcano"] .question { font-weight:800 }

/* surfaces per theme */
[data-theme="desert"] .card,[data-theme="volcano"] .card,[data-theme="midnight"] .card,[data-theme="desert"] .qcard,[data-theme="volcano"] .qcard,[data-theme="midnight"] .qcard,[data-theme="desert"] .kid,[data-theme="volcano"] .kid,[data-theme="midnight"] .kid,[data-theme="desert"] .gift,[data-theme="volcano"] .gift,[data-theme="midnight"] .gift,[data-theme="desert"] .linkcard,[data-theme="volcano"] .linkcard,[data-theme="midnight"] .linkcard,[data-theme="desert"] .bubble,[data-theme="volcano"] .bubble,[data-theme="midnight"] .bubble { border:1px solid var(--line) }
[data-theme="comic"] .card,[data-theme="comic"] .qcard,[data-theme="comic"] .kid,[data-theme="comic"] .gift,[data-theme="comic"] .linkcard,[data-theme="comic"] .bubble,[data-theme="comic"] .chip-me,[data-theme="comic"] .iconbtn,[data-theme="comic"] .ans,[data-theme="comic"] .tile,[data-theme="comic"] .playcard { border:3px solid #111; box-shadow:5px 5px 0 #111 }
[data-theme="comic"] .btn { border:3px solid #111; box-shadow:4px 4px 0 #111 }
[data-theme="comic"] .btn:active { transform:translate(3px,3px); box-shadow:1px 1px 0 #111 }
[data-theme="comic"] .bubble::before { display:none }
[data-theme="comic"] .tile .ib,[data-theme="comic"] .ans b { border:2px solid #111; box-shadow:none }
[data-theme="sports"] .card,[data-theme="sports"] .qcard { border-top:6px solid var(--accent) }
[data-theme="midnight"] .btn { box-shadow:none }
[data-theme="midnight"] .ans { box-shadow:none; border:1px solid var(--line) }
[data-theme="desert"] .tile .ib,[data-theme="volcano"] .tile .ib,[data-theme="midnight"] .tile .ib,[data-theme="desert"] .ans b,[data-theme="volcano"] .ans b,[data-theme="midnight"] .ans b { color:#14141F }
[data-theme="volcano"] .playcard { background:linear-gradient(135deg,#FF5A1F,#C21E1E) }
[data-theme="desert"] .playcard { background:linear-gradient(135deg,#FF8A3D,#C9497A); color:#fff }
[data-theme="ocean"] .playcard { background:linear-gradient(135deg,#0E9FC2,#2BC2B0) }
[data-theme="candy"] .playcard { background:linear-gradient(135deg,#F23D97,#8C6CFF) }
[data-theme="midnight"] .playcard { background:linear-gradient(135deg,#14B8A6,#2563EB); color:#fff }

/* backdrops */
.dunes,.pitch { position:absolute; opacity:0; pointer-events:none }
.dunes { left:-10%; right:-10%; bottom:-40px; height:240px; background:radial-gradient(60% 90px at 25% 100%,#C76B3A 98%,transparent 100%),radial-gradient(55% 110px at 75% 100%,#A8502C 98%,transparent 100%),radial-gradient(40% 70px at 50% 100%,#E08A47 98%,transparent 100%) }
.pitch { left:50%; top:50%; width:260px; height:260px; margin:-130px; border:6px solid rgba(255,255,255,.7); border-radius:50% }
[data-theme="desert"] .dunes { opacity:1 } [data-theme="desert"] .tw { opacity:1 } [data-theme="desert"] .blob { opacity:.35; filter:blur(30px) } [data-theme="desert"] .shape { opacity:0 }
[data-theme="desert"] .b1 { background:#FFB347; width:120px; height:120px; top:8%; left:auto; right:12%; filter:blur(2px); opacity:.85; animation:none }
[data-theme="ocean"] .tw,[data-theme="volcano"] .tw { top:auto !important; bottom:-20px; animation:rise 9s linear infinite }
[data-theme="ocean"] .tw { width:12px; height:12px; background:transparent; border:2px solid rgba(255,255,255,.9); opacity:.8 }
[data-theme="volcano"] .tw { width:5px; height:5px; background:#FF8A1F; box-shadow:0 0 8px #FF5A1F; opacity:.9; animation-duration:6s }
[data-theme="volcano"] .blob { opacity:.55; filter:blur(40px) } [data-theme="volcano"] .b1 { background:#C21E1E } [data-theme="volcano"] .shape { opacity:0 }
[data-theme="ocean"] .shape { opacity:.3 }
[data-theme="candy"] .shape { opacity:.65 }
[data-theme="comic"] .blob,[data-theme="comic"] .shape { opacity:0 }
[data-theme="comic"] .sky::after { content:""; position:absolute; inset:0; background-image:radial-gradient(#F5C400 1.6px,transparent 1.8px); background-size:14px 14px; opacity:.55 }
[data-theme="sports"] .blob,[data-theme="sports"] .shape { opacity:0 }
[data-theme="sports"] .sky::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 70px,rgba(255,255,255,.18) 70px 140px) }
[data-theme="sports"] .sky::after { content:""; position:absolute; left:50%; top:0; bottom:0; width:6px; margin-left:-3px; background:rgba(255,255,255,.7) }
[data-theme="sports"] .pitch { opacity:1 }
[data-theme="midnight"] .blob { opacity:.7; filter:blur(50px) } [data-theme="midnight"] .shape { opacity:0 } [data-theme="midnight"] .tw { opacity:.4 }
@keyframes rise { from { transform:translateY(0) } to { transform:translateY(-110vh) } }