/* Live View (read-only, practice) - visual layer.
   A bridge between the current 8brCam site and the Legacy Archive:
   - Archive: near-black canvas, charcoal panels, silver bevel frames with corner ticks, condensed display
     headings (TeX Gyre Heros Cn Bold, the archive's own webfont), film perforations, chrome wordmark.
   - Palette: dark navy, black and silver, with one electric-blue accent (still named --cyan in the variables).
   - Event screens: the supplied pool-and-camera artwork is the hero background (full width on desktop, its own
     crop on phones). The no-event screen and Rules & Format carry no image.
   Tournament data always sits on solid dark panels. */
@font-face { font-family: "Heros Cn"; src: url("/fonts/texgyreheroscn-bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

body.live {
  color-scheme: dark;
  --bg: #060a13; --card: #0b1220; --ink: #eef2f8; --ink-2: #c6cfdd; --muted: #9aa8bd; --dim: #8794aa;
  --line: #1b2740; --line-2: #2a3957; --silver-hi: #d3dae6; --silver: #8d9bb3; --silver-lo: #3d4a63;
  --cyan: #2f86ff; --cyan-dim: #1f56b3; --link: #cfd4d8;
  --bad: #f4a3a3; --bad-bg: #1a1011; --bad-line: #6b2b2b;
  --chrome: linear-gradient(180deg, #ffffff 0%, #d3d7db 44%, #8f969d 56%, #e4e7ea 100%);
  --perf: repeating-linear-gradient(90deg, #1f2c47 0 10px, transparent 10px 21px);
  --display: "Heros Cn", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 40px); --max: 1200px; --r: 2px;
  position: relative; overflow-x: clip;
  background: var(--bg) radial-gradient(1100px 480px at 50% -160px, #0f1a30 0%, rgba(6,10,19,0) 70%) no-repeat;
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
}
body.live :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: var(--r); }
body.live .muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.live main { max-width: var(--max); margin: 0 auto; padding: 18px var(--gutter) 48px; }
/* header, notice and page share one centred column so nothing hangs off to one side */
.topin, .practice .in, .jump .in { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---- header: archive bar, chrome wordmark, thin film strip with the blue hairline ---- */
body.live .top { display: block; position: relative; z-index: 7; background: #050911; border-bottom: 1px solid #16213a; padding: 0; }
body.live .topin { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; min-height: 62px; gap: 8px 16px; }
body.live .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 44px; font-size: 14px; }
.brand img.em { height: 28px; width: 28px; display: block; }
.brand img.wm { height: 22px; width: auto; display: block; }
.top .hdrtag { display: inline-flex; align-items: center; gap: 12px; }
.top .lbl { font-family: var(--display); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: var(--muted); padding-left: 14px; border-left: 1px solid var(--line-2); }
.top .textlink { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font: 700 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.top .toplinks { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0 18px; }
.top .toplinks .textlink { margin-left: 0; }
.top .textlink[aria-current="page"] { color: #fff; border-bottom-color: var(--cyan); }
.top .textlink:hover { color: #fff; }
.top .textlink:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--silver); }
.filmstrip { height: 10px; position: relative; z-index: 7; background: #050911; border-bottom: 1px solid #1b2a47; }
.filmstrip::before, .filmstrip::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: repeating-linear-gradient(90deg, #26324a 0 8px, transparent 8px 17px); }
.filmstrip::before { top: 2px; } .filmstrip::after { bottom: 2px; }

/* ---- practice notice: restrained, dark, with a clear cyan label ---- */
.stick { position: sticky; top: 0; z-index: 6; background: #070c16; border-bottom: 1px solid var(--line-2); }
.practice { color: var(--ink-2); padding: 9px 0; font-size: 14px; line-height: 1.4; }
.jump { display: none; border-top: 1px solid var(--line); }
.jump .in { display: flex; gap: 0; }
.jump a { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font: 700 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; }
.jump a:hover, .jump a:focus-visible { color: #fff; border-bottom-color: var(--cyan); }
@media (max-width: 900px) { .jump:not([hidden]) { display: block; } }
#pairings, #standings { scroll-margin-top: 112px; }
body.rules .jump { display: none; }
@media (max-width: 900px) { body.rules .jump { display: block; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.practice b { display: inline-block; margin-right: 6px; padding: 1px 8px; border: 1px solid var(--cyan); border-radius: var(--r); font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }

/* ---- links and buttons: the archive's bevelled button ---- */
.navlink, body.live button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); text-decoration: none; cursor: pointer;
  background: #0f1830; border: 1px solid #34476b; border-top-color: #34476b; border-bottom-color: #1f2c47; border-radius: var(--r); }
.navlink:hover, body.live button:hover:not(:disabled) { background: #15203c; border-color: #5878b8; color: #fff; }
body.live button.small { font-size: 14px; padding: 10px 16px; }
body.live button[aria-disabled="true"] { opacity: .65; cursor: progress; }

/* ---- panels: dark navy, one thin border, no ornament ---- */
body.live .card, .livehero, .champ { position: relative; border-radius: 3px; background: linear-gradient(180deg, rgba(14,22,40,.96), rgba(9,15,28,.96)); border: 1px solid #25355a; }
body.live .card { padding: 20px 18px 14px; margin-bottom: 16px; }

/* ---- condensed display headings ---- */
#live h1, .eh h1, #live h2, .rulespage h1, .rulespage h2, .cname { font-family: var(--display); font-weight: 700; letter-spacing: .01em; }
#live h2 { font-size: 22px; text-transform: uppercase; letter-spacing: .06em; margin: 0; color: var(--ink); }
.small-note { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--muted); }
/* ---- round-by-round results, Find me, how standings work ---- */
.stand tr.srow { cursor: pointer; }
.stand tr.srow:hover td { background: rgba(47,134,255,.06); }
body.live button.rowbtn { display: flex; justify-content: flex-start; width: 100%; align-items: center; min-height: 44px; padding: 2px 0; margin: 0; background: none; border: 0; border-radius: 0; text-align: left; font: inherit; color: inherit; letter-spacing: inherit; text-decoration: underline dotted; text-decoration-color: var(--silver-lo); text-underline-offset: 4px; }
body.live button.rowbtn:hover:not(:disabled) { background: none; border: 0; color: #fff; }
body.live button.rowbtn::after { content: " ▾"; font-size: 12px; color: var(--muted); text-decoration: none; display: inline-block; }
body.live button.rowbtn[aria-expanded="true"]::after { content: " ▴"; }
.rstrip { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rc { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 1px; font: 700 12px/1.4 var(--display); letter-spacing: .06em; color: var(--ink-2); white-space: nowrap; }
.rc i { font-style: normal; font-weight: 400; color: var(--muted); }
.rc.win { color: var(--cyan); border-color: var(--cyan-dim); background: rgba(47,134,255,.1); }
.rc.ffwin { color: var(--silver-hi); border-color: var(--silver); border-style: dashed; }
.rc.ffloss, .rc.bye, .rc.pending, .rc.review, .rc.none { color: var(--muted); border-style: dashed; }
.rc.loss { color: var(--muted); }
.stand tr.detail td { padding-top: 0; background: rgba(5,9,17,.35); }
.stand tr.detail[hidden] { display: none; }
.rounds { list-style: none; margin: 0; padding: 8px 0 6px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.rounds b { color: var(--muted); font-weight: 600; margin-right: 4px; }
.stand tr.me td { background: rgba(47,134,255,.16); }
.stand tr.me td.rk { box-shadow: inset 3px 0 0 var(--cyan); }
.stand .pill.you { margin-left: 8px; }
.pair.me { background: rgba(47,134,255,.14); box-shadow: inset 3px 0 0 var(--cyan); }
.findme { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0; padding: 10px 14px; border: 1px solid var(--line-2); background: rgba(7,12,22,.88); }
.findme .fl { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: var(--silver-hi); }
.findme select { min-height: 44px; max-width: 100%; min-width: 220px; padding: 8px 10px; font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: #0b1324; border: 1px solid var(--silver-lo); border-radius: 1px; }
.findme .fnote { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--ink-2); }
.findme .where { color: var(--muted); font-size: 13px; }
.how { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; font-size: 14px; color: var(--ink-2); }
.how summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; font-weight: 600; color: var(--silver-hi); }
.how p { margin: 8px 0 0; }
@media (max-width: 640px) {
  .rstrip { display: none; }
  .findme select { flex: 1 1 100%; min-width: 0; }
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .chrome-text, .livehero h1, .cname { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* ---- event header ---- */
.livehero { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; margin: 0 0 16px; overflow: hidden; }
.livehero .hero-text { position: relative; z-index: 1; padding: 22px 24px; min-width: 0; }
.livehero h1 { margin: 0; font-size: clamp(30px, 4.6vw, 52px); line-height: .98; text-transform: uppercase; overflow-wrap: anywhere; -webkit-text-fill-color: initial; color: #fff; }
@supports (-webkit-background-clip: text) or (background-clip: text) { .livehero h1 { color: transparent; } }
.livehero .sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 16px; color: var(--ink-2); }
body.live .badge { font-family: var(--display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 2px 9px; border-radius: var(--r); background: transparent; border: 1px solid var(--silver-lo); color: var(--silver-hi); }
body.live .badge.running { border-color: var(--cyan-dim); color: var(--cyan); }
.dots { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--silver); }
.dot.on { background: var(--silver-hi); border-color: var(--silver-hi); }
/* event summary: what is happening, at a glance. It sits straight on the hero artwork (no panel). */
.kickline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 26px; }
.kk { font-family: var(--display); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.state { display: inline-flex; align-items: center; gap: 7px; padding: 2px 10px; border-radius: var(--r); font-family: var(--display); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; }
.state.running { color: #ffffff; background: var(--cyan); }
.state.running i { width: 7px; height: 7px; border-radius: 50%; background: #ffffff; }
.state.final { color: var(--ink); border: 1px solid var(--silver-hi); background: rgba(8,14,28,.55); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 12px 32px; margin: 12px 0 0; }
.facts .f { min-width: 0; }
.facts dt { font-family: var(--display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
.facts dd small { font-size: 16px; color: var(--muted); letter-spacing: .04em; }
.track { display: flex; gap: 4px; margin-top: 8px; }
.seg { width: 22px; height: 5px; border: 1px solid var(--silver); border-radius: 1px; }
.seg.done { background: var(--silver-hi); border-color: var(--silver-hi); }
.seg.now { background: var(--cyan); border-color: var(--cyan); }
.bar { height: 5px; margin-top: 8px; border: 1px solid var(--silver); border-radius: 1px; overflow: hidden; min-width: 96px; }
.bar i { display: block; height: 100%; background: var(--cyan); }
.evnote { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }
/* ---- event hero: one band, same on no-event / in progress / finished. The artwork lives only here. ---- */
.herowrap { position: relative; overflow: hidden; min-height: clamp(290px, 24vw, 400px); margin-bottom: 4px; }
.herowrap:empty { display: none; }
.herowrap::before { content: none; }
/* the artwork is a fixed layer behind the page: it starts where the hero starts (top:auto = its place in the flow, just under the pinned header) and stays put while the page scrolls */
.artbg { position: fixed; left: 0; right: 0; top: auto; height: clamp(290px, 24vw, 400px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,9,17,.7) 0, rgba(5,9,17,0) 56px), linear-gradient(90deg, rgba(4,8,18,.6) 0%, rgba(4,8,18,.24) 42%, rgba(4,8,18,0) 68%), url(/img/showdown-hero-2000.webp) center 42% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.5) 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.5) 84%, transparent 100%); }
body:has(#herowrap:empty) .artbg { display: none; }
.eh .in { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 26px var(--gutter) 46px; }
.eh .hero-text { max-width: 620px; }
.eh h1 { margin: 10px 0 0; font-size: clamp(28px, 3.2vw, 42px); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; color: #fff; }
@supports (-webkit-background-clip: text) or (background-clip: text) { .eh h1 { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; } }
.eh-empty .in { padding-bottom: 54px; }
.eh-empty p { margin: 12px 0 0; max-width: 56ch; color: var(--ink-2); }
.eh-empty .navlink { margin-top: 16px; }

/* ---- status bar, errors ---- */
.statusbar { display: flex; align-items: center; gap: 0 14px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.statusbar .lu { font-variant-numeric: tabular-nums; }
.statusbar .every::before { content: "·"; margin-right: 14px; }
.statusbar button { margin-left: auto; }
body.live button.ghost { background: transparent; border-color: transparent; color: var(--ink-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--silver-lo); }
body.live button.ghost:hover:not(:disabled) { background: transparent; border-color: transparent; color: #fff; }
body.live #refresh { border-bottom-color: transparent; }

/* latest result: one factual line */
.latest { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 16px; background: #0b1424; border: 1px solid var(--line-2); border-left: 3px solid var(--cyan); border-radius: var(--r); }
.latest .kick { font-family: var(--display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.latest .txt { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .02em; color: #fff; overflow-wrap: anywhere; }
.latest .meta { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 400; font-size: 14px; color: var(--muted); letter-spacing: 0; }
.latest .moves { flex-basis: 100%; font-size: 14px; color: var(--ink-2); }
.errbar { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r); background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-line); font-size: 15px; }
.errbar button { margin-left: 8px; }

/* ---- layout ---- */
.cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.row.spread { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }

/* ---- round tabs (the archive's underlined tabs) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid var(--line); margin: 10px 0 0; }
body.live .chip { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; min-height: 44px; padding: 0 12px; font: 700 14px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
body.live .chip:first-child { padding-left: 12px; }
body.live .chip:hover:not(:disabled) { background: none; color: #fff; border-color: transparent; border-bottom-color: var(--silver-hi); }
body.live .chip.on { color: #9cc8ff; background: rgba(47,134,255,.14); border-bottom-color: var(--cyan); }
body.live .chip.on:first-child { padding-left: 12px; }

/* ---- pairings ---- */
.pairs { list-style: none; margin: 0; padding: 0; border-top: 0; }
/* Three zones: match number | the matchup (A vs B, one unit) | compact metadata (status, then "Break: Name"). */
.pair { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.pair .mu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-width: 0; }
.pair .mu-b { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pair:last-child { border-bottom: 0; }
.pair .tbl { font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.pair .vs { color: var(--dim); font-size: 13px; text-transform: lowercase; }
.pair .stat { max-width: 15em; font-size: 13px; line-height: 1.4; color: var(--muted); text-align: right; }
.pair .wait { display: inline-flex; align-items: center; gap: 6px; }
.pair .wait::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.pair .brk { display: block; margin-top: 2px; color: var(--ink-2); }
.side { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.nm { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .02em; line-height: 1.15; overflow-wrap: anywhere; color: var(--ink); }
.side.win .nm { color: #fff; }
.side.lose .nm { color: var(--muted); }
.pill { display: inline-block; padding: 2px 7px; border: 1px solid var(--silver-lo); border-radius: 1px; font-family: var(--display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; line-height: 1.3; }
.pill.w { color: var(--cyan); border-color: var(--cyan-dim); background: rgba(47,134,255,.1); }
.side .pill.w { padding: 1px 5px; font-size: 11px; background: none; } /* supports the winner's name rather than competing with it */
.pill.f { color: var(--silver-hi); border-color: var(--silver); }
.pill.b { color: var(--muted); border-color: var(--line-2); }
.pill.l { margin-left: 8px; color: var(--cyan); border-color: var(--cyan-dim); }
.pair.latestgame { box-shadow: inset 3px 0 0 var(--cyan); }
.mv { display: inline-block; margin-left: 8px; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .04em; vertical-align: 2px; }
.mv.up { color: var(--cyan); }
.mv.down { color: var(--muted); }
.pair.bye { grid-template-columns: 76px minmax(0, 1fr) auto; }
.pair.bye .stat { max-width: none; }

/* ---- standings (archive table style) ---- */
.stand { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: 10px; border-top: 1px solid #6f777f; }
.stand th { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line-2); padding: 8px 8px; white-space: nowrap; }
.stand td { border-bottom: 1px solid var(--line); padding: 9px 8px; vertical-align: middle; }
.stand tbody tr:last-child td { border-bottom: 0; }
.stand td.num { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink-2); }
.stand td.rk, .stand th.rk { width: 52px; padding-left: 12px; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--muted); }
.stand td.pl .nm { font-size: 20px; }
.stand .sub-note { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
.stand tr.first td { background: rgba(47,134,255,.09); }
.stand tr.first td.rk { color: #fff; box-shadow: inset 3px 0 0 var(--silver-hi); }
.stand tr.out .nm { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.legend { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.legend.handoff { margin: 12px 0 4px; padding: 10px 12px; font-size: 15px; line-height: 1.4; color: var(--ink); border: 1px solid var(--line-2); border-left: 3px solid var(--cyan); background: rgba(47,134,255,.06); }

/* ---- finished: silver plate, cyan accent (no gold) ---- */
.champ { display: flex; align-items: center; gap: 16px; overflow: hidden; padding: 16px 20px; margin-bottom: 16px; }
.champ .kicker { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.champ .kicker::before { content: ""; width: 6px; height: 6px; background: var(--cyan); transform: rotate(45deg); }
.champ .cname { font-size: 32px; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; color: #fff; }
.cup { width: 44px; height: 44px; flex: none; display: block; }
.burst { position: absolute; inset: 0; pointer-events: none; }
.burst i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 1px; opacity: 0; background: var(--cyan); }
.burst i:nth-child(3n) { background: var(--silver-hi); }
.burst i:nth-child(3n+1) { background: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .pair.flash, .stand tr.flash td, .latest.flash { animation: flash 2.4s ease-out 1; }
  .stand tr.flash td:first-child { animation-name: flash-first; }
  .burst i { animation: pop 1.7s ease-out 1 forwards; animation-delay: calc(var(--i) * 25ms); }
  @keyframes flash { 0% { background-color: rgba(47,134,255,.2); } 100% { background-color: transparent; } }
  @keyframes flash-first { 0% { background-color: rgba(47,134,255,.2); box-shadow: inset 3px 0 0 var(--cyan); } 100% { background-color: transparent; box-shadow: inset 3px 0 0 transparent; } }
  @keyframes pop {
    0% { opacity: 1; transform: translate(0, 0) rotate(0); }
    100% { opacity: 0; transform: translate(calc((var(--i) - 8) * 18px), calc(-70px + (var(--i) % 5) * 34px)) rotate(240deg); }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .burst { display: none; }
  .pair.flash, .stand tr.flash td, .latest.flash { background-color: rgba(47,134,255,.14); }
  .stand tr.flash td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
}

/* ---- phones: same stacked pairing cards, same behaviour ---- */
@media (max-width: 640px) {
  body.live main { padding-top: 14px; }
  .statusbar { margin-top: 0; }
  /* phones: the whole artwork (camera, table, ball and player) shows as a band across the top of the hero, then fades into the title area */
  .herowrap { min-height: 0; }
  .artbg { height: 33.4vw; background: linear-gradient(180deg, rgba(5,9,17,.55) 0, rgba(5,9,17,0) 28px), url(/img/showdown-hero-1400.webp) center top / 100% auto no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.45) 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.45) 80%, transparent 100%); }
  .eh .in { padding: calc(33.4vw - 18px) var(--gutter) 14px; }
  .eh h1 { font-size: 30px; margin-top: 8px; }
  .eh-empty .in { padding-bottom: 20px; }

  .statusbar .every::before { content: none; }
  .statusbar .every { flex-basis: 100%; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
  .facts dd { font-size: 28px; }
  .facts dd small { font-size: 14px; }
  .seg { width: 16px; }
  .bar { min-width: 0; }
  .latest { padding: 10px 14px; }
  .latest .txt { font-size: 19px; }
  .latest .meta { display: block; margin-top: 2px; }
  /* phones: match number, then the matchup (it wraps as a unit, "vs" with the second player), then the status, then "Break: Name" */
  .pair, .pair.bye { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tbl" "mu" "stat"; padding: 14px 4px; gap: 4px; }
  .pair .tbl { grid-area: tbl; }
  .pair .mu { grid-area: mu; }
  .pair .stat { grid-area: stat; max-width: none; text-align: left; }
  .pair.latestgame, .pair.me { padding-left: 12px; } /* clear of the blue edge bar */
  .champ { padding: 14px 16px; }
  .champ .cname { font-size: 26px; }
  .stand td { padding: 10px 4px; }
  .stand td.rk, .stand th.rk { width: 46px; padding-left: 12px; }
}

@supports (-webkit-background-clip: text) or (background-clip: text) { .champ .cname { color: transparent; } }

/* ---- Live View: the header stack (nav row, film strip, notice / jump bar) stays pinned; everything else scrolls normally ---- */
.pinned { position: sticky; top: 0; z-index: 7; }
@media (min-height: 561px) { .pinned .stick { position: static; } }
@media (max-height: 560px) { .pinned { display: contents; } } /* short screens: no pinned stack; the notice bar sticks on its own, as before */
@media (min-height: 561px) and (max-width: 900px) { body.liveview #pairings, body.liveview #standings { scroll-margin-top: 300px; } } /* jump links land below the pinned stack */
/* panels are dark and slightly translucent so the fixed artwork shows through a little; the text stays on a dark ground */
body.liveview .card, body.liveview .champ { background: linear-gradient(180deg, rgba(14,22,40,.88), rgba(9,15,28,.88)); }
body.liveview .latest:not(.flash) { background: rgba(11,20,36,.88); }

/* ---- phone menu: below 640 px the header is one compact row (logo + Menu button); the page links and Admin manager open from the button ---- */
body.live .menu { display: contents; }               /* desktop and tablet: the links sit in the header exactly as before */
body.live .menubtn { display: none; }
@media (max-width: 640px) {
  body.live .topin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 10px; min-height: 52px; padding-top: 4px; padding-bottom: 4px; }
  body.live { --hdr: 53px; }                          /* header row: 52px + 1px border */
  body.live .top { position: sticky; top: 0; z-index: 9; }
  .top .hdrtag { display: none; }
  html:not(.js) .menu { flex-basis: 100%; }          /* no JavaScript: the links just stay visible under the logo */
  html:not(.js) body.live .menubtn { display: none; }
  html.js body.live .menubtn { display: inline-flex; gap: 10px; padding: 0 14px; min-width: 44px; }
  .menubtn .bars, .menubtn .bars::before, .menubtn .bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; transition: transform .15s, background-color .15s, top .15s; }
  .menubtn .bars { position: relative; }
  .menubtn .bars::before, .menubtn .bars::after { content: ""; position: absolute; left: 0; top: -6px; }
  .menubtn .bars::after { top: 6px; }
  .top.open .menubtn .bars { background: transparent; }
  .top.open .menubtn .bars::before { top: 0; transform: rotate(45deg); }
  .top.open .menubtn .bars::after { top: 0; transform: rotate(-45deg); }
  .top.open .menubtn { border-color: #5878b8; background: #15203c; }
  html.js body.live .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 4px var(--gutter) 14px; background: #050911; border-bottom: 1px solid var(--line-2); box-shadow: 0 16px 28px rgba(0, 0, 0, .6); max-height: calc(100vh - var(--hdr)); max-height: calc(100dvh - var(--hdr)); overflow-y: auto; }
  html.js body.live .top.open .menu { display: block; }
  .top .toplinks { display: flex; flex-direction: column; align-items: stretch; margin: 0; gap: 0; }
  .top .toplinks .textlink { min-height: 48px; padding: 0 2px; border-bottom: 1px solid var(--line); font-size: 15px; }
  .top .toplinks .textlink[aria-current="page"] { border-bottom-color: var(--cyan); }
  .top .menu .navlink { display: flex; margin-top: 12px; }

  /* pinned: the slim header row (logo + Menu) and, on Live View, the Pairings / Standings bar directly beneath it (99px in all).
     The Practice notice, film strip and hero scroll away. The menu itself is never pinned open: it closes on scroll. */
  .pinned, .stick { display: contents; }
  .practice { padding: 6px 0; font-size: 13px; line-height: 1.35; background: #070c16; border-bottom: 1px solid var(--line-2); }
  .jump:not([hidden]) { position: sticky; top: var(--hdr); z-index: 6; background: #070c16; border-bottom: 1px solid var(--line-2); }
  .artbg { position: absolute; }                     /* the artwork scrolls with the hero now that the header does */
  body.liveview #pairings, body.liveview #standings { scroll-margin-top: 112px; }  /* jump links land below both bars (53 + 46px) */
}

/* ---- sudden-death playoff (approved Oct 3): a hero above the Swiss rounds. The match being played leads; finished
   stages recede (ADVANCED / ELIMINATED). Wide screens: stages in bracket order, left to right, with arrows. Phones: one
   column in "now first" order (the DOM order). Gold is used only for the Championship and the champion. ---- */
body.live { --gold: #e2bd5f; --gold-dim: #8a7135; }
body.live .po { padding: 24px 22px 20px; overflow: hidden; border-color: #2f4a80; box-shadow: 0 0 0 1px rgba(47,134,255,.16), 0 18px 40px rgba(0,0,0,.35); }
.po::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
#live .po-hero h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4.4vw, 46px); line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.po-fmt { margin: 10px 0 0; font-family: var(--display); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.po-status { margin: 12px 0 0; color: var(--ink-2); }
.po-grid { display: flex; gap: 14px; align-items: stretch; margin-top: 20px; }
.po-stage { order: var(--d); flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.po-stage.is-now { flex-grow: 1.35; }
.po-stage h3 { margin: 0; font-family: var(--display); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.po-arrow { order: var(--d); align-self: center; color: var(--cyan-dim); font-size: 26px; line-height: 1; }
.po-m { border: 1px solid var(--line-2); border-radius: 3px; padding: 12px 14px; background: rgba(6,10,19,.55); }
.po-k { margin-bottom: 6px; font-family: var(--display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.po-p { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 4px; }
.po-p .nm { font-size: 18px; }
.po-m.done .po-p.adv .nm { color: var(--ink); }
.po-p.out .nm { color: var(--muted); }
.po .tag { flex: 0 0 auto; padding: 2px 6px; border: 1px solid; border-radius: 1px; font-family: var(--display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; line-height: 1.3; }
.po .tag.adv { color: var(--cyan); border-color: var(--cyan-dim); background: rgba(47,134,255,.08); }
.po .tag.out { color: var(--muted); border-color: var(--line-2); }
.po .tag.gold { color: var(--gold); border-color: var(--gold-dim); background: rgba(226,189,95,.08); }
.po-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.po-vs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.po-vs .nm { font-size: 26px; color: #fff; }
.po-vs .v { font-size: 14px; color: var(--dim); text-transform: lowercase; }
.po-brk { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
.po-one { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
/* the match being played: the dominant element */
.po-m.live { padding: 16px 18px; border-color: var(--cyan); background: linear-gradient(180deg, rgba(47,134,255,.15), rgba(47,134,255,.04)); box-shadow: 0 0 0 1px rgba(47,134,255,.35), 0 0 26px rgba(47,134,255,.16); }
.po-m.live .po-k { color: #9cc8ff; }
.po-m.live .po-k::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--cyan); vertical-align: 1px; }
.po-m.live .po-one { color: var(--ink-2); }
/* the Championship: the strongest treatment */
.po-m.final { border-top: 3px solid var(--gold); }
.po-m.final .po-k, .po-m.live.final .po-k { color: var(--gold); }
.po-m.live.final .po-k::before { background: var(--gold); }
.po-m.live.final .po-vs .nm { font-size: clamp(28px, 3.6vw, 38px); }
/* on hold, not played, and what comes next */
.po-m.held { border-color: var(--silver-lo); }
.po-m.next { border-style: dashed; background: transparent; }
.po-m.next .nm { font-size: 18px; color: var(--ink-2); }
/* Find me */
.po .me { background: rgba(47,134,255,.16); box-shadow: inset 3px 0 0 var(--cyan); border-radius: 2px; }
.po-vs .nm.me { padding: 0 6px; }
/* on hold / not completed: the same structure, neutral */
body.live .po-neutral { border-color: var(--line-2); box-shadow: none; }
.po-neutral::before { background: linear-gradient(90deg, transparent, var(--silver), transparent); }
/* the champion: a keepsake of the event with a little Legacy Archive film DNA, kept quiet. Silver/slate = heritage
   (frame, perforations, metadata), gold = the title and the medallion, blue = the bracket link. */
body.live .po-won { padding: 38px 28px 34px; border-color: var(--gold-dim); box-shadow: 0 0 0 1px rgba(226,189,95,.16), 0 0 44px rgba(226,189,95,.08); }
/* the Archive's double frame: an inset silver hairline inside the gold edge */
.po-won::before { inset: 6px; height: auto; background: none; border: 1px solid rgba(141,155,179,.26); border-radius: 1px; pointer-events: none; }
/* film perforations along the top and bottom edges only: the Archive's sprocket rhythm, dark slate on navy */
.po-won::after { content: ""; position: absolute; left: 16px; right: 16px; top: 15px; bottom: 15px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #233250 0 10px, transparent 10px 21px) top / 100% 5px repeat-x,
              repeating-linear-gradient(90deg, #233250 0 10px, transparent 10px 21px) bottom / 100% 5px repeat-x; }
.po-champ { display: flex; flex-direction: column; align-items: center; text-align: center; }
.po-meta { align-self: stretch; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; margin-bottom: 10px;
  font-family: var(--display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--silver); text-align: left; }
.po-date { margin-left: auto; text-align: right; }
.po-ball { flex: 0 0 auto; width: 76px; height: 76px; margin-bottom: 14px; filter: drop-shadow(0 0 10px rgba(226,189,95,.3)); }
#live .po-ck { margin: 0; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.po-cn { margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: clamp(46px, 9vw, 76px); line-height: .95; letter-spacing: 0; text-transform: uppercase; color: #fff; overflow-wrap: anywhere; text-shadow: 0 0 18px rgba(226,189,95,.16); }
.po-cs { margin: 10px 0 0; color: var(--ink-2); }
/* one film-strip divider above the bracket link: a silver hairline over a faint row of frames */
.po-path { margin-top: 20px; padding-top: 10px; border-top: 1px solid rgba(141,155,179,.4);
  background: repeating-linear-gradient(90deg, #1d2a45 0 6px, transparent 6px 11px) left top 3px / 100% 2px no-repeat; }
.po-path > summary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-family: var(--display); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #8dbbff; }
.po-path > summary:hover { color: #b8d5ff; }
.po-path > summary::-webkit-details-marker { display: none; }
.po-path > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg); transition: transform .15s; }
.po-path[open] > summary::before { transform: rotate(45deg); }
@media (max-width: 760px) {
  body.live .po { padding: 20px 14px 16px; }
  .po-grid { flex-direction: column; gap: 16px; }
  .po-stage, .po-arrow { order: 0; }
  .po-arrow { display: none; }
  .po-stage.is-done h3::before { content: "↑ " / ""; color: var(--cyan-dim); } /* finished stages sit under the match they led to */
  .po-stage > h3 { order: -2; }               /* within a stage: its heading, then the match being played, */
  .po-stage > .po-m.live { order: -1; }       /* then finished matches; wide screens keep bracket order */
  body.live .po-won { padding: 34px 18px 30px; }
  .po-ball { width: 62px; height: 62px; margin-bottom: 12px; }
  #live .po-ck { font-size: 15px; letter-spacing: .16em; }
}