/* The pages of Free Vee: the lobby (Lobby.dc.html) and the intros (Intros.dc.html).
   Styles live here, not in the markup: the Content-Security-Policy of the pages allows no inline
   style. Colours, fonts and sizes are tokens of Obsidian Run (or-tokens.css, bundle.css). */
[hidden] { display: none !important; }
body { background: #060708; color: var(--ink); font-family: var(--font-sans); min-height: 100vh; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.boot { margin: 0; padding: 48px 32px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); }
.screen { min-height: 100vh; background: var(--surface-000); }

/* ---- the lobby ---- */
.lb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 14px 32px; border-bottom: 1px solid var(--line-100); }
.lb-brand { font-family: var(--font-display); font-style: italic; font-size: 22px; }
.lb-main { max-width: 1440px; margin: 0 auto; padding: 32px 32px 48px; box-sizing: border-box; display: flex; flex-direction: column; gap: 28px; }
.lb-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.lb-hero-text { display: flex; flex-direction: column; gap: 10px; }
.lb-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: .95; letter-spacing: -.015em; }
.lb-title-i { font-style: italic; color: var(--ink-muted); }
.lb-facts { font-size: 13px; }
.lb-cols { display: flex; flex-wrap: wrap; gap: 24px; }
.lb-act { flex: 999 1 640px; display: flex; flex-direction: column; gap: 18px; min-height: 420px; position: relative; overflow: hidden; }
.lb-ready { flex: 1 1 340px; display: flex; flex-direction: column; gap: 10px; }
.lb-kicker { color: var(--gold); display: inline-flex; align-items: center; gap: 8px; }
.lb-ink { color: var(--ink); }
.lb-h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 1.1; }
.lb-p { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink-muted); max-width: 640px; }
.lb-lines { display: flex; flex-direction: column; gap: 10px; }
.lb-line { padding: 8px 0; border-bottom: 1px solid var(--line-100); }
.lb-line-text { font-size: 15px; }
.lb-target { fill: var(--surface-300); stroke: var(--line-200); }
.pr-ring { fill: none; stroke-width: 1.5; }
.pr-1 { stroke: var(--chart-1); } .pr-2 { stroke: var(--chart-2); } .pr-3 { stroke: var(--chart-3); } .pr-4 { stroke: var(--chart-4); }
.pr-dot.pr-1 { fill: var(--chart-1); } .pr-dot.pr-2 { fill: var(--chart-2); } .pr-dot.pr-3 { fill: var(--chart-3); } .pr-dot.pr-4 { fill: var(--chart-4); }
.pr-dot { stroke: none; }
.probe { animation: or-probe 1.6s cubic-bezier(.2,0,0,1) infinite; transform-box: fill-box; transform-origin: center; }
.lb-bench { display: flex; flex-direction: column; gap: 18px; }
.lb-bench-row { display: flex; flex-direction: column; gap: 8px; }
.lb-bench-top { display: flex; justify-content: space-between; align-items: baseline; }
.lb-bench-name { font-size: 15px; }
.lb-bench-val { font-size: 24px; color: var(--cyan); }
.lb-track { height: 10px; background: var(--surface-300); position: relative; }
.lb-fill { position: absolute; inset: 0 auto 0 0; background: var(--cyan); }
.lb-ref { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink-muted); }
.lb-gold { background: var(--gold); }
.lb-gold-text { color: var(--gold); }
.lb-ready-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-100); font-size: 14px; }
.lb-ready-state { font-size: 12px; }
.lb-ok { color: var(--cyan); }
.lb-now { color: var(--gold); }
.lb-wait { color: var(--ink-muted); }
.lb-dossier-box { display: flex; flex-direction: column; gap: 16px; }
.lb-h-small { margin: 0; }
.lb-dossier { display: grid; grid-template-columns: 1fr minmax(120px, 200px) 1fr; border: 1px solid var(--line-100); background: var(--surface-100); }
.lb-side { padding: 24px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line-100); }
.lb-side-r { align-items: flex-end; text-align: right; }
.lb-champ { box-shadow: inset 0 0 0 1px var(--gold); }
.lb-side-name { font-family: var(--font-display); font-style: italic; font-size: 32px; }
.lb-none { font-size: 22px; color: var(--ink-muted); }
.lb-vs { display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line-100); font-family: var(--font-display); font-style: italic; font-size: 28px; color: var(--ink-muted); }
.lb-cell { padding: 12px 24px; font-size: 16px; border-bottom: 1px solid var(--line-100); }
.lb-cell-r { text-align: right; }
.lb-key { padding: 12px 8px; text-align: center; border-bottom: 1px solid var(--line-100); align-self: stretch; display: flex; align-items: center; justify-content: center; }
.seg { animation: or-seg .5s cubic-bezier(.2,0,0,1) both; }
@keyframes or-seg { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes or-probe { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }

/* ---- the intros ---- */
.overlay { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.in-card { position: fixed; inset: 8vh 6vw; background: var(--surface-000); border: 1px solid var(--line-100); box-sizing: border-box; padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 14px; overflow: hidden; }
.in-center { align-items: center; text-align: center; }
.in-gold { color: var(--gold); }
.in-carmine { color: var(--carmine); }
.in-brand { font-family: var(--font-display); font-size: 52px; line-height: 1; }
.in-sub { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--ink-muted); }
.in-big { font-family: var(--font-display); font-size: 56px; line-height: .95; }
.in-name { font-family: var(--font-display); font-style: italic; font-size: 40px; line-height: 1; }
.in-facts { font-size: 14px; color: var(--ink-muted); }
.in-total { font-size: 48px; color: var(--gold); line-height: 1; }
.in-val { font-size: 14px; }
.in-edge-gold { box-shadow: inset 0 0 0 1px var(--gold); }
.in-edge-carmine { box-shadow: inset 0 0 0 1px var(--carmine); }
.in-fail-kicker { display: inline-flex; align-items: center; gap: 8px; }
.in-open .rule { animation: op-rule 6s cubic-bezier(.2,0,0,1) both; transform-origin: left; width: 48px; }
.in-open .lbl { animation: op-a 6s cubic-bezier(.2,0,0,1) both; }
.in-open .in-brand { animation: op-b 6s cubic-bezier(.2,0,0,1) both; }
.in-open .in-sub { animation: op-c 6s cubic-bezier(.2,0,0,1) both; }
@keyframes op-rule { 0% { transform: scaleX(0); } 15%, 90% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes op-a { 0%, 10% { opacity: 0; transform: translateY(12px); } 25%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes op-b { 0%, 30% { opacity: 0; letter-spacing: .4em; } 50%, 90% { opacity: 1; letter-spacing: -.015em; } 100% { opacity: 0; } }
@keyframes op-c { 0%, 55% { opacity: 0; } 70%, 90% { opacity: 1; } 100% { opacity: 0; } }
/* 3: the dossier */
.in-split { flex-direction: row; justify-content: space-between; align-items: stretch; gap: 0; padding: 0; }
.in-side { flex: 1; padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.in-side-r { align-items: flex-end; text-align: right; border-left: 1px solid var(--line-100); }
.in-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 14px; background: var(--surface-000); border: 1px solid var(--line-200); font-family: var(--font-display); font-style: italic; font-size: 22px; }
/* 4: the countdown */
.in-count-box { flex-direction: row; align-items: center; justify-content: center; gap: 48px; }
.in-dial { position: relative; width: min(46vh, 40vw); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.in-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.in-track { fill: none; stroke: var(--line-100); stroke-width: 2; }
.in-ring { fill: none; stroke: var(--gold); stroke-width: 2; }
.in-count { position: relative; font-family: var(--font-display); font-style: italic; line-height: .9; }
.in-quiet { color: var(--ink-muted); font-size: 96px; }
.in-loud { color: var(--ink); font-size: 140px; }
.in-hunt { color: var(--carmine); font-size: 120px; }
/* 5: the change of the hunter: a band, the data are seen at the edges */
.in-band { position: fixed; left: 0; right: 0; top: 36vh; padding: 22px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; border-top: 2px solid var(--carmine); border-bottom: 2px solid var(--carmine); background: var(--surface-100); color: var(--carmine); }
.in-profile { display: inline-flex; align-items: center; gap: 14px; }
.in-profile-name { font-family: var(--font-display); font-style: italic; font-size: 64px; line-height: 1; color: var(--ink); text-transform: capitalize; }
/* 2: a line per hunter */
.toasts { position: fixed; left: 24px; bottom: 24px; z-index: 35; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.in-hunter { display: flex; align-items: center; gap: 14px; min-width: 280px; padding: 10px 14px; border-left: 2px solid var(--chart-1); background: var(--surface-100); animation: sl 5s cubic-bezier(.2,0,0,1) both; }
.in-hunter-icon { color: var(--chart-1); display: inline-flex; }
.in-hunter-name { flex: 1; font-size: 15px; }
.in-hunter-rtt { font-size: 14px; }
@keyframes sl { 0% { opacity: 0; transform: translateX(-24px); } 12%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* 7: the corner badge of the technical break */
.corner { position: fixed; top: 16px; right: 16px; z-index: 40; width: 320px; max-width: calc(100vw - 32px); box-sizing: border-box; display: flex; gap: 12px; padding: 12px 14px; background: var(--surface-100); border: 1px solid var(--line-100); border-left: 3px solid var(--copper); }
.tech-icon { color: var(--copper); display: inline-flex; animation: bl 1.4s steps(2, end) infinite; }
.tech-text { display: flex; flex-direction: column; gap: 4px; }
.tech-title { font-family: var(--font-display); font-size: 20px; line-height: 1.1; }
@keyframes bl { 50% { opacity: .25; } }
/* 10: the waiting */
.wt-card { z-index: 31; }
.wt-champ { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; }
.wt-moment { display: flex; align-items: center; gap: 12px; min-height: 40px; font-size: 18px; }

/* ---- the arena (Arena.dc.html, order V-04) ---- */
.ar { display: flex; flex-direction: column; }
.ar[hidden] { display: none !important; }
.ar-top { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 14px 32px; border-bottom: 1px solid var(--line-100); }
.ar-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 22px 32px 0; }
.ar-hero-text { display: flex; flex-direction: column; gap: 10px; }
.ar-kicker { color: var(--carmine); display: inline-flex; align-items: center; gap: 8px; }
.ar-title-h1 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: .95; letter-spacing: -.015em; }
.ar-title-i { font-style: italic; color: var(--ink-muted); font-size: 28px; }
.ar-medals { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.ar-hero-nums { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 36px; }
.ar-stat-r { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.ar-rps { font-size: 36px; line-height: 1; color: var(--gold); }
.ar-clock { font-size: 48px; }
.ar-cams { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 32px 0; }
.ar-why { margin-left: 8px; }
.ar-stage { position: relative; margin: 8px 32px 0; min-height: 560px; border: 1px solid var(--line-100); background: var(--surface-000); overflow: hidden; }
.ar-cam { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.ar-empty { padding: 48px 24px; }
.ar-title { color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.arena { max-height: 560px; margin: 0 auto; }
.arena .base { fill: none; stroke-width: 1; opacity: .22; }
.arena .tr { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 22 !important; animation: or-flow 1.4s linear infinite; }
@keyframes or-flow { to { stroke-dashoffset: -25; } }
.ar-ring { stroke-dasharray: 2 6; }
.ar-hunter { fill: var(--surface-200); stroke-width: 1.5; stroke-dasharray: none; }
.ar-dashed { stroke-dasharray: 4 3; }
.ar-node { color: var(--ink-muted); }
.ar-node.s1 { color: var(--chart-1); } .ar-node.s2 { color: var(--chart-2); } .ar-node.s3 { color: var(--chart-3); } .ar-node.s4 { color: var(--chart-4); }
.ch .ar-node.s4 { stroke-dasharray: none; }
.ar-core { fill: var(--surface-200); stroke: var(--line-200); stroke-width: 1; }
.ar-cpu-track { fill: none; stroke: var(--surface-300); stroke-width: 6; }
.ar-cpu { fill: none; stroke: var(--cyan); stroke-width: 6; }
.ar-cpu.ar-hot { stroke: var(--copper); }
.ar-rtt { fill: none; stroke: var(--steel); stroke-width: 1.25; stroke-dasharray: 2 4; }
.ar-thick { stroke-width: 2.5; }
.ar-ghost { fill: none; stroke: var(--ink-muted); stroke-width: 1.5; stroke-dasharray: 1 4; stroke-linecap: round; }
.ar-overtake { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 3 3; }
.ar-gold { color: var(--gold); }
.ar-hunter-cam, .ar-target-cam { padding: 32px; gap: 20px; }
.ar-hunter-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ar-hunter-name { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ar-hunter-big { font-family: var(--font-display); font-style: italic; font-size: 64px; line-height: 1; }
.ar-hunter-nums { display: flex; gap: 40px; }
.ar-stat { display: flex; flex-direction: column; gap: 10px; }
.ar-hunter-nums .ar-stat { align-items: flex-end; gap: 0; }
.ar-huge { font-size: 88px; line-height: 1; }
.ar-target-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.ar-bar { height: 8px; background: var(--surface-300); position: relative; }
.ar-fill { position: absolute; inset: 0 auto 0 0; background: var(--cyan); }
.ar-fill.ar-hot { background: var(--copper); }
.ar-life-drifts { background: var(--carmine); } .ar-life-holds { background: var(--copper); } .ar-life-calm { background: var(--cyan); } .ar-life-none { background: var(--surface-300); }
.ar-verdict { position: absolute; left: 20px; top: 16px; display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; background: var(--surface-100); border: 1px solid var(--line-100); width: 230px; box-sizing: border-box; }
.ar-verdict-word { font-family: var(--font-display); font-size: 26px; line-height: 1.05; }
.ar-life-t-drifts { color: var(--carmine); } .ar-life-t-holds { color: var(--copper); } .ar-life-t-calm { color: var(--cyan); } .ar-life-t-none { color: var(--ink-muted); }
.ar-row { display: flex; justify-content: space-between; }
.ar-sm { font-size: 12px; }
.ar-combo { position: absolute; right: 20px; top: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 12px 16px; background: var(--surface-100); border: 1px solid var(--line-100); }
.ar-combo-n { font-size: 44px; line-height: 1; color: var(--gold); }
.ar-combo.ar-broken { border-color: var(--carmine); animation: or-brk .5s steps(4, end) 3; }
.ar-combo.ar-broken .lbl, .ar-combo.ar-broken .ar-combo-n { color: var(--carmine); }
@keyframes or-brk { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ar-toasts { position: absolute; left: 20px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; max-width: 340px; pointer-events: none; }
.ar-toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface-100); border: 1px solid var(--gold); box-shadow: var(--shadow-deep); color: var(--gold); animation: or-toast 6s cubic-bezier(.2,0,0,1) both; }
.ar-toast-car { border-color: var(--carmine); color: var(--carmine); }
.ar-toast-text { display: flex; flex-direction: column; gap: 2px; }
.ar-toast-name { font-family: var(--font-display); font-size: 22px; line-height: 1.1; color: var(--ink); }
@keyframes or-toast { 0% { opacity: 0; transform: translateX(-24px); } 7% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
.ar-replay { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; }
.ar-final { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ar-final-n { font-family: var(--font-display); font-style: italic; font-size: 260px; line-height: 1; color: var(--carmine); opacity: .9; text-shadow: 0 0 40px #000; animation: or-big 1s cubic-bezier(.2,0,0,1) infinite; }
@keyframes or-big { 0% { opacity: 0; transform: scale(1.25); } 20% { opacity: 1; transform: scale(1); } 90% { opacity: 1; } 100% { opacity: 0; } }
.ar-timeline { margin: 0 32px; padding: 14px 0 0; position: relative; }
.ar-track { position: relative; height: 6px; background: var(--surface-300); }
.ar-track-now { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); }
.ar-marks { position: relative; height: 60px; }
.mk { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--ink-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; min-width: 36px; min-height: 28px; }
.mk:hover { color: var(--gold); }
.mk:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mk .pin { width: 2px; height: 10px; background: currentColor; }
.ar-lv-1 { top: 30px; }
.ar-mk-spike, .ar-mk-signal_lost, .ar-mk-combo_break { color: var(--carmine); }
.ar-mk-medal, .ar-mk-overtake { color: var(--gold); }
.ar-mk-profile { color: var(--ink); }
.ar-race { margin: 0 32px; padding: 14px 20px; background: var(--surface-100); border: 1px solid var(--line-100); display: flex; flex-direction: column; gap: 8px; }
.ar-race-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.ar-gap { font-size: 14px; color: var(--copper); }
.ar-gap.ar-gold { color: var(--gold); }
.ar-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line-100); border-top: 1px solid var(--line-100); margin-top: 16px; }
.ar-card { background: var(--surface-100); padding: 14px 20px; display: flex; flex-direction: column; gap: 8px; }
.ar-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ar-card-who { display: inline-flex; align-items: center; gap: 10px; }
.ar-rank { font-size: 22px; color: var(--ink-muted); }
.ar-rank.ar-gold { color: var(--gold); }
.ar-reg { font-size: 13px; }
.ar-over { font-size: 22px; }
.ar-note { align-self: flex-start; }
.ar-ticker { display: flex; align-items: stretch; border-top: 1px solid var(--carmine); background: var(--surface-100); overflow: hidden; margin-top: 16px; }
.ar-ticker-lbl { flex: none; display: inline-flex; align-items: center; padding: 12px 20px; background: var(--carmine); color: var(--on-carmine); }
.ar-ticker-body { flex: 1; overflow: hidden; display: flex; align-items: center; }
.mq { display: flex; width: max-content; animation: or-mq 38s linear infinite; }
.ar-ticker-text { font-size: 13px; white-space: nowrap; padding-right: 64px; }
@keyframes or-mq { to { transform: translateX(-50%); } }

/* ---- the finale (Finale.dc.html, order V-05) ---- */
.fn { display: flex; flex-direction: column; }
.fn[hidden] { display: none !important; }
.fn-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 32px; border-bottom: 1px solid var(--line-100); }
.fn-top-l { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.fn-back { background: transparent; border: 0; padding: 0; min-height: 28px; cursor: pointer; color: var(--gold); }
.fn-back:hover { color: var(--gold-strong); }
.fn-back:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fn-b-cyan { color: var(--cyan); border-color: var(--cyan); }
.fn-b-carmine { color: var(--carmine); border-color: var(--carmine); }
.fn-b-muted { color: var(--ink-muted); border-color: var(--line-200); }
.fn-main { width: 100%; max-width: 1440px; margin: 0 auto; padding: 40px 32px 56px; box-sizing: border-box; display: flex; flex-direction: column; gap: 32px; }
.fn-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; animation: fn-in .5s cubic-bezier(.2,0,0,1) both; }
.fn-hero-text { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.fn-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 72px; line-height: .95; letter-spacing: -.02em; }
.fn-word { font-style: italic; }
.fn-phrase { margin: 0; font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.fn-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fn-total { font-size: 96px; line-height: 1; color: var(--gold); }
.fn-reason { align-items: flex-start; max-width: 560px; padding: 20px 24px; background: var(--surface-100); border: 1px solid var(--line-200); }
.fn-reason-fail { border-color: var(--carmine); }
.fn-reason-text { font-family: var(--font-display); font-size: 32px; line-height: 1.15; color: var(--ink); }
.fn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line-100); border: 1px solid var(--line-100); }
.fn-cell { background: var(--surface-200); padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; }
.fn-val { font-size: 28px; }
.fn-t-gold { color: var(--gold); } .fn-t-cyan { color: var(--cyan); } .fn-t-carmine { color: var(--carmine); } .fn-t-muted { color: var(--ink-muted); } .fn-t-plain { color: var(--ink); }
.fn-gold { color: var(--gold); }
.fn-medals { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fn-lower { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.fn-announce { flex: 1 1 520px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 32px; background: var(--surface-100); border: 1px solid var(--gold); box-shadow: var(--shadow-gold); }
.fn-announce-top { display: flex; flex-direction: column; gap: 10px; }
.fn-announce-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 1.05; }
.fn-clock { font-size: 44px; }
.fn-card { flex: 1 1 520px; display: flex; flex-direction: column; gap: 12px; }
.fn-canvas { width: 100%; height: auto; aspect-ratio: 1200 / 630; border: 1px solid var(--line-100); background: var(--surface-000); }
.fn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fn-note { margin-left: 8px; }
@keyframes fn-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* the bar of the replay of a whole episode */
.rp-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 38; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 14px; box-sizing: border-box; background: var(--surface-100); border: 1px solid var(--gold); box-shadow: var(--shadow-deep); }
.rp-title { color: var(--gold); }
.rp-btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .fn-hero { animation: none !important; }
  .seg, .probe, .in-open .rule, .in-open .lbl, .in-open .in-brand, .in-open .in-sub, .in-hunter, .tech-icon { animation: none !important; }
  .arena .tr, .mq, .ar-toast, .ar-final-n, .ar-combo.ar-broken { animation: none !important; }
  /* the journal stands still and wraps: the same lines, no motion */
  .mq { width: auto; flex-wrap: wrap; }
  .mq .ar-ticker-text { white-space: normal; }
  .mq .ar-ticker-text[aria-hidden] { display: none; }
  .ar-ticker-body { overflow: auto; max-height: 96px; }
}