:root {
  --brand: #1d4ed8;
  --brand-hover: #1e40af;
  --brand-text: #ffffff;
  --brand-dark: #93c5fd;
  --brand-dark-hover: #bfdbfe;
  --brand-dark-text: #10204a;
  --action-light: var(--brand);
  --action-light-hover: var(--brand-hover);
  --action-light-text: var(--brand-text);
  --action-dark: var(--brand-dark);
  --action-dark-hover: var(--brand-dark-hover);
  --action-dark-text: var(--brand-dark-text);
  --accent-light: #dbeafe;
  --accent-dark: #172554;
  --bg: #f5f3ed;
  --surface: #ffffff;
  --surface-alt: #ebe8df;
  --text: #172033;
  --muted: #526078;
  --border: #c7ccd4;
  --primary: var(--brand);
  --primary-hover: var(--brand-hover);
  --primary-text: var(--brand-text);
  --accent-soft: var(--accent-light);
  --action: var(--action-light);
  --action-hover: var(--action-light-hover);
  --action-text: var(--action-light-text);
  --focus: #005fcc;
  --success: #166534;
  --success-soft: #dcfce7;
  --error: #b91c1c;
  --error-soft: #fef2f2;
  --shadow: 0 18px 50px rgba(23, 32, 51, .09);
  --radius: 14px;
  --max: 1180px;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
[data-theme="okstate"] {
  --brand:#9a3412; --brand-hover:#7c2d12; --brand-text:#ffffff;
  --brand-dark:#ff9b4a; --brand-dark-hover:#ffc08a; --brand-dark-text:#261000;
  --action-light:#ff7300; --action-light-hover:#e36100; --action-light-text:#171717;
  --accent-light:#fff0e3; --accent-dark:#3b1b08;
}
[data-theme="ou"] {
  --brand:#841617; --brand-hover:#651113; --brand-text:#ffffff;
  --brand-dark:#ff9da9; --brand-dark-hover:#ffc0c7; --brand-dark-text:#3b080d;
  --accent-light:#fdf9d8; --accent-dark:#3a1116;
}
[data-theme="dallas"] {
  --brand:#041e42; --brand-hover:#003594; --brand-text:#ffffff;
  --brand-dark:#9cc3ff; --brand-dark-hover:#c5dbff; --brand-dark-text:#061a36;
  --accent-light:#e8edf3; --accent-dark:#17283d;
}
[data-appearance="dark"] {
  --bg:#0b1220; --surface:#121c2d; --surface-alt:#1b293e; --text:#f8fafc; --muted:#b5c1d3;
  --border:#40516b; --primary:var(--brand-dark); --primary-hover:var(--brand-dark-hover); --primary-text:var(--brand-dark-text);
  --action:var(--action-dark); --action-hover:var(--action-dark-hover); --action-text:var(--action-dark-text);
  --accent-soft:var(--accent-dark); --focus:#facc15; --success:#86efac; --success-soft:#143c25;
  --error:#fca5a5; --error-soft:#450a0a; --shadow:0 18px 55px rgba(0,0,0,.3); color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
  [data-appearance="system"] {
    --bg:#0b1220; --surface:#121c2d; --surface-alt:#1b293e; --text:#f8fafc; --muted:#b5c1d3;
    --border:#40516b; --primary:var(--brand-dark); --primary-hover:var(--brand-dark-hover); --primary-text:var(--brand-dark-text);
    --action:var(--action-dark); --action-hover:var(--action-dark-hover); --action-text:var(--action-dark-text);
    --accent-soft:var(--accent-dark); --focus:#facc15; --success:#86efac; --success-soft:#143c25;
    --error:#fca5a5; --error-soft:#450a0a; --shadow:0 18px 55px rgba(0,0,0,.3); color-scheme:dark;
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; min-height:100vh; color:var(--text); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0 0 auto; height:32rem; pointer-events:none; z-index:-1; background:radial-gradient(circle at 82% 0, color-mix(in srgb,var(--primary) 12%,transparent), transparent 34rem); }
a { color:var(--primary); text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { touch-action:manipulation; }
:is(a,button,input,select,textarea):focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.skip-link { position:fixed; left:-999px; top:1rem; z-index:100; padding:.65rem 1rem; background:var(--surface); color:var(--text); border:2px solid var(--focus); border-radius:8px; font-weight:800; }
.skip-link:focus { left:1rem; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.topbar { position:sticky; top:0; z-index:20; border-bottom:1px solid color-mix(in srgb,var(--border) 80%,transparent); background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(14px); }
.topbar-inner { width:min(var(--max),calc(100% - 2rem)); height:74px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; }
.brand { display:inline-flex; align-items:center; gap:.7rem; color:var(--text); font-weight:900; letter-spacing:-.035em; font-size:1.14rem; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--action); color:var(--action-text); font-weight:950; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.topbar nav { display:flex; align-items:center; gap:1.1rem; }
.topbar nav a,.text-button { color:var(--text); font-weight:720; text-decoration:none; }
.topbar nav a:hover,.text-button:hover { text-decoration:underline; }
.topbar nav form { display:inline-flex; }
.text-button { border:0; background:none; cursor:pointer; padding:.55rem .2rem; min-height:44px; }
.display-name { color:var(--muted); border-left:1px solid var(--border); padding-left:1rem; }
main { width:min(var(--max),calc(100% - 2rem)); margin:auto; min-height:calc(100vh - 210px); padding:clamp(2rem,5vw,4.5rem) 0; }
.button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.72rem 1.05rem; border:2px solid var(--action); border-radius:10px; background:var(--action); color:var(--action-text); font-weight:850; text-decoration:none; cursor:pointer; }
.button:hover { background:var(--action-hover); border-color:var(--action-hover); text-decoration:none; }
.button:disabled { opacity:.55; cursor:not-allowed; }
.button-secondary,.button-ghost { background:transparent; color:var(--text); border-color:var(--border); }
.button-secondary:hover,.button-ghost:hover { background:var(--surface-alt); border-color:var(--text); }
.button-small { min-height:40px; padding:.45rem .8rem; }
.button-block { width:100%; }
.eyebrow { margin:0 0 .6rem; color:var(--primary); font-size:.75rem; font-weight:900; letter-spacing:.16em; }
.site-footer { width:min(var(--max),calc(100% - 2rem)); margin:4rem auto 0; padding:2rem 0; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:end; gap:2rem; color:var(--muted); font-size:.9rem; }
.site-footer p { margin:.4rem 0 0; }
.site-footer>p { max-width:360px; text-align:right; }
.messages { margin-bottom:1rem; }
.message,.form-alert { padding:.85rem 1rem; border:1px solid var(--border); border-left:5px solid var(--primary); border-radius:9px; background:var(--surface); }
.message.error,.form-alert { color:var(--error); background:var(--error-soft); border-color:var(--error); }

/* Public home */
.home-hero { min-height:620px; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,8vw,7rem); align-items:center; }
.home-hero h1 { max-width:760px; margin:.3rem 0 1.4rem; font-size:clamp(3rem,7.5vw,6.4rem); line-height:.91; letter-spacing:-.075em; }
.home-hero h1 span { color:var(--primary); }
.hero-copy { max-width:650px; margin:0; color:var(--muted); font-size:clamp(1.05rem,2vw,1.25rem); line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.trust-list { display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; margin:1.8rem 0 0; padding:0; color:var(--muted); list-style:none; font-size:.9rem; font-weight:700; }
.trust-list li::before { content:"✓"; color:var(--success); margin-right:.45rem; font-weight:950; }
.week-preview { border:1px solid var(--border); border-radius:22px; background:var(--surface); box-shadow:var(--shadow); padding:1.5rem; transform:rotate(1deg); }
.preview-top,.preview-footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.preview-top strong,.preview-top span { display:block; }
.preview-label { color:var(--muted); font-size:.72rem; font-weight:900; letter-spacing:.12em; }
.status-badge { display:inline-flex!important; align-items:center; gap:.35rem; width:max-content; padding:.28rem .58rem; border:1px solid color-mix(in srgb,var(--success) 45%,var(--border)); border-radius:999px; color:var(--success); background:var(--success-soft); font-size:.75rem; font-weight:850; }
.preview-progress { margin:1.4rem 0; padding:1.1rem; border-radius:12px; background:var(--surface-alt); }
.preview-progress>div:first-child { display:flex; justify-content:space-between; }
.preview-progress span { color:var(--muted); }
.progress { height:8px; margin-top:.8rem; overflow:hidden; border-radius:99px; background:var(--border); }
.progress span { display:block; height:100%; background:var(--action); }
.preview-game { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:.65rem; padding:.9rem 1rem; border:1px solid var(--border); border-radius:11px; }
.preview-game span,.preview-game small { display:block; }
.preview-game small { margin-bottom:.2rem; color:var(--muted); font-size:.65rem; font-weight:850; letter-spacing:.08em; }
.mandatory-line { border-left:5px solid var(--primary); }
.preview-game strong span { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:99px; background:var(--action); color:var(--action-text); font-size:.75rem; }
.preview-footer { margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--border); font-size:.86rem; }
.preview-footer span { color:var(--muted); }
.join-band { margin:2rem 0 6rem; padding:clamp(1.5rem,4vw,2.5rem); display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:1rem 4rem; border:1px solid color-mix(in srgb,var(--primary) 40%,var(--border)); border-radius:18px; background:var(--accent-soft); }
.join-band h2,.section-intro h2,.final-cta h2 { margin:.15rem 0 .5rem; font-size:clamp(2rem,4vw,3.2rem); line-height:1.05; letter-spacing:-.05em; }
.join-band p { margin:.4rem 0; color:var(--muted); }
.code-form { display:grid; grid-template-columns:1fr auto; align-items:end; gap:.75rem; }
.code-form .field-wrap { margin:0; }
.join-login { grid-column:2; font-size:.9rem; }
.content-section { padding:clamp(3rem,7vw,6rem) 0; border-top:1px solid var(--border); }
.section-intro { max-width:760px; margin-bottom:2.5rem; }
.section-intro>p:last-child { color:var(--muted); font-size:1.06rem; }
.step-grid,.pool-grid { margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; list-style:none; }
.step-grid li,.pool-grid article { min-height:230px; padding:1.4rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.step-grid li>span,.pool-grid article>span { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:99px; background:var(--accent-soft); color:var(--primary); font-size:.76rem; font-weight:900; }
.step-grid h3,.pool-grid h3,.rule-list h3 { margin:1.5rem 0 .55rem; font-size:1.15rem; line-height:1.2; }
.step-grid p,.pool-grid p,.rule-list p { margin:0; color:var(--muted); }
.rules-layout { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.rule-score { position:sticky; top:100px; padding:2rem; border-radius:18px; background:var(--text); color:var(--bg); text-align:center; box-shadow:var(--shadow); }
.rule-score>p { margin:0; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:900; }
.rule-score>strong { display:block; margin:.7rem 0 -.3rem; color:var(--primary); font-size:7rem; line-height:1; }
.rule-score>span { display:block; margin-bottom:1.6rem; }
.rule-score>div { display:flex; justify-content:space-between; padding:.85rem 0; border-top:1px solid color-mix(in srgb,var(--bg) 25%,transparent); }
.rule-list { display:grid; }
.rule-list article { display:grid; grid-template-columns:auto 1fr; gap:1.2rem; padding:1.4rem 0; border-bottom:1px solid var(--border); }
.rule-list article>span { color:var(--primary); font-weight:900; }
.rule-list h3 { margin:0 0 .4rem; }
.pool-section { margin:0 calc(50% - 50vw); padding:clamp(3rem,7vw,6rem) max(1rem,calc((100vw - var(--max))/2)); background:var(--text); color:var(--bg); }
.pool-section .section-intro>p:last-child,.pool-section .pool-grid p { color:color-mix(in srgb,var(--bg) 76%,transparent); }
.pool-section .pool-grid article { border-color:color-mix(in srgb,var(--bg) 25%,transparent); background:color-mix(in srgb,var(--bg) 6%,transparent); }
.final-cta { margin:5rem 0 1rem; padding:clamp(2rem,5vw,4rem); display:flex; justify-content:space-between; align-items:center; gap:2rem; border-radius:20px; background:var(--surface); border:1px solid var(--border); }

/* Forms and authentication */
.auth-page main { width:min(1100px,calc(100% - 2rem)); }
.auth-layout { min-height:650px; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--border); border-radius:22px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }
.auth-story { padding:clamp(2rem,6vw,5rem); display:flex; flex-direction:column; justify-content:center; background:var(--text); color:var(--bg); }
.auth-story .eyebrow { color:var(--primary); }
.auth-story h1 { margin:.2rem 0 1.2rem; font-size:clamp(3rem,6vw,5rem); line-height:.93; letter-spacing:-.07em; }
.auth-story>p { color:color-mix(in srgb,var(--bg) 75%,transparent); font-size:1.1rem; }
.auth-back { position:absolute; align-self:flex-start; top:calc(74px + 4rem); color:var(--bg); font-weight:750; }
.auth-quote { margin-top:4rem; padding-top:1.5rem; border-top:1px solid color-mix(in srgb,var(--bg) 22%,transparent); }
.quote-mark { color:var(--primary); font-size:3rem; line-height:.5; }
.auth-quote blockquote { margin:.8rem 0; font-size:1.12rem; font-weight:700; }
.auth-quote cite { color:color-mix(in srgb,var(--bg) 65%,transparent); font-size:.85rem; }
.auth-panel { padding:clamp(2rem,6vw,5rem); display:flex; flex-direction:column; justify-content:center; }
.auth-panel-head { display:flex; gap:1rem; align-items:center; margin-bottom:2rem; }
.auth-panel-head h2 { margin:0; font-size:1.6rem; letter-spacing:-.035em; }
.auth-panel-head p { margin:.2rem 0 0; color:var(--muted); }
.auth-form { display:grid; gap:1.25rem; }
.field-wrap { margin:.8rem 0; }
.field-wrap label { display:block; margin-bottom:.42rem; color:var(--text); font-weight:820; }
.field-wrap label span { margin-left:.35rem; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.field-wrap input,.field-wrap select,.auth-form input,.signup-form input,.signup-form select { width:100%; min-height:48px; padding:.72rem .8rem; border:1px solid var(--border); border-radius:9px; background:var(--bg); color:var(--text); }
.field-wrap small { display:block; margin-top:.35rem; color:var(--muted); }
.label-row { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.label-row a { font-size:.86rem; font-weight:750; }
.errorlist { margin:.45rem 0 0; padding-left:1.2rem; color:var(--error); }
.field-error .errorlist { margin:.4rem 0 0; }
.auth-alt { margin:1.5rem 0 0; text-align:center; color:var(--muted); }
.signup-shell { max-width:900px; margin:auto; }
.signup-heading { max-width:720px; }
.signup-heading h1 { margin:.2rem 0 .6rem; font-size:clamp(2.5rem,6vw,4.6rem); line-height:.95; letter-spacing:-.065em; }
.signup-heading>p:last-child { color:var(--muted); }
.league-confirmed { margin:2rem 0 1rem; display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border:1px solid color-mix(in srgb,var(--success) 45%,var(--border)); border-radius:12px; background:var(--success-soft); }
.league-confirmed>span { display:grid; place-items:center; width:34px; height:34px; border-radius:99px; background:var(--success); color:var(--surface); font-weight:900; }
.league-confirmed div { flex:1; }
.league-confirmed small,.league-confirmed strong { display:block; }
.league-confirmed small { color:var(--success); font-size:.68rem; font-weight:900; letter-spacing:.12em; }
.signup-form { padding:clamp(1.3rem,4vw,2.2rem); border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }
.signup-form fieldset { margin:0; padding:1.5rem 0; border:0; border-bottom:1px solid var(--border); }
.signup-form legend { font-size:1.08rem; font-weight:900; }
.form-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.form-grid.two { grid-template-columns:1fr 1fr; }
.password-help { color:var(--muted); font-size:.82rem; }
.password-help ul { margin:.4rem 0 0; padding-left:1.2rem; }
.signup-submit { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding-top:1.5rem; }
.signup-submit p { max-width:480px; color:var(--muted); font-size:.86rem; }

/* Participant and management application */
.management-head,.dashboard-head { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:1.5rem; }
.management-head h1,.dashboard-head h1,.empty-state h1 { margin:.1rem 0 .5rem; font-size:clamp(2.5rem,6vw,4.5rem); line-height:.95; letter-spacing:-.06em; }
.management-head p,.empty-state p { color:var(--muted); }
.management-nav { display:flex; gap:.35rem; margin-bottom:1.5rem; overflow:auto; padding:.45rem; border:1px solid var(--border); border-radius:11px; background:var(--surface); }
.management-nav a { min-height:40px; padding:.5rem .75rem; display:inline-flex; align-items:center; white-space:nowrap; border-radius:7px; color:var(--muted); font-weight:750; text-decoration:none; }
.management-nav a.active,.management-nav a:hover { background:var(--surface-alt); color:var(--text); }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.metric-grid article,.management-card,.game-card,.empty-state { padding:1.3rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:0 5px 20px rgba(23,32,51,.04); }
.metric-grid span,.metric-grid small { display:block; color:var(--muted); }
.metric-grid strong { display:block; margin:.3rem 0; font-size:2.2rem; line-height:1; }
.management-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.management-card.full { grid-column:1/-1; }
.card-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1rem; }
.card-heading h2 { margin:0; font-size:1.35rem; }
.card-heading a { font-size:.86rem; font-weight:800; }
.record-list { display:grid; gap:.65rem; }
.record-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem; border:1px solid var(--border); border-radius:10px; }
.record-row strong,.record-row span { display:block; }
.record-row div span,.record-row>span { color:var(--muted); font-size:.82rem; }
.empty-mini { padding:2rem; display:grid; text-align:center; color:var(--muted); }
.pool-table { overflow:auto; }
table { width:100%; border-collapse:collapse; white-space:nowrap; }
th,td { padding:.8rem; border-bottom:1px solid var(--border); text-align:left; }
th { color:var(--muted); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.table-status { padding:.25rem .5rem; border-radius:99px; background:var(--surface-alt); font-size:.75rem; font-weight:800; }
.record-link { color:var(--text); text-decoration:none; }
.record-link:hover { border-color:var(--primary); background:var(--surface-alt); text-decoration:none; }
.form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; }
.form-actions form { display:inline-flex; }
.manage-form-shell { max-width:900px; margin:auto; }
.manage-form select,.manage-form input,.manage-form textarea,.inline-management-form select,.inline-management-form input,.inline-management-form textarea,.sync-form input,.sync-form select { width:100%; min-height:46px; padding:.7rem .8rem; border:1px solid var(--border); border-radius:9px; background:var(--bg); color:var(--text); }
.manage-form input[type="checkbox"],.inline-management-form input[type="checkbox"],table input[type="checkbox"] { width:24px; min-height:24px; accent-color:var(--primary); }
.checkbox-form>div { display:flex; align-items:center; gap:.7rem; margin:.7rem 0; }
.checkbox-form label { order:2; }
.pagination { display:flex; justify-content:center; align-items:center; gap:1rem; padding:1rem; }
.checkbox-wrap input { width:24px; min-height:24px; }
.inline-management-form { margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--border); }
.inline-management-form>div { margin:.7rem 0; }
.inline-management-form label { display:block; margin-bottom:.35rem; font-weight:800; }
.section-space { margin-top:1rem; }
.compact-records { max-height:620px; overflow:auto; }
.metric-code { font-size:clamp(1.2rem,3vw,2rem)!important; overflow-wrap:anywhere; }
.metric-word { font-size:1.6rem!important; }
.sync-form { display:grid; grid-template-columns:180px 1fr; gap:1rem; align-items:end; }
.sync-actions { display:flex; flex-wrap:wrap; gap:.6rem; padding-bottom:.8rem; }
.pool-switcher { display:flex; gap:.4rem; overflow:auto; margin-bottom:1.5rem; }
.pool-switcher a { white-space:nowrap; padding:.55rem .8rem; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:.85rem; font-weight:750; text-decoration:none; }
.pool-switcher a.active { background:var(--action); border-color:var(--action); color:var(--action-text); }
.completion { text-align:right; }
.completion strong { display:block; font-size:2rem; }
.completion span { color:var(--muted); }
.sticky-summary { position:sticky; top:84px; z-index:8; display:flex; gap:1.25rem; margin-bottom:2.5rem; padding:.8rem 1rem; border-radius:10px; background:var(--action); color:var(--action-text); font-weight:850; box-shadow:var(--shadow); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1rem; }
.section-heading h2 { margin:0; font-size:2rem; }
.section-heading input { width:330px; min-height:46px; padding:.7rem .8rem; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text); }
.game-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.game-card.mandatory { border-left:5px solid var(--primary); }
.game-card.locked { opacity:.72; }
.game-card header { display:flex; justify-content:space-between; gap:.5rem; color:var(--muted); font-size:.72rem; letter-spacing:.05em; }
.game-card header b { color:var(--primary); }
.matchup { display:grid; grid-template-columns:1fr auto 1fr; gap:.6rem; align-items:stretch; margin-top:1rem; }
.matchup form { display:flex; }
.team-choice { width:100%; min-height:84px; display:flex; flex-direction:column; justify-content:center; gap:.35rem; padding:.75rem; border:2px solid var(--border); border-radius:10px; background:var(--surface-alt); color:var(--text); cursor:pointer; }
.team-choice:hover:not(:disabled) { border-color:var(--primary); }
.team-choice.selected { background:var(--action); border-color:var(--action); color:var(--action-text); }
.team-choice strong { font-size:1.25rem; }
.at { align-self:center; color:var(--muted); font-size:.68rem; font-weight:900; }
.empty-state { width:min(680px,100%); margin:3rem auto; }
.stat-line { padding-top:1rem; border-top:1px solid var(--border); }
.stat-line strong { float:right; }

/* Low-bandwidth watch view */
.watch-head { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:1.4rem; }
.watch-head h1 { margin:.1rem 0 .5rem; font-size:clamp(2.5rem,6vw,4.5rem); line-height:.95; letter-spacing:-.06em; }
.watch-head p { max-width:680px; color:var(--muted); }
.watch-connection { min-width:190px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.1rem .5rem; padding:.75rem .9rem; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.watch-connection>span { width:10px; height:10px; border-radius:50%; background:var(--error); }
.watch-connection>span.online { background:var(--success); }
.watch-connection small { grid-column:2; color:var(--muted); }
.watch-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-bottom:1rem; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--border); }
.watch-summary div { min-width:0; padding:.8rem 1rem; background:var(--surface); }
.watch-summary span,.watch-summary strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.watch-summary span { color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.watch-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.watch-card { overflow:hidden; border:1px solid var(--border); border-left:5px solid var(--border); border-radius:12px; background:var(--surface); }
.watch-card.state-ahead,.watch-card.state-win { border-left-color:var(--success); }
.watch-card.state-behind,.watch-card.state-loss,.watch-card.state-missed { border-left-color:var(--error); }
.watch-card.state-push { border-left-color:var(--primary); }
.watch-card header,.watch-card footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.65rem .85rem; }
.watch-card header { border-bottom:1px solid var(--border); color:var(--muted); font-size:.75rem; }
.watch-card header strong { color:var(--text); }
.watch-card footer { border-top:1px solid var(--border); color:var(--muted); font-size:.8rem; }
.watch-score { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.75rem; padding:1rem; text-align:center; }
.watch-score div { display:grid; gap:.3rem; }
.watch-score span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800; }
.watch-score strong { font-size:2.2rem; line-height:1; }
.watch-score small { color:var(--muted); font-weight:900; }

