/* ═══════════════════════════════════════════════════════════
   YUASA PADELBANG FINAL SERIES VOL. 5 — Shared styles
   BLACK / RED semi sci-fi. Near-black base, crimson accent, cold
   white text, thin luminous rules.
   NOTE: the accent variables keep their historical names (--yellow,
   --orange) because ~70 rules across this file reference them. Only the
   VALUES changed — do not rename them without sweeping the whole file.
   DANGER is amber, not red: with a red accent an error state in red is
   invisible, so caution/destructive states moved to #FF9F1A.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Sampled from the Vol. 5 key visual: base #010101, brand red #EF161F.
     The greys are NEUTRAL, not blue-tinted — the KV's blacks have no cast,
     and a blue-grey UI beside it reads as a different product. */
  --black:    #010101;
  --black2:   #070707;
  --black3:   #0D0D0D;
  --surface:  #111111;
  --surface2: #191919;
  --border:   #212121;
  --border2:  #2F2F2F;

  --yellow:   #EF161F;   /* Yuasa red — primary accent */
  --yellow2:  #FF3A43;   /* red highlight              */
  --orange:   #A00A11;   /* deep red — secondary       */
  --gold:     #EF161F;
  --gold2:    #6E070B;

  --olive:    #3A3A3A;   /* graphite */
  --forest:   #1A1A1A;

  --text:     #FFFFFF;
  --muted:    #7C7C7C;
  --muted2:   #B0B0B0;

  --green:    #29E07B;   /* live / success — kept, it is semantic */
  --red:      #FF9F1A;   /* DANGER = amber; see note above        */
  --assessment: #8B6BFF;

  --accent:   var(--yellow);
  --accent2:  var(--orange);

  /* ── Spacing scale (8px base) ── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ── Type scale ── */
  --t-xs: 11px; --t-sm: 13px; --t-md: 15px; --t-lg: 18px;
  --t-xl: 24px; --t-2xl: 32px; --t-3xl: 44px;

  /* ── Radius — nothing is round ── */
  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0;

  /* ── Category colours — TEN distinct, colourblind-aware hues ──
     Gender is a separate filter layer, so every category gets its own
     colour. Category CODE text is rendered alongside the swatch everywhere
     (categoryCode() in core.js), so colour is never the sole signal — which
     matters a lot more at ten categories than it did at six. */
  --mgo: #EF161F;  /* Men Gold Open      — Yuasa red */
  --mhs: #EDEDED;  /* Men High Silver    — platinum  */
  --msv: #8FA0C4;  /* Men Silver         — steel     */
  --xsv: #A96BFF;  /* Mix Silver         — violet    */
  --mhb: #FF7A38;  /* Men High Bronze    — ember     */
  --whb: #FF8FC4;  /* Women High Bronze  — pink      */
  --mbr: #C4713C;  /* Men Bronze         — bronze    */
  --wbr: #FF4F7E;  /* Women Bronze       — rose      */
  --xbr: #35D6C0;  /* Mix Bronze         — aqua      */
  --k16: #FFD34D;  /* Ku 16              — amber     */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--black); color: var(--text); font-family: 'Inter', sans-serif; min-height: 100vh; }
/* Faint engineering grid over the black so it reads as a surface, not a void.
   Fixed + pointer-events:none so it never interferes with layout or hit
   testing, and it stays put while content scrolls. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 78%);
}
.app, .topbar, .tabs, .content, .modal-overlay { position: relative; z-index: 1; }
a { color: var(--yellow); text-decoration: none; }


/* ── Layout ───────────────────────────────────────────────── */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  background: var(--black2); border-bottom: 1px solid var(--border);
  padding: 12px 20px; display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 90;
}
.topbar-logo-img {
  height: 36px; width: auto; display: block;
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .topbar-logo-img { height: 28px; }
}
.topbar-role {
  font-size: 10px; color: var(--gold); letter-spacing: .15em;
  text-transform: uppercase; padding: 4px 10px;
  border-radius: 0; background: rgba(239,22,31,.1);
  border: 1px solid var(--gold2); margin-left: auto;
}

.tabs {
  display: flex; gap: 4px; padding: 8px 16px; overflow-x: auto;
  background: var(--black2); border-bottom: 1px solid var(--border);
}
.tab {
  background: transparent; border: 1px solid transparent;
  color: var(--muted); padding: 8px 16px; border-radius: 0;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  font-family: 'Inter', sans-serif; transition: all .15s;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--yellow); color: var(--black); }

.tab-badge {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 0; line-height: 14px; text-align: center;
  font-family: 'JetBrains Mono', monospace;
}
.tab.active .tab-badge { background: var(--black); color: var(--yellow); }
body.light-mode .tab.active .tab-badge { background: #17171F; color: var(--yellow); }

.content { flex: 1; padding: 20px; max-width: 1400px; margin: 0 auto; width: 100%; }

/* ── Section header ───────────────────────────────────────── */
.sec-header {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.sec-title {
  font-family: 'Rajdhani', sans-serif; font-size: 24px;
  font-weight: 700;
  color: var(--text); letter-spacing: .02em;
  text-transform: uppercase;
}
.sec-title span { color: var(--yellow); }
.sec-count {
  font-size: 11px; color: var(--muted); letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Filter pills ─────────────────────────────────────────── */
.filter-row {
  display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap;
}
/* Two-layer filter: gender row sits just above the category row */
.filter-row-gender { margin-bottom: 8px; }
.pill-gender {
  font-family: 'Rajdhani', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; font-size: 10px; padding: 7px 16px;
}
.pill-gender.active { background: var(--gold); color: #000; border-color: var(--gold); }
.pill {
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--muted); padding: 7px 14px; border-radius: 0;
  font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap;
  font-family: 'Inter', sans-serif; transition: all .15s;
}
.pill:hover { border-color: var(--gold); color: var(--gold); }
.pill.active { background: var(--yellow); color: var(--black); border-color: var(--yellow); }

/* ── Compact mobile filter ── */
.filter-compact { display: none; }
@media (max-width: 620px) {
  .filter-full { display: none; }
  .filter-compact {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface2); border: 1px solid var(--border2);
    border-radius: 0; padding: 11px 14px; margin-bottom: 16px; cursor: pointer;
    user-select: none;
  }
  .filter-compact .fc-ico { font-size: 14px; opacity: .8; }
  .filter-compact .fc-text { flex: 1; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 7px; }
  .filter-compact .fc-text b { font-family: 'Rajdhani', sans-serif; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--gold); }
  .filter-compact .fc-sep { color: var(--muted); }
  .filter-compact .fc-caret { color: var(--gold); font-size: 12px; }
}
.filter-sheet-overlay {
  position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end; animation: fsFade .2s ease;
}
@keyframes fsFade { from { opacity: 0 } to { opacity: 1 } }
.filter-sheet {
  width: 100%; background: var(--surface); border-top-left-radius: 20px; border-top-right-radius: 20px;
  border-top: 1px solid var(--gold2); padding: 10px 18px 28px; max-height: 80vh; overflow-y: auto;
  animation: fsUp .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes fsUp { from { transform: translateY(100%) } to { transform: translateY(0) } }
.fs-handle { width: 40px; height: 4px; border-radius: 0; background: var(--border2); margin: 0 auto 16px; }
.fs-title { font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: .1em; text-transform: uppercase; margin: 14px 0 10px; }
.fs-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-pill {
  background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
  padding: 11px 16px; border-radius: 0; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.fs-pill.active { background: var(--yellow); color: #000; border-color: var(--yellow); }

/* ── Time block ───────────────────────────────────────────── */
.time-block { margin-bottom: 24px; }
.time-hdr {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
  cursor: pointer; user-select: none;
}
.time-tag {
  font-family: 'Rajdhani', sans-serif; font-size: 14px;
  font-weight: 700;
  color: var(--yellow); letter-spacing: .03em;
}
.time-line { flex: 1; height: 1px; background: var(--border); }
.time-pill {
  font-size: 10px; color: var(--gold); letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 0;
  border: 1px solid var(--gold2);
}
.time-chevron { font-size: 14px; color: var(--muted); transition: transform .2s; }
.time-block.collapsed .time-chevron { transform: rotate(-90deg); }
.time-block.collapsed .match-grid { display: none; }

.match-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

/* ── Match card ───────────────────────────────────────────── */
.match-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0; padding: 14px; position: relative; overflow: hidden;
  transition: border-color .15s;
}
.match-card::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px; background: var(--gold);
}
.match-card.cat-mgo::before { background: var(--mgo); }
.match-card.cat-msv::before { background: var(--msv); }
.match-card.cat-wsv::before { background: var(--wsv); }
.match-card.cat-xsv::before { background: var(--xsv); }
.match-card.cat-mbr::before { background: var(--mbr); }
.match-card.cat-wbr::before { background: var(--wbr); }
.match-card.scored { border-color: rgba(41,224,123,.3); }
.match-card.live   { border-color: rgba(41,224,123,.5);
  box-shadow: 0 0 12px rgba(41,224,123,.1); }

.card-meta {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  flex-wrap: wrap;
}
.court-tag {
  font-size: 10px; color: var(--gold); letter-spacing: .08em;
  background: rgba(239,22,31,.1); padding: 3px 8px; border-radius: 0;
  font-weight: 700; text-transform: uppercase;
}
.grp-tag {
  font-size: 9px; color: var(--text); letter-spacing: .08em;
  padding: 3px 8px; border-radius: 0; font-weight: 700;
  text-transform: uppercase;
  background: rgba(255,255,255,.05); border: 1px solid var(--border2);
}
.live-badge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; color: var(--green);
  letter-spacing: .12em;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

@keyframes refSavePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(41,224,123,0); }
  50%      { transform: scale(1.02); box-shadow: 0 0 20px 4px rgba(41,224,123,.35); }
}

.teams-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 10px;
}
.team-name {
  font-size: 13px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
}
.team-name.right { text-align: right; }
.team-name.win   { color: var(--green); }
.team-name.lose  { color: var(--muted); }
.team-name.tbd   { color: var(--muted2); font-style: italic; font-size: 11px; }
.vs-lbl {
  font-family: 'Rajdhani', sans-serif; font-size: 14px;
  color: var(--muted2); text-align: center;
}
.score-pill {
  font-family: 'Rajdhani', sans-serif; font-size: 16px;
  font-weight: 700;
  color: var(--green); letter-spacing: .02em;
}

