/* yoursitesux.lol — FIGHT NIGHT, the battle page's sheet (v6 §3.2; the owner
   chose direction A, 2026-09-22). Loaded after site.css on /battle/ only: its
   :root tokens turn the whole page into the dark ring — header, footer, line
   and buttons keep their site.css rules and simply wear the night's colours.
   Contrast, measured against the panel (#15171d): ink 16:1, mute 8.8:1, gold
   11:1, gold-on-dark pill 11:1, white on the red KO band 5.9:1 — the X-ray
   grades contrast, and this page fights on it too. ⛔ No inline style (CSP
   `style-src 'self'`): the round-by-round reveal is one class on the list. */
:root{
  color-scheme:dark;
  --paper:#0b0c10; --panel:#15171d; --ink:#f4f5f7; --mute:#b3b9c6;
  --sux-text:#ff6b7d; --good-text:#34c274;
  --rule:rgb(244 245 247/.14); --wash:rgb(244 245 247/.07); --tile-bg:#22252e;
  --focus:#f4f5f7;
  --gold:#ffd166; --on-gold:#14161b; --rope:#c8102e; --rope-2:#2f6df6;
  --shadow:0 30px 70px -30px rgb(0 0 0/.85), 0 2px 6px rgb(0 0 0/.5);
  --spot:radial-gradient(60% 55% at 50% 0%,rgb(255 209 102/.16),transparent 70%);
}
body{background:var(--paper) var(--spot) no-repeat}
.fight-root{margin-top:8px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── the ring: two corners facing each other, the score between them ─── */
.ring{position:relative;margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px 28px;align-items:center;
  padding:clamp(22px,4vw,40px);border-radius:var(--r-panel);background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
/* the ropes: red corner, blue corner, along the top edge */
.ring::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--rope) 0 50%,var(--rope-2) 50% 100%)}
.corner{display:grid;gap:10px;min-width:0}
.corner-tag{font-family:var(--text);font-weight:700;font-size:var(--s0);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.corner-a .corner-tag{color:var(--sux-text)}
.corner-b .corner-tag{color:#8fb4ff}
.corner-shot{position:relative;aspect-ratio:16/10;border-radius:var(--r-tile);overflow:hidden;background:var(--tile-bg);box-shadow:inset 0 0 0 1px var(--rule)}
.corner-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.corner-shot::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--rule);pointer-events:none}
.corner-noshot{display:grid;place-items:center;height:100%;color:var(--mute);font-weight:600;font-size:var(--s1)}
.corner-host{font-size:clamp(var(--s2),2.6vw,var(--s4));letter-spacing:-.03em;word-break:break-all}
.corner-b .corner-host,.corner-b .corner-overall,.corner-b .corner-tag,.corner-b .corner-wait{text-align:right}
.corner-overall{display:flex;align-items:baseline;gap:.35rem;font-family:var(--display);font-weight:700;line-height:1}
.corner-b .corner-overall{justify-content:flex-end}
.corner-overall b{font-size:var(--s5);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.corner-overall small{font-size:var(--s0);font-weight:600;color:var(--mute)}
.corner-wait{font-size:var(--s1);font-weight:600;color:var(--mute)}
.corner.waiting .corner-host{font-size:clamp(var(--s3),4vw,var(--s5))}
.mid{display:grid;gap:4px;justify-items:center;text-align:center;min-width:8rem}
.score-tag,.vs{font-family:var(--text);font-weight:700;font-size:var(--s0);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.vs{font-family:var(--display);font-size:var(--s4);letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.score{font-family:var(--display);font-weight:800;font-size:clamp(var(--s6),8vw,6.4rem);line-height:.9;letter-spacing:-.05em;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.score-who{font-family:var(--display);font-weight:700;font-size:var(--s1);color:var(--ink);word-break:break-all}
.eta{max-width:18rem;font-size:var(--s1);font-weight:600;color:var(--ink)}
.ring.measuring .mid::after{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--gold);animation:pulse 1.2s ease-in-out infinite}
.headline{overflow-wrap:anywhere;margin-top:26px;text-align:center;font-size:clamp(var(--s3),4.2vw,var(--s5));letter-spacing:-.03em;max-width:34rem;margin-inline:auto;text-wrap:balance}

/* the knockout band */
.ko{margin-top:22px;display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:var(--r-ctl);background:var(--rope);color:#fff}
.ko-tag{font-family:var(--display);font-weight:800;font-size:var(--s5);letter-spacing:-.04em;line-height:1}
.ko-line{overflow-wrap:anywhere;font-family:var(--display);font-weight:700;font-size:var(--s2);line-height:1.2}

/* ── the scoreboard: five rounds, revealed one by one ─────────────────── */
.rounds{list-style:none;margin-top:34px;display:grid;gap:10px}
.rd{padding:14px clamp(12px,2.4vw,22px);border-radius:var(--r-ctl);background:var(--panel);box-shadow:inset 0 0 0 1px var(--rule)}
.rd-row{display:grid;grid-template-columns:6rem minmax(0,1fr) 6rem;align-items:center;gap:12px}
.rd-mark{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:var(--s4);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;color:var(--mute)}
.rd-mark-b{justify-content:flex-end;text-align:right}
.won-a .rd-mark-a,.won-b .rd-mark-b{color:var(--ink)}
.rd-win,.rd-draw,.rd-nc{font-style:normal;font-family:var(--text);font-weight:800;font-size:.72rem;letter-spacing:.08em;line-height:1;padding:5px 8px 4px;border-radius:4px}
.rd-win{background:var(--gold);color:var(--on-gold)}
.rd-draw{background:var(--ink);color:var(--paper);justify-self:center}
.rd-nc{background:var(--wash);color:var(--mute);text-transform:uppercase;justify-self:center}
.rd-mid{display:grid;gap:4px;justify-items:center;text-align:center;min-width:0}
.rd-n{font-family:var(--display);font-weight:700;font-size:var(--s2);letter-spacing:-.02em;line-height:1.1}
.rd-goal{font-size:var(--s0);font-weight:600;color:var(--mute)}
.won-draw .rd-n,.won-none .rd-n{color:var(--ink)}
.rd-why{overflow-wrap:anywhere;margin-top:12px;padding-top:12px;border-top:1px solid var(--rule);font-size:var(--s1);line-height:1.45;color:var(--ink);text-wrap:pretty}
.rd-why.quiet{color:var(--mute);font-size:var(--s0)}
/* the reveal, only where motion is welcome: each round steps in after the last */
@media (prefers-reduced-motion:no-preference){
  .rounds .rd{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.9,.3,1)}
  .rounds:not(.on) .rd{opacity:0;transform:translateY(14px)}
  .rounds.on .rd:nth-child(2){transition-delay:.35s}
  .rounds.on .rd:nth-child(3){transition-delay:.7s}
  .rounds.on .rd:nth-child(4){transition-delay:1.05s}
  .rounds.on .rd:nth-child(5){transition-delay:1.4s}
  .rounds.on .rd:nth-child(n+6){transition-delay:1.75s}
  .ring.done .score{animation:land .5s cubic-bezier(.2,1.2,.35,1) both}
}

/* ── the actions and the void ──────────────────────────────────────────── */
.actions{margin-top:30px;display:flex;gap:10px;flex-wrap:wrap}
.actions .btn{min-height:48px;font-size:var(--s1);padding:0 18px}
.void-note{margin-top:8px;text-align:center}
.void-line{margin:10px auto 0;max-width:34rem;color:var(--mute);font-size:var(--s1)}
.ring.void .score-tag{font-size:var(--s1)}

/* ── the door: two addresses and one bell ──────────────────────────────── */
.enter{margin:clamp(24px,6vw,64px) auto 0;max-width:40rem;text-align:center}
.enter .kicker{display:block;margin-bottom:10px}
.enter h1{font-size:clamp(var(--s6),9vw,var(--s8));letter-spacing:-.045em;line-height:.95}
.fight-word{color:var(--gold)}
.enter-line{margin:16px auto 0;max-width:30rem;font-size:var(--s2);line-height:1.35;color:var(--mute);text-wrap:pretty}
.fight-form{margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:end;text-align:left}
.field{display:grid;gap:6px;min-width:0}
.field span{font-family:var(--text);font-weight:700;font-size:var(--s0);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.field input{min-width:0;min-height:52px;padding:0 14px;border:1.5px solid var(--rule);border-radius:var(--r-ctl);background:var(--panel);font-size:var(--s2);font-weight:500;outline:none;transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:var(--mute);font-weight:400}
.field input:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--wash)}
.vs-form{align-self:end;padding-bottom:10px;font-size:var(--s3)}
.btn.bell{grid-column:1/-1;background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.enter .line{justify-content:center}
.enter-note{margin-top:22px;font-size:var(--s0);color:var(--mute)}

/* ── phones ───────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .ring{grid-template-columns:1fr 1fr;gap:16px 12px;padding:22px 14px 18px}
  .ring .mid{grid-column:1/-1;order:-1;min-width:0}
  .corner-host{font-size:var(--s2)}
  .corner-overall b{font-size:var(--s4)}
  .corner.waiting .corner-host{font-size:var(--s2)}
  .rd-row{grid-template-columns:3.6rem minmax(0,1fr) 3.6rem;gap:8px}
  .rd-mark{font-size:var(--s3);flex-wrap:wrap}
  .rd-win{font-size:.62rem;padding:4px 5px 3px}
  .rd-n{font-size:var(--s1)}
  .actions .btn{width:100%}
  .fight-form{grid-template-columns:1fr}
  .vs-form{justify-self:center;padding:0}
  .ko{flex-direction:column;align-items:flex-start;gap:6px}
}