/* =====================================================================
   7on7HQ , BROADCAST / GAMEDAY
   Production stylesheet for 7on7hq.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 , 7on7HQ (red, black, silver) */
  --red:        #D2202F;   /* brand primary , reserved for live / LARGE graphic use */
  --red-hot:    #FF3A45;   /* pulse peak + glow */
  --red-text:   #F0454F;   /* brighter on-dark red for SMALL red TEXT (>=4.5:1 on ink) */
  --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:   #787F90;   /* informational quiet tier, >=4.5:1 on ink (was #5C6173, 3.18:1) */

  /* Supporting accent (ONE): brand 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: 12px 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; }

/* 7on7HQ logo , the 7on7HQ 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-text); font-weight: 700; margin-top: 3px;
}

.topnav{ margin-left: auto; display: flex; align-items: center; gap: 2px; }
.topnav a{
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;              /* keep each label on one line (5+ nav items) */
  min-height: 44px;                 /* WCAG 2.5.5 touch target (primary nav) */
  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; justify-content:center; gap:8px;
  min-height: 44px;                 /* WCAG 2.5.5 touch target (sideline phones) */
  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; }

/* ---- account menu (signed-in: person button + dropdown in the masthead top-right) ----
   Replaces the old role chip + standalone Sign out. The button mirrors .authbtn; the
   popover is anchored to the right edge of the rail and floats above page content. */
.acctmenu{ position: relative; display: inline-flex; }
.acctmenu__btn{
  display:inline-flex; align-items:center; gap:8px;
  min-height: 44px;                 /* WCAG 2.5.5 touch target (sideline phones) */
  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 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 .25s var(--ease-snap), box-shadow .25s var(--ease-snap), background-color .25s var(--ease-snap);
}
.acctmenu__btn:hover{ color: var(--fg); background: rgba(255,255,255,0.08); }
.acctmenu__btn[aria-expanded="true"]{ color: var(--fg); background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px var(--line-2); }
.acctmenu__btn > svg{ flex:0 0 auto; opacity:.85; }
.acctmenu__name{ max-width: 12ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acctmenu__caret{ opacity:.65; transition: transform .2s var(--ease-snap); }
.acctmenu__btn[aria-expanded="true"] .acctmenu__caret{ transform: rotate(180deg); }

.acctmenu__pop{
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 232px; max-width: min(86vw, 320px);
  padding: 6px; border-radius: var(--r-md);
  background: var(--ink-800);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-lift);
}
.acctmenu__pop[hidden]{ display: none; }
.acctmenu__hdr{
  padding: 9px 11px 10px; margin-bottom: 5px;
  border-bottom: 1px solid var(--line);
}
.acctmenu__who{
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:14px;
  color: var(--fg); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acctmenu__email{
  font-family:"Barlow",sans-serif; font-size:12.5px; color: var(--fg-mute); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acctmenu__item{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height: 42px; padding: 9px 11px; border:0; border-radius: var(--r-sm);
  text-align:left; cursor:pointer; color: var(--fg-soft); background: transparent;
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:14px;
  letter-spacing:0.01em;
  transition: color .15s var(--ease-snap), background-color .15s var(--ease-snap);
}
.acctmenu__item:hover{ color: var(--fg); background: rgba(255,255,255,0.06); }
.acctmenu__item > svg{ flex:0 0 auto; opacity:.8; }
.acctmenu__item--out{ color: var(--fg-mute); }
.acctmenu__item--out:hover{ color: var(--loss); background: var(--loss-deep); }

/* 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-text); 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-mute); 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); }

/* Pre-results state , no game has a result yet, so nothing is ranked. Rows are
   neutral (no qualifier red, no tie chip, no cut line), and the seed cell shows
   a quiet dash instead of asserting a 1..N order. */
.tablebar__note{
  margin-left:auto;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:0.08em; color: var(--fg-faint);
}
tr.unranked td{ color: var(--fg-soft); }
tr.unranked .tm__name{ color: var(--fg-soft); }
.rank__seed--unranked{
  background: var(--ink-800); color: var(--fg-faint); font-weight:700;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* 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{
  display:inline-flex; align-items:center; justify-content:center; min-height: 44px;
  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%);
  max-height: calc(100dvh - 2 * var(--s-5)); /* never taller than the viewport (minus .modal padding) */
  overflow-y: auto;                          /* scroll instead of clipping Sign In on short landscape phones */
  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-text); 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;
}
/* a non-<label> field caption (used for the role radiogroup) , matches label */
.field__lab{
  font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.18em; font-size:10px; font-weight:700; color: var(--fg-mute);
}

/* ---- LOGIN ROLE CHOOSER (Super / Field segmented toggle) ---- */
.rolepick{
  display:flex; gap:6px; padding:5px; border-radius: var(--r-md);
  background: var(--ink-750); box-shadow: inset 0 0 0 1px var(--line);
}
.rolepick__opt{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height: 48px; padding: 12px 14px; border-radius: var(--r-sm);
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:0.07em; font-weight:700; font-size:15px; color: var(--fg-mute);
  transition: color .2s var(--ease-snap), background-color .2s var(--ease-snap),
              box-shadow .2s var(--ease-snap);
}
.rolepick__opt:hover{ color: var(--fg-soft); }
.rolepick__opt .rolepick__ic{ display:inline-flex; opacity:.85; }
.rolepick__opt--on{
  color:#fff; background: linear-gradient(180deg,#e23a43,var(--red));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 20px -12px rgba(210,32,47,0.7);
}
.rolepick__opt--on .rolepick__ic{ opacity:1; }
/* the field number picker reuses the modal field <select> styling */
.rolepick__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; letter-spacing:0.01em;
  transition: box-shadow .2s var(--ease-snap);
}
.rolepick__select:hover{ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.rolepick__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); }
.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); }
/* optional operator-set scoring note, rendered after the rule chips */
.scoring__note{ flex-basis:100%; margin-top:4px;
  font-family:"Barlow",sans-serif; font-weight:500; font-size:12.5px;
  color: var(--fg-mute); letter-spacing:0.01em; }

.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); 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; }
  /* Tight on phones: drop the first-name label, keep the person icon + caret. The
     dropdown still shows the full name + email in its header, so nothing is lost. */
  .acctmenu__name{ 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; }
  /* Only the LOGIN button collapses to its icon at the narrowest width; it
     keeps its person SVG as the affordance. The Logout button has no icon, so
     its "Logout" label must stay visible (it is the button's only affordance). */
  #login-open .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;
  display:inline-flex; align-items:center; justify-content:center; min-height: 44px;
  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; }

