:root{
    --bg:#0E1319; --surface:#171E26; --surface-2:#1E2732; --surface-3:#26313E;
    --line: rgba(244,241,234,0.10); --ink:#EDEFF2; --ink-dim:#8A93A3;
    --orange:#F2542D; --orange-dim: rgba(242,84,45,0.14);
    --blue:#3C7DFA; --blue-dim: rgba(60,125,250,0.14);
    --foul:#E14953; --foul-dim: rgba(225,73,83,0.14);
    --radius:10px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background: radial-gradient(1400px 900px at 15% -10%, #171f28 0%, #090c10 65%);
    font-family:'Inter', system-ui, sans-serif; color:var(--ink);
    min-height:100vh; padding: 26px 32px 60px;
  }
  .display{ font-family:'Bebas Neue', 'Arial Narrow', sans-serif; letter-spacing:0.03em; }
  .num{ font-variant-numeric: tabular-nums; }
  a{ color:inherit; }

  header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:12px; }
  .brand{ display:flex; align-items:baseline; gap:12px; }
  .wordmark{ font-size:30px; }
  .wordmark span{ color:var(--orange); }
  .brand-sub{ font-size:12px; color:var(--ink-dim); border-left:1px solid var(--line); padding-left:12px; }
  .breadcrumb{ font-size:12px; color:var(--ink-dim); }
  .breadcrumb b{ color:var(--ink); }
  .breadcrumb .back{ cursor:pointer; text-decoration:underline; }

  .screen{ display:none; max-width:1100px; }
  .screen.active{ display:block; }

  /* min-width:0 lets a panel shrink inside a grid or flex parent. Without it, a wide
     table inside pushes the panel — and the whole page — wider than the screen. */
  .panel{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; margin-bottom:18px; min-width:0; }
  .section-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-dim); margin: 4px 0 10px; }
  h2{ font-size:18px; margin-bottom:4px; }
  p.sub{ font-size:12.5px; color:var(--ink-dim); margin-bottom:16px; }

  button{ font-family:inherit; border:none; cursor:pointer; }
  .btn{ padding:11px 18px; border-radius:8px; background:var(--surface-3); color:var(--ink); font-size:13px; font-weight:600; }
  .btn.primary{ background:var(--orange); color:#0E1319; }
  .btn.ghost{ background:transparent; border:1px solid var(--line); }
  .btn.small{ padding:7px 12px; font-size:11.5px; }
  .btn:active{ transform: scale(0.98); }
  .btn:disabled{ opacity:0.4; cursor:not-allowed; }

  .form-row{ display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
  .form-row input, .form-row select{
    flex:1; min-width:160px; background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
    padding:11px 14px; color:var(--ink); font-size:13px; font-family:inherit;
  }
  .form-row input:focus, .form-row select:focus{ outline:none; border-color:var(--orange); }
  label{ font-size:11px; color:var(--ink-dim); display:block; margin-bottom:4px; }

  .list-item{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
    padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:border-color .15s ease;
  }
  .list-item:hover{ border-color:var(--orange); }
  .list-item .main{ font-weight:700; font-size:14px; }
  .list-item .meta{ font-size:11.5px; color:var(--ink-dim); margin-top:2px; }
  .list-item .actions{ display:flex; gap:8px; }
  .badge{ font-size:10px; padding:3px 8px; border-radius:5px; background:var(--surface-3); color:var(--ink-dim); }
  .badge.live{ background:var(--orange-dim); color:var(--orange); }
  .badge.final{ background:var(--blue-dim); color:var(--blue); }

  .empty-mini{ font-size:13px; color:var(--ink-dim); padding: 30px 4px; text-align:center; }

  .roster-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .roster-row:last-child{ border-bottom:none; }
  .roster-row .n{ font-family:'Bebas Neue'; color:var(--orange); margin-right:8px; }
  .roster-row button{ background:none; color:var(--ink-dim); font-size:11px; text-decoration:underline; }

  .fixture-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:14px; }
  .fixture-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
  .fixture-matchup{ font-size:17px; font-weight:800; }
  .fixture-meta{ font-size:12px; color:var(--ink-dim); margin-top:4px; }
  .fixture-actions{ display:flex; gap:10px; }

  .compliance-note{
    font-size:11.5px; color:var(--ink-dim); background:var(--surface); border:1px solid var(--line);
    border-radius:8px; padding:9px 14px; margin-bottom:18px; max-width:1200px; line-height:1.5;
  }
  .compliance-note b{ color:var(--ink); }

  .scoreboard{ display:flex; align-items:center; justify-content:center; gap:22px;
    background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 24px; margin-bottom:18px; }
  .team-block{ display:flex; align-items:center; gap:12px; flex:1; }
  .team-block.away{ flex-direction:row-reverse; text-align:right; }
  .team-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .team-dot.home{ background:var(--orange); }
  .team-dot.away{ background:var(--blue); }
  .team-name-static{ font-size:14px; font-weight:700; }
  .team-coach-static{ font-size:11px; color:var(--ink-dim); }
  .team-score{ font-size:44px; line-height:1; min-width:64px; text-align:center; }
  .team-score.home{ color:var(--orange); }
  .team-score.away{ color:var(--blue); }
  .vs-divider{ color:var(--ink-dim); font-size:13px; }

  .main-grid{ display:grid; grid-template-columns: 1.55fr 1fr; gap:18px; max-width:1400px; min-width:0; }
  .main-grid > *{ min-width:0; }
  .video-wrap{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; }
  #ytplayer{ width:100%; height:100%; }

  .transport{ display:flex; align-items:center; gap:12px; margin-top:12px; }
  .play-btn{ width:38px; height:38px; border-radius:50%; background:var(--orange); color:#0E1319;
    display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
  .clock{ font-size:20px; width:56px; }
  .scrub{ flex:1; accent-color: var(--orange); }

  .team-group{ margin-top:16px; }
  .team-group-label{ display:flex; align-items:center; gap:7px; font-size:11px; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--ink-dim); margin-bottom:8px; }
  .team-group-label .team-dot{ width:7px; height:7px; }
  .player-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
  .chip{ padding:8px 13px; border-radius:20px; background:var(--surface-2); border:1px solid transparent;
    font-size:12.5px; font-weight:600; color:var(--ink-dim); display:flex; align-items:center; gap:6px; }
  .chip .n{ color:var(--ink); font-family:'Bebas Neue'; font-size:14px; }
  .chip.home.selected{ border-color:var(--orange); color:var(--ink); background:var(--orange-dim); }
  .chip.away.selected{ border-color:var(--blue); color:var(--ink); background:var(--blue-dim); }

  .stat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:8px; margin-top:14px; }
  .stat-btn{ padding:12px 6px; border-radius:8px; text-align:center; font-size:12px; font-weight:700; background:var(--surface-2); color:var(--ink); }
  .stat-btn small{ display:block; font-weight:500; font-size:9px; color:var(--ink-dim); margin-top:2px; }
  .stat-btn.make{ background:var(--orange-dim); color:var(--orange); }
  .stat-btn.assist, .stat-btn.rebound, .stat-btn.steal, .stat-btn.block{ background:var(--blue-dim); color:var(--blue); }
  .stat-btn.foul, .stat-btn.turnover{ background:var(--foul-dim); color:var(--foul); }
  .stat-btn:disabled{ opacity:0.4; cursor:not-allowed; }

  .log-item{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); font-size:12px; }
  .log-item:last-child{ border-bottom:none; }
  .log-item .who{ font-weight:600; }
  .team-tag{ font-size:9px; padding:2px 6px; border-radius:4px; margin-left:6px; }
  .team-tag.home{ background:var(--orange-dim); color:var(--orange); }
  .team-tag.away{ background:var(--blue-dim); color:var(--blue); }

  .tabs{ display:flex; gap:4px; margin-bottom:14px; background:var(--surface-2); border-radius:8px; padding:4px; }
  .tabs button{ flex:1; background:none; padding:8px 0; border-radius:6px; font-size:12px; font-weight:600; color:var(--ink-dim); }
  .tabs button.active{ background:var(--orange); color:#0E1319; }
  .tabpanel{ display:none; }
  .tabpanel.active{ display:block; }

  .box-team-header{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; margin:14px 0 6px; }
  .box-team-header:first-child{ margin-top:0; }
  .box-team-header .coach{ font-weight:400; color:var(--ink-dim); font-size:11px; }
  /* A wide stat table scrolls inside its own box. Without max-width it grows the page
     instead, because a grid or flex item defaults to min-width:auto and refuses to
     shrink below the table's min-width — which is what made every page on a phone
     slide sideways, not just the table. */
  .table-scroll{ overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
  table{ width:100%; border-collapse:collapse; font-size:11.5px; min-width:460px; }
  /* Headers carry the same side padding as cells, or they run together: "PTSFG3P". */
  th{ text-align:left; color:var(--ink-dim); font-weight:600; font-size:9.5px; text-transform:uppercase; letter-spacing:0.05em; padding:0 6px 6px; white-space:nowrap; }
  td{ padding:8px 6px; border-top:1px solid var(--line); white-space:nowrap; }

  /* The player's name stays put while the stats scroll under it — without this you
     scroll three columns right and no longer know whose line you are reading. */
  .table-scroll th:first-child,
  .table-scroll td:first-child{ position:sticky; left:0; background:var(--surface); z-index:2; }
  .table-scroll td:first-child{ box-shadow: 1px 0 0 var(--line); }
  .table-scroll th:first-child{ box-shadow: 1px 0 0 var(--line); }
  tr.top td:first-child.home{ box-shadow: inset 3px 0 0 var(--orange); padding-left:8px; }
  tr.top td:first-child.away{ box-shadow: inset 3px 0 0 var(--blue); padding-left:8px; }
  td.pts{ font-family:'Bebas Neue'; font-size:16px; }
  .pnum{ color:var(--ink-dim); font-size:11px; }

  .clip-card{ display:flex; gap:12px; align-items:center; background:var(--surface-2); border:1px solid var(--line);
    border-radius:10px; padding:10px; margin-bottom:9px; cursor:pointer; }
  .clip-card.home{ box-shadow: inset 3px 0 0 var(--orange); }
  .clip-card.away{ box-shadow: inset 3px 0 0 var(--blue); }
  .clip-thumb{ width:70px; height:44px; border-radius:6px; background-size:cover; background-position:center;
    position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .clip-thumb::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,0.28); border-radius:6px; }
  .clip-thumb span{ z-index:2; color:#fff; font-size:13px; }
  .clip-meta .top{ font-size:12.5px; font-weight:700; }
  .clip-meta .bottom{ font-size:11px; color:var(--ink-dim); margin-top:2px; }
  .clip-pts{ margin-left:auto; font-family:'Bebas Neue'; font-size:18px; }
  .clip-pts.home{ color:var(--orange); }
  .clip-pts.away{ color:var(--blue); }
  .clip-copy{ font-size:10px; color:var(--ink-dim); background:var(--surface-3); padding:5px 8px; border-radius:6px; }

  .toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:#0e1319; border:1px solid var(--line);
    color:var(--ink); padding:10px 16px; border-radius:8px; font-size:12.5px; opacity:0; transition:opacity .2s ease;
    pointer-events:none; z-index:50; max-width:80vw; }
  .toast.show{ opacity:1; }

  .modal{ position:absolute; inset:0; background:rgba(6,8,11,0.92); display:none; align-items:center; justify-content:center;
    padding:24px; z-index:30; }
  .modal-inner{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; width:100%; max-width:360px; }
  .modal-title{ font-size:16px; font-weight:700; margin-bottom:14px; text-align:center; }
  #chainBody{ display:flex; flex-direction:column; gap:8px; }
  #chainBody .chip{ width:100%; justify-content:center; padding:12px; }

  .lineup-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .lineup-row:last-child{ border-bottom:none; }
  .lineup-toggles{ display:flex; gap:4px; }
  .lineup-toggle{ padding:5px 10px; border-radius:6px; font-size:10.5px; font-weight:600; background:var(--surface-2); color:var(--ink-dim); border:1px solid transparent; }
  .lineup-toggle.active-start{ background:var(--orange-dim); color:var(--orange); border-color:var(--orange); }
  .lineup-toggle.active-sub{ background:var(--blue-dim); color:var(--blue); border-color:var(--blue); }

  @media (max-width: 900px){ .main-grid{ grid-template-columns:1fr; } }

  /* On a phone the scoreboard's three side-by-side columns squeeze the middle one until
     the kick-off details wrap a word per line, and the two scores end up adjacent so
     13–0 reads as "130". Below 560px each team gets its own row with the score aligned
     right, the same shape as the result cards on the home page. */
  @media (max-width: 560px){
    .scoreboard{ flex-direction:column; align-items:stretch; gap:6px; padding:14px 16px; }
    .team-block, .team-block.away{ flex-direction:row; text-align:left; width:100%; gap:10px; align-items:center; }
    .team-block > div:nth-child(2){ flex:1; min-width:0; }
    .team-name-static{ font-size:14px; overflow-wrap:anywhere; }
    .team-score{ font-size:30px; min-width:0; margin-left:auto; text-align:right; }
    .vs-divider{ order:3; text-align:center; border-top:1px solid var(--line); padding-top:10px; margin-top:4px; }
  }