/* =====================================================================
   DIRTY SHOULDERS 7on7 , BROADCAST / GAMEDAY
   Production stylesheet for 7on7.dirtyshoulders.com (public app shell).
   Ported and extended from design/broadcast/standings.html.
   Aesthetic: NFL RedZone / ESPN lower-third. Ink-dark, red energy.
   Mobile-first 360 -> 1440. CSP-safe (no inline JS; styles via this file).
   ===================================================================== */

/* ---- Design Tokens -------------------------------------------------- */
:root{
  /* Brand core , NGU Trailblazers (red foxhead, black, silver) */
  --red:        #D2202F;   /* NGU primary , reserved for live / primary */
  --red-hot:    #FF3A45;   /* pulse peak + glow */
  --red-deep:   #8E1219;   /* pressed / shadow red */
  --ink:        #111217;
  --paper:      #EEF0EE;

  /* Broadcast neutrals (extended ink ramp) */
  --ink-900:    #0B0C10;
  --ink-850:    #0F1015;
  --ink-800:    #141620;
  --ink-750:    #181B26;
  --ink-700:    #1F2230;
  --ink-650:    #262A3A;
  --line:       rgba(255,255,255,0.07);
  --line-2:     rgba(255,255,255,0.12);

  /* Type colors */
  --fg:         #F4F5F4;
  --fg-soft:    #C7CAD2;
  --fg-mute:    #8A8F9E;
  --fg-faint:   #5C6173;

  /* Supporting accent (ONE): NGU SILVER for advancement / qualifier / champion.
     The --gold tokens are kept as aliases so every existing var(--gold)
     reference now renders silver without a sweep across the file. */
  --silver:       #B3B4B3;   /* advancement / qualifier / champion mark */
  --silver-hi:    #E7E8E6;   /* polished highlight (where gold was brightest) */
  --silver-deep:  #7C7E7C;   /* pressed / engraved silver */
  --silver-glow:  rgba(179,180,179,0.55);
  --gold:       var(--silver);
  --gold-deep:  var(--silver-deep);

  /* Result semantics */
  --win:        #4ADE80;
  --win-deep:   #16361F;
  --loss:       #FF6B72;
  --loss-deep:  #3A1417;
  --tie:        #9AA0B0;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Shadows / depth */
  --shadow-panel: 0 1px 0 rgba(255,255,255,0.05) inset,
                  0 18px 40px -24px rgba(0,0,0,0.9),
                  0 2px 8px -2px rgba(0,0,0,0.6);
  --shadow-lift:  0 24px 60px -28px rgba(0,0,0,0.95),
                  0 2px 0 rgba(255,255,255,0.05) inset;
  --glow-red:     0 0 0 1px rgba(210,32,47,0.55),
                  0 0 22px -2px rgba(255,58,69,0.55),
                  0 0 60px -10px rgba(210,32,47,0.45);
  --inset-hi:     inset 0 1px 0 rgba(255,255,255,0.10);

  /* Spacing rhythm (8pt base, broadcast-dense) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px; --s-11: 96px;

  /* Motion */
  --ease-stage: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-snap:  cubic-bezier(0.2, 0.9, 0.25, 1);

  /* Layout */
  --maxw: 1240px;
  --gut:  clamp(16px, 4.5vw, 40px);

  /* Bracket layout knobs (used by the elimination bracket view) */
  --brk-col:      288px;     /* match-card column width (desktop) */
  --brk-row-h:    78px;      /* a single match-card body height */
  --brk-gap-x:    44px;      /* horizontal gutter between rounds (connectors live here) */
}

/* ---- Reset ---------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--ink-900);
  color: var(--fg);
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums lining-nums;
}
h1,h2,h3,h4{ margin: 0; font-weight: 400; }
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
img,svg{ display: block; max-width: 100%; }
button{ font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input, select{ font: inherit; color: inherit; }

/* Display + numeral utility classes */
.anton{ font-family: "Anton", "Barlow Condensed", sans-serif; font-weight: 400;
         letter-spacing: 0.01em; text-transform: uppercase; line-height: 0.92; }
.cond{ font-family: "Barlow Condensed", sans-serif; }
.semicond{ font-family: "Barlow Semi Condensed", sans-serif; }
.num{ font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.eyebrow{
  font-family: "Barlow Semi Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-weight: 700;
  font-size: 11px;
  color: var(--fg-mute);
}

/* Screen-reader-only utility */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Focus visibility (sideline accessibility) */
:focus-visible{ outline: 2px solid var(--red-hot); outline-offset: 3px; border-radius: var(--r-xs); }

/* =====================================================================
   STAGE BACKDROP , broadcast ink with red field-light bloom
   ===================================================================== */
.stage{
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
.stage::before{
  content:"";
  position: fixed; inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 84% -8%, rgba(210,32,47,0.20), transparent 46%),
    radial-gradient(120% 70% at -6% 4%, rgba(210,32,47,0.10), transparent 40%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,0.6), transparent 55%),
    linear-gradient(180deg, #101218 0%, var(--ink-900) 40%, #060709 100%);
}
.stage::after{
  content:"";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
     0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.wrap{ width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

#view{ flex: 1 1 auto; }

/* Skip link */
.skip{
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink-750); color: var(--fg);
  padding: 10px 16px; border-radius: var(--r-sm);
  box-shadow: var(--shadow-panel); transition: top .2s var(--ease-snap);
  font-family:"Barlow Condensed",sans-serif; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
}
.skip:focus{ top: 12px; }

/* =====================================================================
   TOP BAR , floating broadcast rail
   ===================================================================== */
.topbar{
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(180deg, rgba(7,8,11,0.92), rgba(7,8,11,0.72) 70%, rgba(7,8,11,0.55));
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  border-bottom: 1px solid var(--line);
}
.topbar__inner{
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 60px;
  flex-wrap: wrap;
  padding-block: 8px;
}
.brand{ display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand__mark{
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 9px;
  background: radial-gradient(120% 120% at 30% 20%, #1a1d27, #0c0d12);
  border: 1px solid var(--line-2);
  box-shadow: var(--inset-hi);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.brand__mark::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 38%, rgba(210,32,47,0.0) 38%, var(--red) 38%, var(--red) 50%, transparent 50%);
  opacity: 0.9;
}
.brand__mark svg{ position: relative; z-index: 1; }

/* Foxhead logo variant , detailed NGU mark, given room and never stretched.
   Drops the generic red-stripe overlay and lets the image sit on a quiet
   inset tile so the fox reads cleanly at small sizes. */
.brand__mark--logo{
  width: 46px; height: 46px; padding: 5px; border-radius: 11px;
  background: radial-gradient(120% 120% at 30% 18%, #16181f, #0a0b0f);
}
.brand__mark--logo::after{ content: none; }
.brand__mark--logo.brand__mark--sm{ width: 38px; height: 38px; padding: 4px; border-radius: 9px; }
.brand__fox{
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;             /* detailed mark, do not distort */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
.brand__txt{ display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand__txt b{
  font-family: "Anton", sans-serif; text-transform: uppercase;
  font-weight: 400; font-size: 16px; letter-spacing: 0.04em; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}
.brand__txt span{
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--red); font-weight: 700; margin-top: 3px;
}

.topnav{ margin-left: auto; display: flex; align-items: center; gap: 2px; }
.topnav a{
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  font-size: 15px; color: var(--fg-soft);
  padding: 9px 14px; border-radius: var(--r-pill);
  position: relative;
  transition: color .3s var(--ease-snap), background-color .3s var(--ease-snap);
}
.topnav a .dot{
  position:absolute; left:50%; bottom:4px; width:4px; height:4px; border-radius:50%;
  background: var(--red); transform: translateX(-50%) scale(0);
  transition: transform .3s var(--ease-snap);
}
.topnav a:hover{ color: var(--fg); background: rgba(255,255,255,0.05); }
.topnav a[aria-current="page"]{ color: var(--fg); }
.topnav a[aria-current="page"] .dot{ transform: translateX(-50%) scale(1); }
.topnav a[aria-current="page"]::before{
  content:""; position:absolute; inset:0; border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(210,32,47,0.18), rgba(210,32,47,0.06));
  box-shadow: inset 0 0 0 1px rgba(210,32,47,0.35);
}
.topnav a[aria-current="page"] span:not(.dot){ position: relative; z-index: 1; }

/* Right-side controls cluster (live/offline pill + auth) */
.railctl{ display:flex; align-items:center; gap: 10px; margin-left: 8px; }

/* Connection indicator (Live / Offline) */
.conn{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--r-pill);
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:13px;
  letter-spacing:0.16em; text-transform:uppercase;
}
.conn--live{
  color:#ffd9db;
  background: linear-gradient(180deg, rgba(210,32,47,0.16), rgba(210,32,47,0.06));
  box-shadow: inset 0 0 0 1px rgba(210,32,47,0.40);
}
.conn--offline{
  color: var(--fg-mute);
  background: rgba(255,255,255,0.045);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.conn__dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.conn--offline .conn__dot{ background: var(--fg-faint); box-shadow: inset 0 0 0 1px var(--line-2); }

/* Auth control */
.authbtn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.08em; font-weight:700; font-size:14px; color: var(--fg-soft);
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: color .25s var(--ease-snap), box-shadow .25s var(--ease-snap), background-color .25s var(--ease-snap);
}
.authbtn:hover{ color: var(--fg); background: rgba(255,255,255,0.08); }
.authbtn svg{ flex:0 0 auto; opacity:.85; }
.authrole{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:13px;
  letter-spacing:0.1em; text-transform:uppercase; color: var(--gold);
  padding: 7px 12px; border-radius: var(--r-pill);
  background: rgba(179,180,179,0.10); box-shadow: inset 0 0 0 1px rgba(179,180,179,0.30);
  white-space: nowrap;
}
.authwrap{ display:flex; align-items:center; gap:8px; }

/* shared live pulse dot */
.pulse{ position: relative; width: 9px; height: 9px; flex: 0 0 auto; }
.pulse i{
  position:absolute; inset:0; border-radius:50%;
  background: var(--red-hot);
  box-shadow: 0 0 10px 1px rgba(255,58,69,0.9);
}
.pulse i::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: var(--red-hot);
  animation: ping 1.8s var(--ease-stage) infinite;
}
@keyframes ping{
  0%   { transform: scale(1);   opacity: .75; }
  70%  { transform: scale(3.0); opacity: 0; }
  100% { transform: scale(3.0); opacity: 0; }
}

/* =====================================================================
   HERO , tournament identity + status. Yard-line texture.
   ===================================================================== */
.hero{ position: relative; padding-top: var(--s-9); padding-bottom: var(--s-7); }
.hero__field{
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}
.hero__field::before{
  content:""; position:absolute; inset:-2px;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.055) 0 2px, transparent 2px 13.6%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.025) 0 1px, transparent 1px 6.8%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
}
.hero__field::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 50% -5%, rgba(210,32,47,0.16), transparent 60%);
}

.hero__head{ display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Barlow Semi Condensed",sans-serif;
  text-transform:uppercase; letter-spacing:0.24em; font-weight:700; font-size:11px;
  color: var(--fg-soft);
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.045);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.tag .sq{ width:7px;height:7px;border-radius:2px;background:var(--red); box-shadow:0 0 8px rgba(210,32,47,.8);}
.tag--gold{ color:var(--gold); }
.tag--gold .sq{ background:var(--gold); box-shadow:0 0 8px rgba(179,180,179,.7); }

.hero__title{
  margin-top: var(--s-4);
  font-family:"Anton", sans-serif; font-weight:400; text-transform:uppercase;
  line-height: 0.86; letter-spacing: 0.005em;
  font-size: clamp(40px, 9vw, 104px);
  color: var(--fg);
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
  overflow-wrap: anywhere;
}
.hero__title em{
  font-style: normal; color: var(--red);
  text-shadow: 0 0 30px rgba(210,32,47,0.5);
}

.hero__meta{
  margin-top: var(--s-5);
  display:flex; align-items: stretch; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
}
.metaitem{ display:flex; flex-direction:column; gap:3px; }
.metaitem .k{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.2em; font-size:10px; font-weight:700; color: var(--fg-mute); }
.metaitem .v{ font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:19px;
  letter-spacing:0.01em; color: var(--fg); }
.metaitem .v small{ color: var(--fg-mute); font-weight:600; font-size:14px; }
.metaitem .v .accent{ color: var(--gold); }
.metasep{ width:1px; align-self:stretch; background: var(--line-2); }

/* Round progress (broadcast lower-third meter) */
.roundbar{
  margin-top: var(--s-6);
  display:flex; align-items:center; gap: var(--s-4); flex-wrap: wrap;
}
.roundbar__label{
  display:flex; align-items:center; gap:9px;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:16px;
  text-transform:uppercase; letter-spacing:0.08em; color: var(--fg);
}
.roundbar__label b{ color: var(--red); font-weight:700; }
.pips{ display:flex; gap:6px; flex:1 1 220px; min-width:180px; flex-wrap: wrap; }
.pip{
  height: 8px; flex:1 1 14px; border-radius: 3px;
  background: var(--ink-700);
  box-shadow: inset 0 0 0 1px var(--line);
  position: relative; overflow: hidden;
}
.pip.done{ background: linear-gradient(180deg, #e23a43, var(--red)); box-shadow: 0 0 10px -2px rgba(210,32,47,.6); }
.pip.live{ background: var(--ink-700); box-shadow: inset 0 0 0 1px rgba(210,32,47,.5); }
.pip.live::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, var(--red) 0 50%, transparent 50%);
  background-size: 200% 100%;
  animation: pipfill 1.9s var(--ease-stage) infinite;
}
@keyframes pipfill{ 0%{background-position:100% 0; opacity:.55;} 50%{opacity:1;} 100%{background-position:0 0; opacity:.55;} }

/* =====================================================================
   SECTION scaffolding
   ===================================================================== */