/* ---- tiebreakers (ordered, reorderable) ---- */
.tbedit{ display:flex; flex-direction:column; gap: var(--s-3); }
.tblist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--s-2); counter-reset:none; }
.tbrow{
  display:flex; align-items:center; gap: var(--s-3);
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--ink-800); box-shadow: inset 0 0 0 1px var(--line);
}
.tbrow--fixed{ background: var(--ink-850); box-shadow: inset 0 0 0 1px var(--line-2); }
.tbrow__main{ display:flex; align-items:center; gap:11px; flex:1 1 auto; min-width:0; }
.tbrow__rank{
  width:24px; height:24px; flex:0 0 auto; border-radius:6px; display:grid; place-items:center;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:13px; color: var(--fg-soft);
  background: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line-2);
}
.tbrow--fixed .tbrow__rank{ background: linear-gradient(180deg,#e23a43,var(--red)); color:#fff; box-shadow:none; }
.tbrow__txt{ min-width:0; }
.tbrow__label{ font-family:"Barlow",sans-serif; font-weight:700; font-size:14px; color: var(--fg); }
.tbrow__desc{ font-family:"Barlow",sans-serif; font-weight:500; font-size:12px; color: var(--fg-mute); margin-top:1px; }
.tbrow__pin{
  flex:0 0 auto; font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.12em;
  font-size:10px; font-weight:700; color: var(--red-text);
  padding: 3px 9px; border-radius:999px; background: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line-2);
}
.tbrow__btns{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.tbrow__mv, .tbrow__rm{
  width:34px; height:34px; 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);
}
.tbrow__mv:hover:not(:disabled){ color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.tbrow__rm:hover:not(:disabled){ color: var(--loss); box-shadow: inset 0 0 0 1px rgba(255,107,114,0.4); }
.tbrow__mv:disabled, .tbrow__rm:disabled{ opacity:0.35; cursor:not-allowed; }
.tbedit__ctl{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-3); flex-wrap:wrap; }
.tbadd{ display:flex; align-items:center; gap: var(--s-2); }
.tbadd .ainput{ min-width:170px; }
.tbreset{ padding: 9px 14px; }
.tbreset:disabled{ opacity:0.4; cursor:not-allowed; }

/* ---- 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); }

/* ---- flexible elimination-bracket size picker ---- */
.brksize{ display:flex; flex-direction:column; gap: var(--s-3); }
.brksize .ainput{ max-width: 160px; }
/* quick-pick size chips */
.brksize__chips{ display:flex; flex-wrap: wrap; gap: var(--s-2); }
.brkchip{
  min-height: 40px; padding: 8px 16px; border-radius: var(--r-pill);
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.06em;
  font-weight:700; font-size:14px; color: var(--fg-soft);
  background: var(--ink-700); 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);
}
.brkchip:hover{ color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.brkchip--on{
  color:#fff; background: linear-gradient(180deg,#e23a43,var(--red));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 0 1px rgba(210,32,47,0.5);
}
/* plain-English bye-structure preview (aria-live) */
.brkpreview{
  padding: 12px 14px; border-radius: var(--r-sm);
  background: rgba(0,0,0,0.2); box-shadow: inset 0 0 0 1px var(--line);
  display:flex; flex-direction:column; gap: 4px;
}
.brkpreview__head{
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:15px;
  color: var(--fg); line-height:1.35;
}
.brkpreview__detail{
  font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:13px;
  letter-spacing:0.02em; color: var(--fg-mute);
}
/* highlight the clean "top 2 seeds get a bye" case in silver */
.brkpreview--bye{ background: rgba(179,180,179,0.08); box-shadow: inset 0 0 0 1px rgba(179,180,179,0.32); }
.brkpreview--bye .brkpreview__head{ color: var(--silver-hi); }
.brkpreview--bye .brkpreview__detail{ color: var(--silver); }

/* 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; }
.plays__list[hidden]{ display:none; }
.plays__toggle{ -webkit-appearance:none; appearance:none; background:transparent; border:0; margin:0; padding:2px 0; display:flex; align-items:center; gap:8px; flex:1; min-width:0; text-align:left; color:inherit; cursor:pointer; }
.plays__toggle > svg{ flex:0 0 auto; color: var(--fg-faint); transition: transform 140ms ease; }
.plays--open .plays__toggle > svg{ transform: rotate(180deg); }
.plays__toggle:hover .plays__title{ color: var(--fg-soft); }
.plays__undolast{ -webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; padding:5px 9px; border-radius: var(--r-sm); background: var(--ink-750); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-mute); font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-size:11px; font-weight:700; cursor:pointer; }
.plays__undolast:hover{ color:#fff; background: rgba(210,32,47,0.18); box-shadow: inset 0 0 0 1px rgba(210,32,47,0.5); }
.plays__undolast svg{ flex:0 0 auto; }
.brktrans{ padding:12px 14px; border-radius: var(--r-md); background: var(--ink-800); box-shadow: inset 0 0 0 1px var(--line-2); margin-bottom: var(--s-3); }
.brktrans__title{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; font-size:11px; color: var(--fg-mute); margin-bottom:4px; }
.brktrans__msg{ font-family:"Barlow",sans-serif; font-weight:500; font-size:13px; color: var(--fg-soft); line-height:1.4; }
.brktrans__bar{ margin-top:9px; height:5px; border-radius:3px; background: var(--ink-750); overflow:hidden; }
.brktrans__bar span{ display:block; height:100%; background: var(--fg-faint); transition: width 220ms ease; }
.brktrans--ready{ background: rgba(46,160,90,0.12); box-shadow: inset 0 0 0 1px rgba(46,160,90,0.5); }
.brktrans--ready .brktrans__title{ color:#4cc079; }
.brktrans--ready .brktrans__bar span{ background:#4cc079; }
.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: 44px;
  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; }
.sdstep{ display:flex; flex-direction:column; gap: var(--s-3); }
.sdstep__step{ display:flex; flex-direction:column; gap:6px; }
.sdstep__q{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; font-size:11px; color: var(--fg-soft); }
.pickbtn--on{ box-shadow: inset 0 0 0 1.5px var(--gold); }
.lockactions{ display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.lockbanner{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; background: var(--ink-800); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--gold); font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; font-size:12px; margin-bottom: var(--s-3); }
.lockbanner svg{ flex:0 0 auto; }
.pcard--locked{ opacity:0.55; }
.btn--armed{ box-shadow: inset 0 0 0 1.6px var(--red-text); }

/* =====================================================================
   SETUP WIZARD (launcher + full-screen guided overlay)
   ===================================================================== */
.wizlaunch{ margin-bottom: var(--s-5); }
.wizlaunch--hero{
  display:flex; gap: var(--s-4); align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding: 18px 20px; border-radius: var(--r-lg);
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(210,32,47,0.16), transparent 55%),
    linear-gradient(180deg, var(--ink-750), var(--ink-800));
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.wizlaunch__txt{ display:flex; flex-direction:column; gap:6px; max-width:640px; }
.wizlaunch__eyebrow{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.18em; font-size:10px; font-weight:700; color: var(--red-text); }
.wizlaunch__title{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:21px; letter-spacing:0.01em; color: var(--fg); }
.wizlaunch__sub{ font-family:"Barlow",sans-serif; font-weight:500; font-size:13px; color: var(--fg-mute); }
.wizlaunch--hero .btn{ margin-top: var(--s-2); align-self:flex-start; }
.wizlaunch--bar{
  display:flex; align-items:center; justify-content:space-between; gap: var(--s-3); flex-wrap:wrap;
  padding: 12px 16px; border-radius: var(--r-md);
  background: var(--ink-800); box-shadow: inset 0 0 0 1px var(--line);
}
.wizlaunch__barlab{ font-family:"Barlow",sans-serif; font-weight:600; font-size:13px; color: var(--fg-soft); }

.wizard{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding: var(--s-4); opacity:0; transition: opacity .18s var(--ease-snap); }
.wizard--in{ opacity:1; }
.wizard__scrim{ position:absolute; inset:0; background: rgba(6,7,9,0.74); backdrop-filter: blur(3px); }
.wizard__card{
  position:relative; width:min(760px, 100%); max-height: calc(100vh - 2 * var(--s-4));
  display:flex; flex-direction:column; overflow:hidden;
  border-radius: var(--r-xl); background: var(--ink-850); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), inset 0 0 0 1px var(--line-2);
  transform: translateY(8px) scale(0.99); transition: transform .2s var(--ease-snap);
}
.wizard--in .wizard__card{ transform:none; }
.wizard__head{ display:flex; align-items:flex-start; justify-content:space-between; gap: var(--s-3); padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.wizard__eyebrow{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.16em; font-size:10px; font-weight:700; color: var(--red-text); }
.wizard__title{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:20px; letter-spacing:0.01em; color: var(--fg); margin-top:3px; }
.wizard__close{ width:34px; height:34px; border-radius: var(--r-sm); display:grid; place-items:center; color: var(--fg-mute); box-shadow: inset 0 0 0 1px var(--line-2); }
.wizard__close:hover{ color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }

.wizsteps{ display:flex; gap:4px; padding: 10px 16px; overflow-x:auto; border-bottom: 1px solid var(--line); background: rgba(0,0,0,0.18); }
.wizstep{ display:flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; flex:0 0 auto; color: var(--fg-mute); transition: color .2s var(--ease-snap), background .2s var(--ease-snap); }
.wizstep__num{ width:20px; height:20px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:11px; background: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg-soft); }
.wizstep__lab{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; }
.wizstep--on{ color: var(--fg); background: var(--ink-700); }
.wizstep--on .wizstep__num{ background: linear-gradient(180deg,#e23a43,var(--red)); color:#fff; box-shadow:none; }
.wizstep--done .wizstep__num{ background: rgba(210,32,47,0.18); color: var(--red-text); box-shadow: inset 0 0 0 1px rgba(210,32,47,0.4); }
.wizstep--done{ color: var(--fg-soft); }

.wizard__body{ padding: 20px; overflow-y:auto; flex:1 1 auto; }
.wizpanel__head{ margin-bottom: var(--s-4); }
.wizpanel__step{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.14em; font-size:10px; font-weight:700; color: var(--fg-faint); }
.wizpanel__title{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:19px; color: var(--fg); margin-top:3px; }
.wizpanel__sub{ font-family:"Barlow",sans-serif; font-weight:500; font-size:13px; color: var(--fg-mute); margin-top:3px; }
.wizpanel__body{ display:flex; flex-direction:column; gap: var(--s-4); }
.wizpanel__lead{ font-family:"Barlow",sans-serif; font-weight:500; font-size:13px; color: var(--fg-soft); }
.wizhint{ margin-top:2px; }
.wizteams{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-3); margin-top: var(--s-2); }
.wizteam{ display:flex; flex-direction:column; gap:5px; }
.wizteam label{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-size:10px; font-weight:700; color: var(--fg-mute); }

.wizrecap, .wizreview{ display:flex; flex-direction:column; gap:2px; border-radius: var(--r-md); overflow:hidden; box-shadow: inset 0 0 0 1px var(--line); }
.wizrecap__row{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-3); padding: 11px 14px; background: var(--ink-800); }
.wizrecap__row + .wizrecap__row{ border-top: 1px solid var(--line); }
.wizrecap__k{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-size:11px; font-weight:700; color: var(--fg-mute); }
.wizrecap__v{ font-family:"Barlow",sans-serif; font-weight:600; font-size:13px; color: var(--fg); text-align:right; }

.wizard__foot{ display:flex; align-items:center; gap: var(--s-3); padding: 14px 20px; border-top: 1px solid var(--line); background: rgba(0,0,0,0.2); }
.wizard__footspacer{ flex:1 1 auto; }
.wizard__foot .btn{ min-width:120px; }
.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 brand 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;
  min-height: 44px;                 /* WCAG 2.5.5 touch target (round tabs) */
  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-mute);
  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-mute); 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);
}
/* recede the loser, but keep name/score/seed legible (AA): one tone down
   from the winner via --fg-mute, no extra opacity. The brighter winner row
   (--fg, bold, silver seed + advance caret) carries the hierarchy. */
.brow--loss .bteam__name{ color: var(--fg-mute); }
.brow--loss .bscore{ color: var(--fg-mute); }
.brow--loss .bseed{ color: var(--fg-mute); }

/* 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); }
/* The scroller is a focusable, keyboard-operable scroll region (WCAG 2.1.1):
   give it a clear inset focus ring (outline-offset negative so it is not clipped
   by the surrounding section padding), the same affordance as the table. */
.bracket-scroller:focus-visible{
  outline:2px solid var(--red-hot); outline-offset:-2px; border-radius: var(--r-sm);
}

/* =====================================================================
   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. brand 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; justify-content: center; gap: 7px;
  min-height: 44px;                 /* WCAG 2.5.5 touch target (kiosk exit) */
  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);
  /* viewport-fit=cover lets content slide under notches/home indicators; keep the
     content padding but never less than the device safe-area inset on each edge. */
  padding: max(clamp(24px, 6vw, 64px), env(safe-area-inset-top)) max(var(--gut), env(safe-area-inset-right)) max(clamp(24px, 6vw, 64px), env(safe-area-inset-bottom)) max(var(--gut), env(safe-area-inset-left));
  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-text);
}
.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{
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  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;
  /* keep board content clear of notches/home indicator (viewport-fit=cover); the
     per-breakpoint paddings below add their own content padding via max(). */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  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-text); 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; }

