/* ============================================================
   Animations — Mancala
   ============================================================ */

/* ============================================================
   Stone sowing — individual stone travelling to destination pit
   ============================================================ */

@keyframes stone-sow {
  0%   { transform: scale(1);       opacity: 1; }
  30%  { transform: scale(1.4) translateY(-6px); opacity: 1; }
  70%  { transform: scale(0.9);     opacity: 0.85; }
  100% { transform: scale(1);       opacity: 1; }
}

/* Applied to pits receiving a stone during sowing sequence */
.pit.stone-arriving {
  animation: stone-sow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ============================================================
   Stone drop into store
   ============================================================ */

@keyframes store-drop {
  0%   { transform: scale(1);    }
  25%  { transform: scale(1.08); }
  55%  { transform: scale(0.95); }
  100% { transform: scale(1);    }
}

.store.stone-dropped {
  animation: store-drop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ============================================================
   Capture flash — captured pit
   ============================================================ */

@keyframes capture-burst {
  0%   { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0);    background: var(--pit-bg); }
  25%  { box-shadow: 0 0 0 8px rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.5); border-color: #f87171; }
  60%  { box-shadow: 0 0 0 14px rgba(248, 113, 113, 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0);    background: var(--pit-bg); border-color: var(--pit-border); }
}

.pit.capture-flash {
  animation: capture-burst 0.65s ease-out forwards;
}

/* ============================================================
   Legal-move pit pulse
   ============================================================ */

@keyframes pit-legal-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px var(--accent),
      0 0 10px var(--accent-glow);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--accent),
      0 0 22px var(--accent-glow);
    filter: brightness(1.1);
  }
}

/* ============================================================
   Extra-turn flash — player info bar
   ============================================================ */

@keyframes extra-turn-flash {
  0%   {
    box-shadow: none;
    border-color: var(--border);
  }
  20%  {
    box-shadow: 0 0 0 4px var(--accent-glow), 0 0 32px var(--accent-glow);
    border-color: var(--accent);
  }
  60%  {
    box-shadow: 0 0 0 6px var(--accent-glow), 0 0 40px var(--accent-glow);
    border-color: var(--accent);
  }
  100% {
    box-shadow: 0 0 16px var(--accent-glow);
    border-color: var(--accent);
  }
}

.player-info.extra-turn {
  animation: extra-turn-flash 0.6s ease-out forwards;
}

/* ============================================================
   Message overlay pop-in
   ============================================================ */

@keyframes msg-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.65); }
  55%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

#message-overlay:not(.hidden) {
  animation: msg-pop 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ============================================================
   Error shake
   ============================================================ */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  18%      { transform: translateX(-7px); }
  36%      { transform: translateX(7px); }
  54%      { transform: translateX(-5px); }
  72%      { transform: translateX(5px); }
  90%      { transform: translateX(-2px); }
}

.shake {
  animation: shake 0.38s ease-out;
}

/* ============================================================
   Fade-in utility
   ============================================================ */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-in { animation: fade-in 0.3s ease-out; }

/* ============================================================
   Game over entrance
   ============================================================ */

@keyframes game-over-in {
  0%   { opacity: 0; transform: scale(0.88); }
  55%  { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

#game-over-overlay:not(.hidden) {
  animation: game-over-in 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   Winner shimmer
   ============================================================ */

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.winner-text {
  background: linear-gradient(90deg, var(--accent), #fff9c4, var(--accent));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 2.2s infinite linear;
}

/* ============================================================
   Screen slide-in (menus & overlays)
   ============================================================ */

@keyframes screen-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   Turn banner pop
   ============================================================ */

@keyframes turn-pulse {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.78); }
  55%  { transform: translateX(-50%) scale(1.06); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ============================================================
   Pit count bump — when count changes
   ============================================================ */

@keyframes count-bump {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.9);  }
  100% { transform: scale(1);    }
}

.pit-count.bump {
  animation: count-bump 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ============================================================
   Store count increment
   ============================================================ */

@keyframes store-count-up {
  0%   { transform: scale(1);    color: var(--accent); }
  35%  { transform: scale(1.4);  color: #fff; }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1);    color: var(--accent); }
}

.store-count.increment {
  animation: store-count-up 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ============================================================
   Toast slide-in (controlled by JS via .show class)
   ============================================================ */

.toast {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ============================================================
   Lobby waiting dots
   ============================================================ */

@keyframes dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-5px); opacity: 1; }
}

.waiting-dots span {
  display: inline-block;
  animation: dot-bounce 1.3s ease-in-out infinite;
}
.waiting-dots span:nth-child(2) { animation-delay: 0.18s; }
.waiting-dots span:nth-child(3) { animation-delay: 0.36s; }

/* ============================================================
   Pit select (picking up stones)
   ============================================================ */

@keyframes pit-pickup {
  0%   { transform: scale(1);    }
  30%  { transform: scale(0.88); }
  65%  { transform: scale(1.05); }
  100% { transform: scale(1);    }
}

.pit.picking-up {
  animation: pit-pickup 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}