.section{ padding-block: var(--s-7); }
.section__head{
  display:flex; align-items:baseline; gap: var(--s-3);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.section__title{
  font-family:"Anton",sans-serif; font-weight:400; text-transform:uppercase;
  font-size: clamp(22px, 4.4vw, 32px); letter-spacing:0.02em; color: var(--fg);
}
.section__title .accent{ color: var(--red); }
.section__rule{ flex:1; height:1px; min-width:24px;
  background: linear-gradient(90deg, var(--line-2), transparent); align-self:center; }
.section__aside{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.1em; font-weight:700; font-size:13px; color: var(--fg-mute); }

/* =====================================================================
   ON NOW / UP NEXT STRIP , scoreboard cards (RedZone style)
   ===================================================================== */
.scoregrid{
  display:grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.gcard{
  position: relative;
  border-radius: var(--r-lg);
  padding: 5px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  box-shadow: var(--shadow-panel);
}
.gcard--live{ box-shadow: var(--shadow-panel), var(--glow-red); }
.gcard__plate{
  border-radius: calc(var(--r-lg) - 5px);
  background: linear-gradient(180deg, var(--ink-750), var(--ink-800));
  box-shadow: var(--inset-hi);
  overflow: hidden;
}
.gcard__top{
  display:flex; align-items:center; justify-content:space-between; gap: var(--s-3);
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.18);
}
.gcard__field{
  display:flex; align-items:center; gap:8px;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:0.12em; color: var(--fg-soft);
}
.gcard__field .fnum{
  display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 5px;
  border-radius:6px; background: var(--ink-650); color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line-2); font-size:13px;
}
.statuschip{
  display:inline-flex; align-items:center; gap:7px;
  padding: 5px 10px; border-radius: var(--r-pill);
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:0.14em;
}
.statuschip--live{
  color:#ffe2e4;
  background: linear-gradient(180deg, rgba(210,32,47,0.22), rgba(210,32,47,0.10));
  box-shadow: inset 0 0 0 1px rgba(210,32,47,0.5);
}
.statuschip--next{
  color: var(--fg-soft);
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.statuschip--next .clk{ color: var(--silver-hi); }
.statuschip--final{
  color: var(--fg-soft);
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.statuschip--ffeit{
  color: var(--gold);
  background: rgba(179,180,179,0.10);
  box-shadow: inset 0 0 0 1px rgba(179,180,179,0.30);
}
.statuschip--cancel{
  color: var(--fg-faint);
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px var(--line);
  text-decoration: line-through;
}

.matchrow{
  display:grid; grid-template-columns: 1fr auto; align-items:center;
  gap: var(--s-3); padding: 12px 14px;
}
.matchrow + .matchrow{ border-top: 1px solid var(--line); }
.matchrow.lead .team{ color: var(--fg); }
.team{ display:flex; align-items:center; gap: 11px; min-width:0; color: var(--fg-soft); }
.seedbox{
  flex:0 0 auto; width:26px; height:26px; border-radius:7px;
  display:grid; place-items:center;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:13px;
  background: var(--ink-700); color: var(--fg-mute);
  box-shadow: inset 0 0 0 1px var(--line);
}
.matchrow.lead .seedbox{ background: linear-gradient(180deg,#e23a43,var(--red)); color:#fff;
  box-shadow: 0 0 12px -3px rgba(210,32,47,.7); }
.team__col{ display:flex; flex-direction:column; min-width:0; }
.team__name{
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; font-size: clamp(16px,4vw,19px);
  letter-spacing:0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.matchrow.lead .team__name{ font-weight:700; }
.team__rec{ font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:12px;
  color: var(--fg-faint); letter-spacing:0.05em; }
.score{
  font-family:"Barlow Condensed",sans-serif; font-weight:800;
  font-size: clamp(26px, 7vw, 34px); line-height:1; letter-spacing:0.01em;
  color: var(--fg-soft); font-variant-numeric: tabular-nums; min-width: 1.6ch; text-align:right;
}
.matchrow.lead .score{ color: var(--fg); }
.score--live{ color:#fff; text-shadow: 0 0 18px rgba(210,32,47,0.35); }
.score--muted{ color: var(--fg-faint); }

.gcard__foot{
  display:flex; align-items:center; justify-content:space-between; gap: var(--s-3);
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.22);
  font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:0.1em; color: var(--fg-mute);
}
.gcard__foot .poss{ display:inline-flex; align-items:center; gap:7px; color: var(--fg-soft); }
.gcard__foot .nextat b{ color: var(--silver-hi); font-weight:700; }

/* =====================================================================
   STANDINGS , the centerpiece. Broadcast results table.
   ===================================================================== */
.standings{ padding-bottom: var(--s-10); }

.tablecard{
  border-radius: var(--r-xl);
  padding: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.012));
  box-shadow: var(--shadow-lift);
}
.tablecard__inner{
  border-radius: calc(var(--r-xl) - 6px);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  box-shadow: var(--inset-hi);
  overflow: hidden;
}

.tablebar{
  display:flex; align-items:center; gap: var(--s-4); flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.18);
}
.tablebar__title{
  font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:400;
  font-size: 18px; letter-spacing:0.03em; color: var(--fg); display:flex; align-items:center; gap:9px;
}
.tablebar__title .ic{ width:7px;height:18px;border-radius:2px;background:var(--red); box-shadow:0 0 10px rgba(210,32,47,.6);}
.legend{ margin-left:auto; display:flex; align-items:center; gap: var(--s-4); flex-wrap: wrap; }
.legend span{ display:inline-flex; align-items:center; gap:7px;
  font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:0.08em; color: var(--fg-mute); }
.legend .swatch{ width:12px; height:12px; border-radius:3px; }
.legend .swatch--q{ background: linear-gradient(180deg,#e23a43,var(--red)); }
.legend .swatch--cut{ background: repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 7px); height:3px; border-radius:0; }
.legend .swatch--tie{ background: var(--ink-650); box-shadow: inset 0 0 0 1px var(--line-2); position:relative; }

.tscroll{ width:100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl{ width:100%; border-collapse: collapse; min-width: 600px; }

table.tbl thead th{
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg, #15171f, #111219);
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:0.14em; font-size:10.5px;
  color: var(--fg-mute);
  text-align:right; padding: 13px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
}
table.tbl thead th.l{ text-align:left; }
table.tbl thead th .hint{ display:block; font-size:8.5px; letter-spacing:0.1em; color: var(--fg-faint); margin-top:2px; font-weight:600; }

table.tbl tbody td{
  padding: 0 12px; height: 56px;
  border-bottom: 1px solid var(--line);
  text-align: right; white-space: nowrap; vertical-align: middle;
  font-variant-numeric: tabular-nums lining-nums;
}
table.tbl tbody tr{ transition: background-color .25s var(--ease-snap); }
table.tbl tbody tr:hover{ background: rgba(255,255,255,0.028); }
table.tbl tbody tr:last-child td{ border-bottom: none; }

.c-rank{ width: 64px; text-align: left !important; padding-left: 16px !important; }
.rank{ display:inline-flex; align-items:center; gap:10px; }
.rank__seed{
  width:30px; height:30px; flex:0 0 auto; border-radius:8px;
  display:grid; place-items:center;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:15px;
  background: var(--ink-700); color: var(--fg-soft);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.c-team{ text-align:left !important; min-width: 200px; }
.tm{ display:flex; align-items:center; gap: 12px; min-width:0; }
.tm__crest{
  width:30px; height:30px; flex:0 0 auto; border-radius:8px;
  display:grid; place-items:center; overflow:hidden;
  background: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line);
  font-family:"Anton",sans-serif; font-size:13px; color: var(--fg-soft);
}
.tm__id{ display:flex; flex-direction:column; min-width:0; line-height:1.05; }
.tm__name{
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; font-size:17px;
  letter-spacing:0.01em; color: var(--fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tm__sub{ font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:0.1em; color: var(--fg-faint); margin-top:2px;
  display:flex; align-items:center; gap:7px; }
.tiechip{
  display:inline-flex; align-items:center; gap:4px;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:9.5px;
  letter-spacing:0.12em; color: var(--gold);
  padding: 1px 6px; border-radius: var(--r-pill);
  background: rgba(179,180,179,0.10); box-shadow: inset 0 0 0 1px rgba(179,180,179,0.30);
}

.c-rec{ width: 150px; }
.rec{ display:inline-flex; align-items:center; gap:5px; justify-content:flex-end; }
.pill{
  display:inline-grid; place-items:center;
  min-width:24px; height:24px; padding:0 6px; border-radius:6px;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:13.5px;
  letter-spacing:0.02em; font-variant-numeric: tabular-nums;
}
.pill--w{ color: var(--win);  background: var(--win-deep);  box-shadow: inset 0 0 0 1px rgba(74,222,128,0.28); }
.pill--l{ color: var(--loss); background: var(--loss-deep); box-shadow: inset 0 0 0 1px rgba(255,107,114,0.26); }
.pill--t{ color: var(--tie);  background: var(--ink-700);   box-shadow: inset 0 0 0 1px var(--line-2); }
.rec__slash{ color: var(--fg-faint); font-weight:700; }

.c-pf, .c-pa{ width: 78px; color: var(--fg-soft);
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:18px; }
.c-diff{ width: 92px; padding-right:16px !important;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:18px; }
.diff{ display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; }
.diff--pos{ color: var(--win); }
.diff--neg{ color: var(--loss); }
.diff--zero{ color: var(--fg-mute); }
.diff__arr{ font-size:11px; opacity:.85; }

/* Qualifier rows + cut line */
tr.qual td{ background:
   linear-gradient(90deg, rgba(210,32,47,0.12), rgba(210,32,47,0.02) 30%, transparent 60%); }
tr.qual:hover td{ background:
   linear-gradient(90deg, rgba(210,32,47,0.18), rgba(210,32,47,0.04) 30%, rgba(255,255,255,0.02) 60%); }
tr.qual .rank__seed{
  background: linear-gradient(180deg,#e23a43,var(--red)); color:#fff;
  box-shadow: 0 0 14px -3px rgba(210,32,47,.75), inset 0 0 0 1px rgba(255,255,255,0.12);
}
tr.qual .c-rank{ position: relative; }
tr.qual .c-rank::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, var(--red-hot), var(--red));
  box-shadow: 0 0 10px rgba(210,32,47,.7);
}
tr.qual .tm__crest{ box-shadow: inset 0 0 0 1px rgba(210,32,47,.35); }

tr.cutline td{ padding:0; height:auto; border:none; background:none !important; }
.cut{
  position: relative;
  display:flex; align-items:center; gap: 12px;
  padding: 9px 16px;
  background: rgba(0,0,0,0.30);
  border-top: 1px dashed rgba(179,180,179,0.55);
  border-bottom: 1px dashed rgba(179,180,179,0.22);
}
.cut__lab{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:0.18em; color: var(--gold);
  white-space:nowrap;
}
.cut__lab svg{ flex:0 0 auto; }
.cut__line{ flex:1; height:1px; background: repeating-linear-gradient(90deg, rgba(179,180,179,0.5) 0 6px, transparent 6px 11px); }
.cut__n{ font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:11px;
  letter-spacing:0.14em; color: var(--silver); text-transform:uppercase; white-space:nowrap; }

tr.below td{ color: var(--fg-soft); }
tr.below .tm__name{ color: var(--fg-soft); }
tr.below .rank__seed{ background: var(--ink-800); color: var(--fg-mute); }

/* tiebreaker footnote under table */
.tblfoot{
  display:flex; align-items:flex-start; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.18);
}
.tblfoot__k{
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:10px;
  text-transform:uppercase; letter-spacing:0.2em; color: var(--gold);
  flex:0 0 auto; padding-top:2px;
}
.tblfoot ol{ display:flex; flex-wrap:wrap; gap: 8px 14px; counter-reset: tb; }
.tblfoot ol li{ display:inline-flex; align-items:center; gap:7px;
  font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:13px;
  text-transform:uppercase; letter-spacing:0.06em; color: var(--fg-soft); }
.tblfoot ol li::before{
  counter-increment: tb; content: counter(tb);
  width:18px; height:18px; border-radius:5px; display:grid; place-items:center;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:11px;
  background: var(--ink-700); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(179,180,179,.25);
}

/* =====================================================================
   SCHEDULE , timetable grouped by slot
   ===================================================================== */
.filters{
  display:flex; align-items:flex-end; gap: var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-6);
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  box-shadow: var(--inset-hi), 0 1px 0 rgba(255,255,255,0.04) inset, var(--shadow-panel);
}
.field-group{ display:flex; flex-direction:column; gap:6px; min-width: 150px; flex: 1 1 180px; }
.field-group label{
  font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.18em; font-size:10px; font-weight:700; color: var(--fg-mute);
}
.field-group select{
  appearance: none; -webkit-appearance: none;
  background: var(--ink-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8F9E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--fg); padding: 11px 38px 11px 14px; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:15px; letter-spacing:0.03em;
  cursor: pointer; width: 100%;
  transition: box-shadow .2s var(--ease-snap);
}
.field-group select:hover{ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.filters__clear{
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.08em; font-weight:700; font-size:13px; color: var(--fg-mute);
  padding: 11px 14px; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color .2s var(--ease-snap), box-shadow .2s var(--ease-snap);
  align-self: flex-end;
}
.filters__clear:hover{ color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }

.slotgroup{ margin-bottom: var(--s-6); }
.slothead{
  display:flex; align-items:center; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.slothead__round{
  display:inline-grid; place-items:center; min-width:34px; height:34px; padding:0 9px;
  border-radius: var(--r-sm);
  background: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line-2);
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:15px; color: var(--fg);
}
.slothead__round small{
  display:block; font-size:7.5px; letter-spacing:0.14em; color: var(--fg-mute);
  font-weight:700; text-transform:uppercase; line-height:1; margin-top:1px; text-align:center;
}
.slothead__time{
  font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:400;
  font-size:20px; letter-spacing:0.02em; color: var(--fg);
}
.slothead__sub{
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.1em; font-weight:700; font-size:12px; color: var(--fg-mute);
}
.slothead.live .slothead__round{ background: linear-gradient(180deg,#e23a43,var(--red)); color:#fff;
  box-shadow:0 0 12px -3px rgba(210,32,47,.7); }
.slothead__rule{ flex:1; height:1px; min-width:18px;
  background: linear-gradient(90deg, var(--line-2), transparent); }

.slotgrid{
  display:grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* a schedule match row card */
.smatch{
  position:relative;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--ink-750), var(--ink-800));
  box-shadow: var(--inset-hi), var(--shadow-panel);
  overflow: hidden;
}
.smatch--live{ box-shadow: var(--inset-hi), var(--shadow-panel), var(--glow-red); }
.smatch--cancel{ opacity: .62; }
.smatch--cancel .smatch__teams{ text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.25); }
.smatch__top{
  display:flex; align-items:center; justify-content:space-between; gap: var(--s-2);
  padding: 9px 13px; border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.2);
}
.smatch__body{ padding: 4px 0; }
.srow{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap: var(--s-3);
  padding: 8px 13px;
}
.srow + .srow{ border-top: 1px solid var(--line); }
.srow.win .sname{ color: var(--fg); font-weight:700; }
.steam{ display:flex; align-items:center; gap:10px; min-width:0; }
.sname{
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; font-size:16px;
  letter-spacing:0.01em; color: var(--fg-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ssco{
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:22px; line-height:1;
  color: var(--fg-soft); font-variant-numeric: tabular-nums; min-width: 1.5ch; text-align:right;
}
.srow.win .ssco{ color: var(--fg); }
.ssco--live{ color:#fff; }
.ssco--muted{ color: var(--fg-faint); font-weight:700; }

/* =====================================================================
   EMPTY / OFFLINE STATES
   ===================================================================== */
.empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap: var(--s-4);
  padding: clamp(40px, 9vw, 80px) var(--s-5);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  box-shadow: var(--inset-hi), var(--shadow-lift);
}
.empty__icon{
  width: 72px; height: 72px; border-radius: var(--r-lg);
  display:grid; place-items:center;
  background: radial-gradient(120% 120% at 30% 20%, var(--ink-700), var(--ink-850));
  box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px -24px rgba(0,0,0,0.9);
  color: var(--fg-mute);
}
.empty__icon svg{ width:34px; height:34px; }
.empty__title{
  font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:400;
  font-size: clamp(22px, 5vw, 30px); letter-spacing:0.02em; color: var(--fg);
}
.empty__msg{
  font-family:"Barlow",sans-serif; font-weight:500; font-size:15px;
  color: var(--fg-mute); max-width: 46ch; line-height:1.5;
}
.empty--offline .empty__icon{ color: var(--loss); box-shadow: inset 0 0 0 1px rgba(255,107,114,0.3), 0 18px 40px -24px rgba(0,0,0,0.9); }
.empty__hint{
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.12em; font-weight:700; font-size:12px; color: var(--fg-faint);
}

/* =====================================================================
   ADMIN placeholder panel
   ===================================================================== */
.adminpanel{
  border-radius: var(--r-xl);
  padding: clamp(28px, 6vw, 56px);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  box-shadow: var(--inset-hi), var(--shadow-lift);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap: var(--s-4);
}
.adminpanel__badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.22em; font-weight:700; font-size:11px; color: var(--gold);
  padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(179,180,179,0.10); box-shadow: inset 0 0 0 1px rgba(179,180,179,0.3);
}
.adminpanel__title{
  font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:400;
  font-size: clamp(26px, 6vw, 40px); letter-spacing:0.02em; color: var(--fg);
}
.adminpanel__msg{
  font-family:"Barlow",sans-serif; font-weight:500; font-size:16px;
  color: var(--fg-mute); max-width: 52ch; line-height:1.55;
}
.adminpanel__who{
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.1em; font-weight:700; font-size:13px; color: var(--fg-soft);
  display:inline-flex; align-items:center; gap:8px;
}
.adminpanel__who b{ color: var(--gold); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.08em; font-weight:700; font-size:15px;
  padding: 13px 24px; border-radius: var(--r-md);
  transition: transform .2s var(--ease-snap), box-shadow .2s var(--ease-snap), background-color .2s var(--ease-snap);
}
.btn--primary{
  color:#fff;
  background: linear-gradient(180deg, #e23a43, var(--red));
  box-shadow: 0 10px 24px -10px rgba(210,32,47,0.7), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(210,32,47,0.8), inset 0 1px 0 rgba(255,255,255,0.22); }
.btn--primary:active{ transform: translateY(0); }
.btn--ghost{
  color: var(--fg-soft); box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover{ color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }

/* =====================================================================
   LOGIN MODAL
   ===================================================================== */
.modal{
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: var(--s-5);
}
.modal[hidden]{ display: none; }
.modal__scrim{
  position:absolute; inset:0;
  background: rgba(4,5,8,0.74);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.modal__card{
  position: relative;
  width: min(440px, 100%);
  border-radius: var(--r-xl);
  padding: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  box-shadow: var(--shadow-lift);
}
.modal__inner{
  border-radius: calc(var(--r-xl) - 6px);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  box-shadow: var(--inset-hi);
  padding: clamp(22px, 5vw, 32px);
}
.modal__head{ display:flex; align-items:flex-start; justify-content:space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.modal__eyebrow{
  font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.28em; font-weight:700; font-size:10px; color: var(--red); margin-bottom: 6px;
}
.modal__title{
  font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:400;
  font-size: 26px; letter-spacing:0.02em; color: var(--fg); line-height:1;
}
.modal__close{
  flex:0 0 auto; width:36px; height:36px; border-radius:9px;
  display:grid; place-items:center; color: var(--fg-mute);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: color .2s var(--ease-snap), box-shadow .2s var(--ease-snap);
}
.modal__close:hover{ color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom: var(--s-4); }
.field label{
  font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.18em; font-size:10px; font-weight:700; color: var(--fg-mute);
}
.field input{
  background: var(--ink-700); color: var(--fg);
  padding: 13px 15px; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-family:"Barlow",sans-serif; font-weight:600; font-size:16px; letter-spacing:0.01em;
  transition: box-shadow .2s var(--ease-snap);
}
.field input::placeholder{ color: var(--fg-faint); }
.field input:focus{ outline:none; box-shadow: inset 0 0 0 1px rgba(255,58,69,0.7), 0 0 0 3px rgba(255,58,69,0.15); }
.field__hint{
  font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:12px;
  color: var(--fg-faint); letter-spacing:0.03em;
}
.modal__error{
  display:none; align-items:center; gap:9px;
  margin-bottom: var(--s-4); padding: 11px 14px; border-radius: var(--r-sm);
  background: rgba(255,107,114,0.10); box-shadow: inset 0 0 0 1px rgba(255,107,114,0.35);
  color: var(--loss);
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:13px; letter-spacing:0.04em;
}
.modal__error.show{ display:flex; }
.modal__error svg{ flex:0 0 auto; }
.modal__actions{ display:flex; gap: var(--s-3); margin-top: var(--s-5); }
.modal__actions .btn{ flex:1; }
.modal__card .btn--primary[aria-busy="true"]{ opacity:.7; pointer-events:none; }
.spin{ width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.35); border-top-color:#fff;
  animation: spin .7s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* =====================================================================
   FOOTER , compact rules note
   ===================================================================== */
.footer{
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
  padding-block: var(--s-7) var(--s-8);
}
.scoring{
  display:flex; align-items:center; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.scoring__lab{
  font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:400;
  font-size:15px; letter-spacing:0.04em; color: var(--fg-soft);
  display:inline-flex; align-items:center; gap:9px;
}
.scoring__lab .ic{ width:6px;height:16px;border-radius:2px;background:var(--red);}
.rulechips{ display:flex; gap: var(--s-2); flex-wrap: wrap; }
.rule{
  display:inline-flex; align-items:baseline; gap:8px;
  padding: 8px 13px; border-radius: var(--r-md);
  background: var(--ink-800);
  box-shadow: inset 0 0 0 1px var(--line);
}
.rule b{ font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:20px;
  color: var(--red); letter-spacing:0.01em; }
.rule span{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:0.1em; color: var(--fg-mute); }

.footer__base{
  display:flex; align-items:center; justify-content:space-between; gap: var(--s-4);
  flex-wrap: wrap; padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.footer__brand{ display:flex; align-items:center; gap:10px; }
.footer__brand b{ font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:400;
  font-size:15px; letter-spacing:0.04em; color: var(--fg); }
.footer__brand .alpha{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:700;
  font-size:10px; letter-spacing:0.3em; color: var(--red); text-transform:uppercase; }
.footer__meta{ font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:0.1em; color: var(--fg-faint); }

/* =====================================================================
   ENTRANCE MOTION , broadcast fade-up (GPU-safe)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform: translate3d(0, 18px, 0); filter: blur(5px);
    transition: opacity .7s var(--ease-stage), transform .8s var(--ease-stage), filter .7s var(--ease-stage); }
  .reveal.in{ opacity:1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce){
  .pulse i::after{ animation: none; }
  .pip.live::after{ animation: none; background: linear-gradient(90deg, var(--red) 0 60%, transparent 60%); }
  *{ scroll-behavior: auto !important; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1080px){
  table.tbl tbody td{ height: 54px; }
}

@media (max-width: 860px){
  .topnav a{ padding: 8px 11px; font-size: 14px; }
  .authrole .who-field{ display:none; }
}

@media (max-width: 720px){
  .topbar__inner{ row-gap: 6px; }
  .topnav{ order: 3; margin-left: 0; width: 100%; justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .railctl{ margin-left: auto; }
  .brand__txt b{ max-width: 40vw; }
}

@media (max-width: 640px){
  :root{ --gut: 16px; }
  .topnav a{ padding: 8px 12px; font-size: 14px; }
  .conn b, .conn .conn-txt{ }
  .hero{ padding-top: var(--s-7); }
  .hero__title{ font-size: clamp(38px, 13vw, 64px); }
  .metasep{ display:none; }
  .hero__meta{ gap: var(--s-3) var(--s-6); }

  .c-pf, th.c-pf, .c-pa, th.c-pa{ display:none; }
  table.tbl{ min-width: 0; }
  table.tbl tbody td{ height: 60px; }
  .c-team{ min-width: 0; }
  .tm__name{ font-size: 16px; max-width: 40vw; }
  .c-rec{ width: 128px; }
  .c-diff{ width: 70px; }
  .cut__n{ display:none; }
}

@media (max-width: 380px){
  .pill{ min-width:22px; height:22px; font-size:12.5px; }
  .tm__name{ font-size:15px; }
  .authbtn .auth-txt{ display:none; }
  .authbtn{ padding: 8px 11px; }
}

/* Wide TV / venue display */
@media (min-width: 1280px){
  table.tbl tbody td{ height: 60px; }
  .tm__name{ font-size: 18px; }
  .c-pf, .c-pa, .c-diff{ font-size: 19px; }
}

/* =====================================================================
   ADMIN , Super Control Center + Field Scoring (extends the broadcast
   design system above; reuses tokens, chips and card language).
   Mobile-first and sideline-first: large touch targets, high contrast.
   ===================================================================== */
.adminwrap{ padding-block: var(--s-6) var(--s-10); }

/* ---- admin header ---- */
.adminhead{ margin-bottom: var(--s-5); }
.adminhead__row{ display:flex; align-items:flex-start; justify-content:space-between; gap: var(--s-4); flex-wrap: wrap; }
.adminhead__left{ min-width:0; }
.adminhead__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.28em; font-weight:700; font-size:11px; color: var(--gold);
  margin-bottom: 10px;
}
.adminhead__sq{ width:7px;height:7px;border-radius:2px;background:var(--gold); box-shadow:0 0 8px rgba(179,180,179,.7); }
.adminhead__title{
  font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:400;
  font-size: clamp(30px, 7vw, 54px); letter-spacing:0.01em; color: var(--fg); line-height:0.9;
}
.adminhead__title .accent{ color: var(--red); text-shadow: 0 0 28px rgba(210,32,47,0.45); }
.adminhead__sub{
  margin-top: var(--s-4); max-width: 64ch;
  font-family:"Barlow",sans-serif; font-weight:500; font-size:15px; color: var(--fg-mute); line-height:1.5;
}

/* ---- sync chip (saving / saved / live / offline) ---- */
.syncchip{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  padding: 8px 13px; border-radius: var(--r-pill);
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:13px;
  letter-spacing:0.14em; text-transform:uppercase; white-space:nowrap;
}
.syncchip--live{ color:#ffd9db; background: linear-gradient(180deg, rgba(210,32,47,0.16), rgba(210,32,47,0.06)); box-shadow: inset 0 0 0 1px rgba(210,32,47,0.40); }
.syncchip--saving{ color: var(--gold); background: rgba(179,180,179,0.10); box-shadow: inset 0 0 0 1px rgba(179,180,179,0.30); }
.syncchip--saved{ color: var(--win); background: var(--win-deep); box-shadow: inset 0 0 0 1px rgba(74,222,128,0.30); }
.syncchip--off{ color: var(--loss); background: var(--loss-deep); box-shadow: inset 0 0 0 1px rgba(255,107,114,0.30); }
.syncchip__dot{ width:8px;height:8px;border-radius:50%; background: currentColor; opacity:.9; }
.syncchip--live .syncchip__dot{ box-shadow: 0 0 8px 1px rgba(255,58,69,0.8); }
.syncspin{ width:13px;height:13px;border-radius:50%;
  border:2px solid rgba(179,180,179,0.35); border-top-color: var(--gold);
  animation: spin .7s linear infinite; }

/* ---- flash bar ---- */
#admin-flash{ margin-bottom: var(--s-4); }
.flashbar{
  display:flex; align-items:center; gap:11px;
  padding: 12px 16px; border-radius: var(--r-md);
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:14.5px;
  letter-spacing:0.03em; line-height:1.3;
}
.flashbar svg{ flex:0 0 auto; }
.flashbar--ok{ color: var(--win); background: var(--win-deep); box-shadow: inset 0 0 0 1px rgba(74,222,128,0.3); }
.flashbar--err{ color: var(--loss); background: var(--loss-deep); box-shadow: inset 0 0 0 1px rgba(255,107,114,0.32); }

/* ---- tabs ---- */
.tabs{
  display:flex; gap:5px; margin-bottom: var(--s-6);
  padding: 5px; border-radius: var(--r-pill);
  background: var(--ink-800); box-shadow: var(--inset-hi), inset 0 0 0 1px var(--line);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tab{
  flex: 1 1 auto; white-space:nowrap; min-width: max-content;
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.07em; font-weight:700; font-size:14px; color: var(--fg-mute);
  padding: 11px 16px; border-radius: var(--r-pill);
  transition: color .25s var(--ease-snap), background-color .25s var(--ease-snap);
}
.tab:hover{ color: var(--fg-soft); }
.tab--on{
  color:#fff;
  background: linear-gradient(180deg, rgba(210,32,47,0.9), var(--red));
  box-shadow: 0 8px 20px -10px rgba(210,32,47,0.7), inset 0 1px 0 rgba(255,255,255,0.18);
}

.tabpanel{ display:flex; flex-direction:column; gap: var(--s-5); }

/* ---- panel cards (setup, teams, generate, coin) ---- */
.setup{ display:grid; gap: var(--s-4); grid-template-columns: 1fr; }
.pcard{
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  box-shadow: var(--inset-hi), var(--shadow-panel);
  overflow: hidden;
}
.pcard__head{ padding: 16px 18px 12px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,0.16); }
.pcard__title{
  font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:400;
  font-size: 18px; letter-spacing:0.03em; color: var(--fg);
}
.pcard__sub{ margin-top:5px; font-family:"Barlow",sans-serif; font-weight:500; font-size:13px; color: var(--fg-mute); }
.pcard__body{ padding: 18px; display:flex; flex-direction:column; gap: var(--s-4); }

/* ---- form fields ---- */
.afield{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.afield > label,
.nfield > label,
.sinp__lab{
  font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.16em; font-size:10px; font-weight:700; color: var(--fg-mute);
}
.ainput{
  width:100%;
  background: var(--ink-700); color: var(--fg);
  padding: 13px 15px; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-family:"Barlow",sans-serif; font-weight:600; font-size:16px; letter-spacing:0.01em;
  transition: box-shadow .2s var(--ease-snap);
}
.ainput::placeholder{ color: var(--fg-faint); }
.ainput:focus{ outline:none; box-shadow: inset 0 0 0 1px rgba(255,58,69,0.7), 0 0 0 3px rgba(255,58,69,0.15); }
select.ainput{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background: var(--ink-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8F9E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  padding-right: 38px;
}
.inrow{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
/* name + year share a row; name gets the room, year stays compact */
.inrow--name-year{ grid-template-columns: 1fr; }
@media (min-width: 420px){ .inrow--name-year{ grid-template-columns: 2.4fr 1fr; } }
.budget{ display:flex; align-items:center; gap: var(--s-3); }
.budget .ainput{ flex:1; }
.budget__unit{ font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:14px; color: var(--gold); white-space:nowrap; }

/* segmented mode toggle */
.seg{ display:flex; gap:5px; padding:5px; border-radius: var(--r-md); background: var(--ink-750); box-shadow: inset 0 0 0 1px var(--line); }
.seg__btn{
  flex:1; padding: 12px 10px; border-radius: var(--r-sm);
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.06em;
  font-weight:700; font-size:14px; color: var(--fg-mute);
  transition: color .2s var(--ease-snap), background-color .2s var(--ease-snap);
}
.seg__btn--on{ color:#fff; background: linear-gradient(180deg,#e23a43,var(--red)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16); }

.modebox{ display:flex; flex-direction:column; gap: var(--s-4); }
.lunchbox{ display:flex; flex-direction:column; gap: var(--s-3);
  padding-top: var(--s-3); border-top: 1px dashed var(--line-2); }

/* switch */
.switchrow{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-3); }
.switchrow__lab{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; font-size:14px; color: var(--fg-soft); }
.switch{
  width:52px; height:30px; border-radius: var(--r-pill); flex:0 0 auto; position:relative;
  background: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color .2s var(--ease-snap), box-shadow .2s var(--ease-snap);
}
.switch__knob{ position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background: var(--fg-mute); transition: transform .2s var(--ease-snap), background-color .2s var(--ease-snap); }
.switch--on{ background: linear-gradient(180deg,#e23a43,var(--red)); box-shadow: inset 0 0 0 1px rgba(210,32,47,0.5); }
.switch--on .switch__knob{ transform: translateX(22px); background:#fff; }

/* point buttons editor */
.pbedit{ display:flex; flex-direction:column; gap: var(--s-3); }
.pbedit__head{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-3); }
.pbedit__title{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.16em; font-size:10px; font-weight:700; color: var(--fg-mute); }
.pbedit__add{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; font-size:13px;
  color: var(--fg-soft); padding: 7px 12px; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line-2); transition: color .2s var(--ease-snap), box-shadow .2s var(--ease-snap);
}
.pbedit__add:hover{ color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.pbedit__rows{ display:flex; flex-direction:column; gap: var(--s-2); }
.pbrow{ display:grid; grid-template-columns: 84px 1fr 44px; gap: var(--s-2); align-items:center; }
.pbrow__v{ text-align:center; }
.pbrow__del{
  width:44px; height:44px; border-radius: var(--r-sm); display:grid; place-items:center; color: var(--fg-mute);
  box-shadow: inset 0 0 0 1px var(--line-2); transition: color .2s var(--ease-snap), box-shadow .2s var(--ease-snap);
}
.pbrow__del:hover{ color: var(--loss); box-shadow: inset 0 0 0 1px rgba(255,107,114,0.4); }
.pbedit__hint{ font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:12px; color: var(--fg-faint); letter-spacing:0.02em; }

/* ---- live math surface ---- */
.mathwrap{ margin-top: var(--s-2); }
.mathcard{
  border-radius: var(--r-lg);
  padding: 18px;
  background: linear-gradient(180deg, rgba(210,32,47,0.10), rgba(255,255,255,0.012));
  box-shadow: var(--inset-hi), var(--shadow-panel), 0 0 0 1px rgba(210,32,47,0.2);
}
.mathcard--busy{ opacity:.8; }
.mathcard--err{ background: linear-gradient(180deg, rgba(255,107,114,0.08), rgba(255,255,255,0.01)); box-shadow: var(--inset-hi), inset 0 0 0 1px rgba(255,107,114,0.25); }
.mathcard__top{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.mathcard__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.22em; font-weight:700; font-size:11px; color: var(--fg-soft);
}
.mathcard__livedot{ width:8px;height:8px;border-radius:50%; background: var(--red-hot); box-shadow: 0 0 8px 1px rgba(255,58,69,0.8); }
.verifypill{
  display:inline-flex; align-items:center; gap:7px;
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; font-size:12px;
  padding: 6px 11px; border-radius: var(--r-pill);
}
.verifypill--ok{ color: var(--win); background: var(--win-deep); box-shadow: inset 0 0 0 1px rgba(74,222,128,0.3); }
.verifypill--warn{ color: var(--gold); background: rgba(179,180,179,0.1); box-shadow: inset 0 0 0 1px rgba(179,180,179,0.32); }
.mathcard__line{ font-family:"Barlow",sans-serif; font-weight:500; font-size:14px; color: var(--fg-soft); }
.mathcard__summary{
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; font-size: clamp(16px, 4vw, 20px);
  letter-spacing:0.01em; color: var(--fg); line-height:1.4; margin-bottom: var(--s-4);
}
.mathstats{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-bottom: var(--s-4); }
.mstat{ padding: 12px; border-radius: var(--r-md); background: rgba(0,0,0,0.22); box-shadow: inset 0 0 0 1px var(--line); text-align:center; }
.mstat__v{ font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size: clamp(20px, 6vw, 26px); color: var(--fg); line-height:1; }
.mstat__l{ margin-top:5px; font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.12em; font-size:9.5px; font-weight:700; color: var(--fg-mute); }
.mathchips{ display:flex; flex-wrap:wrap; gap: var(--s-2); }
.vchip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; font-size:12px;
  padding: 7px 12px; border-radius: var(--r-pill);
}
.vchip__dot{ width:7px;height:7px;border-radius:50%; background: currentColor; }
.vchip--ok{ color: var(--win); background: var(--win-deep); box-shadow: inset 0 0 0 1px rgba(74,222,128,0.26); }
.vchip--warn{ color: var(--gold); background: rgba(179,180,179,0.1); box-shadow: inset 0 0 0 1px rgba(179,180,179,0.3); }

/* ---- team editor ---- */
.teamedit{ display:grid; grid-template-columns: 1fr; gap: var(--s-2); }
.teamedit__row{ display:grid; grid-template-columns: 40px 1fr; gap: var(--s-3); align-items:center; }
.teamedit__seed{
  width:40px; height:44px; border-radius: var(--r-sm); display:grid; place-items:center;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:16px; color: var(--gold);
  background: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line-2);
}
.teamedit__act{ display:flex; align-items:center; gap: var(--s-4); margin-top: var(--s-3); flex-wrap: wrap; }
.teamedit__note{ font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:13px; color: var(--fg-faint); letter-spacing:0.03em; }

/* ---- generate + day-of ---- */
.genrecap{
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; font-size:15px; color: var(--fg-soft); line-height:1.4;
  padding: 13px 15px; border-radius: var(--r-sm); background: rgba(0,0,0,0.2); box-shadow: inset 0 0 0 1px var(--line);
}
.genwarn{
  display:flex; align-items:flex-start; gap:10px;
  padding: 12px 15px; border-radius: var(--r-sm);
  background: rgba(179,180,179,0.08); box-shadow: inset 0 0 0 1px rgba(179,180,179,0.3); color: var(--gold);
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:14px; letter-spacing:0.02em; line-height:1.4;
}
.genwarn svg{ flex:0 0 auto; margin-top:1px; }
.genbtn{ width:100%; min-height: 56px; }
.genbtn[disabled]{ opacity:.65; pointer-events:none; }

.managehead{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-3); margin-top: var(--s-3); }
.managehead__title{ font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:400; font-size:20px; letter-spacing:0.03em; color: var(--fg); }
.managehead__phase{
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.12em; font-weight:700; font-size:12px; color: var(--gold);
  padding: 6px 12px; border-radius: var(--r-pill); background: rgba(179,180,179,0.1); box-shadow: inset 0 0 0 1px rgba(179,180,179,0.3);
}

.managelist{ display:flex; flex-direction:column; gap: var(--s-4); }
.mslot{ border-radius: var(--r-md); background: linear-gradient(180deg, var(--ink-800), var(--ink-850)); box-shadow: var(--inset-hi), var(--shadow-panel); overflow:hidden; }
.mslot__head{ display:flex; align-items:center; gap: var(--s-3); padding: 11px 15px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,0.18); }
.mslot__round{
  display:inline-grid; place-items:center; min-width:30px; height:26px; padding:0 8px; border-radius:6px;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:13px; color: var(--fg);
  background: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line-2);
}
.mslot__time{ font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:15px; letter-spacing:0.03em; color: var(--fg); }
.mslot__rule{ flex:1; height:1px; background: linear-gradient(90deg, var(--line-2), transparent); }

.mrow{ padding: 12px 15px; }
.mrow + .mrow{ border-top: 1px solid var(--line); }
.mrow--cancel .mrow__teams{ text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.25); color: var(--fg-faint); }
.mrow__info{ display:flex; align-items:center; gap:10px; flex-wrap: wrap; }
.mrow__field{
  display:inline-grid; place-items:center; min-width:30px; height:24px; padding:0 6px; border-radius:6px;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:12px; color: var(--fg-soft);
  background: var(--ink-650); box-shadow: inset 0 0 0 1px var(--line-2);
}
.mrow__teams{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; font-size:16px; color: var(--fg); min-width:0; }
.mrow__vs{ color: var(--fg-faint); font-weight:700; }
.mrow__act{ display:flex; gap: var(--s-2); margin-top: 11px; flex-wrap: wrap; }
.mbtn{
  display:inline-flex; align-items:center; gap:7px; min-height: 44px;
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; font-size:13px;
  color: var(--fg-soft); padding: 10px 15px; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line-2); transition: color .2s var(--ease-snap), box-shadow .2s var(--ease-snap), background-color .2s var(--ease-snap);
}
.mbtn:hover{ color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.mbtn--danger{ color: var(--loss); box-shadow: inset 0 0 0 1px rgba(255,107,114,0.3); }
.mbtn--danger:hover{ background: rgba(255,107,114,0.08); box-shadow: inset 0 0 0 1px rgba(255,107,114,0.5); }
.mbtn--ok{ color: var(--win); box-shadow: inset 0 0 0 1px rgba(74,222,128,0.3); }
.mbtn--ok:hover{ background: rgba(74,222,128,0.08); }
.mrow__editor{ margin-top: var(--s-3); }

/* coin flip */
.coinnote{
  display:flex; align-items:center; gap:9px;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:14px; letter-spacing:0.02em; color: var(--gold);
  padding: 11px 14px; border-radius: var(--r-sm); background: rgba(179,180,179,0.08); box-shadow: inset 0 0 0 1px rgba(179,180,179,0.28);
}
.coinnote--clear{ color: var(--fg-mute); background: rgba(255,255,255,0.03); box-shadow: inset 0 0 0 1px var(--line); }
.coinpick{ display:grid; grid-template-columns: 1fr; gap: var(--s-3); }
.coinact{ margin-top: var(--s-2); }
.coinact .btn{ width:100%; }
.nfield{ display:flex; flex-direction:column; gap:7px; }
.nfield select{
  appearance:none; -webkit-appearance:none; cursor:pointer; width:100%;
  background: var(--ink-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8F9E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--fg); padding: 13px 38px 13px 14px; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-family:"Barlow",sans-serif; font-weight:600; font-size:16px;
}
.nfield select:focus{ outline:none; box-shadow: inset 0 0 0 1px rgba(255,58,69,0.7), 0 0 0 3px rgba(255,58,69,0.15); }

/* danger zone */
.dangercard{
  border-radius: var(--r-lg); padding: 18px;
  background: linear-gradient(180deg, rgba(255,107,114,0.06), rgba(255,255,255,0.01));
  box-shadow: var(--inset-hi), inset 0 0 0 1px rgba(255,107,114,0.22);
  display:flex; flex-direction:column; gap: var(--s-3);
}
.dangercard__head{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.2em; font-weight:700; font-size:11px; color: var(--loss);
}
.dangercard__msg{ font-family:"Barlow",sans-serif; font-weight:500; font-size:14px; color: var(--fg-mute); line-height:1.5; }
.dangerbtn{
  min-height: 52px;
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; font-size:15px;
  color: var(--loss); padding: 14px 20px; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px rgba(255,107,114,0.4);
  transition: background-color .2s var(--ease-snap), box-shadow .2s var(--ease-snap);
}
.dangerbtn:hover{ background: rgba(255,107,114,0.12); box-shadow: inset 0 0 0 1px rgba(255,107,114,0.6); }
.dangercard__note{ font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:13px; color: var(--gold); letter-spacing:0.03em; min-height: 1em; }

/* =====================================================================
   SCORING CARD (field + super scoring). Sideline-first: big targets.
   ===================================================================== */
.cardgrid{ display:grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }

.scard{
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  box-shadow: var(--inset-hi), var(--shadow-panel);
  overflow: hidden;
}
.scard--live{ box-shadow: var(--inset-hi), var(--shadow-panel), var(--glow-red); }
.scard--cancel{ opacity:.62; }

.scard__head{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-2); padding: 12px 15px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,0.2); }
.scard__meta{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.scard__field{ display:inline-flex; align-items:center; gap:8px; font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color: var(--fg-soft); }
.scard__field .fnum{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 5px; border-radius:6px; background: var(--ink-650); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); font-size:13px; }
.scard__slot{ font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color: var(--fg-mute); }
.scard__slot b{ color: var(--gold); font-weight:700; }

/* big scoreboard */
.scard__board{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: var(--s-2); padding: 18px 15px; }
.tscore{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; text-align:center; }
.tscore__name{
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size: clamp(14px, 3.6vw, 16px);
  letter-spacing:0.01em; color: var(--fg-soft); line-height:1.15;
  max-width: 100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;
}
.tscore--lead .tscore__name{ color: var(--fg); }
.tscore__num{
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size: clamp(52px, 16vw, 76px); line-height:0.9;
  color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing:0.01em;
  transition: color .2s var(--ease-snap), transform .15s var(--ease-snap);
}
.tscore--lead .tscore__num{ color:#fff; text-shadow: 0 0 24px rgba(210,32,47,0.4); }
.scard--live .tscore--lead .tscore__num{ color: var(--red-hot); text-shadow: 0 0 26px rgba(255,58,69,0.5); }
.scard__vs{ font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.14em; color: var(--fg-faint); padding: 0 4px; }

.scard__lock{ display:flex; align-items:center; gap:8px; justify-content:center; padding: 12px 15px; border-top: 1px solid var(--line);
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; font-size:12px; color: var(--fg-faint); }
.scard__cancelnote{ padding: 14px 15px; border-top: 1px solid var(--line); font-family:"Barlow",sans-serif; font-weight:500; font-size:13px; color: var(--fg-mute); text-align:center; }

/* point button rows */
.btnrow{ padding: 12px 15px; border-top: 1px solid var(--line); }
.btnrow__lab{ display:flex; align-items:baseline; gap:9px; margin-bottom: 9px; min-width:0; }
.btnrow__side{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.16em; font-size:10px; font-weight:700; color: var(--fg-mute); flex:0 0 auto; }
.btnrow__team{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:14px; color: var(--fg-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btnrow__btns{ display:grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: var(--s-2); }
.ptbtn{
  min-height: 66px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--ink-700), var(--ink-750));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px var(--line-2), 0 6px 16px -10px rgba(0,0,0,0.8);
  transition: transform .12s var(--ease-snap), box-shadow .15s var(--ease-snap), background-color .15s var(--ease-snap);
  -webkit-tap-highlight-color: transparent;
}
.ptbtn:hover{ background: linear-gradient(180deg, var(--ink-650), var(--ink-700)); }
.ptbtn:active{ transform: scale(0.96); box-shadow: inset 0 0 0 1px rgba(210,32,47,0.5), inset 0 2px 8px rgba(0,0,0,0.4); }
.ptbtn:focus-visible{ outline: 2px solid var(--red-hot); outline-offset: 2px; }
.ptbtn[disabled]{ opacity:.4; pointer-events:none; }
.ptbtn__v{ font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:24px; line-height:1; color: var(--fg); }
.ptbtn__l{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-size:10px; font-weight:700; color: var(--fg-mute); }

/* recent plays */
.plays{ padding: 12px 15px; border-top: 1px solid var(--line); background: rgba(0,0,0,0.14); }
.plays__head{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-2); margin-bottom: 9px; }
.plays__title{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.16em; font-size:10px; font-weight:700; color: var(--fg-mute); }
.plays__count{ font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:12px; color: var(--fg-faint); letter-spacing:0.04em; text-transform:uppercase; }
.plays__empty{ font-family:"Barlow",sans-serif; font-weight:500; font-size:13px; color: var(--fg-faint); padding: 4px 0; }
.plays__list{ display:flex; flex-direction:column; gap:6px; }
.play{ display:flex; align-items:center; gap:10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--ink-750); box-shadow: inset 0 0 0 1px var(--line); }
.play--void{ opacity:.55; }
.play__dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.play__dot--home{ background: var(--red); box-shadow: 0 0 8px -1px rgba(210,32,47,0.7); }
.play__dot--away{ background: var(--gold); box-shadow: 0 0 8px -1px rgba(179,180,179,0.6); }
.play__body{ display:flex; align-items:baseline; gap:8px; min-width:0; flex:1; }
.play__who{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.12em; font-size:10px; font-weight:700; color: var(--fg-mute); flex:0 0 auto; }
.play__what{ font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:15px; color: var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.play--void .play__what{ text-decoration: line-through; }
.play__voided{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-size:11px; font-weight:700; color: var(--fg-faint); flex:0 0 auto; }
.play__undo{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; min-height: 38px;
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; font-size:12px;
  color: var(--fg-soft); padding: 8px 12px; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line-2); transition: color .15s var(--ease-snap), box-shadow .15s var(--ease-snap), background-color .15s var(--ease-snap);
}
.play__undo:hover{ color:#fff; background: rgba(210,32,47,0.18); box-shadow: inset 0 0 0 1px rgba(210,32,47,0.5); }

/* tools row */
.tools{ display:grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s-2); padding: 12px 15px; border-top: 1px solid var(--line); }
.tool{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height: 48px;
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; font-size:13px;
  color: var(--fg-soft); padding: 10px 12px; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line-2); transition: color .15s var(--ease-snap), box-shadow .15s var(--ease-snap), background-color .15s var(--ease-snap);
}
.tool:hover{ color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.tool svg{ flex:0 0 auto; opacity:.85; }
.tool--final{ color: var(--win); box-shadow: inset 0 0 0 1px rgba(74,222,128,0.3); }
.tool--final:hover{ background: rgba(74,222,128,0.08); box-shadow: inset 0 0 0 1px rgba(74,222,128,0.5); }
.tool--ff{ color: var(--gold); box-shadow: inset 0 0 0 1px rgba(179,180,179,0.3); }
.tool--ff:hover{ background: rgba(179,180,179,0.08); }

/* inline editor */
.editor{ padding: 16px 15px; border-top: 1px solid var(--line-2); background: rgba(0,0,0,0.28); display:flex; flex-direction:column; gap: var(--s-3); }
.editor__head{ }
.editor__title{ font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:400; font-size:16px; letter-spacing:0.03em; color: var(--fg); }
.editor__sub{ margin-top:4px; font-family:"Barlow",sans-serif; font-weight:500; font-size:13px; color: var(--fg-mute); }
.editor__scores{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.sinp{ display:flex; flex-direction:column; gap:7px; }
.sinp__field{ width:100%; text-align:center; background: var(--ink-700); color: var(--fg);
  padding: 14px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line-2);
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:28px; }
.sinp__field:focus{ outline:none; box-shadow: inset 0 0 0 1px rgba(255,58,69,0.7), 0 0 0 3px rgba(255,58,69,0.15); }
.editor__pick{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.pickbtn{
  display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; min-height: 64px;
  border-radius: var(--r-md); padding: 12px;
  background: linear-gradient(180deg, var(--ink-700), var(--ink-750)); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: transform .12s var(--ease-snap), box-shadow .15s var(--ease-snap);
}
.pickbtn:hover{ box-shadow: inset 0 0 0 1px rgba(179,180,179,0.45); }
.pickbtn:active{ transform: scale(0.97); }
.pickbtn__t{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-weight:800; font-size:14px; color: var(--gold); }
.pickbtn__s{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; font-size:12px; color: var(--fg-soft); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.editor__resched{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.editor__act{ display:flex; gap: var(--s-3); margin-top: var(--s-2); }
.editor__act .btn{ flex:1; min-height: 50px; }

/* bracket tiebreaker (silver = advancement) */
.tiebreak{
  padding: 16px 15px; border-top: 1px solid var(--line-2);
  background: rgba(179,180,179,0.06);
  display:flex; flex-direction:column; gap: var(--s-3);
}
.tiebreak__head{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.12em; font-weight:700; font-size:13px; color: var(--silver-hi);
}
.tiebreak__head svg{ flex:0 0 auto; }
.tiebreak__sub{ font-family:"Barlow",sans-serif; font-weight:500; font-size:13px; color: var(--fg-mute); line-height:1.45; }
.tiebreak__set{
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:14px;
  letter-spacing:0.02em; color: var(--fg-soft);
  padding: 11px 14px; border-radius: var(--r-sm);
  background: rgba(179,180,179,0.10); box-shadow: inset 0 0 0 1px var(--silver-glow);
}
.tiebreak__set b{ color: var(--silver-hi); }
.tiebreak .pickbtn__t{ color: var(--silver-hi); }
.tiebreak .pickbtn:hover{ box-shadow: inset 0 0 0 1px var(--silver-glow); }

/* ---- admin responsive ---- */
@media (min-width: 760px){
  .setup{ grid-template-columns: repeat(2, 1fr); }
  .setup > .pcard:nth-child(3){ grid-column: 1 / -1; }
  .coinpick{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px){
  .setup{ grid-template-columns: repeat(3, 1fr); }
  .setup > .pcard:nth-child(3){ grid-column: auto; }
  .mathstats{ grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 420px){
  .inrow{ grid-template-columns: 1fr; }
  .editor__scores, .editor__pick, .editor__resched{ grid-template-columns: 1fr; }
  .mathstats{ grid-template-columns: repeat(2, 1fr); }
  .pbrow{ grid-template-columns: 70px 1fr 44px; }
  .scard__board{ padding: 16px 10px; }
  .tools{ grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .ptbtn:active{ transform: none; }
  .pickbtn:active{ transform: none; }
  .tscore__num{ transition: none; }
}

/* =====================================================================
   ELIMINATION BRACKET VIEW , merged from staging/bracket/bracket.css.
   Standalone :root token dupes and .brk-standalone demo base were
   stripped; these rules consume the NGU palette already defined above
   (--red #D2202F, --silver #B3B4B3, the ink/dark tokens). The :root
   blocks that remain below live inside @media queries and only set the
   bracket-specific --brk-col / --brk-row-h / --brk-gap-x knobs.
   ===================================================================== */
/* =====================================================================
   SECTION SCAFFOLD , mirrors the standings section head treatment
   ===================================================================== */
.bracket-wrap{ width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gut); }
.bracket-section{ padding-block: var(--s-7) var(--s-10); }

.bracket-head{
  display:flex; align-items:baseline; gap: var(--s-3);
  margin-bottom: var(--s-5); flex-wrap: wrap;
}
.bracket-head__title{
  font-family:"Anton", "Barlow Condensed", sans-serif; font-weight:400;
  text-transform:uppercase; font-size: clamp(22px, 4.4vw, 32px);
  letter-spacing:0.02em; color: var(--fg); line-height:0.92;
}
.bracket-head__title .accent{ color: var(--red); }
.bracket-head__rule{ flex:1; height:1px; min-width:24px; align-self:center;
  background: linear-gradient(90deg, var(--line-2), transparent); }
.bracket-head__aside{
  font-family:"Barlow Condensed", sans-serif; text-transform:uppercase;
  letter-spacing:0.1em; font-weight:700; font-size:13px; color: var(--fg-mute);
  display:inline-flex; align-items:center; gap:8px;
}
.bracket-head__aside .sq{ width:7px; height:7px; border-radius:2px;
  background: var(--silver); box-shadow:0 0 8px var(--silver-glow); }

/* Legend bar (what the marks mean) */
.bracket-legend{
  display:flex; align-items:center; gap: var(--s-4) var(--s-5); flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: var(--s-5);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  box-shadow: inset 0 0 0 1px var(--line), var(--inset-hi);
}
.bracket-legend__item{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Barlow Condensed", sans-serif; font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:0.08em; color: var(--fg-mute);
}
.bracket-legend__sw{ width:13px; height:13px; border-radius:4px; flex:0 0 auto; }
.bracket-legend__sw--adv{ background: linear-gradient(180deg, var(--silver-hi), var(--silver)); }
.bracket-legend__sw--live{ background: var(--red); box-shadow:0 0 9px rgba(210,32,47,.7); }
.bracket-legend__sw--bye{ background: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line-2); }
.bracket-legend__sw--tb{ background: rgba(179,180,179,0.12); box-shadow: inset 0 0 0 1px var(--silver-glow); }

/* =====================================================================
   MOBILE ROUND SELECTOR (tabs) , hidden on desktop
   A bracket tree does not fit a 390px phone, so phones get a round
   picker that shows one round column at a time.
   ===================================================================== */
.bracket-tabs{ display:none; }                 /* shown only under the mobile breakpoint */
.bracket-tabs__rail{
  display:flex; gap:6px; padding:5px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  box-shadow: inset 0 0 0 1px var(--line), var(--inset-hi);
  overflow-x:auto; -webkit-overflow-scrolling: touch; scrollbar-width:none;
}
.bracket-tabs__rail::-webkit-scrollbar{ display:none; }
.bracket-tab{
  flex:1 0 auto; position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 14px; border:0; border-radius: var(--r-pill);
  background: transparent;                 /* never inherit a UA button fill */
  font-family:"Barlow Condensed", sans-serif; font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:0.08em; color: var(--fg-soft);
  white-space:nowrap; cursor:pointer;
  transition: color .25s var(--ease-snap), background-color .25s var(--ease-snap),
              box-shadow .25s var(--ease-snap);
}
.bracket-tab:hover{ color: var(--fg); background: rgba(255,255,255,0.05); }
.bracket-tab[aria-selected="true"]{
  color: var(--fg);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  box-shadow: inset 0 0 0 1px var(--line-2), 0 4px 12px -6px rgba(0,0,0,.7);
}
.bracket-tab__dot{ width:6px; height:6px; border-radius:50%; background: var(--red);
  box-shadow:0 0 8px rgba(210,32,47,.8); flex:0 0 auto; }
.bracket-tab--final[aria-selected="true"]{
  box-shadow: inset 0 0 0 1px var(--silver-glow), 0 4px 12px -6px rgba(0,0,0,.7);
}
.bracket-tab__seg{ /* meta line under the tab label appears in the live region instead */ }

/* =====================================================================
   THE BRACKET CANVAS
   Desktop: round columns left-to-right; CSS connectors join feeders.
   Mobile: a single round column (tabs control which) , scroll-free.
   Horizontal-scroll fallback also supported via .is-scroll modifier.
   ===================================================================== */
.bracket-canvas{
  --rounds: 3;                       /* set inline by JS via style for the grid */
  position: relative;
}

/* Desktop bracket: each round is a flex column; matches space themselves
   evenly so feeder pairs converge on the next round's match center. */
.bracket-grid{
  display:flex; align-items:stretch; gap: var(--brk-gap-x);
  min-width: max-content;
}
.bracket-round{
  display:flex; flex-direction:column; justify-content:space-around;
  flex:0 0 var(--brk-col); min-width: var(--brk-col);
}
.bracket-round__label{
  position:sticky; top:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom: var(--s-3); padding: 9px 12px;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #15171f, #111219);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 16px -10px rgba(0,0,0,.8);
}
.bracket-round__name{
  font-family:"Barlow Semi Condensed", sans-serif; font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:0.2em; color: var(--fg-soft);
}
.bracket-round__meta{
  font-family:"Barlow Condensed", sans-serif; font-weight:700; font-size:10.5px;
  text-transform:uppercase; letter-spacing:0.12em; color: var(--fg-faint);
}
.bracket-round--final .bracket-round__name{ color: var(--silver-hi); }

/* A single match slot. The connectors are drawn as ::before / ::after
   pseudo-elements that live in the inter-round gutter. */
.bracket-slot{
  position:relative; flex:1 1 auto;
  display:flex; align-items:center;
  padding-block: var(--s-2);
}

/* =====================================================================
   MATCH CARD , double-bezel (tray rim + plate), rhymes with the gcard
   ===================================================================== */
.bmatch{
  position:relative; width:100%;
  border-radius: var(--r-md); padding:4px;       /* tray rim */
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  box-shadow: var(--shadow-panel);
  transition: box-shadow .3s var(--ease-snap), transform .3s var(--ease-snap);
}
.bmatch--live{ box-shadow: var(--shadow-panel), var(--glow-red); }
.bmatch--final{ box-shadow: var(--shadow-panel),
  0 0 0 1px rgba(179,180,179,0.22), 0 0 26px -12px var(--silver-glow); }
.bmatch--bye{ opacity:0.92; }
.bmatch__plate{
  border-radius: calc(var(--r-md) - 4px);
  background: linear-gradient(180deg, var(--ink-750), var(--ink-800));
  box-shadow: var(--inset-hi); overflow:hidden;
}

/* tiny header strip: game number / field + status or kickoff */
.bmatch__top{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding: 7px 11px; min-height: 30px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.18);
}
.bmatch__where{
  display:inline-flex; align-items:center; gap:7px;
  font-family:"Barlow Condensed", sans-serif; font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:0.1em; color: var(--fg-mute);
  min-width:0;
}
.bmatch__fnum{
  display:inline-grid; place-items:center; min-width:20px; height:18px; padding:0 5px;
  border-radius:5px; background: var(--ink-650); color: var(--fg-soft);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size:10.5px; letter-spacing:0.06em;
}
.bmatch__mlabel{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* status chips reused from the broadcast vocabulary */
.bchip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px; border-radius: var(--r-pill);
  font-family:"Barlow Condensed", sans-serif; font-weight:700; font-size:10.5px;
  text-transform:uppercase; letter-spacing:0.12em; white-space:nowrap; flex:0 0 auto;
}
.bchip--live{ color:#ffe2e4;
  background: linear-gradient(180deg, rgba(210,32,47,0.24), rgba(210,32,47,0.10));
  box-shadow: inset 0 0 0 1px rgba(210,32,47,0.5); }
.bchip--final{ color: var(--silver-hi);
  background: rgba(179,180,179,0.10);
  box-shadow: inset 0 0 0 1px var(--silver-glow); }
.bchip--time{ color: var(--silver);
  background: rgba(255,255,255,0.045);
  box-shadow: inset 0 0 0 1px var(--line-2); }
.bchip--time .bchip__clk{ color: var(--silver-hi); font-weight:700; }
.bchip--tbd{ color: var(--fg-faint);
  background: rgba(255,255,255,0.03); box-shadow: inset 0 0 0 1px var(--line); }

/* team rows inside a match */
.bmatch__rows{ display:flex; flex-direction:column; }
.brow{
  display:grid; grid-template-columns: 1fr auto; align-items:center;
  gap: 10px; padding: 0 11px; height: calc(var(--brk-row-h) / 2);
  position:relative;
}
.brow + .brow{ border-top: 1px solid var(--line); }
.bteam{ display:flex; align-items:center; gap:10px; min-width:0; }

/* seed plate , the per-row scan anchor (matches standings seedbox) */
.bseed{
  flex:0 0 auto; width:26px; height:26px; border-radius:7px;
  display:grid; place-items:center;
  font-family:"Barlow Condensed", sans-serif; font-weight:800; font-size:13px;
  background: var(--ink-700); color: var(--fg-mute);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.bseed--empty{ background: rgba(255,255,255,0.02); color: var(--fg-faint);
  box-shadow: inset 0 0 0 1px var(--line); font-weight:700; }

.bteam__name{
  font-family:"Barlow Semi Condensed", sans-serif; font-weight:600; font-size:16px;
  letter-spacing:0.005em; color: var(--fg-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.bteam__name--tbd{ color: var(--fg-faint); font-style: normal; letter-spacing:0.06em;
  font-family:"Barlow Condensed", sans-serif; font-weight:600; text-transform:uppercase; font-size:13px; }
.bteam__name--bye{ color: var(--fg-mute); }

/* the score / advancement numeral, tabular */
.bscore{
  font-family:"Barlow Condensed", sans-serif; font-weight:800;
  font-size: 22px; line-height:1; letter-spacing:0.01em;
  color: var(--fg-mute); font-variant-numeric: tabular-nums lining-nums;
  min-width: 1.4ch; text-align:right; flex:0 0 auto;
}
.bscore--dash{ color: var(--fg-faint); font-weight:700; }
.bscore--live{ color:#fff; text-shadow: 0 0 16px rgba(210,32,47,0.35); }

/* a BYE badge sits where the second team / score would be */
.bbye{
  font-family:"Barlow Condensed", sans-serif; font-weight:800; font-size:11px;
  letter-spacing:0.16em; text-transform:uppercase; color: var(--fg-mute);
  padding:3px 9px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--line-2);
}

/* WINNER row treatment , SILVER advancement, not gold */
.brow--win .bteam__name{ color: var(--fg); font-weight:700; }
.brow--win .bscore{ color: var(--fg); }
.brow--win .bseed{
  background: linear-gradient(180deg, var(--silver-hi), var(--silver));
  color:#15161a;
  box-shadow: 0 0 12px -3px var(--silver-glow), inset 0 0 0 1px rgba(255,255,255,0.25);
}
.brow--win::before{        /* slim engraved silver advancement spine */
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--silver-hi), var(--silver));
  box-shadow: 0 0 10px -1px var(--silver-glow);
}
/* small silver caret marking who advances */
.badv{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; flex:0 0 auto; margin-left:2px;
  color: var(--silver-hi);
}
.brow--loss .bteam__name{ color: var(--fg-faint); }
.brow--loss .bscore{ color: var(--fg-faint); }
.brow--loss .bseed{ color: var(--fg-faint); opacity:0.78; }

/* tiebreaker mark , a small silver TB chip on the decided-by-tiebreak winner */
.btb{
  display:inline-flex; align-items:center; gap:4px;
  font-family:"Barlow Condensed", sans-serif; font-weight:700; font-size:9px;
  letter-spacing:0.1em; text-transform:uppercase; color: var(--silver);
  padding:1px 6px; border-radius: var(--r-pill);
  background: rgba(179,180,179,0.10); box-shadow: inset 0 0 0 1px var(--silver-glow);
  white-space:nowrap; margin-left:7px;
}

/* the match footer , kickoff time when scheduled (broadcast lower line) */
.bmatch__foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding: 6px 11px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.22);
  font-family:"Barlow Condensed", sans-serif; font-weight:700; font-size:10.5px;
  text-transform:uppercase; letter-spacing:0.1em; color: var(--fg-faint);
}
.bmatch__foot .bkick b{ color: var(--silver); font-weight:700; }

/* =====================================================================
   CONNECTORS , drawn in the inter-round gutter with pseudo-elements.
   Each slot emits a short horizontal stub to the right; the next round's
   slot emits the vertical join + its own stub. We use the .has-next /
   slot index data to know whether to draw an elbow up or down.
   ===================================================================== */
.bracket-round:not(.bracket-round--first) .bracket-slot::before{
  /* horizontal lead-in coming from the left gutter into this match */
  content:""; position:absolute; right:100%; top:50%;
  width: calc(var(--brk-gap-x) / 2); height:2px;
  background: var(--line-2);
  transform: translateY(-1px);
}
.bracket-round:not(.bracket-round--last) .bracket-slot::after{
  /* horizontal lead-out from this match into the right gutter */
  content:""; position:absolute; left:100%; top:50%;
  width: calc(var(--brk-gap-x) / 2); height:2px;
  background: var(--line-2);
  transform: translateY(-1px);
}
/* the vertical bus that joins a feeder pair , one per upper slot of a pair,
   sized in JS via --join (px) and offset toward the lower sibling */
.bracket-slot.is-pair-top::after{
  /* extend the lead-out down to meet its sibling, forming the bracket elbow */
  height: calc(var(--join, 0px) + 2px);
  top:50%;
  background:
    /* horizontal segment */
    linear-gradient(var(--line-2), var(--line-2)) left top / calc(var(--brk-gap-x)/2) 2px no-repeat,
    /* vertical segment down the right edge of the half-gutter */
    linear-gradient(var(--line-2), var(--line-2)) calc(var(--brk-gap-x)/2 - 2px) top / 2px 100% no-repeat;
  transform:none;
}
.bracket-slot.is-pair-bottom::after{
  height: calc(var(--join, 0px) + 2px);
  bottom:50%; top:auto;
  background:
    linear-gradient(var(--line-2), var(--line-2)) left bottom / calc(var(--brk-gap-x)/2) 2px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) calc(var(--brk-gap-x)/2 - 2px) bottom / 2px 100% no-repeat;
  transform:none;
}
/* light up the connector when the upstream match is decided (silver advance) */
.bracket-slot.is-advanced::after{
  background-image:
    linear-gradient(var(--silver), var(--silver)),
    linear-gradient(var(--silver), var(--silver));
  box-shadow: 0 0 8px -2px var(--silver-glow);
}
.bracket-slot.is-pair-top.is-advanced::after,
.bracket-slot.is-pair-bottom.is-advanced::after{ box-shadow:none; }

/* =====================================================================
   CHAMPION , the prize. Silver + red trophy treatment.
   ===================================================================== */
.bracket-round--champ{
  flex:0 0 calc(var(--brk-col) - 8px); min-width: calc(var(--brk-col) - 8px);
  justify-content:center;
}
.champ{
  position:relative;
  border-radius: var(--r-lg); padding:5px;
  background:
    linear-gradient(180deg, rgba(179,180,179,0.30), rgba(179,180,179,0.06));
  box-shadow:
    0 0 0 1px rgba(179,180,179,0.20),
    0 0 40px -10px var(--silver-glow),
    var(--shadow-lift);
}
.champ__plate{
  position:relative; overflow:hidden;
  border-radius: calc(var(--r-lg) - 5px);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(210,32,47,0.18), transparent 60%),
    linear-gradient(180deg, var(--ink-750), var(--ink-850));
  box-shadow: var(--inset-hi);
  padding: var(--s-5) var(--s-4) var(--s-4);
  text-align:center;
}
.champ__plate::before{   /* faint engraved silver sheen sweep */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, transparent 38%, rgba(231,232,230,0.08) 47%, transparent 56%);
}
.champ__eyebrow{
  font-family:"Barlow Semi Condensed", sans-serif; font-weight:700; font-size:10px;
  text-transform:uppercase; letter-spacing:0.32em; color: var(--silver);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.champ__eyebrow .sq{ width:6px;height:6px;border-radius:50%;
  background: var(--silver-hi); box-shadow:0 0 8px var(--silver-glow); }
.champ__trophy{
  width:52px; height:52px; margin: var(--s-3) auto var(--s-3);
  display:grid; place-items:center; border-radius:14px;
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(231,232,230,0.18), rgba(124,126,124,0.05));
  box-shadow: inset 0 0 0 1px var(--silver-glow), 0 8px 22px -12px var(--silver-glow);
}
.champ__trophy svg{ filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4)); }
.champ__seed{
  display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 7px;
  border-radius:7px; margin-bottom: var(--s-2);
  font-family:"Barlow Condensed", sans-serif; font-weight:800; font-size:13px;
  background: linear-gradient(180deg, var(--silver-hi), var(--silver)); color:#15161a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 0 12px -3px var(--silver-glow);
}
.champ__name{
  font-family:"Anton","Barlow Condensed", sans-serif; font-weight:400;
  text-transform:uppercase; line-height:0.94; letter-spacing:0.01em;
  font-size: clamp(22px, 3vw, 30px); color: var(--fg);
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
  word-break: break-word;
}
.champ__sub{
  margin-top: var(--s-2);
  font-family:"Barlow Condensed", sans-serif; font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:0.14em; color: var(--silver);
}
.champ__pending .champ__name{ color: var(--fg-mute); }
.champ__pending .champ__seed{
  background: var(--ink-700); color: var(--fg-mute);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.champ__pending .champ__trophy{
  box-shadow: inset 0 0 0 1px var(--line-2);
  background: radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
}
.champ__pending .champ__trophy svg{ opacity:0.55; }

/* live pulse dot , the single reused broadcast bug */
.bpulse{ position:relative; width:8px; height:8px; flex:0 0 auto; }
.bpulse i{ position:absolute; inset:0; border-radius:50%;
  background: var(--red-hot); box-shadow:0 0 9px 1px rgba(255,58,69,0.9); }
.bpulse i::after{ content:""; position:absolute; inset:0; border-radius:50%;
  background: var(--red-hot); animation: brk-ping 1.8s var(--ease-stage) infinite; }
@keyframes brk-ping{
  0%{ transform:scale(1); opacity:.75; }
  70%{ transform:scale(3); opacity:0; }
  100%{ transform:scale(3); opacity:0; }
}

/* =====================================================================
   ENTRANCE MOTION , GPU-safe (transform + opacity + filter)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  .brk-reveal{ opacity:0; transform: translate3d(0,16px,0); filter: blur(5px);
    transition: opacity .7s var(--ease-stage), transform .8s var(--ease-stage), filter .7s var(--ease-stage); }
  .brk-reveal.in{ opacity:1; transform:none; filter:none; }
}

/* =====================================================================
   THE HORIZONTAL-SCROLL HOST , desktop tree lives in here so very wide
   draws (16-team) can scroll on mid screens without breaking layout.
   Sticky round labels are achieved by keeping labels in normal flow.
   ===================================================================== */
.bracket-scroller{
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s-3);
  scrollbar-color: var(--ink-650) transparent;
}
.bracket-scroller::-webkit-scrollbar{ height:10px; }
.bracket-scroller::-webkit-scrollbar-thumb{ background: var(--ink-650); border-radius:99px;
  border:3px solid transparent; background-clip: padding-box; }
.bracket-scroller::-webkit-scrollbar-track{ background: transparent; }

/* a subtle "scroll for more" affordance fades at the right edge on desktop */
.bracket-canvas{ position:relative; }

/* =====================================================================
   RESPONSIVE
   Breakpoint logic:
   - >= 980px : full left-to-right tree, all rounds visible, connectors.
   - 760-979  : tree still shown, but inside a horizontal scroller.
   - < 760px  : MOBILE , round tabs; one round column at a time, connectors
                hidden, cards go full width and taller for thumbs.
   ===================================================================== */

/* Tablet: keep the tree but let it scroll horizontally. */
@media (max-width: 979px){
  :root{ --brk-col: 264px; --brk-gap-x: 36px; }
}

/* MOBILE round-selector mode */
@media (max-width: 759px){
  :root{ --brk-row-h: 92px; }

  .bracket-tabs{ display:block; margin-bottom: var(--s-5); }

  /* kill the horizontal scroller + connectors; stack the active round */
  .bracket-scroller{ overflow:visible; padding-bottom:0; }
  .bracket-grid{ display:block; min-width:0; }
  .bracket-round{ flex:none; min-width:0; width:100%;
    display:none;                        /* only the active round shows */
  }
  .bracket-round.is-active{ display:flex; }
  .bracket-round__label{ position:static; }       /* it scrolls with the page on mobile */

  /* connectors off , a tree elbow is meaningless in single-column mode */
  .bracket-slot::before, .bracket-slot::after{ display:none !important; }
  .bracket-slot{ padding-block: 0; }
  .bracket-slot + .bracket-slot{ margin-top: var(--s-3); }

  /* bigger, thumb-friendly match cards */
  .bteam__name{ font-size:17px; }
  .bscore{ font-size:24px; }
  .brow{ height: calc(var(--brk-row-h) / 2); }
  .bmatch__top{ min-height:34px; padding:8px 12px; }

  /* champion becomes a full-width banner under the Final tab */
  .bracket-round--champ{ width:100%; min-width:0; }
  .champ{ max-width: 460px; margin-inline:auto; }
}

@media (max-width: 380px){
  .bteam__name{ font-size:16px; max-width: 46vw; }
  .bseed{ width:24px; height:24px; font-size:12.5px; }
  .bscore{ font-size:22px; }
  .champ__name{ font-size: clamp(20px, 7vw, 26px); }
}

/* Wide venue display: a touch more air + bigger numerals */
@media (min-width: 1280px){
  :root{ --brk-col: 300px; }
  .bteam__name{ font-size:17px; }
  .bscore{ font-size:23px; }
}

/* Reduced-motion: drop the pulse ring animation entirely */
@media (prefers-reduced-motion: reduce){
  .bpulse i::after{ animation:none; opacity:0; }
}

/* Focus visibility (sideline accessibility) */
.bracket-tab:focus-visible,
.bmatch a:focus-visible{ outline:2px solid var(--red-hot); outline-offset:3px; border-radius: var(--r-xs); }

/* =====================================================================
   FIELD LIVE SCOREBOARD , kiosk route (#/board and #/board/:field)
   Merged from staging/scoreboard/scoreboard.css. The host already owns the
   base tokens (incl --silver) + the .stage backdrop + reset, so the
   duplicate :root block and the .sb-standalone shell were dropped on copy.
   Below: the kiosk chrome toggling + on-brand field picker, then the board
   rules verbatim. NGU palette: red #D2202F, silver #B3B4B3, ink/black.
   ===================================================================== */

/* KIOSK MODE , a body/stage class added on the board route, removed on leave.
   It hides the broadcast topbar + footer and lets the board fill the viewport
   edge to edge. Every other route (standings/schedule/bracket/admin) is
   untouched because the class is only present on a board route. */
.stage.kiosk > .topbar,
.stage.kiosk > .footer{ display: none; }
.stage.kiosk > #main{ flex: 1 1 auto; min-height: 100dvh; }
.stage.kiosk #view{ min-height: 100dvh; }
/* the board host fills the stage; the .sb-board inside is already 100dvh */
.sb-host{ position: relative; width: 100%; min-height: 100dvh; }

/* small, unobtrusive EXIT affordance so a non-kiosk viewer is not trapped.
   Corner-pinned, quiet until hover/focus. */
.sb-exit{
  position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--r-pill);
  font-family:"Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px;
  color: var(--fg-mute);
  background: rgba(11,12,16,0.55);
  box-shadow: inset 0 0 0 1px var(--line-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0.5;
  transition: opacity .25s var(--ease-snap), color .25s var(--ease-snap), box-shadow .25s var(--ease-snap);
}
.sb-exit:hover, .sb-exit:focus-visible{ opacity: 1; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-panel); }
.sb-exit svg{ flex: 0 0 auto; opacity: .85; }

