/* =====================================================================
   Score All design system. Dark, high-contrast, built for courtside phones and big TVs.
   Tokens -> base -> layout shells -> components -> page modules -> utilities.
   ===================================================================== */

:root {
  --bg: #0a0e17;
  --bg-2: #0e1320;
  --surface: #141b2c;
  --surface-2: #1b2438;
  --surface-3: #232e47;
  --line: #27324a;
  --line-2: #34415e;
  --text: #eef2ff;
  --text-2: #c3cbe0;
  --muted: #8b95ad;
  --muted-2: #667090;
  --brand: #7c5cff;
  --brand-soft: rgba(124, 92, 255, 0.16);
  --brand-2: #22d3ee;
  --brand-grad: linear-gradient(135deg, #7c5cff 0%, #22d3ee 100%);
  --a: #ff5d73;
  --a-soft: rgba(255, 93, 115, 0.16);
  --b: #3b9dff;
  --b-soft: rgba(59, 157, 255, 0.16);
  --ok: #2ee6a6;
  --ok-soft: rgba(46, 230, 166, 0.14);
  --warn: #ffc145;
  --warn-soft: rgba(255, 193, 69, 0.14);
  --danger: #ff4d4d;
  --danger-soft: rgba(255, 77, 77, 0.14);
  --gold: #ffd166;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.3);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
  background-image: radial-gradient(1200px 600px at 80% -10%, rgba(124, 92, 255, 0.14), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(34, 211, 238, 0.08), transparent 60%);
  background-attachment: fixed;
}
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 0.5em; color: var(--text); }
h1 { font-size: clamp(1.6rem, 2.2vw + 1rem, 2.3rem); font-weight: 800; }
h2 { font-size: clamp(1.25rem, 1.2vw + 0.9rem, 1.6rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }
h4 { font-size: 0.95rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; display: block; }
small, .small { font-size: 0.85rem; }
.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }
code, kbd { font-family: var(--font-mono); font-size: 0.85em; background: var(--surface-3); padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
::selection { background: var(--brand); color: #fff; }

/* ---------- Layout shells ---------- */
.public-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: rgba(10, 14, 23, 0.78); border-bottom: 1px solid var(--line); }
.public-nav .inner { max-width: 1160px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; gap: 18px; }
.public-nav .links { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.public-nav .links a { color: var(--text-2); padding: 8px 12px; border-radius: 10px; font-weight: 500; }
.public-nav .links a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.public-nav .brand, .public-nav .links a { white-space: nowrap; }
.public-nav .pub-menu-btn { display: none; margin-left: auto; }
.public-nav .pub-login-btn { display: none; margin-left: auto; }
.public-nav .inner { position: relative; }
.public-nav .pub-menu { right: 12px; top: 54px; }
@media (max-width: 900px) {
  .public-nav .inner { padding: 0 12px; gap: 8px; height: 56px; }
  .public-nav .links { display: none; }
  .public-nav .pub-menu-btn { display: inline-flex; margin-left: 8px; }
  .public-nav .pub-login-btn { display: inline-flex; }
}
.public-main { max-width: 1160px; margin: 0 auto; padding: 32px 20px 80px; }
.public-main.narrow { max-width: 760px; }
.public-footer { border-top: 1px solid var(--line); padding: 28px 20px; color: var(--muted); font-size: 0.85rem; }
.public-footer .inner { max-width: 1160px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.public-footer a { color: var(--muted); }

.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--text); letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand .logo { width: 30px; height: 30px; border-radius: 9px; background: var(--brand-grad); display: grid; place-items: center; color: #fff; font-size: 15px; box-shadow: 0 4px 14px rgba(124, 92, 255, 0.45); }

/* ---------- App shell: top nav + mobile tab bar (no sidebar) ---------- */
.topnav { position: sticky; top: 0; z-index: 50; background: rgba(10, 14, 23, 0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.topnav-inner { max-width: 1240px; margin: 0 auto; padding: 0 20px; height: var(--topbar-h); display: flex; align-items: center; gap: 18px; }
.topnav .primary { display: flex; gap: 4px; margin-left: 12px; }
.topnav .pn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 11px; color: var(--text-2); font-weight: 600; font-size: 0.92rem; transition: 0.15s; }
.topnav .pn .ic { font-size: 1rem; }
.topnav .pn:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.topnav .pn.active { background: var(--brand-soft); color: #fff; box-shadow: inset 0 -2px 0 var(--brand-2); }
.topnav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; position: relative; }
.avatar-btn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.avatar-btn .avatar { width: 38px; height: 38px; box-shadow: 0 0 0 2px var(--line-2); transition: 0.15s; }
.avatar-btn:hover .avatar, .avatar-btn[aria-expanded="true"] .avatar { box-shadow: 0 0 0 2px var(--brand-2); }
.menu { position: absolute; top: calc(100% + 10px); right: 0; width: 280px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow); padding: 8px; display: none; z-index: 90; animation: toast-in 0.15s ease; max-height: calc(100vh - var(--topbar-h) - 26px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.menu.open { display: block; }
.menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: flex; flex-direction: column; }
.menu-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--text-2); font-weight: 500; }
.menu-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.menu-item.danger { color: var(--danger); }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); padding: 8px 12px 4px; font-weight: 700; }
.menu-label.admin { color: var(--warn); }
.content { padding: 26px 20px 100px; max-width: 1240px; width: 100%; margin: 0 auto; min-height: calc(100vh - var(--topbar-h)); }
.content.narrow { max-width: 820px; }
.content.wide { max-width: 1480px; }