/* ---- master game clock band: ONE synced countdown shown on every field board.
   Hidden until the super starts it; turns hot red and pulses in the last minute. */
.sb-clockrow{
  display: flex; align-items: baseline; justify-content: center;
  gap: clamp(10px, 1.6vw, 22px); flex: 0 0 auto; min-width: 0;
  padding: clamp(2px, 0.6vh, 8px) 0;
}
.sb-clockrow.is-hidden{ display: none; }
.sb-clockrow__lab{
  font-family:"Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: clamp(12px, 1.7vh, 20px); color: var(--fg-mute);
}
.sb-clockrow__time{
  font-family:"Anton","Barlow Condensed", sans-serif; font-weight: 400;
  letter-spacing: 0.02em; line-height: 0.92;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(34px, 7vh, 96px);
  color: var(--silver-hi); text-shadow: 0 0 18px rgba(179,180,179,0.22);
}
.sb-clockrow--run .sb-clockrow__time{ color: #fff; }
.sb-clockrow--warn .sb-clockrow__lab{ color: var(--red-text); }
.sb-clockrow--warn .sb-clockrow__time{
  color: var(--red-hot); text-shadow: 0 0 24px rgba(255,58,69,0.5);
  animation: sb-clk-pulse 1s ease-in-out infinite;
}
.sb-clockrow--done .sb-clockrow__lab{ color: var(--red-text); }
.sb-clockrow--done .sb-clockrow__time{ color: var(--red-hot); text-shadow: 0 0 24px rgba(255,58,69,0.55); }
.sb-clockrow--paused .sb-clockrow__time{ color: var(--silver-deep); }
/* Final-minute alarm: the WHOLE individual field scoreboard flashes red so the last
   minute reads from across the venue. Only field boards get .sb-finalmin (the jumbo has
   its own clock and never calls paintClock, so the jumbotron never flashes). */
@keyframes sbFinalMinute {
  0%, 49.99% { box-shadow: inset 0 0 0 12px var(--red, #D2202F), inset 0 0 0 100vmax rgba(210,32,47,0.28); }
  50%, 100%  { box-shadow: inset 0 0 0 12px rgba(210,32,47,0), inset 0 0 0 100vmax rgba(210,32,47,0); }
}
.sb-finalmin{ animation: sbFinalMinute 1s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce){ .sb-finalmin{ animation-duration: 2s; } }
@keyframes sb-clk-pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.5; } }
@media (prefers-reduced-motion: reduce){ .sb-clockrow--warn .sb-clockrow__time{ animation: none; } }

/* super day-of game-clock control buttons */
.clockbtns{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* ---- 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-mute);            /* readable across a field on the scorer's iPad */
  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: max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); }
  .sb-ident__txt{ display: none; }                 /* keep just the logo 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: max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
  .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; }
/* the jumbotron launcher chip , brand-red so it reads as the primary "put it on the big screen" action */
.boardlinks__chip--jumbo{
  color: #fff; cursor: pointer;
  background: linear-gradient(180deg, rgba(210,32,47,0.9), rgba(176,18,25,0.9));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 8px 20px -12px rgba(210,32,47,0.85);
}
.boardlinks__chip--jumbo svg{ opacity: 1; }
.boardlinks__chip--jumbo:hover, .boardlinks__chip--jumbo:focus-visible{
  color: #fff;
  background: linear-gradient(180deg, var(--red-hot), var(--red));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 10px 24px -12px rgba(255,58,69,0.95);
}

/* DISPLAY-mode fullscreen overlay (?display=1) , a one-tap prompt to enter true fullscreen
   on a dedicated jumbotron/board window (browsers require a user gesture, so it cannot be
   automatic). Semi-transparent so the live board shows through; hidden once fullscreen. */
.fsoverlay{
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; color: var(--fg);
  background: radial-gradient(120% 90% at 50% 32%, rgba(15,16,21,0.62), rgba(11,12,16,0.86));
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  -webkit-tap-highlight-color: transparent;
}
.fsoverlay[hidden]{ display: none; }
.fsoverlay__inner{ display: grid; gap: 12px; justify-items: center; text-align: center; padding: 28px; }
.fsoverlay__inner svg{ width: 56px; height: 56px; color: var(--red-text); }
.fsoverlay__title{
  font-family:"Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 800; font-size: clamp(24px, 4vw, 34px); color: var(--fg);
}
.fsoverlay__sub{ font-size: 15px; color: var(--fg-mute); }
.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;
}

