/* ============================================================
   Game Motion — Animation Design System
   ai-GAME · Vanilla CSS · iOS-safe
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Duration */
  --gm-dur-fast:   150ms;
  --gm-dur-normal: 300ms;
  --gm-dur-slow:   500ms;
  --gm-dur-reward: 800ms;

  /* Easing */
  --gm-ease-out:    cubic-bezier(.25,.46,.45,.94);
  --gm-ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --gm-ease-spring: cubic-bezier(.175,.885,.32,1.275);

  /* Scale */
  --gm-scale-sm: 1.05;
  --gm-scale-md: 1.12;
  --gm-scale-lg: 1.25;

  /* Colors (game-specific) */
  --gm-gold:   #ffd700;
  --gm-xp:     #a78bfa;
  --gm-hp:     #f87171;
  --gm-shield: #60a5fa;
  --gm-streak: #fb923c;
}

/* ── Keyframes ──────────────────────────────────────────────── */

/* Horizontal shake — wrong answer */
@keyframes gmShake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-8px); }
  30%      { transform: translateX(7px); }
  45%      { transform: translateX(-6px); }
  60%      { transform: translateX(5px); }
  75%      { transform: translateX(-3px); }
  90%      { transform: translateX(2px); }
}

/* Scale bounce — correct answer / badge unlock */
@keyframes gmPop {
  0%   { transform: scale(0.6); opacity: 0; }
  50%  { transform: scale(1.15); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

/* Gentle pulse — CTA buttons, streak indicators */
@keyframes gmPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(88,166,255,0.4); }
  50%      { box-shadow: 0 0 0 10px rgba(88,166,255,0); }
}

/* Slide up entrance */
@keyframes gmSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slide down entrance */
@keyframes gmSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Glow ring — reward moments */
@keyframes gmGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(255,215,0,0.3); }
  50%      { box-shadow: 0 0 20px rgba(255,215,0,0.6); }
}

/* Float — idle decorative elements */
@keyframes gmFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Score flash — number change emphasis */
@keyframes gmFlash {
  0%   { color: var(--gm-gold); transform: scale(1.3); }
  100% { color: inherit; transform: scale(1); }
}

/* Ring progress fill (used with stroke-dashoffset) */
@keyframes gmRingFill {
  from { stroke-dashoffset: var(--gm-ring-from, 283); }
  to   { stroke-dashoffset: var(--gm-ring-to, 0); }
}

/* Burst particle — radial outward */
@keyframes gmBurstParticle {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--gm-bx,30px), var(--gm-by,-30px)) scale(0); }
}

/* Territory cell claim */
@keyframes gmClaim {
  0%   { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  50%  { transform: scale(1.15) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Streak fire */
@keyframes gmFire {
  0%, 100% { transform: scaleY(1); opacity: 0.9; }
  50%      { transform: scaleY(1.2); opacity: 1; }
}

/* ── Utility Classes ────────────────────────────────────────── */
.gm-shake   { animation: gmShake var(--gm-dur-slow) ease; }
.gm-pop     { animation: gmPop var(--gm-dur-slow) var(--gm-ease-bounce); }
.gm-pulse   { animation: gmPulse 2s ease infinite; }
.gm-slide-up   { animation: gmSlideUp var(--gm-dur-normal) var(--gm-ease-out) both; }
.gm-slide-down { animation: gmSlideDown var(--gm-dur-normal) var(--gm-ease-out) both; }
.gm-glow    { animation: gmGlow 2s ease infinite; }
.gm-float   { animation: gmFloat 3s ease-in-out infinite; }
.gm-flash   { animation: gmFlash var(--gm-dur-normal) var(--gm-ease-out); }
.gm-claim   { animation: gmClaim var(--gm-dur-reward) var(--gm-ease-bounce) both; }

/* Stagger helper — combine with .gm-slide-up */
.gm-stagger-1 { animation-delay: 100ms; }
.gm-stagger-2 { animation-delay: 200ms; }
.gm-stagger-3 { animation-delay: 300ms; }
.gm-stagger-4 { animation-delay: 400ms; }
.gm-stagger-5 { animation-delay: 500ms; }

/* ── Quiz Score HUD ─────────────────────────────────────────── */
.gm-score-hud {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: rgba(18,28,61,0.85);
  border: 1px solid var(--line, #243055);
  border-radius: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.gm-score-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  color: var(--text, #e6edf3);
}
.gm-score-item .gm-icon {
  font-size: 1.1rem;
}
.gm-score-item .gm-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 1.5ch;
  text-align: center;
  transition: color var(--gm-dur-normal) ease, transform var(--gm-dur-normal) ease;
}
.gm-score-item .gm-val.gm-flash {
  color: var(--gm-gold);
  transform: scale(1.3);
}
.gm-streak-bar {
  height: 4px;
  background: var(--line, #243055);
  border-radius: 2px;
  overflow: hidden;
  flex: 1 1 100%;
  min-width: 100px;
}
.gm-streak-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gm-streak), var(--gm-gold));
  border-radius: 2px;
  transition: width var(--gm-dur-normal) var(--gm-ease-spring);
  width: 0%;
}

/* ── Progress Ring ──────────────────────────────────────────── */
.gm-ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gm-ring-wrap svg { transform: rotate(-90deg); }
.gm-ring-bg {
  fill: none;
  stroke: var(--line, #243055);
  stroke-width: 4;
}
.gm-ring-fg {
  fill: none;
  stroke: var(--ok, #2ea043);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--gm-dur-reward) var(--gm-ease-spring);
}
.gm-ring-label {
  position: absolute;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text, #e6edf3);
}

/* ── Territory Grid ─────────────────────────────────────────── */
.gm-territory {
  display: grid;
  gap: 4px;
  max-width: 400px;
  margin: 0 auto;
}
.gm-cell {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: default;
  transition: transform var(--gm-dur-fast) ease,
              background var(--gm-dur-normal) ease,
              border-color var(--gm-dur-normal) ease,
              box-shadow var(--gm-dur-normal) ease;
}
/* Locked */
.gm-cell[data-state="locked"] {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.15);
}
/* Available — can answer */
.gm-cell[data-state="available"] {
  background: rgba(88,166,255,0.08);
  border-color: rgba(88,166,255,0.3);
  color: var(--accent, #58a6ff);
  cursor: pointer;
}
.gm-cell[data-state="available"]:hover {
  transform: scale(1.08);
  border-color: var(--accent, #58a6ff);
  box-shadow: 0 0 12px rgba(88,166,255,0.25);
}
/* Owned */
.gm-cell[data-state="owned"] {
  background: rgba(46,160,67,0.15);
  border-color: rgba(46,160,67,0.4);
  color: var(--ok, #2ea043);
}
/* Just claimed */
.gm-cell[data-state="claimed"] {
  background: rgba(255,215,0,0.15);
  border-color: var(--gm-gold);
  color: var(--gm-gold);
  animation: gmClaim var(--gm-dur-reward) var(--gm-ease-bounce) both;
}
/* Enemy */
.gm-cell[data-state="enemy"] {
  background: rgba(248,81,73,0.1);
  border-color: rgba(248,81,73,0.3);
  color: var(--bad, #f85149);
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gm-shake, .gm-pop, .gm-pulse, .gm-slide-up, .gm-slide-down,
  .gm-glow, .gm-float, .gm-flash, .gm-claim {
    animation: none !important;
  }
  .gm-streak-fill, .gm-ring-fg, .gm-cell {
    transition: none !important;
  }
}