/* ── Inputs ───────────────────────────────────────────────── */
input, select, textarea, button {
  font-family: 'Inter', sans-serif;
}
.input, input[type=text], input[type=number], input[type=email], input[type=tel], input[type=password], select, textarea {
  width: 100%; background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); border-radius: 0; padding: 10px 14px;
  font-size: 14px; outline: none; transition: border-color .15s;
}
.input:focus, input:focus, select:focus, textarea:focus { border-color: var(--yellow); }
label {
  font-size: 10px; color: var(--gold); text-transform: uppercase;
  letter-spacing: .15em; display: block; margin-bottom: 5px; font-weight: 700;
}

.btn-primary {
  background: var(--yellow); color: var(--black); border: none;
  border-radius: 0; padding: 12px 24px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: 'Inter', sans-serif;
}
.btn-primary:hover { background: var(--yellow2); }
.btn-secondary {
  background: transparent; color: var(--gold); border: 1px solid var(--gold);
  border-radius: 0; padding: 8px 16px; font-size: 12px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 600;
}
.btn-secondary:hover { background: rgba(239,22,31,.1); }
.btn-danger {
  background: transparent; color: var(--red); border: 1px solid var(--red);
  border-radius: 0; padding: 6px 12px; font-size: 11px; cursor: pointer;
}
.btn-success {
  background: var(--green); color: var(--black); border: none;
  border-radius: 0; padding: 10px 18px; font-size: 13px; cursor: pointer;
  font-weight: 700;
}

/* ── Table ────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--border);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--gold); letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700;
}
.tbl td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.tbl tr:hover td { background: rgba(239,22,31,.03); }

/* ── Cards & misc ─────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0; padding: 16px;
}

.empty-state {
  padding: var(--s7) var(--s4); text-align: center; color: var(--muted);
}

/* ── Category badge (color + color-independent code) ── */
.cat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .02em; white-space: nowrap;
}
.cat-badge-dot {
  width: 9px; height: 9px; border-radius: 0; background: var(--cc);
  flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
}
.cat-badge-code { color: var(--cc); }
.cat-badge-label { color: var(--text); font-family: 'Inter', sans-serif; font-weight: 600; margin-left: 2px; }

/* ── Refined empty states ── */
.empty-rich {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  padding: var(--s7) var(--s4); text-align: center;
}
.empty-rich .er-emoji { font-size: 46px; opacity: .55; }
.empty-rich .er-title { font-family: 'Rajdhani', sans-serif; font-size: var(--t-md); font-weight: 700; color: var(--text); letter-spacing: .02em; }
.empty-rich .er-sub { font-size: var(--t-sm); color: var(--muted); max-width: 360px; line-height: 1.6; }
.empty-rich .er-action { margin-top: var(--s2); }