/* admin: master game clock live readout (ticks locally between polls; admin.js) */
.admin-clockread{ display:flex; align-items:baseline; gap:12px; margin:2px 0 10px; }
.admin-clock-time{
  font-family:"Anton", sans-serif; font-weight:400; line-height:1;
  font-size:clamp(34px,9vw,46px); color:var(--fg); letter-spacing:0.01em;
}
.admin-clock-time--warn{ color:#F2B441; }
.admin-clock-time--done{ color:var(--red-text); text-shadow:0 0 18px rgba(210,32,47,0.35); }
.admin-clock-state{
  font-family:"Barlow Condensed", sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:0.1em; font-size:13px; color:var(--fg-mute);
}

/* live score cards open that field's full-screen scoreboard on tap */
.is-boardlink{ cursor: pointer; }
.is-boardlink:hover{ box-shadow: var(--shadow-lift), var(--glow-red); }
.is-boardlink:focus-visible{ outline: 2px solid var(--red-text); outline-offset: 3px; }
.boardcue{ display:inline-flex; align-items:center; gap:4px; color: var(--fg-mute); transition: color .12s ease; }
.is-boardlink:hover .boardcue, .is-boardlink:focus-visible .boardcue{ color: var(--red-text); }

/* ===== JUMBOTRON , venue wall board (every field on one screen) ===== */
.jumbo{ min-height:100dvh; padding:max(clamp(14px,2.5vw,40px),env(safe-area-inset-top)) max(clamp(14px,2.5vw,40px),env(safe-area-inset-right)) max(clamp(14px,2.5vw,40px),env(safe-area-inset-bottom)) max(clamp(14px,2.5vw,40px),env(safe-area-inset-left)); display:flex; flex-direction:column; gap:clamp(12px,2.2vh,32px); }
.jumbo__head{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; }
.jumbo__title{ justify-self:start; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:"Anton",sans-serif; text-transform:uppercase; letter-spacing:.01em; color:var(--fg); font-size:clamp(20px,3vw,46px); line-height:1; }
.jumbo__clockwrap{ justify-self:center; display:flex; flex-direction:column; align-items:center; line-height:1; gap:2px; }
.jumbo__clocklab{ font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:clamp(10px,1vw,15px); color:var(--fg-mute); }
.jumbo__clock{ font-family:"Anton",sans-serif; color:var(--fg-soft); font-size:clamp(40px,6.5vw,104px); line-height:1; }
.jumbo__clock--run{ color:#fff; }
.jumbo__clock--warn{ color:#F2B441; }
.jumbo__clock--done{ color:var(--red-text); text-shadow:0 0 24px rgba(210,32,47,.4); }
.jumbo__status{ justify-self:end; font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:clamp(11px,1.2vw,18px); color:var(--gold); text-align:right; min-width:0; }
.jumbo__grid{ flex:1; display:grid; gap:clamp(10px,1.5vw,24px); grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; }
.jumbo__grid[data-cols="1"]{ grid-template-columns:1fr; }
.jumbo__grid[data-cols="3"]{ grid-template-columns:repeat(3,1fr); }
.jumbo__grid[data-cols="4"]{ grid-template-columns:repeat(4,1fr); }
.jcard{ display:flex; flex-direction:column; min-height:0; background:linear-gradient(180deg,var(--ink-800),var(--ink-850)); border-radius:var(--r-lg); box-shadow:var(--shadow-panel); padding:clamp(12px,1.5vw,28px); overflow:hidden; }
.jcard--live{ box-shadow:var(--shadow-panel), var(--glow-red); }
.jcard__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.jcard__field{ font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:clamp(13px,1.4vw,22px); color:var(--fg-soft); display:inline-flex; align-items:center; gap:8px; }
.jcard__fnum{ display:inline-grid; place-items:center; min-width:1.7em; padding:.08em .35em; border-radius:6px; background:var(--red); color:#fff; font-size:.82em; }
.jchip{ font-family:"Barlow Condensed",sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.07em; font-size:clamp(11px,1.05vw,16px); padding:.25em .65em; border-radius:999px; display:inline-flex; align-items:center; gap:.4em; white-space:nowrap; }
.jchip--live{ color:#fff; background:rgba(210,32,47,.22); box-shadow:inset 0 0 0 1px rgba(255,58,69,.5); }
.jchip--final{ color:var(--fg-soft); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--line-2); }
.jchip--next{ color:var(--fg-mute); background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--line); }
.jchip--cancel{ color:var(--loss); background:rgba(255,107,114,.12); }
.jcard__body{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:clamp(6px,1.1vh,18px); }
.jrow{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(8px,1vw,18px); }
.jrow__seed{ font-family:"Barlow Condensed",sans-serif; font-weight:700; color:var(--fg-mute); font-size:clamp(12px,1.3vw,22px); min-width:1.4em; text-align:center; }
.jrow__name{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; color:var(--fg); font-size:clamp(17px,2.3vw,40px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jrow__score{ font-family:"Anton",sans-serif; color:var(--fg-soft); font-size:clamp(26px,4vw,78px); line-height:1; }
.jrow--win .jrow__name{ color:#fff; }
.jrow--win .jrow__score{ color:#fff; }
.jcard--live .jrow__score{ color:#fff; }
.jcard__foot{ margin-top:clamp(6px,1vh,16px); font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.07em; font-size:clamp(10px,1vw,15px); color:var(--fg-faint); }
.jcard--idle .jcard__body{ display:none; }
.jcard__idle{ flex:1; display:grid; place-items:center; color:var(--fg-faint); font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.1em; }
.jumbo--empty{ align-items:center; justify-content:center; text-align:center; }
.jumbo__wait{ color:var(--fg-mute); font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:clamp(13px,1.4vw,20px); }
/* Narrow / portrait (phones): the 3-up header (title | clock | status) is too wide for the
   row, and the large game clock ends up overlapping the tournament title. Stack the three
   centered, each on its own row, so the clock has its own space and nothing collides. */
@media (max-width:680px){
  .jumbo__head{ grid-template-columns:1fr; justify-items:center; gap:6px; text-align:center; }
  .jumbo__title{ justify-self:center; white-space:normal; overflow:visible; text-overflow:clip; text-align:center; font-size:clamp(18px,5vw,30px); }
  .jumbo__clockwrap{ justify-self:center; }
  .jumbo__status{ justify-self:center; text-align:center; }
}
/* board picker , jumbotron CTA */
.sb-pick__jumbo{ display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:16px; padding:14px 18px; border-radius:var(--r-md); background:rgba(210,32,47,.14); box-shadow:inset 0 0 0 1px rgba(255,58,69,.4); color:var(--fg); text-decoration:none; }
.sb-pick__jumbo:hover, .sb-pick__jumbo:focus-visible{ background:rgba(210,32,47,.22); }
.sb-pick__jumbo-lab{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:20px; }
.sb-pick__jumbo-sub{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.07em; font-size:12px; color:var(--fg-mute); }

/* ===== MY TEAM (public pick-your-team schedule) ===== */
.teamselect{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin:4px 0 18px; }
.teamselect .field-group{ min-width:min(320px,100%); }
.teamsum{ display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:16px;
  background:linear-gradient(180deg,var(--ink-800),var(--ink-850)); border-radius:var(--r-lg); box-shadow:var(--shadow-panel); }
.teamsum__crest{ flex:0 0 auto; display:inline-grid; place-items:center; width:46px; height:46px; border-radius:12px;
  background:var(--ink-700); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--fg);
  font-family:"Barlow Condensed",sans-serif; font-weight:800; letter-spacing:.04em; font-size:18px; }
.teamsum__col{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.teamsum__name{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:clamp(20px,3.4vw,30px); color:var(--fg); line-height:1.05; }
.teamsum__sub{ font-family:"Barlow Condensed",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:13px; color:var(--fg-mute); }
.teamboard{ display:flex; flex-direction:column; gap:10px; }
.tgame{ display:flex; flex-direction:column; gap:10px; padding:13px 16px; border-radius:var(--r-md);
  background:var(--ink-800); box-shadow:var(--shadow-panel); }
.tgame--live{ box-shadow:var(--shadow-panel), var(--glow-red); }
.tgame--cancel{ opacity:.62; }
.tgame__head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tgame__time{ font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:18px; color:var(--fg); letter-spacing:.01em; }
.tgame__field{ display:inline-flex; align-items:center; gap:7px; font-family:"Barlow Condensed",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; font-size:14px; color:var(--fg-soft); }
.tgame__field .fnum{ display:inline-grid; place-items:center; min-width:1.7em; padding:.08em .35em; border-radius:6px; background:var(--red); color:#fff; font-size:.82em; }
.tgame__round{ margin-left:auto; font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:12px; color:var(--fg-faint); }
.tgame__body{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tgame__opp{ display:flex; align-items:center; gap:9px; min-width:0; }
.tgame__vs{ font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase; color:var(--fg-mute); font-size:13px; }
.tgame__opp-name{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:clamp(16px,3.5vw,20px); color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tgame--cancel .tgame__opp-name{ text-decoration:line-through; text-decoration-color:rgba(255,255,255,.25); }
.tgame__result{ display:flex; align-items:center; gap:10px; }
.tgame__score{ font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:18px; color:var(--fg); }
.tgame__wl{ font-family:"Barlow Condensed",sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:12px; padding:.2em .6em; border-radius:999px; }
.tgame__wl--w{ color:var(--win); background:var(--win-deep); }
.tgame__wl--l{ color:var(--loss); background:var(--loss-deep); }
.tgame__wl--t{ color:var(--tie); background:rgba(154,160,176,.14); }

/* =====================================================================
   7on7HQ MULTI-TENANT ADDITIONS
   Operator dashboard (tournament list + create), and the auth modal extras
   (signup fields, mode toggle). Uses the existing design tokens so it sits
   inside the same broadcast/gameday system as the ported views.
   ===================================================================== */

/* ---- auth modal: signup fields + mode toggle ----------------------- */
.field__opt{ color: var(--fg-faint); font-weight:600; text-transform:none; letter-spacing:0; font-size:11px; }
.field__hint{
  font-family:"Barlow",sans-serif; font-size:12px; color: var(--fg-faint);
  margin-top:2px; letter-spacing:0.01em;
}
.modal__switch{
  margin:var(--s-4) 0 0; text-align:center;
  font-family:"Barlow",sans-serif; font-size:13.5px; color: var(--fg-mute);
}
.auth-link{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700;
  letter-spacing:0.04em; font-size:13.5px; color: var(--gold);
  text-decoration: underline; text-underline-offset: 2px;
}
.auth-link:hover{ color: var(--silver-hi); }
.authrole{ display:inline-flex; align-items:center; gap:6px; color: var(--fg-soft);
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:13px;
  letter-spacing:0.05em; padding:0 4px; }
.authrole .who-field{ color: var(--gold); }

/* ---- operator dashboard: tournament list --------------------------- */
.tourlist{
  display:grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-top: var(--s-4);
}
.tourcard{
  display:flex; flex-direction:column; gap: var(--s-3);
  text-align:left; cursor:pointer; width:100%;
  background: linear-gradient(180deg, var(--ink-750), var(--ink-800));
  border:1px solid var(--line-2); border-radius: var(--r-md);
  padding: var(--s-4) var(--s-4) var(--s-3);
  box-shadow: 0 10px 26px -16px rgba(0,0,0,0.7);
  transition: transform .18s var(--ease-snap), box-shadow .18s var(--ease-snap), border-color .18s var(--ease-snap);
}
.tourcard:hover{ transform: translateY(-2px); border-color: rgba(255,58,69,0.35);
  box-shadow: 0 18px 36px -18px rgba(0,0,0,0.85); }
.tourcard:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(255,58,69,0.3); border-color: var(--red-text); }
.tourcard__top{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-3); }
.tourcard__name{
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:22px;
  letter-spacing:0.01em; color: var(--fg); line-height:1.05; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tourcard__meta{ display:flex; align-items:center; gap: var(--s-3); flex-wrap:wrap;
  font-family:"Barlow",sans-serif; font-size:13px; color: var(--fg-mute); }
.tourcard__slug{
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; letter-spacing:0.02em;
  color: var(--fg-soft); background: var(--ink-700); border-radius: var(--r-sm);
  padding:2px 8px; box-shadow: inset 0 0 0 1px var(--line-2);
}
.tourcard__foot{
  display:flex; align-items:center; justify-content:space-between; gap: var(--s-3);
  margin-top: auto; padding-top: var(--s-2); border-top:1px solid var(--line);
}
.tourcard__go{ display:inline-flex; align-items:center; gap:5px; color: var(--gold);
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:0.1em; font-size:12px; }
.tourcard__view{
  color: var(--fg-mute); font-family:"Barlow",sans-serif; font-size:12.5px;
  text-decoration: underline; text-underline-offset: 2px;
}
.tourcard__view:hover{ color: var(--fg-soft); }

/* ---- operator dashboard: new tournament card ----------------------- */
.newtour{
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  border:1px solid var(--line-2); border-radius: var(--r-lg);
  padding: var(--s-5); margin: var(--s-4) 0 var(--s-5);
}
.newtour__head{ margin-bottom: var(--s-4); }
.newtour__title{
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:20px;
  letter-spacing:0.02em; color: var(--fg);
}
.newtour__sub{ font-family:"Barlow",sans-serif; font-size:13.5px; color: var(--fg-mute); margin-top:3px; }
.newtour__row{ display:grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }
.newtour__act{ margin-top: var(--s-3); }
.newtour__act .btn{ min-width: 200px; }
@media (max-width: 560px){
  .newtour__row{ grid-template-columns: 1fr; }
  .newtour__act .btn{ width:100%; }
}

/* ============================================================ first-run onboarding
   The welcome hero a brand-new operator sees when they have zero tournaments and
   zero events. Premium, generous, broadcast-dark. Reuses the create form below via
   its CTA (focuses #nt-name); the secondary link opens /demo. */
.onboard{
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 12% -10%, rgba(210,32,47,0.16), transparent 52%),
    linear-gradient(180deg, var(--ink-750), var(--ink-850));
  border:1px solid var(--line-2); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lift);
  padding: clamp(var(--s-6), 5vw, var(--s-9));
  margin: 0 0 var(--s-7);
}
.onboard::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, var(--red-hot), var(--red) 55%, transparent);
}
.onboard__eyebrow{
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; font-size:12.5px;
  color: var(--gold); margin-bottom: var(--s-3);
}
.onboard__title{
  font-family:"Barlow Condensed",sans-serif; font-weight:800;
  letter-spacing:0.01em; line-height:1.02;
  font-size: clamp(30px, 5.2vw, 46px); color: var(--fg);
  margin: 0;
}
.onboard__lead{
  font-family:"Barlow",sans-serif; font-size: clamp(15px, 2vw, 17px);
  line-height:1.5; color: var(--fg-soft);
  margin: var(--s-3) 0 0; max-width: 56ch;
}
.onboard__cta{
  display:flex; flex-wrap:wrap; align-items:center; gap: var(--s-5);
  margin-top: var(--s-6);
}
.onboard__create{ min-width: 248px; padding: 15px 28px; font-size:16px; }
.onboard__demo{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; font-size:14px;
  color: var(--fg-soft);
  transition: color .2s var(--ease-snap);
}
.onboard__demo:hover{ color: var(--fg); }
.onboard__demo svg{ transition: transform .2s var(--ease-snap); }
.onboard__demo:hover svg{ transform: translateX(2px); }
.onboard__steps{
  list-style:none; margin: var(--s-8) 0 0; padding: var(--s-6) 0 0;
  border-top: 1px solid var(--line);
  display:grid; gap: var(--s-5); grid-template-columns: repeat(3, 1fr);
}
.onboard__step{ display:flex; align-items:flex-start; gap: var(--s-3); }
.onboard__num{
  flex:0 0 auto; display:grid; place-items:center;
  width:30px; height:30px; border-radius: var(--r-pill);
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:15px;
  color: var(--gold);
  background: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line-2);
}
.onboard__steptext{ display:flex; flex-direction:column; gap:2px; }
.onboard__steph{
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  letter-spacing:0.02em; text-transform:uppercase; font-size:13.5px; color: var(--fg);
}
.onboard__stepd{ font-family:"Barlow",sans-serif; font-size:13px; line-height:1.45; color: var(--fg-mute); }
@media (max-width: 720px){
  .onboard__steps{ grid-template-columns: 1fr; gap: var(--s-4); }
}
@media (max-width: 560px){
  .onboard__cta{ gap: var(--s-4); }
  .onboard__create{ width:100%; min-width:0; }
  .onboard__demo{ justify-content:center; }
}

/* ============================================================ team roster: import modal + add/remove
   Bulk team import (paste / CSV) and the inline "Add team" affordance. Shared by the
   Setup tab and the setup wizard. Tokens match the operator console (ink panels, brand red). */
.wizteams__top{ display:flex; align-items:flex-end; gap: var(--s-3); flex-wrap:wrap; }
.wizteams__top .nfield, .wizteams__top .afield{ flex:0 0 auto; min-width:160px; }
.wizteams__import{ margin-bottom:2px; }

.wizteam{ position:relative; }
.wizteam__rm{
  position:absolute; top:0; right:0; width:22px; height:22px; line-height:20px;
  border:0; border-radius: var(--r-sm); cursor:pointer; font-size:16px;
  background: transparent; color: var(--fg-mute);
}
.wizteam__rm:hover{ color: var(--red-text); background: rgba(210,32,47,0.12); }
.wizteam__add{
  display:flex; align-items:center; justify-content:center; gap:6px; min-height:64px;
  border:1px dashed var(--line-2); border-radius: var(--r-sm); cursor:pointer;
  background: transparent; color: var(--fg-soft);
  font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.08em;
  font-size:12px; font-weight:700;
}
.wizteam__add:hover{ color: var(--fg); border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }

.setup__import{ display:flex; align-items:center; gap: var(--s-3); flex-wrap:wrap; margin-top: var(--s-1); }
.setup__import-hint{ font-family:"Barlow",sans-serif; font-size:12px; color: var(--fg-mute); }

/* ---- import modal (mirrors the auth/wizard overlay idiom) ---- */
body.timport-open{ overflow:hidden; }
.timport{ position:fixed; inset:0; z-index:240; display:grid; place-items:center; padding:20px; }
.timport__scrim{ position:absolute; inset:0; background: rgba(4,5,7,0.80); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.timport__card{
  position:relative; width:100%; max-width:520px; max-height: calc(100dvh - 40px); overflow-y:auto;
  border-radius: var(--r-xl); padding: clamp(22px, 4vw, 30px);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px var(--line-2);
}
.timport__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: var(--s-2); }
.timport__title{ font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:400; letter-spacing:0.03em; font-size:22px; color: var(--fg); margin:0; }
.timport__x{ width:34px; height:34px; border:0; border-radius:50%; background: var(--ink-700); color: var(--fg-soft); font-size:20px; cursor:pointer; }
.timport__x:hover{ color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }
.timport__lead{ font-family:"Barlow",sans-serif; font-size:13px; color: var(--fg-mute); margin:0 0 var(--s-3); }
.timport__ta{
  width:100%; min-height:200px; resize:vertical;
  background: var(--ink-700); color: var(--fg); border-radius: var(--r-sm);
  border:1px solid var(--line-2); padding:12px 14px;
  font-family:"Barlow",sans-serif; font-size:14px; line-height:1.5;
}
.timport__ta:focus{ outline:none; border-color: var(--red); box-shadow: 0 0 0 2px rgba(210,32,47,0.3); }
.timport__tools{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-3); flex-wrap:wrap; margin-top: var(--s-3); }
.timport__file{ display:inline-flex; align-items:center; gap:8px; font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-size:11px; font-weight:700; color: var(--fg-soft); cursor:pointer; }
.timport__file input[type=file]{ font-size:11px; color: var(--fg-mute); max-width:200px; }
.timport__mode{ flex:0 0 auto; }
.timport__preview{ margin-top: var(--s-3); font-family:"Barlow",sans-serif; font-size:13px; }
.timport__count{ color: var(--fg); font-weight:600; }
.timport__drop{ color: var(--fg-mute); }
.timport__foot{ display:flex; justify-content:flex-end; gap: var(--s-3); margin-top: var(--s-5); }
.timport__foot .btn{ min-width:120px; }
.timport__foot .btn[disabled]{ opacity:.5; pointer-events:none; }

/* ============================================================ operator dashboard: events + divisions */
.dashsec{ margin-top: var(--s-7); }
.dashsec:first-of-type{ margin-top: var(--s-5); }
.dashsub{ margin: 0 0 var(--s-4); }
.dashsub__h{ font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:400; letter-spacing:0.03em; font-size:20px; color: var(--fg); margin:0; }
.dashsub__sub{ margin-top:4px; font-family:"Barlow",sans-serif; font-size:13px; color: var(--fg-mute); }
.dash-empty{ font-family:"Barlow",sans-serif; font-size:13px; color: var(--fg-mute); padding: 4px 2px var(--s-3); }

/* event cards reuse .tourcard; a left accent marks them as containers (divisions inside) */
.tourcard--event{ border-left: 3px solid var(--red); }
.tourcard--event .tourcard__when{ color: var(--red-text); font-weight:600; }

/* event dashboard: back link + meta strip */
.eventback{
  display:inline-flex; align-items:center; gap:4px; margin: 2px 0 var(--s-4);
  background:transparent; border:0; cursor:pointer; color: var(--fg-mute);
  font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-size:11px; font-weight:700;
}
.eventback:hover{ color: var(--fg); }
.eventmeta{ display:flex; align-items:center; gap: var(--s-4); flex-wrap:wrap; margin-bottom: var(--s-5); }
.eventmeta__when{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-size:12px; font-weight:700; color: var(--fg-soft); }

/* public event roll-up + event publish control */
.tourcard--pub{ text-decoration:none; display:block; }
.tourcard--soon{ opacity:.6; cursor:default; }
.eventctl{ display:flex; align-items:center; gap: var(--s-4); flex-wrap:wrap; margin-bottom: var(--s-5); }

/* admin: export-to-excel action on the Setup tab */
.setup-export{ display:flex; align-items:center; gap: var(--s-3); flex-wrap:wrap; margin: 0 0 var(--s-4); }
.setup-export__hint{ font-family:"Barlow",sans-serif; font-size:12px; color: var(--fg-mute); }

/* ============================================================ multi-day: day calendar, division day-assign, master schedule */
.divrow{ margin-bottom: var(--s-3); }
.divrow__days{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 4px 2px; }
.divrow__dayslab{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-size:10px; font-weight:700; color: var(--fg-mute); }
.daychip{ display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius: var(--r-sm); background: var(--ink-700); font-family:"Barlow",sans-serif; font-size:12px; color: var(--fg-soft); cursor:pointer; }
.daychip input{ accent-color: var(--red); }

.daysedit{ display:flex; flex-direction:column; gap: var(--s-3); }
.daysedit__row{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; padding-bottom: var(--s-3); border-bottom:1px solid var(--line); }
.daysedit__n{ align-self:center; font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-size:11px; font-weight:700; color: var(--fg-mute); min-width:46px; }
.field--day{ min-width:120px; }
.field--day input{ background: var(--ink-700); color: var(--fg); border:1px solid var(--line-2); border-radius: var(--r-sm); padding:9px 10px; font-family:"Barlow",sans-serif; font-size:13px; }
.daysedit__rm{ align-self:center; width:30px; height:30px; border:0; border-radius:50%; background: transparent; color: var(--fg-mute); font-size:18px; cursor:pointer; }
.daysedit__rm:hover{ color: var(--red-text); background: rgba(210,32,47,0.12); }

.mstable{ width:100%; border-collapse:collapse; margin: 6px 0 var(--s-6); font-family:"Barlow",sans-serif; font-size:13px; }
.mstable th{ text-align:left; padding:8px 10px; border-bottom:2px solid var(--line-2); color: var(--fg-mute); font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-size:11px; }
.mstable td{ padding:8px 10px; border-bottom:1px solid var(--line); color: var(--fg-soft); }
.mstable tr:hover td{ background: rgba(255,255,255,0.02); }

/* multi-day: day heading divider in the division schedule board */
.dayhead{
  margin: var(--s-6) 0 var(--s-3); padding-bottom:6px; border-bottom:2px solid var(--line-2);
  font-family:"Anton",sans-serif; text-transform:uppercase; letter-spacing:0.03em; font-size:16px; color: var(--fg);
}
.dayhead:first-child{ margin-top:0; }

/* master schedule: cross-division field conflict flagging */
.msbanner{
  margin: 6px 0 var(--s-5); padding:11px 14px; border-radius: var(--r-sm);
  background: rgba(210,32,47,0.12); box-shadow: inset 0 0 0 1px rgba(210,32,47,0.4);
  font-family:"Barlow",sans-serif; font-size:13px; color: var(--fg);
}
.msbanner strong{ color: var(--red-text); }
.mstable tr.msrow--clash td{ background: rgba(210,32,47,0.10); }
.msclash{ color: var(--red-text); font-weight:700; }

/* field allocation result */
.allocres{ margin-top: var(--s-3); }
.alloclist{ display:flex; flex-direction:column; gap:6px; margin-top: var(--s-2); }
.allocrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 10px; border-radius: var(--r-sm); background: var(--ink-700); }
.allocrow__lab{ font-family:"Barlow",sans-serif; font-weight:600; font-size:13px; color: var(--fg); }
.allocrow__rng{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-size:12px; font-weight:700; color: var(--red-text); }

/* ============================================================ combined live board (jumbotron) */
body.evboard-on{ overflow:hidden; }
.evboard{ position:fixed; inset:0; z-index:300; background: var(--ink-900); display:flex; flex-direction:column; padding: clamp(16px,2vw,28px); }
.evboard__head{ display:flex; align-items:center; gap:16px; margin-bottom: clamp(12px,2vh,22px); }
.evboard__title{ font-family:"Anton",sans-serif; text-transform:uppercase; letter-spacing:0.02em; font-size: clamp(22px,3vw,40px); color: var(--fg); flex:1; }
.evboard__page{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; font-size: clamp(12px,1.4vw,18px); color: var(--fg-mute); }
.evboard__exit{ border:0; border-radius: var(--r-sm); background: var(--ink-700); color: var(--fg-soft); padding:8px 16px; font-size:14px; cursor:pointer; }
.evboard__exit:hover{ color: var(--fg); }
.evboard__grid{ flex:1; display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: clamp(10px,1.4vw,18px); align-content:start; overflow:hidden; }
.evboard__empty{ color: var(--fg-mute); font-size:20px; }
.evcard{ background: linear-gradient(180deg, var(--ink-800), var(--ink-850)); border-radius: var(--r-lg); padding: clamp(12px,1.4vw,20px); box-shadow: inset 0 0 0 1px var(--line); display:flex; flex-direction:column; gap:8px; }
.evcard--live{ box-shadow: inset 0 0 0 2px var(--red); }
.evcard__top{ display:flex; justify-content:space-between; align-items:baseline; }
.evcard__field{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size: clamp(16px,1.8vw,26px); color: var(--fg); }
.evcard__time{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; color: var(--fg-mute); font-size: clamp(13px,1.3vw,18px); }
.evcard__div{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-size: clamp(11px,1.1vw,15px); font-weight:700; color: var(--red-text); }
.evcard__match{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.evcard__team{ font-family:"Barlow",sans-serif; font-weight:600; font-size: clamp(15px,1.6vw,22px); color: var(--fg); flex:1; }
.evcard__team:last-child{ text-align:right; }
.evcard__score{ font-family:"Anton",sans-serif; font-size: clamp(16px,1.8vw,26px); color: var(--fg); white-space:nowrap; }
.evcard__status{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-size: clamp(11px,1.1vw,14px); font-weight:700; color: var(--fg-mute); display:flex; align-items:center; gap:6px; }
.evcard--live .evcard__status{ color: var(--red-text); }

/* event team registration: public form + admin rows */
.regform{ display:flex; flex-direction:column; gap: var(--s-3); margin-bottom: var(--s-3); }
.btn--sm{ padding:7px 13px; font-size:12px; }
.reglist{ display:flex; flex-direction:column; gap:8px; margin-top: var(--s-3); }
.regrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 12px; border-radius: var(--r-sm); background: var(--ink-700); }
.regrow__info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.regrow__team{ font-family:"Barlow",sans-serif; font-weight:700; font-size:14px; color: var(--fg); }
.regrow__meta{ font-family:"Barlow",sans-serif; font-size:12px; color: var(--fg-mute); }
.regrow__acts{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.regrow__acts .ainput{ width:auto; min-width:140px; padding:7px 10px; }

/* ============================================================
   Account & Billing (operator console tab) , the buildAccountBilling
   view in admin.js. Reuses pcard/afield/inrow/btn/statuschip; below are
   the new acct-* layout classes (billing summary, plan picker, the Square
   card mount, account + org forms). On-brand with the console panels.
   ============================================================ */
.acct-note{ font-family:"Barlow",system-ui,sans-serif; font-size:14px; line-height:1.45; color:var(--fg-mute); margin:6px 0; }
.acct-note--err{ color:var(--red-text); }

/* current plan + status badge */
.acct-billrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:10px; }
.acct-billplan{ display:flex; flex-direction:column; gap:2px; }
.acct-billplan__lab{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:700; color:var(--fg-mute); }
.acct-billplan__name{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:21px; color:var(--fg); }

/* upgrade block */
.acct-upgrade{ margin-top:14px; padding-top:16px; border-top:1px solid var(--line-2); }
.acct-upgrade__head{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:13px; color:var(--fg-soft); margin-bottom:12px; }

/* plan picker (segmented) */
.acct-plans{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.acct-plan{ flex:1 1 158px; min-width:150px; display:flex; flex-direction:column; gap:4px; align-items:flex-start; text-align:left; padding:12px 14px; border-radius:var(--r-md); background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px var(--line-2); cursor:pointer; transition:box-shadow .15s var(--ease-snap), background .15s var(--ease-snap); }
.acct-plan:hover{ background:rgba(255,255,255,.05); }
.acct-plan--on{ background:rgba(210,32,47,.10); box-shadow:inset 0 0 0 1.5px var(--red); }
.acct-plan__name{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:15px; color:var(--fg); text-transform:uppercase; letter-spacing:.02em; }
.acct-plan__price{ font-family:"Barlow",sans-serif; font-size:13px; color:var(--fg-mute); }
.acct-plan--on .acct-plan__price{ color:var(--fg-soft); }

/* status lines under the plan summary (auto-renew / event-pass / trial) */
.acct-status{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:14px; letter-spacing:.01em; color:var(--fg-soft); margin:2px 0 0; }
.acct-status--ok{ color:var(--silver-hi); }
.acct-status--bad{ color:var(--red-text); }

/* plan picker (segmented) , the model sublabel */
.acct-plan__sub{ font-family:"Barlow",sans-serif; font-size:12px; line-height:1.35; color:var(--fg-mute); }
.acct-plan--on .acct-plan__sub{ color:var(--fg-soft); }

/* Square card field mount + its error line */
.acct-cardlab{ display:block; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:700; color:var(--fg-mute); margin-bottom:6px; }
.acct-card{ min-height:48px; padding:11px 12px; border-radius:var(--r-sm); background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16); transition:box-shadow .15s var(--ease-snap); }
.acct-card.is-focus{ box-shadow:inset 0 0 0 2px var(--red); }
.acct-cardmsg{ color:var(--red-text); margin-top:8px; }

.acct-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }

/* card on file , stored card + its Update / Cancel auto-renew actions */
.acct-cardfile{ margin-top:14px; padding:14px; border-radius:var(--r-md); background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px var(--line-2); }
.acct-cardfile__row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.acct-cardfile__lab{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:700; color:var(--fg-mute); }
.acct-cardfile__val{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:16px; color:var(--fg); }
.acct-cardacts{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.acct-cardedit{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line-2); }

/* account: revealed current-password + the change-password subsection */
.acct-curpw{ margin-top:8px; }
.acct-divider{ height:1px; background:var(--line-2); margin:20px 0 16px; }
.acct-subhead{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:13px; color:var(--fg-soft); margin-bottom:12px; }

/* org: a color text field paired with a native swatch */
.acct-colorrow{ display:flex; align-items:center; gap:8px; }
.acct-colorrow .ainput{ flex:1 1 auto; min-width:0; }
.acct-swatch{ flex:0 0 auto; width:40px; height:40px; padding:0; border:0; border-radius:var(--r-sm); background:transparent; cursor:pointer; box-shadow:inset 0 0 0 1px var(--line-2); }
.acct-swatch::-webkit-color-swatch-wrapper{ padding:3px; }
.acct-swatch::-webkit-color-swatch{ border:none; border-radius:6px; }

/* team members , the list of people in the org + the add-member form. Reuses the
   afield/inrow/btn/acct-* language; new acct-team/acct-member/acct-rolepill classes. */
.acct-team{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.acct-member{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:11px 14px; border-radius:var(--r-md); background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px var(--line-2); }
.acct-member__who{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 200px; }
.acct-member__name{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:15px; color:var(--fg); }
.acct-member__you{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:10px; font-weight:700;
  color:var(--fg-soft); padding:2px 6px; border-radius:999px; background:var(--ink-700); box-shadow:inset 0 0 0 1px var(--line-2); }
.acct-member__email{ font-family:"Barlow",sans-serif; font-size:12.5px; color:var(--fg-mute); overflow:hidden; text-overflow:ellipsis; }
.acct-member__ctrls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* a static role label (used for an owner row the caller may not edit) */
.acct-rolepill{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:700;
  color:var(--fg-soft); padding:5px 10px; border-radius:999px; background:var(--ink-700); box-shadow:inset 0 0 0 1px var(--line-2); }
.acct-rolepill--owner{ color:var(--silver-hi); box-shadow:inset 0 0 0 1px rgba(179,180,179,.3); }

/* the inline role picker + the armed Remove on a member row */
.acct-roleselect{ min-width:128px; }
.acct-member__remove{ padding-top:8px; padding-bottom:8px; }

/* per-row scorekeeper field assignment , a compact "Field [n]" cluster that sits in
   the controls row next to the role select. The input overrides the full-width .ainput
   to stay small; blank reads as "any field" via its placeholder. */
.acct-member__field{ display:inline-flex; align-items:center; gap:7px; cursor:default; }
.acct-member__field-cap{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.1em;
  font-size:11px; font-weight:700; color:var(--fg-mute); }
.acct-member__field-inp.ainput{ width:64px; padding:7px 10px; font-size:14px; text-align:center; }
.acct-member__field-inp.ainput::placeholder{ font-size:12px; letter-spacing:.02em; }

/* the scorekeeper-field guidance line under the member list */
.acct-team__fieldnote{ margin-top:10px; }

/* the add-member form */
.acct-addmember{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line-2); }
.acct-addmember__role{ margin-top:10px; max-width:240px; }
/* the add-member field input + its hint (shown only when role = scorekeeper) */
.acct-addmember__field{ margin-top:10px; max-width:240px; }
.acct-addmember__field .ainput{ max-width:140px; }
.acct-addmember__fieldhint{ margin:6px 0 0; font-size:12.5px; color:var(--fg-faint); }

/* team: owner-only "Make owner" transfer action on another member's row. Subtle
   silver/owner accent so it reads as elevated, not destructive (Remove owns red). */
.acct-member__transfer{ padding-top:8px; padding-bottom:8px; box-shadow: inset 0 0 0 1px rgba(179,180,179,.28); }
.acct-member__transfer:hover{ box-shadow: inset 0 0 0 1px rgba(179,180,179,.5); }

/* org: address textarea (appears on invoices) */
textarea.acct-addr{ width:100%; min-height:88px; line-height:1.45; resize:vertical; }

/* org: change-subdomain field , input + a ".7on7hq.com" suffix hint */
.acct-slugrow{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; }
.acct-slugrow .ainput{ flex:1 1 200px; min-width:0; }
.acct-slugrow__suffix{ display:inline-flex; align-items:center; padding:0 12px; border-radius:var(--r-sm);
  background:var(--ink-800); box-shadow:inset 0 0 0 1px var(--line-2);
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:15px; color:var(--fg-mute); white-space:nowrap; }

/* a destructive-action warning line (subdomain change, etc.) */
.acct-warn{ font-family:"Barlow",sans-serif; font-size:13px; line-height:1.45; color:var(--gold); margin:8px 0 0; }

/* =============================================================
   Danger zone , the destructive, irreversible flows at the very
   bottom of the account / standalone view. Loss-red language,
   visually set apart from the calm panels above it.
   ============================================================= */
.acct-danger{
  margin-top:6px; padding:20px; border-radius:var(--r-lg);
  background: linear-gradient(180deg, rgba(255,107,114,0.07), rgba(255,255,255,0.01));
  box-shadow: var(--inset-hi), inset 0 0 0 1px rgba(255,107,114,0.28);
  display:flex; flex-direction:column; gap:var(--s-3);
}
.acct-danger__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); }
.acct-danger__lead{ font-family:"Barlow",sans-serif; font-size:14px; line-height:1.5; color:var(--fg-mute); margin:0; }
.acct-danger__act{ padding-top:16px; margin-top:4px; border-top:1px solid rgba(255,107,114,0.18);
  display:flex; flex-direction:column; gap:10px; }
