/* Candy design system: bright, glossy, thick white borders, chunky shadows. */
:root {
  --ink: #2b2466;
  --sky-1: #8ae8ff; --sky-2: #1fa6ff;
  --grass-1: #a6ea5a; --grass-2: #3fbf49;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --soft: cubic-bezier(.4, 0, .2, 1);
  --g: min(70vw, 34dvh);       /* big character size on learn screens */
  --font-ui: "Fredoka", "Baloo Da 2", "Baloo Bhaijaan 2", system-ui, sans-serif;
  --font-glyph: "Fredoka", "Baloo Da 2", "Baloo Bhaijaan 2", sans-serif;
}
/* Candy colours: --l light, --c base, --d dark. Any element can take a .c-* class. */
.c-red    { --l: #ff9a8f; --c: #ff3d3d; --d: #c62828; }
.c-orange { --l: #ffd180; --c: #ff9100; --d: #e65100; }
.c-yellow { --l: #fff59d; --c: #ffd600; --d: #f0a000; }
.c-green  { --l: #9dffb3; --c: #22c55e; --d: #15803d; }
.c-blue   { --l: #8fc2ff; --c: #2979ff; --d: #1a4fbf; }
.c-purple { --l: #e4a1ff; --c: #9d2bf0; --d: #6a1b9a; }
.c-pink   { --l: #ffa3c7; --c: #ff2d87; --d: #c2185b; }
.c-teal   { --l: #8af2ea; --c: #00bfa5; --d: #00796b; }
.c-custom { --l: color-mix(in srgb, var(--c) 68%, white); --d: color-mix(in srgb, var(--c) 72%, black); }

* { box-sizing: border-box; margin: 0; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--font-ui); font-weight: 700; color: var(--ink); background: var(--sky-2); touch-action: manipulation; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
img { -webkit-user-drag: none; }
svg.icon { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Screens & scene layers ---------- */
.screen { position: fixed; inset: 0; display: none; }
.screen.on { display: grid; }
#scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
#scene .layer { position: absolute; inset: 0; }
#scene .layer.in { animation: layerIn .5s var(--soft) both; }
@keyframes layerIn { from { opacity: 0; } }

/* ---------- Chunky round button ---------- */
.btn {
  position: relative; display: grid; place-items: center; border-radius: 50%; width: 58px; height: 58px;
  background: linear-gradient(180deg, var(--l), var(--c) 55%, var(--d)); color: #fff;
  border: 4px solid #fff; box-shadow: 0 5px 0 var(--d), 0 10px 16px #0003; transition: transform .12s var(--soft);
}
.btn::before { content: ""; position: absolute; left: 18%; right: 18%; top: 8%; height: 26%; border-radius: 50%; background: #ffffff66; }
.btn:active { transform: translateY(3px) scale(.96); box-shadow: 0 2px 0 var(--d), 0 6px 10px #0003; }
.btn.big { width: 74px; height: 74px; }
.btn.off { filter: saturate(.2); opacity: .8; }

/* ---------- Pill label ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; background: #fff;
  color: var(--ink); font-size: 17px; box-shadow: 0 4px 0 #0002, inset 0 0 0 3px #ffe56e;
}

/* ---------- Category card (hub) ---------- */
.card {
  position: relative; border-radius: 28px; border: 5px solid #fff; overflow: hidden; display: grid; grid-template-rows: 1fr auto;
  background: repeating-linear-gradient(90deg, var(--c) 0 14px, color-mix(in srgb, var(--c) 80%, white) 14px 28px);
  box-shadow: 0 8px 0 var(--d), 0 16px 26px #0004; transition: transform .15s var(--spring); aspect-ratio: 1 / 1.04;
}
.card:active { transform: scale(.95); }
.card .art { display: flex; align-items: center; justify-content: center; gap: 4%; padding: 10% 8% 6%; min-height: 0; }
.card .bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px 8px 14px; background: var(--d); color: #fff; font-size: clamp(16px, 4.6vw, 21px); line-height: 1.1; text-align: start; }
.card .bar i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.card .bar i::after { content: ""; width: 0; height: 0; border-left: 11px solid var(--c); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
[dir="rtl"] .card .bar i::after { transform: scaleX(-1); margin: 0 3px 0 0; }
.card .spark { position: absolute; width: 12px; height: 12px; color: #fff; animation: twinkle 2.4s ease-in-out infinite; }
.card .spark:nth-child(2) { animation-delay: -.8s; }
.card .spark:nth-child(3) { animation-delay: -1.6s; }
@keyframes twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .4; } 50% { transform: scale(1.1) rotate(20deg); opacity: 1; } }
.card .mini { width: 30%; aspect-ratio: 1; }

/* ---------- Sticker: emoji in a white circle ---------- */
.sticker { position: relative; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 5px 0 #0002, 0 8px 16px #0002, inset 0 -6px 0 #0000000d; }
.sticker::before { content: ""; position: absolute; left: 18%; right: 18%; top: 6%; height: 22%; border-radius: 50%; background: #ffffffaa; }
.sticker .pic { width: 74%; height: 74%; object-fit: contain; display: grid; place-items: center; font-size: 1px; line-height: 1; }
.sticker .pic.emoji { font-size: 0.56em; }   /* em = sticker size (set font-size on .sticker) */

/* ---------- Character (letters, numbers, shapes, colours) ---------- */
.chara { width: 100%; height: 100%; overflow: visible; font-family: var(--font-glyph); font-weight: 700; }
.chara .glyph { paint-order: stroke; stroke: var(--d); stroke-width: 10; stroke-linejoin: round; }
.chara .blink { animation: blink 4.6s infinite; transform-box: fill-box; transform-origin: 50% 55%; }
.chara .eye.r .blink { animation-delay: .07s; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.08); } }
.chara .wave { animation: wave 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 90%; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-22deg); } 80% { transform: rotate(14deg); } 90% { transform: rotate(-16deg); } }
.chara .talk { transform-box: fill-box; transform-origin: 50% 20%; }
.talking .chara .talk { animation: talk .22s ease-in-out infinite alternate; }
@keyframes talk { from { transform: scaleY(.5); } to { transform: scaleY(1.15); } }
.breathe { animation: breathe 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: scale(1.03, .97); } }

/* ---------- Word label under a character ---------- */
.word {
  display: inline-block; padding: 4px 22px 6px; border-radius: 999px; background: #fff; color: var(--ink);
  font-size: clamp(22px, 6.4vw, 34px); line-height: 1.15; box-shadow: 0 5px 0 #0002, inset 0 0 0 3px var(--c, #ffe56e);
  white-space: nowrap;
}

/* ---------- Tap feedback ---------- */
.ripple { position: fixed; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 5px solid #fff; pointer-events: none; z-index: 30; }
.spark-dot { position: fixed; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; z-index: 30; }
.confetti { position: fixed; width: 12px; height: 18px; margin: -6px 0 0 -9px; pointer-events: none; z-index: 31; border-radius: 3px; }

/* ---------- Top bar shared by play screens ---------- */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 14px 0; position: relative; z-index: 5; }
.topbar .mid { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nav { display: flex; justify-content: space-between; align-items: center; padding: 0 18px calc(16px + env(safe-area-inset-bottom)); position: relative; z-index: 5; }
[dir="rtl"] .nav .btn svg { transform: scaleX(-1); }

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