/* Layout: a deep scoreboard band on top, calm court-side neutrals below; scoreboard numerals for everything that counts */
:root {
  --bg: #F1F4F1;
  --surface: #FFFFFF;
  --surface-2: #E7ECE8;
  --surface-3: #DAE1DC;
  --line: #D2D9D4;
  --line-strong: #ABB7B0;
  --ink: #101915;
  --ink-2: #435049;
  --ink-3: #64726B;
  --good: #16794A; --good-soft: #DCF1E4;
  --bad: #BB3328; --bad-soft: #FADFDB;
  --warn: #8F5400; --warn-soft: #FAEBD2;
  --lv-b: #4E6F6A; --lv-b-bg: #E0EAE8;
  --lv-bs: #146F69; --lv-bs-bg: #D6EEEB;
  --lv-i: #275DA6; --lv-i-bg: #DDE7F6;
  --lv-is: #4B3FBC; --lv-is-bg: #E5E2F8;
  --lv-a: #995009; --lv-a-bg: #F7E6D2;
  --lv-e: #A92F24; --lv-e-bg: #F7DDD9;
  --brand: #1F5FD1; --brand-ink: #FFFFFF; --brand-text: #1A4FAF; --brand-soft: #E3ECFB;
  --accent: #D7F23A; --accent-ink: #1B2400;
  --deep: #0B1E3F; --deep-2: #14305C; --deep-ink: #F4F7FB; --deep-ink-2: #A9B8D3; --deep-well: #0F2547;
  --team-a: #3D7BEA; --team-b: #E8572A;
  --medal-1: #E3B53C; --medal-2: #C3CCD4; --medal-3: #D08B52; --medal-ink: #1C1608;
  --overlay: rgba(9, 14, 12, 0.55);
  --shadow: 0 1px 2px rgba(16, 25, 21, 0.06), 0 6px 18px rgba(16, 25, 21, 0.07);
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 14px;
  --radius-sm: 9px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0E0C; --surface: #131917; --surface-2: #1B2320; --surface-3: #252F2B; --line: #28322E; --line-strong: #3E4C46;
    --ink: #E7EEEA; --ink-2: #B2BFB8; --ink-3: #8B9992;
    --good: #5FCB8E; --good-soft: #13291D; --bad: #FF8F84; --bad-soft: #36140F; --warn: #F1B85E; --warn-soft: #33250E;
    --lv-b: #A6C3BE; --lv-b-bg: #1C2927; --lv-bs: #72D4CB; --lv-bs-bg: #10302C; --lv-i: #95BBF1; --lv-i-bg: #15253D;
    --lv-is: #AEA6F7; --lv-is-bg: #201D42; --lv-a: #F2B06C; --lv-a-bg: #36230F; --lv-e: #F69F93; --lv-e-bg: #3A1713;
    --brand-text: #8DB4FF; --brand-soft: #172A4D;
    --overlay: rgba(0, 0, 0, 0.66); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0E0C; --surface: #131917; --surface-2: #1B2320; --surface-3: #252F2B; --line: #28322E; --line-strong: #3E4C46;
  --ink: #E7EEEA; --ink-2: #B2BFB8; --ink-3: #8B9992;
  --good: #5FCB8E; --good-soft: #13291D; --bad: #FF8F84; --bad-soft: #36140F; --warn: #F1B85E; --warn-soft: #33250E;
  --lv-b: #A6C3BE; --lv-b-bg: #1C2927; --lv-bs: #72D4CB; --lv-bs-bg: #10302C; --lv-i: #95BBF1; --lv-i-bg: #15253D;
  --lv-is: #AEA6F7; --lv-is-bg: #201D42; --lv-a: #F2B06C; --lv-a-bg: #36230F; --lv-e: #F69F93; --lv-e-bg: #3A1713;
  --brand-text: #8DB4FF; --brand-soft: #172A4D;
  --overlay: rgba(0, 0, 0, 0.66); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
html, body { height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--deep); }
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: 0.005em; }
h1 { font-size: clamp(30px, 4.4vw, 44px); }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
p { margin: 0; }
a { color: var(--brand-text); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.num, table td.n, .score, .timer { font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.muted { color: var(--ink-3); }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-s { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid { display: grid; gap: 16px; }
.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-3 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

/* app shell */
.app { min-height: 100%; display: flex; flex-direction: column; }
.band { background: var(--deep); color: var(--deep-ink); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.band-in, .page { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.topbar { display: flex; align-items: center; gap: 12px; padding-block: 12px 6px; min-width: 0; }
.crest { width: 42px; height: 42px; border-radius: 11px; background: var(--deep-2); flex: none; display: grid; place-items: center; overflow: hidden; color: var(--accent); font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.crest img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.crest.lg { width: 64px; height: 64px; border-radius: 16px; font-size: 28px; }
.topbar .title { min-width: 0; }
.topbar .title b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .title span { display: block; font-size: 13px; color: var(--deep-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { appearance: none; border: 0; background: none; cursor: pointer; padding: 10px 12px 9px; color: var(--deep-ink-2); font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.02em; border-bottom: 3px solid transparent; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; }
.tab:hover { color: var(--deep-ink); }
.tab[aria-current="page"] { color: var(--deep-ink); border-bottom-color: var(--accent); }
.tab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); }
.page { padding-block: 22px 64px; flex: 1 0 auto; }
.icon-btn { appearance: none; border: 0; background: transparent; color: inherit; width: 40px; height: 40px; border-radius: 10px; display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.icon-btn:hover { background: rgba(127, 127, 127, 0.14); }
.band .icon-btn { color: var(--deep-ink); }
.modechip { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--deep-2); color: var(--deep-ink-2); white-space: nowrap; }
.livechip { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; border: 0; cursor: pointer; }
.livechip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .livechip i, .blink { animation: none !important; } }

/* surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; min-width: 0; }
.card.tight { padding: 12px; }
.card.flush { padding: 0; overflow: hidden; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.card-h h3 { font-size: 21px; }
.section-h { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.divider { height: 1px; background: var(--line); border: 0; margin: 4px 0; }
.note { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14.5px; color: var(--ink-2); }
.note.warn { background: var(--warn-soft); color: var(--warn); }
.note.good { background: var(--good-soft); color: var(--good); }
.note.bad { background: var(--bad-soft); color: var(--bad); }

/* controls */
.btn { appearance: none; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); min-height: 44px; padding: 8px 16px; border-radius: 11px; font-weight: 600; font-size: 15.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.danger { color: var(--bad); border-color: var(--bad); background: transparent; }
.btn.danger.solid { background: var(--bad); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { min-height: 36px; padding: 5px 12px; font-size: 14.5px; border-radius: 9px; }
.btn.lg { min-height: 52px; padding: 10px 22px; font-size: 17px; }
.btn.block { width: 100%; }
.band .btn { border-color: rgba(255, 255, 255, 0.22); background: transparent; color: var(--deep-ink); }
.band .btn:hover { background: rgba(255, 255, 255, 0.08); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.02em; }
.field .hint { font-size: 13px; color: var(--ink-3); }
.input, select.input, textarea.input { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); }
textarea.input { min-height: 140px; resize: vertical; font-size: 14.5px; line-height: 1.45; }
.input:focus { outline: 3px solid var(--brand-soft); border-color: var(--brand); }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { appearance: none; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); min-height: 38px; padding: 6px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.chip:hover { background: var(--surface-2); }
.chip[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); font-weight: 600; }
.chip.dim { opacity: 0.55; }
.chip .tag { font-family: var(--font-display); font-weight: 700; font-size: 13px; background: var(--deep); color: var(--accent); border-radius: 6px; padding: 1px 6px; }
.seg { display: inline-flex; flex-wrap: wrap; background: var(--surface-2); border-radius: 12px; padding: 4px; gap: 4px; max-width: 100%; }
.seg button { appearance: none; border: 0; background: transparent; color: var(--ink-2); min-height: 38px; padding: 6px 14px; border-radius: 9px; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: var(--surface); }
.stepper button { appearance: none; border: 0; background: transparent; width: 44px; height: 44px; font-size: 22px; cursor: pointer; color: var(--ink); }
.stepper button:hover { background: var(--surface-2); }
.stepper output { min-width: 54px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; }
.toggle input { width: 20px; height: 20px; accent-color: var(--brand); }
.optcard { appearance: none; text-align: left; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.optcard b { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.optcard span { font-size: 13.5px; color: var(--ink-3); }
.optcard[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.optcard[aria-pressed="true"] b { color: var(--brand-text); }
.optgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

/* tags & badges */
.lvl { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.lv-B { color: var(--lv-b); background: var(--lv-b-bg); } .lv-BS { color: var(--lv-bs); background: var(--lv-bs-bg); }
.lv-I { color: var(--lv-i); background: var(--lv-i-bg); } .lv-IS { color: var(--lv-is); background: var(--lv-is-bg); }
.lv-A { color: var(--lv-a); background: var(--lv-a-bg); } .lv-E { color: var(--lv-e); background: var(--lv-e-bg); }
.ldot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: currentColor; }
.cal { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; color: var(--warn); background: var(--warn-soft); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.medal { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--medal-ink); flex: none; }
.medal.m1 { background: var(--medal-1); } .medal.m2 { background: var(--medal-2); } .medal.m3 { background: var(--medal-3); }
.pos { width: 28px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink-3); display: inline-block; }
.court { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 11px; background: var(--deep); color: var(--accent); flex: none; line-height: 1; }
.court small { font-size: 9.5px; letter-spacing: 0.14em; font-weight: 600; color: var(--deep-ink-2); text-transform: uppercase; }
.court b { font-family: var(--font-display); font-weight: 800; font-size: 25px; }
.move { font-family: var(--font-display); font-weight: 700; font-size: 15px; white-space: nowrap; }
.move.up { color: var(--good); } .move.down { color: var(--bad); } .move.flat { color: var(--ink-3); } .move.new { color: var(--brand-text); }
.move svg { fill: currentColor; stroke-width: 1.5; margin-right: 2px; vertical-align: 0.02em; }
.chk { display: inline-flex; color: var(--good); margin-left: 3px; }
.status { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.status.live { background: var(--accent); color: var(--accent-ink); }
.status.done { background: var(--surface-2); color: var(--ink-2); }
.status.setup { background: var(--warn-soft); color: var(--warn); }
.form { display: inline-flex; gap: 3px; }
.form i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.form i.W { background: var(--good); } .form i.L { background: var(--bad); } .form i.D { background: var(--ink-3); }

/* tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
table.t { width: 100%; border-collapse: collapse; font-size: 15px; }
table.t th { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 10px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); }
table.t td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.n, table.t th.n { text-align: right; white-space: nowrap; }
table.t td.big { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
table.t tbody tr.click { cursor: pointer; }
table.t tbody tr.click:hover td { background: var(--surface-2); }
table.t tr.cut td { border-bottom: 2px dashed var(--line-strong); }
.pname { display: flex; flex-direction: column; min-width: 0; }
.pname b { font-weight: 600; white-space: nowrap; }
.pname span { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 720px) { .hide-sm { display: none; } }
@media (max-width: 980px) { .hide-md { display: none; } }

/* match cards */
.match { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-width: 0; }
.match.is-live { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.match .teams { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.team { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: 16px; }
.team .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.team.win .nm { color: var(--ink); }
.team.lose .nm { color: var(--ink-3); font-weight: 500; }
.scorebox { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.score { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; min-width: 34px; text-align: right; }
.score.lose { color: var(--ink-3); }
.match .meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.odds { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); min-width: 160px; flex: 1 1 200px; }
.odds .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; display: flex; }
.odds .bar i { display: block; background: var(--brand); height: 100%; }
.odds b { font-family: var(--font-display); font-size: 15px; color: var(--ink-2); }
.sitout { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--ink-3); }
.sitout span.p { background: var(--surface-2); color: var(--ink-2); padding: 2px 9px; border-radius: 999px; }
.round-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 8px; flex-wrap: wrap; }
.round-h h3 { font-size: 22px; }
.matches { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }

/* timer */
.timer { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 0.95; letter-spacing: 0.01em; }
.timer.small { font-size: 34px; }
.timer.zero { color: var(--bad); }
.blink { animation: pulse 1s steps(2) infinite; }
.timerbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--deep); color: var(--deep-ink); border-radius: var(--radius); padding: 14px 18px; }
.timerbar .lbl { color: var(--deep-ink-2); }
.timerbar .btn { border-color: rgba(255, 255, 255, 0.25); background: transparent; color: var(--deep-ink); }
.timerbar .btn.accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* home */
.hero { background: var(--deep); color: var(--deep-ink); }
.hero .band-in { padding-block: 34px 30px; display: flex; flex-direction: column; gap: 10px; }
.hero h1 { font-size: clamp(38px, 6vw, 64px); font-weight: 800; letter-spacing: 0.01em; }
.hero p { color: var(--deep-ink-2); max-width: 60ch; font-size: 17px; }
.hero .court-mark { color: var(--accent); }
.ccard { appearance: none; text-align: left; cursor: pointer; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 0; overflow: hidden; color: var(--ink); display: flex; flex-direction: column; min-width: 0; }
.ccard:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.ccard .top { padding: 16px; display: flex; gap: 14px; align-items: center; color: #fff; }
.ccard .top b { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; display: block; }
.ccard .top span { font-size: 13.5px; opacity: 0.85; }
.ccard .bot { padding: 12px 16px 14px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.ccard .bot b { font-family: var(--font-display); font-size: 20px; color: var(--ink); display: block; line-height: 1; }
.ccard.add { border-style: dashed; align-items: center; justify-content: center; min-height: 150px; gap: 8px; color: var(--ink-2); font-weight: 600; }
.palettes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.pal { appearance: none; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; padding: 0; background: var(--surface); cursor: pointer; text-align: left; color: var(--ink); }
.pal[aria-pressed="true"] { border-color: var(--ink); }
.pal .sw { display: grid; grid-template-columns: 2fr 1fr 1fr; height: 46px; }
.pal .nm { display: block; padding: 6px 10px 8px; font-size: 13.5px; font-weight: 600; }
.logo-drop { display: flex; align-items: center; gap: 14px; }

/* live night */
.nighthead { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.nighthead h1 { font-size: clamp(28px, 4vw, 40px); }
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.subtabs .chip { min-height: 42px; font-weight: 600; }
.standings td.nm { font-weight: 600; }
.groupbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.planlist { display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.planlist span { background: var(--surface-2); border-radius: 8px; padding: 4px 8px; }
.planlist span b { font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.ropts { display: flex; flex-wrap: wrap; gap: 6px; }
.ropt { appearance: none; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: 10px; min-width: 64px; padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.ropt b { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.ropt span { font-size: 11.5px; color: var(--ink-3); }
.ropt[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.ropt[aria-pressed="true"] b { color: var(--brand-text); }
.ropt.nofit { border-style: dashed; }
.ropt .eq { color: var(--good); font-weight: 600; }
.pl-pick { display: flex; flex-wrap: wrap; gap: 8px; }

/* scorer */
/* live scorer: TV score bar (layout C) */
.sc3 { --sc3-box: clamp(118px, 19vw, 236px); background: var(--deep); color: var(--deep-ink); border-radius: 24px; padding: clamp(14px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 14px; }
.sc3.pts { --sc3-box: clamp(150px, 27vw, 330px); }
.sc3-h { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 20px; }
.sc3-t { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sc3-t b { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.6vw, 42px); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc3-t > span { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1.6vw, 18px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep-ink-2); }
.sc3-mid { display: flex; justify-content: center; min-width: 0; }
.sc3-state { border: 2px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 6px 20px; font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 2.2vw, 26px); line-height: 1.15; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.sc3-state.quiet { border-color: var(--deep-ink-2); color: var(--deep-ink); }
.sc3-state { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; }
.sc3-dot { width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--team-a, #3D7BEA); flex: none; }
.sc3-dot.b { background: var(--team-b, #E8572A); }
.sc3-idle { font-size: 15px; color: var(--deep-ink-2); }
.sc3-clock { background: var(--deep-2); border-radius: 16px; padding: 10px 20px; display: flex; align-items: baseline; gap: 12px; }
.sc3-clock small { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deep-ink-2); white-space: nowrap; }
.sc3-clock b { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 4.4vw, 50px); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.sc3-clock b.zero { color: #FF8A80; }
.sc3-cols { display: flex; justify-content: flex-end; gap: 10px; margin: 0 0 -6px; }
.sc3-cols span { width: var(--sc3-box); text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--deep-ink-2); }
.sc3-row { appearance: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; align-items: stretch; min-height: clamp(150px, 26vh, 260px); border-radius: 22px; overflow: hidden; background: var(--deep-2); touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: transform 0.08s ease, opacity 0.2s ease; }
.sc3-row:active:not(:disabled) { transform: scale(0.994); }
.sc3-row:disabled { cursor: default; }
.sc3-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sc3-row.lost { opacity: 0.55; }
.sc3-stripe { background: var(--team-a, #1F5FD1); }
.sc3-row.b .sc3-stripe { background: var(--team-b, #E8572A); }
.sc3-names { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 12px 8px 12px 8px; min-width: 0; }
.sc3-nl { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 5.2vw, 64px); line-height: 0.98; text-transform: uppercase; letter-spacing: 0.01em; min-width: 0; }
.sc3-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc3-n .flag { font-size: 0.5em; margin-left: 0.3em; vertical-align: 0.3em; }
.sc3-names small { font-size: 15px; color: var(--deep-ink-2); }
.sc3-sub span + span::before { content: ' · '; }
.sc3-names .sc3-win { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; }
.sc3-boxes { display: flex; gap: 10px; }
.sc3-box { width: var(--sc3-box); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.sc3-box small { display: none; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; }
.sc3-box b { font-family: var(--font-display); font-weight: 800; line-height: 0.8; font-variant-numeric: tabular-nums; }
.sc3-games { background: var(--deep-well, #0F2547); }
.sc3-games small { color: var(--deep-ink-2); }
.sc3-games b { font-size: calc(var(--sc3-box) * 0.84); }
.sc3-pts { background: var(--accent); color: var(--accent-ink); }
.sc3-pts b { font-style: italic; font-size: calc(var(--sc3-box) * 0.8); letter-spacing: -0.02em; }
.sc3.pts .sc3-pts b { font-size: calc(var(--sc3-box) * 0.62); }
.sc3-f { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 4px; }
.sc3-ctl { display: flex; flex-wrap: wrap; gap: 10px; }
.sc3-btn { appearance: none; min-height: 50px; padding: 0 18px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.28); background: transparent; color: var(--deep-ink); font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.sc3-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.sc3-btn:disabled { opacity: 0.45; cursor: default; }
.sc3-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sc3-btn.hi { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
.sc3-btn.hi:hover:not(:disabled) { background: var(--accent); filter: brightness(1.06); }
.sc3-btn.sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.sc3-info { flex: 1 1 200px; text-align: right; font-size: 15px; line-height: 1.35; color: var(--deep-ink-2); }
.sc3-info.hot { color: var(--accent); font-weight: 600; }
.sc3-snd { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sc3-short { display: none; }
.sc3-tog { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--deep-ink); cursor: pointer; }
.sc3-tog input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.sc3-note { margin: 0; font-size: 15px; color: var(--deep-ink-2); }
@media (max-width: 640px) {
  .sc3 { padding: 14px; border-radius: 20px; gap: 12px; }
  .sc3-h { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; }
  .sc3-mid { grid-column: 1 / -1; grid-row: 2; min-height: 40px; align-items: center; }
  .sc3-fmt, .sc3-cols, .sc3-clock small { display: none; }
  .sc3-clock { padding: 8px 14px; border-radius: 14px; }
  .sc3-row { grid-template-columns: 12px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 0; min-height: clamp(210px, 31vh, 300px); border-radius: 20px; }
  .sc3-stripe { grid-row: 1 / span 2; }
  .sc3-names { padding: 12px 14px 10px; gap: 4px 10px; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
  .sc3-nl { flex-direction: row; flex-wrap: wrap; font-size: clamp(22px, 7vw, 28px); line-height: 1.05; }
  .sc3-n + .sc3-n::before { content: '&'; margin: 0 0.28em; }
  .sc3-tap { display: none; }
  .sc3-sub span + span::before { content: none; }
  .sc3-names small { font-size: 14px; white-space: nowrap; }
  .sc3-boxes { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .sc3.pts .sc3-boxes { grid-template-columns: minmax(0, 1fr); }
  .sc3-box { width: auto; padding: 10px 0 14px; }
  .sc3-box small { display: block; }
  .sc3-games b { font-size: clamp(80px, 30vw, 136px); }
  .sc3-pts b, .sc3.pts .sc3-pts b { font-size: clamp(76px, 28vw, 130px); }
  .sc3-ctl { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  .sc3-btn { min-height: 48px; padding: 0 8px; font-size: 14px; gap: 6px; }
  .sc3-btn svg { display: none; }
  .sc3-long { display: none; }
  .sc3-short { display: inline; }
  .sc3-info { text-align: left; flex: 1 1 100%; }
  .sc3-snd { width: 100%; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 12px; }
  .sc3-snd .sc3-btn svg { display: inline; }
}

/* finals bracket */
.bracket { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) 54px minmax(0, 0.8fr); align-items: center; gap: 0; }
@media (max-width: 860px) { .bracket { grid-template-columns: 1fr; gap: 12px; } .bracket .wire { display: none; } }
.bslot { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.bslot h4 { margin: 0; padding: 10px 14px; font-family: var(--font-display); font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--surface-2); color: var(--ink-2); display: flex; justify-content: space-between; align-items: center; }
.bteam { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); min-width: 0; }
.bteam .seeds { display: flex; gap: 4px; }
.bteam .seed { font-family: var(--font-display); font-weight: 700; font-size: 13px; background: var(--deep); color: var(--accent); border-radius: 6px; padding: 1px 6px; }
.bteam .nm { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bteam .sc { font-family: var(--font-display); font-weight: 800; font-size: 26px; }
.bteam.win { background: var(--brand-soft); }
.bteam.win .nm { color: var(--brand-text); }
.bteam.tbd .nm { color: var(--ink-3); font-weight: 500; font-style: italic; }
.wire { height: 100%; min-height: 120px; position: relative; }
.wire::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--line-strong); }
.champ { background: var(--deep); color: var(--deep-ink); border-radius: var(--radius); padding: 18px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.champ .eyebrow { color: var(--accent); }
.champ b { font-family: var(--font-display); font-size: 26px; line-height: 1.05; }

/* modal */
.overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 50; display: flex; align-items: center; justify-content: center; padding: max(12px, env(safe-area-inset-top, 0px)) var(--gutter-r) max(12px, env(safe-area-inset-bottom, 0px)) var(--gutter-l); }
.sheet { background: var(--surface); color: var(--ink); border-radius: 18px; width: min(640px, 100%); max-height: calc(100% - 8px); overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; }
.sheet.wide { width: min(960px, 100%); }
.sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 10px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.sheet-h h2 { font-size: 26px; }
.sheet-b { padding: 6px 18px 18px; display: flex; flex-direction: column; gap: 16px; }
.sheet-f { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 18px 18px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--surface); }
@media (max-width: 560px) { .overlay { align-items: flex-end; padding-left: 0; padding-right: 0; padding-bottom: 0; } .sheet { border-radius: 18px 18px 0 0; width: 100%; max-height: 92%; } }
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(520px, calc(100% - 32px)); pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 12px; font-size: 15px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.toast.bad { background: var(--bad); color: #fff; }
.toast.good { background: var(--good); color: #fff; }

/* empty states */
.empty { border: 1.5px dashed var(--line-strong); border-radius: var(--radius); padding: 28px 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: var(--surface); }
.empty h3 { font-size: 24px; }
.empty p { color: var(--ink-2); max-width: 60ch; }

/* stats */
.stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.stat { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; }
.stat span { font-size: 12.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.chart { width: 100%; height: auto; display: block; }
.story-wrap { display: grid; gap: 18px; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .story-wrap { grid-template-columns: 1fr; } }
.story-canvas { width: 100%; max-width: 360px; aspect-ratio: 9 / 16; height: auto; border-radius: 16px; background: var(--deep); box-shadow: var(--shadow); display: block; }
.preview-img { width: 100%; max-width: 360px; border-radius: 12px; }

/* TV */
.tv { background: var(--deep); color: var(--deep-ink); min-height: 100%; display: flex; flex-direction: column; padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-block: 18px 24px; gap: 18px; }
.tv-h { display: flex; align-items: center; gap: 18px; justify-content: space-between; flex-wrap: wrap; }
.tv-h .who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.tv-h .who b { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.4vw, 50px); line-height: 1; display: block; }
.tv-h .who > div > span { color: var(--deep-ink-2); font-size: clamp(15px, 1.4vw, 20px); }
.tv-clock { text-align: right; }
.tv-clock .timer { font-size: clamp(64px, 8vw, 128px); color: var(--accent); }
.tv-clock .timer.zero { color: #FF8A80; }
.tv-clock span { color: var(--deep-ink-2); font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 1.6vw, 24px); letter-spacing: 0.08em; text-transform: uppercase; }
.tv-body { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); flex: 1; align-items: start; }
@media (max-aspect-ratio: 1/1) { .tv-body { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .tv-body { grid-template-columns: 1fr; } }
.tv-courts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tv-court { background: var(--deep-2); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tv-court .ct { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.12em; color: var(--accent); font-size: 18px; display: flex; justify-content: space-between; }
.tv-court .tm { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; font-size: clamp(18px, 1.7vw, 26px); min-width: 0; }
.tv-court .tm span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tv-court .tm b { font-family: var(--font-display); font-size: clamp(30px, 2.8vw, 44px); line-height: 1; }
.tv-court .vs { color: var(--deep-ink-2); font-size: 13px; letter-spacing: 0.2em; }
.tv-court .tm.lose { color: var(--deep-ink-2); }
.tv-table { width: 100%; border-collapse: collapse; font-size: clamp(16px, 1.55vw, 24px); }
.tv-table th { text-align: left; color: var(--deep-ink-2); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.1em; font-size: 0.7em; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.tv-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.tv-table td.n, .tv-table th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tv-table td.big { font-family: var(--font-display); font-weight: 800; color: var(--accent); }
.tv-table .medal { width: 1.4em; height: 1.4em; font-size: 0.8em; }
.tv-panel { background: rgba(255, 255, 255, 0.04); border-radius: 18px; padding: 14px 16px; min-width: 0; }
.tv-panel h3 { font-size: clamp(20px, 1.8vw, 28px); color: var(--deep-ink); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 10px; }
.tv-panel h3 span { color: var(--deep-ink-2); font-weight: 600; }
.tv .btn { border-color: rgba(255, 255, 255, 0.25); background: transparent; color: var(--deep-ink); }
.tv-sit { color: var(--deep-ink-2); font-size: clamp(14px, 1.3vw, 19px); }

.runlayout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1020px) { .runlayout { grid-template-columns: minmax(0, 1fr); } }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; font-family: var(--font-body); font-weight: 600; color: var(--ink-3); margin-left: 8px; }
details[open] > summary::after { content: "–"; }
label.btn { position: relative; }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.chip .tiny { color: inherit; opacity: 0.75; }
a.btn { color: var(--ink); }
a.btn.primary { color: var(--brand-ink); }

/* ===== Padel Ladder v2: start page, kiosk, health, awards ===== */
.hero2 { position: relative; overflow: hidden; isolation: isolate; background: var(--deep); color: var(--deep-ink); display: flex; flex-direction: column; }
.hero-court { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; }
.hero2-shade { position: absolute; inset: 0; z-index: -1; background: var(--shade-v); pointer-events: none; }
.hero2-in { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; padding-block: 30px 22px; }
.hero2-copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hero-zone { height: clamp(210px, 58vw, 330px); margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); pointer-events: none; }
.hero2 h1 { font-size: clamp(44px, 5.6vw, 76px); font-weight: 800; line-height: 0.92; text-transform: uppercase; letter-spacing: 0.005em; }
.hero2 p { color: var(--deep-ink-2); font-size: 17px; max-width: 46ch; }
.brandmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.laddermark { flex: none; }
.herostats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
.herostats div { background: rgba(6, 14, 30, 0.62); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 9px 11px; min-width: 0; }
.herostats b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.herostats span { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep-ink-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.herostats .on b { color: var(--accent); }
/* "Live now" opens the list of live events when something is live */
.herostats > button { appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer; position: relative; background: rgba(6, 14, 30, 0.62); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 9px 11px; min-width: 0; transition: background-color 0.15s ease, border-color 0.15s ease; }
.herostats > button:hover { background: rgba(6, 14, 30, 0.84); border-color: rgba(255, 255, 255, 0.34); }
.herostats > button:focus-visible { outline-color: var(--accent); }
.herostats .hs-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 0.08em; animation: pulse 1.6s ease-in-out infinite; }
.herostats .hs-go { position: absolute; top: 15px; right: 9px; display: grid; color: var(--accent); transition: transform 0.15s ease; }
.herostats > button:hover .hs-go { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .herostats .hs-dot { animation: none; } .herostats > button:hover .hs-go { transform: none; } }
/* the list of live events it opens */
.livelist { display: flex; flex-direction: column; gap: 8px; }
.lv-row { appearance: none; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 11px 12px; width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; }
.lv-row:hover { background: var(--surface-2); }
.lv-row > svg { flex: none; color: var(--ink-3); }
.lv-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.lv-t b { font-weight: 600; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.lv-t small { font-size: 13.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.lv-prog { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px; font-size: 13.5px; color: var(--ink-2); }
@media (min-width: 760px) {
  .hero2 { min-height: clamp(520px, 66vh, 660px); }
  .hero2-shade { background: var(--shade-h); }
  .hero2-in { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 28px; row-gap: 22px; padding-block: 48px 44px; }
  .hero2-copy { grid-column: 1; grid-row: 2; }
  .herostats { grid-column: 1; grid-row: 3; }
  .hero-zone { grid-column: 2; grid-row: 1 / -1; height: auto; min-height: 340px; margin: 0; }
}
.btn.ondeep { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.28); color: var(--deep-ink); }
.btn.ondeep:hover { background: rgba(255, 255, 255, 0.14); }
a.btn.ondeep { color: var(--deep-ink); }

/* community cards */
.ccard { position: relative; }
.cc-top { position: relative; overflow: hidden; padding: 18px 16px; display: flex; gap: 14px; align-items: center; color: #fff; min-height: 104px; }
.cc-top .crest { position: relative; z-index: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.cc-court { position: absolute; right: -28px; top: 50%; width: 220px; height: 110px; transform: translateY(-46%) perspective(420px) rotateX(54deg) rotateZ(-14deg); opacity: 0.62; pointer-events: none; }
.cc-name { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cc-name b { font-family: var(--font-display); font-weight: 800; font-size: 25px; line-height: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.cc-name > span:last-child { font-size: 13.5px; opacity: 0.88; }
.cc-live, .cc-tag { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; border-radius: 999px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 6px; }
.cc-live { background: var(--accent); color: var(--accent-ink); }
.cc-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
.cc-tag { background: rgba(255, 255, 255, 0.16); color: #fff; }
.cc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.cc-stats div { padding: 10px 12px; min-width: 0; }
.cc-stats div + div { border-left: 1px solid var(--line); }
.cc-stats b { font-family: var(--font-display); font-weight: 800; font-size: 24px; display: block; line-height: 1; font-variant-numeric: tabular-nums; }
.cc-stats span { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.cc-last { padding: 11px 14px 14px; display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-2); min-height: 44px; }
.cc-last svg { color: var(--medal-1); flex: none; }
.cc-last b { color: var(--ink); }
.ccard:hover .cc-ball { animation: ccball 1.1s ease-in-out infinite alternate; }
@keyframes ccball { from { transform: translate(0, 0); } to { transform: translate(-64px, 26px); } }
@media (prefers-reduced-motion: reduce) { .ccard:hover .cc-ball, .cc-live i { animation: none; } }

/* sync and clock */
.syncchip { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-weight: 600; font-size: 13px; white-space: nowrap; min-height: 32px; }
.clockplan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; background: var(--surface-2); color: var(--ink-2); }
.clockplan.late { background: var(--warn-soft); color: var(--warn); }
.clockplan.early { background: var(--good-soft); color: var(--good); }
.clockplan .btn { color: var(--ink); }

/* setup helpers */
.pairs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.pair { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--surface-2); border-radius: 12px; padding: 6px 10px; min-width: 0; }
.pair .pn { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink-3); min-width: 20px; }
.pair > .muted { margin-left: auto; }
.pillstat { background: var(--surface-2); border-radius: 999px; padding: 4px 12px; font-size: 14px; color: var(--ink-2); }
.pillstat b { font-family: var(--font-display); font-size: 18px; color: var(--ink); margin-right: 3px; }
.pillstat.warn { background: var(--warn-soft); color: var(--warn); }
.pillstat.warn b { color: var(--warn); }
.gfix { display: flex; flex-wrap: wrap; gap: 8px; }
.gf { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 4px 4px 4px 10px; font-size: 14.5px; }

/* awards */
.awards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.award { display: flex; gap: 12px; align-items: flex-start; background: var(--surface-2); border-radius: 14px; padding: 12px; min-width: 0; }
.award b { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.1; margin: 2px 0; }
.award .eyebrow { color: var(--brand-text); font-size: 13px; }
.award .small { display: block; }
.aw-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--deep); color: var(--accent); display: grid; place-items: center; flex: none; }

/* health check and bin */
.health { display: flex; flex-direction: column; }
.hrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.hrow:first-child { border-top: 0; padding-top: 0; }
.hic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.hic.warn { background: var(--warn-soft); color: var(--warn); }
.hic.info { background: var(--surface-2); color: var(--ink-2); }

.bracket.two { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 0.8fr); }
@media (max-width: 860px) { .bracket.two { grid-template-columns: 1fr; } }

/* recap */
.recap h3 { display: inline-flex; align-items: center; gap: 8px; }
textarea.recap-box { min-height: 180px; font-size: 15px; }
div.recap-box { background: var(--surface-2); border-radius: 10px; padding: 18px; text-align: center; }

/* ===== Padel Ladder v3: start-page tabs, players and clubs ===== */
:root { --viz-bar: #1F5FD1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --viz-bar: #5B8FEA; } }
:root[data-theme="dark"] { --viz-bar: #5B8FEA; }

/* start page body: the calm page background */
.homebody { flex: 1 0 auto; background: var(--bg); color: var(--ink); }
.home-h { font-size: 26px; margin: 0 0 10px; }
.home-search { flex: 0 1 360px; }

/* tabs */
.hometabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.hometabs::-webkit-scrollbar { display: none; }
.htab { appearance: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: transparent; color: var(--ink-3); font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: 0.01em; padding: 8px 14px 9px; cursor: pointer; display: inline-flex; gap: 9px; align-items: center; min-height: 48px; white-space: nowrap; }
.htab:hover { color: var(--ink); }
.htab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.htab .cnt { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); border-radius: 999px; padding: 1px 8px; letter-spacing: 0; }
.htab[aria-selected="true"] .cnt { background: var(--brand-soft); color: var(--brand-text); }

/* highlight tiles */
.hi-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)); }
.hi { appearance: none; text-align: left; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 14px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; min-width: 0; font: inherit; }
.hi:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.hi:disabled { cursor: default; }
.hi-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--deep); color: var(--accent); display: grid; place-items: center; flex: none; }
.hi-tx { display: flex; flex-direction: column; min-width: 0; }
.hi-l { font-size: 12.5px; font-weight: 600; color: var(--brand-text); }
.hi b { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hi-d { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* who plays: single-series bars, values labelled at the tip */
.wp-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.barlist h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.br { display: grid; grid-template-columns: var(--lw, 9em) minmax(0, 1fr) 64px; gap: 10px; align-items: center; min-height: 28px; font-size: 14px; }
.br-l { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); white-space: nowrap; min-width: 0; }
.br-lt { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.br-t { display: block; border-left: 1px solid var(--line-strong); height: 22px; position: relative; }
.br-t i { position: absolute; left: 0; top: 4px; height: 14px; background: var(--viz-bar); border-radius: 0 4px 4px 0; }
.br-v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; white-space: nowrap; }
.br-v small { color: var(--ink-3); font-weight: 500; margin-left: 6px; font-size: 12px; }

/* filters */
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px; }
.filterbar select.input { width: auto; max-width: 100%; }
.fsearch { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 10px; min-height: 44px; flex: 1 1 220px; background: var(--surface); color: var(--ink-3); cursor: text; max-width: 100%; }
.fsearch:focus-within { outline: 3px solid var(--brand-soft); border-color: var(--brand); }
.fsearch input { border: 0; outline: none; background: transparent; color: var(--ink); flex: 1; min-width: 0; padding: 9px 0; }

/* club cards */
.cl-top { position: relative; overflow: hidden; padding: 18px 16px; display: flex; gap: 14px; align-items: center; color: #fff; min-height: 104px; background: linear-gradient(135deg, #0B1E3F 0%, #14305C 100%); }
.cl-name { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-right: 64px; }
.cl-name b { font-family: var(--font-display); font-weight: 800; font-size: 25px; line-height: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.cl-name > span:last-child { font-size: 13.5px; opacity: 0.9; }
.cl-badges { display: inline-flex; gap: 6px; }
.linkbtn { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--brand-text); cursor: pointer; text-align: left; }
.linkbtn:hover { text-decoration: underline; }
.card, .ccard, .hi, .empty { color: var(--ink); }
@media (max-width: 560px) {
  .hometabs { display: grid; grid-template-columns: auto auto auto; width: 100%; }
  .htab { justify-content: center; font-size: 20px; padding: 8px 6px 9px; }
  .htab .cnt { display: none; }
}
@media (max-width: 640px) {
  .hi-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); padding: 2px var(--gutter-r) 14px var(--gutter-l); scroll-padding-inline: var(--gutter-l); scrollbar-width: none; }
  .hi-grid::-webkit-scrollbar { display: none; }
  .hi { flex: 0 0 80%; scroll-snap-align: start; }
}
@media (max-width: 400px) { .htab { font-size: 18px; } }
.cc-stats.three { grid-template-columns: auto auto auto; }
.cc-stats.three span { white-space: nowrap; }
/* club cards: nights, communities, players and courts; the gaps narrow on small cards so every label still fits */
.cc-stats.four { grid-template-columns: repeat(4, minmax(0, auto)); container-type: inline-size; }
.cc-stats.four div { padding-inline: 8px; padding-inline: clamp(4px, calc((100cqi - 206px) / 8), 12px); }
.cc-stats.four span { display: block; padding-top: 4px; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hi b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; }

/* ===== Check-in screen: the TV look (community colours, Barlow, rounded panels), sized for any screen ===== */
.kb {
  background: var(--deep); color: var(--deep-ink);
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; gap: 0.7em;
  padding: max(16px, env(safe-area-inset-top, 0px)) var(--gutter-r) max(16px, env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  font-family: var(--font-body);
  font-size: clamp(15px, calc(4px + 2.3vmin), 34px);
  -webkit-font-smoothing: antialiased;
}
.kb ::selection { background: var(--accent); color: var(--accent-ink); }
.kb :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* header: community and date on the left, what is on and the time on the right, like the TV */
.kb-h { display: flex; align-items: center; justify-content: space-between; gap: 0.5em 1em; flex-wrap: wrap; }
.kb-who { display: flex; align-items: center; gap: 0.6em; min-width: 0; flex: 1 1 14em; }
.kb-who > div { min-width: 0; }
.kb-who .crest.lg { width: 2.3em; height: 2.3em; border-radius: 0.55em; font-size: 0.95em; }
.kb-who > div > b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.45em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-who > div > span { display: block; margin-top: 0.3em; color: var(--deep-ink-2); font-size: max(13px, 0.6em); line-height: 1.3; }
.kb-clock { margin-left: auto; text-align: right; }
.kb-clock span { display: block; color: var(--deep-ink-2); font-family: var(--font-display); font-weight: 700; font-size: max(13px, 0.6em); letter-spacing: 0.1em; text-transform: uppercase; }
.kb-clock b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2em; line-height: 0.95; color: var(--accent); font-variant-numeric: tabular-nums; }

/* find your name */
.kb-find { display: flex; align-items: center; gap: 0.5em; background: var(--deep-2); border: 2px solid transparent; border-radius: 0.6em; padding: 0 0.35em 0 0.7em; min-height: max(54px, 2.3em); cursor: text; }
.kb-find.on, .kb-find:focus-within { border-color: var(--accent); }
.kb-find svg { flex: none; width: 0.95em; height: 0.95em; color: var(--accent); }
.kb-find input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--deep-ink); font-family: var(--font-display); font-weight: 700; font-size: 1.05em; letter-spacing: 0.02em; padding: 0.4em 0; }
.kb-find input::placeholder { color: var(--deep-ink-2); opacity: 1; }
.kb-find input:focus-visible { outline: none; }
.kb-find input::-webkit-search-cancel-button { display: none; }
.kb-x { appearance: none; flex: none; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: var(--deep-ink); font-family: var(--font-body); font-weight: 600; font-size: max(14px, 0.6em); padding: 0.5em 1em; min-height: 40px; cursor: pointer; }
.kb-x:hover { background: rgba(255, 255, 255, 0.18); }

/* tonight's players, with their check-in status */
.kb-res { flex: 1; display: flex; flex-direction: column; gap: 0.6em; background: rgba(255, 255, 255, 0.04); border-radius: 0.75em; padding: 0.65em 0.75em 0.75em; min-height: 0; }
.kb-res-h { display: flex; align-items: center; justify-content: space-between; gap: 0.5em 1em; flex-wrap: wrap; }
.kb-res-h b { font-family: var(--font-display); font-weight: 700; font-size: 0.95em; }
.kb-filt { display: flex; gap: 0.35em; flex-wrap: wrap; }
.kb-filt button { appearance: none; display: inline-flex; align-items: center; gap: 0.5em; min-height: 40px; padding: 0.3em 0.85em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: var(--deep-ink); font-family: var(--font-body); font-weight: 600; font-size: max(14px, 0.58em); cursor: pointer; }
.kb-filt button i { font-style: normal; font-family: var(--font-display); font-weight: 700; color: var(--deep-ink-2); }
.kb-filt button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.kb-filt button[aria-pressed="true"] i { color: inherit; }
.kb-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45em; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10em), 1fr)); align-content: start; }
.kb-pick { appearance: none; width: 100%; height: 100%; border: 0; border-radius: 0.5em; background: var(--deep-2); color: var(--deep-ink); text-align: left; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.25em; padding: 0.5em 0.7em; min-height: 56px; font: inherit; }
.kb-pick:hover { filter: brightness(1.14); }
.kb-pick.in { box-shadow: inset 0.22em 0 0 var(--accent); }
.kb-pn { font-family: var(--font-display); font-weight: 700; font-size: max(17px, 1.02em); line-height: 1.1; overflow-wrap: anywhere; }
.kb-st { display: inline-flex; align-items: center; gap: 0.35em; color: var(--deep-ink-2); font-family: var(--font-display); font-weight: 700; font-size: max(12px, 0.55em); letter-spacing: 0.08em; text-transform: uppercase; }
.kb-st.in { color: var(--accent); }
.kb-st svg { width: 1.1em; height: 1.1em; }

/* the courts */
.kb-body { flex: 1; display: flex; flex-direction: column; gap: 0.7em; }
.kb-sec { display: flex; flex-direction: column; gap: 0.6em; background: rgba(255, 255, 255, 0.04); border-radius: 0.75em; padding: 0.65em 0.75em 0.75em; }
.kb-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4em 1em; flex-wrap: wrap; }
.kb-sec-h b { font-family: var(--font-display); font-weight: 700; font-size: 0.95em; }
.kb-sec-h span { color: var(--deep-ink-2); font-family: var(--font-display); font-weight: 600; font-size: 0.8em; }
.kb-courts { --cols: 2; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0.5em; align-items: stretch; }
.kb-courts.c1 { --cols: 1; }
@media (min-aspect-ratio: 5/4) and (min-width: 900px) { .kb-courts.c3 { --cols: 3; } .kb-courts.c4 { --cols: 4; } }
.kb-court { background: var(--deep-2); border-radius: 0.6em; padding: 0.55em 0.75em 0.7em; display: flex; flex-direction: column; min-width: 0; }
.kb-ct { display: flex; justify-content: space-between; gap: 0.6em; margin-bottom: 0.3em; color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: max(13px, 0.66em); letter-spacing: 0.14em; text-transform: uppercase; }
.kb-ct span + span { color: var(--deep-ink-2); }
.kb-team { display: flex; flex-direction: column; align-items: flex-start; }
.kb-name { appearance: none; border: 0; background: transparent; color: var(--deep-ink); margin: 0 -0.2em; padding: 0.02em 0.2em; border-radius: 0.22em; font-family: var(--font-display); font-weight: 700; font-size: 1.28em; line-height: 1.12; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
span.kb-name { cursor: default; }
button.kb-name:hover { background: rgba(255, 255, 255, 0.08); }
.kb-name.me { background: var(--accent); color: var(--accent-ink); }
.kb-dash { display: block; width: 4.2em; height: 0.5em; margin: 0.48em 0; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.kb-vs { margin: 0.25em 0; color: var(--deep-ink-2); font-size: max(11px, 0.5em); letter-spacing: 0.2em; text-transform: uppercase; }
.kb-sit { color: var(--deep-ink-2); font-size: max(13px, 0.62em); }
.kb-rules { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 0.55em; color: var(--deep-ink-2); font-size: max(13px, 0.6em); line-height: 1.55; }
.kb-rules div:first-child { color: var(--deep-ink); font-weight: 600; }
.kb-arrivals { display: flex; flex-wrap: wrap; gap: 0.4em; }
.kb-arrivals .kb-name { margin: 0; padding: 0.18em 0.55em; border-radius: 0.4em; background: var(--deep-2); font-size: 1.05em; }
.kb-arrivals .kb-dash { width: 3.6em; height: 1.5em; margin: 0; border-radius: 0.4em; background: rgba(255, 255, 255, 0.06); }

/* text */
.kb-note { color: var(--deep-ink-2); font-size: max(14px, 0.7em); line-height: 1.45; }
.kb-sub { color: var(--deep-ink-2); font-family: var(--font-display); font-weight: 600; font-size: max(13px, 0.62em); letter-spacing: 0.1em; text-transform: uppercase; }
.kb-big { font-family: var(--font-display); font-weight: 800; font-size: 2em; line-height: 1.02; overflow-wrap: anywhere; }
.kb-q { display: inline-flex; align-items: center; gap: 0.4em; color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 0.8em; letter-spacing: 0.12em; text-transform: uppercase; }
.kb-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.7em; max-width: 34em; }

/* buttons: the app's own, on the dark background */
.kb-row { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; }
.kb-row.c { justify-content: center; }
.kb .btn.lg { min-height: max(52px, 2.1em); padding: 0.4em 1.1em; font-size: max(17px, 0.72em); border-radius: 0.5em; }

/* footer */
.kb-f { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 0.6em 1em; flex-wrap: wrap; color: var(--deep-ink-2); font-size: max(13px, 0.58em); }

/* the check-in card */
.kb-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(2, 6, 12, 0.66); }
.kb-panel { width: min(28em, 100%); max-height: 100%; overflow: auto; background: var(--deep); color: var(--deep-ink); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 1em; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); padding: 1.1em 1.1em 0.9em; display: flex; flex-direction: column; align-items: center; gap: 0.7em; text-align: center; }
.kb-panel .kb-court { align-self: stretch; text-align: left; }
.kb-court.big { font-size: 1.05em; }
.kb-bar { align-self: stretch; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.kb-bar i { display: block; height: 100%; background: var(--accent); transition: width 1s linear; }
@media (prefers-reduced-motion: reduce) { .kb-bar i { transition: none; } }
@media (max-width: 520px) { .kb-clock b { font-size: 1.6em; } .kb-who { flex-basis: 100%; } .kb-clock { margin-left: 0; text-align: left; display: flex; align-items: baseline; gap: 0.6em; } }

/* ===== Padel Ladder v4: card menu, private communities, palettes, club colours, flags, photo framing ===== */

/* community card: the whole card opens the community; the ⋯ button sits above it */
.ccard { position: relative; }
.ccard > .cc-top, .ccard > .cl-top { border-top-left-radius: 15px; border-top-right-radius: 15px; }
.ccard.menu-open { overflow: visible; z-index: 6; }
.cc-hit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background: transparent; border-radius: 16px; cursor: pointer; }
.cc-hit:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.ccard > .cc-top, .ccard > .cl-top, .ccard > .cc-stats, .ccard > .cc-last, .ccard > .cc-locked { pointer-events: none; }
a.cmenu-i { text-decoration: none; }
.clubcard .cl-name { padding-right: 40px; }

/* card backgrounds: one of eight padel scenes, drawn in the card's colours */
.card-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cl-top .card-art, .cc-top .card-art { opacity: 0.9; }
.cl-top .cc-court { opacity: 0.62; }
.art-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .art-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.art-opt { appearance: none; border: 2px solid var(--line); background: var(--surface); padding: 4px; border-radius: 13px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: var(--ink-2); min-width: 0; }
.art-opt:hover { border-color: var(--line-strong); }
.art-opt[aria-pressed="true"] { border-color: var(--brand); color: var(--ink); box-shadow: 0 0 0 2px var(--brand-soft); }
.art-opt:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.art-prev { position: relative; display: block; height: 62px; border-radius: 9px; overflow: hidden; }
.art-prev .cc-court { width: 132px; height: 66px; right: -16px; opacity: 0.62; }
.art-nm { font-weight: 600; font-size: 13.5px; padding: 0 4px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-more { position: absolute; top: 8px; right: 8px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(0, 0, 0, 0.32); color: #fff; display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cc-more:hover, .cc-more[aria-expanded="true"] { background: rgba(0, 0, 0, 0.55); }
.cc-more:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cc-more::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
/* only the first row of the card title (badges, or the name when there are none) runs beside the ⋯ button */
.cc-name > :first-child { margin-right: 34px; }
.cmenu { position: absolute; top: 48px; right: 8px; z-index: 4; min-width: 236px; max-width: calc(100% - 20px); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22); padding: 6px; display: flex; flex-direction: column; }
.cmenu-i { appearance: none; border: 0; background: transparent; color: var(--ink); display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 9px; font-weight: 600; font-size: 15px; text-align: left; cursor: pointer; }
.cmenu-i:hover, .cmenu-i:focus-visible { background: var(--surface-2); outline: none; }
.cmenu-i svg { color: var(--ink-3); flex: none; }
.cmenu-i.danger, .cmenu-i.danger svg { color: var(--bad); }
.cc-locked { display: flex; gap: 12px; align-items: flex-start; padding: 16px; color: var(--ink-2); font-size: 14px; min-height: 104px; }
.cc-locked svg { color: var(--ink-3); flex: none; margin-top: 2px; }
.cc-locked b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.cc-tag svg { flex: none; }

/* a private community seen from inside */
.locked { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: var(--deep); padding: 24px var(--gutter-r) 24px var(--gutter-l); }
.locked-card { background: var(--surface); color: var(--ink); border-radius: 18px; padding: 26px; width: min(460px, 100%); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.locked-card h1 { font-size: 34px; }
.locked-card .input { max-width: 100%; }

/* start page settings */
.hero-tools { position: absolute; top: 14px; right: var(--gutter-r); z-index: 2; }
@media (min-width: 760px) { .hero-tools { top: 18px; } }

/* palettes: four swatches each, plus the organiser's own colours */
.palettes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 138px), 1fr)); }
.pal .sw { grid-template-columns: 2fr 1fr 1fr 1fr; height: 42px; }
.pal.custom .nm::before { content: "+ "; color: var(--brand-text); }
.cpicks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.cpick { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 8px 8px; cursor: pointer; background: var(--surface); min-width: 0; }
.cpick:focus-within { border-color: var(--brand); }
.cpick input[type="color"] { width: 52px; height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 2px; background: var(--surface); cursor: pointer; flex: none; }
.cpick b { display: block; font-size: 14.5px; }
.cpick small { display: block; font-size: 12.5px; color: var(--ink-3); }
.cpick code { font-size: 12px; color: var(--ink-3); }
.pal-preview { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pv-band { background: linear-gradient(135deg, var(--pv-deep), var(--pv-deep2)); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-family: var(--font-display); font-size: 19px; }
.pv-live { background: var(--pv-accent); color: var(--pv-accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .08em; padding: 2px 9px; border-radius: 999px; display: inline-flex; gap: 6px; align-items: center; }
.pv-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pv-body { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; background: var(--surface); }
.pv-btn { background: var(--pv-brand); color: var(--pv-brand-ink); border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 14.5px; }
.pv-chip { background: var(--pv-soft); color: var(--pv-text); border: 1px solid var(--pv-brand); border-radius: 999px; padding: 5px 12px; font-weight: 600; font-size: 14px; }
.pv-link { color: var(--pv-text); font-weight: 600; text-decoration: underline; font-size: 14.5px; }
.pv-board { background: var(--pv-deep2); color: var(--pv-accent); font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; font-size: 14px; padding: 5px 11px; border-radius: 8px; }

/* clubs: logo and card colour */
.cl-logo { position: relative; z-index: 1; flex: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.cl-preview { border-radius: 14px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch { appearance: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; padding: 0; position: relative; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink); }
.swatch.def { width: auto; border-radius: 999px; padding: 0 12px; font-size: 13px; font-weight: 600; background: linear-gradient(135deg, #0B1E3F, #1F5FD1); color: #fff; }
.swatch.pick { background: conic-gradient(#e53935, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935); overflow: hidden; display: inline-grid; place-items: center; }
.swatch.pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* nationality flag: the country name shows on hover, focus or tap */
.flag { position: relative; display: inline-block; margin-left: .38em; font-family: "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", sans-serif; font-weight: 400; font-style: normal; font-size: .95em; line-height: 1; letter-spacing: 0; text-transform: none; vertical-align: -0.04em; cursor: default; }
.flag[tabindex] { cursor: help; border-radius: 3px; }
.flag:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.flag[data-tip]:hover::after, .flag[data-tip]:focus-visible::after, .flag.tip-on::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); z-index: 45; pointer-events: none; white-space: nowrap; background: #11181D; color: #F4F7F9; font: 600 12.5px/1.25 var(--font-body); letter-spacing: 0; text-transform: none; padding: 5px 9px; border-radius: 7px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
.pname b .flag { font-size: 1em; }
.kb .flag { font-size: .8em; margin-left: .3em; }
.pf-nat .flag { font-size: 22px; margin-left: 0; }

/* story photo framing */
.pf-frame { position: relative; border-radius: 12px; overflow: hidden; background: #10151A; touch-action: none; user-select: none; -webkit-user-select: none; }
.pf-frame canvas { display: block; width: 100%; height: auto; aspect-ratio: 9 / 5; cursor: grab; touch-action: none; }
.pf-frame canvas:active { cursor: grabbing; }
.pf-frame canvas:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.pf-hint { position: absolute; left: 12px; bottom: 12px; color: #fff; font-size: 13.5px; background: rgba(0, 0, 0, 0.5); padding: 5px 9px; border-radius: 8px; pointer-events: none; }
.pf-zoom { display: flex; align-items: center; gap: 12px; }
.pf-zoom input { flex: 1; min-width: 0; accent-color: var(--brand); height: 32px; }
.pf-zoom b { font-family: var(--font-display); font-size: 20px; min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }

/* the TV screen fills the display */
.tv { min-height: 100vh; min-height: 100dvh; }

/* cards with a logo: smaller logo, more room for the name; badges wrap instead of running under the ⋯ button */
.cl-top .cl-logo { width: 54px; height: 54px; border-radius: 14px; }
.cl-top.has-logo .cl-name { padding-right: 24px; }
.cl-badges { flex-wrap: wrap; row-gap: 4px; }
.cc-name { max-width: 100%; }

/* club picker: the whole list of clubs on open, narrowed as you type */
.cbx { position: relative; }
.cbx-in { padding-right: 46px; }
.cbx-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; }
.cbx-btn:hover { background: var(--surface-2); color: var(--ink); }
.cbx-btn svg { transition: transform 0.15s ease; }
.cbx.open .cbx-btn svg { transform: rotate(180deg); }
.cbx-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 15; margin: 0; padding: 6px; list-style: none; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2); overflow-y: auto; overscroll-behavior: contain; }
.cbx-list.up { top: auto; bottom: calc(100% + 6px); }
.cbx-o { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 8px; border-radius: 9px; cursor: pointer; }
.cbx-o.act { background: var(--surface-2); }
.cbx-o[aria-selected="true"] b { color: var(--brand-text); }
.cbx-o > svg { margin-left: auto; color: var(--brand-text); flex: none; }
.cbx-o.new { border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; }
.cbx-o.new:first-child { border-top: 0; border-radius: 9px; }
.cbx-logo { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; overflow: hidden; font-family: var(--font-display); font-weight: 800; font-size: 15px; background: #2366D6; color: #fff; }
.cbx-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.cbx-logo.plus { background: var(--surface-2); color: var(--ink-2); }
.cbx-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cbx-t b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbx-t span { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbx-empty { padding: 10px 8px; color: var(--ink-3); font-size: 14px; }
.cbx-in { text-overflow: ellipsis; }
.cbx-logo.cbx-rank { background: var(--deep); color: var(--accent); font-size: 16px; }
.cbx-logo.cbx-flag { background: var(--surface-2); font-family: "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", sans-serif; font-weight: 400; font-size: 20px; }
.cbx-logo.cbx-flag.none { font-family: var(--font-display); font-weight: 700; color: var(--ink-3); font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .cbx-btn svg { transition: none; } }

/* start page totals: two by two whenever four across would cut a label (phones, tablets, narrow laptops) */
.herostats { container-type: inline-size; }
@container (max-width: 479px) { .herostats > * { grid-column: span 2; } }
@media (max-width: 520px) { .herostats > * { grid-column: span 2; } }
@supports not (container-type: inline-size) { @media (min-width: 760px) and (max-width: 1120px) { .herostats > * { grid-column: span 2; } } }

/* the good/bad colours are light in dark mode, so text on them turns dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toast.good, :root:not([data-theme="light"]) .toast.bad, :root:not([data-theme="light"]) .btn.danger.solid { color: #0A0E0C; }
}
:root[data-theme="dark"] .toast.good, :root[data-theme="dark"] .toast.bad, :root[data-theme="dark"] .btn.danger.solid { color: #0A0E0C; }

/* a finished night's rounds: one round at a time, its matches as compact two-line rows */
.rnd-card { display: flex; flex-direction: column; gap: 10px; }
.rnd-card .card-h { margin-bottom: 0; }
.rnd-card .seg { align-self: flex-start; }
.rnd-card .seg button { min-width: 40px; padding-inline: 10px; font-variant-numeric: tabular-nums; }
.rres { display: flex; flex-direction: column; }
.rres-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 6px; border-top: 1px solid var(--line); min-width: 0; }
.rres-row:first-child { border-top: 0; }
.rres-row.click { cursor: pointer; border-radius: 9px; }
.rres-row.click:hover { background: var(--surface-2); }
.rres-row .court { width: 46px; height: 46px; border-radius: 10px; }
.rres-row .court small { font-size: 9px; letter-spacing: 0.1em; }
.rres-row .court b { font-size: 22px; }
.rres-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rres-n { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 15px; line-height: 1.3; min-width: 0; }
.rres-n.lose { color: var(--ink-3); font-weight: 500; }
.rres-s { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-family: var(--font-display); font-weight: 800; font-size: 19.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.rres-s b { display: block; min-height: 19.5px; padding-top: 0.5px; }
.rres-s b.lose { color: var(--ink-3); }
.rnd-card .sitout { padding-top: 2px; }

/* ===== Tournaments ===== */
.tag { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--surface-2); color: var(--ink-2); border-radius: 6px; padding: 1px 6px; vertical-align: middle; white-space: nowrap; }
.tag.good { background: var(--good-soft); color: var(--good); }
.linkbtn { appearance: none; border: 0; background: none; padding: 0; color: var(--brand-text); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.icon-btn.sm { width: 34px; height: 34px; border-radius: 8px; }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.radio { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; font-size: 15px; min-height: 44px; }
.radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }

/* seeds and teams */
.tseed { font-family: var(--font-display); font-weight: 800; font-size: 15px; min-width: 28px; height: 28px; padding: 0 4px; border-radius: 8px; background: var(--deep); color: var(--accent); display: inline-grid; place-items: center; flex: none; font-variant-numeric: tabular-nums; }
.tseed.sm { min-width: 22px; height: 22px; font-size: 12px; border-radius: 6px; margin-right: 7px; vertical-align: middle; }
.tseed.ghost { background: transparent; }
.tseed.res { background: var(--surface-3); color: var(--ink-2); }
.tteams { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tteam { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; background: var(--surface-2); border-radius: 12px; padding: 8px 8px 8px 10px; }
.tteam-b { min-width: 0; }
.tteam-b b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.tteam-ps { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.tp { display: inline-flex; align-items: center; gap: 4px; }
.tp .chk { color: var(--good); display: inline-flex; }
.tteam-r { font-family: var(--font-display); font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; }
.tteam-a { display: flex; gap: 2px; }
@media (max-width: 560px) {
  .tteam { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .tteam-a { grid-column: 2 / -1; justify-content: flex-end; margin-top: -4px; }
}

/* format options and match rules */
.fmtlist { display: grid; gap: 8px; margin-top: 12px; }
.fmtopt { appearance: none; text-align: left; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; font: inherit; }
.fmtopt:hover { border-color: var(--line-strong); }
.fmtopt[aria-checked="true"] { border-color: var(--brand); background: var(--brand-soft); }
.fmtopt-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fmtopt-t b { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.15; }
.fmtopt[aria-checked="true"] .fmtopt-t b { color: var(--brand-text); }
.fmtopt-m { font-size: 14px; color: var(--ink-2); }
.fmtopt-n { font-size: 13px; color: var(--ink-3); }
.stagelist { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 10px; }
.stagerow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.stagerow-n { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.stagerow-c { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
@media (max-width: 640px) { .stagerow { grid-template-columns: 1fr; } }
.tgroups { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.tgroup { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.tgroup h4 { margin: 0 0 8px; font-family: var(--font-display); font-size: 18px; letter-spacing: 0.04em; }
.tgroup ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tgroup li { display: flex; align-items: center; gap: 2px; font-weight: 600; font-size: 14.5px; min-width: 0; }
.tgroup li .tiny { margin-left: auto; padding-left: 8px; }

/* stage banner, champions */
.tstage { background: var(--deep); color: var(--deep-ink); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 18px; }
.tstage .eyebrow { color: var(--accent); }
.tstage h2 { color: var(--deep-ink); margin: 4px 0 2px; }
.tstage p { color: var(--deep-ink-2); margin: 0; font-size: 14.5px; }
.tprog { flex: 1 1 100%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.tprog i { display: block; height: 100%; background: var(--accent); }
.tchamp { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; background: var(--deep); color: var(--deep-ink); border-radius: var(--radius); padding: 16px 18px; }
.tchamp > svg { color: var(--accent); flex: none; }
.tchamp > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.tchamp .eyebrow { color: var(--accent); }
.tchamp b { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.05; }
.tchamp span:not(.eyebrow) { color: var(--deep-ink-2); font-size: 14.5px; }

/* group tables and match lines */
.tgroups-live { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); align-items: start; }
.standings tr.q td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.standings tr.q3 td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.standings tr.out td { color: var(--ink-3); }
.tmlist { display: flex; flex-direction: column; gap: 8px; }
.tml { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.tml.click { cursor: pointer; }
.tml.click:hover { border-color: var(--line-strong); }
.tml.click:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.tml.live { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
.tml-no { font-family: var(--font-display); font-weight: 800; font-size: 14px; background: var(--deep); color: var(--accent); border-radius: 8px; height: 30px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.tml-b { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tml-l { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tml-l:empty { display: none; }
.tml-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 600; font-size: 15px; min-width: 0; }
.tml-t span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tml-t b { font-family: var(--font-display); font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; word-spacing: 0.2em; flex: none; }
.tml-t.win { color: var(--brand-text); }
.tml-t.lose { color: var(--ink-3); }
.tml-s { text-align: right; }
.tml-eta { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.tml-s { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tml-act { font-size: 13.5px; min-height: 28px; }
.tpick { cursor: pointer; border-radius: 12px; }
.tpick.on .tml { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }

/* the draw */
.tpots { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); margin: 12px 0; }
.tpot { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tpot-t { display: flex; align-items: center; font-weight: 600; font-size: 14.5px; min-width: 0; }
.tpot-t .tiny { margin-left: 6px; }
.tdrawrev { display: flex; flex-direction: column; gap: 12px; }
.tdr-now { background: var(--deep); color: var(--deep-ink); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-height: 120px; justify-content: center; }
.tdr-now .eyebrow { color: var(--deep-ink-2); }
.tdr-now span:not(.eyebrow) { color: var(--deep-ink-2); font-size: 16px; }
.tdr-team { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 5vw, 60px); line-height: 1; color: var(--accent); animation: tdrIn 0.45s ease both; }
.tdrawrev.ondark .tdr-now { background: var(--deep-2); }
.tdrawrev.ondark .tdr-team { font-size: clamp(40px, 5.5vw, 90px); }
@keyframes tdrIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tdr-team { animation: none; } }

/* bracket: one column per round, every match level with the two that feed it */
.brk { --brk-line: var(--line-strong); overflow-x: auto; padding: 14px; -webkit-overflow-scrolling: touch; }
.brk-in { display: grid; grid-template-columns: repeat(var(--cols), minmax(190px, 1fr)); column-gap: 28px; min-width: calc(var(--cols) * 205px); max-width: calc(var(--cols) * 460px); }
.brk-col { display: flex; flex-direction: column; min-width: 0; }
.brk-h { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; white-space: nowrap; }
.brk-ms { display: grid; flex: 1; }
.brk-cell { position: relative; display: flex; align-items: center; padding: 5px 0; min-width: 0; }
.brk-cell > .bx { width: 100%; }
.brk-cell.bc-out::after { content: ''; position: absolute; right: -14px; width: 14px; top: 50%; border-top: 2px solid var(--brk-line); }
.brk-cell.bc-out.bc-hi::before { content: ''; position: absolute; right: -14px; top: 50%; height: 50%; border-right: 2px solid var(--brk-line); }
.brk-cell.bc-out.bc-lo::before { content: ''; position: absolute; right: -14px; top: 0; height: 50%; border-right: 2px solid var(--brk-line); }
.brk-cell.bc-in > .bx::before { content: ''; position: absolute; left: -15px; width: 14px; top: 50%; border-top: 2px solid var(--brk-line); }
/* mirrored: the right half runs right to left into the final */
.brk.mirror .brk-col.mir .brk-h { text-align: right; }
.brk.mirror .brk-mid .brk-h { text-align: center; }
.brk-col.mir .brk-cell.bc-out::after { right: auto; left: -14px; }
.brk-col.mir .brk-cell.bc-out.bc-hi::before, .brk-col.mir .brk-cell.bc-out.bc-lo::before { right: auto; left: -14px; border-right: 0; border-left: 2px solid var(--brk-line); }
.brk-col.mir .brk-cell.bc-in > .bx::before { left: auto; right: -15px; }
.brk-cell.bc-st::before { display: none; }
.brk-cell.bc-in2 > .bx::after { content: ''; position: absolute; right: -15px; width: 14px; top: 50%; border-top: 2px solid var(--brk-line); }
.brk-mid .brk-cell { grid-column: 1; }
.brk-3rd { align-items: flex-end; }
.brk-3l { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.brk-3rd .brk-3l { position: absolute; left: 0; bottom: 100%; white-space: nowrap; }
.brk-xtra { display: flex; flex-direction: column; gap: 4px; width: min(100%, 300px); margin: 12px auto 0; }
.bx { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.bx.empty { border: 0; background: transparent; min-height: 10px; }
.bx.click { cursor: pointer; }
.bx.click:hover { border-color: var(--line-strong); }
.bx.live { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.bx.isbye { opacity: 0.6; }
.bx-h { display: flex; justify-content: space-between; gap: 8px; padding: 3px 10px; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); border-radius: 9px 9px 0 0; }
.bx.live .bx-h span:last-child { color: var(--brand-text); }
.bx-t { display: flex; align-items: center; gap: 2px; padding: 6px 10px; min-width: 0; font-size: 14px; font-weight: 600; }
.bx-t + .bx-t { border-top: 1px solid var(--line); }
.bx-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-s { display: flex; gap: 6px; align-items: baseline; padding-left: 6px; }
.bx-s b { font-family: var(--font-display); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; min-width: 0.7em; text-align: right; }
.bx-s b.cur { color: var(--brand-text); }
.bx-s i { font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 13px; background: var(--accent); color: var(--accent-ink); border-radius: 5px; padding: 0 5px; }
.bx-t.win { color: var(--brand-text); }
.bx-t.win .bx-n { font-weight: 700; }
.bx-t.lose { color: var(--ink-3); }
.bx-t.tbd .bx-n, .bx-t.bye .bx-n { font-style: italic; font-weight: 500; color: var(--ink-3); }
/* on the TV and the check-in screen */
.brk.ondark { padding: 4px 0 8px; }
.brk.ondark .brk-in { grid-template-columns: repeat(var(--cols), minmax(170px, 1fr)); min-width: calc(var(--cols) * 180px); }
.brk.ondark .brk-h { color: var(--deep-ink-2); border-color: rgba(255, 255, 255, 0.14); font-size: clamp(12px, 1vw, 16px); }
.brk.ondark .bx { background: var(--deep-2); border-color: transparent; color: var(--deep-ink); }
.brk.ondark .bx-h { background: rgba(255, 255, 255, 0.06); color: var(--deep-ink-2); }
.brk.ondark .bx.live { border-color: var(--accent); box-shadow: none; }
.brk.ondark .bx.live .bx-h span:last-child { color: var(--accent); }
.brk.ondark .bx-t { font-size: clamp(14px, 1.2vw, 21px); }
.brk.ondark .bx-t + .bx-t { border-color: rgba(255, 255, 255, 0.08); }
.brk.ondark .bx-s b { font-size: clamp(16px, 1.4vw, 24px); }
.brk.ondark .bx-s b.cur { color: var(--accent); }
.brk.ondark .bx-t.win { color: var(--accent); }
.brk.ondark .bx-t.lose, .brk.ondark .bx-t.tbd .bx-n, .brk.ondark .bx-t.bye .bx-n { color: var(--deep-ink-2); }
.brk.ondark { --brk-line: rgba(255, 255, 255, 0.26); }
.brk.ondark .tseed { background: rgba(255, 255, 255, 0.1); }
.brk.ondark .brk-3l { color: var(--deep-ink-2); }

/* order of play */
.tplan { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); align-items: start; }
.tplan-c { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tplan-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 4px 8px; border-bottom: 1px solid var(--line); }
.tplan-h b { font-family: var(--font-display); font-size: 21px; font-weight: 800; }
.tplan-h span { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.tplan-h span.live { color: var(--good); }
.tplan-h span.call { color: var(--brand-text); }
.tplan-m { display: flex; flex-direction: column; gap: 4px; }
.tplan-m.called .tml { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.tplan-m.fin .tml { opacity: 0.72; }
.tplan-mv { align-self: flex-end; min-height: 32px; }
.tplan-c .tml { background: var(--surface-2); border-color: transparent; }
.movec { padding: 8px 0; border-bottom: 1px solid var(--line); }

/* results */
.tpodium { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.tpod { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tpod b { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.05; overflow-wrap: anywhere; }
.tpod .small { color: var(--ink-2); }
.tpod.gold { background: var(--deep); color: var(--deep-ink); border-color: transparent; }
.tpod.gold > svg { color: var(--accent); }
.tpod.gold .eyebrow { color: var(--accent); }
.tpod.gold .small { color: var(--deep-ink-2); }

/* score sheet for sets */
.setgrid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); gap: 10px 12px; align-items: center; }
.setgrid > b { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.setgrid-n { font-weight: 700; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .setgrid { grid-template-columns: repeat(3, auto); justify-content: start; }
  .setgrid > span:first-child { display: none; }
  .setgrid-n { grid-column: 1 / -1; margin-top: 6px; }
}

/* scorer: sets columns */
.sc3-cols .sc3-setlbl { width: calc(var(--sc3-box) * 0.44); letter-spacing: 0.08em; }
.sc3-set { width: calc(var(--sc3-box) * 0.44); background: rgba(255, 255, 255, 0.05); }
.sc3-set small { color: var(--deep-ink-2); }
.sc3-set b { font-size: calc(var(--sc3-box) * 0.38); color: var(--deep-ink-2); }
.sc3-set.won b { color: var(--deep-ink); }
.sc3-set sup { font-size: 0.42em; vertical-align: top; margin-left: 2px; }
.sc3-set.tb, .sc3-cols .sc3-setlbl.tb { width: calc(var(--sc3-box) * 0.62); }
.sc3-state.ends { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 640px) {
  .sc3.sets .sc3-boxes { display: flex; }
  .sc3.sets .sc3-set { width: 48px; flex: none; }
  .sc3.sets .sc3-set b { font-size: 36px; }
  .sc3.sets .sc3-games, .sc3.sets .sc3-pts { flex: 1 1 0; }
}

/* TV and check-in boards */
.tcc { gap: 6px; }
.tcc.call { box-shadow: 0 0 0 3px var(--accent); }
.tcc.live { box-shadow: inset 4px 0 0 var(--accent); }
.tcc .ct .tcc-st { color: var(--deep-ink); }
.tcc.call .ct .tcc-st { color: var(--accent); }
.tcc-l { font-size: clamp(13px, 1.1vw, 17px); color: var(--deep-ink-2); }
.tcc .tm small { font-size: 0.5em; color: var(--accent); }
.tcc-next { font-size: clamp(12px, 1vw, 15px); color: var(--deep-ink-2); border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcc-free { color: var(--deep-ink-2); font-size: clamp(14px, 1.2vw, 18px); }
.tcc.idle { opacity: 0.7; }
.tvt-gs { display: grid; gap: 16px; }
.tvt-g h4 { font-family: var(--font-display); font-weight: 700; color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 2px; font-size: clamp(15px, 1.3vw, 20px); }
.tv-table tr.q td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.tv-table tr.out td { color: var(--deep-ink-2); }
.tvt-champ { display: flex; align-items: center; gap: 20px; background: var(--accent); color: var(--accent-ink); border-radius: 18px; padding: 16px 24px; }
.tvt-champ span { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.2em; font-size: clamp(14px, 1.2vw, 18px); }
.tvt-champ b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4vw, 64px); line-height: 1; }
.tvt-champ em { font-style: normal; font-weight: 600; }
.kb .brk.ondark .bx-t { font-size: max(14px, 0.62em); }
.kb .tdrawrev .tdr-team { font-size: 1.6em; }
.kb-tsc { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 0.5em; }
.kb-tsc b { font-family: var(--font-display); font-weight: 800; font-size: 1.3em; color: var(--accent); white-space: nowrap; }
.kb-then { margin-top: 0.5em; padding-top: 0.45em; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 0.2em; color: var(--deep-ink-2); font-size: max(13px, 0.6em); }
.kb-then span { display: inline-block; min-width: 3.6em; font-family: var(--font-display); font-weight: 700; color: var(--deep-ink); margin-right: 0.4em; }
.tvt-early { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.tvt-em { background: var(--deep-2); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tvt-em.live { box-shadow: inset 4px 0 0 var(--accent); }
.tvt-em-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, 0.9vw, 14px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.tvt-em > span:not(.tvt-em-h) { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 600; font-size: clamp(14px, 1.2vw, 19px); min-width: 0; }
.tvt-em i { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvt-em b { font-family: var(--font-display); font-weight: 800; white-space: nowrap; }
.tvt-em b small { color: var(--accent); font-size: 0.75em; }
.tvt-em .l { color: var(--deep-ink-2); }
.tvt-em .w { color: var(--accent); }
/* many courts on one TV: smaller cards, no "then" line */
.tvt-many .tv-courts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.tvt-many .tcc { padding: 10px 12px; gap: 4px; }
.tvt-many .tcc .tm { font-size: clamp(15px, 1.25vw, 21px); }
.tvt-many .tcc .tm b { font-size: clamp(22px, 2vw, 34px); }
.tvt-many .tcc-next { display: none; }
/* the knockout on the TV fills the screen exactly: nothing below the fold */
.tv.tvt-fit { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.tvt-ko { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.tvt-ko > .tvt-champ { flex: none; padding-block: 12px; }
.tvt-main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.tvt-main > h3 { flex: none; }
.fitbox { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.fitbox-in { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.fitbox .brk { overflow: visible; padding: 4px 0; }
.tvt-strip { flex: none; gap: 10px; }
.tvt-strip .tcc-c { padding: 9px 14px 8px; gap: 0; border-radius: 14px; }
.tvt-strip .tcc-c .ct { font-size: clamp(13px, 1vw, 17px); flex-wrap: wrap; gap: 0 10px; margin-bottom: 3px; }
.tvt-strip .tcc-c .ct em { font-style: normal; color: var(--deep-ink-2); margin-left: 0.6em; letter-spacing: 0.06em; }
.tvt-strip .tcc-c .tm { font-size: clamp(15px, 1.25vw, 21px); line-height: 1.3; padding: 3px 0; }
.tvt-strip .tcc-c .tm + .tm { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.tvt-strip .tcc-c .tm b { font-size: clamp(18px, 1.5vw, 26px); line-height: 1; }
.tvt-fit .tv-clock .timer { font-size: clamp(48px, min(8vw, 10vh), 128px); }
/* the buttons float over the corner and fade out when nobody touches the mouse or keys */
.tvt-fit > .tvt-ctl { position: fixed; right: var(--gutter-r, 16px); bottom: 12px; z-index: 5; opacity: 0; transition: opacity 0.3s; }
.tvt-fit > .tvt-ctl.on { opacity: 1; }
.tvt-fit > .tvt-ctl .btn { background: var(--deep-2); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); }
@media (prefers-reduced-motion: reduce) { .tvt-fit > .tvt-ctl { transition: none; } }
.tdr-list .tseed { background: rgba(255, 255, 255, 0.1); }
.tdr-list .tvt-em > span.l { color: var(--deep-ink-2); }
.tdrawrev.ondark .tdr-team { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a bracket with eight or more first-round matches: tighter rows */
.brk.dense .brk-cell { padding: 3px 0; }
.brk.dense .bx-h { padding: 2px 10px; font-size: 10.5px; }
.brk.dense .bx-t { padding: 4px 10px; }
.brk.ondark.dense .bx-t { font-size: clamp(13px, 1vw, 17px); }
.brk.ondark.dense .bx-s b { font-size: clamp(14px, 1.15vw, 19px); }

/* ================= Seasons ================= */
:root { --gold: #E3B53C; --gold-ink: #2B2100; --gold-soft: #FBF1D6; }
:root[data-theme="dark"] { --gold-soft: #33290F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gold-soft: #33290F; } }

/* tags */
.skind { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; white-space: nowrap; background: var(--surface-3); color: var(--ink-2); }
.skind.night { background: var(--brand-soft); color: var(--brand-text); }
.smajor { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); white-space: nowrap; }
.smajor.sm { font-size: 10.5px; padding: 1px 6px; gap: 3px; }
.sstat { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.sstat.done { color: var(--good); }
.sstat.live { color: var(--accent-ink); background: var(--accent); padding: 1px 6px; border-radius: 5px; }
.sstat.setup, .sstat.today { color: var(--brand-text); }
.sstat.missed { color: var(--warn); }
.sstat.cancelled { color: var(--bad); }
.sstat.ended { color: var(--ink-3); }
.sbadge { appearance: none; border: 0; display: inline-flex; align-items: center; gap: 5px; vertical-align: 1px; font: inherit; font-size: 13px; font-weight: 600; padding: 1px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); cursor: pointer; }
.strophy { background: var(--gold-soft); border-color: transparent; font-weight: 600; }

/* the season's dates as one bar */
.sprog { display: flex; gap: 2px; height: 7px; min-width: 80px; flex: 1 1 auto; }
.sprog i { flex: 1; border-radius: 3px; background: var(--surface-3); min-width: 3px; }
.sprog i.done { background: var(--brand); }
.sprog i.live { background: var(--accent); }
.sprog i.missed { background: var(--warn); opacity: 0.5; }
.sprog.big { height: 10px; }

/* the New menu */
.newmenu { position: relative; }
.newmenu .cmenu { top: calc(100% + 6px); right: 0; width: 300px; }
.cmenu-i span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cmenu-i small { font-weight: 500; font-size: 12.5px; color: var(--ink-3); }

/* Events tab: seasons in progress */
.spins { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.spin { appearance: none; font: inherit; color: inherit; text-align: left; display: flex; flex-direction: column; gap: 6px; cursor: pointer; border-left: 5px solid var(--brand); }
.spin:hover { border-color: var(--line-strong); border-left-color: var(--brand); }
.spin-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.spin-n { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.1; }
.spin-p { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.spin-f { display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: var(--ink-2); }
.spin-f span { display: flex; align-items: center; gap: 6px; }
.spin-f svg { color: var(--ink-3); flex: none; }

/* calendar */
.scal { padding: 16px 18px 18px; }
.scal-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 320px) auto; gap: 12px 20px; align-items: end; margin-bottom: 14px; }
.scal-t h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.05; }
.scal-p { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); padding-bottom: 4px; }
.scal-p b { font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.scal-nav { gap: 6px; justify-content: flex-end; }
.scal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.scal-d { background: var(--surface-2); border-radius: 12px; padding: 8px; min-height: 150px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.scal-d.today { box-shadow: inset 0 0 0 2px var(--brand); }
.scal-d.empty { background: transparent; border: 1px dashed var(--line); }
.scal-dh { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.scal-dh span { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.scal-dh b { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1; }
.scal-dh em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-text); }
.scal-none { color: var(--ink-2); font-size: 14.5px; margin-top: 10px; }
.slot { appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 7px 8px 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); min-width: 0; }
.slot:hover { border-color: var(--line-strong); }
.slot.s-done { border-left-color: var(--brand); }
.slot.s-live { border-left-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.slot.s-setup, .slot.s-today { border-left-color: var(--brand-text); }
.slot.s-missed { border-left-color: var(--warn); }
.slot.s-cancelled, .slot.s-ended { opacity: 0.6; }
.slot.s-cancelled .slot-n { text-decoration: line-through; }
.slot.major { background: var(--gold-soft); }
.slot-t { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.slot-n { font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.slot-c { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-s { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere; }
.slot-s svg { color: var(--gold); flex: none; }
.slot .smajor { align-self: flex-start; margin-top: 2px; }
@media (max-width: 860px) {
  .scal-h { grid-template-columns: minmax(0, 1fr); }
  .scal-nav { justify-content: flex-start; }
}
@media (max-width: 760px) {
  /* phones: the week as a list of the days that have something on */
  .scal-week { display: flex; flex-direction: column; }
  .scal-week.none { display: none; }
  .scal-d { min-height: 0; flex-direction: row; align-items: flex-start; gap: 10px; }
  .scal-d.empty { display: none; }
  .scal-dh { flex-direction: column; align-items: center; gap: 0; width: 48px; flex: none; padding-top: 4px; }
  .scal-d .scal-sl { flex: 1; }
}

/* the four cards */
.sgrid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 900px) { .sgrid { grid-template-columns: minmax(0, 1fr); } }
.scard { display: flex; flex-direction: column; gap: 12px; }
.scard .card-h { margin-bottom: 0; }
.sselect { width: auto; max-width: 240px; min-height: 38px; padding-block: 6px; font-size: 14.5px; }
.stop { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.stop-r { appearance: none; font: inherit; color: inherit; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 2px; cursor: pointer; text-align: left; }
.stop li:last-child .stop-r { border-bottom: 0; }
.stop-r:hover { background: var(--surface-2); }
.stop-n { display: flex; flex-direction: column; min-width: 0; }
.stop-n b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-n span { font-size: 12.5px; color: var(--ink-3); }
.stop-p { display: flex; align-items: baseline; gap: 4px; }
.stop-p b { font-family: var(--font-display); font-weight: 800; font-size: 24px; }
.stop-p span { font-size: 12px; color: var(--ink-3); }
.sp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.sp-head > div { display: flex; flex-direction: column; min-width: 0; }
.sp-head > div b { font-size: 18px; }
.sp-rank { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; color: var(--brand-text); }
.sp-pts { display: flex; align-items: baseline; gap: 4px; }
.sp-pts b { font-family: var(--font-display); font-weight: 800; font-size: 34px; }
.sp-pts span { color: var(--ink-3); font-size: 13px; }
.sp-tiles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); }
.sp-tiles > div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.sp-tiles b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.05; }
.sp-tiles b.up { color: var(--good); } .sp-tiles b.down { color: var(--bad); }
.sp-tiles span { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.sp-rel { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-rel > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.sp-rel .eyebrow { font-size: 12px; }
.sfin { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sfin li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sfin li:last-child { border-bottom: 0; }
.sfin-h { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin-bottom: 3px; }
.sfin-t { grid-column: 1; display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink-2); }
.sfin-t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfin-t i { width: 14px; flex: none; }
.sfin-t svg { color: var(--gold); flex: none; }
.sfin-t.w { color: var(--ink); font-weight: 700; }
.sfin-t em { font-style: normal; font-size: 12px; color: var(--ink-3); margin-left: auto; }
.sfin-s { grid-column: 2; grid-row: 2 / span 2; align-self: center; font-family: var(--font-display); font-weight: 800; font-size: 20px; white-space: nowrap; }
.sfin li > .muted.tiny { grid-column: 1 / -1; }
.h2h-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.h2h-pick .spick { flex: 1 1 160px; min-width: 0; }
.h2h-big { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; text-align: center; background: var(--surface-2); border-radius: 12px; padding: 10px; }
.h2h-big > div { display: flex; flex-direction: column; min-width: 0; }
.h2h-big b { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1; }
.h2h-big > div span { font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2h-mid { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.h2h-sub { text-align: center; margin-top: -4px; }
.h2h-t { width: 100%; border-collapse: collapse; }
.h2h-t tr + tr > * { border-top: 1px solid var(--line); }
.h2h-t th { text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 7px 4px; }
.h2h-t td { padding: 7px 4px; font-family: var(--font-display); font-weight: 700; font-size: 19px; width: 30%; font-variant-numeric: tabular-nums; }
.h2h-t td.l { text-align: left; }
.h2h-t td.r { text-align: right; }
.h2h-t td.up1 { color: var(--brand-text); }
.h2h-t td.l.up1::after, .h2h-t td.r.up1::before { content: '▲'; font-size: 0.55em; vertical-align: 0.25em; margin: 0 5px; }

/* champions, once the season is over */
.schamp { background: var(--deep); color: var(--deep-ink); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.schamp-h { display: flex; align-items: center; gap: 16px; }
.schamp-h > svg { color: var(--accent); flex: none; }
.schamp-h span { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.2em; font-size: 14px; color: var(--accent); }
.schamp-h b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 46px); line-height: 1.02; }
.schamp-h em { font-style: normal; color: var(--deep-ink-2); }
.schamp-pod { display: flex; gap: 10px; flex-wrap: wrap; }
.schamp-pod > div { display: flex; align-items: center; gap: 8px; background: var(--deep-2); border-radius: 10px; padding: 6px 12px; }
.schamp-pod span { color: var(--deep-ink-2); font-size: 13.5px; }
.schamp-aw { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.schamp-aw > div { display: flex; gap: 10px; align-items: flex-start; background: var(--deep-2); border-radius: 10px; padding: 10px 12px; }
.schamp-aw svg { color: var(--accent); flex: none; margin-top: 2px; }
.schamp-aw span { display: flex; flex-direction: column; min-width: 0; }
.schamp-aw em { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep-ink-2); }
.schamp-aw small { color: var(--deep-ink-2); font-size: 12.5px; }

/* standings */
.sst-p { font-family: var(--font-display); font-weight: 800; font-size: 21px; }
.sres { display: flex; flex-wrap: wrap; gap: 4px; }
.sres-i { font-family: var(--font-display); font-weight: 700; font-size: 13px; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); }
.sres-i.win { background: var(--brand-soft); color: var(--brand-text); }
.sres-i.major { box-shadow: inset 0 0 0 1.5px var(--gold); }
.sres-i.off { text-decoration: line-through; opacity: 0.55; }

/* dates */
.sdates { overflow: hidden; }
.sdate { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.sdate:last-child { border-bottom: 0; }
.sdate-d { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.sdate-d span { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.sdate-d b { font-family: var(--font-display); font-weight: 800; font-size: 28px; }
.sdate.s-done .sdate-d b { color: var(--brand-text); }
.sdate-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sdate-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sdate-w { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.sdate-w svg { color: var(--gold); }
.sdate-a { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sdate.s-cancelled, .sdate.s-ended { opacity: 0.62; }
.sdate.s-cancelled .sdate-m > b { text-decoration: line-through; }
@media (max-width: 560px) {
  .sdate { grid-template-columns: 50px minmax(0, 1fr); }
  .sdate-a { grid-column: 2; justify-content: flex-start; }
}
.slink { padding: 6px 0; border-bottom: 1px solid var(--line); gap: 10px; }

/* TV: the season board */
.stv-body { flex: 1 1 0; min-height: 0; display: grid; gap: 18px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.stv-table { display: flex; flex-direction: column; min-height: 0; }
.stv-table > h3 { flex: none; }
.stv-t td { padding: 6px 8px; }
.stv-n { white-space: nowrap; }
.stv-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: hidden; }
.stv-side .tvt-champ b { font-size: clamp(30px, 3.2vw, 54px); }
.stv-next { display: flex; flex-direction: column; gap: 6px; }
.stv-date { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3vw, 50px); line-height: 1.05; color: var(--accent); }
.stv-at { color: var(--deep-ink-2); font-size: clamp(15px, 1.4vw, 22px); }
.stv-when { font-family: var(--font-display); font-weight: 800; font-size: clamp(16px, 1.5vw, 24px); letter-spacing: 0.06em; text-transform: uppercase; background: var(--deep-2); padding: 2px 12px; border-radius: 999px; }
.stv-last > div { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.stv-last > div:last-child { border-bottom: 0; }
.stv-last span { color: var(--deep-ink-2); font-size: clamp(13px, 1.1vw, 17px); }
.stv-last b { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.6vw, 26px); }
.stv-prog { margin-top: auto; display: flex; flex-direction: column; gap: 8px; color: var(--deep-ink-2); font-size: clamp(12px, 1vw, 15px); }
.stv-prog .sprog i { background: rgba(255, 255, 255, 0.14); }
.stv-prog .sprog i.done { background: var(--accent); }
@media (max-aspect-ratio: 1/1) { .stv-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.4fr) auto; } }

/* season points in a night's results */
.spts { display: flex; flex-direction: column; }
.spts-r { display: grid; grid-template-columns: 56px 120px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }
.spts-r:last-child { border-bottom: 0; }
.spts-r b { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--brand-text); }
.spts-r span { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.spts-r em { font-style: normal; font-size: 14.5px; }
@media (max-width: 560px) { .spts-r { grid-template-columns: 48px minmax(0, 1fr); row-gap: 2px; } .spts-r em { grid-column: 2; } }

/* levels: one table per level */
.slv-row { gap: 10px; margin: 2px 0 12px; flex-wrap: wrap; }
.slvl { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.slvl-list { display: flex; flex-direction: column; gap: 8px; }
.slvl-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.slvl-r > span { display: flex; flex-direction: column; min-width: 0; }
.slvl-r select { max-width: 240px; }
.slvl-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.spts + .spts { margin-top: 12px; }
.spts-h { margin: 4px 0 2px; font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.schamp-pod > .schamp-lv { background: rgba(227, 181, 60, 0.18); }
.schamp-lv svg { color: var(--gold); }

/* season overview: the two cards of a row share its height, with each card's footer at the bottom */
.scard-foot { margin-top: auto; }
/* the player's numbers in full rows: eight as 4 × 2 (2 × 4 on a narrow card), nine as 3 × 3 */
.sp-tiles.n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-tiles.n9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* searchable player pickers */
.spick { min-width: 0; }
.spick .cbx-in { min-height: 40px; padding-block: 7px; font-size: 15px; }
/* a head-to-head shorter than the card beside it spreads its comparison over the extra height (no gap above the footer) */
.scard .h2h-t { flex: 1 0 auto; }
.sp-tiles .nowrap { white-space: nowrap; }

/* ================= Announce: the studio for event posts ================= */
.promo-wrap { display: grid; gap: 18px; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .promo-wrap { grid-template-columns: minmax(0, 1fr); } }
.promo-prev { display: flex; flex-direction: column; gap: 12px; min-width: 0; position: sticky; top: 12px; }
@media (max-width: 900px) { .promo-prev { position: static; max-width: 460px; width: 100%; } }
.promo-canvas { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--deep); box-shadow: var(--shadow); }
.promo-prev .seg { align-self: flex-start; max-width: 100%; }
.promo-glbl { display: block; margin: 2px 0 8px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.promo-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.promo-design { appearance: none; display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 12px; border: 2px solid transparent; background: var(--surface-2); color: var(--ink); cursor: pointer; min-width: 0; font: inherit; text-align: left; }
.promo-design:hover { border-color: var(--line-strong); }
.promo-design[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.promo-design canvas { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--deep); }
.promo-design b { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.1; padding: 0 2px; overflow-wrap: anywhere; }
.promo-design[aria-pressed="true"] b { color: var(--brand-text); }
.sp-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; padding: 4px 4px 4px 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.sp-name { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-logo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #FFFFFF; overflow: hidden; border: 1px solid var(--line); }
.sp-logo img { width: 100%; height: 100%; object-fit: contain; }
.sp-logo.none { background: var(--deep); color: var(--accent); font-family: var(--font-display); font-weight: 800; font-size: 13px; }
.sp-logo.lg { width: 48px; height: 48px; border-radius: 10px; }
.sp-logo.lg.none { font-size: 18px; }
.sp-star, .sp-x { appearance: none; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; }
.sp-star:hover, .sp-x:hover { background: var(--surface-3); color: var(--ink); }
.sp-star.on { background: var(--medal-1); color: var(--medal-ink); }
.sp-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sp-row b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-hint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--brand-soft); color: var(--ink); }
.ann-hint > svg { flex: 0 0 auto; color: var(--brand-text); }
.ann-hint > span { flex: 1 1 220px; min-width: 0; font-size: 14px; }
.warn-t { color: var(--warn); }
.t .tag { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; background: var(--deep); color: var(--accent); border-radius: 6px; padding: 1px 6px; margin-left: 6px; white-space: nowrap; }

/* ================= Layout safety: text never runs out of its box =================
   Each rule answers something the visual audit (test/visual_audit.py) found at some screen size. Loaded last. */

/* a button label too long for its space wraps instead of running past the button's edge */
.btn { white-space: normal; overflow-wrap: break-word; max-width: 100%; text-align: center; }
.btn > svg { flex: none; }
/* chips never get wider than the row they sit in */
.chip { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.mvbtn { max-width: 11em; }
.mvbtn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a list of things to open (events being set up): the text wraps, the arrow stays at the end */
.listrow { appearance: none; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 11px; min-height: 52px; padding: 9px 12px 9px 16px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; }
.listrow:hover { background: var(--surface-2); }
.listrow > svg { flex: none; color: var(--ink-3); }
.listrow-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.listrow-t b { font-weight: 600; font-size: 15.5px; }
.listrow-t small { font-size: 13.5px; color: var(--ink-3); }

/* calendar chips: the time and the event type share a line when they fit, and stack when they do not */
.slot { min-width: 0; }
.slot-t { flex-wrap: wrap; row-gap: 3px; min-width: 0; }

/* pickers grow into the room they have */
.rk-season { flex: 1 1 240px; max-width: 520px; }
.slvl-r select { flex: 1 1 280px; max-width: 100%; }
.slvl-r > span { flex: 1 1 140px; }
.scard .card-h .spick { flex: 1 1 180px; max-width: 100%; }
.scard .card-h h3 { flex: none; }

/* screen-reader text sits at the top left of its box, so it never stretches a page or a scrolling table sideways */
.sr { left: 0; top: 0; }
.table-wrap, .brk { position: relative; }

/* calendar: a day's events one under the other, each as wide as the day */
.scal-sl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.skind, .smajor { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* season cards: a picker takes its own line when the card is too narrow for it beside the title */
.scard { container-type: inline-size; }
.scard .card-h .spick { flex: 1 1 260px; }
@container (max-width: 440px) {
  .h2h-pick { flex-direction: column; align-items: stretch; }
  .h2h-pick .spick { flex: none; width: 100%; }
  .h2h-v { align-self: center; }
}
@container (max-width: 520px) { .sp-tiles.n8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Navigation that stays in reach =====
   The top bar is pinned everywhere. Inside a night, tournament or season, its section tabs pin under the top bar, and
   once its header has scrolled away the pinned row also shows ← and its name. Phones (portrait): the sections move to
   a bottom bar, the top bar slims down and carries ← and the event's name, and Check-in, TV and LIVE are one-tap
   icons. Short landscape screens: the top bar is a single row. */
:root { --band-h: 0px; --ctx-h: 0px; --nav-h: 0px; }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--band-h) + var(--ctx-h) + 8px); scroll-padding-bottom: calc(var(--nav-h) + 8px); }

/* top bar parts that only some layouts show */
.topbar .tb-back, .topbar .title .tb-ctx, .topbar .title .tb-ctxsub { display: none; }
.tb-act .tb-l { white-space: nowrap; }

/* an event's pinned row: its tabs, swipeable, and once its header has gone, ← and its name */
.ctxbar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--band-h)); z-index: 12; display: flex; align-items: center; gap: 10px; min-width: 0;
  margin: 0 calc(-1 * var(--gutter-r)) 14px calc(-1 * var(--gutter-l)); padding: 4px var(--gutter-r) 4px var(--gutter-l); background: var(--bg);
  /* the background reaches both edges of the screen on wide screens too (a shadow, so the page never scrolls sideways) */
  box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax -1px -100vmax); }
.ctxbar.stuck { box-shadow: 0 0 0 100vmax var(--bg), 0 1px 0 100vmax var(--line); }
.ctxbar .subtabs { flex: 1 1 auto; min-width: 0; margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 1px; }
.ctxbar .subtabs .chip { min-height: 38px; }
.ctxbar .subtabs::-webkit-scrollbar { display: none; }
.ctxbar .subtabs .chip { flex: none; }
.ctxbar .cb-back, .ctxbar .cb-title { display: none; }
.ctxbar.stuck .cb-back { display: inline-grid; margin-left: -6px; }
.ctxbar.stuck .cb-title { display: block; flex: 0 1 auto; min-width: 0; max-width: min(36%, 340px); font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctxbar.notabs:not(.stuck) { display: none; }

/* the start page's tabs stay at the top once the court picture has gone, with LIVE when something is live */
.hometabs-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 12; display: flex; align-items: center; gap: 10px; min-width: 0;
  margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); padding-inline: var(--gutter-l) var(--gutter-r); background: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax -1px -100vmax); }
.hometabs-bar .hometabs { flex: 1 1 auto; min-width: 0; }
.hometabs-bar .hb-live { flex: none; min-height: 34px; }

/* what pins itself inside a page sits under the pinned bars */
.promo-prev { top: calc(env(safe-area-inset-top, 0px) + var(--band-h) + var(--ctx-h) + 12px); }

/* the phone's bottom bar */
.botnav { display: none; }
.bn-i { appearance: none; border: 0; background: none; color: var(--deep-ink-2); font: inherit; position: relative; min-width: 0; min-height: 50px; padding: 5px 2px 3px; border-radius: 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; -webkit-tap-highlight-color: transparent; }
.bn-i span { max-width: 100%; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; letter-spacing: 0.03em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-i:hover { color: var(--deep-ink); }
.bn-i[aria-current="page"] { color: var(--accent); }
.bn-i[aria-current="page"]::before { content: ""; position: absolute; top: -3px; left: 26%; right: 26%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.bn-i .dot { position: absolute; top: 6px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--deep); }
.bn-i:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 720px) and (min-height: 501px) {
  .band .tabs, .topbar .tb-home { display: none; }
  .topbar { padding-block: 7px; gap: 8px; min-height: 54px; }
  .topbar .crest { width: 36px; height: 36px; border-radius: 10px; font-size: 17px; }
  .topbar .title b { font-size: 20px; }
  .topbar .title span { font-size: 12.5px; }
  .band.in-ev .crest { display: none; }
  .topbar .tb-back { display: inline-grid; margin-left: -8px; }
  body.head-off .band .title .tb-name, body.head-off .band .title .tb-sub { display: none; }
  body.head-off .band .title .tb-ctx, body.head-off .band .title .tb-ctxsub { display: block; }
  .band .tb-act { width: 40px; min-height: 38px; padding: 0; }
  .band .tb-act .tb-l { display: none; }
  .nighthead .nh-back { display: none; }
  .ctxbar.stuck .cb-back, .ctxbar.stuck .cb-title, .ctxbar.notabs { display: none; }
  .botnav { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
    padding: 3px max(6px, env(safe-area-inset-right, 0px)) calc(3px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    background: var(--deep); color: var(--deep-ink); border-top: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.18); }
  .page { padding-bottom: calc(64px + var(--nav-h)); }
  .toasts { bottom: calc(14px + max(var(--nav-h), env(safe-area-inset-bottom, 0px))); }
}

@media (max-height: 500px) {
  .band > .band-in { display: flex; align-items: center; gap: 4px; }
  .topbar { flex: 1 1 auto; min-width: 0; padding-block: 6px; gap: 8px; }
  .band .tabs { flex: 0 1 auto; min-width: 0; margin-inline: 0; }
  .band .tab { padding: 13px 9px 10px; font-size: 16px; }
  .topbar .crest { width: 34px; height: 34px; border-radius: 9px; font-size: 16px; }
  .topbar .title b { font-size: 19px; }
  .topbar .title span { display: none; }
  .band .tb-act { width: 40px; min-height: 36px; padding: 0; }
  .band .tb-act .tb-l { display: none; }
}

/* ===== The hosted app: sign-in, main bar, people, messages, alerts, Me, admin ===== */
.cnt { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); border-radius: 999px; padding: 1px 8px; letter-spacing: 0; margin-left: 6px; vertical-align: middle; }
.sec-h { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.01em; }
.center { text-align: center; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.input.sm { min-height: 38px; padding: 6px 10px; font-size: 15px; }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.tag.tiny { font-size: 10.5px; padding: 0 5px; margin-left: 6px; }
.tag.app { background: var(--brand-soft); color: var(--brand-text); }
.tag.role-owner, .tag.role-super { background: var(--deep); color: var(--accent); }
.tag.role-organizer, .tag.role-admin { background: var(--brand-soft); color: var(--brand-text); }
.tag.role-scorer { background: var(--good-soft); color: var(--good); }
.tag.role-player, .tag.role-member { background: var(--surface-2); color: var(--ink-2); }
.iconwell { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--surface-2); color: var(--ink-2); display: inline-grid; place-items: center; }

/* sign-in, first profile, pairing */
.auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; background: var(--deep); position: relative; isolation: isolate; }
.auth-hero { position: fixed; inset: 0; z-index: -1; min-height: 0 !important; }
.auth-card { width: min(100% - 32px, 440px); margin: max(48px, 10vh) auto 40px; background: var(--surface); color: var(--ink); border-radius: 22px; padding: 28px 24px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 16px; }
.auth-card.wide { width: min(100% - 32px, 720px); }
.auth-card h1 { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; text-transform: uppercase; }
.auth-brand { color: var(--ink); }
.auth-btns { display: flex; flex-direction: column; gap: 10px; }
.auth-btn { width: 100%; min-height: 50px; justify-content: flex-start; padding-inline: 16px; font-size: 16px; }
.auth-btn svg { flex: none; }
.auth-btn.apple { background: #000; color: #fff; border-color: #000; }
.auth-legal { font-size: 13px; color: var(--ink-3); }
.auth-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.code-in { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: 0.3em; text-align: center; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.photo-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--brand-soft); color: var(--brand-text); display: inline-grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.avatar.sq { border-radius: 12px; }
.avatar.lg { width: 72px; height: 72px; font-size: 26px; }
.avatar.sm { width: 32px; height: 32px; font-size: 13px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.lvpick { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.lvopt { appearance: none; text-align: left; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font: inherit; }
.lvopt[aria-checked="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; background: var(--brand-soft); }
.lvopt-t { display: flex; align-items: center; gap: 8px; }
.lvopt small { color: var(--ink-3); font-size: 13px; line-height: 1.3; }
.pairview { min-height: 100vh; min-height: 100dvh; background: var(--deep); color: var(--deep-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px var(--gutter-r) 32px var(--gutter-l); text-align: center; }
.pairview h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 6vw, 72px); text-transform: uppercase; line-height: 0.95; }
.pairview p { color: var(--deep-ink-2); max-width: 56ch; font-size: clamp(16px, 1.6vw, 20px); }
.pair-row { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 56px); flex-wrap: wrap; }
.paircode { display: flex; gap: clamp(6px, 1vw, 12px); }
.paircode span { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 9vw, 120px); line-height: 1; background: var(--deep-2); color: var(--accent); border-radius: 14px; padding: 0.12em 0.22em; min-width: 1em; }
.pairqr { background: #fff; border-radius: 14px; padding: 6px; }
.claim-card { display: flex; align-items: center; gap: 14px; background: var(--surface-2); border-radius: 14px; padding: 12px; }
.claim-card > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.claim-card b { font-size: 18px; }

/* the main bar: bottom on phones, top bar on wider screens */
.topnav { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.tn-i { appearance: none; border: 0; background: none; color: var(--deep-ink-2); font: inherit; position: relative; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 10px; border-radius: 10px; font-family: var(--font-display); font-weight: 600; font-size: 16.5px; letter-spacing: 0.02em; white-space: nowrap; }
.tn-i:hover { background: rgba(255, 255, 255, 0.08); color: var(--deep-ink); }
.tn-i[aria-current="page"] { color: var(--deep-ink); background: rgba(255, 255, 255, 0.1); }
.tn-i .dot, .bn-i .dot { position: absolute; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--deep); }
.tn-i .dot { left: 22px; }
.nbadge { position: absolute; top: 2px; left: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-body); font-size: 11.5px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--deep); }
.tn-i .nbadge { left: 18px; top: 0; }
.hero-tools .topnav { margin-left: 0; }
@media (max-width: 1024px) and (min-width: 721px) { .tn-i span { display: none; } .tn-i { padding: 4px 9px; } }
.botnav .bn-i { min-height: 54px; }
.apppage .topbar { min-height: 60px; }
.tb-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; color: var(--accent); flex: none; }
.topbar .tb-back.show { display: inline-grid; margin-left: -8px; }
.page.narrow { max-width: 860px; }
.page > .stack-s + .stack-s, .page > section + section { margin-top: 18px; }
.scrollchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 14px; }
.scrollchips::-webkit-scrollbar { display: none; }
.scrollchips .chip { flex: none; }
/* a community's sections are tabs at the top on every screen */
.band .ctabs { margin-top: 2px; }

/* people lists */
.prow { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line); min-width: 0; }
.card > .prow:first-of-type, .stack-s > .prow:first-child { border-top: 0; }
.prow-hit { position: absolute; inset: 0; appearance: none; border: 0; background: transparent; cursor: pointer; border-radius: 10px; }
.prow-hit:hover { background: rgba(127, 127, 127, 0.07); }
.prow-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.prow-t b { overflow-wrap: anywhere; }
.prow-t q { color: var(--ink-2); font-style: italic; quotes: "“" "”"; overflow-wrap: anywhere; }
.prow-a { position: relative; z-index: 1; display: flex; gap: 6px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.prow > .tag, .prow > .avatar, .prow > .crest, .prow > .iconwell { position: relative; z-index: 0; pointer-events: none; }
.menu-wrap { position: relative; display: inline-flex; }
/* a row's open menu stays above the rows under it */
.prow-a:has(.cmenu.pop) { z-index: 45; }
.cmenu.pop { top: calc(100% + 4px); right: 0; left: auto; z-index: 40; min-width: 220px; max-width: min(320px, calc(100vw - 32px)); }
.ccard .cmenu.pop { top: 48px; right: 8px; }
.picklist { display: flex; flex-direction: column; gap: 4px; max-height: 56vh; overflow: auto; }
.pick { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; font: inherit; }
.pick:hover { background: var(--surface-2); }
.pick .grow { display: flex; flex-direction: column; }
.linkbox { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.linkqr { background: #fff; border-radius: 12px; padding: 6px; border: 1px solid var(--line); flex: none; }
.loglist { list-style: none; display: flex; flex-direction: column; padding: 0; margin: 0; }
.loglist li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.loglist li:first-child { border-top: 0; }
.welcome { background: linear-gradient(135deg, var(--brand-soft), var(--surface)); }
.welcome h2 { font-family: var(--font-display); font-size: 28px; }

/* Me */
.me-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.me-card h2 { font-family: var(--font-display); font-size: 28px; line-height: 1.05; }
.me-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.me-i { appearance: none; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; cursor: pointer; min-height: 64px; }
.me-i:first-child { border-top: 0; }
.me-i:hover { background: var(--surface-2); }
.me-i .grow { display: flex; flex-direction: column; gap: 1px; }
.me-i > svg { color: var(--ink-3); flex: none; }
.pe-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.pe-row:first-of-type { border-top: 0; }
.pe-l { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pe-l > label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
select.aud { width: auto; min-width: 150px; flex: 0 0 auto; }
.sticky-actions { position: sticky; bottom: calc(var(--nav-h) + 8px); justify-content: flex-end; background: var(--bg); padding-block: 8px; z-index: 5; }
.social-btns { margin-bottom: 4px; }
.pdetails { display: flex; gap: 14px; align-items: flex-start; background: var(--surface-2); border-radius: 14px; padding: 12px; }
.pdetails p { overflow-wrap: anywhere; }
.radios { display: flex; flex-direction: column; gap: 6px; }
.radio { display: flex; gap: 10px; align-items: center; min-height: 40px; padding: 4px 8px; border-radius: 10px; cursor: pointer; }
.radio:hover { background: var(--surface-2); }
.radio input { width: 18px; height: 18px; accent-color: var(--brand); }
.toggle-row { display: flex; align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid var(--line); cursor: pointer; }
.toggle-row:first-of-type { border-top: 0; }
.switch { appearance: none; width: 46px; height: 28px; border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; flex: none; transition: background 0.15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.switch:checked { background: var(--brand); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.legal h3 { margin-top: 14px; font-family: var(--font-display); font-size: 20px; }
.legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal p, .legal li { line-height: 1.5; }

/* messages */
.chatlist { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.chatrow { appearance: none; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; cursor: pointer; min-height: 68px; }
.chatrow:first-child { border-top: 0; }
.chatrow:hover { background: var(--surface-2); }
.cr-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-p { color: var(--ink-3); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatrow.unread .cr-p { color: var(--ink); font-weight: 600; }
.cr-m { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; color: var(--ink-3); }
.cr-m .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.thread { display: flex; flex-direction: column; gap: 10px; min-height: calc(100vh - 220px); }
.bubbles { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.daysep { text-align: center; margin: 10px 0 4px; }
.daysep span { background: var(--surface-2); color: var(--ink-3); font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.bubble { position: relative; align-self: flex-start; max-width: min(80%, 560px); background: var(--surface); border: 1px solid var(--line); border-radius: 16px 16px 16px 6px; padding: 8px 34px 6px 12px; display: flex; flex-direction: column; gap: 2px; }
.bubble.mine { align-self: flex-end; background: var(--brand); color: var(--brand-ink); border-color: transparent; border-radius: 16px 16px 6px 16px; }
.bubble.gone .b-text { font-style: italic; opacity: 0.7; }
.bubble.sending { opacity: 0.7; }
.b-name { font-size: 12.5px; font-weight: 700; color: var(--brand-text); }
.b-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.b-meta { font-size: 11.5px; opacity: 0.7; align-self: flex-end; }
.b-more { position: absolute; top: 2px; right: 2px; }
.bubble.mine .b-more .icon-btn { color: var(--brand-ink); }
.composer { position: sticky; bottom: calc(var(--nav-h) + 6px); display: flex; gap: 8px; align-items: flex-end; background: var(--bg); padding-block: 8px 4px; z-index: 5; }
.composer textarea { resize: none; min-height: 46px; max-height: 140px; border-radius: 22px; padding: 11px 16px; }
.composer .send { width: 46px; min-width: 46px; height: 46px; padding: 0; border-radius: 50%; }
.chat-tab .thread { min-height: 50vh; }

/* alerts */
.alertlist { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.alert-i { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); min-width: 0; }
.alert-i:first-child { border-top: 0; }
.alert-i.fresh { background: var(--brand-soft); }
.alert-i.fresh::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.alert-i > .avatar, .alert-i > .crest, .alert-i > .iconwell { position: relative; pointer-events: none; }

/* updates */
.post { display: flex; flex-direction: column; gap: 10px; }
.post header > .row > div { display: flex; flex-direction: column; }
.post-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16.5px; line-height: 1.5; }
.post-img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 12px; }
.post-photo { position: relative; max-width: 320px; }
.post-photo img { width: 100%; border-radius: 10px; }
.post-photo .icon-btn { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, 0.55); color: #fff; }
.reacts { display: flex; gap: 6px; flex-wrap: wrap; }
.react { appearance: none; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; min-height: 34px; padding: 2px 10px; font-size: 16px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.react b { font-size: 13px; color: var(--ink-2); }
.react.on { border-color: var(--brand); background: var(--brand-soft); }
.react:disabled { cursor: default; }
.report blockquote { border-left: 3px solid var(--line-strong); padding-left: 10px; color: var(--ink-2); overflow-wrap: anywhere; }

@media (max-width: 720px) and (min-height: 501px) {
  .topnav { display: none; }
  .hero-tools .topnav { display: none; }
  .band .ctabs { display: flex; margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); padding-inline: var(--gutter-l) var(--gutter-r); }
  .band .ctabs .tab { font-size: 16.5px; padding: 8px 10px 8px; }
  .band.in-ev .ctabs { display: none; }
  .bubble { max-width: 86%; }
  .me-card .row { width: 100%; }
}
@media (max-height: 500px) {
  .topnav .tn-i span { display: none; }
}

/* while a sheet is open, messages appear at the top so they never cover its buttons */
.overlay ~ .toasts { top: calc(env(safe-area-inset-top, 0px) + 12px); bottom: auto; }

/* rows of people and alerts: on narrow screens the buttons drop below the text instead of squeezing it */
.prow, .alert-i { flex-wrap: wrap; }
.prow-t { flex: 1 1 180px; }
.prow-a { margin-left: auto; }
.alert-i .prow-t { flex-basis: 200px; }
/* an update's header: the community name shortens rather than pushing the menu down */
.post > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; }
.post > header > .row { flex-wrap: nowrap; min-width: 0; }
.post > header > .row > div { min-width: 0; }
.post > header b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* who sees a profile detail */
.aud-l { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); flex: 0 0 auto; }
.aud-l select.aud { min-width: 0; width: auto; }

/* entry fees */
.fee-big { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.1; }
.fee-big .small { font-family: var(--font-body, inherit); font-weight: 400; }
.fee-edit { gap: 8px; align-items: center; flex-wrap: wrap; }
.fee-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.fee-stats > div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fee-stats b { font-family: var(--font-display); font-size: 20px; line-height: 1.1; overflow-wrap: anywhere; }
.fee-stats span { color: var(--ink-2); font-size: 13px; }
.fee-row.paid .prow-t b { color: var(--ink-2); }
.fee-row .tag svg { vertical-align: -2px; margin-right: 2px; }
button.prow.fee-ev { appearance: none; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
button.prow.fee-ev:hover { background: rgba(127, 127, 127, 0.06); }
.myfee { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); color: var(--ink); font-size: 15px; }
.myfee.paid { background: var(--good-soft); color: var(--good); }
@media (max-width: 560px) { .fee-row .prow-a { max-width: 58%; } }

/* nearby */
.geo-row { gap: 8px; flex-wrap: nowrap; }
.geo-row .input { flex: 1 1 auto; min-width: 0; }
.fc-tools { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) {
  .geo-row { flex-wrap: wrap; }
  .fc-tools { width: 100%; flex-wrap: nowrap; }
  .fc-tools .input { max-width: none !important; flex: 1 1 auto; min-width: 0; }
}
.fee-owing { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.fee-owing h4 { font-family: var(--font-display); font-size: 18px; }
/* personal links: on narrow screens the buttons go under the name */
@media (max-width: 560px) {
  .claim-row { flex-wrap: wrap; }
  .claim-row .prow-a { flex: 1 1 100%; justify-content: flex-end; }
}
/* a club's location in its form */
.club-where { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.club-where.warn { background: var(--warn-soft, #FFF4D6); }
.club-where .grow { flex: 1 1 220px; min-width: 0; }