/* ==========================================================================
   Choose your arena: Core or Crypto, between the hero and the gameplay
   showcase. A port of the game's point-zero path choice
   (chart-arena-backend webgame/src/components/wt/PathChoice.tsx and
   PathChoiceArt.tsx): the same copy, heroes, skyline and loot, as one
   full-width stage. The heading hangs at its top like the hero's menu, and
   a laser seam runs down from it between the two halves. Markup comes from
   scripts-build/build-arena-choice.mjs.

   Each half is one link, clipped to its side of the seam (the clip is also
   its hit area). Where the browser has scroll-driven animations, the halves
   slide in from their own sides as the stage scrolls into view and the seam
   draws as they meet; elsewhere, and with reduced motion, the section is
   simply there. No script.

   Cost rules (measured, PR #186): nothing here may put a filter or blend
   over the whole stage, and nothing animated carries a mask. The seam is
   one thin element with box-shadow glows, painted once. Every size is in
   --u, one hundredth of the scene height, which both layouts set.
   ========================================================================== */

:root {
  /* Each road's tone: Core the landing violet, Crypto the game's success
     green. The light variant is the hover state, the seam glow and lit text. */
  --choice-core: #8b5cf6;
  --choice-core-light: #c4b5fd;
  --choice-crypto: #22c55e;
  --choice-crypto-light: #86efac;
  --choice-section: #05080d;
  --choice-panel: #0b0a14;
  --choice-card: #14121f;
  --choice-text: #ffffff;
  --choice-shadow: rgba(0, 0, 0, 0.6);
  --choice-inset-shadow: rgba(0, 0, 0, 0.5);
  --choice-divider: rgba(255, 255, 255, 0.10);
  --choice-pitch: rgba(255, 255, 255, 0.74);
  --choice-gloss: rgba(255, 255, 255, 0.4);
  /* Each half's flat tone, for browsers without color-mix(). */
  --choice-core-flat: #1b1530;
  --choice-crypto-flat: #0f2219;
  /* The seam's glow, ring by ring: white core, then each road's tone on its
     own side (the hero lasers' recipe, split in two). */
  --choice-beam-core: rgba(216, 180, 254, 0.95);
  --choice-beam-core-wide: rgba(139, 92, 246, 0.55);
  --choice-beam-crypto: rgba(134, 239, 172, 0.9);
  --choice-beam-crypto-wide: rgba(34, 197, 94, 0.45);
  --choice-beam-white: rgba(255, 255, 255, 0.9);
  /* Action plates: the hero CTA's violet, and a green the plate's dark ink
     reads on at 4.5:1 or better from its darkest stop. */
  --choice-core-plate-from: #5b21b6;
  --choice-core-plate-mid: #7c3aed;
  --choice-core-plate-to: #8b5cf6;
  --choice-crypto-plate-from: #16a34a;
  --choice-crypto-plate-mid: #22c55e;
  --choice-crypto-plate-to: #4ade80;
  --choice-ink: #052e16;
}

/* An opaque band with no backdrop blur, so the animated arena canvas behind
   it is never re-blurred. Rendering is skipped until it nears the viewport. */
.arena-choice {
  /* The stage's measures live here, so the rendering placeholder below is
     the stage's real height. --seam is half the seam's horizontal run: it
     leans "/" like the hero CTA's slant, from 50% + seam at the top to
     50% - seam at the bottom. */
  --seam: clamp(36px, 5vw, 80px);
  --head-h: 150px;
  --scene-h: clamp(424px, calc(50vw - 216px), 564px);
  --plate-h: 216px;
  --stage-h: calc(var(--head-h) + var(--scene-h) + var(--plate-h));
  --u: calc(var(--scene-h) / 100);
  position: relative;
  z-index: 5;
  background: var(--choice-section);
  border-top: 1px solid var(--choice-divider);
  color: var(--text-primary);
  content-visibility: auto;
  contain-intrinsic-size: auto var(--stage-h);
}

/* --- The stage: heading band, then two halves meeting on the seam -------- */
.arena-choice-stage {
  position: relative;
  width: 100%;
  height: var(--stage-h);
  /* clip, not hidden: a hidden box is a scroll container, and the view
     timelines inside would track it instead of the page (the slide would sit
     finished). hidden stays as the fallback where clip is unknown. */
  overflow: hidden;
  overflow: clip;
  background: var(--choice-panel);
}

/* The heading hangs from the stage's top edge like the hero's menu, and the
   seam runs down out of it. A violet-to-green rim, the page's dark face. */