.acct-danger__title{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:17px; color:var(--fg); letter-spacing:0.01em; }
.acct-danger__msg{ font-family:"Barlow",sans-serif; font-weight:500; font-size:14px; line-height:1.5; color:var(--fg-mute); margin:0; }
.acct-danger__field{ max-width:360px; }
.acct-danger__btn{ align-self:flex-start; min-height:48px; padding:12px 20px; border-radius:var(--r-md);
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; font-size:15px;
  color:var(--loss); background:rgba(255,107,114,0.06); box-shadow: inset 0 0 0 1px rgba(255,107,114,0.45);
  transition: background-color .2s var(--ease-snap), box-shadow .2s var(--ease-snap); }
.acct-danger__btn:hover:not(:disabled){ background:rgba(255,107,114,0.14); box-shadow: inset 0 0 0 1px rgba(255,107,114,0.7); }
.acct-danger__btn:disabled{ opacity:.45; cursor:not-allowed; }
.acct-danger__orgs{ margin:2px 0 0; padding-left:20px; list-style:disc;
  font-family:"Barlow",sans-serif; font-size:13.5px; line-height:1.5; color:var(--loss); }

/* one-time temp-password callout for a newly created user */
.acct-cred-host{ margin-top:4px; }
.acct-cred{ margin-top:14px; padding:14px; border-radius:var(--r-md);
  background:rgba(74,222,128,.06); box-shadow:inset 0 0 0 1px rgba(74,222,128,.3); }
