/* ============================================================
   SHIP HAPPENS — Animations
   All keyframes, transitions, and motion effects.
   ============================================================ */

/* ── Scene Transitions ──────────────────────────────────────── */
@keyframes scene-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scene-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}

.scene--entering {
  animation: scene-fade-in 0.38s cubic-bezier(0.4,0,0.2,1) both;
}

.scene--exiting {
  animation: scene-fade-out 0.28s cubic-bezier(0.4,0,0.2,1) both;
  pointer-events: none;
}

/* ── Card Animations ─────────────────────────────────────────── */

/* Card enters from deck (lifts and zooms) */
@keyframes card-enter {
  0%   { opacity: 0; transform: translateY(80px) scale(0.7) rotateX(15deg); }
  60%  { opacity: 1; transform: translateY(-10px) scale(1.04) rotateX(-2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); }
}

/* Card reveals (flip) */
@keyframes card-flip-in {
  0%   { transform: rotateY(90deg) scale(0.85); opacity: 0; }
  50%  { transform: rotateY(0deg)  scale(1.05); opacity: 1; }
  100% { transform: rotateY(0deg)  scale(1);    opacity: 1; }
}

/* Card falls onto table */
@keyframes card-fall {
  0%   { transform: translateY(-40px) scale(1.1) rotate(-2deg); opacity: 1; }
  60%  { transform: translateY(6px)   scale(0.97) rotate(0.5deg); }
  80%  { transform: translateY(-3px)  scale(1.01); }
  100% { transform: translateY(0)     scale(1) rotate(0deg); opacity: 1; }
}

/* Card drop in (attributes stacking) */
@keyframes attr-drop {
  0%   { opacity: 0; transform: translateY(-24px) scale(0.8) rotate(var(--attr-rot, 0deg)); }
  70%  { transform: translateY(4px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mine card float */
@keyframes mine-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%       { transform: translateY(-14px) rotate(1deg); }
}

/* Deck wobble on hover */
@keyframes deck-wobble {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-2deg) translateY(-3px); }
  75%       { transform: rotate(2deg) translateY(-1px); }
}

/* ── Logo & Start ────────────────────────────────────────────── */
@keyframes anchor-bob {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%       { transform: translateY(-8px) rotate(5deg); }
}