.impersonation { background: linear-gradient(90deg, #ff8a3d, #ffb347); color: #1b1200; padding: 8px 16px; font-weight: 600; display: flex; align-items: center; gap: 12px; justify-content: center; font-size: 0.9rem; }
.impersonation form { margin: 0; }
.impersonation button { background: #1b1200; color: #fff; border: 0; padding: 5px 12px; border-radius: 8px; cursor: pointer; font-weight: 700; }

.tabbar { display: none; }
.sheet { display: none; position: fixed; inset: 0; z-index: 95; background: rgba(4, 6, 12, 0.6); backdrop-filter: blur(3px); }
.sheet.open { display: flex; align-items: flex-end; }
.sheet-body { width: 100%; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--surface); border-radius: 22px 22px 0 0; padding: 10px 12px calc(16px + var(--safe-b)); box-shadow: var(--shadow); animation: sheet-in 0.22s ease; }
.sheet-grip { width: 44px; height: 5px; border-radius: 999px; background: var(--line-2); margin: 4px auto 12px; }
@keyframes sheet-in { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 900px) {
  .topnav .primary { display: none; }
  .topnav-inner { padding: 0 14px; height: 56px; }
  .topnav .new-match { display: none; }
  .content { padding: 18px 14px calc(96px + var(--safe-b)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: rgba(10, 14, 23, 0.94); backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + var(--safe-b)); }
  .tabbar .tab { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding: 6px 2px 4px; color: var(--muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: none; border: 0; cursor: pointer; font-family: var(--font); text-decoration: none !important; -webkit-tap-highlight-color: transparent; }
  .tabbar .tab .ic { font-size: 1.35rem; line-height: 1; }
  .tabbar .tab.active { color: var(--brand-2); }
  .tabbar .tab.play { position: relative; color: #fff; }
  .tabbar .tab.play .fab { width: 54px; height: 54px; border-radius: 50%; background: var(--brand-grad); display: grid; place-items: center; font-size: 1.7rem; font-weight: 800; box-shadow: 0 8px 22px rgba(124, 92, 255, 0.5); margin-top: -26px; border: 3px solid var(--bg); }
  .topnav .avatar-btn { display: none; }
  .menu { position: fixed; top: 64px; right: 10px; left: 10px; width: auto; max-height: calc(100vh - 78px - var(--safe-b)); }
}
@media (max-width: 380px) { .topnav .brand-text { display: none; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; border: 1px solid transparent; cursor: pointer; font-family: var(--font); line-height: 1.1; transition: transform 0.12s, filter 0.15s, background 0.15s, border-color 0.15s; text-decoration: none !important; user-select: none; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--brand-grad); color: #fff; box-shadow: 0 6px 18px rgba(124, 92, 255, 0.35); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-outline { background: transparent; color: var(--text-2); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--text-2); color: var(--text); }
.btn-success { background: var(--ok); color: #05261a; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger-outline { background: transparent; color: var(--danger); border-color: rgba(255, 77, 77, 0.5); }
.btn-danger-outline:hover { background: var(--danger-soft); }
.btn-gold { background: var(--gold); color: #2a1e00; }
.btn-sm { padding: 7px 12px; font-size: 0.82rem; border-radius: 9px; }
.btn-lg { padding: 15px 26px; font-size: 1.05rem; border-radius: 14px; }
.btn-block { width: 100%; }
.btn-google { background: #fff; color: #1f1f1f; border-color: #dadce0; gap: 10px; }
.btn-google:hover { background: #f1f3f4; color: #1f1f1f; }
.btn-google svg { width: 18px; height: 18px; flex: none; }
.or-rule { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--muted); font-size: .85rem; }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.btn-google { background: #fff; color: #1f1f1f; border-color: #dadce0; gap: 10px; }
.btn-google:hover { background: #f2f2f2; color: #1f1f1f; }
.btn-google svg { width: 18px; height: 18px; flex: none; }
.or-rule { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--muted, #8a94a6); font-size: .85rem; }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.btn-icon { padding: 9px; width: 40px; height: 40px; border-radius: 10px; }
.btn-link { background: none; border: 0; color: var(--brand-2); padding: 0; font-weight: 600; cursor: pointer; }

/* ---------- Cards, tiles, badges ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.card.tight { padding: 16px; }
.card.flat { box-shadow: none; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; }
.card-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 700; margin: 0 0 12px; }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; position: relative; overflow: hidden; }
.stat-tile::after { content: ""; position: absolute; inset: auto -30px -40px auto; width: 120px; height: 120px; border-radius: 50%; background: var(--brand-soft); filter: blur(6px); }
.stat-tile .val { font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; margin-bottom: 6px; }
.stat-tile .lbl { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.stat-tile.a .val { color: var(--a); } .stat-tile.b .val { color: var(--b); } .stat-tile.ok .val { color: var(--ok); } .stat-tile.gold .val { color: var(--gold); } .stat-tile.brand .val { color: var(--brand-2); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--line-2); white-space: nowrap; }
.badge-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge-brand { background: var(--brand-soft); color: #c4b5ff; border-color: transparent; }
.badge-a { background: var(--a-soft); color: var(--a); border-color: transparent; }
.badge-b { background: var(--b-soft); color: var(--b); border-color: transparent; }
.badge-live { background: var(--danger); color: #fff; border-color: transparent; animation: pulse 1.6s infinite; }
.badge-gold { background: rgba(255, 209, 102, 0.16); color: var(--gold); border-color: transparent; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.5); } 60% { box-shadow: 0 0 0 8px rgba(255, 77, 77, 0); } }
.lock-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 800; color: var(--gold); background: rgba(255, 209, 102, 0.12); padding: 2px 8px; border-radius: 999px; letter-spacing: 0.04em; white-space: nowrap; }
.lock-link { color: var(--gold); font-weight: 600; font-size: 0.85rem; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-family: var(--font-display); flex-shrink: 0; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text-2); padding: 7px 14px; border-radius: 999px; font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: 0.15s; }
.chip:hover { border-color: var(--text-2); color: var(--text); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.static { cursor: default; }
.pill-tabs { display: flex; gap: 6px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); padding: 5px; border-radius: 14px; width: fit-content; max-width: 100%; }
.pill-tabs a, .pill-tabs button { padding: 8px 14px; border-radius: 10px; color: var(--text-2); font-weight: 600; font-size: 0.9rem; border: 0; background: transparent; cursor: pointer; font-family: var(--font); white-space: nowrap; }
.pill-tabs a:hover { text-decoration: none; color: var(--text); background: var(--surface-2); }
.pill-tabs .active { background: var(--brand-soft); color: #fff; }
.teaser { text-align: center; padding: 44px 26px; border-style: dashed; }
.teaser .teaser-icon { font-size: 2.2rem; margin-bottom: 8px; }
.teaser h3 { color: var(--gold); }
.teaser p { color: var(--muted); max-width: 440px; margin: 0 auto 18px; }
.empty { text-align: center; color: var(--muted); padding: 34px 20px; border: 1px dashed var(--line-2); border-radius: var(--radius); }
.empty .big { font-size: 2rem; margin-bottom: 6px; }
.alert { padding: 13px 16px; border-radius: 12px; border: 1px solid; font-size: 0.92rem; margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; }
.alert-success { background: var(--ok-soft); border-color: rgba(46, 230, 166, 0.35); color: #b8f5df; }
.alert-error, .alert-danger { background: var(--danger-soft); border-color: rgba(255, 77, 77, 0.4); color: #ffc9c9; }
.alert-info { background: var(--b-soft); border-color: rgba(59, 157, 255, 0.4); color: #cfe6ff; }
.alert-warning { background: var(--warn-soft); border-color: rgba(255, 193, 69, 0.4); color: #ffe6b3; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label, .label { font-size: 0.8rem; font-weight: 700; color: var(--text-2); letter-spacing: 0.02em; }
.field .help { font-size: 0.8rem; color: var(--muted); }
.input, .select, textarea.input { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text); padding: 12px 14px; border-radius: 12px; font-size: 1rem; font-family: var(--font); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.input:focus, .select:focus, textarea.input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.input::placeholder { color: var(--muted-2); }
.select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238b95ad' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; }
.input-sm { padding: 8px 11px; font-size: 0.9rem; border-radius: 9px; }
.input-code { font-family: var(--font-mono); letter-spacing: 0.35em; text-align: center; font-size: 2rem; font-weight: 700; }
textarea.input { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 18px; }
.toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; font-weight: 500; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .track { width: 46px; height: 26px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-2); position: relative; transition: 0.2s; flex-shrink: 0; }
.toggle .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: 0.2s; }
.toggle input:checked + .track { background: var(--brand); border-color: var(--brand); }
.toggle input:checked + .track::after { transform: translateX(20px); }
.toggle input:focus-visible + .track { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.hp { position: absolute; left: -9999px; top: -9999px; }
.info-tip { appearance: none; padding: 0; font-family: inherit; line-height: 1; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 800; cursor: help; border: 1px solid var(--line-2); margin-left: 5px; vertical-align: middle; }
.info-tip:hover, .info-tip.open { color: #fff; background: var(--brand); border-color: var(--brand); }
.tip-pop { position: absolute; z-index: 90; background: var(--surface-3); color: var(--text); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; font-size: 0.85rem; line-height: 1.45; box-shadow: 0 12px 30px rgba(0,0,0,.45); font-weight: 400; }
.form-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 22px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); }
table.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 12px 14px; background: var(--bg-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
.table .num { font-family: var(--font-mono); text-align: right; }
/* Phones: a table is already inside .table-wrap, so it can scroll sideways - but the fewer
   columns it has to, the better. .hide-sm drops a column that the row's detail page repeats. */
.table .sm-only { display: none; }
@media (max-width: 640px) {
  .table th, .table td { padding: 10px 9px; }
  table.table { font-size: 0.86rem; }
  .table .hide-sm { display: none; }
  /* A long email must be allowed to break, or it alone sets the column's minimum width. */
  .table td:first-child { overflow-wrap: anywhere; }
  /* Badges that had their own columns ride along under the name instead. */
  .table .sm-only { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
}

/* ---------- Grids & utilities ---------- */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-side { grid-template-columns: minmax(0, 1fr) 340px; }
.grid-side-l { grid-template-columns: 360px minmax(0, 1fr); }
/* minmax(0, 1fr), never a bare 1fr: a grid track defaults to min-width:auto, so one wide child —
   a table, a long word — makes the column refuse to shrink and the whole page scrolls sideways
   (RET-63: that is what stopped /admin fitting on a phone). */
@media (max-width: 1000px) { .grid-side, .grid-side-l { grid-template-columns: minmax(0, 1fr); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 36px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.fw-b { font-weight: 700; }
.mono { font-family: var(--font-mono); }
.hide { display: none !important; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--muted); margin: 4px 0 0; }
.help-link { font-size: 0.8rem; color: var(--muted); font-weight: 600; margin-left: 10px; vertical-align: middle; }
.divider { height: 1px; background: var(--line); margin: 18px 0; }
.kbd { font-family: var(--font-mono); background: var(--surface-3); border: 1px solid var(--line-2); border-bottom-width: 2px; padding: 2px 7px; border-radius: 6px; font-size: 0.78rem; }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row .input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.82rem; }

/* ---------- Toasts & modals ---------- */
.toasts { position: fixed; bottom: calc(18px + var(--safe-b)); left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100% - 24px)); pointer-events: none; }
.toast { pointer-events: auto; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; font-weight: 500; animation: toast-in 0.25s ease; }
.toast.ok { border-color: rgba(46, 230, 166, 0.5); } .toast.err { border-color: rgba(255, 77, 77, 0.6); } .toast.warn { border-color: rgba(255, 193, 69, 0.6); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.modal-backdrop { position: fixed; inset: 0; background: rgba(4, 6, 12, 0.72); z-index: 900; display: none; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(4px); }
.modal-backdrop.open { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; padding: 24px; width: 100%; max-width: 480px; box-shadow: var(--shadow); max-height: 92vh; overflow-y: auto; animation: toast-in 0.2s ease; }
.modal h3 { margin-top: 0; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ---------- Sport tiles & wizard ---------- */
.sport-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sport-group { margin-bottom: 18px; }
.sport-group .card-title { margin-bottom: 8px; }
.sport-tile { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 22px 16px; text-align: center; cursor: pointer; transition: 0.18s; position: relative; overflow: hidden; }
.sport-tile .ic { font-size: 2.4rem; line-height: 1; margin-bottom: 10px; }
.sport-tile strong { display: block; font-family: var(--font-display); font-size: 1rem; }
.sport-tile span { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 4px; }
.sport-tile:hover { transform: translateY(-2px); border-color: var(--line-2); }
.sport-tile.selected { border-color: var(--sport-color, var(--brand)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sport-color, var(--brand)) 22%, transparent); }
.sport-tile.selected::after { content: "✓"; position: absolute; top: 10px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--sport-color, var(--brand)); color: #fff; font-size: 0.75rem; display: grid; place-items: center; font-weight: 800; }
.steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.step { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.step .n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-size: 0.72rem; }
.step.done { color: var(--ok); border-color: rgba(46, 230, 166, 0.35); }
.step.done .n { background: var(--ok); color: #05261a; }
.step.current { color: #fff; border-color: var(--brand); background: var(--brand-soft); }
.step.current .n { background: var(--brand); color: #fff; }
.rule-group { margin-bottom: 20px; }
.rule-group > .card-title { margin-bottom: 10px; }
.preset-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.preset { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: 0.15s; }
.preset:hover { border-color: var(--text-2); }
.preset.active { border-color: var(--brand); background: var(--brand-soft); }
.preset strong { display: block; font-size: 0.92rem; }
.preset span { color: var(--muted); font-size: 0.78rem; }
.court { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; }
.court .vs { align-self: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--line-2); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; color: var(--muted); }
.court .side-head { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; padding-bottom: 8px; border-bottom: 2px solid; margin-bottom: 12px; }
.court .side-a .side-head { color: var(--a); border-color: var(--a); }
.court .side-b .side-head { color: var(--b); border-color: var(--b); }
.slot { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.slot .slot-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.slot .status { font-size: 0.78rem; margin-top: 6px; }
.slot .status.ok { color: var(--ok); } .slot .status.err { color: var(--danger); }
@media (max-width: 700px) { .court { grid-template-columns: 1fr; } .court .vs { justify-self: center; } }

/* ---------- Match & tournament lists ---------- */
.match-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
.match-row .ic { font-size: 1.4rem; width: 32px; text-align: center; }
.match-row .who { flex: 1; min-width: 0; }
.match-row .who strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-row .who span { font-size: 0.78rem; color: var(--muted); }
.match-row .score { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.match-row .score small { font-family: var(--font); color: var(--muted); font-weight: 500; }
.resume-banner { background: var(--brand-grad); border-radius: var(--radius); padding: 18px 22px; display: flex; align-items: center; gap: 16px; color: #fff; box-shadow: 0 10px 30px rgba(124, 92, 255, 0.35); margin-bottom: 22px; flex-wrap: wrap; }
.resume-banner .txt { flex: 1; min-width: 200px; }
.resume-banner h3 { margin: 0 0 2px; color: #fff; }
.resume-banner .btn { background: #fff; color: #3a2a99; }
.t-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: 0.15s; }
.t-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.t-card .name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.t-card .meta { color: var(--muted); font-size: 0.85rem; display: flex; gap: 12px; flex-wrap: wrap; }
.t-card .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.t-card.featured { border-color: rgba(255, 209, 102, 0.5); background: linear-gradient(160deg, var(--surface), rgba(255, 209, 102, 0.05)); }

/* ---------- Bracket ---------- */
.bracket-scroll { overflow-x: auto; padding-bottom: 8px; }
.bracket { display: flex; gap: 22px; align-items: stretch; min-width: max-content; }
.bracket .round { display: flex; flex-direction: column; justify-content: space-around; gap: 14px; min-width: 230px; }
.bracket .round-title { text-align: center; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 700; }
.node { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; position: relative; }
.node.live { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.15); }
.node.ready { border-color: rgba(46, 230, 166, 0.5); }
.node .team { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; font-size: 0.9rem; }
.node .team + .team { border-top: 1px solid var(--line); }
.node .team.winner { color: var(--ok); font-weight: 700; }
.node .team.bye { color: var(--muted-2); font-style: italic; }
.node .team .s { font-family: var(--font-mono); color: var(--muted); }
.node .team.winner .s { color: var(--ok); }
.node .node-foot { padding: 8px 10px; border-top: 1px solid var(--line); background: var(--bg-2); display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.node .tag { position: absolute; top: -8px; right: 10px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; background: var(--danger); color: #fff; }
.node .tag.ready { background: var(--ok); color: #05261a; }
.champion { background: linear-gradient(135deg, #ffd166, #ff9f1c); color: #2a1a00; padding: 18px 22px; border-radius: var(--radius); font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(255, 159, 28, 0.35); margin-bottom: 20px; }
.king-card { background: linear-gradient(135deg, var(--gold), #ff9f1c); color: #2a1a00; border-radius: var(--radius); padding: 22px; text-align: center; }
.king-card .lbl { font-size: 0.7rem; letter-spacing: 0.2em; font-weight: 800; }
.king-card .name { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; }

/* ---------- Pricing ---------- */
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.price-card.current { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.price-card.popular::before { content: "Most popular"; position: absolute; top: -12px; left: 20px; background: var(--brand-grad); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.price-card .price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; }
.price-card .price small { font-size: 0.9rem; color: var(--muted); font-weight: 500; }
.price-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; color: var(--text-2); font-size: 0.92rem; }
.price-card li::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.price-card li.no { color: var(--muted-2); } .price-card li.no::before { content: "– "; color: var(--muted-2); }

/* ---------- Marketing ---------- */
.hero { padding: 60px 0 40px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 4vw + 1rem, 4rem); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 18px; }
.hero h1 .grad { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: 1.15rem; color: var(--text-2); max-width: 520px; }
.hero .cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.hero-board { background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); transform: rotate(-1.5deg); }
.hero-board .hb-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.hero-board .hb-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; gap: 10px; }
.hero-board .hb-score .n { font-family: var(--font-display); font-size: 4.2rem; font-weight: 800; line-height: 1; }
.hero-board .hb-score .a { color: var(--a); } .hero-board .hb-score .b { color: var(--b); }
.hero-board .hb-name { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-top: 6px; }
.hero-board .hb-foot { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding-top: 30px; } .hero-board { transform: none; } }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.feature .ic { font-size: 1.8rem; margin-bottom: 8px; }
.feature h3 { margin-bottom: 4px; }
.feature p { color: var(--muted); margin: 0; font-size: 0.92rem; }
.section { margin: 56px 0 0; }
.section-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--brand-2); font-weight: 800; margin-bottom: 8px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 8px; }
.faq-item h3 { font-size: 0.98rem; margin-bottom: 4px; }
.faq-item p { color: var(--text-2); margin: 0; font-size: 0.92rem; }
.guide-step { background: var(--surface); border-left: 4px solid var(--brand); border-radius: 0 12px 12px 0; padding: 16px 20px; margin-bottom: 12px; }
.guide-step h3 { margin-bottom: 4px; font-size: 1rem; }
.guide-step p, .guide-step li { color: var(--text-2); font-size: 0.93rem; margin: 0; }
.guide-step ul { margin: 8px 0 0; padding-left: 20px; }

/* ---------- Referee console ---------- */
body.console { height: 100dvh; overflow: hidden; background: #05070d; background-image: none; }
.con { display: flex; flex-direction: column; height: 100dvh; }
.con-top { height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: 0.85rem; flex-shrink: 0; }
.con-top .sp { font-weight: 800; font-family: var(--font-display); }
.con-top .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.con-top .tvcode { font-family: var(--font-mono); background: var(--ok-soft); color: var(--ok); padding: 3px 8px; border-radius: 8px; font-weight: 700; letter-spacing: 0.1em; }
.con-body { flex: 1; min-height: 0; display: flex; position: relative; }
.tapzone { flex: 1; border: 0; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; cursor: pointer; padding: 0; font-family: var(--font); -webkit-tap-highlight-color: transparent; transition: filter 0.1s; overflow: hidden; }
.tapzone:active { filter: brightness(1.15); }
.tapzone.a { background: linear-gradient(160deg, #ff5d73, #c62a48); }
.tapzone.b { background: linear-gradient(160deg, #3b9dff, #1e5fc2); }
.tapzone .big { font-family: var(--font-display); font-size: clamp(5rem, 22vw, 11rem); font-weight: 800; line-height: 1; text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
.tapzone .name { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(0.8rem, 2.4vw, 1.05rem); margin-top: 8px; opacity: 0.92; max-width: 90%; text-align: center; }
.tapzone .big.word { font-size: clamp(2.6rem, 10vw, 5.5rem); }
.tapzone .subline { margin-top: 8px; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; opacity: 0.9; background: rgba(0,0,0,0.22); padding: 4px 12px; border-radius: 999px; }
.con-side.batting { box-shadow: inset 0 0 0 4px var(--gold); }
.con-side .batting-tag { display: none; background: var(--gold); color: #2a1a00; font-size: 0.7rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.1em; }
.con-side.batting .batting-tag { display: inline-block; }
.spec-team .score.word { font-size: clamp(3rem, 12vw, 9rem); }
.spec-team .subline { margin-top: 8px; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); }
.tapzone .games { margin-top: 12px; background: rgba(0, 0, 0, 0.28); padding: 5px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; }
.tapzone .serve { position: absolute; top: 14px; display: none; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.3); padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; }
.tapzone .serve .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px var(--gold); }
.tapzone.serving .serve { display: inline-flex; }
.tapzone.a .serve { left: 14px; } .tapzone.b .serve { right: 14px; }
.tapzone .pbnum { font-family: var(--font-display); font-size: clamp(1.6rem, 6vw, 3rem); font-weight: 800; color: var(--gold); margin-left: 10px; }
.tapzone .duo { position: absolute; left: 0; right: 0; bottom: 0; display: flex; }
.tapzone .duo .box { flex: 1; padding: 12px 6px 14px; text-align: center; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; border-top: 3px solid transparent; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tapzone .duo .box.srv { opacity: 1; background: rgba(255, 255, 255, 0.14); border-top-color: var(--gold); }
.tapzone .duo .box.srv::before { content: "S "; color: var(--gold); }
.tapzone .duo .box small { display: block; font-size: 0.6rem; opacity: 0.7; letter-spacing: 0.15em; }
.con-side { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; color: #fff; }
.con-side.a { background: linear-gradient(160deg, #8f1f34, #4d1020); } .con-side.b { background: linear-gradient(160deg, #1e4d8f, #0f2a52); }
.con-side .name { font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(0.8rem, 2.4vw, 1.05rem); text-align: center; }
.con-side .big { font-family: var(--font-display); font-size: clamp(4rem, 18vw, 9rem); font-weight: 800; line-height: 1; }
.con-side .sub { display: flex; gap: 8px; align-items: center; font-size: 0.8rem; opacity: 0.85; font-weight: 700; }
.con-side .sub .bonus { background: var(--gold); color: #2a1a00; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; }
.con-side .btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.con-side .pt { width: 62px; height: 62px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 1.25rem; font-weight: 800; font-family: var(--font-display); cursor: pointer; }
.con-side .pt:active { background: rgba(255, 255, 255, 0.35); }
.con-side .pt.ghost { width: auto; height: 42px; border-radius: 999px; padding: 0 16px; font-size: 0.85rem; font-family: var(--font); background: rgba(0, 0, 0, 0.25); }
.con-clock { background: var(--bg-2); border-top: 1px solid var(--line); padding: 10px 12px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; flex-shrink: 0; }
.con-clock .period { font-size: 0.8rem; color: var(--muted); background: var(--surface-2); padding: 4px 12px; border-radius: 999px; font-weight: 700; }
.con-clock .gclock { font-family: var(--font-mono); font-size: 2.1rem; font-weight: 700; min-width: 110px; text-align: center; }
.con-clock .gclock.low { color: var(--danger); }
.con-clock .sclock { font-family: var(--font-mono); font-size: 1.3rem; color: var(--warn); min-width: 40px; text-align: center; }
.con-clock .sclock.low { color: var(--danger); animation: blink 0.5s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.con-bar { display: flex; gap: 2px; background: #000; flex-shrink: 0; padding-bottom: var(--safe-b); }
.con-bar .cb { flex: 1; min-height: 66px; border: 0; background: var(--surface); color: var(--text-2); font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; font-family: var(--font); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; -webkit-tap-highlight-color: transparent; }
.con-bar .cb:active { background: var(--surface-3); }
.con-bar .cb .ic { font-size: 1.15rem; }
.con-bar .cb.danger { background: #9c1f2e; color: #fff; }
.con-bar .cb.on { color: var(--ok); box-shadow: inset 0 3px 0 var(--ok); }
.con-bar .cb.end { color: var(--danger); }
.con-bar .cb.success { background: #0f6b4c; color: #fff; }
.con-bar .cb:disabled { opacity: 0.4; }
.swap-toast { position: fixed; top: 64px; left: 50%; transform: translateX(-50%) translateY(-12px); background: var(--gold); color: #2a1a00; font-weight: 800; padding: 10px 22px; border-radius: 999px; z-index: 950; opacity: 0; transition: 0.25s; pointer-events: none; box-shadow: var(--shadow); }
.swap-toast.show { opacity: 1; transform: translateX(-50%); }
.sync-err { position: fixed; bottom: calc(80px + var(--safe-b)); left: 50%; transform: translateX(-50%); background: var(--danger); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 700; z-index: 960; display: none; gap: 10px; align-items: center; cursor: pointer; box-shadow: var(--shadow); font-size: 0.85rem; }
.sync-err.show { display: flex; }
.con-panel { position: absolute; top: 8px; right: 8px; width: min(340px, calc(100% - 16px)); background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 14px; z-index: 500; box-shadow: var(--shadow); display: none; }
.con-panel.open { display: block; }
.con-panel h4 { margin: 0 0 8px; }
.con-panel p { font-size: 0.8rem; color: var(--muted); margin: 0 0 10px; }
.con-final { position: fixed; inset: 0; background: rgba(4, 6, 12, 0.94); z-index: 980; display: none; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 24px; }
.con-final.show { display: flex; }
.con-final h2 { font-size: clamp(1.8rem, 6vw, 3rem); color: var(--ok); }
.kbd-hint { position: fixed; bottom: calc(150px + var(--safe-b)); left: 50%; transform: translateX(-50%); background: rgba(10, 14, 23, 0.92); border: 1px solid var(--line-2); color: var(--text-2); padding: 8px 14px; border-radius: 12px; font-size: 0.75rem; z-index: 500; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
@media (max-width: 480px) { .kbd-hint { display: none !important; } }
@media (max-width: 560px) {
  .con-top { padding: 0 8px; gap: 6px; }
  .con-top #gameInfo { display: none; }
  .con-top .sp { font-size: 0.8rem; white-space: nowrap; }
  .con-top .right { gap: 4px; overflow-x: auto; flex-shrink: 1; min-width: 0; }
  .con-top .right > * { flex-shrink: 0; }
  .con-top .tvcode { font-size: 0.72rem; padding: 3px 6px; }
  .con-top .lang-select, .con-top #audioLang { max-width: 74px; font-size: 0.72rem; padding: 4px 22px 4px 6px; background-position: right 6px center; }
}

/* ---------- Spectator scoreboard ---------- */
body.spectate { background: #05070d; background-image: none; }
.spec { min-height: 100dvh; display: flex; flex-direction: column; }
.spec-top { display: flex; align-items: center; gap: 12px; padding: 12px 18px; font-size: 0.85rem; color: var(--muted); }
.spec-top .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.spec-board { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--line); border-radius: 22px; overflow: hidden; margin: 0 18px; border: 1px solid var(--line-2); min-height: 52vh; position: relative; }
.spec-team { background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px 16px; position: relative; }
.spec-team .name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, 2.6vw, 1.8rem); text-transform: uppercase; letter-spacing: 0.06em; text-align: center; }
.spec-team .score { font-family: var(--font-display); font-weight: 800; font-size: clamp(6rem, 22vw, 16rem); line-height: 0.95; }
.spec-team.a .score { color: var(--a); } .spec-team.b .score { color: var(--b); }
.spec-team .games { margin-top: 10px; background: var(--accent, var(--brand)); color: #fff; padding: 6px 18px; border-radius: 999px; font-weight: 800; letter-spacing: 0.08em; font-size: clamp(0.8rem, 1.6vw, 1.1rem); }
.spec-team .serve { position: absolute; top: 16px; display: none; align-items: center; gap: 8px; color: var(--gold); font-weight: 800; letter-spacing: 0.1em; font-size: 0.85rem; }
.spec-team .serve .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 16px var(--gold); }
.spec-team.serving .serve { display: inline-flex; }
.spec-team.a .serve { left: 18px; } .spec-team.b .serve { right: 18px; }
.spec-team .pbnum { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 4.5rem); color: var(--gold); font-weight: 800; position: absolute; bottom: 12%; right: 10%; background: rgba(0, 0, 0, 0.4); padding: 4px 18px; border-radius: 14px; display: none; }
.spec-team.serving .pbnum { display: block; }
.spec-clock { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5; background: rgba(0, 0, 0, 0.65); border: 1px solid var(--line-2); border-radius: 14px; padding: 8px 20px; display: flex; gap: 18px; align-items: center; }
.spec-clock .period { color: var(--muted); font-weight: 700; font-size: 0.85rem; }
.spec-clock .g { font-family: var(--font-mono); font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 700; }
.spec-clock .s { font-family: var(--font-mono); color: var(--warn); font-size: 1.2rem; }
.spec-clock .s.low { color: var(--danger); animation: blink 0.5s infinite; }
.spec-tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 18px 0; }
.spec-tray .box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; }
.spec-tray .box .l { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.spec-tray .box .n { font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spec-tray .box.srv { border-color: var(--gold); box-shadow: 0 0 12px rgba(255, 209, 102, 0.3); }
.spec-feed { margin: 14px 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; max-height: 26vh; overflow: hidden; }
.spec-feed .line { font-family: var(--font-mono); font-size: 0.9rem; padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; }
.spec-feed .line:last-child { border-bottom: 0; }
.spec-feed .line .t { color: var(--muted-2); flex-shrink: 0; }
.spec-final { position: fixed; inset: 0; background: rgba(4, 6, 12, 0.92); z-index: 900; display: none; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 20px; }
.spec-final.show { display: flex; }
.spec-final h1 { font-size: clamp(2rem, 8vw, 5rem); color: var(--accent, var(--brand)); }
@media (max-width: 640px) { .spec-board { grid-template-columns: 1fr; margin: 0 10px; } .spec-tray { grid-template-columns: repeat(2, 1fr); margin: 10px; } .spec-feed { margin: 10px; } }
/* Phones stack the two sides, so the clock cannot float over the first one: give it its own row. */
@media (max-width: 640px) { .spec-board .spec-clock { position: static; transform: none; grid-column: 1 / -1; border: 0; border-radius: 0; justify-content: center; padding: 10px 16px; background: var(--surface-2, rgba(0, 0, 0, 0.5)); } }

/* ---------- Big-screen scoreboard (body.tvscreen, /matches/{slug}/tv) ---------- */
/* Same markup and renderer as the spectator board; this turns it into something readable from
   across a room: overscan-safe margins, far bigger type, no page chrome, no hover-only controls. */
body.tvscreen { background: #05070d; background-image: none; overflow: hidden; cursor: default; height: 100dvh; display: flex; flex-direction: column; }
/* The board fills whatever is left, so the dev banner (or any other strip) never pushes it off screen. */
body.tvscreen.idle { cursor: none; }
body.tvscreen .tvb { flex: 1; height: auto; min-height: 0; box-sizing: border-box; padding: 3vh 3vw; gap: 1.2vh; }
body.tvscreen .spec-top { padding: 0 0 1.2vh; font-size: clamp(0.9rem, 1.3vw, 1.5rem); gap: 16px; }
body.tvscreen .spec-top .logo { width: 28px; height: 28px; font-size: 15px; }
body.tvscreen .spec-top .badge { font-size: clamp(0.75rem, 1vw, 1.1rem); padding: 6px 14px; }
body.tvscreen.idle #fsBtn { opacity: 0; }
body.tvscreen .spec-board { margin: 0; border-radius: 26px; min-height: 0; grid-template-rows: auto 1fr; }
/* Team names are huge here, so the clock gets its own banner row instead of floating over them. */
body.tvscreen .spec-board .spec-clock { position: static; transform: none; grid-column: 1 / -1; grid-row: 1; justify-content: center; border: 0; border-radius: 0; background: var(--surface-2, rgba(0, 0, 0, 0.5)); padding: 1vh 24px; }
body.tvscreen .spec-team { grid-row: 2; }
body.tvscreen .spec-team { padding: 2vh 2vw; }
body.tvscreen .spec-team .name { font-size: clamp(1.6rem, 4.2vw, 5rem); letter-spacing: 0.04em; line-height: 1.05; }
body.tvscreen .spec-team .score { font-size: clamp(4rem, 21vh, 20rem); }
body.tvscreen .spec-team .games { font-size: clamp(1rem, 1.8vw, 2rem); padding: 8px 26px; margin-top: 1.2vh; }
body.tvscreen .spec-team .subline { font-size: clamp(0.9rem, 1.4vw, 1.6rem); }
body.tvscreen .spec-team .serve { top: 2vh; font-size: clamp(0.85rem, 1.2vw, 1.4rem); }
body.tvscreen .spec-clock { gap: 24px; }
body.tvscreen .spec-clock .period { font-size: clamp(0.9rem, 1.3vw, 1.5rem); }
body.tvscreen .spec-clock .g { font-size: clamp(2rem, 5vw, 5rem); }
body.tvscreen .spec-clock .s { font-size: clamp(1.2rem, 2.4vw, 2.6rem); }
body.tvscreen .spec-feed { flex: none; margin: 1.2vh 0 0; max-height: 22vh; padding: 10px 20px; border-radius: 18px; }
body.tvscreen .spec-feed .line { font-size: clamp(0.95rem, 1.5vw, 1.7rem); padding: 8px 0; }
body.tvscreen .spec-feed .line:nth-child(n+4) { display: none; }
body.tvscreen .spec-cards { flex: 1; min-height: 0; }
body.tvscreen .spec-standings .stand { font-size: clamp(1rem, 2vw, 2.2rem); }
body.tvscreen .spec-sheet { font-size: clamp(0.9rem, 1.4vw, 1.5rem); }
body.tvscreen .spec-final h1 { font-size: clamp(3rem, 9vw, 8rem); }
body.tvscreen .spec-reconn { font-size: clamp(0.9rem, 1.4vw, 1.5rem); }
/* A TV in portrait, or a narrow browser window: stack the sides but keep the clock on its own row. */
@media (max-width: 900px) { body.tvscreen .spec-team .score { font-size: clamp(4rem, 16vh, 14rem); } }

/* ---------- Paired TV screens (RET-37/39) ---------- */
/* The pairing card on /tv, the shell a paired screen runs, and the views it rotates through. */
.pair-card { display: flex; gap: 32px; align-items: center; max-width: 820px; padding: 32px; }
.pair-card .pair-qr svg { display: block; border-radius: 12px; }
.pair-side { flex: 1; min-width: 0; }
.pair-side h1 { margin-top: 0; }
.pair-code { font-family: var(--font-mono); margin: 12px 0; font-size: 1.1rem; }
.pair-code .l { color: var(--muted); }
.pair-code strong { letter-spacing: 0.12em; font-size: 1.5rem; }
.pair-old summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
@media (max-width: 720px) { .pair-card { flex-direction: column; text-align: center; padding: 20px; } }

body.screenshell { overflow: hidden; }
.shell { position: fixed; inset: 0; background: #05070d; }
.shell iframe { width: 100%; height: 100%; border: 0; display: block; }
.shell-tag { position: fixed; left: 2vw; bottom: 2vh; background: rgba(0, 0, 0, 0.6); color: var(--muted); padding: 6px 14px; border-radius: 999px; font-size: 0.9rem; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.shell-tag.show { opacity: 1; animation: shellfade 4s forwards; }
@keyframes shellfade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.shell-lost { position: fixed; right: 2vw; bottom: 2vh; background: var(--warn); color: #101010; font-weight: 700; padding: 8px 16px; border-radius: 999px; }

/* A single view on a screen. Everything is sized off the viewport so it reads across a room. */
.sv { height: 100dvh; display: flex; flex-direction: column; color: var(--text); }
.sv-center { align-items: center; justify-content: center; text-align: center; padding: 5vh 5vw; gap: 2vh; }
.sv-center h1 { font-size: clamp(1.8rem, 5vw, 4.5rem); margin: 0; }
.sv-center p { color: var(--muted); font-size: clamp(1rem, 2vw, 2rem); margin: 0; }
.sv-mark { font-size: clamp(3rem, 9vh, 7rem); }
.sv-shout { font-size: clamp(2rem, 7vw, 6rem); line-height: 1.15; }
.sv-qr svg { width: min(40vh, 40vw); height: auto; border-radius: 14px; }
.sv-url { font-family: var(--font-mono); }
.sv-pad { padding: 3vh 3vw; gap: 1.5vh; }
.sv-head { display: flex; align-items: baseline; gap: 16px; }
.sv-head h2 { font-size: clamp(1.4rem, 3vw, 3rem); margin: 0; }
.sv-sub { color: var(--muted); font-size: clamp(0.9rem, 1.6vw, 1.6rem); text-transform: uppercase; letter-spacing: 0.1em; }
.sv-body { flex: 1; min-height: 0; overflow: hidden; }
.sv-empty { color: var(--muted); font-size: clamp(1rem, 2vw, 2rem); }
.sv-table { width: 100%; border-collapse: collapse; font-size: clamp(0.95rem, 2vw, 2rem); }
.sv-table th { text-align: left; color: var(--muted); font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.1em; padding-bottom: 0.6vh; }
.sv-table td { padding: 0.7vh 0; border-top: 1px solid var(--line); }
.sv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5vh 1.5vw; align-content: start; }
.sv-court { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 2vh 1.5vw; text-align: center; }
.sv-court.on { border-color: var(--accent, var(--brand)); }
.sv-court .c { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: clamp(0.8rem, 1.2vw, 1.2rem); }
.sv-court .n { font-weight: 700; font-size: clamp(1rem, 1.8vw, 1.8rem); }
.sv-court .v { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 4rem); color: var(--accent, var(--brand)); }
.sv-court .free { color: var(--muted-2); font-size: clamp(1rem, 2vw, 2rem); padding: 2vh 0; }
.sv-next, .sv-result { display: flex; align-items: center; gap: 1.5vw; font-size: clamp(1rem, 2.2vw, 2.2rem); padding: 1vh 0; border-bottom: 1px solid var(--line); }
.sv-next .vs, .sv-result .s { color: var(--muted); }
.sv-next .w, .sv-result .w { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-result .w.win { font-weight: 800; }
.sv-next .court, .sv-result .court { color: var(--accent, var(--brand)); font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.08em; }
.sv-bracket { overflow: hidden; }
.sv-bracket .bracket-scroll { overflow: hidden; }

/* Pairing choices, shared by the pair page and the screens page. */
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
.choice:hover { border-color: var(--line-2); }
.choice input { margin-top: 4px; }
.choice span { display: flex; flex-direction: column; }
.choice small { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }

/* ---------- Lobby / TV ---------- */
body.lobby { background: #05070d; background-image: none; }
.lobby-wrap { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px 40px; position: relative; text-align: center; }
.lobby-accent { position: fixed; top: 0; left: 0; right: 0; height: 8px; background: var(--accent, var(--brand)); box-shadow: 0 0 30px var(--accent, var(--brand)); }
.lobby-actions { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lobby-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: center; width: min(1000px, 100%); }
.lobby-team { border: 2px solid var(--line); border-radius: 24px; padding: 44px 20px; background: var(--surface); }
.lobby-team .n { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 3.2rem); text-transform: uppercase; letter-spacing: 0.02em; }
.lobby-team .badge { margin-top: 14px; }
.lobby-vs .v { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; color: var(--accent, var(--brand)); opacity: 0.7; }
.tv-code { margin-top: 44px; background: var(--surface); border: 1px dashed var(--line-2); border-radius: 18px; padding: 18px 34px; }
.tv-code .c { font-family: var(--font-mono); font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 700; letter-spacing: 0.3em; color: var(--accent, var(--brand)); }
.tv-code .l { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; }
.waiting { margin-top: 30px; color: var(--muted-2); animation: fade 2s infinite; }
@keyframes fade { 50% { opacity: 0.35; } }
@media (max-width: 700px) { .lobby-vs { grid-template-columns: 1fr; gap: 12px; } .lobby-team { padding: 24px 16px; } .lobby-actions { position: static; margin-bottom: 20px; width: 100%; } .lobby-wrap { padding-top: 30px; } }

/* ---------- Overlay editor ---------- */
.ed-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; }
@media (max-width: 1000px) { .ed-grid { grid-template-columns: 1fr; } }
.ed-canvas-outer { background: #000; border: 2px solid var(--line-2); border-radius: 14px; overflow: hidden; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 24px 24px; position: relative; }
.ed-canvas { width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.ed-canvas-outer:fullscreen { display: flex; align-items: center; justify-content: center; background: #000; }
.ed-canvas-outer:fullscreen .ed-canvas { width: min(100vw, 177.78vh); }
.safe-zone { position: absolute; inset: 0; pointer-events: none; display: none; }
.safe-zone.on { display: block; }
.safe-zone .az { position: absolute; inset: 5%; border: 1px dashed rgba(255, 255, 255, 0.5); }
.safe-zone .tz { position: absolute; inset: 10%; border: 1px dashed rgba(255, 209, 102, 0.7); }
.safe-zone span { position: absolute; left: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; padding: 1px 5px; background: rgba(0, 0, 0, 0.6); border-radius: 3px; }
.safe-zone .az span { top: 4px; color: #fff; } .safe-zone .tz span { bottom: 4px; color: var(--gold); }
.widget-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.widget-row:last-child { border-bottom: 0; }
.widget-row .wl { flex: 1; font-size: 0.9rem; font-weight: 600; }
.widget-row input[type="range"] { width: 100px; accent-color: var(--brand); }
.tpl-list { list-style: none; padding: 0; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tpl-list a { display: flex; justify-content: space-between; padding: 10px 14px; color: var(--text-2); border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.tpl-list li:last-child a { border-bottom: 0; }
.tpl-list a.active { background: var(--brand-soft); color: #fff; }
.tpl-list a:hover { text-decoration: none; background: var(--surface-2); }
.color-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.color-row input[type="color"] { width: 100%; height: 40px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); padding: 3px; cursor: pointer; }

/* ---------- Launch page ---------- */
.launch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.launch-opt { background: var(--surface-2); border: 2px solid var(--line-2); border-radius: 14px; padding: 18px 12px; text-align: center; color: var(--text); transition: 0.15s; }
.launch-opt:hover { border-color: var(--brand); transform: translateY(-2px); text-decoration: none; }
.launch-opt .ic { font-size: 1.8rem; margin-bottom: 6px; }
.launch-opt strong { display: block; font-size: 0.92rem; }
.launch-opt span { font-size: 0.75rem; color: var(--muted); }
.launch-opt.primary { grid-column: 1 / -1; background: var(--brand-grad); border-color: transparent; color: #fff; }
.launch-opt.primary span { color: rgba(255, 255, 255, 0.85); }
.qr-box { background: #fff; padding: 12px; border-radius: 14px; display: inline-block; }
.qr-box canvas, .qr-box img { display: block; }

/* ---------- Misc ---------- */
.progress-dots { display: flex; gap: 6px; }
.progress-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.progress-dots i.on { background: var(--brand-2); }
.notif { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.notif:last-child { border-bottom: 0; }
.notif .t { color: var(--muted-2); font-size: 0.75rem; }
.bar { height: 10px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand-grad); border-radius: 999px; }
.watermark { position: fixed; bottom: 10px; right: 14px; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); font-weight: 700; pointer-events: none; }
@media print { .topnav, .tabbar, .public-nav, .toasts { display: none !important; } }

/* ---------- Quick start ---------- */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.quick { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 14px; color: var(--text); position: relative; overflow: hidden; transition: 0.15s; }
.quick::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 4px; background: var(--sport-color, var(--brand)); }
.quick:hover { transform: translateY(-2px); border-color: var(--sport-color, var(--brand)); text-decoration: none; }
.quick .ic { font-size: 1.9rem; line-height: 1; }
.quick strong { font-family: var(--font-display); font-size: 0.98rem; }
.quick span { font-size: 0.74rem; color: var(--muted); line-height: 1.35; }
.quick .go { margin-top: auto; font-size: 0.78rem; font-weight: 700; color: var(--sport-color, var(--brand-2)); }
.hero-card { background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(34,211,238,.10)); border: 1px solid rgba(124,92,255,.35); border-radius: var(--radius); padding: 22px; }


/* ---------- Marketing: pricing tours, screenshots, audiences ---------- */
.pricing-grid { align-items: stretch; }
.price-card.soon { opacity: 0.92; }
.price-card.soon .price { color: var(--text-2); }
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; color: var(--text-2); font-size: 0.95rem; }
.check-list li { padding-left: 26px; position: relative; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 800; }
.shot { margin: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { font-size: 0.78rem; color: var(--muted); padding: 8px 12px; border-top: 1px solid var(--line); }
.shot-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-content: start; align-items: start; }
.shot.phone { max-width: 300px; margin: 0 auto; border-radius: 26px; border-width: 6px; border-color: #1b2233; }
.tier-tour + .tier-tour { border-top: 1px solid var(--line); padding-top: 36px; }
.tour-grid { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 1000px) { .tour-grid { grid-template-columns: 1fr; } }
.audience { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.audience .feature h3 { font-size: 1.08rem; }
.audience .feature .who { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--brand-2); font-weight: 800; margin-bottom: 6px; }
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.why .feature { border-left: 4px solid var(--brand); }
.compare { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.compare th, .compare td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.compare td.yes { color: var(--ok); font-weight: 700; }
.compare td.no { color: var(--muted-2); }
.hero-shots { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px; align-items: end; }
.hero-shots .shot.phone { margin: 0; }
@media (max-width: 860px) { .hero-shots { grid-template-columns: 1fr; } .hero-shots .shot.phone { display: none; } }
.stat-strip { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 22px; color: var(--muted); font-size: 0.9rem; }
.stat-strip b { color: var(--text); font-family: var(--font-display); font-size: 1.3rem; display: block; }
.sport-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; line-height: 1.2; color: var(--text); margin-bottom: 4px; }
.sport-card { border-top: 4px solid var(--sport-color, var(--brand)); }
.chip.small { font-size: 0.74rem; padding: 4px 10px; }
.section h2 { font-size: clamp(1.5rem, 2.4vw + 0.6rem, 2.2rem); letter-spacing: -0.02em; }

.faq-shot { margin: 12px 0 4px; max-width: 720px; }
.faq-shot.phone { max-width: 260px; }
.faq-item .faq-shot img { border-radius: 0; }

/* ---------- Side color picker (roster step) ---------- */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; background: var(--sw); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25); transition: transform 0.1s; padding: 0; }
.swatch:hover { transform: scale(1.1); }
.swatch.active { border-color: #fff; box-shadow: 0 0 0 3px var(--brand); }
.swatch.custom { display: grid; place-items: center; background: conic-gradient(#ff5d73, #ffd166, #2ee6a6, #3b9dff, #8b5cf6, #ff5d73); color: #fff; font-size: 0.9rem; position: relative; overflow: hidden; }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.color-preview { display: flex; gap: 4px; }
.color-preview span { width: 44px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; color: #fff; font-family: var(--font-display); }

/* ---------- Poker "coming soon" cards ---------- */
.quick.soon, .sport-tile.soon, .sport-card.soon { opacity: 0.75; cursor: not-allowed; }
.quick.soon .go { color: var(--gold); }
.sport-tile.soon { border-style: dashed; }
.sport-tile.poker { grid-column: span 1; }

/* Dev-site banner (config env = dev). */
.envbar { background: #b45309; color: #fff; font-size: .8rem; text-align: center; padding: .3rem .75rem; letter-spacing: .01em; position: relative; z-index: 60 }
.envbar a { color: #fff; text-decoration: underline }

/* ---------- Tournament wizard ---------- */
.tw .steps .step { cursor: pointer; }
.format-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.format-tile { display: flex; flex-direction: column; gap: 4px; background: var(--surface-2); border: 2px solid var(--line-2); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: 0.15s; position: relative; }
.format-tile input { position: absolute; opacity: 0; pointer-events: none; }
.format-tile .ic { font-size: 1.5rem; line-height: 1; }
.format-tile strong { font-family: var(--font-display); font-size: 0.98rem; }
.format-tile span:not(.ic) { color: var(--muted); font-size: 0.8rem; }
.format-tile:hover { border-color: var(--text-2); }
.format-tile.selected { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); }
.tw-details { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--surface-2); }
.tw-details summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tw-details summary::-webkit-details-marker { display: none; }
.tw-details summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: 0.15s; }
.tw-details[open] summary::after { transform: rotate(180deg); }
.input-lg { font-size: 1.15rem; padding: 12px 14px; }
.review-list { margin: 0; display: flex; flex-direction: column; }
.review-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.review-row:last-child { border-bottom: 0; }
.review-row dt { color: var(--muted); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.review-row dd { margin: 0; font-weight: 500; }
@media (max-width: 560px) { .review-row { grid-template-columns: 1fr auto; } .review-row dt { grid-column: 1 / -1; padding-bottom: 0; } }

/* Dashboard "Quick Play w/Last Settings": compact replay rows, deliberately unlike the wizard's sport tiles. */
.replay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.replay { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--sport-color, var(--brand)); border-radius: 12px; padding: 10px 12px; color: var(--text); transition: 0.15s; min-width: 0; }
.replay:hover { border-color: var(--sport-color, var(--brand)); background: var(--surface); text-decoration: none; transform: translateY(-1px); }
.replay .ic { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.replay .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.replay strong { font-family: var(--font-display); font-size: 0.92rem; }
.replay .rules { font-size: 0.72rem; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replay .when { font-size: 0.68rem; color: var(--muted); opacity: 0.8; }
.replay .go { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--sport-color, var(--brand)) 18%, transparent); color: var(--sport-color, var(--brand-2)); font-weight: 800; font-size: 1rem; }
.replay-empty { background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 12px; padding: 14px 16px; color: var(--muted); font-size: 0.9rem; }

/* Breadcrumbs on public pages (the visible counterpart to BreadcrumbList JSON-LD). */
.crumbs { margin: 0 0 4px; font-size: 0.8rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; color: var(--muted); margin-right: 6px; opacity: 0.6; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text-2); }

/* Overlay marketing pages: live preview iframe (16:9 of the 1920x1080 stage) and numbered steps. */
.ov-preview { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #0b1020; }
.steps-list { counter-reset: s; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.steps-list li { counter-increment: s; position: relative; padding: 12px 14px 12px 46px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.steps-list li::before { content: counter(s); position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 0.78rem; display: grid; place-items: center; }

/* Try-it-now scoreboard on the public sport pages (partials/demo_board.php). */
.demo-board { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); overflow: hidden; margin-top: 14px; }
.db-rules { padding: 8px 14px; font-size: 0.76rem; color: var(--muted); border-bottom: 1px solid var(--line); text-align: center; min-height: 30px; }
.db-sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.db-side { display: flex; flex-direction: column; padding: 12px; gap: 8px; min-width: 0; }
.db-name { background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--text); font: inherit; font-weight: 700; text-align: center; padding: 5px; width: 100%; }
.db-name:hover { border-color: var(--line-2); }
.db-name:focus { border-color: var(--brand); outline: none; background: var(--surface-2); }
.db-tap { flex: 1; min-height: 150px; border: 2px solid var(--line-2); border-radius: 14px; background: var(--surface-2); color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: 0.12s; }
.db-tap:hover { border-color: var(--sport-color, var(--brand)); background: var(--surface-3); }
.db-tap:active { transform: scale(0.985); }
.db-tap:disabled { cursor: default; opacity: 0.9; }
.db-score { font-family: var(--font-display); font-size: 3.6rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.db-sub { font-size: 0.74rem; color: var(--muted); }
.db-side.serving .db-tap { border-color: var(--sport-color, var(--brand)); box-shadow: inset 0 0 0 1px var(--sport-color, var(--brand)); }
.db-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; text-align: center; }
.db-serve { font-size: 0.72rem; color: var(--muted); max-width: 120px; }
.db-head { font-size: 0.8rem; font-weight: 700; color: var(--sport-color, var(--brand-2)); }
.db-buttons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.db-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--line); }
.db-msg { font-size: 0.78rem; color: var(--muted); margin-left: auto; }
.db-msg.bad { color: var(--danger, #ff6b6b); }
.demo-board.over .db-tap { opacity: 0.7; }
.db-locked { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 0.78rem; color: var(--muted); }
.db-locked span { padding-left: 16px; position: relative; }
.db-locked span::before { content: "🔒"; position: absolute; left: 0; font-size: 0.7rem; }
.db-locked .btn { margin-left: auto; }
@media (max-width: 620px) {
  .db-sides { grid-template-columns: 1fr 1fr; }
  .db-mid { grid-column: 1 / -1; order: 3; flex-direction: row; gap: 12px; padding: 6px 0 10px; }
  .db-serve { max-width: none; }
  .db-tap { min-height: 120px; }
  .db-score { font-size: 3rem; }
}

/* Long-form reference and guide pages: a readable measure rather than the full grid width. */
.narrow-article { max-width: 720px; }
.narrow-article h2 { margin-top: 1.6em; }
.narrow-article p { line-height: 1.65; }
.narrow-article .faq-item h3 { margin-bottom: 4px; }

/* Match setup: "Start now" vs "Schedule for later" (reuses the .format-tile picker style). */
.when-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }

/* Scheduled match card (launch page, spectator page, dashboard upcoming). */
.sched-card { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.sched-when { display: flex; gap: 16px; align-items: flex-start; }
.sched-date { flex: 0 0 auto; width: 64px; border-radius: 12px; overflow: hidden; text-align: center; background: var(--surface-2); border: 1px solid var(--line-2); display: flex; flex-direction: column; }
.sched-date .mon { background: var(--brand); color: #fff; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; padding: 3px 0; letter-spacing: .06em; }
.sched-date .day { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; line-height: 1.1; padding-top: 4px; }
.sched-date .dow { font-size: 0.7rem; color: var(--muted); padding-bottom: 5px; }
.sched-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sched-info strong { font-size: 1.05rem; }
.sched-notes { color: var(--text-2); font-size: 0.9rem; background: var(--surface-2); border-radius: 10px; padding: 8px 10px; margin-top: 4px; }

/* Spectator page: when and where for a match that has not started yet. */
.spec-sched { margin: 10px 16px 0; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); }
.spec-sched.cancelled { opacity: 0.85; border-color: var(--danger, #ff6b6b); }
.spec-sched .sched-when { align-items: center; }
.spec-sched .sched-info { flex: 1; }
.sched-actions { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; }
@media (max-width: 640px) { .spec-sched .sched-when { flex-wrap: wrap; } .sched-actions { width: 100%; } }

/* Dashboard: Upcoming scheduled matches and tournaments. */
.up-list { display: flex; flex-direction: column; gap: 8px; }
.up-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.up-item .sched-date { width: 52px; }
.up-item .sched-date .day { font-size: 1.35rem; }
.up-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; color: var(--text); }
.up-main:hover { text-decoration: none; }
.up-main strong { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sport icons drawn as SVG (pickleball) sit inline with text like the emoji icons do; the global
   `svg { display: block }` reset would otherwise push them onto their own line in headings. */
svg.sport-svg { display: inline-block; }

/* RSVP (spectator page, launch page, personal RSVP page, dashboard). */
.rsvp-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.rsvp-chip { font-size: 0.78rem; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); }
.rsvp-chip.yes { border-color: rgba(22, 163, 74, .5); }
.rsvp-chip.no { border-color: rgba(185, 28, 28, .5); }
.rsvp-chip.none { color: var(--muted); }
.rsvp-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.rsvp-who { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.rsvp-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rsvp-btn { border: 2px solid var(--line-2); background: var(--surface-2); color: var(--text); border-radius: 12px; padding: 8px 14px; font-weight: 700; cursor: pointer; font: inherit; }
.rsvp-btn:hover { border-color: var(--text-2); }
.rsvp-btn.yes.on { background: #16a34a; border-color: #16a34a; color: #fff; }
.rsvp-btn.maybe.on { background: #b45309; border-color: #b45309; color: #fff; }
.rsvp-btn.no.on { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.rsvp-btn.pulse { animation: rsvpPulse 1.4s ease-in-out infinite; }
@keyframes rsvpPulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 35%, transparent); } }
.rsvp-btns.big .rsvp-btn { flex: 1 1 150px; padding: 14px 16px; font-size: 1.05rem; }
.rsvp-thanks { font-size: 1.05rem; margin-top: 0; }
.rsvp-host { display: flex; flex-direction: column; gap: 6px; }
.rsvp-host-row { display: flex; align-items: center; gap: 6px; }
.rsvp-host-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsvp-mini { width: 34px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer; opacity: .55; font: inherit; }
.rsvp-mini.on { opacity: 1; border-color: var(--text-2); background: var(--surface-3); }

.rsvp-who { white-space: nowrap; }
.rsvp-who select { max-width: 60vw; }
/* Spectator top bar on phones: the brand, sport and badge fit on one line; the game headline is on the board anyway. */
@media (max-width: 520px) { .spec-top #specInfo { display: none; } .spec-top .brand { white-space: nowrap; } }

/* Saved-for-later screen on the console (2026-09-11) */
.con-paused h2 { color: var(--text); }
.paused-rows { display: grid; gap: 6px; width: min(460px, 100%); margin: 14px auto 4px; text-align: left; }
.paused-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; font-size: 0.92rem; }
.paused-rows span { color: var(--text-2); }
.paused-note { max-width: 460px; margin: 8px auto; padding: 10px 12px; border-left: 3px solid var(--brand); background: var(--surface); text-align: left; }
.con-bar .cb .save-lock { font-size: 0.7rem; }
.saved-list .saved-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.saved-list .saved-row:last-child { border-bottom: 0; }
.saved-list .saved-row .grow { flex: 1; min-width: 0; }
.spec-paused { margin: 10px auto 0; max-width: 640px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 209, 102, 0.1); border: 1px solid rgba(255, 209, 102, 0.35); color: var(--text); text-align: center; }
/* Card tables: one seat per player, no VS divider (2026-09-11) */
.court.table-seats { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.court.table-seats .side-head { color: var(--text-2); border-color: var(--line-2); }

/* Card games console: standings, hand-entry form, score sheet (2026-09-11) */
.con-body.cards-mode { display: block; overflow-y: auto; padding: 12px; }
.cards-con { max-width: 1100px; margin: 0 auto; }
.cards-standings { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cards-standings .stand { flex: 1 1 140px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 10px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); }
.cards-standings .stand.lead { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.35); }
.cards-standings .pl { font-weight: 800; color: var(--muted); font-size: 0.8rem; }
.cards-standings .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cards-standings .tot { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; }
.cards-standings .nt { grid-column: 2 / 4; font-size: 0.74rem; color: var(--text-2); }
.cards-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 860px) { .cards-grid { grid-template-columns: 1fr; } }
.hand-form .hf-fields { display: grid; gap: 10px; margin-bottom: 10px; }
.hand-form .hf-rows { display: grid; gap: 8px; }
.hand-form .hf-row { display: grid; grid-template-columns: minmax(90px, 0.8fr) 2fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.hand-form .hf-row.side-a { box-shadow: inset 3px 0 0 var(--a); }
.hand-form .hf-row.side-b { box-shadow: inset 3px 0 0 var(--b); }
.hand-form .hf-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.hand-form .hf-cells { display: flex; gap: 10px; flex-wrap: wrap; }
.hand-form .hf-field { display: grid; gap: 4px; min-width: 0; }
.hand-form .hf-field > label { font-size: 0.72rem; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
.hand-form .hf-row .hf-field select { min-width: 96px; }
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--surface); }
.stepper button { width: 42px; min-height: 42px; border: 0; background: var(--surface-3); color: var(--text); font-size: 1.3rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stepper input { width: 64px; border: 0; background: transparent; color: var(--text); text-align: center; font-size: 1.1rem; font-weight: 700; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hf-check { margin-top: 10px; font-size: 0.86rem; font-weight: 700; padding: 8px 12px; border-radius: 10px; }
.hf-check.ok { background: rgba(52, 211, 153, 0.12); color: var(--ok); }
.hf-check.warn { background: rgba(255, 209, 102, 0.12); color: var(--gold); }
.score-sheet .sheet-scroll { overflow-x: auto; }
.score-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.score-table th { text-align: right; font-size: 0.74rem; color: var(--text-2); padding: 6px 8px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.score-table th:first-child, .score-table td.n { text-align: left; color: var(--muted); width: 32px; }
.score-table td { text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.score-table td b { display: block; font-size: 1rem; }
.score-table td small { color: var(--text-2); font-size: 0.72rem; }
.score-table tr.note-row td { text-align: left; font-size: 0.74rem; color: var(--text-2); padding-top: 0; }
.score-table tr.editing td { background: rgba(124, 92, 255, 0.14); }
.score-table tr:hover td { background: var(--surface-2); }
/* Card games on the spectator / TV page */
.spec-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 16px; align-items: start; }
@media (max-width: 860px) { .spec-cards { grid-template-columns: 1fr; } }
.spec-standings { display: grid; gap: 10px; }
.spec-standings .stand { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 14px; padding: 14px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); }
.spec-standings .stand.lead { border-color: var(--gold); }
.spec-standings .pl { color: var(--muted); font-weight: 800; }
.spec-standings .nm { font-size: clamp(1.1rem, 2.6vw, 1.8rem); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spec-standings .tot { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 6vw, 3.6rem); }
.spec-standings .nt { grid-column: 2 / 4; color: var(--text-2); font-size: 0.9rem; }
.spec-sheet { background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; padding: 12px; overflow-x: auto; }
.lobby-vs.lobby-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

/* Offline scoring status on the console */
.net-pill { font-size: 0.74rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.net-pill.offline { background: rgba(255, 209, 102, 0.16); color: var(--gold); }
.net-pill.syncing { background: rgba(124, 92, 255, 0.18); color: var(--text); }

.spec-reconn { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); background: rgba(255, 209, 102, 0.95); color: #1b1300; font-weight: 700; padding: 8px 16px; border-radius: 999px; z-index: 990; font-size: 0.86rem; }

/* ---------- Feedback panel (partials/feedback.php, js/feedback.js) ---------- */
.fb-launch { position: fixed; right: 18px; bottom: calc(18px + var(--safe-b)); z-index: 70; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px 10px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(27, 36, 56, 0.92); backdrop-filter: blur(10px); color: var(--text-2); font: 700 0.86rem var(--font); cursor: pointer; box-shadow: var(--shadow-sm); transition: 0.15s; -webkit-tap-highlight-color: transparent; }
.fb-launch:hover { color: var(--text); border-color: var(--brand); transform: translateY(-1px); }
.fb-launch .fb-ic { font-size: 1.05rem; line-height: 1; }
html.fb-open { overflow: hidden; }
.fb-overlay[hidden], .fb-overlay [hidden] { display: none !important; }
.fb-overlay { position: fixed; inset: 0; z-index: 950; background: rgba(4, 6, 12, 0.66); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.fb-sheet { width: 100%; max-width: 480px; max-height: min(92vh, 760px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px; padding: 16px 20px 22px; box-shadow: var(--shadow); animation: sheet-in 0.2s ease; overscroll-behavior: contain; }
.fb-top { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; position: sticky; top: -16px; background: var(--surface); padding: 6px 0; z-index: 1; }
.fb-top h2 { font-size: 1.15rem; margin: 0; flex: 1; }
.fb-back, .fb-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); font-size: 1rem; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.fb-back:hover, .fb-x:hover { color: var(--text); border-color: var(--text-2); }
.fb-lead { margin-bottom: 12px; }
.fb-choice { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; margin: 0 0 10px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; transition: 0.15s; }
.fb-choice:hover, .fb-choice:focus-visible { border-color: var(--brand); background: var(--brand-soft); }
.fb-choice strong { display: block; font-size: 1rem; }
.fb-choice small { display: block; color: var(--muted); font-size: 0.85rem; }
.fb-cic { font-size: 1.6rem; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-2); display: grid; place-items: center; flex-shrink: 0; }
.fb-foot { margin: 14px 0 0; text-align: center; }
.fb-step .fb-l { display: block; font-weight: 700; font-size: 0.9rem; color: var(--text-2); margin: 14px 0 6px; }
.fb-step .fb-l:first-child { margin-top: 0; }
.fb-step .chip-row { margin-bottom: 4px; }
.fb-shot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; }
.fb-shot label.btn { cursor: pointer; }
.fb-thumb { position: relative; width: 100%; }
.fb-thumb img { max-height: 160px; border-radius: 10px; border: 1px solid var(--line-2); display: block; }
.fb-rm { position: absolute; top: 6px; left: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.7); color: #fff; cursor: pointer; }
.fb-ctx { margin: 14px 0; font-size: 0.82rem; color: var(--muted); }
.fb-ctx summary { cursor: pointer; }
.fb-ctx pre { white-space: pre-wrap; word-break: break-word; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: 0.76rem/1.5 var(--font-mono); color: var(--text-2); max-height: 180px; overflow: auto; margin: 8px 0 0; }
.fb-step button[type=submit] { margin-top: 18px; }
.fb-similar { margin: 8px 0 0; padding: 10px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.fb-similar p { margin: 0 0 6px; }
.fb-sim { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); color: var(--text); }
.fb-sim:first-of-type, .fb-similar p + .fb-sim { border-top: 0; }
.fb-sim.have { color: var(--ok); text-decoration: none; }
.fb-sim .btn { flex-shrink: 0; }
.fb-done { text-align: center; padding: 10px 0 4px; }
.fb-big { font-size: 3rem; line-height: 1; margin: 6px 0 12px; }
[data-vote].voted { border-color: var(--brand); color: var(--brand-2); }
@media (max-width: 900px) {
  .fb-launch.in-app { bottom: calc(86px + var(--safe-b)); }
}
@media (max-width: 640px) {
  .fb-launch { padding: 0; width: 46px; height: 46px; justify-content: center; right: 12px; opacity: 0.9; }
  .fb-launch .fb-lbl { display: none; }
  .fb-overlay { align-items: flex-end; padding: 0; }
  .fb-sheet { max-width: none; max-height: 94vh; border-radius: 22px 22px 0 0; padding: 14px 16px calc(20px + var(--safe-b)); border-bottom: 0; }
}
@media print { .fb-launch, .fb-overlay { display: none !important; } }

/* Feedback board (/feedback) */
.fb-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.fb-tabs a { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.fb-tabs a.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.fb-tabs .n { opacity: 0.7; font-weight: 600; margin-left: 4px; }
.fb-cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0 0 22px; }
.fb-cta .fb-choice { margin: 0; }
.fb-list { display: flex; flex-direction: column; gap: 10px; }
.fb-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.fb-votebtn { display: flex; flex-direction: column; align-items: center; min-width: 56px; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); font: 700 0.8rem var(--font); cursor: pointer; flex-shrink: 0; }
.fb-votebtn [data-votes] { font-size: 1.15rem; color: var(--text); font-family: var(--font-display); }
.fb-votebtn:disabled { cursor: default; }
.fb-votebtn.voted, .fb-votebtn:disabled { border-color: var(--brand); background: var(--brand-soft); }
.fb-item h3 { font-size: 1rem; margin: 0 0 4px; }
.fb-item p { margin: 0 0 6px; color: var(--text-2); font-size: 0.92rem; white-space: pre-line; }
.fb-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 0.8rem; color: var(--muted); }
.fb-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--surface-3); color: var(--text-2); }
.fb-status.planned { background: var(--brand-soft); color: #b7a6ff; }
.fb-status.in_progress { background: var(--warn-soft); color: var(--warn); }
.fb-status.done { background: var(--ok-soft); color: var(--ok); }
.fb-status.declined, .fb-status.duplicate { background: var(--danger-soft); color: #ff9a9a; }

/* Legal pages (/terms, /privacy) */
.legal h2 { font-size: 1.12rem; margin: 26px 0 8px; }
.legal h2:first-child { margin-top: 4px; }
.legal p, .legal li { color: var(--text-2); line-height: 1.65; }
.legal ul { padding-left: 20px; }
.legal li { margin: 6px 0; }
/* Launch offer banner and the new-site welcome card */
.launch-offer { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 209, 102, 0.45); background: linear-gradient(135deg, rgba(255, 209, 102, 0.14), rgba(124, 92, 255, 0.12)); }
.launch-offer .lo-ic { font-size: 1.5rem; line-height: 1; }
.launch-offer strong { display: block; margin-bottom: 2px; }
.launch-offer span { color: var(--text-2); font-size: 0.93rem; }
.launch-line { color: var(--gold, #ffd166); font-weight: 600; margin-top: 4px; }
.new-site { position: relative; border-color: rgba(34, 211, 238, 0.45); background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(124, 92, 255, 0.08)); }
.new-site h3 { padding-right: 28px; }
.new-site-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--muted); font-size: 1rem; cursor: pointer; }
.linkish { background: none; border: 0; padding: 0; color: var(--brand-2); font: inherit; cursor: pointer; text-decoration: underline; }
.hero h1.long { font-size: clamp(2rem, 2.4vw + 1.1rem, 3.3rem); line-height: 1.08; }

/* Pricing cards: each plan gets its own tint so the three read as separate cards */
#plan-free.price-card { background: linear-gradient(180deg, rgba(46, 230, 166, 0.07), rgba(46, 230, 166, 0.015) 55%), var(--surface); border-color: rgba(46, 230, 166, 0.22); }
#plan-pro.price-card { background: linear-gradient(180deg, rgba(124, 92, 255, 0.16), rgba(59, 157, 255, 0.04) 55%), var(--surface); border-color: rgba(124, 92, 255, 0.38); }
#plan-premium.price-card { background: linear-gradient(180deg, rgba(255, 209, 102, 0.13), rgba(255, 209, 102, 0.025) 55%), var(--surface); border-color: rgba(255, 209, 102, 0.34); }
#plan-free.price-card.current, #plan-pro.price-card.current, #plan-premium.price-card.current { border-color: var(--brand); }

/* Lifetime head-to-head (history page) and the homepage "every match saved" showcase */
.h2h-card { border-color: rgba(124, 92, 255, 0.4); background: linear-gradient(135deg, rgba(124, 92, 255, 0.12), rgba(34, 211, 238, 0.06)), var(--surface); }
.h2h-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.h2h-rec { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; display: flex; align-items: baseline; gap: 6px; }
.h2h-rec .w { color: var(--ok); } .h2h-rec .l { color: var(--text-2); } .h2h-rec .dash { color: var(--muted); } .h2h-rec .d { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.h2h-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.h2h-chip { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 12px; font-size: 0.86rem; color: var(--text-2); }
.h2h-chip strong { color: var(--text); margin-left: 4px; }
.saved-show { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; }
@media (max-width: 860px) { .saved-show { grid-template-columns: 1fr; } }
.saved-demo { border-radius: var(--radius); padding: 20px; border: 1px solid rgba(124, 92, 255, 0.4); background: linear-gradient(160deg, rgba(124, 92, 255, 0.16), rgba(34, 211, 238, 0.05)), var(--surface); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.saved-demo .row-h2h { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.saved-demo .row-h2h:last-child { border-bottom: 0; }
.saved-demo .nm { font-weight: 700; } .saved-demo .sub { font-size: 0.82rem; color: var(--muted); }
.saved-demo .rec { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; }
.saved-demo .rec .w { color: var(--ok); } .saved-demo .rec .l { color: var(--text-2); }
.saved-demo .demo-tag { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
/* "Get the app" prompt for phones signing in outside the app (partials/app_nudge.php, /app) */
.app-nudge { position: relative; border-color: rgba(124, 92, 255, 0.5); background: linear-gradient(135deg, rgba(124, 92, 255, 0.12), rgba(34, 211, 238, 0.08)); }
.app-nudge h3 { padding-right: 28px; font-size: 1.05rem; }
.app-nudge-body { display: flex; gap: 14px; align-items: flex-start; }
.app-nudge-icon { border-radius: 12px; flex: none; box-shadow: 0 4px 14px rgba(124, 92, 255, 0.35); }
.app-nudge-bell { width: 52px; height: 52px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 1.6rem; background: var(--brand-grad); box-shadow: 0 4px 14px rgba(124, 92, 255, 0.35); }