/* VIGIL — the opening act. Ink and bone, two colours that are data (CT steel, T amber), one live red.
   Display: Archivo (wdth 62 condensed for the broadcast numerals, 125 expanded light for the name). Meta: Martian Mono. */
.arena_wrap {
  --ink: #07080a; --ink2: #0d0f12; --bone: #ece8df; --mute: rgba(236, 232, 223, 0.58); --dim: rgba(236, 232, 223, 0.34);
  --line: rgba(236, 232, 223, 0.16); --ct: #9cc3e6; --t: #f0a64a; --live: #ff3b2f;
  --sans: 'VG Sans', 'Archivo', system-ui, sans-serif; --mono: 'VG Mono', 'Martian Mono', ui-monospace, monospace;
  --gut: clamp(16px, 2.2vw, 32px);
  position: relative; background: var(--ink); color: var(--bone); font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
.arena_wrap .arena_contain { position: relative; }
.arena_wrap .arena_canvas { position: fixed; inset: 0; z-index: 0; }
.arena_wrap .arena_canvas canvas { display: block; width: 100%; height: 100%; }
.arena_wrap .arena_labels { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.arena_wrap .arena_label { position: absolute; left: 0; top: 0; transform: translate3d(-50%, -100%, 0); font: 500 10px/1 var(--mono); font-variation-settings: 'wdth' 85; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--bone); padding: 4px 6px 3px; background: rgba(7, 8, 10, 0.72); border-left: 2px solid currentColor; opacity: 0; transition: opacity 0.3s; }
.arena_wrap .arena_label.is-ct { color: var(--ct); }
.arena_wrap .arena_label.is-t { color: var(--t); }
.arena_wrap .arena_label.is-on { opacity: 1; }
.arena_wrap .arena_label.is-dead { opacity: 0.35; text-decoration: line-through; }
.arena_wrap .arena_label.is-hero { background: var(--bone); color: var(--ink); border-color: var(--ink); }

/* ── the tag every chapter wears ── */
.arena_wrap .arena_tag { display: inline-block; font: 600 10px/1 var(--mono); font-variation-settings: 'wdth' 85; letter-spacing: 0.08em; padding: 4px 6px 3px; background: var(--bone); color: var(--ink); margin-right: 10px; }
.arena_wrap .arena_kicker { position: absolute; left: var(--gut); top: calc(var(--gut) + 54px); margin: 0; font: 500 11px/1 var(--mono); font-variation-settings: 'wdth' 85; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; }
.arena_wrap .arena_cue { appearance: none; border: 0; background: none; color: var(--bone); font: 500 11px/1 var(--mono); font-variation-settings: 'wdth' 85; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; padding: 10px 0; }
.arena_wrap .arena_cue_x { position: relative; width: 22px; height: 22px; flex: none; }
.arena_wrap .arena_cue_x::before, .arena_wrap .arena_cue_x::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; }
.arena_wrap .arena_cue_x::before { width: 22px; height: 1px; transform: translate(-50%, -50%); box-shadow: none; clip-path: polygon(0 0, 38% 0, 38% 100%, 62% 100%, 62% 0, 100% 0, 100% 100%, 0 100%); }
.arena_wrap .arena_cue_x::after { width: 1px; height: 22px; transform: translate(-50%, -50%); clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%, 0 62%, 100% 62%, 100% 100%, 0 100%); }
.arena_wrap .arena_cue:hover .arena_cue_x, .arena_wrap .arena_cue:focus-visible .arena_cue_x { animation: arena_spin 1.2s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes arena_spin { to { transform: rotate(90deg); } }

/* ── loader: freeze time ── */
.arena_wrap .arena_loader { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: auto; }
.arena_wrap .arena_loader_half { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--ink); transition: transform 1.1s cubic-bezier(.76, 0, .24, 1); }
.arena_wrap .arena_loader_half.is-top { top: 0; } .arena_wrap .arena_loader_half.is-bottom { bottom: 0; }
.arena_wrap .arena_loader_inner { position: relative; text-align: center; transition: opacity 0.35s, transform 0.9s cubic-bezier(.76, 0, .24, 1); }
.arena_wrap .arena_loader_clock { margin: 0; font: 800 clamp(120px, 26vw, 420px)/0.82 var(--sans); font-variation-settings: 'wdth' 62; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.arena_wrap .arena_loader_meta { margin: 0 auto 18px; display: flex; justify-content: space-between; gap: 40px; width: min(86vw, 640px); font: 500 11px/1 var(--mono); font-variation-settings: 'wdth' 85; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.arena_wrap .arena_loader_meta.is-low { margin: 22px auto 0; }
.arena_wrap .arena_loader.is-live .arena_loader_clock { color: var(--live); }
.arena_wrap .arena_loader.is-done { pointer-events: none; }
.arena_wrap .arena_loader.is-done .arena_loader_half.is-top { transform: translateY(-100%); }
.arena_wrap .arena_loader.is-done .arena_loader_half.is-bottom { transform: translateY(100%); }
.arena_wrap .arena_loader.is-done .arena_loader_inner { opacity: 0; transform: scale(1.08); }

/* ── chrome ── */
.arena_wrap .arena_chrome { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity 0.8s 0.3s; font: 500 11px/1 var(--mono); font-variation-settings: 'wdth' 85; letter-spacing: 0.08em; text-transform: uppercase; }
.arena_wrap .arena_chrome.is-on { opacity: 1; }
.arena_wrap .arena_chrome > * { pointer-events: auto; }
.arena_wrap .arena_chrome > .arena_cross { pointer-events: none; }
/* the chrome reads on ink and on bone alike */
.arena_wrap .arena_chrome { mix-blend-mode: difference; }
.arena_wrap .arena_chrome.is-quiet > * { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.arena_wrap .arena_fiction, .arena_wrap .arena_sound { transition: opacity 0.4s; }
.arena_wrap .arena_canvas::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5, 6, 7, 0.62), transparent 34%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5, 6, 7, 0.75) 100%); }
.arena_wrap .arena_cross { position: absolute; width: 13px; height: 13px; }
.arena_wrap .arena_cross::before, .arena_wrap .arena_cross::after { content: ''; position: absolute; background: var(--mute); }
.arena_wrap .arena_cross::before { left: 6px; top: 0; width: 1px; height: 13px; } .arena_wrap .arena_cross::after { top: 6px; left: 0; height: 1px; width: 13px; }
.arena_wrap .arena_cross.is-tl { left: calc(var(--gut) - 6px); top: calc(var(--gut) - 6px); } .arena_wrap .arena_cross.is-tr { right: calc(var(--gut) - 6px); top: calc(var(--gut) - 6px); }
.arena_wrap .arena_cross.is-bl { left: calc(var(--gut) - 6px); bottom: calc(var(--gut) - 6px); } .arena_wrap .arena_cross.is-br { right: calc(var(--gut) - 6px); bottom: calc(var(--gut) - 6px); }
.arena_wrap .arena_logo { position: absolute; left: calc(var(--gut) + 18px); top: calc(var(--gut) + 2px); display: flex; align-items: center; gap: 10px; color: var(--bone); text-decoration: none; font: 600 13px/1 var(--sans); font-variation-settings: 'wdth' 125; letter-spacing: 0.22em; }
.arena_wrap .arena_logo_mark { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 7; }
.arena_wrap .arena_logo_mark circle { fill: currentColor; stroke: none; }
.arena_wrap .arena_where { position: absolute; left: 50%; top: calc(var(--gut) + 6px); transform: translateX(-50%); margin: 0; display: flex; gap: 6px; color: var(--mute); transition: opacity 0.4s; }
.arena_wrap .arena_where_sep { color: var(--dim); margin-right: 8px; }
.arena_wrap .arena_chrome.is-bug .arena_where { opacity: 0; }
.arena_wrap .arena_index_btn, .arena_wrap .arena_sound, .arena_wrap .arena_gfx, .arena_wrap .arena_index_close { appearance: none; border: 0; background: none; color: var(--bone); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 6px 0; }
.arena_wrap .arena_index_btn { position: absolute; right: calc(var(--gut) + 18px); top: calc(var(--gut) + 1px); }
.arena_wrap .arena_sound { position: absolute; left: calc(var(--gut) + 18px); bottom: calc(var(--gut) - 2px); display: flex; align-items: center; gap: 10px; }
.arena_wrap .arena_sound_bars { display: flex; gap: 2px; align-items: flex-end; height: 10px; }
.arena_wrap .arena_sound_bars i { width: 2px; height: 3px; background: currentColor; }
.arena_wrap .arena_sound[aria-pressed="true"] .arena_sound_bars i { animation: arena_bar 0.9s ease-in-out infinite alternate; }
.arena_wrap .arena_sound_bars i:nth-child(2) { animation-delay: -0.3s !important; } .arena_wrap .arena_sound_bars i:nth-child(3) { animation-delay: -0.6s !important; }
@keyframes arena_bar { from { height: 2px; } to { height: 10px; } }
.arena_wrap .arena_fiction { position: absolute; right: calc(var(--gut) + 18px); bottom: var(--gut); margin: 0; color: var(--mute); }

