/* ============================================================
   Animations — Royal Game of Ur
   ============================================================ */

/* ============================================================
   Dice rolling
   ============================================================ */

@keyframes dice-tumble {
  0%   { transform: rotate(0deg) scale(1); }
  15%  { transform: rotate(-30deg) scale(1.1); }
  35%  { transform: rotate(22deg) scale(0.93); }
  55%  { transform: rotate(-14deg) scale(1.06); }
  75%  { transform: rotate(8deg) scale(1.02); }
  90%  { transform: rotate(-4deg) scale(1.01); }
  100% { transform: rotate(0deg) scale(1); }
}

.die.rolling {
  animation: dice-tumble 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
  pointer-events: none;
}

/* Stagger die animations */
#die-1.rolling { animation-delay: 0.04s; }
#die-2.rolling { animation-delay: 0.08s; }
#die-3.rolling { animation-delay: 0.12s; }

/* ============================================================
   Piece movement — slide arc
   ============================================================ */

@keyframes piece-move {
  0%   {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  30%  {
    transform: translateY(-18px) scale(1.18);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.piece.moving {
  animation: piece-move 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  z-index: 25;
  pointer-events: none;
}

/* ============================================================
   Piece capture — opponent's piece flying off
   ============================================================ */

@keyframes piece-capture {
  0%   { transform: scale(1) rotate(0deg);          opacity: 1; }
  30%  { transform: scale(1.35) rotate(15deg);       opacity: 0.85; }
  100% { transform: scale(0.2) rotate(-40deg) translateY(-30px); opacity: 0; }
}

.piece.capturing {
  animation: piece-capture 0.55s ease-in forwards;
  z-index: 25;
  pointer-events: none;
}

/* ============================================================
   Piece entering from home
   ============================================================ */

@keyframes piece-enter {
  0%   { transform: scale(0.35); opacity: 0; }
  65%  { transform: scale(1.2);  opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

.piece.entering {
  animation: piece-enter 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ============================================================
   Piece scoring — flies off the board
   ============================================================ */

@keyframes piece-score {
  0%   { transform: scale(1) translateY(0);            opacity: 1; }
  40%  { transform: scale(1.3) translateY(-12px);      opacity: 1; }
  100% { transform: scale(0.5) translateY(-40px);      opacity: 0; }
}

.piece.scoring {
  animation: piece-score 0.5s ease-out forwards;
  z-index: 25;
  pointer-events: none;
}

/* ============================================================
   Rosette glow pulse
   ============================================================ */

@keyframes rosette-glow {
  0%, 100% {
    box-shadow:
      0 0 6px var(--rosette-glow),
      inset 0 0 8px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow:
      0 0 18px var(--rosette-glow),
      0 0 30px var(--rosette-glow),
      inset 0 0 8px rgba(0, 0, 0, 0.2);
  }
}

.tile.rosette {
  animation: rosette-glow 3s ease-in-out infinite;
}

/* Stop glow when empty to avoid distraction; only glow if a piece can land here */
.tile.rosette.valid-move {
  animation: rosette-glow 1.2s ease-in-out infinite, valid-pulse 1.1s ease-in-out infinite;
}

/* ============================================================
   Extra turn flash — applied to 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); }
}

/* ============================================================
   Pass / No-move indicator float
   ============================================================ */

@keyframes pass-float {
  0%   { opacity: 0; transform: translateY(0); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-44px); }
}

.skip-indicator.show {
  animation: pass-float 1.1s ease-out forwards;
}

/* ============================================================
   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); }
}

/* ============================================================
   Rosette slow spin for the decorative symbol
   ============================================================ */

@keyframes rosette-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============================================================
   Valid-move tile pulse
   ============================================================ */

@keyframes valid-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.09);
  }
}

/* ============================================================
   Home-piece enter stagger
   ============================================================ */

@keyframes home-piece-in {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

.home-piece.new {
  animation: home-piece-in 0.3s 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;
}

/* ============================================================
   Roll button bounce ready
   ============================================================ */

@keyframes roll-ready {
  0%, 100% { transform: translateX(-50%) scale(1); }
  45%      { transform: translateX(-50%) scale(1.04); }
  70%      { transform: translateX(-50%) scale(0.98); }
}

#roll-btn.ready {
  animation: roll-ready 1.8s ease-in-out infinite;
}

/* ============================================================
   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; }