/* Dice Fight: anime effects. Every effect has a text equivalent; reduced motion tones them down. */

.speedlines {
  position: absolute; inset: -20%;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 255, 255, 0.10) 0deg 2deg, transparent 2deg 9deg);
  -webkit-mask-image: radial-gradient(circle, transparent 22%, #000 60%);
  mask-image: radial-gradient(circle, transparent 22%, #000 60%);
  opacity: 0.5; pointer-events: none;
  animation: spin-slow 40s linear infinite;
}
.arena.rolling .speedlines { opacity: 1; animation-duration: 3s; }

.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }

/* Impact frame for doubles: flash, inverted burst, giant text */
.impact {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, var(--ink) 0deg 3deg, var(--white) 3deg 7deg);
  animation: impact 700ms ease-out forwards;
}
.impact span {
  font-family: var(--font-display); font-size: clamp(3.5rem, 18.75vw, 8.75rem); line-height: 0.9;
  color: var(--yellow); -webkit-text-stroke: 0.08em var(--ink); paint-order: stroke fill; text-shadow: 8px 8px 0 var(--magenta);
  transform: rotate(-8deg); text-align: center;
  animation: slam 420ms cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes impact {
  0% { opacity: 1; filter: invert(1); }
  12% { filter: invert(0); }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* Stamps: LOCKED / BUSTED */
.stamp {
  position: absolute; left: 50%; top: 46%;
  font-family: var(--font-display); font-size: clamp(3rem, 15vw, 6.25rem); letter-spacing: 0.06em;
  padding: 0.05em 0.3em; border: 8px solid currentColor; border-radius: 16px;
  transform: translate(-50%, -50%) rotate(-14deg);
  animation: stamp 520ms cubic-bezier(.2, 1.5, .4, 1) forwards;
  background: rgba(10, 10, 24, 0.55);
}
.stamp { z-index: 2; pointer-events: none; }
.stamp.locked { color: var(--cyan); }
.stamp.bust { color: var(--magenta); }
@keyframes stamp {
  0% { transform: translate(-50%, -50%) rotate(-14deg) scale(3); opacity: 0; }
  60% { transform: translate(-50%, -50%) rotate(-14deg) scale(0.92); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-14deg) scale(1); opacity: 1; }
}

.busted-card {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px;
  background: linear-gradient(160deg, rgba(255, 45, 149, 0.92), rgba(58, 26, 138, 0.92));
  animation: busted-in 480ms ease-out forwards;
}
.busted-card strong {
  font-family: var(--font-display); font-size: clamp(3.5rem, 18.75vw, 8.75rem); line-height: 0.9; color: var(--white);
  -webkit-text-stroke: 0.08em var(--ink); paint-order: stroke fill; text-shadow: 0.06em 0.06em 0 var(--ink);
  animation: shake 420ms ease-in-out;
}
.busted-card em { font-style: normal; font-weight: 800; font-size: 1.2rem; color: var(--cream); text-align: center; padding: 0 24px; max-width: 26ch; }
.busted-card.fade { animation: fade-out 600ms ease-in forwards; }
@keyframes busted-in { from { opacity: 0; transform: scale(1.2); } }

/* Lock God: shared interruption naming who ended the round */
.interrupt {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center;
  background: repeating-linear-gradient(-45deg, #c4001f 0 26px, #8a0016 26px 52px);
  animation: busted-in 300ms ease-out, fade-out 400ms ease-in 1500ms forwards;
}
.interrupt strong {
  font-family: var(--font-display); font-size: clamp(3.25rem, 16.25vw, 7.5rem); line-height: 0.9; color: var(--yellow);
  -webkit-text-stroke: 0.08em var(--ink); paint-order: stroke fill; text-shadow: 0.06em 0.06em 0 var(--ink);
  animation: shake 420ms ease-in-out;
}
.interrupt em { font-style: normal; font-weight: 900; font-size: 1.4rem; color: var(--white); padding: 0 24px; text-shadow: 2px 2px 0 var(--ink); }

/* Life lost: cracked heart */
.life-lost {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 2.75rem; color: var(--magenta); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill;
  animation: float-up 1100ms ease-out forwards; text-align: center;
}
.life-lost .crack { display: block; font-size: 4rem; animation: shake 360ms ease-in-out; }

/* Score pop */
.score-pop {
  position: absolute; left: 50%; top: 30%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 3.25rem; color: var(--yellow); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  animation: float-up 800ms ease-out forwards;
}

/* Shared announcement banner (round over, Lock God …) */
.banner {
  position: absolute; left: -10%; right: -10%; top: 40%;
  padding: 18px 12%; text-align: center; transform: rotate(-4deg);
  background: var(--yellow); color: var(--ink); border-block: 6px solid var(--ink);
  font-family: var(--font-display); font-size: clamp(2.25rem, 10vw, 4rem); text-transform: uppercase;
  animation: banner 1400ms ease-in-out forwards;
}
@keyframes banner {
  0% { transform: translateX(-110%) rotate(-4deg); }
  20%, 80% { transform: translateX(0) rotate(-4deg); }
  100% { transform: translateX(110%) rotate(-4deg); }
}

.screen-pulse { position: absolute; inset: 0; box-shadow: inset 0 0 0 10px var(--magenta); animation: pulse-edge 1s ease-in-out infinite; }
@keyframes pulse-edge { 50% { box-shadow: inset 0 0 60px 20px var(--magenta); } }

/* Shake the whole play screen on big moments */
.shake { animation: shake 360ms ease-in-out; }

@keyframes slam { 0% { transform: scale(2.6) rotate(-8deg); opacity: 0; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
.countdown-num.tick { animation-name: slam-flat; }
@keyframes slam-flat { 0% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -5px); }
  60% { transform: translate(-5px, 3px); } 80% { transform: translate(4px, -2px); }
}
@keyframes float-up { 0% { opacity: 0; transform: translate(-50%, 20px) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -60px) scale(1); } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pulse { to { transform: scale(1.12); } }
@keyframes bump { 40% { transform: scale(1.25); } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes feed-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes row-in { from { opacity: 0; transform: translateX(-30px) scale(0.95); } }

/* ---------- reduced motion: keep the information, drop the violence ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .speedlines { animation: none; }
  .impact { background: var(--ink); animation: fade-out 900ms ease-in 300ms forwards !important; animation-duration: 900ms !important; }
  .banner { transform: rotate(-4deg); animation: fade-out 600ms ease-in 1200ms forwards !important; animation-duration: 600ms !important; }
  .life-lost, .score-pop { animation: fade-out 600ms ease-in 600ms forwards !important; animation-duration: 600ms !important; }
}