.arena-choice-head {
  --cut: 30px;
  position: absolute;
  z-index: 4;
  top: 0;
  /* Centred on the page at every width; the slanted seam leaves its
     bottom edge a little right of centre, as a leaning line does. */
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px calc(var(--cut) + 38px) 26px;
  background: linear-gradient(90deg, var(--choice-core-light), var(--choice-crypto-light));
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, var(--cut) 100%);
  text-align: center;
  white-space: nowrap;
}

.arena-choice-head::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 2px 2px;
  background: var(--choice-section);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut) + 1px) 100%, calc(var(--cut) - 1px) 100%);
}

.arena-choice-head .section-title {
  font-size: clamp(40px, 4.4vw, 62px);
  line-height: 0.95;
}

.arena-choice-half {
  --tone: var(--choice-core);
  --tone-light: var(--choice-core-light);
  --flat: var(--choice-core-flat);
  --scene-top: var(--head-h);
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + var(--seam));
  display: block;
  overflow: hidden;
  overflow: clip;
  color: var(--choice-text);
  text-decoration: none;
  outline: none;
  background: var(--flat);
  /* The overhead light lives here, on the whole half, so it runs up behind
     the heading with no edge where the scene begins. */
  background:
    radial-gradient(ellipse 60% 42% at calc(50% + var(--shift)) 0%, color-mix(in srgb, var(--tone) 20%, transparent), transparent 72%),
    radial-gradient(ellipse 70% 60% at calc(50% + var(--shift)) 48%, color-mix(in srgb, var(--tone) 18%, transparent), transparent 70%),
    linear-gradient(180deg, var(--choice-card), color-mix(in srgb, var(--tone) 18%, var(--choice-panel)));
  -webkit-tap-highlight-color: transparent;
}

/* --shift centres each half's hero and plate in the part of the half that is
   visible all the way down, clear of the seam's slant. */
.arena-choice-half.is-core {
  --shift: calc(-1 * var(--seam));
  --slide: arena-choice-slide-core;
  left: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 2 * var(--seam)) 100%, 0 100%);
}

.arena-choice-half.is-crypto {
  --tone: var(--choice-crypto);
  --tone-light: var(--choice-crypto-light);
  --flat: var(--choice-crypto-flat);
  --shift: var(--seam);
  --slide: arena-choice-slide-crypto;
  right: 0;
  clip-path: polygon(calc(2 * var(--seam)) 0, 100% 0, 100% 100%, 0 100%);
}

/* The seam: one thin white beam rotated onto the slant, with stacked
   box-shadow rings for the glow (violet on Core's side, green on Crypto's),
   like the hero's lasers. Painted once; only its own transform ever moves. */
.arena-choice-seam {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.arena-choice-beam {
  --draw: arena-choice-beam-draw;
  position: absolute;
  top: 0;
  left: calc(50% + var(--seam));
  width: 4px;
  height: hypot(var(--stage-h), calc(2 * var(--seam)));
  translate: -50% 0;
  transform-origin: 50% 0;
  rotate: atan2(calc(2 * var(--seam)), var(--stage-h));
  border-radius: 2px;
  background: var(--choice-text);
  box-shadow:
    0 0 3px 1px var(--choice-text),
    0 0 8px 2px var(--choice-beam-white),
    -5px 0 12px 2px var(--choice-beam-core),
    5px 0 12px 2px var(--choice-beam-crypto),
    -16px 0 40px 6px var(--choice-beam-core-wide),
    16px 0 40px 6px var(--choice-beam-crypto-wide);
}

/* A spark of light running down the beam: a transform loop only. */
.arena-choice-beam::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  top: 0;
  height: 18%;
  border-radius: 3px;
  background: linear-gradient(180deg, transparent, var(--choice-text) 45%, var(--choice-text) 55%, transparent);
  box-shadow: 0 0 10px 3px var(--choice-beam-white);
  opacity: 0.9;
  animation: arena-choice-beam-run 3.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

/* --- Scene: rays, spotlight, skyline, floor, plinth, hero, loot ---------- */
.arena-choice-scene {
  position: absolute;
  top: var(--scene-top);
  left: 0;
  right: 0;
  height: var(--scene-h);
  isolation: isolate;
  pointer-events: none;
  transition: filter 220ms ease;
}

.arena-choice-scene > span {
  position: absolute;
  display: block;
}

/* Sunburst behind the hero. Static: a turning masked layer was the second
   biggest cost after the old seam. Scroll turns it a little (below). */
.arena-choice-rays {
  left: calc(50% + var(--shift));
  top: 46%;
  width: calc(130 * var(--u));
  height: calc(130 * var(--u));
  translate: -50% -50%;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--tone-light) 20%, transparent) 0deg 7deg,
    transparent 7deg 20deg
  );
  -webkit-mask-image: radial-gradient(circle closest-side, black 6%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, black 6%, transparent 100%);
}