/* the scorebug: two teams, the round clock, the round number — on while the replay plays */
.arena_wrap .arena_bug { position: absolute; left: 50%; top: calc(var(--gut) - 4px); transform: translate(-50%, -8px); display: flex; align-items: stretch; opacity: 0; transition: opacity 0.4s, transform 0.5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; font-variant-numeric: tabular-nums; }
.arena_wrap .arena_chrome.is-bug .arena_bug { opacity: 1; transform: translate(-50%, 0); }
.arena_wrap .arena_bug_team { display: flex; align-items: center; gap: 0; background: rgba(7, 8, 10, 0.86); }
.arena_wrap .arena_bug_team b { font: 700 13px/1 var(--sans); font-variation-settings: 'wdth' 75; letter-spacing: 0.06em; padding: 9px 12px 8px; min-width: 64px; text-align: center; }
.arena_wrap .arena_bug_team i { font: 800 18px/1 var(--sans); font-style: normal; font-variation-settings: 'wdth' 62; padding: 6px 10px; color: var(--ink); background: var(--ct); min-width: 34px; text-align: center; }
.arena_wrap .arena_bug_team.is-b i { background: var(--t); }
.arena_wrap .arena_bug_mid { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bone); color: var(--ink); padding: 4px 14px; min-width: 70px; }
.arena_wrap .arena_bug_mid b { font: 800 17px/1 var(--sans); font-variation-settings: 'wdth' 62; }
.arena_wrap .arena_bug_mid i { font: 600 8.5px/1 var(--mono); font-style: normal; letter-spacing: 0.08em; margin-top: 2px; }
.arena_wrap .arena_bug_mid.is-planted { background: var(--live); color: var(--bone); }