@media (max-width: 850px) {
  .topbar-inner { height:auto; min-height:70px; padding:.7rem 0; align-items:flex-start; }
  .topbar nav { justify-content:flex-end; flex-wrap:wrap; gap:.6rem .85rem; }
  .topbar nav>a:not(.button):not(.nav-login):not(.nav-watch),.display-name { display:none; }
  .home-hero,.auth-layout,.join-band,.rules-layout { grid-template-columns:1fr; }
  .home-hero { padding:2.5rem 0 4rem; min-height:0; }
  .week-preview { transform:none; }
  .join-login { grid-column:auto; }
  .step-grid { grid-template-columns:1fr 1fr; }
  .pool-grid,.metric-grid { grid-template-columns:repeat(3,1fr); }
  .rule-score { position:static; }
  .auth-story { min-height:420px; }
  .auth-back { position:static; margin-bottom:4rem; }
  .form-grid { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  main { width:min(100% - 1.25rem,var(--max)); padding:1.5rem 0 3rem; }
  .topbar-inner { width:calc(100% - 1.25rem); }
  .brand { font-size:1rem; }
  .topbar .button { padding:.42rem .65rem; }
  .home-hero h1 { font-size:clamp(2.8rem,16vw,4.4rem); }
  .code-form,.step-grid,.pool-grid,.metric-grid,.management-grid,.game-list,.form-grid.two { grid-template-columns:1fr; }
  .code-form .button { width:100%; }
  .management-card.full { grid-column:auto; }
  .management-head,.dashboard-head,.watch-head,.final-cta,.signup-submit,.site-footer { align-items:stretch; flex-direction:column; }
  .sync-form { grid-template-columns:1fr; }
  .site-footer>p { text-align:left; }
  .completion { text-align:left; }
  .sticky-summary { overflow:auto; white-space:nowrap; }
  .section-heading { display:block; }
  .section-heading input { width:100%; margin-top:1rem; }
  .game-card header { flex-wrap:wrap; }
  .auth-story,.auth-panel { padding:2rem 1.3rem; }
  .auth-story h1 { font-size:3.2rem; }
  .league-confirmed { align-items:flex-start; flex-wrap:wrap; }
  .league-confirmed a { width:100%; padding-left:3.1rem; }
  .watch-summary,.watch-list { grid-template-columns:1fr; }
  .watch-connection { min-width:0; }
  .watch-card footer { align-items:flex-start; flex-direction:column; gap:.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
@media (forced-colors: active) {
  .button,.team-choice,.status-badge { border:2px solid ButtonText; }
  .team-choice.selected { outline:3px solid Highlight; }
}