/* =====================================================================
   FIELD PICKER , #/board with no field. On-brand grid of field buttons.
   ===================================================================== */
.sb-pick{
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-6);
  padding: clamp(24px, 6vw, 64px) var(--gut);
  text-align: center;
}
.sb-pick__head{ display: flex; flex-direction: column; align-items: center; gap: var(--s-3); max-width: 60ch; }
.sb-pick__eyebrow{
  display: inline-flex; align-items: center; gap: 9px;
  font-family:"Barlow Semi Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.28em; font-weight: 700; font-size: 11px; color: var(--red);
}
.sb-pick__eyebrow .sq{ width:7px; height:7px; border-radius:2px; background: var(--red); box-shadow: 0 0 8px rgba(210,32,47,.8); }
.sb-pick__title{
  font-family:"Anton", sans-serif; text-transform: uppercase; font-weight: 400;
  font-size: clamp(30px, 7vw, 64px); line-height: 0.9; letter-spacing: 0.01em; color: var(--fg);
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
.sb-pick__sub{
  font-family:"Barlow", sans-serif; font-weight: 500; font-size: clamp(14px, 2.4vw, 17px);
  color: var(--fg-mute); max-width: 52ch; line-height: 1.5;
}
.sb-pick__grid{
  display: grid; gap: clamp(12px, 2vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 30vw, 200px), 1fr));
  width: 100%; max-width: 720px;
}
.sb-pick__btn{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: clamp(20px, 3.4vh, 34px) clamp(16px, 2vw, 24px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-750), var(--ink-800));
  box-shadow: var(--shadow-panel), var(--inset-hi);
  transition: transform .2s var(--ease-snap), box-shadow .2s var(--ease-snap), background-color .2s var(--ease-snap);
}
.sb-pick__btn:hover, .sb-pick__btn:focus-visible{
  transform: translateY(-2px);
  background: linear-gradient(180deg, var(--ink-700), var(--ink-750));
  box-shadow: var(--shadow-lift), var(--glow-red);
}
.sb-pick__lab{
  font-family:"Barlow Semi Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.28em; font-weight: 700; font-size: 11px; color: var(--fg-mute);
}
.sb-pick__num{
  font-family:"Anton", "Barlow Condensed", sans-serif; font-weight: 400;
  font-size: clamp(40px, 8vh, 76px); line-height: 0.82; letter-spacing: 0.01em; color: var(--fg);
  font-variant-numeric: tabular-nums lining-nums; text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
.sb-pick__back{
  font-family:"Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 700; font-size: 13px; color: var(--fg-mute);
  padding: 10px 16px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: color .25s var(--ease-snap), box-shadow .25s var(--ease-snap);
}
.sb-pick__back:hover, .sb-pick__back:focus-visible{ color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-panel); }