/* Spotlight: a floor pool plus a soft cone from the top of the half, behind
   the heading. The cone's softness is in its own gradient: no blur filter,
   no blend mode. */
.arena-choice-spot {
  inset: 0;
  opacity: 0.85;
  background: radial-gradient(ellipse calc(67 * var(--u)) calc(34 * var(--u)) at calc(50% + var(--shift)) 84%, color-mix(in srgb, var(--tone) 46%, transparent), transparent 72%);
  transition: opacity 220ms ease;
}

.arena-choice-spot::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--scene-top));
  bottom: 18%;
  left: calc(50% + var(--shift));
  width: calc(90 * var(--u));
  translate: -50% 0;
  background: conic-gradient(
    from 155deg at 50% 0%,
    transparent 0deg,
    color-mix(in srgb, var(--tone-light) 22%, transparent) 14deg,
    color-mix(in srgb, var(--tone-light) 26%, transparent) 25deg,
    color-mix(in srgb, var(--tone-light) 22%, transparent) 36deg,
    transparent 50deg
  );
  -webkit-mask-image: linear-gradient(180deg, black 30%, transparent);
  mask-image: linear-gradient(180deg, black 30%, transparent);
}

.arena-choice-half:hover .arena-choice-spot,
.arena-choice-half:focus-visible .arena-choice-spot {
  opacity: 1;
}

/* Skyline: the chart the road is fought on, climbing behind the hero. */
.arena-choice-skyline {
  top: 5%;
  bottom: 28%;
  left: calc(50% + var(--shift));
  width: calc(108 * var(--u));
  translate: -50% 0;
  display: flex !important;
  align-items: flex-end;
  gap: calc(2.4 * var(--u));
  opacity: 0.62;
  -webkit-mask-image: linear-gradient(to top, transparent, black 30%);
  mask-image: linear-gradient(to top, transparent, black 30%);
}

.arena-choice-bar {
  position: relative;
  flex: 1;
  height: calc(var(--body) * 0.58 * var(--u));
  margin-bottom: calc(var(--bottom) * 0.58 * var(--u));
  border-radius: calc(0.8 * var(--u));
}

.arena-choice-bar::before {
  content: '';
  position: absolute;
  left: calc(50% - 1px);
  width: 2px;
  top: calc(var(--wick) * -0.58 * var(--u));
  bottom: calc(var(--wick) * -0.58 * var(--u));
  border-radius: 1px;
  background: inherit;
}

.arena-choice-bar.is-up { background: var(--tone); }
.arena-choice-bar.is-down { background: color-mix(in srgb, var(--tone) 40%, var(--choice-card)); }

/* Arena floor: a lit grid running to the horizon, across the whole half. */
.arena-choice-floor {
  left: -40%;
  right: -40%;
  bottom: 0;
  height: 52%;
  transform-origin: 50% 100%;
  transform: perspective(calc(70 * var(--u))) rotateX(66deg);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--tone-light) 34%, transparent) 0 1px, transparent 1px 4%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--tone-light) 34%, transparent) 0 1px, transparent 1px 14%);
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 50% 100%, black, transparent 78%);
  mask-image: radial-gradient(ellipse 60% 100% at 50% 100%, black, transparent 78%);
}

/* Plinth: a faceted podium in the road's tone. */
.arena-choice-plinth {
  --plinth-light: color-mix(in srgb, var(--tone-light) 62%, var(--choice-text));
  --plinth-mid: color-mix(in srgb, var(--tone) 42%, var(--choice-card));
  --plinth-dark: color-mix(in srgb, var(--tone) 12%, var(--choice-panel));
  left: calc(50% + var(--shift));
  bottom: calc(13 * var(--u));
  width: calc(60 * var(--u));
  height: calc(13 * var(--u));
  translate: -50% 0;
  background: linear-gradient(110deg, var(--plinth-mid), var(--plinth-dark));
  border-bottom: 3px solid var(--choice-panel);
  clip-path: polygon(9% 0, 91% 0, 100% 34%, 100% 100%, 0 100%, 0 34%);
}