/* index */
.arena_wrap .arena_index { position: fixed; inset: 0; z-index: 70; background: rgba(7, 8, 10, 0.96); display: flex; opacity: 0; transition: opacity 0.6s; }
.arena_wrap .arena_index[hidden] { display: none; }
.arena_wrap .arena_index:not(.is-open) { pointer-events: none; }
.arena_wrap .arena_index.is-open { opacity: 1; }
.arena_wrap .arena_index_inner { margin: auto; width: min(1100px, 100% - 2 * var(--gut)); }
.arena_wrap .arena_index_meta { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--line); padding-bottom: 14px; margin: 0; }
.arena_wrap .arena_index_list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.arena_wrap .arena_index_list a { display: flex; align-items: baseline; gap: 14px; padding: 9px 0 7px; border-bottom: 1px solid var(--line); color: var(--bone); text-decoration: none; font: 500 clamp(20px, 2.6vw, 38px)/1 var(--sans); font-variation-settings: 'wdth' 75; break-inside: avoid; transition: padding 0.3s; }
.arena_wrap .arena_index_list a span { font: 500 10px/1 var(--mono); color: var(--mute); width: 22px; }
.arena_wrap .arena_index_list a:hover, .arena_wrap .arena_index_list a:focus-visible { padding-left: 10px; }
.arena_wrap .arena_index_foot { display: flex; justify-content: space-between; margin-top: 18px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* ── runs and their held stages ── */
.arena_wrap .arena_run { position: relative; z-index: 3; }
.arena_wrap.is-live .arena_run + .arena_run { margin-top: -100vh; }
.arena_wrap.is-live .arena_stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; transform: translate3d(0, var(--hold, 0px), 0); visibility: hidden; }
.arena_wrap.is-live .arena_run.is-hero { height: 220vh; }
.arena_wrap.is-live .arena_run.is-moment { height: 760vh; }
.arena_wrap.is-live .arena_run.is-scrub { height: 260vh; }
.arena_wrap.is-live .arena_run.is-read { height: 420vh; }
.arena_wrap.is-live .arena_run.is-pov { height: 420vh; }
.arena_wrap .arena_hero, .arena_wrap .arena_moment, .arena_wrap .arena_scrub, .arena_wrap .arena_read, .arena_wrap .arena_pov { position: absolute; inset: 0; opacity: var(--in, 0); }
/* sideways drags orbit, pan and look; up and down still scroll */
.arena_wrap.is-live .arena_stage { touch-action: pan-y; }

