:root { --navy:#071a33; --blue:#0b5795; --cyan:#12a8d7; --paper:#f3f6f8; --ink:#122236; --muted:#657487; --line:#dbe2e8; --white:#fff; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } html { overflow-x:hidden; } body { margin:0; min-width:320px; min-height:100vh; overflow-x:hidden; } button,select,input { font:inherit; } button,select { cursor:pointer; } button,select { min-height:44px; }
.setup-shell { min-height:100vh; display:grid; align-content:center; justify-items:center; padding:32px 20px; background:radial-gradient(circle at 15% 0%,#174a78 0,transparent 32%),linear-gradient(145deg,#06172c,#0b2948 64%,#09385b); color:white; }
.brand { width:min(620px,100%); display:flex; gap:14px; align-items:center; margin-bottom:28px; }.brand p,.brand h1 { margin:0; }.brand p { color:#7dd3fc; font-size:11px; letter-spacing:.2em; font-weight:800; text-transform:uppercase; }.brand h1 { font-size:23px; letter-spacing:.02em; }.brand h1 small { color:#87a0b9; font-weight:500; }
.brand-mark { display:grid; place-items:center; width:46px; height:46px; border:2px solid #65d9fa; border-radius:50%; color:white; font:800 25px Georgia; background:#0b5795; box-shadow:0 0 0 5px #ffffff12; }.brand-mark.small { width:34px;height:34px;font-size:18px; }
.setup-card { width:min(620px,100%); color:var(--ink); background:#fff; border-radius:10px; padding:38px; box-shadow:0 24px 70px #0007; border-top:5px solid var(--cyan); }.eyebrow { font-size:11px; letter-spacing:.18em; font-weight:900; color:var(--cyan); }.setup-card h2 { font-size:30px; margin:8px 0; }.muted { color:var(--muted); line-height:1.55; margin:0 0 28px; }
form { display:grid; gap:24px; } label,legend { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; } select { display:block;width:100%;margin-top:8px;padding:13px 14px;border:1px solid #cbd5df;border-radius:5px;background:#fff;color:var(--ink);font-weight:650; }.field-grid { display:grid; grid-template-columns:1fr auto 1fr;gap:14px;align-items:end; }.versus { color:#95a3b1;font-weight:900;padding-bottom:14px; } fieldset { padding:0;border:0;margin:0; }.segmented { display:flex;gap:8px;margin-top:8px; }.segmented label { flex:1; }.segmented input { position:absolute;opacity:0; }.segmented span { display:block;text-align:center;padding:12px;border:1px solid #cbd5df;border-radius:5px;color:#627084; }.segmented span small { display:block;margin-top:3px;font-size:9px;letter-spacing:.05em; }.segmented input:checked+span { border-color:var(--blue);background:#e9f5ff;color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue); }.segmented .coming-soon { cursor:not-allowed; }.segmented .coming-soon span { background:#f2f4f5;color:#a0a9b2;border-color:#dfe4e8;cursor:not-allowed; }.format-options { display:grid;grid-template-columns:repeat(3,1fr); }
.primary,.secondary { border:0;border-radius:5px;padding:14px 20px;font-weight:850;letter-spacing:.02em; }.primary { background:linear-gradient(90deg,#0876b9,#0a9bc7);color:white;box-shadow:0 8px 18px #0a75a52d; }.primary span { float:right; }.secondary { background:#e8eef3;color:#19314b; }.fineprint { font-size:12px;color:#7793ad;margin:24px 0 0; }.toss-card { text-align:center; }.coin { margin:0 auto 22px;width:68px;height:68px;display:grid;place-items:center;border-radius:50%;background:#e7f8ed;color:#15803d;font-size:30px;border:1px solid #b8e7c7; }.toss-actions { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.game-shell { min-height:100vh;background:#edf2f5;padding-bottom:48px; } nav { height:70px;background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1100px)/2)); }.nav-brand { display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.08em; }.match-tag { color:#aac0d4;font-size:12px;font-weight:800; }.match-tag span,.live-dot { color:#54d5f5;margin-right:8px; }.text-button { background:none;border:0;color:#b9cbdc;font-weight:700; }
.score-hero { background:linear-gradient(110deg,var(--team),#071a33 72%);color:white;padding:34px max(24px,calc((100vw - 1100px)/2));display:flex;justify-content:space-between;align-items:end;border-bottom:4px solid #16b6d9; }.score-hero h1 { margin:5px 0 3px;font-size:34px; }.score-hero p { margin:0;color:#c7d7e4; }.hero-actions { display:flex;align-items:center;gap:25px; }.hero-play { min-width:180px; }.score { text-align:right; }.score strong { display:block;font-size:58px;line-height:.9; }.score strong small { font-size:.55em;font-weight:650; }.score span { display:block;margin-top:12px;color:#c9d9e7;font-weight:700; }.chase { max-width:1100px;margin:0 auto;padding:12px 18px;background:#dbeaf1;display:flex;justify-content:space-between;color:#31516a;font-size:13px; }.match-result { max-width:1100px;margin:0 auto;padding:14px 18px;background:#e8f5ed;border-top:1px solid #c9e6d4;display:flex;align-items:center;justify-content:space-between;gap:20px; }.match-result div { display:flex;align-items:baseline;gap:15px; }.match-result span { color:#527261;font-size:10px;font-weight:900;letter-spacing:.12em; }.match-result strong { color:#087f5b;font-size:19px; }.match-result button { white-space:nowrap; }
.cards { max-width:1100px;margin:22px auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(310px,.75fr);gap:18px;padding:0 18px;align-items:start; }.scorecards { display:grid;gap:18px;min-width:0; }.card { background:white;border:1px solid var(--line);box-shadow:0 3px 10px #18344d10; }.card-title { display:flex;justify-content:space-between;padding:13px 17px;background:linear-gradient(90deg,#07558f,#083866);color:white;font-size:11px;font-weight:900;letter-spacing:.14em; }.table-scroll { overflow-x:auto; } table { width:100%;border-collapse:collapse;min-width:500px; } th { padding:9px 13px;background:#e2f0f5;color:#416073;text-align:right;font-size:10px;letter-spacing:.09em; } th:first-child,td:first-child { text-align:left; }.card td { padding:11px 13px;text-align:right;border-bottom:1px solid #e4e9ed;font-size:13px; }.card tr.active { background:#edf9fc;box-shadow:inset 3px 0 #0aa7ca; }.card td small { display:block;color:#7b8995;font-size:10px;margin-top:3px; }.card footer { display:flex;justify-content:space-between;padding:12px 14px;background:#f1f4f6;color:#53677a;font-size:10px;letter-spacing:.07em; }.card footer b { color:#13283e;margin-left:5px; }.commentary { position:sticky;top:18px;max-height:calc(100vh - 36px);display:flex;flex-direction:column; }.commentary-list { list-style:none;padding:0;margin:0;overflow-y:auto; }.commentary-list li { display:grid;grid-template-columns:48px 1fr;gap:10px;padding:14px 15px;border-bottom:1px solid var(--line); }.commentary-list li.latest { background:#edf9fc;box-shadow:inset 3px 0 #0aa7ca; }.ball-number { width:42px;height:28px;display:grid;place-items:center;border-radius:4px;background:#e4eef3;color:#31576e;font-size:11px;font-weight:900; }.commentary-list small { color:#8795a1;font-size:9px;font-weight:800;letter-spacing:.09em; }.commentary-list p { margin:3px 0 0;font-size:13px;line-height:1.45;font-weight:650; }.empty-commentary { padding:30px 20px;color:var(--muted);font-size:13px;text-align:center; }.controls { display:flex;justify-content:flex-end;gap:12px;align-items:center;padding:14px 20px; }.result { margin-right:auto;color:#087f5b;font-weight:900;font-size:18px; }
@media (max-width:900px) {
  nav { padding-inline:20px; }
  .cards { grid-template-columns:minmax(0,1fr);max-width:720px; }
  .commentary { position:static;max-height:560px; }
}

@media (max-width:600px) {
  .setup-shell { display:block;padding:22px 14px 32px; }
  .brand { margin:0 auto 20px; }
  .brand-mark { width:40px;height:40px;font-size:21px;flex:0 0 auto; }
  .brand h1 { font-size:20px; }
  .setup-card { padding:24px 16px;border-radius:8px; }
  .setup-card h2 { font-size:25px;line-height:1.15; }
  .field-grid { grid-template-columns:1fr;gap:12px; }
  .versus { text-align:center;padding:0;font-size:11px; }
  .format-options { grid-template-columns:1fr; }
  .segmented span { padding:10px; }
  .toss-actions { grid-template-columns:1fr; }
  .fineprint { text-align:center; }

  nav { height:58px;padding-inline:12px; }
  .nav-brand b { font-size:9px; }
  .nav-brand .brand-mark { width:30px;height:30px;font-size:16px; }
  .match-tag { display:none; }
  .text-button { padding:8px;font-size:12px;white-space:nowrap; }

  .score-hero { padding:20px 14px;display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch; }
  .score-hero h1 { font-size:27px;line-height:1.1; }
  .hero-actions { display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end; }
  .score { text-align:left; }
  .score strong { font-size:48px; }
  .score span { margin-top:7px;font-size:12px; }
  .hero-play { min-width:148px;padding:12px 14px;white-space:nowrap; }

  .chase { padding:11px 14px;gap:8px;font-size:12px;align-items:center; }
  .chase span:last-child { text-align:right; }
  .match-result { padding:12px 14px; }
  .match-result div { display:grid;gap:3px; }
  .match-result strong { font-size:15px;line-height:1.25; }
  .match-result button { padding:10px 13px; }

  .cards { margin:14px auto;padding:0 10px;gap:14px; }
  .scorecards { gap:14px; }
  .card-title { padding:12px 11px; }
  table { min-width:0;table-layout:auto; }
  th { padding:8px 5px;font-size:8px; }
  .card td { padding:10px 5px;font-size:11px; }
  th:first-child,.card td:first-child { width:48%;padding-left:9px; }
  .card td small { font-size:8px;line-height:1.25;overflow-wrap:anywhere; }
  .scorecards .card:first-child th:nth-child(4),
  .scorecards .card:first-child th:nth-child(5),
  .scorecards .card:first-child td:nth-child(4),
  .scorecards .card:first-child td:nth-child(5) { display:none; }
  .card footer { padding:10px 9px;gap:10px;align-items:center; }
  .card footer span:last-child { text-align:right; }

  .commentary { max-height:520px; }
  .commentary-list li { grid-template-columns:42px 1fr;padding:12px 10px;gap:8px; }
  .ball-number { width:38px;height:27px; }
  .commentary-list p { font-size:12px; }
}

@media (max-width:380px) {
  .hero-actions { grid-template-columns:1fr; }
  .hero-play { width:100%; }
  .chase { align-items:flex-start; }
  .match-result { align-items:flex-start; }
  .match-result button { flex:0 0 auto; }
  .card td { font-size:10px; }
  th:first-child,.card td:first-child { width:44%; }
}