.arena-choice-plinth::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 36%;
  background: linear-gradient(150deg, var(--plinth-light), var(--plinth-mid));
  border-bottom: 2px solid var(--plinth-light);
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
}

/* Hero: the roster's own fight stance, feet on the plinth's top face. The
   two face each other across the seam: Core's lobster as rendered, Crypto's
   Zip mirrored. */
.arena-choice-hero {
  left: calc(50% + var(--shift));
  bottom: calc(11.5 * var(--u));
  width: calc(91 * var(--u));
  height: calc(85.5 * var(--u));
  translate: -50% 0;
}

.is-crypto .arena-choice-hero {
  scale: -1 1;
}

.arena-choice-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  transform-origin: 50% 100%;
  animation: arena-choice-breathe 2.6s ease-in-out infinite;
  filter: drop-shadow(0 calc(1.2 * var(--u)) calc(2 * var(--u)) var(--choice-shadow));
}

/* Loot: gems and gold for play money, struck coins for real money. Hero
   pieces keep the game's composition around the hero; edge pieces spread to
   the screen edge and the seam. Far pieces hold still; the rest drift. */
.arena-choice-loot {
  top: calc(var(--y) * 1%);
  width: calc(var(--size) * var(--u));
  height: calc(var(--size) * var(--u));
  margin: calc(var(--size) * -0.5 * var(--u)) 0 0 calc(var(--size) * -0.5 * var(--u));
}

.arena-choice-loot.is-hero {
  left: calc(50% + var(--shift) + var(--dx) * var(--u));
}

.arena-choice-loot.is-edge {
  left: calc(var(--x) * 1%);
}

/* Depth of field sits on the still, innermost piece, so a drift only moves
   an already-filtered layer. */
.arena-choice-loot.is-far .arena-choice-float > * { filter: blur(calc(0.5 * var(--u))) brightness(0.6) saturate(0.85); }
.arena-choice-loot.is-mid .arena-choice-float > * { filter: drop-shadow(0 var(--u) calc(1.6 * var(--u)) var(--choice-shadow)); }
.arena-choice-loot.is-near .arena-choice-float > * { filter: blur(calc(0.9 * var(--u))) brightness(0.92); }

.arena-choice-float {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(var(--tilt));
}

.arena-choice-loot:not(.is-far) .arena-choice-float {
  animation: arena-choice-float calc(5s + var(--i) * 0.4s) ease-in-out calc(var(--i) * -0.8s) infinite;
}

.arena-choice-sprite {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A struck coin around an asset's face: a lit rim, a dark edge for
   thickness, a recessed face. --metal is the asset's own brand colour. */
.arena-choice-coin {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 24%,
    color-mix(in srgb, var(--metal) 42%, var(--choice-text)),
    var(--metal) 48%,
    color-mix(in srgb, var(--metal) 68%, var(--choice-panel))
  );
  box-shadow: calc(0.35 * var(--u)) var(--u) 0 color-mix(in srgb, var(--metal) 40%, var(--choice-panel));
}

.arena-choice-coin img {
  position: absolute;
  inset: 15%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  object-fit: cover;
}

.arena-choice-coin::after {
  content: '';
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--choice-gloss) 0 16%, transparent 44%);
  box-shadow:
    inset 0 calc(0.5 * var(--u)) calc(0.9 * var(--u)) var(--choice-inset-shadow),
    0 0 0 calc(0.35 * var(--u)) color-mix(in srgb, var(--metal) 58%, var(--choice-panel));
}