/* ── Loading skeletons ── */
.skel-wrap { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s2) 0; }
.skel {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 37%, var(--surface) 63%);
  background-size: 400% 100%; border-radius: 0;
  animation: skelShimmer 1.4s ease infinite;
}
.skel-card { height: 84px; }
.skel-row { height: 44px; }
.skel-line { height: 14px; border-radius: 0; }
@keyframes skelShimmer { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ── Fast scoring card (admin event-day) ── */
.score-card .score-row {
  display: flex; align-items: center; gap: var(--s3); margin: var(--s2) 0;
}
.score-card .score-team {
  flex: 1; font-size: var(--t-sm); font-weight: 600; color: var(--text);
  line-height: 1.25; min-width: 0; word-break: break-word;
}
.score-card .score-team.win { color: var(--green); }
.score-stepper { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.step-btn {
  width: 38px; height: 38px; border-radius: 0; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--yellow); font-size: 22px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1; user-select: none; transition: all .12s; font-family: 'Inter', sans-serif;
}
.step-btn:active { transform: scale(.9); background: var(--yellow); color: #000; }
.score-input {
  width: 46px; height: 38px; text-align: center; font-size: 18px; font-weight: 700;
  font-family: 'Rajdhani', sans-serif; padding: 0; border-radius: 0;
}
.quick-scores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.quick-pill {
  background: var(--surface2); border: 1px solid var(--border2); color: var(--muted2);
  border-radius: 0; padding: 7px 11px; font-size: 12px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace; cursor: pointer; transition: all .12s;
}
.quick-pill:hover { border-color: var(--green); color: var(--green); }
.quick-pill:active { background: var(--green); color: #000; transform: scale(.94); }
.quick-pill.clear { border-color: var(--gold2); color: var(--muted); margin-left: auto; }
.quick-pill.clear:hover { border-color: var(--red); color: var(--red); }
.score-saved-tag { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--green); letter-spacing: .04em; }
.score-card.scored { border-color: var(--gold2); }

/* ── Queue awareness + remind (My Team) ── */
.queue-banner {
  margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: 0;
  background: var(--surface2); border: 1px solid var(--border2);
  display: flex; flex-direction: column; gap: 2px;
}
.queue-banner.up-next {
  background: linear-gradient(135deg, rgba(41,224,123,.14), rgba(41,224,123,.04));
  border-color: var(--green); animation: upNextPulse 1.8s ease infinite;
}
@keyframes upNextPulse { 0%,100% { border-color: var(--green); } 50% { border-color: rgba(41,224,123,.4); } }
.queue-banner .q-big {
  font-family: 'Rajdhani', sans-serif; font-size: var(--t-md); font-weight: 700;
  color: var(--yellow); letter-spacing: .02em;
}
.queue-banner.up-next .q-big { color: var(--green); }
.queue-banner .q-sub { font-size: var(--t-xs); color: var(--muted2); }
.remind-btn {
  width: 100%; margin-top: var(--s3); padding: 12px; border-radius: 0;
  background: transparent; border: 1px solid var(--gold2); color: var(--gold);
  font-size: var(--t-sm); font-weight: 600; cursor: pointer; transition: all .15s;
  font-family: 'Inter', sans-serif;
}
.remind-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.remind-btn:active { transform: scale(.98); }

/* ── Spectator follow cards (Now search) ── */
.follow-list { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.follow-card {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 0;
  padding: var(--s3) var(--s4); cursor: pointer; transition: all .14s; text-align: left;
}
.follow-card:hover { border-color: var(--yellow); transform: translateX(2px); }
.follow-card:active { transform: scale(.99); }
.follow-card .fc-info { flex: 1; min-width: 0; }
.follow-card .fc-name { font-size: var(--t-md); font-weight: 600; color: var(--text); }
.follow-card .fc-cat { font-size: var(--t-xs); color: var(--muted2); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.follow-card .fc-go {
  flex: 0 0 auto; font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700;
  color: var(--yellow); letter-spacing: .03em; white-space: nowrap;
}

/* ── Admin: Add Team modal ── */
.at-overlay {
  position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.8);
  display: flex; align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto;
}
.at-modal {
  background: var(--surface); border: 1px solid var(--gold2); border-radius: 0;
  max-width: 520px; width: 100%; margin: 24px auto; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.at-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border2);
  font-family: 'Rajdhani', sans-serif; font-size: var(--t-md); font-weight: 700; color: var(--yellow);
  letter-spacing: .04em;
}
.at-close { background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.at-close:hover { color: var(--red); }
.at-body { padding: 20px; }
.at-note { font-size: 12px; color: var(--muted); line-height: 1.5; background: var(--surface2); border: 1px solid var(--border2); border-radius: 0; padding: 10px 12px; margin-bottom: 16px; }
.at-label { display: block; font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; margin: 14px 0 6px; }
.at-modal input, .at-modal select {
  width: 100%; padding: 10px 12px; margin-bottom: 8px; font-size: 13px;
  background: var(--surface2); border: 1px solid var(--border2); border-radius: 0; color: var(--text);
}
.at-row { display: flex; gap: 8px; }
.at-row > * { flex: 1; min-width: 0; }
.at-player { background: var(--surface2); border: 1px solid var(--border); border-radius: 0; padding: 14px; margin-top: 12px; }
.at-player-title { font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.at-pay-toggle { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.at-radio { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.at-radio input { width: auto; margin: 0; }
.at-err { color: var(--red); font-size: 12px; min-height: 16px; margin: 6px 0; text-align: center; }

/* ── Edit team: photo upload rows ── */
.et-photo { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border2); border-radius: 0; }
.et-photo-label { font-size: 11px; color: var(--muted); font-weight: 600; }
.et-photo-state { font-size: 11px; color: var(--muted2); flex: 1; }
.et-photo-btn { padding: 6px 12px !important; font-size: 11px !important; width: auto !important; margin: 0 !important; flex: 0 0 auto; }

/* ── Assessment tab: bold purple, pushed to the right ── */
.tab.tab-assessment {
  margin-left: auto;                 /* stands alone on the right */
  color: #fff; font-weight: 800;
  background: var(--assessment);
  border-color: var(--assessment);
  letter-spacing: .04em; text-transform: uppercase;
}
.tab.tab-assessment:hover { background: #9333ea; border-color: #9333ea; color: #fff; }
.tab.tab-assessment.active {
  background: var(--assessment); color: #fff; border-color: #fff;
  box-shadow: 0 0 0 2px rgba(168,85,247,.4);
}

/* ── Assessment screening cards ── */
.asmt-intro { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; max-width: 720px; }
.asmt-list { display: flex; flex-direction: column; gap: 14px; }
.asmt-card {
  border: 1px solid var(--border2); border-left: 4px solid var(--cat-accent, var(--assessment));
  border-radius: 0; background: var(--surface); overflow: hidden;
}
.asmt-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 16px; flex-wrap: wrap;
}
.asmt-team-name { font-size: 15px; font-weight: 700; color: var(--text); }
.asmt-code { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--gold); border: 1px solid var(--gold2); border-radius: 0; padding: 1px 6px; margin-left: 4px; }
.asmt-phones { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 11px; color: var(--muted2); }
.asmt-cat-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.asmt-cat {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: #fff;
  padding: 4px 10px; border-radius: 0; white-space: nowrap;
}
.asmt-edit-btn { background: transparent; border: 1px solid var(--assessment); color: var(--assessment); border-radius: 0; padding: 4px 10px; font-size: 11px; font-weight: 600; cursor: pointer; }
.asmt-edit-btn:hover { background: var(--assessment); color: #fff; }
.asmt-edit { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.asmt-edit select { padding: 7px 10px; font-size: 12px; border-radius: 0; }
.asmt-history { border-top: 1px solid var(--border); padding: 12px 16px; background: var(--surface2); }
.asmt-history-title { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.asmt-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.asmt-table th { text-align: left; padding: 6px 10px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.asmt-table td { padding: 8px 10px; color: var(--text); border-bottom: 1px solid var(--border); }
.asmt-table tr:last-child td { border-bottom: none; }
.asmt-table .asmt-lvl { color: var(--gold); font-weight: 700; }
.asmt-empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 6px 0; }

/* ── Multi-category player-centric view ── */
.mcp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.mcp-card { border: 1px solid var(--assessment); border-radius: 0; background: var(--surface); overflow: hidden; }
.mcp-head { padding: 14px 16px; border-bottom: 1px solid var(--border); background: rgba(168,85,247,.05); }
.mcp-name { font-size: 15px; font-weight: 700; color: var(--text); }
.mcp-meta { font-size: 11px; color: var(--muted2); margin-top: 4px; }
.mcp-entries { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.mcp-entry { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; background: var(--surface2); border-radius: 0; transition: background .14s, border-color .14s; }
.mcp-entry:hover { background: #26221f; }
.mcp-cat { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; }
.mcp-partner { font-size: 12px; color: var(--muted2); }
.mcp-code { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--gold); border: 1px solid var(--gold2); border-radius: 0; padding: 1px 6px; }

/* ── Group rankings: charcoal card containers ── */
.grp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1000px) { .grp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .grp-grid { grid-template-columns: 1fr; } }
.grp-card { background: #1e1e1e; border: 1px solid #333333; border-radius: 0; overflow: hidden; }
/* Footnote under each group table: how many pairs advance. */
/* Resolved bracket hint under a typed direct-knockout draw size. */
.br-resolve { font-size: 9px; color: var(--muted2); margin-top: 3px; white-space: nowrap; font-family: 'JetBrains Mono', monospace; }

/* ── Group Edit tab ───────────────────────────────────────── */
.ge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ge-group { background: #1e1e1e; border: 1px solid #333; border-radius: 0; min-height: 120px;
  display: flex; flex-direction: column; transition: border-color .12s, background .12s; }
.ge-group.over { border-color: var(--yellow); background: #232018; }
.ge-group.ge-loose { border-style: dashed; border-color: #444; }
.ge-group-head { font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--yellow); padding: 9px 12px; border-bottom: 1px solid #2c2c2c; display: flex; justify-content: space-between; }
.ge-group-head span { color: var(--muted2); font-weight: 400; }
.ge-group-body { padding: 8px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.ge-empty { font-size: 11px; color: #555; text-align: center; padding: 18px 0; font-style: italic; }
.ge-pair { background: #262626; border: 1px solid #3a3a3a; border-radius: 0; padding: 8px 10px; cursor: grab; }
.ge-pair:active { cursor: grabbing; }
.ge-pair.dragging { opacity: .4; }
.ge-pair-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.ge-pair-players { font-size: 10px; color: var(--muted2); margin: 2px 0 6px; }
.ge-cat { width: 100%; background: #1a1a1a; color: var(--muted); border: 1px solid #3a3a3a;
  border-radius: 0; padding: 4px 6px; font-size: 10.5px; cursor: pointer; }
.ge-cat:hover { color: var(--text); border-color: var(--gold2); }

.grp-advance-note { font-size: 10px; font-style: italic; color: var(--muted2);
  text-align: right; padding: 6px 10px 8px; line-height: 1.3; }
.grp-card-head { font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--yellow); padding: 12px 16px; background: #282828; border-bottom: 1px solid #333333; }
.grp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.grp-table th { text-align: center; padding: 8px 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid #333333; }
.grp-table th.grp-team { text-align: left; }
.grp-table td { text-align: center; padding: 9px 6px; border-bottom: 1px solid #282828; color: var(--text); }
.grp-table tr:last-child td { border-bottom: none; }
.grp-table td.grp-team { text-align: left; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.grp-pos { width: 28px; }
.grp-rank { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; font-weight: 700; background: #333333; color: var(--muted2); }
.grp-rank.gold { background: var(--yellow); color: #08080B; }
.grp-rank.silver { background: #c8cdd4; color: #08080B; }
.grp-qualify { background: rgba(239,22,31,.05); }

/* ── Sets-based scoring (Open categories) ── */
.fmt-tag { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--assessment); border: 1px solid var(--assessment); border-radius: 0; padding: 1px 6px; }
.sets-grid { display: flex; align-items: stretch; gap: 6px; margin: 10px 0 4px; }
.sets-teamcol { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.sets-team { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 38px; display: flex; align-items: center; }
.sets-team.win { color: var(--green); font-weight: 700; }
.sets-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.sets-col-label { font-size: 9px; color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; height: 12px; }
.set-input { width: 42px; height: 38px; text-align: center; font-family: 'Rajdhani', sans-serif; font-size: 17px; font-weight: 700; border: 1px solid var(--border2); border-radius: 0; background: var(--surface2); color: var(--text); padding: 0; }
.set-input:focus { border-color: var(--yellow); outline: none; }
.sets-woncol { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; padding-left: 4px; border-left: 1px solid var(--border); margin-left: 2px; }
.sets-won-label { font-size: 9px; color: var(--gold); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; height: 12px; }
.sets-won { width: 30px; height: 38px; display: flex; align-items: center; justify-content: center; font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 900; color: var(--muted); }
.sets-won.win { color: var(--green); }

/* ── Site login gate ──────────────────────────────────────── */
.login-gate {
  position: fixed; inset: 0; z-index: 999999; background: var(--black);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 24px; padding: 20px;
}
.login-gate-title {
  font-family: 'Rajdhani', sans-serif; font-size: 28px;
  color: var(--yellow); letter-spacing: .08em; text-align: center;
  line-height: 1.2;
}
.login-gate-sub {
  color: var(--text); font-size: 16px; letter-spacing: .15em;
}
.login-gate-card {
  background: var(--surface); border: 2px solid var(--gold);
  border-radius: 0; padding: 32px; width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 14px;
}

/* ── Bracket visual ───────────────────────────────────────── */
.bracket-wrap {
  display: flex; gap: 20px; overflow-x: auto; padding-bottom: 12px;
}
.bracket-col {
  display: flex; flex-direction: column; gap: 12px; min-width: 200px;
  justify-content: space-around;
}
.bracket-col-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--muted); letter-spacing: .15em; text-align: center;
  text-transform: uppercase; margin-bottom: 4px;
}
.bracket-match {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0; overflow: hidden;
}
.bracket-team {
  padding: 8px 12px; font-size: 11px; font-weight: 600;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.bracket-team:last-child { border-bottom: none; }
.bracket-team.win { color: var(--green); background: rgba(41,224,123,.05); }
.bracket-team.lose { color: var(--muted); }
.bracket-team.tbd { color: var(--muted2); font-style: italic; }
/* "Winner of PR 2" style placeholders — readable, but clearly not a name. */
.bracket-team.pending .bt-name {
  color: var(--muted); font-style: italic; font-weight: 500;
  font-size: 10px; letter-spacing: .02em;
}
.bracket-score {
  margin-left: auto; font-family: 'Rajdhani', sans-serif;
  font-size: 14px; color: var(--yellow);
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .content { padding: 12px; }
  .sec-title { font-size: 24px; }
  .match-grid { grid-template-columns: 1fr; }
  .topbar { padding: 10px 14px; }
}

/* ═══════════════════════════════════════════════════════════
   REGISTRATION PAGE — matches PDF design
   Light inputs, big yellow CTAs, gender/level toggle pills
   ═══════════════════════════════════════════════════════════ */
.reg-welcome {
  max-width: 720px; margin: 60px auto; padding: 20px;
  text-align: center;
}
.reg-welcome .welcome-prelude {
  font-family: 'Inter', sans-serif; font-size: 20px;
  color: var(--text); margin-bottom: 8px; font-weight: 400;
}
.reg-welcome .welcome-title {
  font-family: 'Rajdhani', sans-serif; color: var(--yellow);
  font-size: 34px; letter-spacing: .01em; line-height: 1.15;
  font-weight: 700; margin-bottom: 24px;
  text-transform: uppercase;
}
.reg-welcome .welcome-body {
  font-family: 'Inter', sans-serif; font-size: 15px;
  color: var(--text); line-height: 1.6; margin-bottom: 14px;
  max-width: 600px; margin-left: auto; margin-right: auto;
}
.reg-welcome .welcome-cta {
  font-family: 'Rajdhani', sans-serif; font-size: 18px;
  font-weight: 700;
  letter-spacing: .05em; padding: 18px 40px; margin-top: 28px;
  width: 100%; max-width: 460px;
}

/* `.reg-form-light` is a leftover LIGHT-form variant from the original
   PDF-style registration design. It painted fields #ecece4 with #111 text,
   and #fff on focus. Under the military theme that produced white-on-white:
   the global dark rules won for text colour (equal specificity, declared
   later) while `.reg-form-light input:focus` still won for the background.
   The class is kept because register.html applies it and it also hides the
   labels, but the field colours are now dark like every other form. */
.reg-form-light input,
.reg-form-light select,
.reg-form-light textarea,
.reg-form-light input:hover,
.reg-form-light select:hover,
.reg-form-light input:focus,
.reg-form-light select:focus,
.reg-form-light textarea:focus,
.reg-form-light input:active,
.reg-form-light input:valid,
.reg-form-light input:invalid,
.reg-form-light input:-webkit-autofill,
.reg-form-light select:-webkit-autofill {
  background: #070707;
  background-color: #070707;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  border: 1px solid var(--armour, #3B4A30);
  font-weight: 500;
}
.reg-form-light input:focus,
.reg-form-light select:focus,
.reg-form-light textarea:focus {
  border-color: var(--yellow);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5), 0 0 0 2px rgba(239,22,31,.22);
}
.reg-form-light input::placeholder,
.reg-form-light textarea::placeholder { color: #55556A; opacity: 1; }
.reg-form-light option { background: #070707; color: var(--text); }
.reg-form-light label {
  display: none; /* PDF design uses placeholder-only inputs */
}

.player-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .player-grid { grid-template-columns: 1fr; }
}

.gender-toggle {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin-bottom: 24px;
}
.gender-btn {
  background: #545454; color: #fff; border: 2px solid transparent;
  border-radius: 0; padding: 22px 8px;
  font-family: 'Rajdhani', sans-serif; font-size: 19px;
  font-weight: 700;
  letter-spacing: .03em; cursor: pointer; transition: all .15s;
  text-transform: uppercase;
}
.gender-btn.active {
  background: var(--yellow); color: #000;
}
.gender-btn:hover:not(.active) { background: #6a6a6a; }

.level-toggle {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.level-btn {
  background: #545454; color: #fff; border: 1px solid transparent;
  border-radius: 0; padding: 16px 10px;
  font-family: 'Rajdhani', sans-serif; font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em; cursor: pointer; transition: all .15s;
  text-transform: uppercase;
}
.level-btn.active {
  background: var(--yellow); color: #000;
}
.level-btn:hover:not(.active) { background: #6a6a6a; }
.level-btn.unavailable {
  opacity: .35; cursor: not-allowed; text-decoration: line-through;
}

.reg-confirm {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 0; padding: 14px;
}
.reg-confirm input[type=checkbox] {
  width: 20px; height: 20px; accent-color: var(--green);
  margin-top: 2px; cursor: pointer; flex: 0 0 auto;
}
.reg-confirm label {
  color: var(--text); font-size: 13px; line-height: 1.5;
  display: block; margin: 0; text-transform: none;
  letter-spacing: 0; font-weight: 400; cursor: pointer;
}

.reg-btn-big {
  font-family: 'Rajdhani', sans-serif; font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em; padding: 18px; width: 100%;
  margin-top: 20px;
  text-transform: uppercase;
}
.reg-btn-big:disabled {
  background: #555; color: #888; cursor: not-allowed;
}

@media (max-width: 640px) {
  .reg-welcome { margin-top: 30px; }
  .reg-welcome .welcome-title { font-size: 26px; }
  .reg-welcome .welcome-body { font-size: 14px; }
  .gender-btn { font-size: 15px; padding: 18px 6px; }
  .level-btn { font-size: 11px; padding: 14px 8px; }
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — venue/outdoor readability
   Toggle via body.light-mode (set by JS in core.js)
   Neutral paper rather than cream: the dark theme is black/red, so a
   warm cream base would read as a different product in sunlight.
   Crimson darkens to a deep red that still passes contrast on white.
   ═══════════════════════════════════════════════════════════ */
body.light-mode {
  --black:    #F7F7FA;
  --black2:   #EFEFF3;
  --black3:   #E5E5EC;
  --surface:  #FFFFFF;
  --surface2: #F1F1F6;
  --border:   #D6D6E0;
  --border2:  #B4B4C4;

  --text:     #17171F;
  --muted:    #62626F;
  --muted2:   #83839A;

  --yellow:   #C40D1E;   /* crimson, darkened for white */
  --yellow2:  #9C0A18;
  --orange:   #7C0812;
  --gold:     #C40D1E;
  --gold2:    #7C0812;
  --olive:    #6B6B7D;
  --forest:   #4A4A5A;
  --red:      #A85C00;   /* danger = dark amber */

  --armour:   #B4B4C4;
  --edge-hot: rgba(196,13,30,.45);

  /* Category colours darkened for contrast on white (sun-readable mode).
     Same hue order as the dark theme so a category never changes identity
     between modes. */
  --mgo: #C40D1E;
  --mhs: #5A5A6E;
  --msv: #3F5680;
  --xsv: #6B34B0;
  --mhb: #B4470E;
  --whb: #B03C74;
  --mbr: #8A4715;
  --wbr: #B01E4A;
  --xbr: #0D7A6C;
  --k16: #8A6A00;
}
body.light-mode {
  background: var(--black);
  color: var(--text);
}
body.light-mode .match-card,
body.light-mode .card {
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
body.light-mode .tab.active { color: #000; }
body.light-mode .team-name.win   { color: #0E7A41; }
body.light-mode .score-pill,
body.light-mode .bracket-score   { color: #C40D1E; }
body.light-mode .bracket-team.win { background: rgba(14,122,65,.08); color: #0E7A41; }
body.light-mode .live-dot,
body.light-mode .live-badge      { color: #0E7A41 !important; }
body.light-mode .live-dot        { background: #0E7A41; }
body.light-mode input,
body.light-mode select,
body.light-mode textarea         { background: #fff; color: var(--text); }
body.light-mode .login-gate      { background: var(--black); }
body.light-mode .time-tag        { color: #8c6f1d; }

/* Brightness toggle button (in topbar) */
.pb-brightness-btn {
  background: transparent;
  border: 1px solid var(--gold2);
  color: var(--gold);
  border-radius: 0;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  transition: background .15s, transform .15s;
}
.pb-brightness-btn:hover { background: rgba(239,22,31,.12); transform: scale(1.05); }
.pb-brightness-btn:active { transform: scale(0.95); }

/* ═══════════════════════════════════════════════════════════
   MANUAL BRACKET EDITOR (admin)
   ═══════════════════════════════════════════════════════════ */
.be-pool {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 0; padding: 14px; margin-bottom: 12px;
}
.be-pool-label {
  font-size: 11px; color: var(--gold); letter-spacing: .08em;
  font-weight: 700; text-transform: uppercase; margin-bottom: 10px;
}
.be-pool-items { display: flex; flex-wrap: wrap; gap: 8px; }
.be-chip {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 0; padding: 8px 12px; font-size: 13px; font-weight: 600;
  color: var(--text); cursor: grab; user-select: none;
  transition: border-color .15s, transform .1s;
}
.be-chip:hover { border-color: var(--yellow); }
.be-chip:active { cursor: grabbing; transform: scale(.97); }
.be-match { gap: 4px; }
.be-slot {
  display: flex; align-items: center; gap: 6px;
  border: 1px dashed var(--border2); border-radius: 0;
  padding: 8px 10px; min-height: 38px; font-size: 13px;
  transition: border-color .15s, background .15s;
}
.be-slot.empty .be-slot-name { color: var(--muted); font-style: italic; }
.be-slot.filled {
  border-style: solid; border-color: var(--border2);
  background: var(--surface2); font-weight: 600;
}
.be-slot.drop-hover {
  border-color: var(--yellow); background: rgba(239,22,31,.08);
}
.be-slot-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-slot-x {
  background: transparent; border: none; color: var(--red);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.be-slot-x:hover { color: #ff8080; }

/* ═══════════════════════════════════════════════════════════
   TWO-WING BRACKET LAYOUT (left wing · center final · right wing)
   ═══════════════════════════════════════════════════════════ */
.bracket-2wing {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 12px; overflow-x: auto; padding: 16px 8px;
  -webkit-overflow-scrolling: touch;
}
/* Centre the draw when it fits, but keep the LEFT edge reachable when it
   doesn't. `justify-content:center` on a scroll container clips the start
   of the overflow and makes it impossible to scroll to — which is why the
   play-in column disappeared once it was added. Auto-margin pseudo
   elements centre the same way but collapse to 0 when space runs out. */
.bracket-2wing::before,
.bracket-2wing::after { content: ''; margin: auto; }
.bracket-2wing > * { flex-shrink: 0; }
.bracket-2wing .wing { display: flex; gap: 24px; flex-shrink: 0; }
.bracket-2wing .wing-left { flex-direction: row; }
.bracket-2wing .wing-right { flex-direction: row; }
.bracket-2wing .bracket-col {
  display: flex; flex-direction: column; flex-shrink: 0;
  justify-content: space-around; gap: 16px; min-width: 150px;
}
/* Long pair names must not stretch a column past the viewport. */
.bracket-team { min-width: 0; }
.bracket-team .bt-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A draw with a play-in round is 9 columns wide. Tighten everything so it
   still fits a laptop screen without horizontal scrolling. */
.bracket-2wing.compact { gap: 6px; }
.bracket-2wing.compact .wing { gap: 12px; }
.bracket-2wing.compact .bracket-col { min-width: 118px; gap: 10px; }
.bracket-2wing.compact .wing-center { min-width: 130px; }
.bracket-2wing.compact .bracket-team { padding: 6px 8px; font-size: 10px; }
.bracket-2wing.compact .bracket-score { font-size: 12px; }
.bracket-2wing .wing-center {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 0 8px; min-width: 160px;
}
.final-label {
  color: var(--yellow) !important; font-size: 14px !important;
  font-weight: 700;
}
.final-trophy { font-size: 28px; margin-top: 4px; }
.wing-center .bracket-match {
  border: 2px solid var(--yellow);
  box-shadow: 0 0 16px rgba(239,22,31,.2);
}
/* Right wing mirrors: scores on left, names right-aligned */
.wing-right .bracket-team { flex-direction: row-reverse; }
.wing-right .bracket-team .bt-name { text-align: right; }
@media (max-width: 640px) {
  .bracket-2wing { gap: 4px; padding: 10px 2px; }
  .bracket-2wing .wing { gap: 10px; }
  .bracket-2wing .bracket-col { min-width: 116px; gap: 10px; }
  .bracket-2wing .wing-center { min-width: 120px; }
}

/* Tap-to-assign chip states */
.be-chip.selected {
  border-color: var(--yellow); background: var(--yellow); color: #000;
  box-shadow: 0 0 12px rgba(239,22,31,.4);
}
.be-chip.placed { opacity: .5; }
.be-chip.placed.selected { opacity: 1; }
.be-slot { cursor: pointer; }
.be-slot.empty:hover { border-color: var(--yellow); background: rgba(239,22,31,.06); }

/* ═══════════════════════════════════════════════════════════
   NOW SCREEN — live dashboard (Wave 1 redesign)
   ═══════════════════════════════════════════════════════════ */
.now-header { margin-bottom: 14px; }
.now-title-row { display: flex; align-items: center; gap: 12px; }
.now-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 900;
  font-size: clamp(22px, 5vw, 30px); letter-spacing: .02em;
  text-transform: uppercase; color: var(--text);
}
.now-heartbeat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace;
  background: var(--surface); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 0; margin-left: auto;
}
.now-hb-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); animation: nowHb 2s infinite;
}
@keyframes nowHb { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.now-heartbeat.hb-flash { border-color: var(--green); color: var(--green); transition: all .2s; }
.now-heartbeat.hb-flash .now-hb-dot { box-shadow: 0 0 14px var(--green); }
.now-subbar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.now-eventname { font-size: 12px; color: var(--muted2); margin-top: 4px; letter-spacing: .01em; }

/* ── Public Standings toggle (Bracket ↔ Rankings) ── */
.standings-toggle { display: flex; gap: 8px; margin-bottom: 16px; background: var(--surface2); padding: 4px; border-radius: 0; border: 1px solid var(--border2); }
.st-toggle-btn { flex: 1; padding: 10px; border: none; border-radius: 0; background: transparent; color: var(--muted); font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: all .15s; }
.st-toggle-btn.active { background: var(--yellow); color: #111; }
.st-toggle-btn:not(.active):hover { color: var(--text); }

/* ── Pre-event STAY TUNED hero ── */
/* Heartbeat while the organizer has the tournament inactive: red, so it
   reads as "deliberately off air" rather than "feed broken". */
.now-heartbeat.offair .now-hb-dot { background: var(--red) !important; box-shadow: 0 0 8px var(--red) !important; }
.now-heartbeat.offair { color: var(--red); }
.now-header.pre { padding-bottom: 4px; }

.preevent { text-align: center; padding: 48px 24px 40px; max-width: 520px; margin: 0 auto; }
.preevent-badge { display: inline-block; font-family: 'Rajdhani', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: .18em; color: var(--yellow); border: 2px solid var(--yellow); border-radius: 0; padding: 10px 26px; margin-bottom: 28px; animation: preeventPulse 2.4s ease infinite; }
@keyframes preeventPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.preevent-name { font-family: 'Rajdhani', sans-serif; font-size: 40px; font-weight: 900; color: var(--text); line-height: 1.15; letter-spacing: .01em; margin-bottom: 18px; text-transform: uppercase; }
.preevent-sub { font-size: 17px; color: var(--muted); margin-bottom: 10px; }
.preevent-dates { font-family: 'Rajdhani', sans-serif; font-size: 32px; font-weight: 700; color: var(--yellow); margin-bottom: 12px; }
.preevent-venue { font-size: 15px; color: var(--muted2); margin-bottom: 16px; }
.preevent-countdown { display: inline-block; font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 700; color: var(--green); border: 2px solid var(--green); border-radius: 0; padding: 12px 26px; margin-bottom: 28px; }
.preevent-hint { font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 380px; margin: 0 auto; }

/* Subtle divider before a new tab group (admin clustering) */
.tab.tab-group-start { margin-left: 14px; position: relative; }
.tab.tab-group-start::before { content: ''; position: absolute; left: -8px; top: 20%; height: 60%; width: 1px; background: var(--border2); }
.now-day {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px;
  color: var(--yellow); letter-spacing: .04em;
}
.now-clock { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--muted2); }

/* Search */
.now-search-wrap { position: relative; margin-bottom: 18px; }
.now-search-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; opacity: .6; pointer-events: none;
}
.now-search {
  width: 100%; background: var(--surface); border: 1.5px solid var(--border2);
  border-radius: 0; padding: 14px 44px 14px 42px; color: var(--text);
  font-size: 15px; font-family: 'Inter', sans-serif; transition: border-color .15s;
}
.now-search::placeholder { color: var(--muted); }
.now-search:focus { outline: none; border-color: var(--yellow); }
.now-search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: var(--surface2); border: 1px solid var(--border2); color: var(--muted2);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.now-search-clear:hover { color: var(--text); border-color: var(--gold); }

/* Section header */
.now-sec { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px; }
.now-sec-label {
  font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
}
.now-sec-rule { flex: 1; height: 1px; background: var(--border); }
.now-sec-count { font-size: 10px; color: var(--muted); font-family: 'JetBrains Mono', monospace; letter-spacing: .08em; }

/* Grid */
.now-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
@media (max-width: 560px) { .now-grid { grid-template-columns: 1fr; } }

/* Card */
.now-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0; padding: 16px 18px; transition: transform .12s, border-color .15s;
}
.now-card.is-live { border-color: var(--gold2); background: linear-gradient(180deg, rgba(41,224,123,.04), var(--surface)); }
.now-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.now-court {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px;
  background: var(--surface2); color: var(--text); padding: 5px 12px; border-radius: 0;
  letter-spacing: .03em;
}
.now-cat { font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.now-round {
  font-size: 10px; font-weight: 700; color: var(--yellow);
  background: rgba(239,22,31,.12); border: 1px solid var(--gold2);
  padding: 3px 8px; border-radius: 0; letter-spacing: .04em;
}
.now-status { margin-left: auto; }
.now-live {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800;
  color: var(--green); font-family: 'Rajdhani', sans-serif; letter-spacing: .08em;
}
.now-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 10px var(--green); animation: nowHb 1.3s infinite;
}
.now-time { font-size: 11px; color: var(--gold); font-family: 'JetBrains Mono', monospace; }
.now-done { font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }

.now-teams { display: flex; align-items: center; gap: 12px; }
.now-team {
  flex: 1; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text);
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.now-team.right { justify-content: flex-end; text-align: right; }
.now-team.win { color: var(--text); font-weight: 800; }
.now-team.lose { color: var(--muted); }
.now-team .tbd { color: var(--muted); font-style: italic; font-weight: 400; }
.now-win-tick { color: var(--green); font-size: 9px; }
.now-score {
  font-family: 'Rajdhani', sans-serif; font-weight: 900; font-size: 26px;
  color: var(--text); letter-spacing: .02em; white-space: nowrap;
  display: flex; align-items: baseline; gap: 4px;
}
.now-score.live { color: var(--green); }
.now-score-sep { opacity: .5; font-size: 20px; }
.now-vs {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px;
  color: var(--muted); letter-spacing: .1em;
}

/* Score change pulse */
.now-card.score-bump { animation: scoreBump .7s ease; }
@keyframes scoreBump {
  0% { transform: scale(1); }
  30% { transform: scale(1.025); border-color: var(--green); box-shadow: 0 0 24px rgba(41,224,123,.25); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   OPEN DRAW EDITOR — drag/tap the draw sheet itself
   ═══════════════════════════════════════════════════════════ */
.dw-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dw-title { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; color: var(--yellow); }
.dw-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.dw-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.dw-hint, .dw-warn { font-size: 11px; border-radius: 0; padding: 8px 10px; margin-bottom: 10px; }
.dw-hint { color: var(--muted); background: var(--surface2); border: 1px solid var(--border2); }
.dw-warn { color: var(--yellow); background: rgba(239,22,31,.08); border: 1px solid var(--yellow); }

.dw-section { margin-bottom: 18px; }
.dw-section-label {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--yellow);
}
.dw-section-label span { color: var(--muted); letter-spacing: .05em; }

.dw-grid { display: grid; gap: 10px; }
.dw-grid-pr   { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.dw-grid-main { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.dw-match {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0; padding: 8px; position: relative;
}
.dw-match-pr { border-color: var(--yellow); background: rgba(239,22,31,.04); }
.dw-match-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.dw-match-pr .dw-match-tag { color: var(--yellow); }
.dw-vs { text-align: center; font-size: 9px; color: var(--muted); margin: 3px 0; }
.dw-feeds { font-size: 10px; color: var(--yellow); margin-top: 6px; text-align: right; }

/* A draggable pair */
.dw-slot {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 0; padding: 8px 10px; cursor: grab;
  transition: border-color .12s, background .12s, transform .08s;
  user-select: none; -webkit-user-select: none;
}
.dw-slot + .dw-slot { margin-top: 4px; }
.dw-slot:hover { border-color: var(--yellow); }
.dw-slot:active { cursor: grabbing; }
.dw-seed {
  font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700;
  color: var(--yellow); min-width: 20px; text-align: center; flex-shrink: 0;
}
.dw-name {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dw-grip { color: var(--muted2); font-size: 12px; flex-shrink: 0; }
.dw-lock { font-size: 10px; flex-shrink: 0; opacity: .7; }

.dw-slot.dragging { opacity: .4; transform: scale(.98); }
.dw-slot.dragover { border-color: var(--green); background: rgba(41,224,123,.12); }
.dw-slot.selected {
  border-color: var(--yellow); background: rgba(239,22,31,.16);
  box-shadow: 0 0 0 2px rgba(239,22,31,.25);
}
/* While one pair is picked up, show everything else as a valid target. */
.dw-slot.targetable { border-style: dashed; }
/* The empty play-in slot is a drag handle, not dead space — grab it and
   drop it on any pair (or another play-in) to move where it sits. */
.dw-slot.locked {
  cursor: grab; opacity: .8; border-style: dashed;
  background: transparent;
}
.dw-slot.locked:hover { border-color: var(--yellow); opacity: 1; }
.dw-slot.locked:active { cursor: grabbing; }
.dw-slot.locked .dw-grip { opacity: .5; }
.dw-slot.locked:hover .dw-grip { opacity: 1; color: var(--yellow); }
.dw-slot.locked .dw-name { font-style: italic; font-weight: 500; color: var(--muted); font-size: 11px; }

@media (max-width: 640px) {
  .dw-actions { margin-left: 0; width: 100%; }
  .dw-grid-pr, .dw-grid-main { grid-template-columns: 1fr; }
  .dw-slot { padding: 10px; }
  .dw-name { font-size: 13px; }
}

/* ── Relocatable play-in anchors ──────────────────────────── */
.dw-anchor {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  margin-top: 6px; padding: 5px 8px; border-radius: 0;
  border: 1px dashed var(--yellow); background: rgba(239,22,31,.07);
  color: var(--yellow); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; cursor: grab; user-select: none;
  transition: background .12s, box-shadow .12s;
}
.dw-anchor { cursor: default; }
.dw-anchor.moving {
  background: var(--yellow); color: #08080B; border-style: solid;
  box-shadow: 0 0 0 3px rgba(239,22,31,.25);
}
.dw-anchor .dw-grip { color: inherit; opacity: .7; }

/* Valid landing spots while a play-in is being relocated */
.dw-slot.anchor-target {
  border-color: var(--yellow); border-style: dashed;
  background: rgba(239,22,31,.09);
  animation: dwPulse 1.4s ease-in-out infinite;
}
.dw-slot.dimmed { opacity: .35; }
.dw-slot.locked.moving { border-color: var(--yellow); opacity: 1; }
@keyframes dwPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,22,31,.0); }
  50%     { box-shadow: 0 0 0 3px rgba(239,22,31,.18); }
}

/* A first-round match fed by two play-ins */
.dw-match-clash { border-color: var(--red); background: rgba(255,90,90,.05); }
.dw-clash-tag {
  margin-left: 6px; padding: 1px 6px; border-radius: 0;
  background: rgba(255,90,90,.18); color: var(--red);
  font-size: 8px; letter-spacing: .06em;
}

/* The play-in slot is a drag handle, not an inert cell. */
.dw-slot.locked { cursor: grab; }
.dw-slot.locked:active { cursor: grabbing; }
.dw-slot.locked:hover { border-color: var(--yellow); opacity: 1; }
.dw-slot.locked.dragging { opacity: .4; }
.dw-slot.locked.moving {
  border-color: var(--yellow); border-style: solid; opacity: 1;
  background: rgba(239,22,31,.16);
  box-shadow: 0 0 0 3px rgba(239,22,31,.25);
}
/* The play-in card's tag is now purely informational. */
.dw-anchor { cursor: default; }
.dw-anchor:hover { background: rgba(239,22,31,.07); }

/* Wildcard contender: not guaranteed a knockout place, but in the running
   for one of the best-runner-up slots. */
.grp-table tr.grp-bubble {
  background: rgba(239,22,31,.06);
  box-shadow: inset 2px 0 0 var(--yellow);
}
.grp-table tr.grp-bubble td { color: var(--muted); }

/* ── Public page visibility switch ─────────────────────────── */
.pubvis-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pubvis-switch {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 0; padding: 6px 16px 6px 6px; cursor: pointer;
  border: 1px solid var(--border2); background: var(--surface2);
  font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; transition: background .15s, border-color .15s, color .15s;
}
.pubvis-knob {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--muted); transition: background .15s, transform .15s;
}
.pubvis-switch.on  { border-color: var(--green); color: var(--green); background: rgba(41,224,123,.10); }
.pubvis-switch.on  .pubvis-knob { background: var(--green); transform: translateX(0); }
.pubvis-switch.off { border-color: var(--yellow); color: var(--yellow); background: rgba(239,22,31,.10); }
.pubvis-switch.off .pubvis-knob { background: var(--yellow); }
.pubvis-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pubvis-tag {
  font-size: 10px; padding: 3px 9px; border-radius: 0;
  background: var(--surface2); border: 1px solid var(--border2); color: var(--muted);
}
.pubvis-tag.hidden { opacity: .45; text-decoration: line-through; }

/* A match with no court assigned — visibly pending, not a blank pill */
.court-tag-none {
  color: var(--muted2) !important;
  border-style: dashed !important;
  font-style: italic;
  opacity: .85;
}


/* ═══════════════════════════════════════════════════════════
   SCI-FI KIT — appended override layer
   ─────────────────────────────────────────────────────────
   Everything above is inherited Padelbang layout. This block restyles the
   interactive furniture into a black/red console language: hard corners with
   a single cut notch, hairline crimson rules, corner brackets instead of
   rivets, faint scanlines instead of scuff, and wide techno caps.
   Kept as a trailing override so the theme is reviewable — and revertible —
   in one place.

   NOTE ON !important: the app UI is generated from inline styles inside
   app.js, and inline styles outrank a stylesheet. Without !important the
   corner radii baked into those templates win and this whole layer is
   invisible.
   ═══════════════════════════════════════════════════════════ */

:root {
  --notch: 10px;
  --notch-sm: 6px;
  --ff-stencil: 'Rajdhani', sans-serif;
  --ff-heavy: 'Orbitron', sans-serif;
  --armour: #2F2F2F;                 /* hairline panel edge */
  --edge-hot: rgba(239,22,31,.55);   /* live crimson edge   */
  /* Scanline field — replaces the military hazard stripe. */
  --hazard: repeating-linear-gradient(0deg,
    rgba(255,255,255,.10) 0 1px, transparent 1px 3px);
  /* Very faint CRT texture over plates. */
  --scuff: repeating-linear-gradient(0deg,
    rgba(255,255,255,.014) 0 1px, transparent 1px 4px);
}

/* ── NOTHING IS ROUND ─────────────────────────────────────
   Blanket kill, then hand back the few genuinely circular things
   (status dots, rank discs, spinners). */
*, *::before, *::after { border-radius: 0 !important; }
.live-dot, .now-dot, .dot, .prog-dot, .grp-rank, .spinner,
[class*="-dot"], [class*="dot-"] { border-radius: 50% !important; }

/* ── Stamped plate: cut corners, top-left + bottom-right ── */
.btn-primary, .btn-secondary, .btn-danger, .btn-success,
.tab, .cat-badge, .score-pill, .grp-tag, .round-pill, .tab-badge,
.chip, .pill, .badge, .mil-plate {
  clip-path: polygon(var(--notch-sm) 0, 100% 0,
                     100% calc(100% - var(--notch-sm)),
                     calc(100% - var(--notch-sm)) 100%, 0 100%, 0 var(--notch-sm));
}
.btn-primary, .btn-success { --notch-sm: var(--notch); }

/* ── Buttons: stamped, stencilled, slightly worn ─────────── */
.btn-primary, .btn-secondary, .btn-danger, .btn-success {
  font-family: var(--ff-stencil) !important;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: all .12s ease;
  position: relative;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.btn-primary {
  background:
    var(--scuff),
    linear-gradient(168deg, #FF3A43 0%, var(--yellow2) 30%, var(--yellow) 66%, #7A060C 100%);
  color: #0A0000;
  border: 1px solid #FF3A43;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 0 rgba(0,0,0,.30),
    0 0 0 1px rgba(239,22,31,.25),
    0 0 22px rgba(239,22,31,.28);
  padding: 14px 28px;
  font-size: 13px;
}
/* Scanline bar down the leading edge — reads as a powered control. */
.btn-primary::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--hazard); opacity: .55; pointer-events: none;
}
.btn-primary:hover { filter: brightness(1.09); transform: translate(-1px,-1px); }
.btn-primary:active { transform: translate(0,1px); filter: brightness(.94); }

.btn-secondary {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  color: var(--muted2);
  border: 1px solid var(--armour);
  padding: 11px 20px;
  font-size: 12px;
}
.btn-secondary:hover {
  border-color: var(--yellow); color: var(--yellow);
  background: linear-gradient(180deg, rgba(239,22,31,.16), rgba(239,22,31,.04));
  box-shadow: 0 0 18px rgba(239,22,31,.16);
}

.btn-danger {
  background: linear-gradient(180deg, rgba(255,159,26,.14), rgba(255,159,26,.04));
  border: 1px solid var(--red); color: #FFC46B;;
  padding: 9px 16px; font-size: 11px;
}
.btn-danger:hover { background: rgba(255,159,26,.26); color: #FFD79A; }

.btn-success {
  background: var(--scuff), linear-gradient(168deg, #5DF5A2, #22C46A 62%, #0E7A41);
  color: #001A0C; border: 1px solid #22C46A;
  padding: 12px 22px; font-size: 12.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 20px rgba(41,224,123,.20);
}
.btn-success:hover { filter: brightness(1.1); transform: translate(-1px,-1px); }

button:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-success:disabled {
  opacity: .35; cursor: not-allowed; transform: none; filter: grayscale(.6);
}

/* ── Tabs: bolted-on nameplates ──────────────────────────── */
.tabs { gap: 2px; border-bottom: 1px solid var(--armour); padding-bottom: 0; }
.tab {
  font-family: var(--ff-stencil) !important;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  font-size: 13px; padding: 11px 20px;
  border: 1px solid transparent; border-bottom: none;
  background: rgba(255,255,255,.022);
}
.tab:hover { color: var(--yellow); background: rgba(239,22,31,.09); }
.tab.active {
  background: var(--surface2); color: var(--yellow);
  border-color: var(--armour);
  box-shadow: inset 0 2px 0 var(--yellow), 0 0 20px rgba(239,22,31,.14);
}

/* ── Badges / pills: stencilled data tags ────────────────── */
.tab-badge, .cat-badge, .score-pill, .grp-tag, .round-pill {
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: .06em; border: 1px solid var(--armour);
}
.tab.active .tab-badge { background: var(--yellow); color: #0A0000; border-color: var(--yellow2); }

/* ── Inputs: recessed panel, brass focus ─────────────────── */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], input[type="date"], input[type="time"],
select, textarea, .input {
  background: #070707;
  border: 1px solid var(--armour);
  color: var(--text);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.65);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus, .input:focus {
  outline: none; border-color: var(--yellow);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.65), 0 0 0 1px rgba(239,22,31,.45),
              0 0 18px rgba(239,22,31,.18);
}
::placeholder { color: #55556A; font-style: normal; letter-spacing: .02em; }

/* ── Section headings: stencil with rank bar ─────────────── */
.fs-title, .at-label, .at-player-title, .player-section-title, .er-title {
  font-family: var(--ff-stencil) !important;
  font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.fs-title::before, .at-label::before, .at-player-title::before,
.player-section-title::before {
  content: ''; flex: 0 0 auto; width: 18px; height: 2px;
  background: var(--yellow); box-shadow: 0 5px 0 var(--olive), 0 0 12px var(--yellow);
}

/* ── Panels: console plate with corner brackets ──────────── */
.card, .reg-card, .player-section, .modal, .modal-box {
  border: 1px solid var(--armour);
  background-image: var(--scuff);
  position: relative;
}
/* Four L-brackets, one per corner — drawn with crossed gradients so no
   extra markup is needed. Replaces the rivet heads of the old theme. */
.card::after, .reg-card::after, .player-section::after {
  content: ''; position: absolute; inset: 5px; pointer-events: none;
  background:
    linear-gradient(var(--edge-hot), var(--edge-hot)) 0 0 / 12px 1px no-repeat,
    linear-gradient(var(--edge-hot), var(--edge-hot)) 0 0 / 1px 12px no-repeat,
    linear-gradient(var(--edge-hot), var(--edge-hot)) 100% 0 / 12px 1px no-repeat,
    linear-gradient(var(--edge-hot), var(--edge-hot)) 100% 0 / 1px 12px no-repeat,
    linear-gradient(var(--edge-hot), var(--edge-hot)) 0 100% / 12px 1px no-repeat,
    linear-gradient(var(--edge-hot), var(--edge-hot)) 0 100% / 1px 12px no-repeat,
    linear-gradient(var(--edge-hot), var(--edge-hot)) 100% 100% / 12px 1px no-repeat,
    linear-gradient(var(--edge-hot), var(--edge-hot)) 100% 100% / 1px 12px no-repeat;
  opacity: .5;
}

/* ── Match cards: keep the category stripe, add a notch ──── */
.match-card { border: 1px solid var(--armour); }
.match-card::before { width: 4px !important; }

/* ── Topbar role tag: console nameplate ─────────────────── */
.topbar-role {
  font-family: var(--ff-stencil) !important; font-weight: 700;
  border: 1px solid var(--armour); background: rgba(239,22,31,.10);
  letter-spacing: .2em;
}
.topbar {
  border-bottom: 1px solid var(--armour);
  box-shadow: 0 1px 0 rgba(239,22,31,.22);
}

/* ── Tables: field-log ruling ────────────────────────────── */
.tbl th {
  font-family: var(--ff-stencil) !important; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid var(--armour) !important;
  color: var(--muted2);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-secondary, .btn-danger, .btn-success { transition: none; }
  .btn-primary:hover, .btn-success:hover { transform: none; }
}

/* ── Tournament logo: centred in the topbar on every page, +20% ────
   The topbar is a flex row whose controls use margin-left:auto, so the logo
   is taken out of flow and centred absolutely. Without position:absolute it
   would sit flush left and no amount of justify-content could centre it
   while the controls stay pinned right. Height 43px = 36px + 20%. */
.topbar { position: relative; justify-content: flex-end; }
.topbar > a:first-child,
.topbar > .topbar-logo-link {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 1;
}
.topbar-logo-img { height: 43px; }
@media (max-width: 640px) { .topbar-logo-img { height: 34px; } }
@media (max-width: 420px) { .topbar-logo-img { height: 27px; } }
/* Give the centred logo room so controls never collide with it. */
.topbar { padding-left: 96px; padding-right: 12px; min-height: 64px; }
@media (max-width: 640px) { .topbar { padding-left: 8px; min-height: 56px; } }

/* ── Per-player assessment blocks (admin Assessment tab) ────
   Screening is per player, so each history gets its own framed block. */
.asmt-player { border: 1px solid var(--border); border-left: 2px solid var(--olive);
  background: rgba(255,255,255,.05); padding: 11px 13px; margin-bottom: 9px; }
.asmt-player:last-child { margin-bottom: 0; }
.asmt-player-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.asmt-player-tag { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--yellow);
  border: 1px solid var(--armour); padding: 3px 8px; }
.asmt-player-name { font-size: 13px; font-weight: 600; color: var(--text); }

/* ── FORM FIELDS: always dark, in every state ──────────────
   The input text is bone/white, so the field must stay dark or the value
   becomes invisible. Three separate things repaint a field light and each
   needs handling:

   1. BROWSER AUTOFILL. Chrome/Safari paint autofilled inputs with their own
      near-white background that a normal `background` rule cannot override.
      The only reliable fix is an inset box-shadow large enough to cover the
      field, plus -webkit-text-fill-color for the text itself. The absurd
      transition delay stops the yellow autofill flash on first paint.
   2. NATIVE SELECT OPTIONS. The dropdown list is drawn by the OS and
      defaults to a light popup — white-on-white on Windows and Android.
   3. DATE/TIME PICKER INTERNALS on WebKit, which inherit a light UA style.
   ────────────────────────────────────────────────────────── */

input, select, textarea, .input,
input:hover, select:hover, textarea:hover,
input:focus, select:focus, textarea:focus,
input:active, select:active, textarea:active,
input:valid, input:invalid, input:required, input:optional,
input:read-only, input:disabled, select:disabled, textarea:disabled {
  background-color: #070707;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}
input:disabled, select:disabled, textarea:disabled { opacity: .55; }

/* 1 — Autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 100vmax #08080C inset !important;
          box-shadow: 0 0 0 100vmax #08080C inset !important;
  background-color: #08080C !important;
  background-image: none !important;
  transition: background-color 99999s ease-out 0s !important;
}
/* Firefox */
input:autofill, select:autofill, textarea:autofill {
  background-color: #08080C !important;
  color: var(--text) !important;
  filter: none;
}

/* 2 — Native select dropdown list */
select option,
select optgroup {
  background-color: #070707;
  color: var(--text);
}
select option:checked,
select option:hover {
  background-color: var(--surface2);
  color: var(--yellow);
}

/* 3 — WebKit date/time picker internals */
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper { color: var(--text); }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) sepia(.5) saturate(3) hue-rotate(5deg); cursor: pointer;
}
input[type="search"]::-webkit-search-cancel-button { filter: invert(.8); cursor: pointer; }

/* Placeholder stays legibly dimmer than the value, never invisible */
input::placeholder, textarea::placeholder { color: #55556A; opacity: 1; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #55556A; }

/* ── Sun-readable (light) mode: fields go back to light ────
   The dark field rules above are unconditional and the autofill override
   uses !important, so without these the brightness toggle would leave
   dark-on-dark fields. Declared last and scoped to body.light-mode. */
body.light-mode input,
body.light-mode select,
body.light-mode textarea,
body.light-mode .input,
body.light-mode input:hover,
body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus,
body.light-mode input:valid,
body.light-mode input:invalid,
body.light-mode .reg-form-light input,
body.light-mode .reg-form-light select,
body.light-mode .reg-form-light textarea,
body.light-mode .reg-form-light input:focus,
body.light-mode .reg-form-light select:focus {
  background: #ffffff;
  background-color: #ffffff;
  color: #17171F;
  -webkit-text-fill-color: #17171F;
  border-color: #b8b099;
}
body.light-mode input:-webkit-autofill,
body.light-mode input:-webkit-autofill:hover,
body.light-mode input:-webkit-autofill:focus,
body.light-mode select:-webkit-autofill,
body.light-mode textarea:-webkit-autofill,
body.light-mode .reg-form-light input:-webkit-autofill {
  -webkit-text-fill-color: #17171F !important;
  caret-color: #17171F !important;
  -webkit-box-shadow: 0 0 0 100vmax #ffffff inset !important;
          box-shadow: 0 0 0 100vmax #ffffff inset !important;
  background-color: #ffffff !important;
}
body.light-mode input::placeholder,
body.light-mode textarea::placeholder,
body.light-mode .reg-form-light input::placeholder { color: #8a8475; opacity: 1; }
body.light-mode select option,
body.light-mode .reg-form-light option { background: #ffffff; color: #17171F; }

/* ── Admin Teams: collapsed rows ───────────────────────────
   The list can run to 150+ pairs, so a row must stay cheap and scannable. */
.team-row { transition: border-color .12s, background .12s; }
.team-row:hover { border-color: var(--yellow); background: rgba(239,22,31,.06); }
.team-row-open { border-color: var(--armour); }

/* ── Public rankings: group-stage progress + legend ────────
   A standings table alone doesn't say whether the stage is still live or
   already decided, which is most of what a spectator wants to know. */
.rank-prog { border: 1px solid var(--border); background: var(--surface);
  padding: 13px 15px; margin: 0 0 14px; }
.rank-prog-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.rank-prog-label { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: .2em; color: var(--yellow); }
.rank-prog-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted2); }
.rank-prog-pct { margin-left: auto; font-family: 'Rajdhani', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .12em; color: var(--muted2); }
.rank-prog-pct.done { color: var(--green); }
.rank-prog-bar { height: 6px; background: var(--black2); border: 1px solid var(--border);
  overflow: hidden; }
.rank-prog-bar > i { display: block; height: 100%;
  background: linear-gradient(90deg, var(--yellow), var(--yellow2)); transition: width .4s ease; }
.rank-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px;
  font-size: 11px; color: var(--muted2); }
.rank-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rank-legend .lg { width: 11px; height: 11px; flex: 0 0 auto; border: 1px solid var(--border2); }
.rank-legend .lg-q { background: rgba(41,224,123,.35); border-color: var(--green); }
.rank-legend .lg-w { background: rgba(239,22,31,.3);  border-color: var(--yellow); }
.rank-legend .lg-o { background: transparent; }

.grp-card-head { display: flex; align-items: center; gap: 10px; }
.grp-head-prog { margin-left: auto; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--muted); border: 1px solid var(--border2); padding: 2px 7px; }
.grp-head-prog.done { color: var(--green); border-color: var(--green); }

/* ── Bracket editor (simplified) ───────────────────────────── */
.be-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.be-bar-hint { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.be-tools-btn { margin-left: auto; padding: 6px 12px; font-size: 11px; }
.be-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
  padding: 10px; border: 1px solid var(--border); background: var(--black2); }
.be-seed { font-family: 'JetBrains Mono', monospace; font-size: 9px; margin-right: 5px; font-weight: 700; }
.be-wc { font-size: 9px; font-weight: 800; color: #0A0000; background: var(--yellow);
  padding: 1px 4px; margin-right: 5px; }
.be-slot[draggable="true"] { cursor: grab; }
.be-slot[draggable="true"]:active { cursor: grabbing; }
.be-slot.drop-hover { border-color: var(--yellow) !important;
  box-shadow: inset 0 0 0 1px var(--yellow); }

/* ── Admin section nav (primary level above the tab row) ────
   Thirteen flat tabs meant hunting for the right one; these four sections
   match how the event runs and cut the visible tab count to 2-4. */
.admin-sections { display: flex; gap: 2px; flex-wrap: wrap; margin: 0 0 2px;
  border-bottom: 2px solid var(--armour); }
.admin-sec { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; padding: 11px 22px;
  background: transparent; border: 2px solid transparent; border-bottom: none;
  color: var(--muted); cursor: pointer; transition: all .12s;
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); }
.admin-sec:hover { color: var(--yellow); background: rgba(255,255,255,.1); }
.admin-sec.active { color: #0A0000; background: linear-gradient(180deg, var(--yellow2), var(--yellow));
  border-color: #8E6228; }
@media (max-width: 560px) {
  .admin-sec { padding: 9px 14px; font-size: 11px; letter-spacing: .12em; flex: 1 1 auto; text-align: center; }
}

/* ── Set-by-set scoreline ───────────────────────────────────
   One box per set/race, winner's number highlighted — the way every
   tournament platform shows a result. A race that went to a tie-break
   renders as two boxes, e.g. 9-8 then 7-5. */
.sb { display: inline-flex; align-items: stretch; gap: 3px; vertical-align: middle; }
.sb-set { display: inline-flex; flex-direction: column; line-height: 1.15;
  border: 1px solid var(--border2); background: var(--black2); padding: 2px 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; min-width: 20px; text-align: center; }
.sb-set b { font-weight: 500; color: var(--muted2); }
.sb-set b.w { color: var(--yellow); font-weight: 700; }
.sb-lg .sb-set { font-size: 14px; padding: 3px 9px; min-width: 26px; }
/* Super tie-break box reads differently so 11-9 isn't mistaken for a set */
.sb-stb { border-color: var(--yellow); border-style: dashed; }
.sb-wo { font-size: 9px; font-weight: 800; color: var(--red); border: 1px solid var(--red);
  padding: 0 4px; margin-right: 4px; letter-spacing: .06em; align-self: center; }
.score-pill .sb-set { background: transparent; }

/* ── Player profile overlay ─────────────────────────────────
   Public: competitive record only. Contact details and screening history
   are never rendered here. */
.pp-link { color: inherit; cursor: pointer; border-bottom: 1px dotted rgba(239,22,31,.5);
  transition: color .12s; }
.pp-link:hover { color: var(--yellow); border-bottom-color: var(--yellow); }
.pp-amp { color: var(--muted); font-weight: 400; }

.pp-overlay { position: fixed; inset: 0; z-index: 300; display: flex;
  align-items: flex-end; justify-content: center; background: rgba(6,9,6,.86);
  backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.pp-overlay.open { opacity: 1; pointer-events: auto; }
.pp-box { background: var(--surface); border: 1px solid var(--border2); width: 100%;
  max-width: 640px; max-height: 88vh; display: flex; flex-direction: column;
  transform: translateY(14px); transition: transform .22s cubic-bezier(.22,.8,.3,1); }
.pp-overlay.open .pp-box { transform: none; }
@media (min-width: 640px) { .pp-overlay { align-items: center; } }

.pp-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border); }
.pp-name { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 20px;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; }
.pp-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.pp-x { margin-left: auto; background: transparent; border: 1px solid var(--border2);
  color: var(--muted2); width: 30px; height: 30px; font-size: 17px; line-height: 1;
  cursor: pointer; flex: 0 0 auto; }
.pp-x:hover { border-color: var(--yellow); color: var(--yellow); }

.pp-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--border); border-bottom: 1px solid var(--border); }
.pp-stat { background: var(--black2); padding: 12px 6px; text-align: center; }
.pp-stat .v { display: block; font-family: 'Rajdhani', sans-serif; font-weight: 600;
  font-size: 17px; color: var(--text); line-height: 1; }
.pp-stat .v.win { color: var(--green); }
.pp-stat .k { display: block; font-family: 'JetBrains Mono', monospace; font-size: 8.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

.pp-body { overflow: auto; padding: 16px 20px 20px; }
.pp-sec-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--yellow); margin-bottom: 9px; }
.pp-entry { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--border); background: var(--black2); padding: 9px 11px; margin-bottom: 6px; }
.pp-partner { font-size: 12.5px; color: var(--muted2); }
.pp-club { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--muted); border: 1px solid var(--border2); padding: 2px 7px; }

.pp-match { border: 1px solid var(--border); border-left: 3px solid var(--border2);
  background: var(--black2); padding: 10px 12px; margin-bottom: 6px; }
.pp-match.won  { border-left-color: var(--green); }
.pp-match.lost { border-left-color: var(--red); }
.pp-match-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.pp-round { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--muted2);
  border: 1px solid var(--border2); padding: 1px 6px; }
.pp-when { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--muted); }
.pp-live { margin-left: auto; font-size: 9px; font-weight: 700; color: var(--green); letter-spacing: .1em; }
.pp-match-body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-opp { font-size: 13px; color: var(--text); flex: 1 1 auto; min-width: 0; }
.pp-pending { color: var(--muted); font-size: 11.5px; }
.pp-res { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px;
  width: 22px; text-align: center; flex: 0 0 auto; }
.pp-res.w { color: var(--green); }
.pp-res.l { color: var(--red); }
.pp-empty { color: var(--muted); font-size: 12.5px; padding: 10px 0; }

/* ── My Team: find-by-name ──────────────────────────────────
   The 4-digit code gated information that is public on other tabs, and
   players lost it. Name search is the primary path now. */
.mt-find { max-width: 480px; margin: 0 auto; padding: 22px 20px; }
.mt-find-h { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 17px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); margin-bottom: 7px; }
.mt-find-sub { color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 16px; }
#mtSearch { width: 100%; padding: 14px 15px; font-size: 16px; }
.mt-results { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.mt-tip { color: var(--muted); font-size: 12px; padding: 10px 2px; line-height: 1.5; }
.mt-hit { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--black2); border: 1px solid var(--border2); padding: 12px 14px;
  cursor: pointer; transition: all .12s; font-family: inherit; }
.mt-hit:hover { border-color: var(--yellow); background: rgba(239,22,31,.08); }
.mt-hit-name { font-size: 14px; font-weight: 600; color: var(--text); flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-hit-meta { flex: 0 0 auto; }
.mt-hit-go { color: var(--yellow); font-size: 17px; flex: 0 0 auto; }
.mt-alt { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.mt-alt summary { cursor: pointer; font-size: 12.5px; color: var(--muted2); list-style: none; }
.mt-alt summary::-webkit-details-marker { display: none; }
.mt-alt summary::before { content: '▸ '; color: var(--yellow); }
.mt-alt[open] summary::before { content: '▾ '; }
.mt-alt-body { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.mt-code { width: 120px; text-align: center; font-family: 'Rajdhani', sans-serif;
  font-size: 26px; font-weight: 700; letter-spacing: .22em; padding: 10px 0; color: var(--yellow); }
.mt-err { color: var(--red); font-size: 12px; width: 100%; min-height: 15px; }
.mt-hint { font-size: 11.5px; color: var(--muted); margin-top: 16px; line-height: 1.5; }

/* Identity bar inside My Team */
.mt-who { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  border: 1px solid var(--border); background: var(--black2); padding: 9px 12px; margin-bottom: 14px; }
.mt-who-name { font-size: 12.5px; font-weight: 600; color: var(--muted2); }
.mt-who-code { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--gold);
  border: 1px solid var(--gold2); padding: 1px 6px; }
.mt-who-link, .mt-who-switch { margin-left: auto; background: transparent;
  border: 1px solid var(--border2); color: var(--muted2); font-family: 'Rajdhani', sans-serif;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; cursor: pointer; }
.mt-who-link { margin-left: auto; }
.mt-who-switch { margin-left: 0; }
.mt-who-link:hover, .mt-who-switch:hover { border-color: var(--yellow); color: var(--yellow); }
.mt-tip-pending { border-left: 2px solid var(--gold); background: rgba(255,61,78,.06);
  padding: 11px 13px; color: var(--muted2); line-height: 1.6; }
.mt-tip-pending b { color: var(--text); }
.mt-hl { color: var(--yellow); font-weight: 700; }
.sb-ret { font-size: 9px; font-weight: 800; color: var(--gold); border: 1px solid var(--gold2);
  padding: 0 4px; margin-right: 4px; letter-spacing: .06em; align-self: center; }

/* ── Score correction trail ─────────────────────────────────
   Pasal 6 decides qualification on game difference, so a corrected score
   has to stay visible rather than silently overwriting. */
.sh-row { border: 1px solid var(--border); border-left: 3px solid var(--olive);
  background: var(--black2); padding: 10px 12px; margin-bottom: 7px; }
.sh-row.corr { border-left-color: var(--yellow); background: rgba(239,22,31,.06); }
.sh-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.sh-when { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); }
.sh-who { font-size: 11.5px; color: var(--muted2); }
.sh-tag { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 8.5px;
  letter-spacing: .1em; color: var(--yellow); border: 1px solid var(--yellow); padding: 1px 6px; }
.sh-tag.first { color: var(--muted); border-color: var(--border2); }
.sh-score { font-family: 'Rajdhani', sans-serif; font-size: 16px; color: var(--text);
  display: flex; align-items: center; gap: 8px; }
.sh-before { color: var(--muted); text-decoration: line-through; font-size: 14px; }
.sh-flag { font-size: 9px; font-weight: 800; color: var(--red); border: 1px solid var(--red); padding: 0 5px; }
.sh-empty { color: var(--muted); font-size: 12.5px; padding: 10px 0; }

/* ── Schedule-change banner (player side) ──────────────────── */
.mv-banner { border: 2px solid var(--yellow); background: rgba(239,22,31,.1);
  padding: 12px 14px; margin-bottom: 14px; }
.mv-head { display: flex; align-items: center; gap: 10px; font-family: 'Rajdhani', sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: .06em; color: var(--yellow); margin-bottom: 9px; }
.mv-head button { margin-left: auto; background: transparent; border: 1px solid var(--border2);
  color: var(--muted2); width: 24px; height: 24px; font-size: 14px; line-height: 1; cursor: pointer; }
.mv-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px;
  padding: 5px 0; border-top: 1px solid rgba(239,22,31,.2); }
.mv-cat { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--muted);
  border: 1px solid var(--border2); padding: 1px 6px; }
.mv-old { color: var(--muted); text-decoration: line-through; }
.mv-arrow { color: var(--yellow); }
.mv-new { color: var(--text); font-weight: 600; }
.mv-note { font-size: 11px; color: var(--muted2); margin-top: 8px; }

/* ── Bracket path ("if you win") ───────────────────────────── */
.path-strip { margin-top: 12px; border-top: 1px solid rgba(239,22,31,.25); padding-top: 10px; }
.path-head { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.path-row { display: flex; align-items: baseline; gap: 9px; font-size: 12px; padding: 3px 0; }
.path-rd { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); min-width: 74px; }
.path-vs { color: var(--muted2); }
.path-vs b { color: var(--text); font-weight: 600; }
.path-vs i { color: var(--muted); font-style: italic; }

/* ── Public roster (Teams tab) ─────────────────────────────── */
.roster-cat { margin-top: 18px; }
.roster-cat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px;
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid var(--border2); padding-bottom: 7px; }
.roster-n { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: var(--muted); border: 1px solid var(--border2); padding: 1px 7px; }
/* Edit button on a collapsed team row — substitutions are time-critical. */
.row-edit { flex: 0 0 auto; background: transparent; border: 1px solid var(--armour);
  color: var(--muted2); padding: 3px 9px; font-size: 12px; line-height: 1.3; cursor: pointer;
  transition: all .12s; }
.row-edit:hover { border-color: var(--yellow); color: var(--yellow); background: rgba(239,22,31,.1); }

/* ── Public visibility mode picker ─────────────────────────── */
.pm-grid { display: flex; flex-direction: column; gap: 6px; }
.pm-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--black2); border: 1px solid var(--armour); padding: 11px 13px;
  cursor: pointer; transition: all .12s; font-family: inherit; }
.pm-opt:hover { border-color: var(--yellow); background: rgba(239,22,31,.07); }
.pm-opt.on { border-color: var(--yellow); background: rgba(239,22,31,.14); }
.pm-ico { font-size: 17px; flex: 0 0 auto; }
.pm-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.pm-txt b { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.pm-opt.on .pm-txt b { color: var(--yellow); }
.pm-txt small { font-size: 11px; color: var(--muted); }
.pm-tick { color: var(--yellow); font-size: 15px; flex: 0 0 auto; }