/* kindoo-games.css — Kindoo games design system + shell layout. v2.
 * SINGLE SOURCE: served by the games server at /shared/kindoo-games.css for
 * every game (change once → all games update). Read values via var(--kd-*);
 * never hard-code colors/spacing. Per-game styles go in the game's own style.css
 * and may use these tokens. */

:root {
  --kd-primary:#2563eb;  --kd-primary-ink:#ffffff;
  --kd-accent:#f59e0b;   --kd-success:#16a34a; --kd-danger:#dc2626; --kd-warning:#d97706;
  --kd-bg:#fef9f3;       --kd-surface:#ffffff; --kd-surface-2:#f1f5f9;
  --kd-ink:#1e293b;      --kd-ink-muted:#64748b; --kd-border:#e2e8f0; --kd-ring:#2563eb;
  --kd-radius:16px; --kd-radius-lg:24px; --kd-radius-pill:999px;
  --kd-space-1:4px; --kd-space-2:8px; --kd-space-3:12px; --kd-space-4:16px;
  --kd-space-5:20px; --kd-space-6:24px; --kd-space-8:32px; --kd-space-10:40px;
  --kd-font:"Baloo 2","Nunito",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --kd-text-sm:14px; --kd-text-base:18px; --kd-text-lg:22px;
  --kd-text-xl:28px; --kd-text-2xl:36px; --kd-text-display:52px;
  --kd-leading:1.4; --kd-weight:600; --kd-weight-bold:800;
  --kd-touch-min:48px; --kd-control-h:56px;
  --kd-shadow-1:0 1px 3px rgb(15 23 42 / .12); --kd-shadow-2:0 8px 24px rgb(15 23 42 / .18);
  --kd-dur-fast:120ms; --kd-dur:200ms; --kd-dur-slow:360ms;
  --kd-ease:cubic-bezier(.2,.8,.2,1);
  --kd-z-hud:10; --kd-z-overlay:100; --kd-z-splash:300;
}

/* ── Base reset ─────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; height:100% }
body{
  font-family:var(--kd-font); font-size:var(--kd-text-base); line-height:var(--kd-leading);
  font-weight:var(--kd-weight); color:var(--kd-ink); background:var(--kd-bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  overflow:hidden; /* games never scroll the page; the play area scrolls if needed */
}
:focus-visible{ outline:3px solid var(--kd-ring); outline-offset:2px }
[hidden]{ display:none !important }

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

/* ── App shell (master layout: centred portrait column) ──── */
.kd-app{
  display:flex; flex-direction:column; height:100%;
  max-width:720px; margin:0 auto;
  /* Bottom gap is 32px (--kd-space-8) so #kd-game always breathes above the
     edge; other sides stay at space-3 (+ safe-area). */
  padding:var(--kd-space-3)
    max(var(--kd-space-3),env(safe-area-inset-right))
    max(var(--kd-space-8),env(safe-area-inset-bottom))
    max(var(--kd-space-3),env(safe-area-inset-left));
}
/* HUD row (in-column; not fixed). */
.kd-hud{
  display:flex; align-items:center; gap:var(--kd-space-2);
  padding:max(var(--kd-space-2),env(safe-area-inset-top)) 0 var(--kd-space-3);
}
.kd-hud__stats{ display:flex; align-items:center; gap:var(--kd-space-2) }
.kd-hud__spacer{ flex:1 }
/* Countdown timer chip (customize.timer); turns danger-red in the last 10s. */
.kd-hud__timer{ font-variant-numeric:tabular-nums; font-weight:var(--kd-weight-bold) }
.kd-hud__timer.is-low{ background:var(--kd-danger); color:#fff }
/* Game play area fills the rest and NEVER scrolls (x/y). DOM-grid games size
   their items to fit this box via ctx.fitGrid (docs/styles/games/layout.md §10);
   canvas games scale-to-fit (§3). `safe center` centers the content and falls
   back to top-aligned only as a clip guard. */
.kd-game{
  flex:1; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; justify-content:safe center;
}
/* Chrome hidden until a round is in progress (loading/start show splash/dialog). */
.kd-app:not([data-phase="playing"]):not([data-phase="result"]) .kd-hud,
.kd-app[data-phase="loading"] .kd-game{ visibility:hidden }

/* ── Play-screen background (per-game, optional; shell fills with an <img>) ── */
.kd-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--kd-bg) }
.kd-bg__img{ width:100%; height:100%; object-fit:cover; display:block }
/* Splash may carry its own background image behind the logo/countdown. */
.kd-splash .kd-bg__img{ position:absolute; inset:0 }
.kd-splash__logo-box, .kd-splash__count{ position:relative; z-index:1 }