.acct-cred__head{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:13px; color:var(--win); margin-bottom:6px; }
.acct-cred__note{ font-family:"Barlow",sans-serif; font-size:13px; line-height:1.4; color:var(--fg-soft); margin:0 0 10px; }
.acct-cred__row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.acct-cred__lab{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:700; color:var(--fg-mute); }
.acct-cred__val{ font-family:"Barlow",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:15px; font-weight:700; letter-spacing:.02em; color:var(--fg);
  padding:5px 10px; border-radius:var(--r-sm); background:var(--ink-800); box-shadow:inset 0 0 0 1px var(--line-2); word-break:break-all; }
.acct-cred__acts{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }

/* payment history (receipts) inside the billing card */
.acct-receipts{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line-2); }
.acct-receipts__head{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:13px; color:var(--fg-soft); margin-bottom:12px; }
.acct-receipts__list{ display:flex; flex-direction:column; gap:8px; }
.acct-receipt{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 14px; border-radius:var(--r-md); background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px var(--line-2); }
.acct-receipt__main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.acct-receipt__date{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:15px; color:var(--fg); }
.acct-receipt__meta{ font-family:"Barlow",sans-serif; font-size:12.5px; color:var(--fg-mute); }
.acct-receipt__right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.acct-receipt__amt{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:16px; color:var(--fg); }
.acct-receipt__link{ font-family:"Barlow",sans-serif; font-size:13px; font-weight:600; color:var(--red-text); text-decoration:none; }
.acct-receipt__link:hover{ text-decoration:underline; }

