/* Thornbyte Kids Typing - shared styles */
:root {
  --bg: #eef7ff;
  --bg2: #fff8ec;
  --card: #ffffff;
  --ink: #23314a;
  --ink-soft: #5b6a85;
  --line: #dbe6f3;
  --primary: #6c4ff6;
  --primary-dark: #4f35d1;
  --pink: #ff5d8f;
  --yellow: #ffc93c;
  --green: #22c55e;
  --red: #ef4444;
  --sky: #38bdf8;
  /* finger colours */
  --f-lp: #c084fc;
  --f-lr: #60a5fa;
  --f-lm: #34d399;
  --f-li: #fbbf24;
  --f-ri: #fb923c;
  --f-rm: #34d399;
  --f-rr: #60a5fa;
  --f-rp: #c084fc;
  --f-th: #f472b6;
  --radius: 22px;
  --shadow: 0 6px 0 rgba(35, 49, 74, .10), 0 14px 30px rgba(35, 49, 74, .08);
  --font: "Fredoka", "Nunito", ui-rounded, "Arial Rounded MT Bold", system-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);
  background-image: radial-gradient(circle at 10% 0%, #dff0ff 0, transparent 40%), radial-gradient(circle at 90% 10%, #fff1d6 0, transparent 35%);
  line-height: 1.55;
  font-size: 18px;
}
img, svg { max-width: 100%; }
a { color: var(--primary-dark); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 780px; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header / footer ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); border-bottom: 2px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 12px; min-height: 64px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.25rem; color: var(--ink); text-decoration: none; margin-right: auto; }
.logo .mascot { width: 44px; height: 44px; display: inline-block; flex: none; }
.logo small { display: block; font-size: .7rem; font-weight: 500; color: var(--ink-soft); letter-spacing: .02em; margin-top: -4px; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--ink); font-weight: 500; padding: 6px 12px; border-radius: 999px; }
.nav a:hover, .nav a[aria-current="page"] { background: #ece8ff; color: var(--primary-dark); }
.toggles { display: flex; gap: 6px; }
.toggle { border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: .95rem; cursor: pointer; color: var(--ink); min-height: 38px; }
.toggle[aria-pressed="false"] { opacity: .45; }
@media (max-width: 720px) {
  .site-header .wrap { padding-top: 6px; padding-bottom: 6px; gap: 6px; }
  .nav { order: 3; width: 100%; justify-content: space-between; }
  .nav a { padding: 4px 8px; font-size: .95rem; }
}

.site-footer { margin-top: 64px; padding: 32px 0 40px; background: #fff; border-top: 2px solid var(--line); font-size: .95rem; color: var(--ink-soft); }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.site-footer a { color: var(--ink-soft); }

/* ---------- buttons / cards ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; font-size: 1.1rem; padding: 12px 24px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; background: var(--primary); color: #fff; box-shadow: 0 5px 0 var(--primary-dark); transition: transform .08s, box-shadow .08s; min-height: 50px; }
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--primary-dark); }
.btn.big { font-size: 1.35rem; padding: 16px 34px; }
.btn.alt { background: #fff; color: var(--ink); box-shadow: 0 5px 0 var(--line); border: 2px solid var(--line); }
.btn.pink { background: var(--pink); box-shadow: 0 5px 0 #d63d6e; }
.btn.yellow { background: var(--yellow); color: var(--ink); box-shadow: 0 5px 0 #d9a414; }
.btn.green { background: var(--green); box-shadow: 0 5px 0 #15913f; }
.btn.small { font-size: .95rem; padding: 8px 16px; min-height: 40px; }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.grid { display: grid; gap: 20px; }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
section, section.wrap { padding-top: 40px; padding-bottom: 40px; }

/* ---------- home ---------- */
.hero { padding: 48px 0 24px; text-align: center; }
.hero .mascot-big { font-size: clamp(4rem, 14vw, 7rem); display: inline-block; animation: bob 2.4s ease-in-out infinite; }
.hero p.lead { font-size: clamp(1.1rem, 2.6vw, 1.35rem); color: var(--ink-soft); max-width: 640px; margin: 0 auto 24px; }
.hero .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.badge { background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 4px 14px; font-size: .95rem; }

.game-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); transition: transform .15s; overflow: hidden; padding: 0; }
.game-card:hover { transform: translateY(-4px) rotate(-.4deg); }
.game-card .art { font-size: 4rem; text-align: center; padding: 26px 0; }
.game-card .body { padding: 18px 22px 24px; }
.game-card .age { display: inline-block; font-size: .85rem; font-weight: 600; background: #ece8ff; color: var(--primary-dark); border-radius: 999px; padding: 2px 10px; margin-bottom: 8px; }
.art.learn { background: linear-gradient(135deg, #ffe3a3, #ffc4d6); }
.art.balloons { background: linear-gradient(180deg, #bfe8ff, #e8f7ff); }
.art.space { background: radial-gradient(circle at 30% 30%, #4b3b9a, #151033); }

.steps { counter-reset: step; }
.step { position: relative; padding-left: 64px; }
.step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-weight: 700; font-size: 1.3rem; }

.stickerbook { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
.sticker { aspect-ratio: 1; display: grid; place-items: center; font-size: 2.2rem; border-radius: 18px; background: #f5f7fb; border: 2px dashed var(--line); }
.sticker.got { background: #fff7d6; border: 2px solid var(--yellow); animation: pop-in .4s; }
.sticker.locked { filter: grayscale(1); opacity: .35; font-size: 1.4rem; }
.star-count { font-size: 1.4rem; font-weight: 600; }

.faq details { background: #fff; border-radius: 16px; padding: 14px 20px; margin-bottom: 10px; border: 2px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 10px 0 0; }

.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: .95rem; }
.prose th, .prose td { border: 2px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: #f1f5fb; }
.table-scroll { overflow-x: auto; }

/* ad slots stay hidden until ads are switched on in app.js */
.ad-slot { display: none; margin: 24px auto; max-width: 970px; text-align: center; }
.ad-slot.on { display: block; }
.ad-slot .ad-label { font-size: .7rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; }

/* ---------- lessons ---------- */
.lesson-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.lesson-tile { position: relative; display: block; text-decoration: none; color: var(--ink); background: #fff; border-radius: 20px; padding: 16px; box-shadow: var(--shadow); border: 3px solid transparent; transition: transform .12s; }
.lesson-tile:hover { transform: translateY(-3px); }
.lesson-tile .num { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.lesson-tile .t { font-weight: 600; font-size: 1.15rem; display: block; margin: 2px 0 6px; }
.lesson-tile .keys { font-size: 1.4rem; letter-spacing: .1em; }
.lesson-tile .st { font-size: 1.1rem; letter-spacing: 2px; }
.lesson-tile.next { border-color: var(--yellow); }
.lesson-tile.next::after { content: "Start here!"; position: absolute; top: -12px; right: 10px; background: var(--yellow); font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; animation: bob 1.6s ease-in-out infinite; }

.trainer { position: relative; max-width: 920px; margin: 0 auto; }
.trainer-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.trainer-top h1, .trainer-top .h1 { font-size: clamp(1.4rem, 4vw, 2rem); margin: 0; margin-right: auto; }
.progress { height: 14px; background: #fff; border-radius: 999px; overflow: hidden; border: 2px solid var(--line); }
.progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), #86efac); transition: width .2s; }
.tip { background: #fff7d6; border-radius: 16px; padding: 10px 16px; margin: 12px 0; font-size: 1.05rem; }
.typetext { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 18px; font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: 500; letter-spacing: .06em; text-align: center; line-height: 1.6; word-break: break-word; min-height: 2.2em; user-select: none; }
.typetext span { display: inline-block; min-width: .55em; border-radius: 10px; padding: 0 2px; }
.typetext span.sp { min-width: .7em; }
.typetext .grp { display: inline-block; white-space: nowrap; min-width: 0; padding: 0; }
.typetext span.done { color: var(--green); }
.typetext span.cur { background: #ece8ff; color: var(--primary-dark); box-shadow: 0 4px 0 var(--primary); animation: bob 1.2s ease-in-out infinite; }
.typetext span.err { background: #ffe1e1; color: var(--red); box-shadow: 0 4px 0 var(--red); animation: shake .3s; }
.typetext span.future { color: #8794ab; }
.finger-hint { text-align: center; font-size: 1.1rem; margin: 14px 0 6px; min-height: 1.7em; }
.finger-hint .dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -2px; margin-right: 6px; }

/* ---------- Tippy the fox (coach) ---------- */
.fox { display: block; width: 100%; height: auto; overflow: visible; }
.fox-eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.5s infinite; }
.fox-ear-l { transform-box: fill-box; transform-origin: 80% 100%; animation: earwiggle 6s infinite; }
.coach { display: flex; align-items: center; gap: 14px; margin: 12px 0; }
.coach-fox { width: clamp(64px, 14vw, 92px); flex: none; }
.coach-fox.jump .fox { animation: jump .45s; }
.coach-fox.sad .fox { animation: shake .3s; }
.bubble { position: relative; flex: 1; background: #fff; border-radius: 18px; padding: 10px 16px; box-shadow: var(--shadow); font-size: 1.08rem; }
.bubble::before { content: ""; position: absolute; left: -10px; top: 50%; margin-top: -10px; border: 10px solid transparent; border-right-color: #fff; border-left: 0; }
.bubble.pop { animation: pop-in .3s; }

/* ---------- on-screen keyboard (looks like a real keyboard) ---------- */
.kb { --k: clamp(24px, calc((100vw - 40px) / 12.4), 56px); display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--k) * .12); width: max-content; max-width: 100%; margin: 14px auto 0; padding: calc(var(--k) * .24) calc(var(--k) * .26) calc(var(--k) * .3); border-radius: calc(var(--k) * .4); background: linear-gradient(180deg, #424c68, #262c3d); box-shadow: inset 0 2px 0 #59648a, 0 9px 0 #1a1f2c, 0 22px 34px rgba(20, 25, 40, .35); user-select: none; touch-action: manipulation; }
.kb-row { display: flex; gap: calc(var(--k) * .12); }
.kb-row1 { margin-left: calc(var(--k) * .5); }
.kb-row2 { margin-left: calc(var(--k) * .8); }
.kb-row3 { margin-left: calc(var(--k) * 1.3); }
.kb-row4 { margin-left: calc(var(--k) * 2.7); }
.key { --c: #cbd5e1; position: relative; width: var(--k); height: var(--k); border: 0; padding: 0 0 calc(var(--k) * .1); border-radius: calc(var(--k) * .2); font: inherit; font-weight: 600; font-size: calc(var(--k) * .4); color: #23314a; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, #fff), color-mix(in srgb, var(--c) 40%, #fff));
  box-shadow: inset 0 calc(var(--k) * -.1) 0 color-mix(in srgb, var(--c) 60%, #7c869c), inset 0 2px 0 rgba(255, 255, 255, .95), 0 2px 3px rgba(0, 0, 0, .4);
  transition: transform .07s, box-shadow .07s; }
.key-space { width: calc(var(--k) * 5.4); font-size: calc(var(--k) * .3); }
.key-bump::after { content: ""; position: absolute; bottom: 24%; left: 36%; width: 28%; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .35); }
.key.f-lp, .finger.f-lp { --c: var(--f-lp); }
.key.f-lr, .finger.f-lr { --c: var(--f-lr); }
.key.f-lm, .finger.f-lm { --c: var(--f-lm); }
.key.f-li, .finger.f-li { --c: var(--f-li); }
.key.f-ri, .finger.f-ri { --c: var(--f-ri); }
.key.f-rm, .finger.f-rm { --c: var(--f-rm); }
.key.f-rr, .finger.f-rr { --c: var(--f-rr); }
.key.f-rp, .finger.f-rp { --c: var(--f-rp); }
.key.f-th, .finger.f-th { --c: var(--f-th); }
.key.lit { z-index: 1; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); animation: keyglow 1s ease-in-out infinite; }
.key.hit { transform: translateY(2px); color: #fff; background: linear-gradient(180deg, #4ade80, #16a34a); box-shadow: inset 0 calc(var(--k) * -.04) 0 #0f7a35, 0 1px 2px rgba(0, 0, 0, .4); }
.key.miss { background: linear-gradient(180deg, #ffe1e1, #ffb4b4); animation: shake .25s; }

/* ---------- hands ---------- */
.hands { display: block; width: min(380px, 92%); margin: 4px auto 0; overflow: visible; }
.palm, .fskin { stroke: #dd9f77; stroke-width: 2; }
.ftip { fill: var(--c); opacity: .85; }
.fnail { fill: #fff; opacity: .55; }
.fknuckle { stroke: #d6956c; stroke-width: 1.6; fill: none; opacity: .75; }
.farrow { fill: #ffcf33; stroke: #b7791f; stroke-width: 1.5; opacity: 0; }
.finger { transform-box: fill-box; }
.finger.lit { animation: fingerbob .8s ease-in-out infinite; filter: drop-shadow(0 0 6px var(--c)); }
.finger.lit .farrow, .finger.lit .ftip { opacity: 1; }

/* ---------- games ---------- */
.game-wrap { max-width: 1000px; margin: 0 auto; padding: 12px 16px 0; }
.game-setup { text-align: center; padding: 24px 0; }
.game-setup .setup-art { width: 120px; margin: 0 auto 4px; }
.choice-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0 22px; }
.choice { font: inherit; font-weight: 600; font-size: 1.05rem; padding: 12px 18px; min-height: 52px; border-radius: 18px; border: 3px solid var(--line); background: #fff; cursor: pointer; color: var(--ink); box-shadow: 0 4px 0 var(--line); transition: transform .1s; }
.choice:hover { transform: translateY(-2px); }
.choice small { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-soft); }
.choice[aria-pressed="true"] { border-color: var(--primary); background: #ece8ff; box-shadow: 0 4px 0 var(--primary); }
.choice .st { display: block; font-size: .85rem; letter-spacing: 1px; }
.hud { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; }
.pill { background: #fff; border-radius: 999px; padding: 4px 14px; font-weight: 600; box-shadow: 0 3px 0 var(--line); font-size: 1.05rem; }
.pill.bump { animation: pop-in .3s; }
.stage { position: relative; height: clamp(280px, 52vh, 520px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); user-select: none; touch-action: manipulation; isolation: isolate; }
.stage.hurt { animation: hurt .4s; }
.stage.shake { animation: stageshake .35s; }
.scene { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fx-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.overlay-msg { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; text-align: center; font-size: 1.6rem; font-weight: 600; background: rgba(255, 255, 255, .6); backdrop-filter: blur(3px); }

/* sky (Balloon Pop) */
.stage.sky { background: linear-gradient(180deg, #5cbcf5 0%, #9ad8ff 45%, #d6f0ff 80%, #f2fbff 100%); }
.sun { position: absolute; top: 3%; right: 4%; width: clamp(80px, 13vw, 130px); filter: drop-shadow(0 0 24px rgba(255, 210, 80, .8)); }
.sun .rays { transform-origin: 100px 100px; animation: spin 40s linear infinite; }
.sky-cloud { position: absolute; left: 0; width: calc(210px * var(--s)); opacity: .95; animation-name: cloudmove; animation-timing-function: linear; animation-iteration-count: infinite; }
.cloud-svg { width: 100%; display: block; }
.hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 26%; z-index: 4; pointer-events: none; }
.balloon { position: absolute; left: 0; top: 0; z-index: 3; width: 78px; height: 134px; will-change: transform; transform-origin: 50% 35%; filter: drop-shadow(0 8px 8px rgba(20, 60, 120, .18)); }
.balloon-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bletter { font-family: var(--font); font-weight: 700; font-size: 46px; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .25); stroke-width: 5px; stroke-linejoin: round; }
.balloon.target { animation: tpulse 1s ease-in-out infinite; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 16px rgba(255, 255, 255, .95)); }
.balloon.popped { animation: popped .12s forwards; }
.float-text { position: absolute; z-index: 7; pointer-events: none; font-weight: 700; font-size: 1.6rem; color: #fff; paint-order: stroke; -webkit-text-stroke: 1px rgba(0, 0, 0, .15); text-shadow: 0 3px 0 rgba(0, 0, 0, .2); animation: floatup .8s forwards; }

/* space (Space Words) */
.stage.space { background: radial-gradient(ellipse at 20% 0%, #3b2b85 0, transparent 55%), radial-gradient(ellipse at 90% 90%, #5a1f6e 0, transparent 50%), linear-gradient(180deg, #08071e 0%, #141038 60%, #231a58 100%); }
.stars-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.nebula { position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255, 90, 200, .16), transparent 40%), radial-gradient(circle at 25% 70%, rgba(80, 160, 255, .14), transparent 45%); animation: nebula 18s ease-in-out infinite alternate; }
.planet { position: absolute; top: 5%; left: 3%; width: clamp(110px, 18vw, 190px); animation: bob 7s ease-in-out infinite; }
.planet-svg { width: 100%; display: block; }
.moon { position: absolute; top: 12%; right: 7%; width: clamp(34px, 5vw, 56px); animation: bob 5s ease-in-out infinite reverse; }
.meteor { position: absolute; left: 0; top: 0; z-index: 3; width: 92px; height: 92px; will-change: transform; }
.meteor .trail { position: absolute; left: 50%; bottom: 45%; width: 50px; height: 130px; transform: translateX(-50%); background: linear-gradient(0deg, rgba(255, 200, 90, .95), rgba(255, 110, 40, .55) 40%, rgba(255, 60, 20, 0)); border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%; filter: blur(5px); animation: flicker .12s infinite alternate; }
.meteor .rock { position: absolute; inset: 0; animation: spin 7s linear infinite; }
.rock-svg { width: 100%; height: 100%; display: block; }
.meteor .word { position: absolute; top: 88%; left: 50%; transform: translate(-50%, -50%); padding: 3px 14px; border-radius: 16px; background: rgba(12, 8, 40, .8); border: 2px solid rgba(255, 255, 255, .35); color: #fff; font-size: clamp(1.25rem, 3.6vw, 1.8rem); font-weight: 600; letter-spacing: .05em; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
.meteor .word .ok { color: #7dffa8; }
.meteor.target .word { background: linear-gradient(135deg, #7c5cff, #4f35d1); border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 0 26px #8b7bff; }
.meteor.target .rock { filter: drop-shadow(0 0 10px #b3a6ff); }
.meteor.boom { animation: popped .15s forwards; }
.ship { position: absolute; bottom: 2px; left: 50%; width: 62px; margin-left: -31px; z-index: 5; transform-origin: 50% 75%; transition: transform .12s; }
.rocket-svg { width: 100%; display: block; overflow: visible; }
.rocket-svg .flame { transform-box: fill-box; transform-origin: 50% 0; animation: flame .1s infinite alternate; }
.laser { position: absolute; z-index: 5; height: 6px; border-radius: 3px; transform-origin: 0 50%; pointer-events: none; background: linear-gradient(90deg, #fff, #7df9ff 40%, #ff5df0); box-shadow: 0 0 12px #7df9ff, 0 0 26px #ff5df0; animation: fade .25s forwards; }
.stage.space .overlay-msg { background: rgba(10, 8, 30, .6); color: #fff; }

/* ---------- result modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(35, 49, 74, .5); padding: 16px; backdrop-filter: blur(3px); }
.modal .card { width: min(460px, 100%); text-align: center; animation: pop-in .35s; margin-top: 50px; }
.modal-fox { width: 120px; margin: -84px auto 4px; animation: jump .6s .2s; }
.modal .stars { display: flex; justify-content: center; gap: 8px; margin: 6px 0 10px; }
.modal .stars span { width: clamp(52px, 15vw, 70px); filter: grayscale(1); opacity: .25; }
.modal .stars span svg { width: 100%; display: block; }
.modal .stars span.on { filter: drop-shadow(0 4px 8px rgba(245, 158, 11, .5)); opacity: 1; animation: starin .5s backwards; }
.modal .stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.modal .stats div { background: #f3f6fb; border-radius: 14px; padding: 6px 12px; font-weight: 600; }
.modal .new-sticker { background: #fff7d6; border-radius: 16px; padding: 10px; margin-bottom: 14px; font-weight: 600; }
.modal .new-sticker b { font-size: 2.4rem; display: block; animation: jump .6s .8s; }
.modal .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; }

/* ---------- home art ---------- */
.hero-art { position: relative; width: min(360px, 84vw); height: clamp(180px, 40vw, 240px); margin: 0 auto 6px; }
.hero-fox { position: absolute; left: 50%; bottom: 0; width: 56%; margin-left: -28%; animation: bob 2.6s ease-in-out infinite; }
.hero-b { position: absolute; width: 17%; animation: float 4.5s ease-in-out infinite; }
.hero-b.b1 { left: 2%; top: 2%; }
.hero-b.b2 { right: 1%; top: -4%; width: 19%; animation-delay: -1.5s; }
.hero-b.b3 { left: 13%; top: 40%; width: 13%; animation-delay: -3s; }
.hero-b.b4 { right: 13%; top: 44%; width: 12%; animation-delay: -2.2s; }
.art { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; }
.art .mini-b { width: 48px; animation: float 4s ease-in-out infinite; }
.art .mini-b:nth-child(2) { animation-delay: -1.3s; margin-top: -20px; }
.art .mini-b:nth-child(3) { animation-delay: -2.6s; }
.art .mini-rocket { width: 50px; animation: bob 2s ease-in-out infinite; }
.art .mini-rock { width: 64px; animation: spin 9s linear infinite; }
.art .mini-fox { width: 96px; }
.art .mini-keys { display: grid; grid-template-columns: repeat(4, 28px); gap: 5px; }
.art .mini-keys span { height: 28px; border-radius: 7px; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: #23314a; background: linear-gradient(180deg, #fff, #e8edf6); box-shadow: inset 0 -4px 0 #c5cede, 0 2px 3px rgba(0, 0, 0, .2); }
.art .mini-keys span.on { background: linear-gradient(180deg, #ffe58a, #fbbf24); box-shadow: inset 0 -4px 0 #c98a06, 0 0 12px #fbbf24; }
.art.space::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 15% 25%, #fff, transparent), radial-gradient(1px 1px at 60% 15%, #fff, transparent), radial-gradient(2px 2px at 85% 40%, #fff, transparent), radial-gradient(1px 1px at 35% 80%, #fff, transparent), radial-gradient(1.5px 1.5px at 75% 85%, #fff, transparent); }

/* ---------- animations ---------- */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes glow { 50% { box-shadow: 0 0 0 4px #fff, 0 0 0 9px var(--c), 0 6px 0 rgba(0, 0, 0, .2); } }
@keyframes pop-in { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
@keyframes popped { to { opacity: 0; scale: 1.6; } }
@keyframes burst { from { opacity: 1; transform: scale(.5); } to { opacity: 0; transform: scale(1.8) translateY(-20px); } }
@keyframes fade { to { opacity: 0; } }
@keyframes drift { from { transform: translateX(-120px); } to { transform: translateX(110vw); } }
@keyframes hurt { 0%, 100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 0 6px var(--red); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes earwiggle { 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(-8deg); } 96% { transform: rotate(5deg); } }
@keyframes jump { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-14px) scale(1.04, .96); } 60% { transform: translateY(0) scale(1.06, .94); } }
@keyframes keyglow { 50% { box-shadow: inset 0 calc(var(--k) * -.1) 0 color-mix(in srgb, var(--c) 70%, #333), 0 0 0 3px #fff, 0 0 18px 6px var(--c); } }
@keyframes arrow { 50% { transform: translateY(-5px); } }
@keyframes fingerbob { 50% { transform: translateY(-6px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes cloudmove { from { transform: translateX(-260px); } to { transform: translateX(1100px); } }
@keyframes tpulse { 50% { scale: 1.08; } }
@keyframes floatup { from { opacity: 1; transform: translate(-50%, 0) scale(.8); } 30% { transform: translate(-50%, -14px) scale(1.15); } to { opacity: 0; transform: translate(-50%, -50px) scale(1); } }
@keyframes flicker { from { opacity: .85; height: 120px; } to { opacity: 1; height: 138px; } }
@keyframes flame { from { transform: scaleY(.85); } to { transform: scaleY(1.12); } }
@keyframes nebula { from { opacity: .6; transform: scale(1); } to { opacity: 1; transform: scale(1.12); } }
@keyframes stageshake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-7px, 3px); } 40% { transform: translate(6px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }
@keyframes starin { 0% { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.25) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }

/* ---------- extra life in the scenes ---------- */
.countdown { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; pointer-events: none; }
.countdown b { font-size: clamp(4rem, 14vw, 7.5rem); font-weight: 700; color: #fff; -webkit-text-stroke: 3px rgba(60, 40, 160, .55); paint-order: stroke; text-shadow: 0 8px 0 rgba(60, 40, 160, .35), 0 0 40px rgba(255, 255, 255, .8); animation: countpop .6s ease-out; }
.sky-bird { position: absolute; width: 46px; animation: birdfly 26s linear infinite; }
.sky-bird.b1 { top: 22%; }
.sky-bird.b2 { top: 34%; width: 36px; animation-duration: 33s; animation-delay: -14s; }
.bird-svg { display: block; width: 100%; overflow: visible; animation: bob 1.6s ease-in-out infinite; }
.bird-svg .wing { transform-box: fill-box; transform-origin: 80% 100%; animation: flap .32s ease-in-out infinite alternate; }
.bird-svg .wing.back { animation-delay: -.08s; }
.hot-air { position: absolute; top: 30%; left: 0; width: clamp(34px, 5vw, 50px); opacity: .85; animation: hotair 70s linear infinite; animation-delay: -25s; }
.hot-air svg { display: block; width: 100%; animation: bob 4s ease-in-out infinite; }
.rainbow { position: absolute; left: 50%; bottom: 14%; width: min(80%, 620px); transform: translateX(-50%); opacity: 0; }
.rainbow svg { display: block; width: 100%; }
.stage.rainbow-on .rainbow { animation: rainbowshow 3s ease-in-out; }
.hills .flower { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 3s ease-in-out infinite; }
.balloon-svg { transform-origin: 50% 30%; animation: breathe 2.6s ease-in-out infinite; }
.balloon:nth-child(odd) .balloon-svg { animation-delay: -1.3s; }
.ufo { position: absolute; top: 30%; left: 0; width: clamp(60px, 9vw, 96px); animation: ufofly 34s linear infinite; animation-delay: -6s; }
.ufo svg { display: block; width: 100%; animation: bob 2.2s ease-in-out infinite; }
.ufo .ufo-lights circle { animation: twinkle .9s ease-in-out infinite alternate; }
.ufo .ufo-lights circle:nth-child(even) { animation-delay: -.45s; }
.ufo .beam { animation: beam 1.8s ease-in-out infinite alternate; }
.ship .rocket-svg { animation: hover 2.4s ease-in-out infinite; }
.ship.launch { transition: none; animation: launch 1.3s cubic-bezier(.5, 0, .9, .4) forwards; }
.ship.launch .flame { animation-duration: .05s; scale: 1.5; }
.meteor .rock-svg { transition: scale .08s; }
.meteor.hit .rock-svg { scale: .9; }
.typetext span.just { animation: letterpop .35s ease-out; }
.progress > i { background: linear-gradient(90deg, var(--green) 0%, #86efac 25%, var(--green) 50%, #86efac 75%, var(--green) 100%); background-size: 200% 100%; animation: shimmer 2.5s linear infinite; position: relative; }
.progress > i::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 18px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8)); border-radius: 999px; }
@keyframes countpop { 0% { transform: scale(2.2); opacity: 0; } 40% { transform: scale(.9); opacity: 1; } 70% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes birdfly { from { transform: translateX(-80px); } to { transform: translateX(1100px); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.6); } }
@keyframes hotair { from { transform: translateX(1050px); } to { transform: translateX(-80px); } }
@keyframes rainbowshow { 0% { opacity: 0; transform: translateX(-50%) scale(.85); } 25%, 70% { opacity: .9; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(1); } }
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .98); } }
@keyframes ufofly { 0% { transform: translateX(-120px) rotate(-4deg); } 50% { transform: translateX(560px) rotate(4deg); } 100% { transform: translateX(1150px) rotate(-4deg); } }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes launch { 0% { transform: translateY(0); } 15% { transform: translateY(6px); } 100% { transform: translateY(calc(-1 * var(--lift, 600px))); } }
@keyframes letterpop { 0% { transform: scale(1); } 40% { transform: scale(1.35) translateY(-4px); } 100% { transform: scale(1); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes beam { from { opacity: .06; } to { opacity: .22; } }