/* ============ TinyKidx — playful design system ============ */
:root {
  --ink: #2B2350;
  --ink-2: #5B5480;
  --ink-3: #8F89AD;
  --bg: #EEF7FF;
  --card: #FFFFFF;
  --line: #E6E2F5;
  --purple: #7C5CFF;  --purple-d: #5B3DE0;
  --yellow: #FFC93C;  --yellow-d: #E9A800;
  --coral: #FF6B6B;   --coral-d: #E04848;
  --mint: #2BC48A;    --mint-d: #17A06C;
  --sky: #3EC1F3;     --sky-d: #1A9FD3;
  --pink: #FF5DA2;    --pink-d: #E03A82;
  --orange: #FF9F1C;
  --radius: 28px;
  --shadow: 0 10px 30px rgba(43, 35, 80, .08);
  --font-fun: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --font-deva: "Baloo 2", "Fredoka", system-ui, sans-serif;
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  font-size: 17px; line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}
img, svg { max-width: 100%; }
a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-fun); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
main { flex: 1; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.center { text-align: center; }
.muted { color: var(--ink-2); }
.small { font-size: .88rem; }
.hide { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- sky background decoration ---------- */
.sky-deco { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.sky-deco .cloud { position: absolute; background: #fff; border-radius: 999px; opacity: .8; filter: blur(.3px); animation: drift 60s linear infinite; }
.sky-deco .cloud::before, .sky-deco .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.sky-deco .cloud::before { width: 55%; height: 160%; left: 15%; bottom: 20%; }
.sky-deco .cloud::after { width: 40%; height: 120%; right: 12%; bottom: 25%; }
.sky-deco .c1 { width: 160px; height: 46px; top: 14%; left: -10%; animation-duration: 70s; }
.sky-deco .c2 { width: 110px; height: 34px; top: 42%; left: -20%; animation-duration: 90s; animation-delay: -30s; }
.sky-deco .c3 { width: 200px; height: 56px; top: 70%; left: -30%; animation-duration: 110s; animation-delay: -60s; }
@keyframes drift { to { transform: translateX(140vw); } }

/* ---------- buttons ---------- */
.btn {
  --c: var(--purple); --cd: var(--purple-d);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-fun); font-weight: 600; font-size: 1.05rem; line-height: 1;
  padding: .85em 1.4em; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--c); color: #fff; box-shadow: 0 5px 0 var(--cd);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s; text-decoration: none !important;
  touch-action: manipulation; user-select: none;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--cd); }
.btn.big { font-size: 1.3rem; padding: 1em 1.8em; }
.btn.sm { font-size: .9rem; padding: .6em 1em; box-shadow: 0 3px 0 var(--cd); }
.btn.yellow { --c: var(--yellow); --cd: var(--yellow-d); color: var(--ink); }
.btn.mint { --c: var(--mint); --cd: var(--mint-d); }
.btn.coral { --c: var(--coral); --cd: var(--coral-d); }
.btn.sky { --c: var(--sky); --cd: var(--sky-d); }
.btn.pink { --c: var(--pink); --cd: var(--pink-d); }
.btn.ghost { --c: #fff; --cd: #DCD6F2; color: var(--ink); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: rgba(238, 247, 255, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.top .wrap { display: flex; align-items: center; gap: 18px; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-fun); font-weight: 700; font-size: 1.6rem; color: var(--ink); text-decoration: none !important; }
.logo svg { width: 46px; height: 46px; flex: none; }
.logo .rb span:nth-child(5n+1) { color: var(--coral); }
.logo .rb span:nth-child(5n+2) { color: var(--orange); }
.logo .rb span:nth-child(5n+3) { color: var(--mint); }
.logo .rb span:nth-child(5n+4) { color: var(--sky); }
.logo .rb span:nth-child(5n+5) { color: var(--purple); }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a.lnk { font-family: var(--font-fun); font-weight: 500; color: var(--ink); padding: 8px 14px; border-radius: 999px; }
.nav a.lnk:hover, .nav a.lnk.on { background: #fff; text-decoration: none; }
.kidchip { display: inline-flex; align-items: center; gap: 8px; background: #fff; padding: 6px 14px 6px 6px; border-radius: 999px; font-family: var(--font-fun); font-weight: 600; box-shadow: var(--shadow); color: var(--ink); }
.kidchip .av { width: 36px; height: 36px; border-radius: 50%; background: #FFF4D6; display: grid; place-items: center; font-size: 1.3rem; }
.kidchip .st { color: var(--yellow-d); }
.menu-btn { display: none; margin-left: auto; background: #fff; border: 0; border-radius: 14px; width: 46px; height: 46px; font-size: 1.4rem; cursor: pointer; }
@media (max-width: 1240px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; top: 72px; left: 16px; right: 16px; flex-direction: column; align-items: stretch; background: #fff; padding: 14px; border-radius: 24px; box-shadow: var(--shadow); }
  .nav.open { display: flex; }
  .nav a.lnk { padding: 12px 14px; }
}

/* ---------- flash ---------- */
.flash { margin: 14px auto 0; padding: 14px 18px; border-radius: 18px; background: #E5FBF1; color: #0E6B47; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.flash.error { background: #FFE8E8; color: #A12626; }
.flash.info { background: #E6F3FF; color: #1C5B8F; }

/* ---------- cards & generic ---------- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; }
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #F1EDFF; color: var(--purple-d); font-weight: 800; font-size: .8rem; letter-spacing: .02em; }
.pill.gold { background: #FFF4D6; color: #9A6B00; }
.pill.green { background: #E2FAEF; color: #0E7A52; }
.pill.red { background: #FFE6E6; color: #B42F2F; }
.pill.gray { background: #F0EFF5; color: var(--ink-2); }
section.block { padding: 70px 0; }
.eyebrow { font-family: var(--font-fun); font-weight: 600; color: var(--purple); letter-spacing: .08em; text-transform: uppercase; font-size: .9rem; }

/* ---------- home hero ---------- */
.hero { padding: 40px 0 30px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero h1 .hl { background: linear-gradient(transparent 62%, #FFE38A 62%); padding: 0 .1em; }
.hero p.lead { font-size: 1.25rem; color: var(--ink-2); max-width: 34ch; }
.hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; margin: 26px 0 18px; }
.hero .trust { display: flex; gap: 18px; flex-wrap: wrap; color: var(--ink-2); font-weight: 700; font-size: .95rem; }
.hero-art { position: relative; aspect-ratio: 1; max-width: 520px; justify-self: center; width: 100%; }
.hero-art .disc { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF6D9, #FFE08A 60%, #FFC93C); box-shadow: inset 0 -20px 0 rgba(0,0,0,.05); }
.hero-art .mascot { position: absolute; inset: 22%; animation: bob 3s ease-in-out infinite; }
.hero-art .fl { position: absolute; width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center; font-family: var(--font-fun); font-weight: 700; font-size: 2.4rem; color: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.12); animation: float 4s ease-in-out infinite; }
.hero-art .fl.e { background: #fff; font-size: 2.2rem; }
@keyframes bob { 50% { transform: translateY(-14px) rotate(-2deg); } }
@keyframes float { 50% { transform: translateY(-12px) rotate(6deg); } }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero-art { max-width: 360px; order: -1; } }

.abc-strip { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.abc-strip a { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-family: var(--font-fun); font-weight: 700; font-size: 1.7rem; color: #fff; box-shadow: 0 5px 0 rgba(0,0,0,.15); transition: transform .15s; text-decoration: none; }
.abc-strip a:hover { transform: translateY(-4px) rotate(-4deg); }

.feature { text-align: center; padding: 28px 22px; }
.feature .ic { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; font-size: 2.6rem; margin: 0 auto 14px; }
.feature h3 { margin-bottom: .3em; }
.feature p { color: var(--ink-2); font-size: .97rem; margin: 0; }

.steps { counter-reset: s; }
.step { position: relative; padding-top: 34px; }
.step::before { counter-increment: s; content: counter(s); position: absolute; top: -18px; left: 26px; width: 48px; height: 48px; border-radius: 16px; background: var(--yellow); color: var(--ink); font-family: var(--font-fun); font-weight: 700; font-size: 1.5rem; display: grid; place-items: center; box-shadow: 0 4px 0 var(--yellow-d); }

.band { background: linear-gradient(135deg, #7C5CFF, #A66CFF); color: #fff; border-radius: 40px; padding: 50px; position: relative; overflow: hidden; }
.band h2 { color: #fff; }
.band .muted { color: #E8E1FF; }

/* ---------- pricing ---------- */
.plans { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; border: 3px solid transparent; }
.plan.hot { border-color: var(--yellow); transform: translateY(-8px); }
.plan .badge { position: absolute; top: -16px; right: 24px; background: var(--yellow); padding: 6px 14px; border-radius: 999px; font-family: var(--font-fun); font-weight: 600; box-shadow: 0 3px 0 var(--yellow-d); }
.plan .price { font-family: var(--font-fun); font-weight: 700; font-size: 3rem; line-height: 1; margin: 8px 0 4px; }
.plan .per { color: var(--ink-3); font-weight: 700; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 24px; flex: 1; }
.plan li { padding: 7px 0 7px 32px; position: relative; font-weight: 600; }
.plan li::before { content: "✓"; position: absolute; left: 0; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: #E2FAEF; color: var(--mint-d); display: grid; place-items: center; font-size: .8rem; font-weight: 900; }

.faq details { background: #fff; border-radius: 20px; padding: 18px 22px; margin-bottom: 12px; box-shadow: var(--shadow); }
.faq summary { font-family: var(--font-fun); font-weight: 600; font-size: 1.1rem; cursor: pointer; list-style: none; }
.faq summary::after { content: "+"; float: right; color: var(--purple); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 10px 0 0; color: var(--ink-2); }

/* ---------- letters map ---------- */
.map-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 26px 0 22px; }
.map-head h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 18px; }
.ltile { position: relative; aspect-ratio: 1; border-radius: 32px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none !important; box-shadow: 0 8px 0 rgba(0,0,0,.14); transition: transform .15s ease; overflow: hidden; }
.ltile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 50%); }
.ltile:hover { transform: translateY(-5px) rotate(-2deg); }
.ltile:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.14); }
.ltile .big { font-family: var(--font-fun); font-weight: 700; font-size: 3.6rem; line-height: 1; text-shadow: 0 4px 0 rgba(0,0,0,.12); }
.ltile .big small { font-size: .55em; opacity: .9; margin-left: 2px; }
.ltile .em { position: absolute; top: 10px; right: 12px; font-size: 1.5rem; }
.ltile .bar { width: 64%; height: 9px; border-radius: 9px; background: rgba(255,255,255,.35); margin-top: 12px; overflow: hidden; }
.ltile .bar i { display: block; height: 100%; background: #fff; border-radius: 9px; }
.ltile .lock { position: absolute; bottom: 10px; right: 12px; font-size: .95rem; background: rgba(0,0,0,.18); border-radius: 999px; padding: 2px 8px; font-weight: 800; }
.ltile.abc { grid-column: span 2; aspect-ratio: auto; background: linear-gradient(135deg, #FF5DA2, #7C5CFF); }
@media (max-width: 520px) { .letters { grid-template-columns: repeat(3, 1fr); gap: 12px; } .ltile { border-radius: 24px; } .ltile .big { font-size: 2.6rem; } .ltile.abc { grid-column: span 3; padding: 20px; } }

/* ---------- letter world ---------- */
.lw-hero { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; padding: 26px 30px; border-radius: 40px; color: #fff; margin: 22px 0 28px; position: relative; overflow: hidden; }
.lw-hero .glyph { font-family: var(--font-fun); font-weight: 700; font-size: clamp(5rem, 14vw, 9rem); line-height: 1; background: rgba(255,255,255,.2); border-radius: 36px; padding: 10px 28px; text-shadow: 0 6px 0 rgba(0,0,0,.12); cursor: pointer; border: 0; color: #fff; }
.lw-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.lw-words { display: flex; gap: 10px; flex-wrap: wrap; }
.lw-words button { background: rgba(255,255,255,.95); color: var(--ink); border: 0; border-radius: 18px; padding: 8px 14px 8px 10px; font-family: var(--font-fun); font-weight: 600; font-size: 1.05rem; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: transform .12s; }
.lw-words button:hover { transform: scale(1.06); }
.lw-words button .e { font-size: 1.7rem; }
.lw-words button b { color: var(--coral); }
.lw-nav { display: flex; justify-content: space-between; margin-bottom: 10px; }
@media (max-width: 680px) { .lw-hero { grid-template-columns: 1fr; text-align: center; padding: 22px; } .lw-hero .glyph { justify-self: center; } .lw-words { justify-content: center; } }

.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.gcard { background: #fff; border-radius: 30px; padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; border-bottom: 6px solid var(--gc, var(--purple)); }
.gcard .gh { display: flex; gap: 14px; align-items: center; }
.gcard .gi { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; font-size: 2rem; background: color-mix(in srgb, var(--gc) 16%, white); flex: none; }
.gcard h3 { margin: 0; font-size: 1.2rem; }
.gcard .skill { font-size: .78rem; font-weight: 800; color: var(--gc); text-transform: uppercase; letter-spacing: .06em; }
.gcard p { margin: 0; color: var(--ink-2); font-size: .93rem; }
.lvls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; }
.lvl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 18px; background: #F6F4FF; color: var(--ink); text-decoration: none !important; font-family: var(--font-fun); font-weight: 600; font-size: .9rem; transition: transform .1s, background .15s; }
.lvl:hover { background: color-mix(in srgb, var(--gc) 18%, white); transform: translateY(-2px); }
.lvl .ic { font-size: 1.3rem; }
.lvl .stars { font-size: .78rem; letter-spacing: 1px; color: #D9D4EC; }
.lvl .stars .on { color: #FFB800; }
.lvl.locked { opacity: .75; }
.lvl.locked::after { content: "🔒"; position: absolute; top: -6px; right: -4px; font-size: .9rem; background: #fff; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.lvl .free { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--mint); color: #fff; font-size: .62rem; padding: 1px 7px; border-radius: 999px; letter-spacing: .05em; }

.printables { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.printables a { background: #fff; border-radius: 24px; padding: 18px; display: flex; gap: 14px; align-items: center; box-shadow: var(--shadow); color: var(--ink); font-family: var(--font-fun); font-weight: 600; text-decoration: none; }
.printables a span.i { font-size: 2rem; }

/* ---------- player ---------- */
body.playing .top, body.playing footer.foot { display: none; }
body.playing { background: linear-gradient(180deg, #DFF2FF 0%, #F4FBFF 60%, #E7FFF4 100%); }
.player { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.pbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
.pbar .round { width: 52px; height: 52px; border-radius: 18px; border: 0; background: #fff; box-shadow: 0 4px 0 #D3E3F0; font-size: 1.5rem; cursor: pointer; display: grid; place-items: center; text-decoration: none; color: var(--ink); flex: none; }
.pbar .round:active { transform: translateY(3px); box-shadow: 0 1px 0 #D3E3F0; }
.pbar .ttl { font-family: var(--font-fun); font-weight: 600; font-size: 1.25rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar .prog { flex: 1.3; height: 18px; background: #fff; border-radius: 99px; overflow: hidden; box-shadow: inset 0 2px 0 rgba(0,0,0,.05); max-width: 340px; }
.pbar .prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2BC48A, #7DE3B8); border-radius: 99px; transition: width .4s cubic-bezier(.3,1.4,.6,1); }
@media (max-width: 600px) { .pbar .ttl { display: none; } }
.say { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 6px auto 4px; padding: 0 16px; max-width: 760px; }
.say .pip { width: 64px; height: 64px; flex: none; }
.say .bubble { background: #fff; border-radius: 24px; padding: 12px 18px; font-family: var(--font-fun); font-weight: 600; font-size: clamp(1.1rem, 2.6vw, 1.5rem); box-shadow: var(--shadow); position: relative; }
.say .bubble::before { content: ""; position: absolute; left: -8px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-right-color: #fff; border-left: 0; }
.say .speak { border: 0; background: var(--sky); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; box-shadow: 0 3px 0 var(--sky-d); flex: none; }
.stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 14px 24px; position: relative; }

/* game pieces */
.tile { font-family: var(--font-fun); font-weight: 700; border: 0; cursor: pointer; border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 7px 0 #D8D2F0; display: grid; place-items: center; transition: transform .1s; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.tile:active { transform: translateY(4px); box-shadow: 0 3px 0 #D8D2F0; }
.tile.good { background: #2BC48A; color: #fff; box-shadow: 0 7px 0 #17A06C; animation: pop .4s; }
.tile.bad { background: #FF6B6B; color: #fff; box-shadow: 0 7px 0 #E04848; animation: shake .4s; }
.tile.sel { outline: 5px solid var(--yellow); outline-offset: 2px; }
.tile.dim { opacity: .35; pointer-events: none; }
@keyframes pop { 40% { transform: scale(1.15); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes appear { from { transform: scale(.3); opacity: 0; } }
.choices { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; max-width: 820px; }
.choices .tile { width: clamp(96px, 22vw, 150px); height: clamp(96px, 22vw, 150px); font-size: clamp(3rem, 8vw, 4.8rem); animation: appear .35s backwards; }
.choices .tile.pic { font-size: clamp(3.2rem, 9vw, 5.2rem); }
.choices .tile .lbl { font-size: .9rem; font-weight: 600; margin-top: -10px; color: var(--ink-2); }
.choices .tile.good .lbl { color: #fff; }

/* trace */
.trace-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.trace-box { position: relative; width: min(78vw, 58vh, 500px); aspect-ratio: 1; background: #fff; border-radius: 36px; box-shadow: 0 10px 0 #D8E6F2, var(--shadow); touch-action: none; overflow: hidden; }
.trace-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.trace-box .lines { position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 24.5%, #EAF0F8 24.5% 25%); }
.trace-tools { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.meter { width: min(78vw, 500px); height: 14px; border-radius: 99px; background: #fff; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FFC93C, #FF9F1C); transition: width .2s; }

/* pop */
.pop-arena { position: relative; width: min(96vw, 900px); height: min(64vh, 620px); border-radius: 40px; background: linear-gradient(180deg, #8FD9FF, #C9F0FF); overflow: hidden; box-shadow: inset 0 -30px 0 rgba(255,255,255,.35); touch-action: manipulation; }
.bubble-b { position: absolute; bottom: -120px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-fun); font-weight: 700; color: var(--ink); cursor: pointer; border: 0; padding: 0;
  background: radial-gradient(circle at 30% 28%, #fff 0 12%, rgba(255,255,255,.75) 13%, rgba(255,255,255,.35) 55%, rgba(255,255,255,.55) 100%); box-shadow: inset -6px -8px 0 rgba(124,92,255,.12), 0 4px 12px rgba(0,80,140,.12); animation: rise linear forwards; user-select: none; }
.bubble-b.miss { background: rgba(255,107,107,.75); color: #fff; }
@keyframes rise { to { transform: translateY(calc(-1 * (min(64vh, 620px) + 160px))); } }
@keyframes burst { to { transform: scale(1.6); opacity: 0; } }

/* shadow */
.shadow-board { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 8vw, 90px); }
.shadow-col { display: flex; flex-direction: column; gap: 14px; }
.shadow-col .tile { width: clamp(84px, 18vw, 120px); height: clamp(84px, 18vw, 120px); font-size: clamp(2.8rem, 7vw, 4rem); }
.shadow-col .tile.sh .em { filter: brightness(0) opacity(.75); transition: filter .4s; }
.shadow-col .tile.sh.good .em { filter: none; }

/* sort */
.sort-area { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; }
.sort-card { width: 130px; height: 130px; font-size: 5rem; animation: appear .3s; }
.baskets { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.basket { width: clamp(130px, 28vw, 200px); padding: 18px 10px 14px; border-radius: 30px 30px 44px 44px; border: 0; cursor: pointer; font-family: var(--font-fun); font-weight: 700; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 7px 0 rgba(0,0,0,.15); transition: transform .1s; }
.basket:active { transform: translateY(4px); }
.basket .bl { font-size: 3rem; line-height: 1; }
.basket .bn { font-size: .95rem; opacity: .95; }
.basket .cnt { background: rgba(255,255,255,.3); border-radius: 99px; padding: 2px 10px; font-size: .85rem; }

/* missing */
.train { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
.car { width: clamp(64px, 14vw, 104px); height: clamp(64px, 14vw, 104px); border-radius: 20px 20px 12px 12px; display: grid; place-items: center; font-family: var(--font-fun); font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.6rem); color: #fff; position: relative; box-shadow: 0 6px 0 rgba(0,0,0,.15); animation: appear .3s backwards; }
.car::after { content: ""; position: absolute; bottom: -18px; left: 16%; right: 16%; height: 16px; background: radial-gradient(circle, #3D3560 45%, transparent 47%) left/16px 16px no-repeat, radial-gradient(circle, #3D3560 45%, transparent 47%) right/16px 16px no-repeat; }
.car.hole { background: #fff !important; color: var(--ink-3); border: 4px dashed #C9C2E8; }
.car.engine { background: #FF6B6B; font-size: 2.6rem; border-radius: 30px 14px 12px 12px; }

/* memory */
.mem { display: grid; gap: 12px; perspective: 900px; }
.mcard { width: clamp(70px, 19vw, 118px); aspect-ratio: 3/4; position: relative; cursor: pointer; border: 0; background: none; padding: 0; }
.mcard .in { position: absolute; inset: 0; transition: transform .45s; transform-style: preserve-3d; }
.mcard.flip .in, .mcard.done .in { transform: rotateY(180deg); }
.mcard .f, .mcard .b { position: absolute; inset: 0; border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; font-family: var(--font-fun); font-weight: 700; box-shadow: 0 6px 0 rgba(0,0,0,.12); }
.mcard .f { background: linear-gradient(135deg, #7C5CFF, #A66CFF); color: #fff; font-size: 2rem; }
.mcard .f::before { content: "?"; opacity: .7; }
.mcard .b { background: #fff; transform: rotateY(180deg); font-size: clamp(2rem, 6vw, 3.4rem); color: var(--ink); }
.mcard.done .b { background: #E2FAEF; }

/* paint */
.paint-wrap { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; width: min(96vw, 860px); }
.paint-box { position: relative; width: 100%; aspect-ratio: 1; max-height: 70vh; background: #fff; border-radius: 34px; overflow: hidden; box-shadow: 0 10px 0 #D8E6F2; touch-action: none; justify-self: center; max-width: 70vh; }
.paint-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.palette { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.palette .sw { width: 44px; height: 44px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15); cursor: pointer; padding: 0; }
.palette .sw.on { transform: scale(1.2); outline: 3px solid var(--ink); }
.palette .tool { width: 48px; height: 48px; border-radius: 16px; border: 0; background: #fff; box-shadow: 0 3px 0 #D8D2F0; font-size: 1.4rem; cursor: pointer; }
.palette .tool.on { background: var(--yellow); }
@media (max-width: 640px) { .paint-wrap { grid-template-columns: 1fr; } .palette { flex-direction: row; flex-wrap: wrap; justify-content: center; order: 2; } }

/* path */
.pgrid { display: grid; gap: 8px; }
.pgrid .tile { width: clamp(46px, 12vw, 78px); height: clamp(46px, 12vw, 78px); font-size: clamp(1.5rem, 4.6vw, 2.6rem); border-radius: 18px; box-shadow: 0 5px 0 #D8D2F0; }
.pgrid .tile.on { background: var(--mint); color: #fff; box-shadow: 0 5px 0 var(--mint-d); }
.pgrid .tile.here { background: var(--yellow); box-shadow: 0 5px 0 var(--yellow-d); font-size: clamp(1.6rem, 5vw, 2.8rem); }
.pgrid .tile.goal { background: #FFF4D6; }

/* spell */
.wordcard { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 26px; animation: appear .3s; }
.wordcard .pic { font-size: clamp(5rem, 16vw, 8rem); line-height: 1.1; }
.wordcard .wd { font-family: var(--font-fun); font-weight: 700; font-size: clamp(2.2rem, 7vw, 3.6rem); letter-spacing: .06em; }
.wordcard .wd .gap { display: inline-block; min-width: 1em; border-bottom: 6px solid var(--purple); color: var(--purple); text-align: center; }

/* win overlay */
.win { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(43, 35, 80, .45); padding: 16px; animation: fade .25s; }
.win .box { background: #fff; border-radius: 40px; padding: 30px 26px 26px; text-align: center; width: min(440px, 100%); animation: appear .45s cubic-bezier(.3,1.6,.5,1); position: relative; }
.win .box .pip { width: 110px; height: 110px; margin: -90px auto 4px; }
.win h2 { margin: 6px 0; }
.win .stars3 { font-size: 3.4rem; letter-spacing: 6px; margin: 4px 0 10px; }
.win .stars3 span { display: inline-block; filter: grayscale(1) opacity(.3); transform: scale(.5); transition: all .4s cubic-bezier(.3,1.8,.5,1); }
.win .stars3 span.on { filter: none; transform: scale(1); }
.win .acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.win .sticker-new { background: #FFF4D6; border-radius: 20px; padding: 10px; font-weight: 800; margin-top: 8px; }
.win .sticker-new .s { font-size: 2.6rem; display: block; animation: pop .6s; }
@keyframes fade { from { opacity: 0; } }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 101; }

/* ---------- kids picker / stickers ---------- */
.who { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; margin: 30px 0; }
.who form { margin: 0; }
.who .kidbtn { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-fun); font-weight: 600; font-size: 1.3rem; color: var(--ink); }
.who .kidbtn .av { width: 140px; height: 140px; border-radius: 44px; display: grid; place-items: center; font-size: 4.6rem; background: #fff; box-shadow: 0 8px 0 #D8D2F0; transition: transform .15s; }
.who .kidbtn:hover .av { transform: translateY(-6px) rotate(-3deg); }
.who .kidbtn small { font-size: .95rem; color: var(--yellow-d); }
.avpick { display: flex; flex-wrap: wrap; gap: 8px; }
.avpick label { cursor: pointer; }
.avpick input { position: absolute; opacity: 0; }
.avpick span { width: 52px; height: 52px; border-radius: 16px; background: #F6F4FF; display: grid; place-items: center; font-size: 1.8rem; border: 3px solid transparent; }
.avpick input:checked + span { border-color: var(--purple); background: #fff; }
.avpick input:focus-visible + span { outline: 3px solid var(--sky); }
.sbook { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px; }
.sslot { aspect-ratio: 1; border-radius: 28px; background: #fff; display: grid; place-items: center; font-size: 3.6rem; box-shadow: var(--shadow); position: relative; }
.sslot.no { background: #F2F0FA; font-size: 1.4rem; color: var(--ink-3); font-weight: 800; }
.sslot.yes { animation: appear .4s backwards; }

/* ---------- forms ---------- */
label.f { display: block; font-weight: 800; font-size: .92rem; margin: 0 0 6px; }
.input, select.input, textarea.input { width: 100%; font: inherit; padding: 13px 16px; border-radius: 16px; border: 2px solid var(--line); background: #fff; color: var(--ink); transition: border-color .15s; }
.input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px #EAE4FF; }
textarea.input { min-height: 140px; resize: vertical; }
.field { margin-bottom: 16px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.check { display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--purple); }
.err { background: #FFE8E8; color: #A12626; padding: 12px 16px; border-radius: 14px; font-weight: 700; margin-bottom: 16px; }

/* auth */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth .side { background: linear-gradient(160deg, #7C5CFF, #FF5DA2); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; text-align: center; position: relative; overflow: hidden; }
.auth .side h2 { color: #fff; }
.auth .side .pip { width: 220px; height: 220px; animation: bob 3s ease-in-out infinite; }
.auth .formside { display: flex; align-items: center; justify-content: center; padding: 30px 16px; }
.auth .formbox { width: min(440px, 100%); }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth .side { display: none; } }

/* ---------- parents dashboard ---------- */
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 26px 0; }
.plan-box { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.kid-report { display: grid; gap: 18px; }
.kr-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.kr-top .av { width: 72px; height: 72px; border-radius: 24px; background: #FFF4D6; display: grid; place-items: center; font-size: 2.6rem; }
.kr-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.kr-stats div { background: #F6F4FF; border-radius: 18px; padding: 10px 16px; text-align: center; min-width: 92px; }
.kr-stats b { display: block; font-family: var(--font-fun); font-size: 1.5rem; }
.kr-stats span { font-size: .78rem; font-weight: 800; color: var(--ink-2); }
.lgrid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 6px; }
@media (max-width: 640px) { .lgrid { grid-template-columns: repeat(7, 1fr); } }
.lcell { border-radius: 12px; padding: 6px 2px; text-align: center; font-family: var(--font-fun); font-weight: 700; background: #F3F1FA; color: var(--ink-3); position: relative; overflow: hidden; }
.lcell i { position: absolute; left: 0; bottom: 0; height: 5px; background: var(--mint); }
.lcell.some { color: var(--ink); }
.skills { display: flex; flex-wrap: wrap; gap: 8px; }
.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tbl th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 10px 12px; border-bottom: 2px solid var(--line); }
.tbl td { padding: 11px 12px; border-bottom: 1px solid #F0EEF7; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl-wrap { overflow-x: auto; }

/* modal */
dialog.modal { border: 0; border-radius: 30px; padding: 28px; width: min(460px, calc(100% - 32px)); box-shadow: 0 30px 80px rgba(43,35,80,.3); }
dialog.modal::backdrop { background: rgba(43,35,80,.45); }

/* footer */
footer.foot { margin-top: 60px; background: #2B2350; color: #CFC9EC; padding: 44px 0 30px; border-radius: 40px 40px 0 0; }
footer.foot a { color: #fff; }
footer.foot .cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
footer.foot .logo { color: #fff; }
footer.foot ul { list-style: none; padding: 0; margin: 0; line-height: 2; }

.pager { display: flex; gap: 6px; flex-wrap: wrap; margin: 20px 0; }
.pager a, .pager .gap { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #fff; font-weight: 800; padding: 0 8px; }
.pager a.on { background: var(--purple); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *:not(.bubble-b), *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* voice language picker */
.langpick { display: inline-flex; align-items: center; gap: 2px; background: #fff; border-radius: 999px; padding: 4px 4px 4px 10px; margin: 0 4px; }
.langpick button { border: 0; background: none; font: 700 .85rem var(--font); color: var(--ink-2); padding: 6px 9px; border-radius: 999px; cursor: pointer; }
.langpick button.on { background: var(--purple); color: #fff; }
@media (max-width: 860px) { .langpick { align-self: flex-start; margin: 6px 0; background: #F6F4FF; } }
.voice-note { text-align: center; margin: 0 16px; font-size: .85rem; font-weight: 700; color: var(--ink-2); }

/* Hindi (Devanagari) */
.deva, .deva .big, .deva .glyph, .deva h1, [data-script="deva"] .tile, [data-script="deva"] .car, [data-script="deva"] .bubble-b, [data-script="deva"] .mcard .b,
[data-script="deva"] .basket .bl, [data-script="deva"] .wordcard .wd, [data-script="deva"] .say .bubble { font-family: var(--font-deva); }
.ltile.deva .big { font-size: 3.4rem; line-height: 1.15; padding-top: .1em; }
.lw-hero.deva .glyph { line-height: 1.2; padding: 4px 34px 14px; }
[data-script="deva"] .choices .tile { line-height: 1.2; }
[data-script="deva"] .wordcard .wd { letter-spacing: 0; }

/* Numbers & counting */
.ngroup { display: grid; grid-template-columns: repeat(5, auto); gap: .15em .3em; justify-content: center; line-height: 1.15; }
.ngroup.numonly { display: block; font-family: var(--font-fun); font-weight: 700; font-size: clamp(3rem, 9vw, 4.6rem) !important; color: var(--purple); }
.ncard { background: #fff; border-radius: 32px; padding: 22px 26px; box-shadow: 0 8px 0 #D8E6F2; margin: 0 auto 26px; min-width: 220px; width: fit-content; animation: appear .3s; }
.nwrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.nfield { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 680px; background: #fff; border-radius: 32px; padding: 20px; box-shadow: 0 8px 0 #D8E6F2; }
.nitem { width: clamp(58px, 14vw, 76px); height: clamp(58px, 14vw, 76px); border-radius: 22px; border: 4px solid transparent; background: #F6F4FF; font-size: clamp(2rem, 7vw, 2.7rem); cursor: pointer; transition: transform .12s; touch-action: manipulation; }
.nitem:active { transform: scale(.92); }
.nitem.on { background: #FFF4D6; border-color: var(--yellow); box-shadow: 0 0 0 4px #FFE9A8; }
.ncompare { display: flex; gap: clamp(16px, 5vw, 50px); flex-wrap: wrap; justify-content: center; }
.ncompare .tile { min-width: clamp(130px, 34vw, 230px); min-height: clamp(130px, 30vw, 200px); padding: 16px; font-size: clamp(3.6rem, 12vw, 6rem); }
.nadd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; background: #fff; border-radius: 32px; padding: 20px 24px; box-shadow: 0 8px 0 #D8E6F2; margin-bottom: 26px; }
.nadd .nop { font-family: var(--font-fun); font-weight: 700; font-size: clamp(2.4rem, 7vw, 3.4rem); color: var(--ink-2); }
.nadd .nq { color: var(--purple); min-width: 1.2em; text-align: center; }
.nmatch .shadow-col .tile { width: auto; min-width: clamp(84px, 18vw, 120px); padding: 8px 12px; }
.ngtile .ngroup { gap: 0 .15em; }

/* Cut & Glue */
.cwrap { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.cboard { position: relative; display: grid; background: #fff; border-radius: 22px; box-shadow: 0 8px 0 #D8E6F2; overflow: hidden; }
.cghost { position: absolute; inset: 0; background-size: cover; filter: grayscale(1); pointer-events: none; }
.cslot { position: relative; border: 2px dashed #C9C2E8; margin: -1px; display: grid; place-items: center; }
.cslot.filled { border-color: transparent; }
.cboard.done .cslot { border: 0; }
.cboard.done { animation: pop .5s; box-shadow: 0 8px 0 #D8E6F2, 0 0 0 6px #2BC48A; }
.ctray { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 760px; min-height: 60px; padding: 12px; background: rgba(255,255,255,.6); border-radius: 22px; border: 3px dashed #D8D2F0; }
.cpiece { position: relative; border-radius: 10px; box-shadow: 0 4px 10px rgba(43,35,80,.18); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: 2px dashed rgba(255,255,255,.9); outline-offset: -4px; transition: box-shadow .15s; }
.cpiece.lift { cursor: grabbing; z-index: 50; box-shadow: 0 16px 30px rgba(43,35,80,.3); transition: none; }
.cpiece.sel { box-shadow: 0 0 0 5px var(--yellow), 0 6px 14px rgba(43,35,80,.2); }
.cpiece.placed { border-radius: 0; box-shadow: none; outline: 0; cursor: default; animation: pop .35s; }
.cpiece.bad, .cpiece:not(.placed).bad { animation: shake .4s; }
.cnum { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); background: #fff; color: var(--ink); font-family: var(--font-fun); font-weight: 700; border-radius: 99px; min-width: 28px; padding: 0 6px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.cslot .cnum { background: #F1EDFF; color: var(--purple); bottom: auto; top: 50%; transform: translate(-50%,-50%); font-size: 1.6rem; }
.chgrid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.chcard { position: relative; background-size: cover; border-radius: 22px; box-shadow: 0 6px 0 #D8E6F2; }
.chhole { position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; border-radius: 50%; background: #fff; border: 3px dashed #9A93BF; overflow: hidden; }
.chhole.filled { border: 0; }
.chpiece { border-radius: 50%; outline-offset: -3px; }
.chhole .chpiece { border-radius: 50%; }
.cfacebox { position: relative; background: #fff; border-radius: 30px; box-shadow: 0 8px 0 #D8E6F2; }
.cfacesvg { position: absolute; inset: 4%; width: 92%; height: 92%; }
.cfspot { position: absolute; width: 19%; height: 19%; transform: translate(-50%,-50%); border-radius: 50%; border: 3px dashed rgba(91,58,36,.45); display: grid; place-items: center; }
.cfspot.filled { border-color: transparent; }
.cfghost { font-size: clamp(1.8rem, 6vw, 2.6rem); opacity: .25; filter: grayscale(1); pointer-events: none; }
.cfspot[data-flip] .cfghost { transform: scaleX(-1); }
.cfpiece { width: clamp(58px, 15vw, 76px); height: clamp(58px, 15vw, 76px); display: grid; place-items: center; font-size: clamp(2rem, 7vw, 2.8rem); background: #fff; border-radius: 18px; outline: 0; }
.cfspot .cfpiece { background: none; box-shadow: none; width: 100%; height: 100%; }
.cfacebox.done { animation: pop .5s; }
.cpaper { position: relative; background: #fff; border-radius: 22px; box-shadow: 0 8px 0 #D8E6F2; background-image: radial-gradient(#EEF0F7 1.5px, transparent 1.5px); background-size: 22px 22px; touch-action: none; }
.cpaper canvas { position: absolute; inset: 0; }
.cscissors { position: absolute; font-size: 42px; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.2)); transition: left .04s linear, top .04s linear; }
.cpic { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); font-size: 64px; pointer-events: none; display: none; }
.cpic.on { display: block; }

/* Draw & Color */
.dgrid { display: grid; background: #fff; border-radius: 16px; box-shadow: 0 8px 0 #D8E6F2; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.dgrid .dcell { border: 1px solid #E4E0F2; display: grid; place-items: center; font-family: var(--font-fun); font-weight: 600; color: #8F89AD; line-height: 1; transition: background .12s; }
.dgrid .dcell.off { background: #FBFAFF; }
.dgrid .dcell.bad { animation: shake .35s; background: #FFE3E3; }
.dgrid.done .dcell { border-color: transparent; }
.dgrid.done { animation: pop .5s; box-shadow: 0 8px 0 #D8E6F2, 0 0 0 6px #2BC48A; }
.dgrid.dots { background: #FFFDF7; }
.dgrid.dots .dcell { border: 0; }
.dgrid.dots .dcell.off { background: transparent; }
.dgrid.dots .dcell.dot { border: 3px solid; border-radius: 50%; margin: 12%; cursor: pointer; background: #fff; }
.dgrid.dots .dcell.dot.ok { animation: pop .3s; }
.dgrid.ref { pointer-events: none; box-shadow: 0 6px 0 #D8E6F2; }
.dgrid.mirror { position: relative; }
.dgrid.mirror::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 3px dashed #FF5DA2; pointer-events: none; }
.dgrid .dcell.fixed { background-color: #F6F4FF; }
.dgrid .dcell.ghost { background-image: radial-gradient(circle, rgba(124,92,255,.35) 22%, transparent 24%); }
.dpal { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.dsw { width: 50px; height: 50px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.18); font-family: var(--font-fun); font-weight: 700; font-size: 1.2rem; cursor: pointer; }
.dsw.on { transform: scale(1.18); outline: 3px solid var(--ink); }
.dsize { width: 46px; height: 46px; border-radius: 14px; border: 0; background: #fff; box-shadow: 0 3px 0 #D8D2F0; font-weight: 800; cursor: pointer; }
.dsize.on { background: var(--yellow); }
.drefwrap { background: #fff; border-radius: 18px; padding: 8px 10px 10px; box-shadow: 0 4px 0 #D8E6F2; text-align: center; font-size: .85rem; }
.dref { display: grid; width: 110px; height: 110px; margin-top: 4px; }
.ddotsbox { position: relative; background: #fff; border-radius: 24px; box-shadow: 0 8px 0 #D8E6F2; }
.ddotsbox svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dline { fill: none; stroke: #7C5CFF; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ddotsbox.done .dline { fill: rgba(124,92,255,.12); }
.ddotsimg { position: absolute; inset: 0; display: grid; place-items: center; line-height: 1; opacity: 0; transition: opacity 1s; pointer-events: none; }
.ddotsbox.done .ddotsimg { opacity: 1; }
.ddotbtn { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; padding: 0; touch-action: manipulation; }
.ddotbtn::before { content: ""; position: absolute; left: 9px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: #2B2350; }
.ddotbtn span { position: absolute; left: 0; top: -2px; width: 30px; text-align: center; font: 700 .85rem var(--font-fun); color: #2B2350; pointer-events: none; }
.ddotbtn.next::before { background: var(--pink); box-shadow: 0 0 0 6px rgba(255,93,162,.25); animation: pulse 1s infinite; }
.ddotbtn.hit::before { background: #7C5CFF; }
.ddotbtn.bad { animation: shake .35s; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(255,93,162,.1); } }
.ddrawrow { display: flex; gap: 14px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.ddrawcv { border-radius: 24px; box-shadow: 0 8px 0 #D8E6F2; touch-action: none; background: #fff; }
.ddrawex { background: #fff; border-radius: 20px; padding: 10px 14px; box-shadow: 0 4px 0 #D8E6F2; text-align: center; display: flex; flex-direction: column; }
.ddrawex span { font-size: 3.4rem; line-height: 1.1; }

/* Word Search */
.wswrap { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.wsgrid { position: relative; display: grid; background: #fff; border-radius: 20px; box-shadow: 0 8px 0 #D8E6F2; padding: 0; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; }
.wscell { display: grid; place-items: center; font-family: var(--font-fun); font-weight: 600; color: var(--ink); position: relative; z-index: 1; cursor: pointer; border-radius: 50%; }
.wscell.sel { background: rgba(124,92,255,.22); }
.wscell.found { color: #2B2350; }
.wsmarks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.wsmarks line { stroke-width: .72; stroke-linecap: round; opacity: .75; }
.wslist { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; justify-content: center; }
.wsword { background: #fff; border-radius: 999px; padding: 6px 12px 6px 8px; font-family: var(--font-fun); font-weight: 600; letter-spacing: .06em; box-shadow: 0 3px 0 #D8D2F0; display: flex; align-items: center; gap: 6px; }
.wsword span { font-size: 1.4rem; }
.wsword.done { text-decoration: line-through; text-decoration-thickness: 3px; }
@media (min-width: 900px) { .wslist { flex-direction: column; max-width: 220px; } }

/* Learn & Grow */
.bgcard { text-align: center; }
.bgbig { font-size: clamp(4rem, 14vw, 6.5rem); line-height: 1.1; }
.bgopt { flex-direction: column; gap: 2px; }
.choices .tile.bgopt { width: auto; min-width: clamp(96px, 22vw, 150px); padding: 10px 14px; height: auto; min-height: clamp(96px, 22vw, 140px); font-size: 1rem; }
.bgshape { width: clamp(64px, 16vw, 96px); height: clamp(64px, 16vw, 96px); stroke: rgba(0,0,0,.15); stroke-width: 2; }
.bglabel { font-family: var(--font-fun); font-weight: 600; font-size: 1.05rem; display: flex; flex-direction: column; line-height: 1.15; }
.bglabel.big { font-size: clamp(1.3rem, 4vw, 1.8rem); }
.bglabel small, .calcard small { font-size: .62em; opacity: .65; font-weight: 600; }
.bgemo { font-size: clamp(3rem, 10vw, 4.4rem); line-height: 1; }
.bgword { font-family: var(--font-fun); font-weight: 700; font-size: clamp(1.8rem, 6vw, 2.6rem); letter-spacing: .02em; }
.bgseq { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font-size: clamp(2rem, 7vw, 3rem); }
.bggap { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border: 3px dashed #9A93BF; border-radius: 14px; color: var(--purple); font-family: var(--font-fun); font-weight: 700; font-size: .85em; }
.mzgrid { position: relative; display: grid; background: #fff; border-radius: 12px; box-shadow: 0 8px 0 #D8E6F2; touch-action: none; user-select: none; }
.mzcell { border: 0 solid #2B2350; display: grid; place-items: center; font-size: 1.4rem; }
.mzcell.trail { background: #EAF8F0; }
.mzme { position: absolute; left: 0; top: 0; display: grid; place-items: center; transition: transform .14s ease; pointer-events: none; z-index: 2; }
.mzgrid.done { box-shadow: 0 8px 0 #D8E6F2, 0 0 0 6px #2BC48A; }
.mzpad { display: grid; grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(2, 58px); gap: 8px; }
.mzbtn { border: 0; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 #D8D2F0; font-size: 1.6rem; cursor: pointer; }
.mzbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #D8D2F0; }
.mzt { grid-column: 2; grid-row: 1; } .mzl { grid-column: 1; grid-row: 2; } .mzb { grid-column: 2; grid-row: 2; } .mzr { grid-column: 3; grid-row: 2; }
.calrow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }
.calcard { background: #F6F4FF; border-radius: 16px; padding: 12px 14px; font-family: var(--font-fun); font-weight: 600; font-size: clamp(1rem, 3.4vw, 1.3rem); display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 90px; }
.calcard.hole { border: 3px dashed #9A93BF; background: #fff; color: var(--purple); font-size: 1.8rem; }
.calrow.planets .calcard { min-width: 70px; padding: 8px; font-size: .9rem; }
.planet { display: inline-block; border-radius: 50%; box-shadow: inset -4px -4px 0 rgba(0,0,0,.15); }
.sunball { font-size: 2.6rem; }
.car.sp { width: clamp(46px, 11vw, 70px); height: clamp(46px, 11vw, 70px); font-size: clamp(1.6rem, 5vw, 2.4rem); }
.sptile { width: clamp(64px, 15vw, 90px) !important; height: clamp(64px, 15vw, 90px) !important; font-size: clamp(2rem, 6vw, 3rem) !important; }
/* chores & affirmation */
.affirm { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, #FFF4D6, #FFE3F0); border-radius: 26px; padding: 18px 22px; margin-bottom: 22px; box-shadow: var(--shadow); }
.affirm .ic { font-size: 2.6rem; }
.affirm b { font-family: var(--font-fun); font-size: clamp(1.2rem, 3.4vw, 1.6rem); display: block; }
.chores { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.chore { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 24px; padding: 16px; box-shadow: 0 6px 0 #D8E6F2; border: 0; cursor: pointer; font: 600 1.15rem var(--font-fun); color: var(--ink); text-align: left; width: 100%; }
.chore .e { font-size: 2.4rem; }
.chore .tick { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 3px dashed #C9C2E8; display: grid; place-items: center; font-size: 1.4rem; flex: none; }
.chore.done { background: #E2FAEF; }
.chore.done .tick { border: 0; background: var(--mint); color: #fff; }
.week { display: grid; grid-template-columns: auto repeat(7, 1fr); gap: 4px; align-items: center; font-size: .85rem; }
.week .d { text-align: center; font-weight: 800; color: var(--ink-3); }
.week .c { height: 26px; border-radius: 8px; background: #F3F1FA; display: grid; place-items: center; }
.week .c.y { background: var(--mint); color: #fff; }

/* Learn & Grow 2 */
.swatch { display: inline-block; width: clamp(56px, 14vw, 84px); height: clamp(56px, 14vw, 84px); border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px #E4E0F2, 0 4px 10px rgba(0,0,0,.12); }
.swatch.q { display: inline-grid; place-items: center; background: #fff; border: 3px dashed #9A93BF; font: 700 1.8rem var(--font-fun); color: var(--purple); box-shadow: none; }
.mixrow { display: flex; gap: 12px; align-items: center; justify-content: center; font: 700 2rem var(--font-fun); }
.readword { font: 700 clamp(3rem, 12vw, 5.5rem) var(--font-fun); letter-spacing: .08em; color: var(--ink); }
.readword.small { font-size: clamp(1.8rem, 7vw, 3rem); letter-spacing: .02em; }
.fcard { position: relative; width: min(78vw, 320px); height: min(78vw, 320px); border: 0; background: none; perspective: 900px; cursor: pointer; }
.fface { position: absolute; inset: 0; border-radius: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .5s; box-shadow: 0 8px 0 #D8E6F2; }
.fface.front { background: #fff; }
.fface.back { background: linear-gradient(135deg, #7C5CFF, #A66CFF); color: #fff; transform: rotateY(180deg); }
.fcard.flipped .front { transform: rotateY(-180deg); }
.fcard.flipped .back { transform: rotateY(0); }
.femo { font-size: clamp(6rem, 22vw, 9rem); line-height: 1; }
.fword { font: 700 clamp(2.2rem, 8vw, 3.4rem) var(--font-fun); letter-spacing: .06em; }
.fface small { color: var(--ink-3); font-weight: 700; }
.stickwrap { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
.stickref { background: #fff; border-radius: 22px; padding: 10px; box-shadow: 0 6px 0 #D8E6F2; text-align: center; font-size: .9rem; }
.stickboard { background: #FFFDF5; border-radius: 22px; box-shadow: 0 8px 0 #D8E6F2; display: block; }
.stickboard line.stick, .stickboard line.hit.on { stroke: #D9A066; stroke-width: 11; stroke-linecap: round; }
.stickboard line.hit { stroke: transparent; stroke-width: 22; stroke-linecap: round; cursor: pointer; }
.stickboard line.hit:hover:not(.on) { stroke: rgba(217,160,102,.25); }
.stickboard .sdot { fill: #8F89AD; pointer-events: none; }
.stickboard.done { box-shadow: 0 8px 0 #D8E6F2, 0 0 0 6px #2BC48A; }
.shopwrap { gap: 14px; }
.shoplist { background: #FFFDF2; border-radius: 18px; padding: 12px 18px; box-shadow: 0 4px 0 #EDE3C0; font-weight: 700; min-width: 220px; }
.shoplist div { display: flex; gap: 8px; align-items: center; font-size: 1.1rem; }
.shoplist div span { font-size: 1.6rem; }
.shoplist div i { margin-left: auto; font-style: normal; color: var(--ink-3); }
.shoplist div.got { text-decoration: line-through; opacity: .6; }
.shelf { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 640px; background: #F3E3C8; padding: 14px; border-radius: 20px; }
.shopitem { width: 78px !important; height: 82px !important; display: flex !important; flex-direction: column; font-size: 2.2rem; }
.shopitem small { font-size: .8rem; font-family: var(--font); }
.basketbox { min-height: 50px; min-width: 200px; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; font-size: 1.6rem; background: #fff; border: 3px dashed #D8D2F0; border-radius: 16px; padding: 6px 12px; }
.basketbox:empty::before { content: "🧺"; opacity: .4; }
.till { background: #fff; border-radius: 22px; padding: 16px; box-shadow: 0 6px 0 #D8E6F2; text-align: center; }
.till .paid { font: 700 2.2rem var(--font-fun); margin: 4px 0 8px; }
.till .coins { display: flex; gap: 10px; justify-content: center; margin-bottom: 8px; }
.coin { width: 64px; height: 64px; border-radius: 50%; border: 0; font: 700 1rem var(--font-fun); cursor: pointer; color: #5A4300; background: radial-gradient(circle at 35% 30%, #FFF1B0, #F2C94C 60%, #C99A1E); box-shadow: 0 4px 0 #A87F12; }
.coin.c10 { background: radial-gradient(circle at 35% 30%, #F4F4F4, #C9C9C9 60%, #9A9A9A); box-shadow: 0 4px 0 #7A7A7A; color: #333; }
.coin:active { transform: translateY(3px); box-shadow: 0 1px 0 #A87F12; }
.till.done { box-shadow: 0 6px 0 #D8E6F2, 0 0 0 6px #2BC48A; }
.busyhomes { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.busyhome { background: #fff; border-radius: 24px; padding: 10px 14px; box-shadow: 0 6px 0 #D8E6F2; display: flex; align-items: center; gap: 10px; }
.busyhome .bh { font-size: clamp(2.6rem, 9vw, 3.6rem); }
.busyhome .slot { width: clamp(58px, 15vw, 76px); height: clamp(58px, 15vw, 76px); border: 3px dashed #C9C2E8; border-radius: 18px; display: grid; place-items: center; }
.busyhome.filled .slot { border-color: transparent; }
.busyhome .slot .cfpiece { width: 100%; height: 100%; box-shadow: none; }

/* ---------- How to play + simple flow (2026-11-04) ---------- */
.stage:has(.starttips) { flex-direction: column; gap: 22px; }
.starttips { background: #fff; border-radius: 26px; padding: 16px 20px; box-shadow: var(--shadow); max-width: 520px; width: 100%; text-align: left; }
.starttips > b { font-family: var(--font-fun); font-weight: 600; font-size: 1.2rem; }
.starttips ol, .tiplist { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 8px; }
.starttips li, .tiplist li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.starttips .n, .tiplist .n { flex: none; width: 28px; height: 28px; border-radius: 10px; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font-family: var(--font-fun); font-weight: 700; box-shadow: 0 3px 0 var(--yellow-d); }
.howto { max-width: 480px; }

.trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 18px; font-family: var(--font-fun); font-weight: 600; }
.trail a, .trail span.cur { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 8px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 3px 0 #DCD6F2; text-decoration: none !important; font-size: .98rem; }
.trail .i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #F1EDFF; font-size: 1.05rem; }
.trail span.cur { background: var(--purple); color: #fff; box-shadow: 0 3px 0 var(--purple-d); }
.trail span.cur .i { background: rgba(255,255,255,.25); }
.trail span.todo { opacity: .45; padding: 7px 10px; display: inline-flex; align-items: center; gap: 6px; }
.trail .sep { color: #B9B1DA; font-size: 1.1rem; }
@media (max-width: 560px) { .trail a .t, .trail span.todo .t { display: none; } .trail a, .trail span.todo { padding: 5px; } }

.welcome { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; background: #FFF8E1; border: 3px dashed #FFD666; border-radius: 28px; padding: 18px 22px; margin: 0 0 22px; }
.welcome h2 { margin: 0 0 6px; font-size: 1.35rem; }
.welcome ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 700; }
.welcome ol li { display: flex; gap: 8px; align-items: center; }
.welcome .n { width: 26px; height: 26px; border-radius: 9px; background: var(--yellow); display: grid; place-items: center; font-family: var(--font-fun); font-weight: 700; box-shadow: 0 2px 0 var(--yellow-d); }
.welcome .big { font-size: 3rem; }
.welcome .acts { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 720px) { .welcome { grid-template-columns: 1fr; } .welcome .big { display: none; } .welcome .acts { flex-direction: row; flex-wrap: wrap; } }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; background: #fff; border-radius: 20px; padding: 10px 16px; margin: 0 0 18px; box-shadow: var(--shadow); font-weight: 700; font-size: .92rem; }
.legend .k { display: inline-flex; align-items: center; gap: 6px; }
.legend .fr { background: var(--mint); color: #fff; font-size: .62rem; padding: 1px 7px; border-radius: 999px; letter-spacing: .05em; }
.legend .st { color: #FFB800; letter-spacing: 1px; }
.gtips { margin: 8px 0 10px; }
.gtips summary { cursor: pointer; font-weight: 800; color: var(--purple-d); font-size: .9rem; list-style: none; }
.gtips summary::-webkit-details-marker { display: none; }
.gtips ol { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: .9rem; font-weight: 600; }

.help-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; counter-reset: hs; margin: 18px 0 8px; }
.help-steps .hs { background: #fff; border-radius: 26px; padding: 20px; box-shadow: var(--shadow); position: relative; }
.help-steps .hs .e { font-size: 2.6rem; display: block; margin-bottom: 6px; }
.help-steps .hs h3 { margin: 0 0 4px; font-size: 1.2rem; }
.help-steps .hs p { margin: 0; font-size: .95rem; }
.help-steps .hs::before { counter-increment: hs; content: counter(hs); position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 11px; background: var(--yellow); display: grid; place-items: center; font-family: var(--font-fun); font-weight: 700; box-shadow: 0 3px 0 var(--yellow-d); }
.help-sec { margin: 34px 0 10px; }
.help-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.help-games .hg { background: #fff; border-radius: 22px; padding: 16px 18px; box-shadow: var(--shadow); border-top: 6px solid var(--gc); }
.help-games .hg h3 { display: flex; gap: 8px; align-items: center; font-size: 1.1rem; margin: 0 0 6px; }
.help-games .hg ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .92rem; font-weight: 600; }
.help-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
@media (max-width: 440px) { .pbar { gap: 8px; padding-left: 10px; padding-right: 10px; } .pbar .round { width: 44px; height: 44px; border-radius: 15px; font-size: 1.25rem; } }

/* ---------- Age groups, Adventure path & points (2026-11-04) ---------- */
.adv-head { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; background: linear-gradient(135deg, color-mix(in srgb, var(--ag) 22%, white), #fff); border-radius: 30px; padding: 20px 24px; margin: 0 0 18px; box-shadow: var(--shadow); }
.adv-me { display: flex; gap: 14px; align-items: center; }
.adv-me .av { width: 70px; height: 70px; border-radius: 24px; background: #fff; display: grid; place-items: center; font-size: 2.6rem; box-shadow: 0 4px 0 #E7E2F7; flex: none; }
.adv-me h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.adv-stats { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.adv-stats .pts { background: #fff; border-radius: 22px; padding: 10px 18px; text-align: center; box-shadow: 0 4px 0 #E7E2F7; }
.adv-stats .pts b { display: block; font-family: var(--font-fun); font-size: 1.8rem; line-height: 1.1; }
.adv-stats .pts span { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2, #6b6290); }
.adv-stats .rank { display: grid; gap: 4px; min-width: 200px; }
.adv-stats .rank > b { font-family: var(--font-fun); font-size: 1.15rem; }
.adv-stats .rank i, .rankbar i { display: block; height: 12px; background: #EEE9FF; border-radius: 99px; overflow: hidden; }
.adv-stats .rank i b, .rankbar i b { display: block; height: 100%; background: linear-gradient(90deg, #FFC93C, #FF9F1C); border-radius: 99px; }

.agtabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 16px; }
.agtabs a { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 22px; padding: 12px 14px; color: var(--ink); text-decoration: none !important; box-shadow: 0 4px 0 #E7E2F7; border: 3px solid transparent; }
.agtabs a .i { font-size: 2rem; }
.agtabs a b { display: block; font-family: var(--font-fun); font-weight: 600; font-size: 1.1rem; }
.agtabs a small { font-weight: 700; color: var(--ink-2, #6b6290); }
.agtabs a.on { border-color: var(--ag); background: color-mix(in srgb, var(--ag) 12%, white); }
@media (max-width: 640px) { .agtabs { grid-template-columns: 1fr; gap: 8px; } }

.adv-path { list-style: none; margin: 0; padding: 0 0 0 8px; position: relative; }
.adv-path::before { content: ""; position: absolute; left: 34px; top: 20px; bottom: 20px; width: 6px; border-radius: 6px; background: repeating-linear-gradient(#D9D2F5 0 14px, transparent 14px 24px); }
.stg { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: start; margin: 0 0 12px; position: relative; }
.stg .node { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; background: #fff; box-shadow: 0 4px 0 #E1DBF5; position: relative; z-index: 1; }
.stg.done .node { background: #E2FAEF; box-shadow: 0 4px 0 #B6EBD3; }
.stg.cur .node { background: var(--ag); box-shadow: 0 4px 0 color-mix(in srgb, var(--ag) 70%, black); animation: advpulse 1.6s ease-in-out infinite; }
@keyframes advpulse { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .stg.cur .node { animation: none; } }
.stg.locked { opacity: .6; }
.stg-card { background: #fff; border-radius: 22px; box-shadow: var(--shadow); padding: 12px 16px; }
.stg.cur .stg-card { border: 3px solid var(--ag); }
.stg-card summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.stg-card summary::-webkit-details-marker { display: none; }
.stg-card summary b { font-family: var(--font-fun); font-weight: 600; font-size: 1.15rem; }
.stg-card .sn { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2, #6b6290); }
.stg-card .sp { font-weight: 700; font-size: .9rem; color: var(--ink-2, #6b6290); }
.stg-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.sg { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 18px; background: color-mix(in srgb, var(--gc) 10%, white); color: var(--ink); text-decoration: none !important; border: 2px solid color-mix(in srgb, var(--gc) 30%, white); transition: transform .12s; }
a.sg:hover { transform: translateY(-2px); }
.sg .gi { width: 44px; height: 44px; border-radius: 14px; background: var(--gc); display: grid; place-items: center; font-size: 1.4rem; flex: none; }
.sg .tx { flex: 1; min-width: 0; }
.sg .tx b { display: block; font-family: var(--font-fun); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg .tx small { font-weight: 700; color: var(--ink-2, #6b6290); }
.sg .st { font-size: .95rem; color: #D9D4EC; letter-spacing: 1px; font-weight: 800; }
.sg .st .on { color: #FFB800; }
.sg.did { background: #F2FCF7; border-color: #BFEBD5; }
.sg.lk { filter: grayscale(.6); }

.pts-line { margin: 6px 0 0; font-weight: 800; color: #B26B00; }
.rankbar { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin: 8px auto 0; max-width: 340px; font-weight: 800; font-size: .9rem; }
.stage-done { margin: 10px 0 0; background: linear-gradient(135deg, #FFF4C2, #FFE08A); border-radius: 18px; padding: 10px 14px; font-family: var(--font-fun); font-weight: 600; font-size: 1.1rem; }
.stage-done.big { margin: 0 0 16px; font-size: 1.3rem; text-align: center; }

.adv-banner { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; border-radius: 30px; padding: 18px 22px; margin: 0 0 22px; color: #fff; text-decoration: none !important; background: linear-gradient(135deg, var(--ag), color-mix(in srgb, var(--ag) 55%, #7C5CFF)); box-shadow: 0 8px 0 rgba(0,0,0,.14); }
.adv-banner .e { font-size: 3.2rem; }
.adv-banner h2 { color: #fff; margin: 0 0 4px; }
.adv-banner p { margin: 0; font-weight: 700; opacity: .95; }
.adv-banner .go { background: #fff; color: var(--ink); border-radius: 999px; padding: 12px 20px; font-family: var(--font-fun); font-weight: 600; white-space: nowrap; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
@media (max-width: 640px) { .adv-banner { grid-template-columns: 1fr; text-align: center; } .adv-banner .e { font-size: 2.6rem; } }
.lvl .age { font-size: .62rem; font-weight: 800; color: var(--ink-2, #6b6290); letter-spacing: .02em; }
.lvl.foryou { box-shadow: inset 0 0 0 2px var(--gc); }
.kidchip .pt { font-size: .85rem; color: #B26B00; }
.nav a.lnk { white-space: nowrap; }
@media (min-width: 1241px) and (max-width: 1420px) { .nav a.lnk { padding: 8px 9px; font-size: .95rem; } .nav { gap: 2px; } }