/* =====================================================================
   THE BOARD , a single full-screen panel.
   The whole thing is one double-bezel plate so it reads like a physical
   piece of broadcast hardware sitting on the table. It fills the viewport
   with intentional gutters and lays out as a vertical stack:
     top rail  ->  status  ->  GIANT SCORE (flex-1)  ->  secondary strip.
   ===================================================================== */
.sb-board{
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, 22px);
  padding:
    clamp(16px, 3.2vh, 40px)
    clamp(18px, 3.4vw, 52px)
    clamp(14px, 2.8vh, 34px);
  /* the bezel: a hairline rim + inset top highlight on the ink floor */
  box-shadow:
    inset 0 0 0 1px var(--line),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -40px 120px -60px rgba(0,0,0,0.7);
  overflow: hidden;
}
/* a quiet red rake along the top edge when a game is live , the on-air bug */
.sb-board::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background: linear-gradient(90deg, transparent, var(--red) 30%, var(--red-hot) 50%, var(--red) 70%, transparent);
  opacity: 0; transition: opacity .5s var(--ease-stage);
}
.sb-board--live::before{ opacity: 0.9; }

/* ---- TOP RAIL , field tag (left) + tournament identity (right) -------- */
.sb-top{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  flex: 0 0 auto; min-width: 0;
}

