/* SANEM-NMT — single stylesheet. Dark by default: the stage view is projected
   in a dim hall, and team devices are used under stage lighting. */

:root {
  --bg: #0d1117; --bg2: #161b22; --bg3: #1c2330;
  --fg: #e6edf3; --mut: #8b949e; --line: #2d333b;
  --acc: #58a6ff; --acc2: #1f6feb;
  --ok: #3fb950; --okbg: #12261a;
  --bad: #f85149; --badbg: #2a1416;
  --warn: #d29922;
  --a: #58a6ff; --b: #bc8cff; --c: #3fb950; --d: #f0883e; --e: #f778ba;
  --r: 12px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { margin: 0 0 .5em; letter-spacing: -.02em; line-height: 1.2; }
a { color: var(--acc); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tnum { font-variant-numeric: tabular-nums; }

.wrap { max-width: 980px; margin: 0 auto; padding: 24px 18px 64px; }
.wrap.narrow { max-width: 620px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1; }
.mut { color: var(--mut); }
.small { font-size: 13.5px; }
.center { text-align: center; }
.hide { display: none !important; }

/* ---- surfaces */
.card {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px; margin-bottom: 16px;
}
.card.tight { padding: 14px 16px; }

/* ---- buttons */
button, .btn {
  font: inherit; font-weight: 600; color: var(--fg);
  background: var(--bg3); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 18px; cursor: pointer;
  min-height: 46px; transition: background .12s, border-color .12s, transform .06s;
}
button:hover:not(:disabled) { background: #26303f; border-color: #3d4756; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .38; cursor: not-allowed; }
button.primary { background: var(--acc2); border-color: var(--acc2); }
button.primary:hover:not(:disabled) { background: #2b7bf3; }
button.danger { background: #4a1d1f; border-color: #6e2b2e; }
button.ghost { background: transparent; }
button.wide { width: 100%; }
button.big { font-size: 19px; padding: 18px 26px; min-height: 60px; }

input, select {
  font: inherit; color: var(--fg); background: var(--bg); min-height: 46px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; width: 100%;
}
input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px;
}
label { display: block; font-size: 13.5px; color: var(--mut); margin: 0 0 6px; }
.field { margin-bottom: 14px; }

/* ---- badges */
.badge {
  display: inline-block; font-size: 12.5px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; background: var(--bg3); border: 1px solid var(--line); color: var(--mut);
}
.badge.ok { color: var(--ok); border-color: #1d572c; background: var(--okbg); }
.badge.bad { color: var(--bad); border-color: #6e2b2e; background: var(--badbg); }
.badge.live { color: var(--warn); border-color: #6b5011; background: #2a2110; }

/* ---- question */
.stem { font-size: 19px; line-height: 1.5; margin: 0 0 18px; }
.choices { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.choice {
  display: flex; gap: 14px; align-items: flex-start; text-align: left;
  width: 100%; padding: 14px 16px; min-height: 56px; border-radius: 10px;
  background: var(--bg2); border: 1px solid var(--line); cursor: pointer;
  font-weight: 400; line-height: 1.45;
}
.choice .k {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; background: var(--bg3); color: var(--mut);
}
.choice[data-k="A"] .k { color: var(--a); } .choice[data-k="B"] .k { color: var(--b); }
.choice[data-k="C"] .k { color: var(--c); } .choice[data-k="D"] .k { color: var(--d); }
.choice[data-k="E"] .k { color: var(--e); }
.choice.sel { border-color: var(--acc); background: #10233d; }
.choice.sel .k { background: var(--acc2); color: #fff; }
/* Correct/incorrect never rely on colour alone — a glyph and a border carry it
   too, for the ~8% of any audience with colour vision deficiency. */
.choice.correct { border-color: var(--ok); background: var(--okbg); }
.choice.correct::after { content: "✓"; margin-left: auto; color: var(--ok); font-weight: 700; }
.choice.wrong { border-color: var(--bad); background: var(--badbg); }
.choice.wrong::after { content: "✗"; margin-left: auto; color: var(--bad); font-weight: 700; }
.choice.dim { opacity: .45; }
.choice:disabled { cursor: default; }
/* A read-only choice is still the thing the room is reading — never fade it.
   Emphasis after the reveal is carried by .correct / .wrong / .dim instead. */
button.choice:disabled { opacity: 1; }

/* ---- data table inside a question */
table.dat { border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: 14px; }
table.dat caption { text-align: left; color: var(--mut); font-size: 13px; padding-bottom: 6px; }
table.dat th, table.dat td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
table.dat th { background: var(--bg3); font-weight: 600; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- media */
.media { margin: 0 0 16px; }
.media img { width: 100%; border-radius: 10px; border: 1px solid var(--line); display: block; cursor: zoom-in; }
.audio { display: flex; gap: 14px; align-items: center; background: var(--bg3);
         border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.audio button { min-height: 52px; }
.bars { display: flex; gap: 3px; align-items: flex-end; height: 34px; flex: 1; }
.bars i { flex: 1; background: var(--acc); border-radius: 2px; height: 20%; display: block; }
.audio.playing .bars i { animation: eq .7s ease-in-out infinite alternate; }
.bars i:nth-child(2n) { animation-delay: .1s } .bars i:nth-child(3n) { animation-delay: .22s }
.bars i:nth-child(5n) { animation-delay: .33s }
@keyframes eq { to { height: 100%; } }

/* ---- countdown ring */
.ring { position: relative; width: 92px; height: 92px; flex: none; }
.ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring .ring-bg { fill: none; stroke: var(--line); stroke-width: 8; }
.ring .ring-progress { fill: none; stroke: var(--ok); stroke-width: 8; stroke-linecap: round;
  transition: stroke .3s; }
.ring[data-state="warn"] .ring-progress { stroke: var(--warn); }
.ring[data-state="danger"] .ring-progress { stroke: var(--bad); }
.ring .t { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ring[data-state="danger"] .t { color: var(--bad); }

/* ---- tally bars */
.tally { display: grid; gap: 8px; }
.tallyrow { display: grid; grid-template-columns: 30px 1fr 62px; gap: 10px; align-items: center; }
.tallyrow .k { font-weight: 700; text-align: center; }
.tallybar { height: 26px; background: var(--bg3); border-radius: 6px; overflow: hidden; }
.tallybar i { display: block; height: 100%; background: var(--acc); border-radius: 6px;
  width: 0; transition: width .45s cubic-bezier(.2,.7,.3,1); }
.tallyrow.correct .tallybar i { background: var(--ok); }
.tallyrow .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--mut); font-size: 14px; }

/* ---- scoreboard */
.scores { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.team { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.team .nm { font-weight: 700; font-size: 17px; }
.team .sc { font-size: 42px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.team.answered { border-color: var(--ok); }
.vs { color: var(--mut); font-weight: 700; }

/* ---- notices */
.notice { border-radius: 10px; padding: 13px 16px; margin-bottom: 14px; font-size: 14.5px;
  border: 1px solid var(--line); background: var(--bg3); }
.notice.err { border-color: #6e2b2e; background: var(--badbg); color: #ffb3ae; }
.notice.ok { border-color: #1d572c; background: var(--okbg); }
.notice.warn { border-color: #6b5011; background: #2a2110; }

/* ---- role cards (landing) */
.roles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.role { display: block; text-decoration: none; color: inherit; background: var(--bg2);
  border: 1px solid var(--line); border-radius: var(--r); padding: 26px 22px; text-align: center; }
.role:hover { border-color: var(--acc); background: var(--bg3); }
.role .ic { font-size: 34px; }
.role .t { font-weight: 700; font-size: 19px; margin-top: 8px; }

/* ---- bracket */
.bracket { display: grid; gap: 10px; }
.match { display: grid; grid-template-columns: 78px 1fr auto; gap: 12px; align-items: center;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.match.live { border-color: var(--warn); }
.match.done { opacity: .72; }
.match .rd { font-size: 12.5px; color: var(--mut); font-weight: 700; }
.match .tm { font-size: 15px; }
.match .tm b.win { color: var(--ok); }

/* ---- qr */
.qr { display: inline-block; background: #fff; padding: 10px; border-radius: 10px; line-height: 0; }

/* ---- stage view */
body.stage { overflow: hidden; }
body.stage .wrap { max-width: none; padding: clamp(12px, 2.4vh, 34px) 46px; height: 100vh;
  display: flex; flex-direction: column; overflow: hidden; }
/* Stage type scales on BOTH axes. A 16:9 projector is height-constrained once a
   stem, a figure and five options share the screen, so sizing on vw alone
   reliably pushes options D and E off the bottom. */
body.stage .stem { font-size: clamp(20px, min(2.7vw, 3.6vh), 44px); line-height: 1.3;
  margin-bottom: clamp(8px, 1.6vh, 20px); }
body.stage .choice { font-size: clamp(15px, min(1.6vw, 2.3vh), 28px);
  padding: clamp(7px, 1.3vh, 16px) 22px; min-height: 0; }
body.stage .choices { gap: clamp(5px, 1vh, 12px); }
body.stage .choice .k { width: clamp(28px, 3.4vh, 44px); height: clamp(28px, 3.4vh, 44px);
  font-size: clamp(14px, 1.8vh, 20px); }
body.stage .ring { width: clamp(110px, 17vh, 190px); height: clamp(110px, 17vh, 190px); }
body.stage .ring .t { font-size: clamp(40px, 6.5vh, 68px); }
body.stage .team .sc { font-size: clamp(44px, 7.5vh, 76px); }
body.stage .team .nm { font-size: clamp(18px, 2.6vh, 27px); }
body.stage .team { padding: clamp(8px, 1.4vh, 16px) 16px; }
body.stage .scores { margin-bottom: clamp(8px, 1.8vh, 18px) !important; }
body.stage table.dat { font-size: clamp(15px, 1.15vw, 22px); }
body.stage.idlecursor { cursor: none; }

.stage-title { font-size: clamp(34px, 4vw, 68px); font-weight: 800; }

@media (max-width: 640px) {
  .wrap { padding: 16px 14px 56px; }
  .stem { font-size: 17.5px; }
  .scores { grid-template-columns: 1fr; }
  .vs { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Media must never push the answer choices off the screen. On the projector the
   figure competes with the stem and five options for a fixed 1080px of height;
   on a phone the choices must stay reachable with one thumb. */
.media img { max-height: 44vh; object-fit: contain; margin: 0 auto; }
body.stage .media { display: flex; justify-content: center; }
body.stage .media img { max-height: 34vh; width: auto; }

/* ---------------------------------------------------------------- team laptop
   Two laptops serve all ten teams, so the team identity changes between
   matches. The banner is oversized on purpose — nobody should ever be unsure
   which team this laptop currently is. */
.teamname { font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
.seatbar { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--bg2) 88%, transparent); }
@media (max-width: 720px) { .teamname { font-size: 21px; } }

/* ------------------------------------------------------- moderator on stage
   The panel is driven from a tablet held in one hand. The transport controls
   are pinned to the bottom so they are always under the thumb, and the touch
   targets are sized for a real finger rather than a mouse pointer. */
.controls {
  position: sticky; bottom: 0; z-index: 10; margin-bottom: 0;
  border-radius: var(--r) var(--r) 0 0;
  background: color-mix(in srgb, var(--bg2) 94%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
}
.controls button { min-height: 56px; }
.controls .row:first-child button { flex: 1 1 auto; min-width: 132px; }

@media (pointer: coarse) {
  button, .btn { min-height: 52px; padding: 14px 20px; }
  .controls button { min-height: 62px; font-size: 17px; }
  .choice { min-height: 62px; }
  .badge { font-size: 13.5px; padding: 5px 12px; }
}

/* Tablet portrait (iPad ~820px): the moderator's most likely device. */
@media (max-width: 900px) {
  .wrap { padding: 14px 14px 0; }
  .controls { margin-left: -14px; margin-right: -14px; border-radius: 0;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .controls .row:first-child button { min-width: calc(50% - 6px); }
  .match { grid-template-columns: 62px 1fr; row-gap: 8px; }
  .match > :last-child { grid-column: 1 / -1; }
}

/* One big action, then everything else small. On stage the moderator glances
   down, presses the lit control, and looks back up — so the primary step is
   deliberately unmissable and the secondary actions are deliberately not. */
.controls .step {
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  min-height: 74px; font-size: 21px; letter-spacing: .01em;
}
.controls .step .lbl { font-weight: 800; }
.controls .step .hint { font-size: 13px; font-weight: 400; opacity: .8; }
.controls .row.minor { margin-top: 10px; gap: 8px; }
.controls .row.minor button { min-height: 42px; padding: 8px 14px; font-size: 14px; flex: 1 1 auto; }
@media (pointer: coarse) {
  .controls .step { min-height: 82px; font-size: 23px; }
  .controls .row.minor button { min-height: 46px; }
}

/* One big action, then everything else small. On stage the moderator glances
   down, presses the lit control, and looks straight back up — so the primary
   step is deliberately unmissable and the secondary actions deliberately are not. */
.controls .step {
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  min-height: 74px; font-size: 21px; letter-spacing: .01em;
}
.controls .step .lbl { font-weight: 800; }
.controls .step .hint { font-size: 13px; font-weight: 400; opacity: .82; }
.controls .row.minor { margin-top: 10px; gap: 8px; }
.controls .row.minor button { min-height: 44px; padding: 8px 14px; font-size: 14px; flex: 1 1 auto; }
@media (pointer: coarse) {
  .controls .step { min-height: 84px; font-size: 23px; }
  .controls .row.minor button { min-height: 46px; }
}

/* The answer key, as a chip at the top of the moderator's question card. */
.keychip {
  display: inline-block; font-weight: 800; font-size: 15px; letter-spacing: .06em;
  padding: 6px 14px; border-radius: 999px;
  color: var(--ok); background: var(--okbg); border: 1px solid #1d572c;
}

/* The pinned control bar overlays the page, so the last card must be able to
   scroll clear of it — otherwise the teaching note is permanently half-hidden. */
body:has(.controls) .wrap { padding-bottom: 190px; }

/* ---- audience vote overlaid on the answer options -------------------------
   Shown on the projector from the moment the vote is revealed. The fill sits
   behind the text rather than beside it, so adding the vote does not reflow the
   options or change how much of the screen they occupy. */
.choice.hastally { position: relative; overflow: hidden; }
.choice .fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: color-mix(in srgb, var(--acc) 22%, transparent);
  border-right: 2px solid color-mix(in srgb, var(--acc) 55%, transparent);
  transition: width .6s cubic-bezier(.2,.7,.3,1); z-index: 0;
}
.choice.correct .fill {
  background: color-mix(in srgb, var(--ok) 26%, transparent);
  border-right-color: color-mix(in srgb, var(--ok) 65%, transparent);
}
.choice .k, .choice .ctext, .choice .pct { position: relative; z-index: 1; }
.choice .ctext { flex: 1; }
.choice .pct { font-weight: 700; color: var(--mut); margin-left: 12px; }
.choice.correct .pct { color: var(--ok); }
.choice.hastally::after { position: relative; z-index: 1; }
body.stage .choice .pct { font-size: clamp(15px, min(1.5vw, 2.1vh), 26px); }

/* ---- branding --------------------------------------------------------------
   The SANEM mark and the author's signature. Both are sized in relative units
   so they scale with the projector without a separate stylesheet. */

.brandbar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 14px; }

.brandlogo { display: inline-flex; align-items: center; line-height: 0; }
.brandlogo img { height: var(--logo-h, 34px); width: auto; display: block; }
/* A light chip behind the logo: an unknown logo may be dark artwork on a
   transparent background, which would vanish against this dark theme. */
.brandlogo.chip { background: #fff; border-radius: 8px; padding: 5px 9px;
  box-shadow: 0 1px 2px rgba(0,0,0,.35); }

.signature {
  display: inline-block; aspect-ratio: 760 / 230;
  background-color: currentColor;
  -webkit-mask: url('../assets/img/signature.svg') no-repeat center / contain;
  mask: url('../assets/img/signature.svg') no-repeat center / contain;
  pointer-events: none;
}

.credit { display: flex; align-items: center; gap: 12px; color: var(--mut); }
.credit.stacked { flex-direction: column; gap: 4px; }
.credit-line { font-size: 13.5px; letter-spacing: .01em; }

.signature.corner { position: fixed; z-index: 20; }
.signature.corner.bottom-left { left: 18px; bottom: 14px; }
.signature.corner.bottom-right { right: 18px; bottom: 14px; }
.signature.corner.top-right { right: 18px; top: 14px; }

/* On the projector the signature sits opposite the audience QR, and is scaled
   with the viewport so it stays proportionate on any screen. */
body.stage .signature.corner { left: 26px; bottom: 18px; width: clamp(90px, 9vw, 170px) !important; }
body.stage .credit-line { font-size: clamp(14px, 1.5vh, 22px); }

/* The control bar is pinned to the bottom of the moderator screen, so a corner
   signature there would sit underneath it. */
body:has(.controls) .signature.corner { display: none; }

@media (max-width: 640px) {
  .signature.corner { width: 88px !important; bottom: 10px; left: 12px; }
}
@media print {
  .signature.corner { position: static; display: block; margin-top: 12px; }
}

/* The phase marker that replaces the countdown once the clock has stopped. */
.phasemark { display: inline-grid; place-items: center; text-align: center;
  width: clamp(110px, 17vh, 190px); height: clamp(110px, 17vh, 190px);
  border-radius: 50%; border: 8px solid var(--line); color: var(--mut);
  font-weight: 800; letter-spacing: .04em; line-height: 1.15;
  font-size: clamp(13px, 1.9vh, 21px); padding: 0 10px; }
.phasemark[data-p="revealed"] { border-color: var(--ok); color: var(--ok); }
.phasemark[data-p="tally"] { border-color: var(--acc); color: var(--acc); }
.phasemark[data-p="locked"] { border-color: var(--warn); color: var(--warn); }
body.nocorner .signature.corner { display: none; }

/* Signature in the page flow, for screens that scroll. */
.sigfooter { display: flex; justify-content: center; margin: 26px 0 6px; color: var(--mut); }
/* Phone and laptop screens size the phase marker down with the ring. */
.card .phasemark { width: 92px; height: 92px; border-width: 6px; font-size: 12.5px; }

/* ============================================================================
   BRACKET — the projector screen between matches.
   Gold on black, in the style of a championship bracket. Deliberately a
   different palette from the question screens: this is the trophy view, and the
   room should recognise it instantly from across the hall.
   ========================================================================== */
.bkt {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
  --gold: #e8c274; --gold2: #b98c3a; --goldline: #8a6a2c;
}
.bkt-head { display: flex; align-items: center; gap: 18px; margin: 0 0 clamp(6px, 1.4vh, 18px); }
.bkt-headright { margin-left: auto; display: flex; align-items: center; gap: clamp(10px,1.2vw,22px); }
.bkt-headqr { display: flex; align-items: center; gap: 10px; }
.bkt-headqr .qr { padding: 6px; }
.bkt-headqrt { font-size: clamp(8px,1.15vh,13px); letter-spacing: .16em; color: var(--gold);
  line-height: 1.5; white-space: pre-line; }
.bkt-title { font-size: clamp(22px, 3.2vh, 44px); font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(180deg, #fff 20%, var(--gold) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.bkt-sub { font-size: clamp(11px, 1.6vh, 19px); letter-spacing: .22em; color: var(--gold);
  text-transform: uppercase; }

.bkt-lines { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
.bkt-line { fill: none; stroke: var(--goldline); stroke-width: 2; }
.bkt-line.soft { stroke: #5c4720; stroke-width: 1.5; }
.bkt-line.strong { stroke: var(--gold); stroke-width: 3; }

.bkt-grid { position: relative; z-index: 1; flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1.15fr .8fr 1fr 1fr 1fr 1.15fr;
  gap: clamp(6px, .9vw, 20px); align-items: center; }
.bkt-col { display: flex; flex-direction: column; justify-content: center;
  gap: clamp(4px, .9vh, 14px); min-width: 0; }
.bkt-colhead { font-size: clamp(9px, 1.35vh, 15px); letter-spacing: .2em; color: var(--gold);
  text-transform: uppercase; margin-bottom: 2px; }

/* ---- a match: two team pills under a round label */
.bkt-match { display: flex; flex-direction: column; gap: 4px; }
.bkt-label { font-size: clamp(8px, 1.35vh, 15px); letter-spacing: .16em; color: #8a7853;
  text-transform: uppercase; }
.bkt-slot {
  display: flex; align-items: center; gap: 0; min-width: 0;
  background: #f3f4f6; color: #14171c; border-radius: 7px; overflow: hidden;
  height: clamp(26px, 5.3vh, 60px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 3px 10px rgba(0,0,0,.5);
}
.bkt-badge {
  flex: none; width: clamp(26px, 5.3vh, 60px); align-self: stretch; display: grid;
  place-items: center; position: relative;
  background: linear-gradient(150deg, #f0d9a4 0%, var(--gold) 38%, var(--gold2) 100%);
}
.bkt-badge::before {
  content: ''; width: 58%; height: 62%;
  background: rgba(0,0,0,.26);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.bkt-badge-t { position: absolute; font: 900 clamp(8px, 1.5vh, 15px)/1 inherit; color: #2a1e07; }
.bkt-name {
  flex: 1; min-width: 0; padding: 0 clamp(6px, .7vw, 14px); font-weight: 800;
  font-size: clamp(10px, 2.05vh, 25px); font-style: italic; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase;
}
.bkt-score { flex: none; padding: 0 clamp(6px, .7vw, 14px); font-weight: 900;
  font-size: clamp(10px, 2.1vh, 25px); font-variant-numeric: tabular-nums; color: #3d444d; }
/* A team still to be decided reads as a placeholder, not as a team called TBD. */
.bkt-slot:not(.won):not(.lost) .bkt-name { color: #8b93a0; font-weight: 700; }
.bkt-slot.won { background: linear-gradient(90deg, #fffdf7, #ffe9bd); }
.bkt-slot.won .bkt-name, .bkt-slot.won .bkt-score { color: #1a1204; }
.bkt-slot.lost { opacity: .42; }
.bkt-third { opacity: .78; margin-top: clamp(4px, 1vh, 14px); }

/* ---- seeding rail */
.bkt-rail { align-self: center; background: rgba(232,194,116,.05);
  border: 1px solid #4b3a1a; border-radius: 10px; padding: clamp(6px,1.1vh,14px) clamp(6px,.7vw,14px); }
.bkt-railhead { font-size: clamp(9px, 1.35vh, 15px); letter-spacing: .2em; color: var(--gold);
  text-transform: uppercase; margin-bottom: clamp(4px,.8vh,10px); text-align: center; }
.bkt-seeds { display: flex; flex-direction: column; gap: clamp(2px,.5vh,7px); }
.bkt-seed { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bkt-seedno { flex: none; width: clamp(16px,2.9vh,32px); height: clamp(16px,2.9vh,32px);
  display: grid; place-items: center; border-radius: 5px; font-weight: 900;
  font-size: clamp(9px,1.4vh,15px); color: #2a1e07;
  background: linear-gradient(150deg, #f0d9a4, var(--gold2)); }
.bkt-seedname { flex: 1; min-width: 0; font-size: clamp(9px,1.7vh,20px); font-weight: 700;
  color: #6f7885; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-transform: uppercase; }
.bkt-seed.set .bkt-seedname { color: #f0e6d2; }
.bkt-railnote { margin-top: clamp(4px,.8vh,10px); font-size: clamp(7px,1.05vh,12px);
  color: #6d6047; text-align: center; line-height: 1.3; }

/* ---- champion */
.bkt-champion { display: flex; align-items: center; gap: 0; border-radius: 9px; overflow: hidden;
  background: #f3f4f6; height: clamp(34px, 7.4vh, 84px);
  box-shadow: 0 4px 22px rgba(232,194,116,.18), 0 3px 10px rgba(0,0,0,.55); }
.bkt-trophy { flex: none; width: clamp(34px, 7.4vh, 84px); align-self: stretch;
  background: linear-gradient(150deg, #f0d9a4 0%, var(--gold) 38%, var(--gold2) 100%);
  display: grid; place-items: center; }
.bkt-trophy::before {
  content: '\1F3C6'; font-size: clamp(15px, 2.9vh, 30px); filter: saturate(0) brightness(.25);
}
.bkt-champname { flex: 1; min-width: 0; padding: 0 clamp(8px,.9vw,18px); font-weight: 900; font-style: italic;
  font-size: clamp(11px, 2.5vh, 30px); letter-spacing: .02em; color: #14171c;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkt-champion.set { box-shadow: 0 0 0 2px var(--gold), 0 6px 34px rgba(232,194,116,.4); }



/* The bracket screen goes full black so the gold reads properly. */
body.stage.bracketmode { background: #05070a; }
body.stage.bracketmode .wrap {
  background:
    radial-gradient(1200px 500px at 78% -10%, rgba(232,194,116,.10), transparent 60%),
    radial-gradient(800px 400px at 100% 110%, rgba(232,194,116,.06), transparent 60%);
}

/* Bye tag on the seeding rail, and the collapsed play-in column for an
   8-team tournament (no play-in match exists, so the column has nothing in it). */
.bkt-seedtag { flex: none; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  font-size: clamp(7px, 1.05vh, 12px); font-weight: 800; letter-spacing: .1em;
  color: #2a1e07; background: linear-gradient(150deg, #f0d9a4, var(--gold2)); }
/* With no play-in the column is collapsed to zero width — but the element must
   STAY IN THE GRID. `display:none` removes it from layout, and every column
   after it shifts one track left, which put the semifinals in the zero-width
   track and hid them completely. */
.bkt-grid.bkt-noplayin { grid-template-columns: 1.15fr .8fr 0 1.15fr 1.15fr 1.2fr; }
.bkt-grid.bkt-noplayin .bkt-playin { visibility: hidden; min-width: 0; overflow: hidden; }