/* RJ App Studio — Kids Games shared design system
   Games set their theme by overriding these custom properties in :root:
   --theme, --theme-deep, --theme-soft, --bg, --bg-dots, --cta, --cta-deep */
:root{
  --ink:#2d2440;
  --cream:#fffdf7;
  --sun:#ffb300;
  --theme:#00acc1;
  --theme-deep:#00838f;
  --theme-soft:#b2ebf2;
  --bg:#d9f4f7;
  --cta:#43a047;
  --cta-deep:#2e7d32;
  --font:'Fredoka','Comic Sans MS',ui-rounded,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;min-height:100dvh;
  background:var(--bg);
  font-family:var(--font);color:var(--ink);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
.game-title{font-size:clamp(1.3rem,5vw,1.8rem);font-weight:700;margin:8px 0 0;text-align:center;color:var(--theme-deep)}
.game-sub{margin:2px 0 12px;opacity:.75;text-align:center;font-size:1rem;font-weight:500}
.stats{display:flex;gap:10px;justify-content:center;margin:6px 0 14px}
.chip{background:var(--cream);border-radius:999px;padding:6px 18px;font-weight:600;font-size:.95rem;box-shadow:0 3px 0 rgba(45,36,64,.12)}
.chip b{color:var(--theme-deep)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Win / end-of-game overlay */
.overlay{position:fixed;inset:0;background:rgba(45,36,64,.45);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.overlay.active{display:flex}
.win-card{background:var(--cream);border-radius:28px;padding:30px 26px;text-align:center;max-width:360px;width:100%;
  box-shadow:0 10px 0 rgba(45,36,64,.25);animation:rj-bounce-in .5s cubic-bezier(.34,1.56,.64,1)}
.win-card h2{font-size:1.9rem;color:var(--theme-deep);margin:0 0 4px}
.win-card .stars{font-size:1.8rem;letter-spacing:6px;margin:4px 0}
.win-card p{margin:8px 0;font-weight:500}
@keyframes rj-bounce-in{from{transform:scale(.6);opacity:0}}

/* Pressable pill buttons */
.btn{display:inline-block;text-decoration:none;font-family:var(--font);font-weight:600;border:none;border-radius:999px;
  padding:14px 26px;font-size:1.05rem;cursor:pointer;margin:6px 4px;color:#fff;transition:transform .1s}
.btn:active{transform:translateY(3px)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.btn-play{background:var(--cta);box-shadow:0 5px 0 var(--cta-deep)}
.btn-play:active{box-shadow:0 2px 0 var(--cta-deep)}
.btn-again{background:var(--theme);box-shadow:0 5px 0 var(--theme-deep)}
.btn-again:active{box-shadow:0 2px 0 var(--theme-deep)}

/* One-shot micro-interaction utilities (applied via RJKids.fx.*) */
.rj-bounce{animation:rj-fx-bounce .45s cubic-bezier(.34,1.56,.64,1)}
.rj-shake{animation:rj-fx-shake .3s}
.rj-pulse{animation:rj-fx-pulse .4s}
@keyframes rj-fx-bounce{35%{transform:scale(1.22)}70%{transform:scale(.94)}to{transform:scale(1)}}
@keyframes rj-fx-shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}to{transform:translateX(0)}}
@keyframes rj-fx-pulse{50%{transform:scale(1.1)}}

/* Confetti */
.confetti{position:fixed;top:-20px;border-radius:3px;pointer-events:none;z-index:60;animation:rj-fall linear forwards}
@keyframes rj-fall{to{transform:translateY(110vh) rotate(720deg)}}

@media (prefers-reduced-motion:reduce){
  .win-card{animation:none}
  .confetti{display:none}
  .rj-bounce,.rj-shake,.rj-pulse{animation:none}
}