/* 02 hero */
.arena_wrap .arena_hero_tag { position: absolute; left: var(--gut); top: calc(var(--gut) + 54px); margin: 0; font: 500 11px/1 var(--mono); font-variation-settings: 'wdth' 85; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; }
.arena_wrap .arena_hero_mark { position: absolute; left: 50%; top: 38%; width: clamp(120px, 15vw, 230px); height: auto; transform: translate(-50%, -50%); fill: none; stroke: var(--bone); stroke-width: 6.5; overflow: visible; }
.arena_wrap .arena_hero_mark circle { fill: var(--live); stroke: none; }
.arena_wrap .arena_hero_word { position: absolute; left: 0; right: 0; bottom: calc(var(--gut) + 96px); margin: 0; display: flex; justify-content: space-between; padding: 0 var(--gut); font: 200 clamp(90px, 21.6vw, 420px)/0.74 var(--sans); font-variation-settings: 'wdth' 125; letter-spacing: -0.01em; }
.arena_wrap .arena_hero_word span { display: block; transform: translate3d(0, var(--rise, 0%), 0); clip-path: inset(0 0 0 0); }
.arena_wrap .arena_hero_line { position: absolute; right: var(--gut); top: calc(var(--gut) + 52px); margin: 0; text-align: right; font: 400 clamp(17px, 1.55vw, 24px)/1.18 var(--sans); font-variation-settings: 'wdth' 100; max-width: 22ch; }
.arena_wrap .arena_hero_match { position: absolute; left: var(--gut); top: calc(var(--gut) + 84px); margin: 0; font: 500 11px/1.5 var(--mono); font-variation-settings: 'wdth' 85; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); max-width: 44ch; }
.arena_wrap .arena_hero .arena_cue { position: absolute; left: 50%; bottom: calc(var(--gut) + 6px); transform: translateX(-50%); }