/* security , active sessions list inside the Account card. Reuses the acct-* row language
   (boxed, padded rows like acct-member/acct-receipt); new acct-session(s) classes only. */
.acct-sessions{ display:flex; flex-direction:column; gap:4px; }
.acct-sessions__list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.acct-session{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 14px; border-radius:var(--r-md); background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px var(--line-2); }
.acct-session__who{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.acct-session__dev{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:15px; color:var(--fg); }
.acct-session__here{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:10px; font-weight:700;
  color:var(--silver-hi); padding:2px 6px; border-radius:999px; background:var(--ink-700); box-shadow:inset 0 0 0 1px var(--line-2); }
.acct-session__when{ font-family:"Barlow",sans-serif; font-size:12.5px; color:var(--fg-mute); }

/* operator dashboard , the org-level Account & Billing entry (a full-width clickable card) */
.dashacct{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  text-align:left; padding:16px 18px; margin-bottom:22px; border:0; border-radius:var(--r-md);
  cursor:pointer; color:var(--fg);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:box-shadow .15s var(--ease-snap), background .15s var(--ease-snap); }
.dashacct:hover{ background:linear-gradient(180deg, rgba(210,32,47,.10), rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(210,32,47,.42); }
.dashacct svg{ flex:0 0 auto; color:var(--fg-mute); transition:color .15s var(--ease-snap), transform .15s var(--ease-snap); }
.dashacct:hover svg{ color:var(--red-text); transform:translateX(2px); }
.dashacct__txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.dashacct__title{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:.04em; font-weight:700; font-size:16px; color:var(--fg); }
.dashacct__sub{ font-family:"Barlow",sans-serif; font-size:13px; color:var(--fg-mute); }
.acct-back{ margin-bottom:14px; }

/* =====================================================================
   FIELD SCOREKEEPER MODE , the field volunteer's focused, mobile-first, one-game screen.
   Phone-first: large type + big tap targets, single column, capped width on desktop.
   ===================================================================== */
.fsk{ max-width:560px; margin:0 auto; padding:clamp(14px,4vw,28px) var(--gut) 120px; }
.fsk__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:clamp(16px,4vw,26px); }
.fsk__eyebrow{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:.18em; font-weight:700; font-size:11px; color:var(--fg-mute); }
.fsk__field{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:clamp(28px,8vw,40px); line-height:1; color:var(--fg); margin-top:3px; }
.fsk__headR{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.fsk__change{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:12px; color:var(--fg-mute); background:rgba(255,255,255,0.04); box-shadow:inset 0 0 0 1px var(--line-2); border-radius:var(--r-pill); padding:7px 13px; cursor:pointer; min-height:36px; }
.fsk__change:hover{ color:var(--fg); }

/* the read-only master game clock on the scorekeeper screen (ticks every second) */
.fsk__clock{ display:flex; align-items:baseline; justify-content:center; gap:12px; margin:0 0 16px; padding:10px 16px; border-radius:var(--r-lg); background:linear-gradient(180deg,var(--ink-800),var(--ink-850)); box-shadow:inset 0 0 0 1px var(--line-2); }
.fsk__clocklab{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:.14em; font-weight:700; font-size:11px; color:var(--fg-mute); }
.fsk__clocktime{ font-family:"Anton",sans-serif; font-size:clamp(32px,9vw,46px); line-height:1; color:var(--fg-soft); font-variant-numeric:tabular-nums; }
.fsk__clock--run .fsk__clocktime{ color:#fff; }
.fsk__clock--warn .fsk__clocktime{ color:#F2B441; }
.fsk__clockstate{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.08em; font-weight:700; font-size:12px; color:var(--fg-mute); }
/* the demo's small field switcher (the demo visitor isn't field-assigned, so they can flip) */
.fsk__fieldsw{ display:flex; gap:6px; flex:0 0 auto; }
.fsk__fchip{ min-width:38px; min-height:38px; padding:0 10px; border-radius:var(--r-pill); font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:15px; color:var(--fg-mute); background:rgba(255,255,255,0.04); box-shadow:inset 0 0 0 1px var(--line-2); cursor:pointer; }
.fsk__fchip--on{ color:#fff; background:linear-gradient(180deg,rgba(210,32,47,0.34),rgba(210,32,47,0.18)); box-shadow:inset 0 0 0 1px rgba(210,32,47,0.62); }

.fsk__pickerTitle{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:clamp(22px,6vw,30px); color:var(--fg); }
.fsk__pickerSub{ color:var(--fg-soft); font-size:15px; line-height:1.5; margin:8px 0 18px; }
.fsk__pickerGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.fsk__pickBtn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:96px; border-radius:var(--r-lg); background:linear-gradient(180deg,var(--ink-800),var(--ink-850)); box-shadow:inset 0 0 0 1px var(--line-2); cursor:pointer; transition:transform .12s var(--ease-snap), box-shadow .15s var(--ease-snap); }
.fsk__pickBtn:hover{ box-shadow:inset 0 0 0 1px rgba(210,32,47,0.6); transform:translateY(-2px); }
.fsk__pickBtn:active{ transform:scale(0.97); }
.fsk__pickF{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.1em; font-weight:700; font-size:12px; color:var(--fg-mute); }
.fsk__pickBtn b{ font-family:"Anton",sans-serif; font-size:38px; line-height:1; color:var(--fg); }

.fsk__done{ text-align:center; padding:clamp(28px,8vw,56px) 0; }
.fsk__doneCheck{ width:64px; height:64px; margin:0 auto 14px; display:grid; place-items:center; border-radius:50%; background:rgba(74,222,128,0.16); box-shadow:inset 0 0 0 1px rgba(74,222,128,0.4); color:var(--win); font-size:34px; }
.fsk__doneTitle{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:clamp(22px,6vw,30px); color:var(--fg); }
.fsk__doneSub{ color:var(--fg-soft); font-size:15px; line-height:1.5; max-width:36ch; margin:8px auto 0; }

.fsk__card{ border-radius:var(--r-xl); background:linear-gradient(180deg,var(--ink-800),var(--ink-850)); box-shadow:var(--shadow-lift); border:1px solid var(--line-2); padding:clamp(14px,4vw,22px); }
.fsk__cardtop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.fsk__round{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:13px; color:var(--fg-mute); }
.fsk__cstatus{ display:inline-flex; align-items:center; gap:6px; font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:11px; padding:4px 10px; border-radius:var(--r-pill); }
.fsk__cstatus--live{ color:#fff; background:rgba(210,32,47,0.2); box-shadow:inset 0 0 0 1px rgba(255,58,69,0.5); }
.fsk__cstatus--ready{ color:var(--fg-mute); background:rgba(255,255,255,0.05); box-shadow:inset 0 0 0 1px var(--line-2); }

.fsk__team{ padding:10px 0; }
.fsk__teamline{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.fsk__teamname{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.01em; font-weight:700; font-size:clamp(22px,6vw,30px); line-height:1.04; color:var(--fg); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fsk__score{ font-family:"Anton",sans-serif; font-size:clamp(44px,14vw,68px); line-height:.9; color:#fff; flex:0 0 auto; font-variant-numeric:tabular-nums; }
.fsk__btns{ display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:8px; }
.fsk__btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:62px; border-radius:var(--r-md); background:rgba(255,255,255,0.04); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--fg-soft); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .1s var(--ease-snap), background .14s var(--ease-snap); }
.fsk__btn b{ font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:22px; line-height:1; color:var(--fg); }
.fsk__btn span{ font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase; letter-spacing:.04em; font-weight:600; font-size:10px; color:var(--fg-mute); }
.fsk__btn:active{ transform:scale(0.93); background:rgba(210,32,47,0.32); box-shadow:inset 0 0 0 1px rgba(255,58,69,0.7); }
.fsk__btn:first-child{ background:linear-gradient(180deg,rgba(210,32,47,0.22),rgba(210,32,47,0.1)); box-shadow:inset 0 0 0 1px rgba(210,32,47,0.5); }
.fsk__btn:first-child b{ color:#fff; }
.fsk__vs{ text-align:center; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.2em; font-size:11px; color:var(--fg-faint); margin:2px 0; }

.fsk__undolast{ display:block; width:100%; margin-top:14px; min-height:42px; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:13px; color:var(--fg-mute); background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); border-radius:var(--r-md); cursor:pointer; }
.fsk__undolast:hover{ color:var(--fg); box-shadow:inset 0 0 0 1px var(--line-3); }

.fsk__submitwrap{ margin-top:18px; }
.fsk__submit{ display:block; width:100%; min-height:60px; border-radius:var(--r-lg); font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.06em; font-weight:800; font-size:19px; color:#fff; background:linear-gradient(180deg,#2a2e3c,#20242f); box-shadow:inset 0 0 0 1px var(--line-3); cursor:pointer; transition:transform .1s var(--ease-snap), box-shadow .15s var(--ease-snap); }
.fsk__submit:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,0.28); }
.fsk__submit:active{ transform:scale(0.99); }
.fsk__submit--armed{ background:linear-gradient(180deg,var(--red-hot),var(--red)); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3), 0 12px 30px -12px rgba(210,32,47,0.85); animation:fskpulse 1s ease-in-out infinite; }
@keyframes fskpulse{ 0%,100%{ box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3), 0 12px 30px -12px rgba(210,32,47,0.7); } 50%{ box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5), 0 14px 36px -10px rgba(255,58,69,0.95); } }
.fsk__submithint{ text-align:center; color:var(--fg-mute); font-size:13px; line-height:1.4; margin:10px 4px 0; }

/* pickleball best-of-1 clinch hint + best-of-N set entry */
.fsk__clinch{ display:flex; align-items:center; gap:9px; justify-content:center; margin:14px 0 2px; padding:11px 14px; border-radius:var(--r-md,12px); background:rgba(74,222,128,0.08); box-shadow:inset 0 0 0 1px rgba(74,222,128,0.32); color:var(--win,#4ade80); font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.04em; font-weight:700; font-size:14px; text-align:center; }
.fsk__clinchDot{ width:9px; height:9px; border-radius:50%; background:var(--win,#4ade80); box-shadow:0 0 10px rgba(74,222,128,0.8); flex:0 0 auto; }
.fsk__sets{ margin-top:10px; }
.fsk__setshead{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.06em; font-weight:800; font-size:13px; color:var(--fg-mute); text-align:center; margin-bottom:10px; }
.fsk__setsnames{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:14px; }
.fsk__setsname{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.03em; font-weight:800; font-size:18px; color:#fff; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fsk__setsvs{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.2em; font-size:11px; color:var(--fg-faint); flex:0 0 auto; }
.fsk__setrow{ display:flex; align-items:center; justify-content:center; gap:10px; margin:8px 0; }
.fsk__setlbl{ flex:0 0 64px; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.05em; font-weight:700; font-size:13px; color:var(--fg-mute); }
.fsk__setinp{ width:74px; min-height:54px; text-align:center; font-size:26px; font-variant-numeric:tabular-nums; }
.fsk__setdash{ color:var(--fg-faint); font-weight:700; }
.fsk__setread{ text-align:center; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.05em; font-weight:800; font-size:15px; color:var(--fg-mute); margin:14px 0 16px; }
.fsk__setread--ok{ color:var(--win,#4ade80); }
/* admin Setup: match-format control */
.mfmt .mfmt__num{ flex:1 1 0; min-width:0; }
.mfmt .mfmt__num label{ display:block; font-size:12px; color:var(--fg-mute); margin-bottom:4px; }

.fsk__undo{ margin-top:18px; padding:16px; border-radius:var(--r-lg); background:rgba(74,222,128,0.08); box-shadow:inset 0 0 0 1px rgba(74,222,128,0.32); text-align:center; }
.fsk__undoMsg{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.06em; font-weight:800; font-size:16px; color:var(--win); }
.fsk__undobtn{ display:inline-block; margin:10px 0 6px; min-height:48px; padding:0 28px; border-radius:var(--r-pill); font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.08em; font-weight:800; font-size:16px; color:#fff; background:linear-gradient(180deg,#2a2e3c,#20242f); box-shadow:inset 0 0 0 1px var(--line-3); cursor:pointer; }
.fsk__undobtn:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,0.28); }
.fsk__undosub{ color:var(--fg-mute); font-size:13px; line-height:1.4; margin:6px auto 0; max-width:36ch; }

.fsk__tie{ margin-top:18px; padding:16px; border-radius:var(--r-lg); background:rgba(210,32,47,0.08); box-shadow:inset 0 0 0 1px rgba(210,32,47,0.32); }
.fsk__tieHead{ font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.04em; font-weight:800; font-size:16px; color:var(--red-text); text-align:center; }
.fsk__tieSub{ color:var(--fg-soft); font-size:14px; line-height:1.5; text-align:center; margin:8px 0 14px; }
.fsk__tiepick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fsk__tiebtn{ min-height:58px; border-radius:var(--r-md); font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.02em; font-weight:800; font-size:16px; color:var(--fg); background:rgba(255,255,255,0.05); box-shadow:inset 0 0 0 1px var(--line-2); cursor:pointer; padding:0 8px; }
.fsk__tiebtn:hover{ color:#fff; box-shadow:inset 0 0 0 1px rgba(210,32,47,0.6); }
.fsk__tiebtn:active{ transform:scale(0.97); }

@media (prefers-reduced-motion: reduce){
  .fsk__submit--armed{ animation:none; }
  .fsk__pickBtn, .fsk__btn, .fsk__submit, .fsk__tiebtn{ transition:none; }
}

/* =====================================================================
   Access-paused banner (Phase 3): a friendly "your pass lapsed, reactivate"
   on-ramp. Amber/attention tone , distinct from the brand red (live/error)
   and green (win). Shown only to a signed-in operator whose org is read-only.
   ===================================================================== */
.accessban-wrap{ margin-top: 14px; }
.accessban{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px;
  border: 1px solid rgba(242,179,65,0.40);
  background: linear-gradient(180deg, rgba(242,179,65,0.14), rgba(242,179,65,0.06));
  border-radius: var(--r-md, 12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.accessban__ic{ flex: 0 0 auto; margin-top: 1px; color: #F2B341; display: flex; }
.accessban__body{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.accessban__tag{
  font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 700; font-size: 13px; color: #F2B341;
}
.accessban__msg{ color: var(--fg-soft); font-size: 14px; line-height: 1.45; }
.accessban__cta{
  flex: 0 0 auto; align-self: center; cursor: pointer; border: 0;
  background: var(--red); color: #fff;
  font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.05em; font-weight: 700; font-size: 14px;
  padding: 9px 16px; border-radius: var(--r-sm, 8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 0 var(--red-deep);
}
.accessban__cta:hover{ filter: brightness(1.06); }
.accessban__cta:active{ transform: translateY(1px); }
.accessban__note{ flex: 0 0 auto; align-self: center; color: var(--fg-mute); font-size: 13px; }
@media (max-width: 640px){
  .accessban{ flex-wrap: wrap; }
  .accessban__cta, .accessban__note{ align-self: stretch; width: 100%; text-align: center; margin-top: 4px; }
}