/* ================================================================================================
   CHESS ARENA KIT — shared broadcast/esports skin (2026-08-01, Wave 1).
   research/chess-arena-redesign-2026-08-01.md — binding rules V1-V14.

   Plain CSS, no build step. Any page that also loads chess-arena-kit.js can opt a region into the
   dark "arena stage" look by adding class="arena-stage" to a wrapping element.

   WHAT LIVES HERE vs WHAT DOESN'T:
     - The NEW broadcast chrome — pods, the matchup strip, neural "thinking" bars, the chyron
       (lower-third) treatment, the glide-move ghost piece, the capture ring, the win-moment stage
       flash, the Giant Slayer lower-third banner, and the claim-form "podium" wrapper — is all here,
       genuinely shared across host pages (landing-chess.html today; chess.html's own broadcast wave
       later reuses the same file per the spec's "ONE implementation, both pages mount it" rule).
     - Re-theming a HOST PAGE'S OWN pre-existing components (landing-chess.html's .panel / .esc /
       .wincard / .claimbox / .hero-nudge / board squares, etc.) is NOT here — every page's existing
       component set is different, so that re-theme is page-specific CSS, scoped the same way under
       .arena-stage, living in that page's own <style> block.

   V6 (binding): prefers-reduced-motion kills drift/particles/decorative animation but never delays a
   real state change — every animated rule here has a reduced-motion counterpart at the bottom that
   either removes the animation outright or drops it to instant. Transforms/opacity only; nothing
   here triggers layout thrash (glide/capture/flash all use position:absolute overlays, never resize
   or reflow the real board).
   ================================================================================================ */

.arena-stage {
  /* ---- token defaults (spec palette) ---- */
  --arena-0: #050a14;
  --arena-1: #0a1626;
  --arena-2: #101f36;
  --arena-line: rgba(140, 180, 230, .14);
  --arena-ink: #e8f0fb;
  --arena-dim: #8fa3bd;
  --arena-faint: #5b6e8a;
  --arena-gold: #f5c86b;
  --arena-sq-light: #2b3f5e;
  --arena-sq-dark: #16233a;
  --arena-you: #8fa3b8;
  --arena-openai: #19c39c;
  --arena-claude: #ff8a5c;
  --arena-grok: #a78bfa;
  --arena-gemini: #4dabf7;

  position: relative;
  background:
    radial-gradient(900px 480px at 50% -10%, var(--arena-2), transparent 62%),
    var(--arena-1);
  border-radius: 18px;
  padding: 16px 14px 20px;
  box-shadow: inset 0 1px 0 rgba(160, 200, 255, .06), 0 18px 44px rgba(2, 6, 14, .45);
  overflow: hidden;
}

