/* ═══════════════════════════════════════════════════════
   GAMES PREMIUM CSS — Visual overhaul (C8)
   Shared animations, particles, design system
   ═══════════════════════════════════════════════════════ */

:root {
  --game-bg-easy: linear-gradient(135deg, #1a2a3a 0%, #0f1923 100%);
  --game-bg-medium: linear-gradient(135deg, #2a1a0a 0%, #1a0f05 100%);
  --game-bg-hard: linear-gradient(135deg, #2a0a0a 0%, #1a0505 100%);
}

/* ── Shared Animations ─────────────────────────────── */
@keyframes boss-idle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes boss-hit {
  0% { filter: brightness(2) saturate(0); transform: scale(1.1); }
  100% { filter: brightness(1) saturate(1); transform: scale(1); }
}
@keyframes boss-death {
  0% { transform: scale(1) rotate(0); opacity: 1; }
  50% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(0) rotate(45deg); opacity: 0; }
}
@keyframes player-attack {
  0% { transform: translateX(0); }
  30% { transform: translateX(20px) scale(1.1); }
  100% { transform: translateX(0) scale(1); }
}
@keyframes damage-float {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(1.3); }
}
@keyframes hp-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(239,68,68,.3); }
  50% { box-shadow: 0 0 12px rgba(239,68,68,.7); }
}
@keyframes hp-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes confetti-fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(300px) rotate(720deg); opacity: 0; }
}
@keyframes screen-shake {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-2px, 4px); }
  80% { transform: translate(2px, -4px); }
}
@keyframes skill-announce {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes slide-in-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes flash-green {
  0% { box-shadow: 0 0 0 rgba(34,197,94,0); }
  50% { box-shadow: 0 0 20px rgba(34,197,94,.5); }
  100% { box-shadow: 0 0 0 rgba(34,197,94,0); }
}
@keyframes flash-red {
  0% { box-shadow: 0 0 0 rgba(239,68,68,0); }
  50% { box-shadow: 0 0 20px rgba(239,68,68,.5); }
  100% { box-shadow: 0 0 0 rgba(239,68,68,0); }
}
@keyframes speed-lines {
  0% { opacity: 0; transform: translateX(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(40px); }
}
@keyframes count-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes tile-place {
  0% { transform: scale(0.8) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes checkmark {
  0% { transform: scale(0) rotate(-45deg); }
  50% { transform: scale(1.3) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes podium-rise {
  0% { transform: translateY(40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ── Shared Components ─────────────────────────────── */
.game-particle {
  position: absolute;
  pointer-events: none;
  font-size: 20px;
  animation: damage-float 1s ease-out forwards;
  z-index: 100;
}
.game-damage-float {
  position: absolute;
  font-size: 24px;
  font-weight: 700;
  pointer-events: none;
  animation: damage-float 1s ease-out forwards;
  z-index: 100;
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.game-combo-badge {
  position: absolute;
  top: -10px; right: -10px;
  background: linear-gradient(135deg, #F59E0B, #EF4444);
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  animation: skill-announce .4s ease-out;
  z-index: 50;
  white-space: nowrap;
}
.game-confetti {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 200;
  overflow: hidden;
}
.game-confetti-piece {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 2px;
  animation: confetti-fall 2s ease-out forwards;
}
.game-countdown {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 300;
  font-size: 80px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.game-countdown span {
  animation: count-pop .6s ease-out;
}
.game-result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  animation: slide-in-up .4s ease-out;
}
.game-xp-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #22C55E, #16A34A);
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 15px;
  animation: slide-in-up .3s ease-out;
  z-index: 150;
  box-shadow: 0 4px 12px rgba(34,197,94,.3);
}

/* ── Boss Battle Premium ──────────────────────────── */
.boss-game.premium { position: relative; }
.boss-game.premium .boss-arena { position: relative; }
.boss-game.premium .boss-enemy .boss-avatar {
  animation: boss-idle 2s ease-in-out infinite;
  display: inline-block;
}
.boss-game.premium .boss-enemy.boss-hit-anim .boss-avatar {
  animation: boss-hit .4s ease-out;
}
.boss-game.premium .boss-enemy.boss-death-anim .boss-avatar {
  animation: boss-death .8s ease-out forwards;
}
.boss-game.premium .boss-player.player-attack-anim .boss-avatar {
  animation: player-attack .3s ease-out;
}
.boss-hp-fill.hp-critical {
  animation: hp-pulse 1s ease-in-out infinite;
}
.boss-hp-fill.hp-shimmer {
  background-size: 200% 100%;
  background-image: linear-gradient(90deg,
    #22C55E 0%, #4ADE80 25%, #22C55E 50%, #4ADE80 75%, #22C55E 100%);
  animation: hp-shimmer 2s linear infinite;
}
.boss-hp-fill.boss-hp-enemy.hp-shimmer {
  background-image: linear-gradient(90deg,
    #EF4444 0%, #F87171 25%, #EF4444 50%, #F87171 75%, #EF4444 100%);
}
.boss-game.premium .boss-arena.screen-shake-anim {
  animation: screen-shake .3s ease;
}

/* ── Racing Premium ───────────────────────────────── */
.race-game.premium .race-cell {
  transition: all .4s ease;
  position: relative;
}
.race-game.premium .race-cell.race-active {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 8px rgba(var(--primary-rgb, 192,57,43), .3);
}
.race-game.premium .race-car {
  transition: all .4s ease;
}
.race-speed-line {
  position: absolute;
  left: -20px;
  top: 50%;
  width: 20px; height: 2px;
  background: var(--primary);
  opacity: 0;
  animation: speed-lines .5s ease-out;
}
.race-game.premium .race-lane {
  background: linear-gradient(90deg, transparent 0%, var(--surface) 5%, var(--surface) 95%, transparent 100%);
  border-radius: 4px;
  padding: 2px 4px;
}
.race-podium {
  display: flex; align-items: flex-end; justify-content: center; gap: 8px;
  margin: 20px 0; height: 120px;
}
.race-podium-item {
  text-align: center;
  animation: podium-rise .5s ease-out;
  animation-fill-mode: both;
}
.race-podium-item:nth-child(1) { animation-delay: .3s; }
.race-podium-item:nth-child(2) { animation-delay: .1s; }
.race-podium-item:nth-child(3) { animation-delay: .5s; }
.race-podium-bar {
  width: 60px;
  border-radius: 6px 6px 0 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 4px;
  font-size: 12px; font-weight: 600; color: #fff;
}
.race-podium-bar.gold   { height: 80px; background: linear-gradient(180deg, #FFD700, #FFA500); }
.race-podium-bar.silver { height: 60px; background: linear-gradient(180deg, #C0C0C0, #A0A0A0); }
.race-podium-bar.bronze { height: 40px; background: linear-gradient(180deg, #CD7F32, #A0522D); }
.race-podium-name { font-size: 11px; color: var(--text2); margin-top: 4px; }

/* ── Sentence Builder Premium ─────────────────────── */
.sent-game.premium .sent-token {
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transition: all .2s ease;
}
.sent-game.premium .sent-token:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.sent-game.premium .sent-slot.sent-filled {
  animation: tile-place .3s ease-out;
}
.sent-game.premium .sent-feedback.sent-correct {
  animation: flash-green .6s ease-out;
}
.sent-game.premium .sent-feedback.sent-wrong {
  animation: flash-red .6s ease-out;
}
.sent-game.premium .sent-slot.sent-wrong-shake {
  animation: screen-shake .3s ease;
  border-color: #EF4444;
  color: #EF4444;
}
.sent-checkmark {
  display: inline-block;
  font-size: 36px;
  animation: checkmark .5s ease-out;
}
.sent-progress-dots {
  display: flex; gap: 6px; justify-content: center; margin: 12px 0;
}
.sent-progress-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--border);
  transition: background .3s;
}
.sent-progress-dot.dot-done { background: #22C55E; }
.sent-progress-dot.dot-current { background: var(--primary); transform: scale(1.2); }
.sent-progress-dot.dot-wrong { background: #EF4444; }

/* ── Mobile responsive (≤480px) ───────────────────── */
@media (max-width: 480px) {
  .game-countdown { font-size: 56px; }
  .game-particle { font-size: 16px; }
  .game-damage-float { font-size: 18px; }
  .game-combo-badge { font-size: 11px; padding: 3px 8px; }
  .race-podium { height: 90px; margin: 12px 0; gap: 6px; }
  .race-podium-bar { width: 44px; }
  .race-podium-bar.gold   { height: 60px; }
  .race-podium-bar.silver { height: 45px; }
  .race-podium-bar.bronze { height: 30px; }
  .race-podium-name { font-size: 10px; }
}