:root{
    --bg:#f4f2ea; --surface:#fbfaf5; --surface-2:#efece1;
    --ink:#1b241f; --muted:#5c665e; --line:#ddd9cb;
    --accent:#2f7d4f; --accent-deep:#245f3d; --accent-soft:#e2efe6;
    --cone:#e8622c; --cone-soft:#fbe4d8; --amber:#c78a1e;
    --chalk:#c9c6b8; --paper:#f4f2ea;
    --shadow:0 1px 2px rgba(27,36,31,.06),0 8px 24px -12px rgba(27,36,31,.18);
    --r:12px;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --bg:#131711; --surface:#1c2119; --surface-2:#232a20;
      --ink:#eef2e8; --muted:#9aa79a; --line:#2f382c;
      --accent:#4fae74; --accent-deep:#3d9160; --accent-soft:#1f2c22;
      --cone:#ff7a45; --cone-soft:#2e2016; --amber:#e6b455;
      --chalk:#3a4436; --paper:#eef2e8;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="light"]{
    --bg:#f4f2ea; --surface:#fbfaf5; --surface-2:#efece1;
    --ink:#1b241f; --muted:#5c665e; --line:#ddd9cb;
    --accent:#2f7d4f; --accent-deep:#245f3d; --accent-soft:#e2efe6;
    --cone:#e8622c; --cone-soft:#fbe4d8; --amber:#c78a1e; --chalk:#c9c6b8; --paper:#f4f2ea;
    --shadow:0 1px 2px rgba(27,36,31,.06),0 8px 24px -12px rgba(27,36,31,.18);
  }
  :root[data-theme="dark"]{
    --bg:#131711; --surface:#1c2119; --surface-2:#232a20;
    --ink:#eef2e8; --muted:#9aa79a; --line:#2f382c;
    --accent:#4fae74; --accent-deep:#3d9160; --accent-soft:#1f2c22;
    --cone:#ff7a45; --cone-soft:#2e2016; --amber:#e6b455; --chalk:#3a4436; --paper:#eef2e8;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.6);
  }

  *{box-sizing:border-box}
  /* the hidden attribute must beat any display rule (e.g. .clock-band's flex) */
  [hidden]{display:none!important}
  /* ponytail: standalone mode insets the webview itself, so no safe-area CSS is
     needed — this just keeps the home-indicator strip from flashing white. */
  html{background:var(--bg)}
  /* The app font stack lives here, not on .wrap — the toast stack and the pocket
     lock are siblings of .wrap, and anything that inherited from .wrap alone
     silently fell back to the UA serif default. */
  body{margin:0; font-family:system-ui,"Segoe UI",Roboto,-apple-system,Helvetica,Arial,sans-serif}
  .wrap{
    color:var(--ink); background:var(--bg);
    min-height:100vh; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .display{font-family:"Bahnschrift","Oswald","Arial Narrow","Helvetica Neue",system-ui,sans-serif;}
  .tnum{font-variant-numeric:tabular-nums}

  .app{max-width:1080px; margin:0 auto; padding:0 16px 96px}

  /* ---------- brand band / scoreboard ---------- */
  /* Not sticky, and it lives at the foot of the page: the top of the screen
     belongs to the clock, not to a title the coach never taps. */
  .board{
    margin:28px -16px 0; padding:14px 16px 0;
    border-top:1px solid var(--line);
  }

  .brandrow{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
  .crest{
    width:46px;height:46px;flex:0 0 auto;border-radius:50%;
    background:var(--accent); color:#fff; position:relative;
    box-shadow:inset 0 0 0 3px rgba(255,255,255,.25);
    display:grid;place-items:center;
  }
  .crest svg{width:30px;height:30px}
  .brand h1{
    font-family:"Bahnschrift","Oswald","Arial Narrow","Helvetica Neue",system-ui,sans-serif;
    font-weight:700; font-size:clamp(20px,4.5vw,27px); letter-spacing:.02em;
    margin:0; text-transform:uppercase; line-height:1; text-wrap:balance;
  }
  .brand .sub{color:var(--muted); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin-top:3px}
  .brandrow .spacer{flex:1 1 auto}

  /* ---------- pills ----------
     One height for every small status/action pill in the app, with or without
     an emoji. An emoji's line box is taller than text's, so the height has to
     come from min-height + line-height:1 and never from the content's own line
     box — that difference is what made "🔕 Wrist alerts off" (28px) outgrow
     "Synced" (23px), and "Period +" (30px) outgrow "Period 1 of 4" (24px).
     .pill owns the metrics; the specific classes below own only the colour. */
  .pill{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    min-height:28px; padding:0 11px; line-height:1; border-radius:999px;
    font-family:inherit; font-size:11.5px; font-weight:600; letter-spacing:.04em;
    white-space:nowrap; appearance:none; cursor:pointer;
    border:1px solid transparent; background:transparent; color:inherit;
  }
  /* Caps-only text sits optically high — the line box reserves descender space
     the glyphs never use. Nudge the ink back down without changing the height. */
  .pill.caps{padding-top:1px}

  /* sync tools — wrist alerts sits with the sync pill at the foot of every page */
  .synctools{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
  .synctools .alertbtn{color:var(--muted);border-color:var(--line);background:var(--surface)}
  .synctools .alertbtn:hover{color:var(--ink)}
  .synctools .alertbtn[aria-pressed="true"]{color:var(--accent-deep);border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:var(--accent-soft)}
  :root[data-theme="dark"] .synctools .alertbtn[aria-pressed="true"]{color:var(--accent)}
  @media (prefers-color-scheme:dark){.synctools .alertbtn[aria-pressed="true"]{color:var(--accent)}}
  .syncpill{border-color:var(--line);background:var(--surface);color:var(--muted);cursor:default}
  .syncpill .syncdot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
  .syncpill[data-state="ok"]{color:var(--accent-deep);border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:var(--accent-soft)}
  :root[data-theme="dark"] .syncpill[data-state="ok"]{color:var(--accent)}
  @media (prefers-color-scheme:dark){.syncpill[data-state="ok"]{color:var(--accent)}}
  .syncpill[data-state="saving"]{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 35%,transparent)}
  .syncpill[data-state="saving"] .syncdot{animation:pulse 1s ease-in-out infinite}
  .syncpill[data-state="off"],.syncpill[data-state="warn"]{color:var(--cone);border-color:color-mix(in srgb,var(--cone) 35%,transparent);background:var(--cone-soft)}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
  @media (prefers-reduced-motion:reduce){.syncpill .syncdot{animation:none}}

  /* tabs, as a lower-left FAB speed-dial */
  /* .fabmenu is position:absolute so a closed (invisible) menu takes the
     fabnav's footprint down to just the round button — an in-flow closed
     menu was invisible but still occupied layout, silently eating clicks
     meant for whatever page content sat underneath it. */
  /* Above the toast stack (z-index 50). The stack is centred and wide enough to
     overlap this menu, and .toast takes pointer-events — a toast sitting over
     the bottom menu item silently swallowed taps meant for it. The nav is the
     only way to change tabs, so it wins the paint order unconditionally. */
  .fabnav{position:fixed; left:16px; bottom:16px; z-index:60}
  /* Behind the sheet but over the page, inside the nav's own stacking context.
     It exists to eat the tap-away so it closes the menu and nothing else. */
  .fabback{position:fixed; inset:0; z-index:-1}
  .fabmenu{
    position:absolute; left:0; bottom:100%; width:min(78vw,280px);
    display:flex; flex-direction:column; gap:6px; margin-bottom:10px;
    /* an opaque sheet: without it the page shows through the gaps between
       full-width items and the group labels land on top of page text */
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:12px; box-shadow:0 18px 44px -14px rgba(0,0,0,.55),var(--shadow);
    opacity:0; pointer-events:none; transform:translateY(8px);
    transition:opacity .15s ease,transform .15s ease;
  }
  .fabgrp{
    font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
    color:var(--muted); padding:7px 4px 1px;
  }
  .fabgrp:first-child{padding-top:0}
  /* items sit on the sheet, so they take the recessed tone, not the sheet's own */
  .fabmenu .tab{background:var(--surface-2); box-shadow:none}
  .fabnav.open .fabmenu{opacity:1; pointer-events:auto; transform:none}
  .fab{
    width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
    background:var(--accent); color:#fff; font-size:19px;
    display:grid; place-items:center; box-shadow:var(--shadow);
  }
  .tab{
    appearance:none; border:1px solid var(--line); background:var(--surface);
    color:var(--muted); font-family:inherit; font-size:14px; font-weight:600;
    padding:11px 15px; border-radius:11px; cursor:pointer; white-space:nowrap;
    width:100%; min-height:46px;
    display:flex; align-items:center; gap:10px; text-align:left;
    box-shadow:var(--shadow);
    transition:color .15s,background .15s;
  }
  .tab .dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.45}
  .tab:hover{color:var(--ink)}
  .tab[aria-selected="true"]{color:var(--accent-deep); border-color:color-mix(in srgb,var(--accent) 35%,transparent); background:var(--accent-soft)}
  :root[data-theme="dark"] .tab[aria-selected="true"]{color:var(--accent)}
  @media (prefers-color-scheme:dark){.tab[aria-selected="true"]{color:var(--accent)}}
  .tab[aria-selected="true"] .dot{opacity:1;background:var(--accent)}
  /* Cone means "a game is live right now", not "this is the Game Day tab" —
     the .live class comes from gameUnderway(), the same signal behind Go Live.
     Selected, it drops back to the shared green "you are here" state, so the
     active-state convention is identical on all six routes. */
  .tab[data-tab="game"].live:not([aria-selected="true"]){
    color:var(--cone); border-color:color-mix(in srgb,var(--cone) 45%,transparent); background:var(--cone-soft);
  }
  .tab[data-tab="game"].live:not([aria-selected="true"]) .dot{opacity:1;background:var(--cone);animation:pulse 1.6s ease-in-out infinite}
  @media (prefers-reduced-motion:reduce){.tab[data-tab="game"].live .dot{animation:none}}

  /* compact brand band on phones */
  @media (max-width:640px){
    .crest{display:none}
    .brand h1{font-size:17px}
    .brand .sub{display:none}
  }

  /* ---------- panels / cards ---------- */
  main{margin-top:0}
  .panel{display:none; animation:fade .25s ease; padding-top:14px}
  .panel.active{display:block}
  #p-game{padding-top:0} /* ponytail: Game Day has its own sticky clock band up top */
  @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.panel{animation:none}}

  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
    box-shadow:var(--shadow); padding:18px; margin-bottom:16px; min-width:0;
  }
  .card > h2{
    font-family:"Bahnschrift","Oswald","Arial Narrow",system-ui,sans-serif;
    text-transform:uppercase; letter-spacing:.03em; font-size:16px; font-weight:700;
    margin:0 0 4px; display:flex; align-items:center; gap:9px;
  }
  .card > h2 .num{
    font-size:12px; background:var(--accent); color:#fff; width:22px;height:22px;
    border-radius:6px; display:grid;place-items:center; letter-spacing:0;
  }
  .card > p.lead{margin:0 0 14px; color:var(--muted); font-size:13.5px; max-width:62ch}

  .grid2{display:grid; gap:16px; grid-template-columns:1fr}
  @media(min-width:760px){.grid2{grid-template-columns:1.05fr .95fr}}

  label.fld{display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 5px}
  input[type=text],input[type=number],select{
    font-family:inherit; font-size:14px; color:var(--ink); background:var(--surface-2);
    border:1px solid var(--line); border-radius:9px; padding:9px 11px; width:100%;
  }
  input:focus,select:focus,button:focus-visible{outline:2.5px solid var(--accent); outline-offset:1px}
  .row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
  .row > *{flex:1 1 auto}

  button.btn{
    appearance:none; font-family:inherit; font-weight:600; font-size:13.5px; cursor:pointer;
    border-radius:9px; padding:9px 15px; border:1px solid var(--accent);
    background:var(--accent); color:#fff; display:inline-flex; align-items:center; gap:7px;
    transition:filter .15s,transform .05s;
  }
  button.btn:hover{filter:brightness(1.06)}
  /* full time disables the clock and Period + — they must not read as tappable */
  button[disabled]{opacity:.45;cursor:default;pointer-events:none}
  button.btn:active{transform:translateY(1px)}
  button.btn.ghost{background:transparent; color:var(--accent-deep); border-color:var(--line)}
  :root[data-theme="dark"] button.btn.ghost{color:var(--accent)}
  @media (prefers-color-scheme:dark){button.btn.ghost{color:var(--accent)}}
  button.btn.ghost:hover{background:var(--accent-soft); filter:none}
  button.btn.cone{background:var(--cone);border-color:var(--cone)}
  button.btn.sm{padding:6px 10px;font-size:12.5px}
  button.icon{
    appearance:none;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);
    width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1;
    display:grid;place-items:center;flex:0 0 auto;
  }
  button.icon:hover{color:var(--ink);border-color:var(--muted)}

  .hint{color:var(--muted); font-size:12.5px}
  .divide{height:1px;background:repeating-linear-gradient(90deg,var(--chalk) 0 8px,transparent 8px 16px);border:0;margin:16px 0}

  /* roster list — the whole row is the IN/LATE/OUT toggle */
  ul.roster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
  ul.roster li{
    display:flex;align-items:center;gap:0;background:var(--surface-2);
    border:1px solid var(--line);border-radius:10px;padding:0;overflow:hidden;
  }
  ul.roster .rowtog{
    appearance:none;border:0;background:none;color:inherit;font-family:inherit;cursor:pointer;
    flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:11px;
    padding:9px 12px;min-height:48px;text-align:left;
  }
  ul.roster .rowtog:hover{background:var(--surface)}
  ul.roster .rowtog:active{background:var(--accent-soft)}
  ul.roster .state{
    flex:0 0 auto;min-width:60px;text-align:center;font-size:11px;font-weight:800;
    letter-spacing:.06em;padding:6px 10px;border-radius:999px;
    border:1px solid var(--line);background:var(--surface);color:var(--muted);
  }
  ul.roster li:not(.out):not(.late) .state{background:var(--accent);border-color:var(--accent);color:#fff}
  ul.roster li.late .state{background:var(--amber);border-color:var(--amber);color:#14100a}
  ul.roster li .icon{margin-right:8px}
  ul.roster li.out{opacity:.5}
  ul.roster li.late{opacity:.8}
  ul.roster .pnum{
    width:26px;height:26px;border-radius:7px;background:var(--accent);color:#fff;
    display:grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 auto;
    font-family:"Bahnschrift",system-ui,sans-serif;
  }
  ul.roster li.out .pnum{background:var(--muted)}
  ul.roster li.late .pnum{background:var(--amber)}
  ul.roster .pname{flex:1 1 auto;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Live-game jump: only rendered while a game is actually underway. */
  .btn.golive{
    width:100%;justify-content:center;min-height:48px;margin:0 0 14px;font-size:14px;
    background:var(--cone);border-color:var(--cone);color:#fff;
  }
  .btn.golive .lv{width:9px;height:9px;border-radius:50%;background:#fff;animation:pulse 1.2s ease-in-out infinite}
  @media (prefers-reduced-motion:reduce){.btn.golive .lv{animation:none}}

  /* Season/Add-player/delete are rare, day-of actions — tucked behind a
     disclosure so IN/LATE/OUT (the thing coaches tap every game) stays clean. */
  .roster-manage{margin-top:14px}
  .roster-manage summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted)}
  .roster-manage summary:hover{color:var(--ink)}
  .roster .icon{display:none}
  .card:has(details.roster-manage[open]) .roster .icon{display:grid}

  /* lineup table */
  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px}
  table.lineup{border-collapse:collapse;width:100%;min-width:460px;font-size:13.5px}
  table.lineup th,table.lineup td{padding:8px 6px;text-align:center;border-bottom:1px solid var(--line)}
  table.lineup thead th{background:var(--surface-2);font-family:"Bahnschrift",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:12px;position:sticky;top:0}
  table.lineup tbody th{text-align:left;font-weight:600;white-space:nowrap;padding-left:12px}
  table.lineup td .on{display:inline-block;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;line-height:20px;font-weight:700}
  table.lineup td .on.gk{background:var(--cone);width:24px;border-radius:6px;font-size:9px;letter-spacing:.03em}
  table.lineup td.bench{color:var(--muted)}
  table.lineup td.bench::after{content:"·";font-size:18px;color:var(--chalk)}
  table.lineup td.tot{font-weight:700;font-variant-numeric:tabular-nums}
  table.lineup td.season{color:var(--muted);font-weight:600}
  table.lineup td.season.owed{color:var(--accent-deep);font-weight:800}
  :root[data-theme="dark"] table.lineup td.season.owed{color:var(--accent)}
  @media (prefers-color-scheme:dark){table.lineup td.season.owed{color:var(--accent)}}
  .slack{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
  .slack b{color:var(--ink)}
  table.lineup th:last-child,table.lineup td:last-child{border-left:1px dashed var(--line)}
  table.lineup tr.under td.tot,table.lineup tr.under th{color:var(--cone)}
  table.lineup tr.under th::before{content:"▲ ";font-size:10px}
  table.lineup tfoot td{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;border-top:2px solid var(--line)}
  .legend-min{font-size:12px;color:var(--muted);margin-top:8px;display:flex;gap:16px;flex-wrap:wrap}
  .legend-min b{color:var(--ink)}

  /* a panel-level card with no chrome — keeps .card > h2 / .card > p.lead styling */
  .card.flat{background:none;border:0;box-shadow:none;padding:0}
  /* .band keeps the surface colour but drops the card: no border, no shadow, no
     radius, and it bleeds the gutter so the whole section reads as one field. */
  .card.band{
    background:var(--surface); border:0; box-shadow:none; border-radius:0;
    margin-left:-16px; margin-right:-16px; padding:18px 16px;
  }

  /* practice builder */
  ol.plan{list-style:none;margin:0;padding:0;counter-reset:step;display:flex;flex-direction:column;gap:9px}
  ol.plan li{
    display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;
    background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;
  }
  ol.plan li.cur{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
  ol.plan li.done{opacity:.55}
  ol.plan .clock{
    font-family:"Bahnschrift",system-ui,sans-serif;font-variant-numeric:tabular-nums;
    font-size:12px;color:var(--muted);text-align:left;flex:0 0 auto;
  }
  ol.plan .pt{min-width:0}
  ol.plan .pt .nm{font-weight:600;font-size:14px;display:block}
  ol.plan .pt button.nm{appearance:none;border:0;background:none;padding:0;font-family:inherit;
    color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left}
  :root[data-theme="dark"] ol.plan .pt button.nm{color:var(--accent)}
  @media (prefers-color-scheme:dark){ol.plan .pt button.nm{color:var(--accent)}}
  ol.plan .pt .sk{font-size:11.5px;color:var(--muted);display:block}
  ol.plan .mins{display:flex;align-items:center;gap:4px}
  ol.plan .mins input{width:52px;text-align:center;padding:5px}
  ol.plan .mv{display:flex;gap:3px}
  /* practice burn-down */
  .burn{margin:0 0 14px}
  .burn-idle{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted);
    background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:12px}
  .burn-idle > div{flex:1 1 220px;min-width:0}
  .burn-idle b{color:var(--ink)}
  .burn-idle .btn{flex:0 0 auto;min-height:44px}
  .burn-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
  .burn-head .st{font-family:"Bahnschrift","Oswald",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em;
    font-size:14px;font-weight:700;color:var(--accent-deep)}
  :root[data-theme="dark"] .burn-head .st{color:var(--accent)}
  @media (prefers-color-scheme:dark){.burn-head .st{color:var(--accent)}}
  .burn-head .st.late{color:var(--cone)}
  .burn-head .st.early{color:var(--amber)}
  .burn-svg{display:block;width:100%;height:92px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px}
  .burn-svg .ax{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
  .burn-svg .pl{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
  .burn-svg .ac{fill:none;stroke:var(--accent);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
  .burn-svg .ac.late{stroke:var(--cone)}
  .burn-svg .now{fill:var(--accent)}
  .burn-svg .now.late{fill:var(--cone)}
  .burn-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:6px;align-items:center}
  .burn-legend i{display:inline-block;width:14px;height:0;border-top:2px solid var(--accent);margin-right:4px;vertical-align:middle}
  .burn-legend i.pl{border-top:2px dashed var(--muted)}
  .burn-btns{display:flex;gap:8px;margin-top:10px}
  .burn-btns .btn{flex:1;justify-content:center;min-height:46px}
  .burn-done{flex:1;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--muted);
    border:1px dashed var(--line);border-radius:9px;min-height:46px}
  .burn-now{margin-top:8px;font-size:12.5px;color:var(--muted)}
  .burn-now b{color:var(--ink)}

  .plan-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
  .plan-total .big{font-family:"Bahnschrift",system-ui,sans-serif;font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
  .empty{text-align:center;color:var(--muted);font-size:13.5px;padding:22px;border:1.5px dashed var(--line);border-radius:10px}

  /* drills */
  .filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
  .chip{
    appearance:none;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
    border:1px solid var(--line);background:var(--surface);color:var(--muted);
    padding:6px 12px;border-radius:999px;
  }
  .chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .drillgrid{display:grid;gap:16px;grid-template-columns:1fr}
  @media(min-width:680px){.drillgrid{grid-template-columns:1fr 1fr}}
  .drill{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;scroll-margin-top:96px}
  .drill .diag{background:var(--accent-deep);position:relative}
  .drill .diag svg{display:block;width:100%;height:auto}
  .drill .body{padding:15px 16px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
  .drill h3{font-family:"Bahnschrift","Oswald",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.02em;font-size:17px;margin:0;line-height:1.05}
  .tags{display:flex;gap:6px;flex-wrap:wrap}
  .tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 7px;border-radius:5px;background:var(--accent-soft);color:var(--accent-deep)}
  :root[data-theme="dark"] .tag{color:var(--accent)}
  @media(prefers-color-scheme:dark){.tag{color:var(--accent)}}
  .tag.fun{background:var(--cone-soft);color:var(--cone)}
  .meta{font-size:12px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
  .meta b{color:var(--ink);font-weight:600}
  .drill p.how{margin:0;font-size:13px}
  .drill .points{margin:0;padding-left:17px;font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:2px}
  .drill .points li{padding-left:2px}
  .drill .foot{margin-top:auto;padding-top:4px}
  .diag-key{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin:-4px 0 16px;padding-left:2px}
  .diag-key span{display:inline-flex;align-items:center;gap:5px}
  .diag-key i{width:14px;height:0;border-top:2px solid var(--muted);display:inline-block}
  .diag-key i.pass{border-top-style:dashed}
  .diag-key i.drib{border-top-style:dotted}
  .diag-key i.cone{width:0;height:0;border:6px solid transparent;border-bottom-color:var(--cone);border-top:0}
  .diag-key i.us{width:11px;height:11px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--accent)}

  /* ---------- game day — the 1d composite ---------- */
  /* No row gap: the clock and the field read as one continuous panel. The
     column gap survives so the two columns don't touch on a wide screen. */
  .gd-grid{display:grid;column-gap:16px;row-gap:0;grid-template-columns:1fr}
  @media(min-width:720px){.gd-grid{grid-template-columns:1.2fr 1fr}}

  /* A stopped clock takes over as a full-width amber band with Start inside it.
     Sticky: a stopped clock mid-game is the one thing that must never scroll
     out of reach — Start stays on screen wherever the coach has scrolled to. */
  /* Flashes its background, not its opacity: pinned at the top it now sits over
     page content, and the old opacity fade made the band and the text under it
     both unreadable at the trough. */
  .clock-band{position:sticky;top:0;z-index:20;background:var(--amber);color:#1b1405;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px;margin-bottom:0;box-shadow:0 10px 24px -10px rgba(0,0,0,.55);animation:bandflash 1.4s ease-in-out infinite}
  @keyframes bandflash{50%{background:color-mix(in srgb,var(--amber) 52%,#1b1405)}}
  .clock-band .cb-body{flex:1 1 auto;min-width:0}
  .clock-band .cb-note{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
  .clock-band .clock-big{font-size:40px;text-align:left;line-height:1.05;color:inherit;animation:none}
  .clock-band .btn-start{flex:0 0 auto;font-weight:800;font-size:15px;min-height:52px;padding:0 20px;border-radius:11px;border:1px solid #1b1405;background:#1b1405;color:var(--amber)}

  .scoreboard{
    background:linear-gradient(160deg,#1c2119,#111510);
    color:#eef2e8;border-radius:14px;padding:14px;border:1px solid #000;
    box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;
  }
  /* Period pill and the "ends ≈" estimate share the top row. */
  .sb-top{display:flex;align-items:center;gap:8px;font-family:"Bahnschrift","Oswald","Arial Narrow",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.07em;font-size:11.5px;color:#9aa79a}
  .sb-top .sp{flex:1 1 auto}
  /* Period + lives next to the badge it moves; Reset next to the clock it clears.
     Both are .pill — metrics live there, only colour is set here. */
  .sb-top .pnext{border-color:rgba(255,255,255,.22);color:#9aa79a}
  .sb-top .pnext:hover{background:rgba(255,255,255,.1);color:#eef2e8}
  .period-pill{background:var(--cone);color:#fff;font-weight:700;cursor:default}
  .period-pill.break{background:var(--amber);color:#1b1405}
  /* Practice/test game: loud amber so "this doesn't count" is unmissable in sunlight. */
  .sb-top .practice-tag{background:var(--amber);color:#1b1405;font-weight:700;cursor:default}
  .ends{color:#9aa79a;font-size:13px}
  /* The clock is a button: tap → confirm → set-clock sheet, logged as a correction. */
  /* The row is the positioning context; both edge tags are absolute, so hiding
     one (Reset, when it isn't safe) moves nothing. Never hide it with opacity. */
  .clock-wrap{position:relative;min-height:56px}
  .clock-hit{appearance:none;border:0;background:transparent;padding:0;margin:0;width:100%;display:block;cursor:pointer;font-family:inherit;color:inherit}
  .clock-big{
    font-family:"Bahnschrift","Oswald","Arial Narrow",system-ui,sans-serif;font-variant-numeric:tabular-nums;
    font-size:52px;font-weight:700;text-align:center;line-height:1;letter-spacing:.01em;color:#eef2e8;display:block;
  }
  .clock-big.warn{color:var(--cone)}
  .clock-big.run{color:#7fe0a3}
  /* Requirement 6: a stopped clock mid-game must read as an alarm, not as normal. */
  .clock-big.stopped{color:var(--amber);animation:clockflash 1.1s ease-in-out infinite}
  /* inside the amber band the digits go ink-on-amber; the band itself flashes */
  .clock-band .clock-big.stopped{color:inherit;animation:none}
  @keyframes clockflash{50%{opacity:.35}}
  @media (prefers-reduced-motion:reduce){.clock-big.stopped,.clock-band{animation:none}}
  .clock-tag{position:absolute;top:50%;transform:translateY(-50%);appearance:none;background:transparent;font-family:inherit;cursor:pointer;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7d8a7c;border:1px solid #39432f;border-radius:6px;padding:5px 7px}
  .clock-tag.edit{right:0}
  .clock-tag.reset{left:0}
  button.clock-tag:hover{color:#eef2e8;border-color:#5a6a4e}

  /* Two stacked score cards — ours green, theirs violet, steppers at 44px. */
  .score{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .score .team{border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0}
  .score .team.us{background:#1b3324;border:1px solid #2f7d4f}
  .score .team.them{background:#241f33;border:1px solid #6d5fa8}
  .score .t-row{display:flex;align-items:baseline;gap:7px;min-width:0}
  .score .nm{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .score .us .nm{color:#7fe0a3}
  .score .them .nm{color:#b6a8ec}
  /* Home/Away is ours alone — Visitors keeps the violet it has, which is the
     point of that colour: no U8 kit is ever going to clash with it. */
  .score .venue{align-self:center;flex:0 0 auto;font-size:8.5px;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;line-height:1;padding:3px 6px;border-radius:999px;
    background:rgba(127,224,163,.14);color:#7fe0a3;border:1px solid rgba(127,224,163,.34)}
  .score .val{font-family:"Bahnschrift","Oswald","Arial Narrow",system-ui,sans-serif;font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;margin-left:auto;color:#eef2e8}
  .score .sc-btns{display:flex;gap:6px}
  .score .sc-btns button{min-height:44px;border-radius:8px;cursor:pointer;font-size:18px;font-family:inherit;line-height:1}
  .score .us .sc-btns button:first-child{flex:1;border:1px solid #2f7d4f;background:transparent;color:#7fe0a3}
  .score .us .sc-btns button:last-child{flex:2;border:1px solid #4fae74;background:#4fae74;color:#08130c;font-weight:700}
  .score .them .sc-btns button:first-child{flex:1;border:1px solid #6d5fa8;background:transparent;color:#b6a8ec}
  .score .them .sc-btns button:last-child{flex:2;border:1px solid #9d8fdd;background:#9d8fdd;color:#151030;font-weight:700}
  .gd-controls{display:flex;gap:8px}
  .gd-controls button{justify-content:center;min-height:46px;border-radius:9px;flex:1;font-weight:700;font-size:14.5px}
  .btn-start{background:#4fae74;border-color:#4fae74;color:#08130c}
  .btn-pause{background:var(--cone);border-color:var(--cone)}
  /* element+two-class: a bare .btn-finish loses to `button.btn`'s green. */
  button.btn.btn-finish{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  .btn-text{appearance:none;border:0;background:none;cursor:pointer;font-family:inherit;color:#9aa79a;font-size:12px;font-weight:600;padding:4px 2px}
  .btn-text:hover{color:#eef2e8}

  /* On the field — ink panel, paper chips, position rails (8b). */
  .field-mini{position:relative;background:#0d100b;border-radius:14px;padding:14px;color:#fff;display:flex;flex-direction:column;gap:9px}
  /* layout only — the display face lives on #fmTitle so the inline hint beside
     it can stay in the body font without restating the stack */
  .field-mini h3{font-size:14px;margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
  #fmTitle{font-family:"Bahnschrift","Oswald","Arial Narrow",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;flex:0 0 auto}
  /* Secondary info riding on the section title, not a line of its own. */
  .fm-hint{flex:1 1 180px;min-width:0;font-size:11.5px;line-height:1.3;color:#9fb09b;font-weight:400;text-align:right}
  .fm-hint.armed{color:#8ef0b1;font-weight:600}
  /* "1.4p played · 2.6p left" — rewritten at 1 Hz by updateFieldLive. */
  .fm-prog{flex:0 0 auto;font:400 11px ui-monospace,Menlo,monospace;color:#8ef0b1}

  .onfield{display:flex;flex-direction:column;gap:9px}
  .posrow{display:flex;gap:9px;align-items:stretch}
  .posrow .rail{flex:0 0 auto;width:28px;display:grid;place-items:center;border-radius:8px;font-family:"Bahnschrift",system-ui,sans-serif;font-size:13px;font-weight:800}
  .rail.gk{background:var(--cone);color:#fff;font-size:11px}
  .rail.d{background:#2f7d4f;color:#fff}
  .rail.f{background:#c78a1e;color:#14100a}
  .posrow .stack{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:7px}

  /* Paper chip: season D/F strip, name row (verdict, just-on), interval track. */
  .jchip{position:relative;appearance:none;cursor:pointer;font-family:inherit;background:var(--paper);color:#14180f;border:0;border-radius:10px;padding:7px 11px 7px 9px;min-height:52px;font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:9px;width:100%;text-align:left;overflow:hidden;box-sizing:border-box}
  /* Direct sunlight kills hue and low-contrast rings; the only reliable signal
     on a washed-out screen is a luminance flip. A selected on-field player
     inverts to ink-on-cone with a dark ring — readable at arm's length in sun. */
  .jchip.sel{background:var(--cone);color:#fff;box-shadow:inset 0 0 0 3px #14180f,0 0 0 3px var(--cone)}
  .jchip.sel .verdict.met,.jchip.sel .verdict.spare{color:rgba(255,255,255,.92)}
  .jchip .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Season D/F strip: F share over D share, season periods from the archive. */
  .dfstrip{flex:0 0 auto;width:6px;height:30px;border-radius:3px;overflow:hidden;display:flex;flex-direction:column;background:rgba(20,24,15,.12)}
  .dfstrip i{width:100%;flex:0 0 auto}
  .dfstrip .f{background:#c78a1e}
  .dfstrip .d{background:#2f7d4f}

  .jchip .jbody{display:flex;flex-direction:column;gap:5px;flex:1 1 auto;min-width:0}
  .jchip .jname{display:flex;gap:6px;align-items:center;min-width:0}
  .jchip .jlive{display:flex;gap:6px;align-items:center;flex:0 0 auto}
  .badge-juston{font:800 9px system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;background:#14180f;color:#f4f2ea;border-radius:4px;padding:3px 5px;flex:0 0 auto}
  /* The verdict: the 3-of-4 arithmetic stated in words. Cone appears on a chip
     ONLY for the short pill — one meaning per colour. */
  .verdict{flex:0 0 auto;white-space:nowrap}
  .verdict.met{font:800 11px system-ui,sans-serif;color:#245f3d}
  .verdict.spare{font:700 11px ui-monospace,Menlo,monospace;color:#3f4a3e}
  .verdict.on{font:800 10px system-ui,sans-serif;letter-spacing:.03em;text-transform:uppercase;background:#14180f;color:#f4f2ea;border-radius:4px;padding:4px 6px}
  .verdict.short{font:800 10px ui-monospace,Menlo,monospace;color:#fff;background:#a3420f;border-radius:4px;padding:4px 6px}

  /* Four-segment track: dark = played (where it happened), flat grey = elapsed
     while they sat, stripes = hasn't happened yet. Notch = the minimum. */
  .jchip .track{display:flex;gap:3px;height:12px;position:relative}
  .jchip .seg{position:relative;flex:1 1 0;height:12px;border-radius:3px;overflow:hidden}
  .jchip .seg.past{background:rgba(20,24,15,.30)}
  .jchip .seg.live{background:rgba(20,24,15,.06)}
  .jchip .seg.fut{background:repeating-linear-gradient(135deg,rgba(20,24,15,.32) 0 3px,rgba(20,24,15,.10) 3px 6px)}
  .jchip .seg i{position:absolute;top:0;bottom:0}
  .jchip .seg i.el{left:0;background:rgba(20,24,15,.26)}
  .jchip .seg i.fut{right:0;background:repeating-linear-gradient(135deg,rgba(20,24,15,.32) 0 3px,rgba(20,24,15,.10) 3px 6px)}
  .jchip .seg i.iv{background:#14180f}
  .jchip .track .notch{position:absolute;top:-4px;bottom:-4px;width:2px;background:#14180f}

  /* 1-col only: goal/shot-on-goal loggers ride alongside the chip, not inside
     it — a jchip is itself a tap target (sub/swap), so these can't nest in it. */
  .jrow{display:flex;align-items:stretch;gap:6px}
  .jrow .jchip{width:auto;flex:1 1 auto}
  .jstat{display:flex;gap:4px;flex:0 0 auto}
  .statbtn{appearance:none;border:0;cursor:pointer;font-family:inherit;background:rgba(255,255,255,.09);
    color:#fff;border-radius:9px;padding:0 9px;min-width:38px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;font-size:14px;line-height:1.3;gap:1px}
  .statbtn b{font-size:10px;font-weight:800}
  .statbtn:active{background:var(--paper);color:#14180f}

  .subline{font-size:12.5px;display:flex;flex-direction:column;gap:7px;padding-top:2px}
  .subline .why{font-size:11.5px;line-height:1.45;color:#c8d2c4}
  /* Ranked swap candidates: off ⟶ on, most-owed first. */
  .sph{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:#c8d2c4;font-weight:700}
  .subpairs{display:flex;flex-direction:column;gap:6px}
  .subpairs .sp{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border-radius:9px;padding:7px 9px;min-width:0}
  .subpairs .rk{flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;
    font:800 10px "Bahnschrift",system-ui,sans-serif;display:grid;place-items:center}
  .subpairs .sd{flex:1 1 0;min-width:0;display:flex;align-items:baseline;gap:6px}
  .subpairs .who{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .subpairs .pv{font:600 10.5px ui-monospace,Menlo,monospace;color:#c8d2c4;flex:0 0 auto}
  .subpairs .sd.off .who{color:#fff}
  .subpairs .sd.on .who{color:#8ef0b1}
  .subpairs .ar{flex:0 0 auto;color:#c8d2c4;font-size:13px}

  /* Break mode: the panel is showing the period about to start, not the live one. */
  .field-mini.break{box-shadow:inset 0 0 0 2px var(--amber)}
  .field-mini.break h3{color:var(--amber)}
  .changes{display:flex;flex-direction:column;gap:6px}
  .chg-row{display:flex;align-items:baseline;gap:9px;background:rgba(255,255,255,.06);border-radius:9px;padding:8px 10px;min-width:0}
  .chg-row .lab{flex:0 0 auto;width:84px;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#c8d2c4}
  .chg-row b{flex:1 1 auto;min-width:0;font-size:14px}
  .chg-row.off b{color:#ffb59b}
  .chg-row.on b{color:#8ef0b1}
  .chg-row.gk b{color:#fff}
  .chg-row .was{flex:0 0 auto;font:600 10.5px ui-monospace,Menlo,monospace;color:#c8d2c4}
  /* Next keeper is a button with a collapsed picker under it. */
  .nk-btn{appearance:none;font-family:inherit;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:9px;color:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:46px;padding:0 12px;text-align:left;width:100%}
  .nk-btn .lab{width:78px;flex:0 0 auto}
  .nk-btn b{flex:1 1 auto;font-size:14px}
  .nk-btn .chg{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#8ef0b1;flex:0 0 auto}
  .nk-pick{display:flex;flex-wrap:wrap;gap:7px;padding-top:2px}
  .nk-pick .kchip{position:relative;appearance:none;cursor:pointer;font-family:inherit;background:var(--paper);color:#14180f;border:0;border-radius:999px;padding:0 13px;min-height:44px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:7px}
  .nk-pick .kchip .lb{font:600 10px ui-monospace,Menlo,monospace;color:#4b544a}
  .nk-pick .kchip.sel{box-shadow:0 0 0 3px var(--cone)}
  .nk-pick .kchip.capped{background:transparent;border:1px dashed rgba(255,255,255,.3);color:#c8d2c4;font-weight:600;cursor:default}
  .nk-pick .kchip.capped .lb{color:inherit}
  .nk-note{font-size:11px;line-height:1.4;color:#c8d2c4}

  /* Bench — least playing time first, full-width rows INSIDE the dark panel.
     Same chip anatomy as the field, dimmed paper — never inverted: a bench
     selection rings green, only a field selection flips to cone. */
  .field-mini .bench-note{padding-top:10px;border-top:1px solid rgba(255,255,255,.16);color:#c8d2c4;font-size:12px;display:flex;flex-direction:column;gap:7px}
  .field-mini .bench-note .bh{color:#fff;font:800 10.5px "Bahnschrift",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
  .field-mini .bench-note .bhrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .field-mini .bench-note .bkey{font-weight:400;font-size:11.5px;color:#8ef0b1}
  .benchchips{display:flex;flex-direction:column;gap:7px}
  .field-mini .jchip.bench{background:#c6c3b4;color:#14180f;min-height:50px}
  .field-mini .jchip.bench.sel{background:#c6c3b4;color:#14180f;box-shadow:0 0 0 3px #8ef0b1}

  .nudge{margin-top:16px;font-size:13px;font-weight:700;color:#14100a;background:var(--cone);border:0;border-radius:10px;padding:11px 13px}

  /* Game format (mid-game keeper ⇄ no keeper) */
  .fmt-when{margin-left:auto;font:600 11.5px ui-monospace,Menlo,monospace;color:var(--muted);text-transform:none;letter-spacing:0}
  .fmt-seg{display:flex;gap:8px;margin-bottom:11px}
  .fmt-seg button{flex:1;appearance:none;font-family:inherit;cursor:pointer;background:transparent;border:1px solid var(--line);border-radius:10px;min-height:48px;font-size:14px;font-weight:600;color:var(--ink)}
  .fmt-seg button[aria-pressed="true"]{background:var(--accent-soft);border:2px solid var(--accent);font-weight:700}
  .fmt-consec{background:var(--cone-soft);border:1px solid var(--cone);border-radius:11px;padding:12px;display:flex;flex-direction:column;gap:7px;margin-bottom:11px}
  .fmt-consec .hd{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--cone)}
  .fmt-consec div{font-size:12.5px;line-height:1.5}
  .fmt-who{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px}
  .fmt-off{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
  .fmt-off button{appearance:none;font-family:inherit;cursor:pointer;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;min-height:44px;padding:0 13px;font-size:14px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
  .fmt-off button.sel{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  .fmt-off .gkb{font-family:"Bahnschrift",system-ui,sans-serif;font-size:9px;font-weight:800;background:var(--cone);color:#fff;border-radius:4px;padding:2px 4px}
  .fmt-off .lb{font:600 10.5px ui-monospace,Menlo,monospace;color:var(--muted)}
  .fmt-off button.sel .lb{color:inherit;opacity:.7}
  .fmt-apply{display:flex;gap:8px}
  .fmt-apply .btn{min-height:48px;justify-content:center}
  .fmt-apply .wait{flex:1;font-weight:700;font-size:14px;min-height:48px;border-radius:10px;border:1px dashed var(--line);color:var(--muted);display:inline-flex;align-items:center;justify-content:center}

  /* Fix a mistake — reuses .logrow/.loghead */
  .card > h2 .num.cone{background:var(--cone)}
  .fixcard .qf{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
  .fixcard .qf button{appearance:none;font-family:inherit;font-size:14px;font-weight:600;min-height:48px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
  .fixcard .qf button .do{color:var(--cone);font-weight:700;flex:0 0 auto}
  .fix-sub{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px}
  .fixcard .loghead{min-height:46px;text-align:left}
  .fixcard .loghead .undo{color:var(--cone);font-weight:700;flex:0 0 auto}
  .fixbody{padding:11px 12px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:10px}
  .fixbody .conseq{font-size:12.5px;color:var(--muted)}
  .fixbody .btns{display:flex;gap:8px}
  .fixbody .btns .btn{min-height:44px;justify-content:center}

  /* clock confirm / set-clock sheet */
  dialog.sheet{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--surface);color:var(--ink);width:min(92vw,360px);box-shadow:0 24px 60px -20px rgba(0,0,0,.6);font-family:system-ui,"Segoe UI",Roboto,-apple-system,Helvetica,Arial,sans-serif}
  dialog.sheet::backdrop{background:rgba(9,12,8,.66)}
  dialog.sheet h4{font-family:"Bahnschrift","Oswald","Arial Narrow",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:16px;margin:0}
  dialog.sheet p{margin:12px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
  dialog.sheet .hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  dialog.sheet .was{font:600 11.5px ui-monospace,Menlo,monospace;color:var(--muted)}
  dialog.sheet .draft{font-size:54px;color:var(--ink);margin:14px 0;text-align:center}
  dialog.sheet .steps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  dialog.sheet .steps .lab{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:center;margin-bottom:6px}
  dialog.sheet .steps .pair{display:flex;gap:6px}
  dialog.sheet .steps .pair button{flex:1;min-height:48px;appearance:none;font-family:inherit;font-size:20px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer}
  dialog.sheet .btns{display:flex;gap:8px;margin-top:14px}
  dialog.sheet .btns .btn{min-height:48px;flex:1;justify-content:center}

  /* ---------- player card ----------
     One sheet for the design's 1a/1b/1c. It is taller and wider than the
     confirm sheets, scrolls its body, and pins the action bar — the phone-sized
     box IS the "full screen" framing once it fills a 390px viewport. */
  /* display MUST be scoped to [open]: an author `display` on a <dialog> beats the
     UA's `dialog:not([open]){display:none}`, and the closed sheet then renders
     in flow at the foot of the page. Same family of bug as the `hidden`
     attribute losing to `.clock-band{display:flex}`. */
  dialog.sheet.cardsheet{
    width:min(94vw,420px); max-height:min(88vh,780px); padding:0; overflow:hidden;
  }
  dialog.sheet.cardsheet[open]{display:flex; flex-direction:column}
  .cardsheet .chead{
    position:relative; flex:0 0 auto; padding:16px 16px 12px;
    border-bottom:1px solid var(--line); background:var(--surface-2);
  }
  .cardsheet .ctitle{display:flex;align-items:baseline;gap:9px}
  .cardsheet .ctitle .nm{
    font-family:"Bahnschrift","Oswald","Arial Narrow",system-ui,sans-serif;
    font-size:27px; font-weight:600; letter-spacing:-.01em; line-height:1;
  }
  .cardsheet .cnum{
    appearance:none;font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:14px;
    background:none;border:0;padding:2px 4px;color:var(--muted);cursor:pointer;border-radius:5px;
  }
  .cardsheet .cnum:hover{background:var(--surface);color:var(--ink)}
  .cardsheet .chead.out .ctitle .nm,.cardsheet .chead.out .cnum{color:var(--muted)}
  .cardsheet .csub{font-size:12.5px;color:var(--muted);margin-top:5px}
  .cardsheet .cpills{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
  .cpill{
    font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;
    border-radius:5px;padding:6px 8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  }
  .cpill.go{background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent)}
  .cpill.warn{background:var(--cone-soft);color:var(--cone);border-color:var(--cone)}
  .cardsheet .cclose{
    position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:9px;
    border:1px solid var(--line);background:var(--surface);color:var(--muted);
    font-size:18px;line-height:1;cursor:pointer;appearance:none;font-family:inherit;
  }
  .cardsheet .cbody{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:18px}
  .cardsheet .cblk{display:flex;flex-direction:column;gap:9px}
  .cardsheet .chd{
    display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    font-family:"Bahnschrift","Oswald","Arial Narrow",system-ui,sans-serif;
    font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  }
  .cardsheet .chd .w{font:400 11px ui-monospace,Menlo,monospace;letter-spacing:0;text-transform:none;color:var(--muted)}

  /* the period bar: one cell per period, filled by the share actually played,
     with a notch at the guide's minimum */
  .cbars{display:flex;gap:3px;height:16px;position:relative}
  .cbar{flex:1 1 0;height:16px;border-radius:3px;overflow:hidden;background:var(--chalk);opacity:.45}
  .cbar.done,.cbar.live{opacity:1}
  .cbar i{display:block;height:100%;background:var(--ink)}
  .cbar.live i{background:var(--accent)}
  .cbar.plan i{background:var(--muted)}
  .cnotch{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--cone);transform:translateX(-1px)}
  .cbarlabs{display:flex;gap:3px;font:600 9.5px ui-monospace,Menlo,monospace;color:var(--muted)}
  .cbarlabs span{flex:1 1 0}
  .cardsheet .cnote{margin:0;font-size:13px;line-height:1.55;color:var(--ink)}
  .cardsheet .cnote .ok{color:var(--accent-deep)}
  .cardsheet .cnote .bad{color:var(--cone)}

  .ctiles{display:flex;gap:7px}
  .ctile{flex:1 1 0;min-width:0;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
    padding:8px 9px;display:flex;flex-direction:column;gap:2px}
  .ctile b{font:700 19px/1 ui-monospace,Menlo,monospace;color:var(--ink)}
  .ctile b.gk{color:var(--cone)} .ctile b.d{color:var(--accent)} .ctile b.f{color:var(--amber)}
  .ctile i{font:600 9px/1.2 system-ui;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-style:normal}

  .clist{display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;overflow:hidden}
  .clist .crow{display:flex;gap:9px;align-items:baseline;padding:8px 10px;border-bottom:1px solid var(--line)}
  .clist .crow:last-child{border-bottom:0}
  .clist .crow .k{flex:0 0 74px;font:600 10.5px/1.3 ui-monospace,Menlo,monospace;color:var(--muted)}
  .clist .crow .v{flex:1 1 auto;font-size:12.5px;line-height:1.35}
  .clist .crow.live{background:var(--accent-soft)}
  .clist .crow.live .k,.clist .crow.live .lv{color:var(--accent-deep)}
  .clist .crow .lv{flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
  .clist .crow.out .v{color:var(--muted)}
  .cempty{padding:10px;font-size:12.5px;color:var(--muted)}

  .cbig{display:flex;align-items:flex-end;gap:12px}
  .cbig b{font:700 40px/1 ui-monospace,Menlo,monospace;letter-spacing:-.03em}
  .cbig span{flex:1 1 auto;font-size:12.5px;line-height:1.45;color:var(--muted)}
  .cbig span b{font-size:12.5px;color:var(--ink);font-family:inherit;letter-spacing:0}
  .csplit{display:flex;height:12px;border-radius:3px;overflow:hidden;background:var(--chalk)}
  .csplit .d{background:var(--accent)} .csplit .f{background:var(--amber)} .csplit .gk{background:var(--cone)}
  .ckey{display:flex;gap:14px;font:600 11px system-ui;color:var(--muted)}
  .ckey span{display:inline-flex;align-items:center;gap:5px}
  .ckey i{width:9px;height:9px;border-radius:2px;display:block}
  .ckey i.d{background:var(--accent)} .ckey i.f{background:var(--amber)} .ckey i.gk{background:var(--cone)}

  .cnotes{display:flex;flex-direction:column;gap:6px}
  .cnoteitem{display:flex;align-items:flex-start;gap:9px;padding:10px;background:var(--surface-2);
    border-left:3px solid var(--accent-deep);border-radius:0 9px 9px 0}
  .cnoteitem .k{flex:0 0 auto;font:600 10px/1.5 ui-monospace,Menlo,monospace;color:var(--muted)}
  .cnoteitem .t{flex:1 1 auto;font-size:13px;line-height:1.5}
  .cnoteitem .x{flex:0 0 auto;appearance:none;border:0;background:none;color:var(--muted);
    font-size:15px;line-height:1;cursor:pointer;padding:0 2px;font-family:inherit}

  .cardsheet .cacts{flex:0 0 auto;display:flex;gap:7px;padding:11px 16px 14px;
    border-top:1px solid var(--line);background:var(--surface)}
  .cardsheet .cacts .btn{flex:1 1 auto;min-height:46px;justify-content:center}
  .cardsheet .cacts .btn.sq{flex:0 0 auto;width:46px;padding:0}

  /* the roster row's card target — the row itself is already the IN/OUT toggle */
  ul.roster .rowinfo{
    flex:0 0 auto;appearance:none;font-family:inherit;cursor:pointer;
    width:34px;height:34px;margin-right:4px;border-radius:9px;border:1px solid var(--line);
    background:var(--surface-2);color:var(--muted);font-size:15px;line-height:1;display:grid;place-items:center;
  }
  ul.roster .rowinfo:hover{background:var(--accent-soft);color:var(--accent-deep)}
  /* a 500ms hold on a chip opens the card — without this the hold selects text
     or raises the OS callout instead */
  .jchip{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

  /* season archive: leaders board + per-game rollup */
  .sec-head{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:16px 0 8px}
  .sec-head:first-of-type{margin-top:4px}
  .statlist{display:flex;flex-direction:column;gap:6px}
  .statlist .sr{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);
    border-radius:9px;padding:8px 11px;min-width:0}
  .statlist .rk{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:var(--accent);color:#fff;
    font:800 10px "Bahnschrift",system-ui,sans-serif;display:grid;place-items:center}
  .statlist .who{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .statlist .v{flex:0 0 auto;display:flex;gap:12px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
  .statlist .v b{color:var(--ink);font-size:13px}
  /* inside an expanded game row the rollup is a quieter inset band */
  .statlist.game{gap:4px;padding:9px 12px 2px;background:transparent}
  .statlist.game .sr{background:transparent;border:0;border-radius:0;padding:2px 0}
  .statlist.game .who{font-size:12.5px}

  /* goal sheet — who scored / who assisted / which goal comes off */
  .gpick{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
  .gpick .gp{appearance:none;font-family:inherit;cursor:pointer;background:var(--surface-2);color:var(--ink);
    border:1px solid var(--line);border-radius:999px;min-height:48px;padding:0 16px;font-size:15px;font-weight:700}
  .gpick .gp:hover{border-color:var(--accent)}
  .gpick .gp.sel{background:var(--accent);border-color:var(--accent);color:#fff}
  .glist{display:flex;flex-direction:column;gap:8px;margin:14px 0 0;max-height:46vh;overflow-y:auto}
  .glist .grow{display:flex;gap:8px}
  .glist .gmain{flex:1 1 auto;min-width:0;appearance:none;font-family:inherit;cursor:pointer;text-align:left;
    background:var(--surface-2);border:1px solid var(--line);border-radius:10px;min-height:52px;padding:0 12px;
    color:var(--ink);display:flex;align-items:center;gap:10px}
  .glist .gmain:hover{border-color:var(--cone)}
  .glist .gw{flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .glist .gt{flex:0 0 auto;font:600 11px ui-monospace,Menlo,monospace;color:var(--muted)}
  .glist .gx{flex:0 0 auto;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--cone)}
  .glist .gtime{flex:0 0 auto;appearance:none;cursor:pointer;font-family:inherit;font-size:15px;width:48px;
    background:transparent;border:1px solid var(--line);border-radius:10px;color:var(--muted)}
  .glist .gtime:hover{border-color:var(--accent);color:var(--ink)}
  dialog.sheet .draft.tnum{font-size:34px}
  dialog.sheet #askInput{margin-top:12px}

  /* game log */
  .logrow{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;overflow:hidden}
  .loghead{appearance:none;border:0;background:var(--surface-2);color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:600;
    width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;cursor:pointer}
  .logrow.open .loghead{border-bottom:1px dashed var(--line)}
  .loglist{list-style:none;margin:0;padding:8px 12px;display:flex;flex-direction:column;gap:4px;font-size:12.5px}
  .loglist .tnum{color:var(--muted);margin-right:6px}
  /* team switcher — lives in the FAB sheet, so it matches the .tab rows there */
  select.teamsel{width:100%;font-size:14px;font-weight:600;min-height:46px;padding:0 12px;border-radius:11px;
    background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
  /* season position ratio column */
  table.lineup td.pos{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
  table.lineup td.pos.owed{color:var(--cone);font-weight:700}

  /* checklists + rules */
  ul.check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13.5px}
  ul.check label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
  ul.check input{width:18px;height:18px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--accent)}
  ul.check input:checked + span{color:var(--muted);text-decoration:line-through}
  ul.check b{color:var(--cone)}
  .rules h3{font-family:"Bahnschrift","Oswald",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.03em;font-size:13.5px;margin:18px 0 6px;color:var(--accent-deep)}
  :root[data-theme="dark"] .rules h3{color:var(--accent)}
  @media (prefers-color-scheme:dark){.rules h3{color:var(--accent)}}
  .rules h3:first-child{margin-top:0}
  .rules ul{margin:0;padding-left:18px;font-size:13.5px;display:flex;flex-direction:column;gap:4px}
  .rules ul li::marker{color:var(--chalk)}
  /* Toasts stack bottom-up. Sticky ones (subs, period changes) wait to be tapped. */
  /* clears the FAB nav (52px at bottom:16px) — a stack of sticky toasts must
     never sit on top of the only way to change tabs */
  .toaststack{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:50;
    width:min(94vw,440px);display:flex;flex-direction:column;align-items:stretch;gap:8px;pointer-events:none}
  /* only present once a second toast lands */
  .toastbar{display:flex;justify-content:flex-end;pointer-events:auto}
  .toastbar button{appearance:none;font-family:inherit;cursor:pointer;font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;padding:5px 11px;border-radius:999px;
    background:var(--ink);color:var(--bg);border:1px solid var(--bg);opacity:.9;box-shadow:var(--shadow)}
  .toastbar button:hover{opacity:1}
  .toast{background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:14px;font-size:13.5px;font-weight:600;
    line-height:1.35;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s;
    pointer-events:auto;cursor:pointer;display:flex;align-items:flex-start;gap:12px}
  .toast.show{opacity:1;transform:none}
  .toast .tmsg{flex:1 1 auto;min-width:0}
  .toast.stick{background:var(--cone);color:#14100a;box-shadow:0 10px 30px -10px rgba(0,0,0,.55)}
  .toast .tage{flex:0 0 auto;font:600 10.5px ui-monospace,Menlo,monospace;opacity:.7;line-height:1.5;white-space:nowrap}
  .toast .x{flex:0 0 auto;font-size:13px;opacity:.65;line-height:1.35}

  /* Wrist alerts sits under the "ends ≈" readout so the top row still reads
     left-to-right as badge · spacer · timings, not as a row of controls. */
  .sb-top{flex-wrap:wrap}

  /* ---------- pocket lock ---------- */
  /* ponytail: one fixed div that eats every touch. A web app gets no proximity
     or ambient-light sensor on iOS, and nothing on the web can blank a screen,
     so the stray-tap fix is an explicit lock — not a sensor. Dark on purpose:
     less light out of a pocket, less battery on an OLED. */
  .lockscreen{position:fixed;inset:0;z-index:200;
    background:linear-gradient(160deg,#1c2119,#111510);color:#eef2e8;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    text-align:center;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}
  .lk-period{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9aa79a}
  .lk-clock{font-size:min(32vw,190px);line-height:1;font-weight:700}
  .lk-clock.stopped{color:var(--cone)}
  .lk-score{font-size:26px;font-weight:700;color:#9aa79a}
  .lk-hint{margin-top:30px;font-size:13px;color:#9aa79a}
  .lk-bar{margin-top:10px;width:170px;height:4px;border-radius:2px;background:#2f382c;overflow:hidden}
  .lk-bar>i{display:block;height:100%;width:0;background:#4fae74;border-radius:2px}
  .lockscreen.holding .lk-bar>i{width:100%;transition:width .8s linear}
  /* Start keeps the width it had — Lock is a trailing affordance, not a peer. */
  .gd-controls .lk-btn{flex:0 0 auto}

  .foot-note{text-align:center;color:var(--muted);font-size:12px;margin-top:26px;line-height:1.7}
  .foot-note b{color:var(--ink)}

  /* On a phone the clock and the field are the app — they get the full width,
     bleeding through .app's 16px gutter. Colours stay so the sections still read. */
  @media(max-width:719px){
    .clock-band,.scoreboard,.field-mini{margin-left:-16px;margin-right:-16px;border-radius:0;border-left:0;border-right:0}
  }

  /* print */
  @media print{
    .board,nav.tabs,.tab,.no-print{display:none!important}
    .panel{display:none!important}
    .panel.print-me{display:block!important}
    body,.wrap{background:#fff;color:#000}
    .card,.drill{box-shadow:none;border-color:#ccc}
  }