/* Asset brand colours (data, like the game's ASSETS table). */
.arena-choice-coin.is-mon { --metal: #6e54ff; }
.arena-choice-coin.is-usdc { --metal: #2775ca; }
.arena-choice-coin.is-btc { --metal: #f7931a; }
.arena-choice-coin.is-eth { --metal: #8a92b2; }
.arena-choice-coin.is-usdt { --metal: #009393; }

/* --- Plate: whose money, the road's name, one line, and the way in ------- */
.arena-choice-plate {
  position: absolute;
  z-index: 2;
  top: calc(var(--scene-top) + var(--scene-h));
  left: calc(50% + var(--shift));
  width: min(440px, calc(100% - 2 * var(--seam) - 24px));
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: -18px;
  padding: 0 0 28px;
  text-align: center;
}

.arena-choice-stakes {
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 22%, var(--choice-panel));
  color: var(--tone-light);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.arena-choice-name {
  font-family: 'Big Shoulders Display', 'Inter', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(44px, 4.6vw, 66px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--choice-text);
  text-shadow:
    0 3px 0 color-mix(in srgb, var(--tone) 60%, var(--choice-panel)),
    0 0 18px color-mix(in srgb, var(--tone-light) 50%, transparent);
}

.arena-choice-pitch {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--choice-pitch);
  text-wrap: balance;
}

/* The way in: the hero CTA's slanted plate, smaller, in the road's tone. */
.arena-choice-action {
  --action-slant: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 46px;
  margin-top: 8px;
  padding: 0 30px;
  -webkit-clip-path: polygon(var(--action-slant) 0, 100% 0, calc(100% - var(--action-slant)) 100%, 0 100%);
  clip-path: polygon(var(--action-slant) 0, 100% 0, calc(100% - var(--action-slant)) 100%, 0 100%);
  background: linear-gradient(118deg, var(--choice-core-plate-from) 0%, var(--choice-core-plate-mid) 50%, var(--choice-core-plate-to) 100%);
  color: var(--choice-text);
  font-family: 'Big Shoulders Display', 'Inter', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  transition: filter 160ms ease;
}

.is-crypto .arena-choice-action {
  background: linear-gradient(118deg, var(--choice-crypto-plate-from) 0%, var(--choice-crypto-plate-mid) 50%, var(--choice-crypto-plate-to) 100%);
  color: var(--choice-ink);
}

.arena-choice-action svg {
  width: 30px;
  height: 14px;
  flex: none;
  fill: currentColor;
  transition: transform 160ms ease;
}

.arena-choice-half:hover .arena-choice-action {
  filter: brightness(1.12);
}

.arena-choice-half:hover .arena-choice-action svg {
  transform: translateX(4px);
}

/* The half's own outline would be cut by its clip, so focus rings the plate. */
.arena-choice-half:focus-visible .arena-choice-plate {
  outline: 3px solid var(--tone-light);
  outline-offset: 8px;
}

/* Leaning toward one road dims the other. */
@media (hover: hover) {
  .arena-choice-stage:has(.arena-choice-half:hover) .arena-choice-half:not(:hover) .arena-choice-scene {
    filter: brightness(0.6) saturate(0.75);
  }
}

@keyframes arena-choice-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.015, 0.975) translateY(0.4%); }
}

@keyframes arena-choice-float {
  0%, 100% { transform: translateY(-5%) rotate(calc(var(--tilt) - 4deg)); }
  50% { transform: translateY(5%) rotate(calc(var(--tilt) + 4deg)); }
}

@keyframes arena-choice-beam-run {
  0% { transform: translateY(-120%); opacity: 0; }
  12% { opacity: 0.9; }
  70% { opacity: 0.9; }
  100% { transform: translateY(560%); opacity: 0; }
}

/* --- On scroll: the sides slide in and lock on the seam ------------------
   Scroll-driven, so it is tied to the visitor's own scroll: nothing waits,
   nothing is hidden on arrival, and it runs on the compositor (transform
   and opacity only). Each animated element uses its own view timeline, so
   stacked halves on a phone arrive one after the other. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .arena-choice-half {
      animation: var(--slide) linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }

    .arena-choice-hero {
      animation: arena-choice-hero-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }

    .arena-choice-rays {
      animation: arena-choice-rays-scroll linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    .arena-choice-beam {
      animation: var(--draw) linear both;
      animation-timeline: view();
      animation-range: cover 22% cover 46%;
    }

    .arena-choice-head {
      animation: arena-choice-head-drop linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 30%;
    }

    @keyframes arena-choice-slide-core {
      from { transform: translateX(-70%); opacity: 0.2; }
      to { transform: none; opacity: 1; }
    }

    @keyframes arena-choice-slide-crypto {
      from { transform: translateX(70%); opacity: 0.2; }
      to { transform: none; opacity: 1; }
    }

    @keyframes arena-choice-hero-rise {
      from { transform: translateY(14%) scale(0.9); }
      to { transform: none; }
    }

    @keyframes arena-choice-rays-scroll {
      from { rotate: -30deg; }
      to { rotate: 30deg; }
    }

    @keyframes arena-choice-beam-draw {
      from { scale: 1 0; }
      to { scale: 1 1; }
    }

    @keyframes arena-choice-head-drop {
      from { transform: translateY(-100%); }
      to { transform: none; }
    }
  }
}

/* --- Stacked: Core above Crypto, the seam leaning across the screen ------ */
@media (max-width: 720px) {
  .arena-choice {
    --seam: clamp(18px, 6vw, 32px);
    --head-h: 112px;
    --scene-h: clamp(250px, 72vw, 340px);
    --plate-h: 196px;
    --stage-h: calc(var(--head-h) + 2 * (var(--scene-h) + var(--plate-h)) + 2 * var(--seam));
  }

  .arena-choice-head {
    --cut: 16px;
    gap: 8px;
    padding: 20px calc(var(--cut) + 20px) 20px;
  }

  /* Scales with the width all the way down, so the plate never outgrows a
     280px screen. */
  .arena-choice-head .section-title {
    font-size: clamp(24px, 9.2vw, 44px);
  }

  .arena-choice-half {
    left: 0;
    right: 0;
    width: auto;
  }

  .arena-choice-half.is-core {
    --shift: 0px;
    top: 0;
    bottom: auto;
    height: calc(var(--head-h) + var(--scene-h) + var(--plate-h) + 2 * var(--seam));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2 * var(--seam)), 0 100%);
  }

  .arena-choice-half.is-crypto {
    --shift: 0px;
    --scene-top: calc(2 * var(--seam));
    top: calc(var(--head-h) + var(--scene-h) + var(--plate-h));
    bottom: 0;
    clip-path: polygon(0 calc(2 * var(--seam)), 100% 0, 100% 100%, 0 100%);
  }

  .arena-choice-plate { width: min(440px, calc(100% - 32px)); padding-bottom: 0; }

  /* The beam leans across: it starts on the left at Core's bottom corner and
     rises to the right. */
  .arena-choice-beam {
    --draw: arena-choice-beam-draw-across;
    top: calc(var(--head-h) + var(--scene-h) + var(--plate-h) + 2 * var(--seam));
    left: 0;
    width: hypot(100vw, calc(2 * var(--seam)));
    height: 4px;
    translate: 0 -50%;
    transform-origin: 0 50%;
    rotate: calc(-1 * atan2(calc(2 * var(--seam)), 100vw));
    box-shadow:
      0 0 3px 1px var(--choice-text),
      0 0 8px 2px var(--choice-beam-white),
      0 -5px 12px 2px var(--choice-beam-core),
      0 5px 12px 2px var(--choice-beam-crypto),
      0 -16px 40px 6px var(--choice-beam-core-wide),
      0 16px 40px 6px var(--choice-beam-crypto-wide);
  }

  .arena-choice-beam::after {
    left: 0;
    top: -1px;
    bottom: -1px;
    right: auto;
    width: 18%;
    height: auto;
    background: linear-gradient(90deg, transparent, var(--choice-text) 45%, var(--choice-text) 55%, transparent);
    animation-name: arena-choice-beam-run-across;
  }

  @keyframes arena-choice-beam-run-across {
    0% { transform: translateX(-120%); opacity: 0; }
    12% { opacity: 0.9; }
    70% { opacity: 0.9; }
    100% { transform: translateX(560%); opacity: 0; }
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      @keyframes arena-choice-beam-draw-across {
        from { scale: 0 1; }
        to { scale: 1 1; }
      }
    }
  }
}

/* Without CSS trig there is no exact slant for the beam, and a guessed one
   would cross the seam instead of lying on it: the halves' own clip edge
   divides them instead. */
@supports not (width: hypot(1px, 1px)) {
  .arena-choice-seam { display: none; }
}

@media (max-width: 360px) {
  .arena-choice-head { padding-inline: calc(var(--cut) + 12px); }
  .arena-choice-action { padding: 0 22px; font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .arena-choice-hero img,
  .arena-choice-float,
  .arena-choice-loot:not(.is-far) .arena-choice-float,
  .arena-choice-beam::after {
    animation: none;
  }
  .arena-choice-beam::after { opacity: 0; }
}

@media (forced-colors: active) {
  .arena-choice-beam { background: CanvasText; box-shadow: none; }
  .arena-choice-beam::after { display: none; }
  .arena-choice-head { background: CanvasText; }
  .arena-choice-head::before { background: Canvas; }
  .arena-choice-half:focus-visible .arena-choice-plate { outline-color: Highlight; }
  .arena-choice-action {
    -webkit-clip-path: none;
    clip-path: none;
    border: 1px solid ButtonText;
  }
}