/* The Arena — live games as tiny battles. Intensity rides the CSS var --i
   (0..1): more actors, faster loops, bigger chaos. Satire on purpose;
   the record lives on the board. */

.bouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; margin-top: 18px; }

.bout { border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.bout-head {
  display: flex; justify-content: space-between;
  font: 400 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.bout-head .live-dot { color: var(--loss); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.15; } }

.stage { position: relative; height: 130px; overflow: hidden; }
.stage .actor { position: absolute; line-height: 1; user-select: none; }
.flip { transform: scaleX(-1); display: inline-block; }

.bout-score {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 12px 2px; font: 700 17px var(--disp); letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bout-score .num { font-family: var(--mono); font-size: 16px; }
.bout-cap { padding: 2px 12px 12px; font: italic 11.5px var(--sans); color: var(--muted); }

/* ── Naval: warship pounds a sailboat ── */
.stage-naval { background: linear-gradient(#0d1420 62%, #14263c 62%); }
.naval-ship { font-size: 52px; left: 8%; bottom: 26px; animation: bob 3s ease-in-out infinite; }
.naval-boat { font-size: 26px; right: 12%; bottom: 30px; animation: sink calc(5s - var(--i) * 2.5s) ease-in-out infinite; transform-origin: bottom; }
.naval-boom { font-size: calc(18px + var(--i) * 14px); right: 16%; bottom: 52px; animation: pop calc(2.4s - var(--i) * 1.6s) infinite; opacity: 0; }
.naval-boom.b2 { right: 26%; bottom: 40px; animation-delay: 0.9s; }
.naval-splash { font-size: 15px; right: 30%; bottom: 26px; animation: pop 3.1s infinite 0.4s; opacity: 0; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes sink { 40% { transform: rotate(-14deg) translateY(4px); } 70% { transform: rotate(9deg); } }
@keyframes pop { 0%, 60% { opacity: 0; transform: scale(0.4); } 68% { opacity: 1; transform: scale(1.15); } 85% { opacity: 0.7; } 100% { opacity: 0; transform: scale(0.6); } }

/* ── Army men: plastic soldiers exchange fire ── */
.stage-armymen { background: linear-gradient(#101708 70%, #1b2410 70%); }
.army-l, .army-r { bottom: 22px; font-size: 22px; letter-spacing: 3px; filter: sepia(1) saturate(3) hue-rotate(60deg); }
.army-l { left: 6%; animation: creep calc(4s - var(--i) * 2s) ease-in-out infinite; }
.army-r { right: 6%; animation: creep calc(4s - var(--i) * 2s) ease-in-out infinite reverse; }
.army-flash { font-size: calc(13px + var(--i) * 9px); left: 48%; bottom: 34px; animation: pop calc(1.8s - var(--i) * 1.1s) infinite; opacity: 0; }
.army-flash.f2 { left: 40%; bottom: 26px; animation-delay: 0.5s; }
.army-flash.f3 { left: 56%; bottom: 28px; animation-delay: 1.1s; }
@keyframes creep { 50% { transform: translateX(calc(8px + var(--i) * 10px)); } }

/* ── Slugfest: off the top rope ── */
.stage-slugfest { background: radial-gradient(ellipse at 50% 90%, #241018 0%, #170b10 70%); }
.ring-rope { position: absolute; left: 8%; right: 8%; height: 2px; background: var(--loss); opacity: 0.5; }
.ring-rope.r1 { bottom: 24px; } .ring-rope.r2 { bottom: 40px; opacity: 0.35; }
.slug-wrestler { font-size: 42px; left: 50%; bottom: 26px; transform: translateX(-50%); animation: elbowdrop calc(2.6s - var(--i) * 1.4s) ease-in infinite; }
.slug-stars { font-size: calc(16px + var(--i) * 10px); left: 32%; bottom: 60px; animation: pop calc(2.6s - var(--i) * 1.4s) infinite 0.35s; opacity: 0; }
.slug-stars.s2 { left: 62%; bottom: 48px; animation-delay: 1.2s; }
@keyframes elbowdrop {
  0% { transform: translate(-50%, 0); }
  35% { transform: translate(-50%, -46px) rotate(-10deg); }
  55% { transform: translate(-50%, -40px) rotate(6deg); }
  75% { transform: translate(-50%, 2px) rotate(0); }
  82% { transform: translate(-50%, -6px); }
  100% { transform: translate(-50%, 0); }
}

/* ── Picnic: nothing is happening and it's lovely ── */
.stage-picnic { background: linear-gradient(#12202e 58%, #16301c 58%); }
.picnic-sun { font-size: 26px; right: 10%; top: 10px; animation: shine 6s ease-in-out infinite; }
.picnic-tree { font-size: 34px; left: 8%; bottom: 22px; }
.picnic-basket { font-size: 24px; left: 48%; bottom: 22px; }
.picnic-fly { font-size: 13px; left: 30%; bottom: 55px; animation: drift 9s ease-in-out infinite; }
.picnic-fly.p2 { left: 62%; bottom: 44px; animation-duration: 12s; animation-delay: 2s; }
@keyframes shine { 50% { transform: rotate(18deg) scale(1.07); } }
@keyframes drift { 33% { transform: translate(26px, -14px); } 66% { transform: translate(-14px, -26px); } }

/* ── Extras: duel at midnight ── */
.stage-extras { background: linear-gradient(#05070d 65%, #0d1120 65%); }
.extras-moon { font-size: 22px; right: 12%; top: 10px; }
.extras-f1 { font-size: 36px; left: 22%; bottom: 24px; animation: lunge calc(2.2s - var(--i) * 1.2s) ease-in-out infinite; }
.extras-f2 { font-size: 36px; right: 22%; bottom: 24px; animation: lunge calc(2.2s - var(--i) * 1.2s) ease-in-out infinite reverse; }
.extras-clash { font-size: 18px; left: 48%; bottom: 46px; animation: pop calc(2.2s - var(--i) * 1.2s) infinite 0.3s; opacity: 0; }
@keyframes lunge { 45% { transform: translateX(16px); } 55% { transform: translateX(14px); } }

/* ── Pregame: forces assembling ── */
.stage-pregame { background: linear-gradient(#0a0f18 66%, #101a12 66%); }
.pre-tent { font-size: 30px; left: 14%; bottom: 24px; }
.pre-tent.t2 { left: auto; right: 14%; }
.pre-fire { font-size: 18px; left: 49%; bottom: 24px; animation: flicker 0.9s ease-in-out infinite; }
@keyframes flicker { 50% { transform: scale(1.15); opacity: 0.85; } }

.arena-empty { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .stage * { animation: none !important; }
}