/* ── Spinner ─────────────────────────────────────────────────── */
@keyframes pointer-bounce {
  0%   { transform: scale(1) rotate(0deg); }
  20%  { transform: scale(1.4) rotate(-8deg); }
  40%  { transform: scale(0.9) rotate(5deg); }
  60%  { transform: scale(1.2) rotate(-3deg); }
  80%  { transform: scale(0.95) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes result-pop {
  0%   { opacity: 0; transform: scale(0.6) translateY(20px); }
  60%  { transform: scale(1.08) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Particles & Background ─────────────────────────────────── */
@keyframes particle-float {
  0%         { transform: translateY(0px) rotate(0deg); opacity: 0; }
  10%        { opacity: 1; }
  90%        { opacity: 0.8; }
  100%       { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
}

@keyframes particle-burst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(
    calc(var(--dx, 60px)),
    calc(var(--dy, -80px))
  ) scale(0.3); opacity: 0; }
}

/* ── Glow & Pulse ────────────────────────────────────────────── */
@keyframes glow-pulse {
  from { opacity: 0.3; transform: scale(0.95); }
  to   { opacity: 0.65; transform: scale(1.1); }
}

@keyframes mine-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

@keyframes mine-type-pulse {
  from { opacity: 0.7; letter-spacing: 3px; }
  to   { opacity: 1;   letter-spacing: 5px; text-shadow: 0 0 30px var(--neon-pink); }
}

@keyframes card-glow-ring {
  0%, 100% { box-shadow: 0 0 12px rgba(168,85,247,0.4), 0 0 0 2px rgba(168,85,247,0.2); }
  50%       { box-shadow: 0 0 30px rgba(168,85,247,0.7), 0 0 0 3px rgba(168,85,247,0.5); }
}

/* ── UI Interactions ─────────────────────────────────────────── */
@keyframes slide-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-out-right {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes badge-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ── Applied animation utilities ─────────────────────────────── */

/* Mine card special floating applied in game scene */
.sh-card--mine.game__draw-card--enter {
  animation: card-enter 0.55s cubic-bezier(0.34,1.36,0.64,1) both, mine-float 3s 0.6s ease-in-out infinite;
}

/* Attribute cards glow when center active */
.sh-card--attribute .sh-card__frame {
  transition: box-shadow 0.2s ease;
}

/* Deck card hover responsive */
.game__deck-stack:hover {
  animation: deck-wobble 0.5s ease;
}

/* Turn player name pulse */
.game__turn-player {
  animation: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Active mine badge pulse */
.game__mine-badge {
  animation: mine-pulse 2s ease-in-out infinite;
}

/* Result player cards stagger */
.results__player-card:nth-child(1) { animation-delay: 0.05s; }
.results__player-card:nth-child(2) { animation-delay: 0.17s; }
.results__player-card:nth-child(3) { animation-delay: 0.29s; }
.results__player-card:nth-child(4) { animation-delay: 0.41s; }
.results__player-card:nth-child(5) { animation-delay: 0.53s; }
.results__player-card:nth-child(6) { animation-delay: 0.65s; }
.results__player-card:nth-child(7) { animation-delay: 0.77s; }
.results__player-card:nth-child(8) { animation-delay: 0.89s; }

/* Character card glow on center */
.game__center-char-card {
  animation: card-glow-ring 3s ease-in-out infinite;
}

/* ── Mobile Responsive ──────────────────────────────────────── */
@media (max-width: 480px) {
  .sh-card--normal { width: 100px; height: 140px; }
  .sh-card--small  { width: 60px;  height: 84px; }
  .sh-card--large  { width: min(310px, 84vw); }

  .sh-card--large .sh-card__name { font-size: 24px; }
  .sh-card--large .sh-card__desc { font-size: 15px; }

  .start__logo       { font-size: 40px; }
  .start__logo-anchor{ font-size: 40px; }

  .game__topbar { padding: 10px 12px 8px; }
  .game__turn-player { font-size: 16px; }

  .sh-modal { padding: 20px 16px; }
  .sh-btn--xl { padding: 14px 28px; font-size: 16px; min-width: 160px; }

  .spinner__wheel-wrap { width: min(300px, 88vw); height: min(300px, 88vw); }
}

@media (min-width: 768px) {
  /* Desktop: side-by-side layout for game screen */
  .scene--game { background: radial-gradient(ellipse at 30% 20%, #1a0830 0%, var(--bg-base) 65%); }

  .game__table {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 32px;
    gap: 32px;
  }

  .game__center-zone { flex: 1; }
  .game__discard-zone { width: 100px; }

  .game__deck-area {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 24px;
  }

  .sh-card--large { width: min(320px, 40vw); }
}

/* ── Background tile drift (diagonal, barely perceptible) ────── */
@keyframes bg-drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-280px, -280px); }
}

/* ── Petal fall: icons drift down from top like rose petals ───── */
@keyframes petal-fall {
  0%   { transform: translateY(0)     translateX(0)                  rotate(0deg)   scale(1);    opacity: 0; }
  5%   { opacity: 1; }
  50%  { transform: translateY(50vh)  translateX(calc(var(--drift-x, 0px) * 0.5))  rotate(180deg) scale(0.85); opacity: 0.9; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(110vh) translateX(var(--drift-x, 0px))               rotate(360deg) scale(0.5);  opacity: 0; }
}

/* ── Mine card flip ──────────────────────────────────────────── */
@keyframes mine-card-enter {
  from { opacity: 0; transform: scale(0.5) translateY(40px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes mine-winner-pop {
  0%   { opacity: 0; transform: translateY(20px) scale(0.8); }
  60%  { transform: translateY(-6px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mine-burst-dot {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--bx,0), var(--by,0)) scale(0); opacity: 0; }
}

/* ── Draw card: gentle hover float after landing ─────────────── */
@keyframes draw-card-hover {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

/* ── Card draw: speed streak (falls downward as card flies up) ── */
@keyframes streak-fall {
  0%   { transform: translateY(0) scaleY(1);   opacity: 0.9; }
  30%  { opacity: 0.8; }
  80%  { opacity: 0.3; }
  100% { transform: translateY(400vh) scaleY(0.05); opacity: 0; }
}

/* ── Card draw: icon particle rises upward after flip reveal ──── */
@keyframes particle-rise {
  0%   { transform: translateY(0) translateX(0) rotate(0deg) scale(1);    opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 0.8; }
  100% { transform: translateY(-90vh) translateX(var(--drift-x, 0px)) rotate(-280deg) scale(0.4); opacity: 0; }
}

/* ── Mine animation: white flash on continue ─────────────────── */
@keyframes flash-white-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes flash-white-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Mine animation: character card spins in from center ─────── */
@keyframes char-spin-in {
  0%   { transform: translateY(var(--char-start-y, 120px)) translateX(var(--char-start-x, 0px)) rotateY(0deg) scale(0.6); opacity: 0; }
  15%  { opacity: 1; }
  60%  { transform: translateY(-20px) translateX(0px) rotateY(540deg) scale(1.06); }
  80%  { transform: translateY(6px) translateX(0px) rotateY(720deg) scale(0.97); }
  100% { transform: translateY(0px) translateX(0px) rotateY(720deg) scale(1); opacity: 1; }
}

/* ── V animation: char card entry path (no rotateY — flipper handles the spin) ── */
@keyframes char-wrap-entry {
  0%   { transform: translateY(var(--char-start-y, 120px)) translateX(var(--char-start-x, 0px)) scale(0.6); opacity: 0; }
  15%  { opacity: 1; }
  60%  { transform: translateY(-20px) translateX(0px) scale(1.06); }
  80%  { transform: translateY(6px) translateX(0px) scale(0.97); }
  100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 1; }
}

/* ── V animation: char flipper rotates independently so back/front alternate ── */
/* 900° = 2.5 full turns = ends at 180° (front face showing) — no CSS class needed */
@keyframes charflipper-spin {
  0%   { transform: rotateY(0deg); }
  60%  { transform: rotateY(630deg); }
  80%  { transform: rotateY(810deg); }
  100% { transform: rotateY(900deg); }
}

/* ── V animation: hearts shoot straight up, fast, parallax layers ── */
@keyframes heart-float-up {
  0%   { transform: translateY(0);      opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translateY(-120vh); opacity: 0; }
}

.mine-anim__heart-float {
  animation: heart-float-up ease-in both;
  will-change: transform, opacity;
  user-select: none;
  line-height: 1;
}

/* ── Mini confetti burst (shorter version of end-game) ──────── */
@keyframes mini-confetti-fall {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--cx, 0px), var(--cy, 200px)) rotate(var(--cr, 360deg)) scale(0.4); opacity: 0; }
}