/* 03 the moment */
.arena_wrap .arena_moment_head { position: absolute; left: var(--gut); top: calc(var(--gut) + 84px); display: flex; flex-direction: column; gap: 16px; }
.arena_wrap .arena_moment_title { margin: 0; font: 700 clamp(30px, 4.4vw, 76px)/0.92 var(--sans); font-variation-settings: 'wdth' 62; text-transform: uppercase; max-width: 16ch; letter-spacing: 0.005em; }
.arena_wrap .arena_moment_cap { margin: 0; font: 400 clamp(15px, 1.25vw, 19px)/1.3 var(--sans); max-width: 30ch; color: var(--mute); min-height: 3.9em; }
.arena_wrap .arena_moment_clock { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 64px); display: flex; align-items: flex-end; gap: 16px; font-variant-numeric: tabular-nums; }
.arena_wrap .arena_moment_clock span { font: 800 clamp(96px, 17vw, 300px)/0.76 var(--sans); font-variation-settings: 'wdth' 62; letter-spacing: -0.02em; }
.arena_wrap .arena_moment_clock i { font: 600 12px/1 var(--mono); font-style: normal; letter-spacing: 0.08em; color: var(--ink); background: var(--bone); padding: 5px 7px 4px; margin-bottom: 8px; }
.arena_wrap .arena_moment_clock i.is-slow { background: var(--live); color: var(--bone); }
.arena_wrap .arena_moment_cue { position: absolute; right: var(--gut); bottom: calc(var(--gut) + 30px); margin: 0; display: flex; align-items: center; gap: 12px; font: 500 11px/1 var(--mono); font-variation-settings: 'wdth' 85; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); transition: opacity 0.5s; }
.arena_wrap .arena_feed { position: absolute; right: var(--gut); top: calc(var(--gut) + 50px); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.arena_wrap .arena_kill { display: flex; align-items: center; gap: 8px; padding: 6px 9px 5px; background: rgba(7, 8, 10, 0.82); font: 600 12px/1 var(--sans); font-variation-settings: 'wdth' 75; letter-spacing: 0.04em; animation: arena_in 0.35s cubic-bezier(.2, .8, .2, 1); white-space: nowrap; }
.arena_wrap .arena_kill .is-ct { color: var(--ct); } .arena_wrap .arena_kill .is-t { color: var(--t); }
.arena_wrap .arena_kill em { font: 500 9.5px/1 var(--mono); font-style: normal; color: var(--mute); letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line); padding: 2px 4px; }
.arena_wrap .arena_kill em.is-hs { color: var(--bone); border-color: var(--bone); }
.arena_wrap .arena_kill.is-hero { box-shadow: inset 0 0 0 1px var(--live); }
@keyframes arena_in { from { opacity: 0; transform: translateX(14px); } }