/* ── Flash / splash screen (OFF by default; shell fills it per play_config.splash) ── */
.kd-splash{
  position:fixed; inset:0; z-index:var(--kd-z-splash);
  display:grid; place-items:center; background:#0f172a; /* dark slate (spec) */
  transition:opacity var(--kd-dur-slow) var(--kd-ease);
}
.kd-splash.is-hiding{ opacity:0; pointer-events:none }

/* Option 1 — logo video card (350×220). */
.kd-splash__logo-box{
  width:350px; height:220px; max-width:86vw; border-radius:var(--kd-radius-lg);
  overflow:hidden; box-shadow:var(--kd-shadow-2); background:#000;
  animation:kd-pop var(--kd-dur-slow) var(--kd-ease);
}
.kd-splash__logo-box video{ width:100%; height:100%; object-fit:cover; display:block }

/* Option 2 — countdown 3 → 1. */
.kd-splash__count{
  font-family:var(--kd-font); font-weight:var(--kd-weight-bold);
  font-size:clamp(96px,28vw,200px); line-height:1; color:#fff;
  text-shadow:0 8px 30px rgb(37 99 235 / .55);
}
.kd-splash__count.is-pop{ animation:kd-count 900ms var(--kd-ease) both }
@keyframes kd-count{
  0%{ opacity:0; transform:scale(.4) }
  35%{ opacity:1; transform:scale(1.12) }
  70%{ transform:scale(1) }
  100%{ opacity:.25; transform:scale(.9) }
}

/* ── Button ─────────────────────────────────────────────── */
.kd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--kd-space-2);
  min-height:var(--kd-control-h); min-width:var(--kd-touch-min);
  padding:0 var(--kd-space-5); border:0; border-radius:var(--kd-radius);
  font:inherit; font-weight:var(--kd-weight-bold); line-height:1; cursor:pointer;
  background:var(--kd-surface-2); color:var(--kd-ink);
  transition:transform var(--kd-dur-fast) var(--kd-ease), filter var(--kd-dur-fast);
}
.kd-btn:active{ transform:scale(.96) }
.kd-btn--primary{ background:var(--kd-primary); color:var(--kd-primary-ink) }
/* Big kid-friendly CTA — used by every dialog's primary action (Bắt đầu / Tiếp
   tục / Chơi lại). Fixed width so all dialogs match; candy-orange with a chunky
   3D base + a lively glow pulse; presses down on :active. */