/* ---------- matchup strip: compact, single-row, narrow-column safe (V7) ---------- */
.arena-matchup { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.arena-pod {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  border: 1px solid var(--arena-line); border-radius: 11px; padding: 7px 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0));
  transition: box-shadow .4s ease, border-color .4s ease;
}
.arena-pod.arena-ai { flex: 1 1 auto; }
.arena-pod .arena-sigil {
  flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font: 800 10px/1 -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -.02em;
  color: #04101f;
  background: linear-gradient(145deg, #fff, var(--pod-color, var(--arena-you)));
}
.arena-pod .arena-name {
  font-size: 12.5px; font-weight: 800; color: var(--arena-ink); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arena-vs {
  flex: none; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--arena-faint);
}

/* the "thinking" state — border/glow ring plus the neural bars, driven by ChessArenaKit.setThinking */
.arena-pod.think { border-color: transparent; }
.arena-pod.arena-ai.think {
  box-shadow: 0 0 0 1.5px var(--pod-color, var(--arena-openai)), 0 0 26px var(--pod-glow, rgba(25, 195, 156, .35));
}
.arena-neural { display: none; align-items: flex-end; gap: 3px; height: 13px; flex: none; margin-left: 2px; }
.arena-pod.think .arena-neural { display: flex; }
.arena-neural b {
  width: 3px; border-radius: 2px; background: var(--pod-color, var(--arena-openai));
  animation: arenaPulse 1s ease-in-out infinite;
}
.arena-neural b:nth-child(1) { height: 35%; animation-delay: 0s; }
.arena-neural b:nth-child(2) { height: 80%; animation-delay: .12s; }
.arena-neural b:nth-child(3) { height: 55%; animation-delay: .24s; }
.arena-neural b:nth-child(4) { height: 100%; animation-delay: .36s; }
.arena-neural b:nth-child(5) { height: 45%; animation-delay: .48s; }
@keyframes arenaPulse { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

@media (max-width: 360px) {
  .arena-pod { padding: 6px 8px; gap: 5px; }
  .arena-pod .arena-sigil { width: 22px; height: 22px; font-size: 9px; }
  .arena-pod .arena-name { font-size: 11.5px; }
}

/* ---------- chyron (lower-third): applied as an ADDITIONAL class on a host's own status line ---- */
.arena-chyron {
  position: relative; margin-top: 10px !important; padding: 10px 12px 10px 14px !important;
  border-radius: 8px; border-left: 3px solid var(--arena-gold);
  background: linear-gradient(90deg, rgba(245, 200, 107, .12), rgba(255, 255, 255, .02) 80%);
  color: var(--arena-ink) !important; font-weight: 600 !important;
}
.arena-chyron::before {
  content: "Live status"; display: block; font-size: 9px; letter-spacing: .18em; font-weight: 800;
  text-transform: uppercase; color: var(--arena-gold); margin-bottom: 3px;
}

/* ---------- glide ghost + capture ring ----------
   Both are throwaway overlay nodes created/removed by chess-arena-kit.js AFTER the host's own
   render() has already updated the real squares — purely decorative, never authoritative. Portable
   by design: the host only ever hands in element references and markup, never its own class names,
   so this half of the kit has no dependency on any host's board markup. */
.arena-ghost-piece {
  position: absolute; z-index: 5; pointer-events: none; will-change: transform;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5));
  transition: transform .48s cubic-bezier(.22, .9, .3, 1.15);
}
.arena-capture-ring {
  position: absolute; z-index: 4; pointer-events: none; display: grid; place-items: center;
}
.arena-capture-ring i {
  display: block; width: 70%; height: 70%; border-radius: 50%; border: 3px solid var(--arena-gold);
  opacity: .9; animation: arenaBoom .55s ease-out forwards;
}
@keyframes arenaBoom { to { transform: scale(2.3); opacity: 0; border-width: 1px; } }

/* ---------- win moment: stage flash + Giant Slayer lower-third + claim-form podium ---------- */
.arena-flash {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 50% 30%, var(--flash-color, var(--arena-gold)), transparent 70%);
  opacity: 0; animation: arenaFlash 1s ease-out forwards;
}
@keyframes arenaFlash { 0% { opacity: 0; } 12% { opacity: .55; } 100% { opacity: 0; } }

.arena-slayer-banner {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px;
  border-radius: 10px; border-left: 3px solid var(--arena-gold);
  background: linear-gradient(90deg, rgba(245, 200, 107, .18), rgba(255, 255, 255, .02) 85%);
  animation: arenaBannerIn .5s cubic-bezier(.22, .9, .3, 1.15) both;
}
.arena-slayer-tag {
  font: 800 15px/1 -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .04em;
  color: var(--arena-gold);
}
@keyframes arenaBannerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Podium: a spotlight glow behind the EXISTING claim form. The form itself (fields, copy, endpoint,
   logic) is untouched by this file and by the host page's JS — this is styling around it only. */
.arena-podium { position: relative; margin-top: 14px; padding-top: 4px; }
.arena-podium::before {
  content: ""; position: absolute; left: 50%; top: -6px; width: 70%; height: 90px;
  transform: translateX(-50%); pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(245, 200, 107, .22), transparent 72%);
}

/* ---------- V6: reduced motion kills decoration, never a state change ---------- */
@media (prefers-reduced-motion: reduce) {
  .arena-neural b { animation: none; transform: none; }
  .arena-ghost-piece { transition: none; }
  .arena-capture-ring i { animation: none; opacity: 0; }
  .arena-flash { animation: none; opacity: 0; }
  .arena-slayer-banner { animation: none; }
}