/* FIELD N , a machined plate, the orienting anchor */
.sb-field{
  display: inline-flex; align-items: baseline; gap: clamp(8px, 1vw, 14px);
  padding: clamp(8px, 1.4vh, 14px) clamp(14px, 1.6vw, 22px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-750), var(--ink-800));
  box-shadow: var(--shadow-panel), var(--inset-hi);
}
.sb-field__lab{
  font-family:"Barlow Semi Condensed", sans-serif;
  text-transform: uppercase; letter-spacing: 0.3em; font-weight: 700;
  font-size: clamp(11px, 1.5vh, 17px); color: var(--fg-mute);
}
.sb-field__num{
  font-family:"Anton", "Barlow Condensed", sans-serif; font-weight: 400;
  font-size: clamp(30px, 5.2vh, 64px); line-height: 0.82; letter-spacing: 0.01em;
  color: var(--fg);
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}

/* tournament identity , small, top-right */
.sb-ident{
  display: inline-flex; align-items: center; gap: clamp(8px, 1vw, 13px);
  min-width: 0;
}
.sb-ident__mark{
  position: relative; flex: 0 0 auto;
  width: clamp(34px, 4.4vh, 52px); height: clamp(34px, 4.4vh, 52px);
  border-radius: clamp(9px, 1.2vh, 13px);
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, #1a1d27, #0c0d12);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--inset-hi);
}
.sb-ident__fox{ width: 76%; height: 76%; object-fit: contain; }
.sb-ident__txt{ display: flex; flex-direction: column; line-height: 1.05; min-width: 0; text-align: right; }
.sb-ident__name{
  font-family:"Anton", sans-serif; text-transform: uppercase; font-weight: 400;
  font-size: clamp(13px, 1.9vh, 21px); letter-spacing: 0.02em; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw;
}
.sb-ident__sub{
  font-family:"Barlow Semi Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.28em; font-weight: 700; font-size: clamp(8px, 1.1vh, 11px);
  color: var(--red); margin-top: 3px;
}