/* 04 scrub */
.arena_wrap .arena_scrub_lede { position: absolute; left: var(--gut); top: calc(var(--gut) + 84px); margin: 0; max-width: 30ch; font: 400 clamp(15px, 1.25vw, 19px)/1.3 var(--sans); color: var(--mute); }
.arena_wrap .arena_board { position: absolute; right: var(--gut); top: calc(var(--gut) + 50px); margin: 0; padding: 0; list-style: none; width: 260px; display: grid; gap: 2px; }
.arena_wrap .arena_board_side { font: 500 9.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); padding: 10px 0 6px; display: flex; justify-content: space-between; }
.arena_wrap .arena_board button { appearance: none; width: 100%; border: 0; display: grid; grid-template-columns: 4px 1fr 34px 46px; align-items: center; gap: 10px; padding: 7px 10px 6px 0; background: rgba(7, 8, 10, 0.78); color: var(--bone); font: 600 13px/1 var(--sans); font-variation-settings: 'wdth' 75; text-align: left; cursor: pointer; transition: background 0.2s; }
.arena_wrap .arena_board button i { height: 100%; min-height: 16px; background: var(--c); }
.arena_wrap .arena_board button span:nth-child(3) { font: 500 10px/1 var(--mono); color: var(--mute); text-align: right; }
.arena_wrap .arena_board button span:nth-child(4) { position: relative; height: 3px; background: var(--line); }
.arena_wrap .arena_board button span:nth-child(4)::after { content: ''; position: absolute; inset: 0; width: var(--hp, 100%); background: var(--c); }
.arena_wrap .arena_board button[aria-pressed="true"] { background: var(--bone); color: var(--ink); }
.arena_wrap .arena_board button[aria-pressed="true"] span:nth-child(3) { color: var(--ink); }
.arena_wrap .arena_board button.is-dead { opacity: 0.4; }
.arena_wrap .arena_board button:hover { background: rgba(236, 232, 223, 0.12); }
.arena_wrap .arena_deck { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(var(--gut) + 30px); display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 18px; }
.arena_wrap .arena_play { appearance: none; width: 44px; height: 44px; border: 1px solid var(--bone); background: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--bone); }
.arena_wrap .arena_play_i { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.arena_wrap .arena_play.is-on .arena_play_i { width: 10px; height: 12px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; margin: 0; }
.arena_wrap .arena_time { position: relative; height: 44px; cursor: ew-resize; touch-action: none; outline: none; }
.arena_wrap .arena_time_track { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line); }
.arena_wrap .arena_time_fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--bone); }
.arena_wrap .arena_time_marks { position: absolute; inset: 0; }
.arena_wrap .arena_time_marks i { position: absolute; top: -9px; width: 2px; height: 20px; background: var(--c, var(--bone)); transform: translateX(-1px); }
.arena_wrap .arena_time_marks i.is-n { top: 5px; height: 5px; width: 5px; border-radius: 50%; transform: translateX(-2.5px); background: var(--dim); }
.arena_wrap .arena_time_marks i.is-b { background: var(--live); width: 3px; height: 26px; top: -12px; }
.arena_wrap .arena_time_head { position: absolute; top: 50%; left: 0; width: 1px; height: 44px; background: var(--bone); transform: translate(-0.5px, -50%); }
.arena_wrap .arena_time_head span { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px); font: 700 12px/1 var(--sans); font-variation-settings: 'wdth' 62; background: var(--bone); color: var(--ink); padding: 4px 6px 3px; font-variant-numeric: tabular-nums; }
.arena_wrap .arena_time:focus-visible .arena_time_head { box-shadow: 0 0 0 2px var(--live); }
.arena_wrap .arena_cam { appearance: none; border: 1px solid var(--line); background: rgba(7, 8, 10, 0.7); color: var(--bone); padding: 9px 14px 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; cursor: pointer; min-width: 132px; }
.arena_wrap .arena_cam_k { font: 500 9.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.arena_wrap .arena_cam b { font: 700 16px/1 var(--sans); font-variation-settings: 'wdth' 70; text-transform: uppercase; letter-spacing: 0.04em; }
.arena_wrap .arena_cam:hover { border-color: var(--bone); }

/* 05 read */
.arena_wrap .arena_read_title { position: absolute; left: var(--gut); top: calc(var(--gut) + 84px); margin: 0; font: 700 clamp(28px, 3.6vw, 60px)/0.92 var(--sans); font-variation-settings: 'wdth' 62; text-transform: uppercase; max-width: 14ch; }
.arena_wrap .arena_eco { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 34px); width: min(380px, 100% - 2 * var(--gut)); display: grid; gap: 3px; transition: opacity 0.5s; }
.arena_wrap .arena_eco_head { display: flex; justify-content: space-between; font: 500 9.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); padding: 10px 0 6px; }
.arena_wrap .arena_eco_row { display: grid; grid-template-columns: 92px 1fr 64px; align-items: center; gap: 10px; font: 600 12.5px/1 var(--sans); font-variation-settings: 'wdth' 75; }
.arena_wrap .arena_eco_row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arena_wrap .arena_eco_bar { position: relative; height: 10px; background: rgba(236, 232, 223, 0.06); }
.arena_wrap .arena_eco_bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); width: calc(var(--e) * 1%); transform-origin: left; transform: scaleX(var(--grow, 1)); }
.arena_wrap .arena_eco_bar u { position: absolute; top: 0; bottom: 0; left: calc(var(--e) * 1%); width: calc(var(--m) * 1%); background: repeating-linear-gradient(90deg, var(--c) 0 1px, transparent 1px 4px); opacity: 0.6; transform-origin: left; transform: scaleX(var(--grow, 1)); text-decoration: none; }
.arena_wrap .arena_eco_row span { font: 500 10px/1 var(--mono); color: var(--mute); text-align: right; font-variant-numeric: tabular-nums; }
.arena_wrap .arena_nade { position: absolute; left: 0; top: 0; transform: translate3d(var(--x, 0), var(--y, 0), 0); pointer-events: none; background: var(--bone); color: var(--ink); padding: 8px 10px; font: 500 10px/1.45 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; min-width: 170px; }
.arena_wrap .arena_nade b { display: block; font: 800 20px/1 var(--sans); font-variation-settings: 'wdth' 62; letter-spacing: 0; margin-bottom: 4px; }
.arena_wrap .arena_read_cue, .arena_wrap .arena_pov_cue { position: absolute; right: var(--gut); bottom: calc(var(--gut) + 30px); margin: 0; display: flex; align-items: center; gap: 12px; font: 500 11px/1 var(--mono); font-variation-settings: 'wdth' 85; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }

