/* ==========================================================
   tokens.css — the design system
   Typography · palette · spacing · buttons · panels · motion
   ========================================================== */
:root {
  /* palette */
  --ink: #2a1a5e;
  --ink-2: #170c3d;
  --cream: #fff7e6;
  --white: #ffffff;
  --dad: #3d8bff;
  --dad-d: #2158b8;
  --kid: #ff5fa2;
  --kid-d: #bf2f78;
  --sun: #ffd23f;
  --sun-d: #d9980a;
  --mint: #3ddc97;
  --mint-d: #17986a;
  --tomato: #ff5d4d;
  --tomato-d: #b82f23;
  --grape: #8b5cff;
  --grape-d: #5a30cf;
  --sky: #6fd3ff;
  --sky-d: #2a8fc4;
  --bg1: #6a4bff;
  --bg2: #26146e;

  /* shape */
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;

  /* type */
  --font-display: "Baloo 2", "Fredoka", "Fredoka One", "Arial Rounded MT Bold", "SF Pro Rounded", "Chalkboard SE", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
  --font-body: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Segoe UI", system-ui, sans-serif;
  --font-bn: "Noto Sans Bengali", "Hind Siliguri", "Bangla MN", "Kohinoor Bangla", "Shonar Bangla", "Nirmala UI", "Vrinda", "FreeSans", sans-serif;
  --f-display: var(--font-display), var(--font-bn);
  --f-body: var(--font-body), var(--font-bn);

  /* layout */
  --hud-h: 96px;
  --gap: clamp(8px, 2vmin, 18px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: #26146e; overscroll-behavior: none; }
body {
  font-family: var(--f-body);
  color: var(--ink);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
input { font: inherit; }
[hidden] { display: none !important; }
.hidden { display: none !important; }

#app { position: fixed; inset: 0; overflow: hidden; isolation: isolate; }

/* ---------- display text: "sticker" lettering ---------- */
.sticker {
  font-family: var(--f-display);
  font-weight: 800;
  color: #fff;
  -webkit-text-stroke: 0.2em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.09em 0 var(--ink-2);
  letter-spacing: 0.01em;
  line-height: 1;
}
.sticker.sun { color: var(--sun); }
.sticker.dad { color: #9cc7ff; }
.sticker.kid { color: #ffa6cf; }
.sticker.mint { color: #8cf5c4; }

/* ---------- buttons: big, bouncy, candy ---------- */
.btn {
  --b: var(--sun); --bd: var(--sun-d); --fg: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  min-height: 64px; padding: 0.2em 1.4em;
  border-radius: 999px;
  border: 4px solid var(--ink);
  background: var(--b);
  color: var(--fg);
  font-family: var(--f-display); font-weight: 800; font-size: clamp(1.25rem, 3.6vmin, 1.8rem);
  line-height: 1.05; text-align: center;
  box-shadow: 0 7px 0 var(--bd), 0 7px 0 4px var(--ink), 0 16px 22px rgba(20, 8, 60, 0.35);
  transition: transform 0.14s cubic-bezier(0.3, 1.8, 0.5, 1), box-shadow 0.14s, filter 0.2s;
  -webkit-user-select: none; user-select: none;
}
.btn::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 5px; height: 34%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  pointer-events: none;
}
@media (hover: hover) { .btn:hover { transform: translateY(-2px) scale(1.03); } }
.btn:active, .btn.pressed {
  transform: translateY(6px) scale(0.98);
  box-shadow: 0 1px 0 var(--bd), 0 1px 0 4px var(--ink), 0 4px 8px rgba(20, 8, 60, 0.3);
}
.btn:focus-visible { outline: 5px dashed #fff; outline-offset: 5px; }
.btn[disabled], .btn.off { filter: grayscale(0.85) brightness(0.9); pointer-events: none; }

.btn-xl { min-height: 86px; font-size: clamp(1.7rem, 6vmin, 2.8rem); padding-inline: 1.7em; }
.btn-sm { min-height: 52px; font-size: clamp(1rem, 2.8vmin, 1.3rem); padding-inline: 1.1em; }
.btn-round { width: 60px; height: 60px; min-height: 0; padding: 0; font-size: 1.7rem; }
.btn-round.sm { width: 50px; height: 50px; font-size: 1.4rem; }

.btn-sun { --b: var(--sun); --bd: var(--sun-d); --fg: var(--ink); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45); }
.btn-mint { --b: var(--mint); --bd: var(--mint-d); --fg: var(--ink); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.4); }
.btn-sky { --b: var(--sky); --bd: var(--sky-d); --fg: var(--ink); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.4); }
.btn-cream { --b: var(--cream); --bd: #cdbd9b; --fg: var(--ink); }
.btn-tomato, .btn-grape, .btn-dad, .btn-kid { --fg: #fff; -webkit-text-stroke: 0.17em var(--ink); paint-order: stroke fill; }
.btn-tomato { --b: var(--tomato); --bd: var(--tomato-d); }
.btn-grape { --b: var(--grape); --bd: var(--grape-d); }
.btn-dad { --b: var(--dad); --bd: var(--dad-d); }
.btn-kid { --b: var(--kid); --bd: var(--kid-d); }

.pulse { animation: btnPulse 1.1s ease-in-out infinite; }
@keyframes btnPulse { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }

/* ---------- panels ---------- */
.panel {
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 0 var(--ink-2), 0 18px 30px rgba(20, 8, 60, 0.3);
  padding: 14px 20px;
}
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 2.1em; padding: 0.18em 0.6em;
  background: #fff; border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: 0 3px 0 var(--ink);
  font-family: var(--f-display); font-weight: 800; font-size: 1rem; color: var(--ink);
}

/* ---------- toggle switch ---------- */
.sw { position: relative; width: 84px; height: 46px; border-radius: 999px; border: 4px solid var(--ink); background: #b9aee0; transition: background 0.2s; flex: none; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); transition: transform 0.25s cubic-bezier(0.3, 1.8, 0.5, 1); }
.sw[aria-checked="true"] { background: var(--mint); }
.sw[aria-checked="true"]::after { transform: translateX(38px); }
.sw:focus-visible { outline: 4px dashed var(--ink); outline-offset: 4px; }

/* ---------- shared keyframes ---------- */
@keyframes popIn { 0% { transform: scale(0.2) translateY(30px); opacity: 0; } 60% { transform: scale(1.1) translateY(-4px); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shakeX { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes bounceY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.pop-in { animation: popIn 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }

/* ---------- reduced motion ---------- */
:root[data-rm="1"] *, :root[data-rm="1"] *::before, :root[data-rm="1"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}
:root[data-rm="1"] .pulse { animation: none !important; }