.kd-btn--cta{
  /* Derived from --kd-primary via color-mix (one colour → every shade) so the CTA
     follows the chosen màu chủ đạo. Custom props are reused by the keyframes. */
  --cta-top:color-mix(in srgb, var(--kd-primary) 72%, #fff);
  --cta-base:color-mix(in srgb, var(--kd-primary) 68%, #000);
  --cta-glow:color-mix(in srgb, var(--kd-primary) 38%, transparent);
  --cta-glow-strong:color-mix(in srgb, var(--kd-primary) 62%, transparent);
  min-width:13rem; height:64px; padding:0 var(--kd-space-6);
  font-size:var(--kd-text-lg); font-weight:var(--kd-weight-bold);
  color:var(--kd-primary-ink); border-radius:var(--kd-radius-pill);
  background:linear-gradient(180deg,var(--cta-top),var(--kd-primary));
  box-shadow:0 6px 0 var(--cta-base), 0 8px 22px var(--cta-glow);
  animation:kd-cta-glow 2s var(--kd-ease) infinite;
}
.kd-btn--cta:hover{ filter:brightness(1.05) }
.kd-btn--cta:active{ animation:none; transform:translateY(4px);
  box-shadow:0 2px 0 var(--cta-base), var(--kd-shadow-1) }
@keyframes kd-cta-glow{
  0%,100%{ box-shadow:0 6px 0 var(--cta-base), 0 8px 22px var(--cta-glow) }
  50%{ box-shadow:0 6px 0 var(--cta-base), 0 12px 30px var(--cta-glow-strong) }
}
.kd-btn--ghost{ background:transparent; box-shadow:inset 0 0 0 2px var(--kd-border) }
.kd-btn--danger{ background:var(--kd-danger); color:#fff }
.kd-btn--icon{ width:var(--kd-touch-min); height:var(--kd-touch-min); padding:0;
  border-radius:var(--kd-radius-pill) }
.kd-btn:disabled{ filter:grayscale(.4) opacity(.6); cursor:not-allowed }
.kd-toggle[aria-pressed="false"]{ opacity:.55 }

/* ── Chip / badge ───────────────────────────────────────── */
.kd-chip{
  display:inline-flex; align-items:center; gap:var(--kd-space-1);
  padding:var(--kd-space-1) var(--kd-space-3); border-radius:var(--kd-radius-pill);
  background:var(--kd-surface-2); color:var(--kd-ink); font-weight:var(--kd-weight-bold);
}

/* ── Card / panel ───────────────────────────────────────── */
.kd-card{ background:var(--kd-surface); border-radius:var(--kd-radius-lg);
  padding:var(--kd-space-6); box-shadow:var(--kd-shadow-1) }

/* ── Overlay + dialog (start / result) ──────────────────── */
.kd-overlay{
  position:fixed; inset:0; z-index:var(--kd-z-overlay);
  display:grid; place-items:center; background:rgb(255 255 255 / .35);
  animation:kd-fade var(--kd-dur) var(--kd-ease);
}
/* The class `display` would otherwise override the UA [hidden] rule. */
.kd-overlay[hidden]{ display:none }
.kd-dialog{
  background:var(--kd-surface); border-radius:var(--kd-radius-lg);
  padding:var(--kd-space-8); max-width:min(92vw,520px); text-align:center;
  box-shadow:var(--kd-shadow-2); animation:kd-pop var(--kd-dur) var(--kd-ease);
}
.kd-dialog__title{ font-size:var(--kd-text-2xl); font-weight:var(--kd-weight-bold);
  margin:0 0 var(--kd-space-4) }
.kd-dialog__msg{ font-size:var(--kd-text-lg); color:var(--kd-ink); margin:0 }
.kd-dialog__actions{ display:flex; gap:var(--kd-space-3); justify-content:center;
  margin-top:var(--kd-space-6); flex-wrap:wrap }
.kd-praise{ font-size:var(--kd-text-xl); font-weight:var(--kd-weight-bold);
  color:var(--kd-accent); margin:var(--kd-space-3) 0 0 }

@keyframes kd-fade{ from{ opacity:0 } }
@keyframes kd-pop{ from{ opacity:0; transform:scale(.9) } }

/* ── Animation utilities ─────────────────────────────────────
 * Curated, rewritten from animate.css v4.1.1 (keyframes only; not the lib).
 * Opt-in: add the base `.kd-anim` + one effect class. Honors reduced-motion via
 * the global rule above. Maps to game moments:
 *   entrance → kd-anim-fadeIn / fadeInUp / zoomIn / bounceIn
 *   correct/win → kd-anim-tada / heartBeat
 *   playful pop → kd-anim-rubberBand / wobble / pulse
 *   wrong → kd-anim-shakeX
 * e.g. <div class="kd-anim kd-anim-bounceIn">  ·  kd-anim-fast/slow/infinite */
.kd-anim{
  animation-duration:var(--kd-anim-dur,.8s);
  animation-fill-mode:both;
}
.kd-anim-fast{ --kd-anim-dur:.5s }
.kd-anim-slow{ --kd-anim-dur:1.3s }
.kd-anim-infinite{ animation-iteration-count:infinite }

.kd-anim-fadeIn{ animation-name:kd-fadeIn }
.kd-anim-fadeInUp{ animation-name:kd-fadeInUp }
.kd-anim-zoomIn{ animation-name:kd-zoomIn }
.kd-anim-bounceIn{ animation-name:kd-bounceIn }
.kd-anim-pulse{ animation-name:kd-pulse; animation-timing-function:ease-in-out }
.kd-anim-tada{ animation-name:kd-tada }
.kd-anim-heartBeat{ animation-name:kd-heartBeat; --kd-anim-dur:1.3s; animation-timing-function:ease-in-out }
.kd-anim-rubberBand{ animation-name:kd-rubberBand }
.kd-anim-shakeX{ animation-name:kd-shakeX }
.kd-anim-wobble{ animation-name:kd-wobble }

@keyframes kd-fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes kd-fadeInUp{
  from{ opacity:0; transform:translate3d(0,40px,0) }
  to{ opacity:1; transform:translate3d(0,0,0) }
}
@keyframes kd-zoomIn{
  from{ opacity:0; transform:scale3d(.3,.3,.3) }
  50%{ opacity:1 }
}
@keyframes kd-bounceIn{
  from,20%,40%,60%,80%,to{ animation-timing-function:cubic-bezier(.215,.61,.355,1) }
  0%{ opacity:0; transform:scale3d(.3,.3,.3) }
  20%{ transform:scale3d(1.1,1.1,1.1) }
  40%{ transform:scale3d(.9,.9,.9) }
  60%{ opacity:1; transform:scale3d(1.03,1.03,1.03) }
  80%{ transform:scale3d(.97,.97,.97) }
  to{ opacity:1; transform:scale3d(1,1,1) }
}
@keyframes kd-pulse{
  from{ transform:scale3d(1,1,1) }
  50%{ transform:scale3d(1.05,1.05,1.05) }
  to{ transform:scale3d(1,1,1) }
}
@keyframes kd-tada{
  from{ transform:scale3d(1,1,1) }
  10%,20%{ transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg) }
  30%,50%,70%,90%{ transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg) }
  40%,60%,80%{ transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg) }
  to{ transform:scale3d(1,1,1) }
}
@keyframes kd-heartBeat{
  0%{ transform:scale(1) } 14%{ transform:scale(1.3) } 28%{ transform:scale(1) }
  42%{ transform:scale(1.3) } 70%{ transform:scale(1) }
}
@keyframes kd-rubberBand{
  from{ transform:scale3d(1,1,1) }
  30%{ transform:scale3d(1.25,.75,1) }
  40%{ transform:scale3d(.75,1.25,1) }
  50%{ transform:scale3d(1.15,.85,1) }
  65%{ transform:scale3d(.95,1.05,1) }
  75%{ transform:scale3d(1.05,.95,1) }
  to{ transform:scale3d(1,1,1) }
}
@keyframes kd-shakeX{
  from,to{ transform:translate3d(0,0,0) }
  10%,30%,50%,70%,90%{ transform:translate3d(-10px,0,0) }
  20%,40%,60%,80%{ transform:translate3d(10px,0,0) }
}
@keyframes kd-wobble{
  from{ transform:translate3d(0,0,0) }
  15%{ transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg) }
  30%{ transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg) }
  45%{ transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg) }
  60%{ transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg) }
  75%{ transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg) }
  to{ transform:translate3d(0,0,0) }
}