/* 06 pov */
.arena_wrap .arena_pov_name { position: absolute; left: var(--gut); top: calc(var(--gut) + 84px); margin: 0; font: 700 clamp(40px, 6vw, 104px)/0.86 var(--sans); font-variation-settings: 'wdth' 62; text-transform: uppercase; }
.arena_wrap .arena_reticle { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.arena_wrap .arena_reticle i { position: absolute; background: var(--bone); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
.arena_wrap .arena_reticle i:nth-child(1) { left: -1px; top: -18px; width: 2px; height: 11px; }
.arena_wrap .arena_reticle i:nth-child(2) { left: -1px; top: 7px; width: 2px; height: 11px; }
.arena_wrap .arena_reticle i:nth-child(3) { top: -1px; left: -18px; height: 2px; width: 11px; }
.arena_wrap .arena_reticle i:nth-child(4) { top: -1px; left: 7px; height: 2px; width: 11px; }
.arena_wrap .arena_reticle b { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; background: var(--live); }
.arena_wrap .arena_hud { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 30px); display: flex; gap: 34px; }
.arena_wrap .arena_hud p { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.arena_wrap .arena_hud span { font: 500 9.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.arena_wrap .arena_hud b { font: 800 clamp(30px, 3.6vw, 56px)/0.85 var(--sans); font-variation-settings: 'wdth' 62; font-variant-numeric: tabular-nums; }
.arena_wrap .arena_hud_w b { font-variation-settings: 'wdth' 70; text-transform: uppercase; }
.arena_wrap .arena_hud_hp.is-low b { color: var(--live); }

/* ── phone: designed, not shrunk ── */
@media (max-width: 760px) {
  .arena_wrap .arena_fiction { display: none; }
  .arena_wrap .arena_sound { font-size: 0; gap: 0; padding: 8px 4px; }
  .arena_wrap .arena_sound_bars { height: 12px; }
  .arena_wrap .arena_sound_bars i { width: 2.5px; }
  .arena_wrap .arena_where { display: none; }
  .arena_wrap .arena_bug_team b { min-width: 0; padding: 8px 7px 7px; font-size: 11px; }
  .arena_wrap .arena_bug_team i { font-size: 15px; min-width: 26px; padding: 6px 6px; }
  .arena_wrap .arena_bug_mid { min-width: 54px; padding: 4px 8px; }
  .arena_wrap .arena_kicker { top: calc(var(--gut) + 46px); }
  .arena_wrap .arena_hero_mark { top: 34%; width: 34vw; }
  .arena_wrap .arena_hero_tag { line-height: 1.5; align-items: flex-start; right: var(--gut); }
  .arena_wrap .arena_hero .arena_cue { bottom: calc(var(--gut) + 40px); }
  .arena_wrap .arena_hero_word { bottom: calc(var(--gut) + 128px); font-size: 23vw; }
  .arena_wrap .arena_chrome.is-bug .arena_logo span { display: none; }
  .arena_wrap .arena_chrome.is-bug .arena_index_btn { font-size: 0; width: 22px; height: 22px; }
  .arena_wrap .arena_chrome.is-bug .arena_index_btn::before { content: ''; position: absolute; inset: 5px 2px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
  .arena_wrap .arena_hero_line { left: var(--gut); right: auto; top: calc(var(--gut) + 104px); text-align: left; font-size: 17px; }
  .arena_wrap .arena_hero_match { top: calc(var(--gut) + 160px); font-size: 9.5px; max-width: none; right: var(--gut); }
  .arena_wrap .arena_moment_head { top: calc(var(--gut) + 74px); gap: 10px; }
  .arena_wrap .arena_moment_title { font-size: 34px; }
  .arena_wrap .arena_moment_cap { font-size: 14.5px; }
  .arena_wrap .arena_feed { top: auto; bottom: calc(var(--gut) + 150px); right: var(--gut); }
  .arena_wrap .arena_kill { font-size: 11px; padding: 5px 7px 4px; }
  .arena_wrap .arena_moment_clock { bottom: calc(var(--gut) + 50px); }
  .arena_wrap .arena_moment_clock span { font-size: 30vw; }
  .arena_wrap .arena_moment_cue { left: calc(var(--gut) + 40px); right: var(--gut); bottom: calc(var(--gut) + 4px); font-size: 9.5px; }
  .arena_wrap .arena_board { left: var(--gut); right: var(--gut); width: auto; top: auto; bottom: calc(var(--gut) + 98px); grid-template-columns: 1fr 1fr; column-gap: 6px; }
  .arena_wrap .arena_board_side { grid-column: span 2; padding: 6px 0 4px; }
  .arena_wrap .arena_board button { grid-template-columns: 3px 1fr 26px; font-size: 11.5px; gap: 6px; padding: 6px 6px 5px 0; }
  .arena_wrap .arena_board button span:nth-child(4) { display: none; }
  .arena_wrap .arena_scrub_lede { top: calc(var(--gut) + 74px); font-size: 14.5px; }
  .arena_wrap .arena_deck { bottom: calc(var(--gut) + 30px); grid-template-columns: 40px 1fr; row-gap: 10px; }
  .arena_wrap .arena_cam { grid-column: span 2; flex-direction: row; justify-content: space-between; align-items: center; min-width: 0; }
  .arena_wrap .arena_read_title { top: calc(var(--gut) + 74px); font-size: 30px; }
  .arena_wrap .arena_eco { bottom: calc(var(--gut) + 60px); }
  .arena_wrap .arena_eco_row { grid-template-columns: 74px 1fr 56px; font-size: 11px; }
  .arena_wrap .arena_read_cue, .arena_wrap .arena_pov_cue { left: calc(var(--gut) + 40px); right: var(--gut); bottom: calc(var(--gut) + 4px); font-size: 9.5px; }
  .arena_wrap .arena_pov_name { top: calc(var(--gut) + 74px); font-size: 44px; }
  .arena_wrap .arena_hud { gap: 18px; bottom: calc(var(--gut) + 44px); }
  .arena_wrap .arena_hud b { font-size: 30px; }
  .arena_wrap .arena_index_list { columns: 1; }
  .arena_wrap .arena_index_list a { font-size: 22px; padding: 7px 0 5px; }
}
@media (prefers-reduced-motion: reduce) { .arena_wrap .arena_cue:hover .arena_cue_x { animation: none; } }

/* the editor's canvas: this section's chapters as stills (stage.js showPosters) */
.arena_wrap.is-canvas { margin-top: 0; background: #07080a; }
.arena_wrap .arena_poster { position: relative; margin: 0; }
.arena_wrap .arena_poster_img { display: block; width: 100%; height: auto; }
.arena_wrap .arena_poster_cap { position: absolute; left: 16px; bottom: 14px; padding: 4px 6px 3px; background: #ece8df; color: #07080a; font: 600 10px/1 'VG Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }

/* a stage is only a frame: its content takes the taps, and a chapter that has faded out takes none (a stage arriving
   over another must never sit on its controls) */
.arena_wrap.is-live .arena_run, .arena_wrap.is-live .arena_stage { pointer-events: none; }
.arena_wrap.is-live .arena_stage > * { pointer-events: auto; }
.arena_wrap .is-off, .arena_wrap .is-off * { pointer-events: none !important; }