/* ---- STATUS ROW , the big state line (LIVE / FINAL / UP NEXT) --------- */
.sb-statusrow{
  display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.4vw, 18px);
  flex: 0 0 auto; min-width: 0; flex-wrap: wrap;
}
.sb-status{
  display: inline-flex; align-items: center; gap: clamp(8px, 1vw, 14px);
  padding: clamp(7px, 1.2vh, 13px) clamp(16px, 1.9vw, 26px);
  border-radius: var(--r-pill);
  font-family:"Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: clamp(15px, 2.4vh, 30px);
  color: var(--fg-soft);
  background: rgba(255,255,255,0.045);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.sb-status__clk{
  font-family:"Barlow Condensed", sans-serif; font-weight: 800;
  letter-spacing: 0.04em; color: var(--silver-hi);
  font-variant-numeric: tabular-nums lining-nums;
}
.sb-status__clk.is-hidden{ display: none; }

.sb-status--live{
  color: #ffe2e4;
  background: linear-gradient(180deg, rgba(210,32,47,0.26), rgba(210,32,47,0.12));
  box-shadow: inset 0 0 0 1px rgba(210,32,47,0.55), var(--glow-red);
  letter-spacing: 0.22em;
}
.sb-status--final{
  color: var(--silver-hi);
  background: linear-gradient(180deg, rgba(179,180,179,0.18), rgba(179,180,179,0.06));
  box-shadow: inset 0 0 0 1px rgba(179,180,179,0.4);
}
.sb-status--next{ color: var(--fg-soft); }
.sb-status--next .sb-status__clk{ color: var(--silver-hi); }
.sb-status--idle{ color: var(--fg-mute); }

.sb-roundmeta{
  font-family:"Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: clamp(11px, 1.6vh, 18px); color: var(--fg-mute);
}
.sb-roundmeta.is-hidden{ display: none; }

/* ---- THE SCORE , the dominant element. Two team panels + center rule. --
   A 3-column grid: home | VS | away. The numerals are sized off viewport
   HEIGHT (vh) so they fill a landscape iPad and stay giant; clamped so they
   never overflow on a phone. tabular-nums keeps columns rock-steady. */
.sb-score{
  flex: 1 1 auto;
  display: grid;
  /* minmax(0,1fr) lets the team columns shrink below the giant numeral's
     min-content, so the board can never be forced wider than the viewport. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 2vw, 36px);
  min-height: 0; min-width: 0;
}

.sb-team{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.8vh, 12px);
  min-width: 0; max-width: 100%; height: 100%; overflow: hidden;
  padding: clamp(8px, 1.4vh, 18px) clamp(6px, 1vw, 16px);
  border-radius: var(--r-xl);
  text-align: center;
  transition: box-shadow .45s var(--ease-stage), background-color .45s var(--ease-stage);
}
/* leader panel gets a quiet machined plate + silver rim so the eye lands on
   the team that is ahead, without shouting. Trailing recedes. */
.sb-team.is-leader{
  background: linear-gradient(180deg, rgba(179,180,179,0.07), rgba(179,180,179,0.015));
  box-shadow: inset 0 0 0 1px rgba(179,180,179,0.22), var(--inset-hi);
}
.sb-team.is-trailing{ opacity: 0.82; }

/* team head: seed plate + crest initials */
.sb-team__head{
  display: inline-flex; align-items: center; gap: clamp(6px, 0.8vw, 12px);
  min-height: clamp(22px, 3.2vh, 40px);
}
.sb-team__seed{
  display: inline-flex; align-items: baseline; gap: 1px;
  padding: clamp(3px, 0.5vh, 6px) clamp(7px, 0.8vw, 11px);
  border-radius: var(--r-sm);
  background: var(--ink-700);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-family:"Barlow Condensed", sans-serif; font-weight: 800;
  color: var(--fg-soft); line-height: 1;
}
.sb-team__seed.is-hidden{ display: none; }
.sb-team__seedhash{ font-size: clamp(10px, 1.3vh, 15px); color: var(--fg-mute); }
.sb-team__seednum{ font-size: clamp(14px, 2vh, 24px); font-variant-numeric: tabular-nums; }
.sb-team.is-leader .sb-team__seed{
  background: linear-gradient(180deg, var(--silver-hi), var(--silver));
  box-shadow: 0 0 14px -4px var(--silver-glow), inset 0 0 0 1px rgba(255,255,255,0.2);
}
.sb-team.is-leader .sb-team__seedhash,
.sb-team.is-leader .sb-team__seednum{ color: #14151a; }

.sb-team__crest{
  display: inline-grid; place-items: center;
  min-width: clamp(24px, 3.2vh, 40px); height: clamp(24px, 3.2vh, 40px);
  padding: 0 clamp(4px, 0.5vw, 8px); border-radius: var(--r-sm);
  background: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line);
  font-family:"Anton", sans-serif; letter-spacing: 0.04em;
  font-size: clamp(12px, 1.6vh, 19px); color: var(--fg-soft);
}
.sb-team__crest.is-hidden{ display: none; }

.sb-team__name{
  font-family:"Anton", "Barlow Condensed", sans-serif; font-weight: 400;
  text-transform: uppercase; line-height: 0.94; letter-spacing: 0.01em;
  /* big enough to read across a table; clamp keeps long names on the screen */
  font-size: clamp(22px, 4.6vh, 64px);
  color: var(--fg);
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
  max-width: 100%;
  /* allow up to 2 lines for long school names, then ellipsis */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere; word-break: break-word;
}
.sb-team.is-trailing .sb-team__name{ color: var(--fg-soft); }
.sb-team.is-leader .sb-team__name{ color: var(--silver-hi); }

.sb-team__meta{ min-height: clamp(14px, 2vh, 22px); }
.sb-team__meta.is-hidden{ visibility: hidden; }
.sb-team__rec{
  font-family:"Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: clamp(12px, 1.7vh, 20px); color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}

/* THE NUMERAL , the dominant visual element of the entire screen */
.sb-team__score{
  font-family:"Anton", "Barlow Condensed", sans-serif; font-weight: 400;
  /* sized off height so it dominates a landscape iPad; bounded so a phone
     or a 3-digit blowout still fits. min-width holds the column steady. */
  font-size: clamp(96px, 30vh, 340px);
  line-height: 0.84; letter-spacing: 0.005em;
  color: var(--fg-soft);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  min-width: 1.4ch; text-align: center;
  text-shadow: 0 4px 0 rgba(0,0,0,0.45), 0 14px 40px -18px rgba(0,0,0,0.8);
  transition: color .4s var(--ease-stage), text-shadow .4s var(--ease-stage);
}
.sb-team.is-live .sb-team__score{
  color: #ffffff;
  text-shadow: 0 4px 0 rgba(0,0,0,0.45), 0 0 44px rgba(210,32,47,0.32), 0 14px 40px -18px rgba(0,0,0,0.85);
}
.sb-team.is-leader .sb-team__score{ color: #ffffff; }
.sb-team.is-trailing .sb-team__score{ color: var(--fg-mute); }
.sb-team.is-winner .sb-team__score{
  color: var(--silver-hi);
  text-shadow: 0 4px 0 rgba(0,0,0,0.45), 0 0 40px var(--silver-glow), 0 14px 40px -18px rgba(0,0,0,0.85);
}

/* CENTER , VS / TIE separator with a vertical broadcast hairline */
.sb-vs{
  position: relative;
  display: grid; place-items: center;
  align-self: stretch; min-width: clamp(40px, 6vw, 96px);
}
.sb-vs::before, .sb-vs::after{
  content:""; position: absolute; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent);
}
.sb-vs::before{ top: 6%; height: 30%; }
.sb-vs::after{ bottom: 6%; height: 30%; }
.sb-vs__txt{
  font-family:"Anton", sans-serif; text-transform: uppercase; font-weight: 400;
  font-size: clamp(18px, 3vh, 40px); letter-spacing: 0.04em;
  color: var(--fg-faint);
  padding: clamp(4px, 0.8vh, 10px) 0;
  background: var(--ink-900);
  position: relative; z-index: 1;
}
.sb-vs__txt--tie{ color: var(--red); }

/* ---- SECONDARY STRIP , this field's other games today ----------------- */
.sb-strip{
  flex: 0 0 auto;
  display: flex; align-items: center; gap: clamp(10px, 1.4vw, 20px);
  padding-top: clamp(8px, 1.4vh, 16px);
  border-top: 1px solid var(--line);
  min-height: 0; min-width: 0;
}
.sb-strip.is-hidden{ display: none; }
.sb-strip__lab{
  flex: 0 0 auto;
  font-family:"Barlow Semi Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.24em; font-weight: 700; font-size: clamp(9px, 1.2vh, 13px);
  color: var(--fg-faint); max-width: 8ch; line-height: 1.15;
}
.sb-strip__list{
  flex: 1 1 auto;
  display: flex; gap: clamp(8px, 1vw, 16px);
  overflow: hidden;
}
.sb-mini{
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: clamp(2px, 0.4vh, 5px);
  padding: clamp(7px, 1vh, 12px) clamp(10px, 1vw, 16px);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  box-shadow: inset 0 0 0 1px var(--line), var(--inset-hi);
}
.sb-mini--live{ box-shadow: inset 0 0 0 1px rgba(210,32,47,0.45), var(--inset-hi); }
.sb-mini__when{
  display: inline-flex; align-items: center; gap: 6px;
  font-family:"Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: clamp(10px, 1.3vh, 14px); color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}
.sb-mini--live .sb-mini__when{ color: #ffd9db; }
.sb-mini--final .sb-mini__when{ color: var(--silver); }
.sb-mini__match{
  display: flex; align-items: baseline; gap: clamp(4px, 0.6vw, 9px);
  min-width: 0;
}
.sb-mini__t{
  font-family:"Barlow Semi Condensed", sans-serif; font-weight: 600;
  font-size: clamp(12px, 1.6vh, 19px); color: var(--fg-soft);
  letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 0; min-width: 0;
}
.sb-mini__t--win{ color: var(--fg); font-weight: 700; }
.sb-mini__sc{
  font-family:"Barlow Condensed", sans-serif; font-weight: 800;
  font-size: clamp(14px, 1.9vh, 22px); color: var(--fg);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.sb-mini__dash, .sb-mini__vs{
  flex: 0 0 auto; color: var(--fg-faint); font-weight: 700;
  font-family:"Barlow Condensed", sans-serif; font-size: clamp(11px, 1.4vh, 16px);
}
.sb-mini__vs{ text-transform: uppercase; letter-spacing: 0.1em; padding: 0 2px; }

/* =====================================================================
   LIVE PULSE , single CSS keyframe ring on a red dot. transform+opacity
   only (GPU-safe). Reused for the LIVE status chip and live mini cards.
   ===================================================================== */
.sb-pulse{ position: relative; flex: 0 0 auto;
  width: clamp(9px, 1.3vh, 15px); height: clamp(9px, 1.3vh, 15px); }
.sb-pulse i{
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--red-hot);
  box-shadow: 0 0 12px 1px rgba(255,58,69,0.9);
}
.sb-pulse i::after{
  content:""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--red-hot);
  animation: sb-ping 1.8s var(--ease-stage) infinite;
}
.sb-pulse.is-hidden{ display: none; }
@keyframes sb-ping{
  0%   { transform: scale(1);   opacity: .75; }
  70%  { transform: scale(3.0); opacity: 0; }
  100% { transform: scale(3.0); opacity: 0; }
}

/* the whole LIVE status chip gives a slow confident breath (not a blink) */
@media (prefers-reduced-motion: no-preference){
  .sb-status--live{ animation: sb-breath 2.6s var(--ease-stage) infinite; }
}
@keyframes sb-breath{
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(210,32,47,0.55),
              0 0 0 1px rgba(210,32,47,0.45), 0 0 18px -4px rgba(255,58,69,0.45); }
  50%      { box-shadow: inset 0 0 0 1px rgba(210,32,47,0.7),
              0 0 0 1px rgba(210,32,47,0.6), 0 0 34px -2px rgba(255,58,69,0.7); }
}

/* =====================================================================
   EMPTY / STANDBY STATE
   ===================================================================== */
.sb-board--empty .sb-team__name{ color: var(--fg-mute); }
.sb-board--empty .sb-team__score{ color: var(--fg-faint); }

/* =====================================================================
   REDUCED MOTION , kill the pulse + breath entirely (sideline accessibility)
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .sb-pulse i::after{ animation: none; opacity: 0; }
  .sb-status--live{ animation: none; }
  .sb-board::before, .sb-team, .sb-team__score{ transition: none; }
}

/* =====================================================================
   RESPONSIVE
   The board is height-driven (vh on the numerals), so it adapts to any
   landscape iPad without breakpoints. These rules tune the edge cases:
   short-and-wide, portrait, and phone.
   ===================================================================== */

/* PORTRAIT (iPad portrait 768x1024, or a phone held upright):
   stack the two teams vertically with a center band, so each numeral still
   gets to be huge using viewport WIDTH instead of fighting for it side by side. */
@media (orientation: portrait){
  .sb-score{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
    gap: clamp(6px, 1.2vh, 18px);
  }
  .sb-team{ flex-direction: row; justify-content: space-between;
    gap: clamp(10px, 3vw, 28px); padding: clamp(8px, 1.6vh, 20px) clamp(12px, 4vw, 30px);
    text-align: left; }
  /* in a row, the name block sits left, the numeral right */
  .sb-team__head{ order: 0; }
  .sb-team__name{
    order: 1; flex: 1 1 auto; text-align: left;
    font-size: clamp(24px, 7vw, 60px); -webkit-line-clamp: 2;
  }
  .sb-team__meta{ order: 2; display: none; }     /* record hidden in portrait rows to save width */
  .sb-team__meta{ order: 2; }
  .sb-team__score{
    order: 3; flex: 0 0 auto;
    /* bound by BOTH height and width so a 2-digit numeral + the name column
       always fit the portrait width (no horizontal overhang). */
    font-size: clamp(72px, min(19vh, 20vw), 168px);
    text-align: right;
    /* hard cap the numeral box so it can never push past the panel; the grid
       column below is sized to this, the name column takes the rest. */
    max-width: 32vw; min-width: 0;
  }
  /* regroup: head + name on the left as a column (it shrinks), numeral on the
     right in a bounded track so it never pushes past the panel. */
  .sb-team{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32vw);
    grid-template-rows: auto auto auto; align-items: center;
    column-gap: clamp(10px, 3vw, 26px); overflow: hidden; }
  .sb-team__head{ grid-column: 1; grid-row: 1; justify-content: flex-start; min-width: 0; }
  .sb-team__name{ grid-column: 1; grid-row: 2; min-width: 0; }
  .sb-team__meta{ grid-column: 1; grid-row: 3; min-width: 0; }
  .sb-team__rec{ font-size: clamp(11px, 1.5vh, 16px); }
  .sb-team__score{ grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: end; }

  .sb-vs{ align-self: center; min-height: clamp(28px, 5vh, 56px); flex-direction: row; }
  .sb-vs::before, .sb-vs::after{ left: auto; top: 50%; width: 24%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
  .sb-vs::before{ left: 8%; }
  .sb-vs::after{ right: 8%; left: auto; }
}

/* PHONE (narrow, either orientation): the score must still dominate. Keep
   the giant numerals; shrink chrome and drop the strip to 2 items via flex. */
@media (max-width: 480px){
  .sb-board{ gap: clamp(6px, 1.2vh, 12px); padding: 14px 14px 12px; }
  .sb-ident__txt{ display: none; }                 /* keep just the foxhead mark */
  .sb-ident__mark{ width: 34px; height: 34px; }
  .sb-field{ padding: 7px 12px; }
  .sb-status{ font-size: clamp(14px, 4.6vw, 22px); }
  .sb-strip__lab{ display: none; }                 /* the mini cards are self-evident */
  .sb-strip__list > .sb-mini:nth-child(n+3){ display: none; } /* show at most 2 on a phone */
}
/* portrait phone: lean on width for the numeral */
@media (max-width: 480px) and (orientation: portrait){
  .sb-team__score{ font-size: clamp(72px, 26vw, 150px); }
  .sb-team__name{ font-size: clamp(22px, 8vw, 40px); }
}
/* landscape phone (wide + very short): protect vertical room */
@media (max-height: 460px){
  .sb-board{ gap: 6px; padding: 10px 16px 8px; }
  .sb-team__score{ font-size: clamp(64px, 34vh, 190px); }
  .sb-team__name{ font-size: clamp(18px, 5.4vh, 40px); -webkit-line-clamp: 1; }
  .sb-strip{ display: none; }                      /* no room; the big score is the point */
  .sb-statusrow{ gap: 10px; }
}

/* SHORT + WIDE landscape iPad (1024x768): numerals are tall already; just
   make sure the strip stays compact and the names do not crowd the digits. */
@media (min-width: 760px) and (max-height: 820px) and (orientation: landscape){
  .sb-board{ gap: clamp(6px, 1.2vh, 14px); }
  .sb-team__name{ -webkit-line-clamp: 2; }
}

/* LARGE landscape (1366x1024 and bigger TVs): give the score even more room
   and a touch more air up top. */
@media (min-width: 1280px) and (min-height: 900px){
  .sb-team__score{ font-size: clamp(160px, 34vh, 360px); }
  .sb-team__name{ font-size: clamp(34px, 5vh, 72px); }
}

/* =====================================================================
   ADMIN -> SCOREBOARD links
   On the field scoring screen: a callout card linking to that field's kiosk
   board (for the scorer's table iPad). On super scoring: a compact chip row,
   one board link per field. CSP-safe anchors only (no inline handlers).
   ===================================================================== */
.boardlink{
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-5);
  padding: clamp(14px, 2.4vw, 20px) clamp(16px, 2.6vw, 22px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  box-shadow: var(--inset-hi), var(--shadow-panel);
}
.boardlink__ic{
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, var(--ink-700), var(--ink-850));
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--silver);
}
.boardlink__body{ flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.boardlink__title{
  font-family:"Barlow Semi Condensed", sans-serif; font-weight: 700;
  font-size: 16px; letter-spacing: 0.01em; color: var(--fg);
}
.boardlink__hint{
  font-family:"Barlow", sans-serif; font-weight: 500; font-size: 13.5px;
  color: var(--fg-mute); line-height: 1.45; max-width: 56ch;
}
.boardlink__path{ display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.boardlink__pathlab{
  font-family:"Barlow Semi Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.18em; font-weight: 700; font-size: 10px; color: var(--fg-faint);
}
.boardlink__pathval{
  font-family:"Barlow Condensed", monospace, monospace; font-weight: 700; font-size: 13px;
  letter-spacing: 0.02em; color: var(--silver-hi);
  padding: 3px 9px; border-radius: var(--r-sm);
  background: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line-2);
}
.boardlink__btn{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 9px;
  font-family:"Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700; font-size: 14px; color: var(--fg);
  padding: 12px 18px; border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(210,32,47,0.20), rgba(210,32,47,0.08));
  box-shadow: inset 0 0 0 1px rgba(210,32,47,0.5);
  transition: transform .2s var(--ease-snap), box-shadow .2s var(--ease-snap), background-color .2s var(--ease-snap);
}
.boardlink__btn:hover, .boardlink__btn:focus-visible{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(210,32,47,0.30), rgba(210,32,47,0.12));
  box-shadow: inset 0 0 0 1px rgba(210,32,47,0.7), var(--glow-red);
}
.boardlink__btn svg{ flex: 0 0 auto; opacity: .9; }

/* super: compact per-field board chip row */
.boardlinks{
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.boardlinks__lab{
  font-family:"Barlow Semi Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.2em; font-weight: 700; font-size: 10px; color: var(--fg-mute);
  flex: 0 0 auto;
}
.boardlinks__list{ display: flex; gap: 8px; flex-wrap: wrap; }
.boardlinks__chip{
  display: inline-flex; align-items: center; gap: 8px;
  font-family:"Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700; font-size: 13px; color: var(--fg-soft);
  padding: 8px 13px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: color .2s var(--ease-snap), box-shadow .2s var(--ease-snap), background-color .2s var(--ease-snap);
}
.boardlinks__chip:hover, .boardlinks__chip:focus-visible{
  color: var(--fg); background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(210,32,47,0.5);
}
.boardlinks__chip svg{ flex: 0 0 auto; opacity: .8; }
.boardlinks__f{
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 6px; background: var(--ink-650); color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12px;
}