:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found]){display:none!important}
  /* Larger rink scoreboard, with a stable three-column layout on phones. */
  #live-board{padding:12px !important;}
  #live-board .scoreboard{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); min-height:390px; padding:38px 28px; gap:20px; border-radius:22px; border-top:6px solid var(--red);}
  #live-board .sb-side{min-width:0; display:flex; flex-direction:column; gap:18px;}
  #live-board .sb-score{order:-1; font-family:'Anton',Impact,sans-serif; font-size:clamp(100px,13vw,170px); line-height:1; color:#fff;}
  #live-board .sb-name{font-size:clamp(16px,2.2vw,25px); letter-spacing:.025em; line-height:1.25; overflow-wrap:anywhere; color:#fff;}
  #live-board .sb-clock{font-size:clamp(18px,2.4vw,28px);}
  #live-board .sb-mid{padding:12px; border-radius:12px; background:#071b2ed9;}
  #live-board .sb-status{font-size:14px; margin-top:8px;}
  #modal-extra[hidden]{display:none;}
  @media(max-width:600px){
    #live-board{padding:6px !important;}
    #live-board .scoreboard{min-height:285px;padding:25px 10px;gap:8px;border-radius:16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
    #live-board .sb-mid{grid-column:1 / -1;grid-row:2;justify-self:center;padding:8px 18px;}
    #live-board .sb-score{font-size:96px;}
    #live-board .sb-name{font-size:16px;}
    #live-board .sb-side{gap:12px;}
    #live-board .sb-clock{font-size:22px;}
    #live-board .sb-status{font-size:12px;margin-top:4px;}
  }


  /* Season played-game rows: hover/focus affordance for the boxscore popup. */
  #season-months .game-row.played{transition:background .18s,transform .18s,box-shadow .18s;position:relative;cursor:pointer;}
  @media(hover:hover){#season-months .game-row.played:hover{background:#dcecf8;transform:scale(1.008);z-index:2;box-shadow:0 4px 14px #183b5626;}}
  #season-months .game-row.played:focus-visible{outline:3px solid #2174a5;outline-offset:-3px;background:#dcecf8;}
  @media(prefers-reduced-motion:reduce){#season-months .game-row.played{transition:none;transform:none;}}

  /* Boxscore popup modal: wider card + scrollable body for a full play-by-play. */
  .modal-card.modal-boxscore{max-width:560px;}
  .modal-card.modal-boxscore #modal-fields{max-height:min(70vh,560px);overflow-y:auto;padding-right:4px;}
  .season-final{padding:14px 16px;margin-bottom:14px;border-radius:8px;background:#173a57;color:#fff;font-size:15px;font-weight:750;line-height:1.5;}
  @media(max-width:600px){.modal-card.modal-boxscore{max-width:100%;} .season-final{font-size:14px;}}


  /* Distinct category badges; labels remain visible as well as color. */
.game-row .side.home, .day-pill.home, .type-tag.home{background:#dbeafe;color:#153e75;border:1px solid #9ebfe8;}
.game-row .side.away, .day-pill.away, .type-tag.away{background:#ffe4e6;color:#961c36;border:1px solid #e9a7b3;}
.game-row .side.practice, .day-pill.practice, .type-tag.practice{background:#dcf3e3;color:#205c37;border:1px solid #a3d4b2;}
.game-row .side.skills, .day-pill.skills, .type-tag.skills{background:#eee3ff;color:#62328d;border:1px solid #c9abe8;}
.game-row .side.dryland, .day-pill.dryland, .type-tag.dryland{background:#fff0ce;color:#80500a;border:1px solid #e4c27b;}
.gwg-badge{display:inline-block;flex:none;align-self:flex-start;margin:2px 0 0 8px;padding:2px 7px;background:#fff0bf;color:#704800;border:1px solid #d6ad46;border-radius:6px;font-size:11px;font-weight:800;white-space:nowrap;}
.matchup-badge{display:inline-block;vertical-align:middle;margin:4px 0 4px 8px;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:700;line-height:1.4;background:#e4eff8;color:#234e70;border:1px solid #b9cfe0;white-space:nowrap;}.matchup-badge.first{background:#edf5e5;color:#386127;border-color:#c4d9b5;}
.schedule-opponent{min-width:0;}.schedule-opponent-heading{display:flex;align-items:center;gap:12px;}.schedule-team-logo{width:46px;height:46px;object-fit:contain;flex:none;background:#fff;padding:4px;border:1px solid #d6e0e8;border-radius:8px;}.schedule-opponent .meta{margin-top:7px;}@media(max-width:600px){.schedule-team-logo{width:36px;height:36px;}.schedule-opponent-heading{gap:8px;}}
.play-row .play-desc{min-width:0;}
.penalty-summary{margin-top:24px;padding:14px 16px;background:#f5f7f9;border:1px solid #dce3e9;border-radius:8px;color:#526171;}.penalty-summary h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:#536578;}.penalty-period+ .penalty-period{margin-top:12px;}.penalty-period h5{margin:0 0 5px;font-size:11px;color:#627285;}.penalty-summary-row{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:12px;line-height:1.5;border-top:1px solid #e3e8ed;}.penalty-clock{font-family:'IBM Plex Mono',monospace;font-size:11px;flex:none;}.penalty-description{flex:1;min-width:0;}.penalty-description b{font-weight:600;}.penalty-summary .event-row-actions button{font-size:10px;padding:3px 5px;}@media(max-width:600px){.penalty-summary{padding:12px 10px;}}


/* ---- */


  :root{
    --navy:#0f1f3d;
    --navy-2:#16294f;
    --navy-3:#1e3560;
    --red:#c8102e;
    --red-2:#e2233f;
    --ice:#3fb8d6;
    --ice-2:#7fd4e8;
    --paper:#faf9f5;
    --surface:#ffffff;
    --surface-2:#f1f3f6;
    --ink:#101826;
    --ink-dim:#4a5568;
    --border:#d8deea;
    --win:#1c8a4c;
    --loss:#c8102e;
    --shadow: 0 1px 2px rgba(15,31,61,.06), 0 8px 24px -12px rgba(15,31,61,.18);
  }

  *{box-sizing:border-box;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing:antialiased;
    text-wrap:pretty;
  }
  h1,h2,h3,.display{
    font-family:'Anton', 'Public Sans', sans-serif;
    font-weight:400;
    letter-spacing:.02em;
    text-transform:uppercase;
    text-wrap:balance;
  }
  .mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }
  a{ color:var(--ice); }
  button{ font-family:inherit; }

  /* ---------- Header ---------- */
  header.top{
    position:sticky; top:0; z-index:20;
    background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
    border-bottom:3px solid var(--red);
    box-shadow:var(--shadow);
  }
  .top-inner{
    max-width:1180px; margin:0 auto; padding:12px 20px;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  }
  .crest{
    width:50px; height:50px; border-radius:8px;
    border:1px solid rgba(255,255,255,.15);
    display:flex; align-items:center; justify-content:center;
    flex:none; overflow:hidden;
  }
  .crest img{ width:100%; height:100%; object-fit:contain; }
  .wordmark{ line-height:1.05; flex:none; }
  .wordmark .l1{ color:#fff; font-size:19px; letter-spacing:.03em; }
  .wordmark .l2{ color:var(--ice-2); font-size:10.5px; letter-spacing:.16em; font-family:'Public Sans',sans-serif; text-transform:uppercase; font-weight:600; }
  nav.tabs{
    display:flex; gap:2px; margin-left:8px; flex:1;
    overflow-x:auto; scrollbar-width:none;
  }
  nav.tabs::-webkit-scrollbar{ display:none; }
  nav.tabs button{
    position:relative;
    background:transparent; border:none; color:#c9d4e8;
    padding:10px 14px; font-size:13.5px; font-weight:600;
    letter-spacing:.02em; border-radius:8px; cursor:pointer;
    white-space:nowrap;
    transition:background .15s, color .15s;
  }
  nav.tabs button:hover{ background:rgba(255,255,255,.08); color:#fff; }
  nav.tabs button.active{ background:var(--red); color:#fff; }
  .live-dot{
    display:inline-block; width:8px; height:8px; border-radius:50%;
    background:#ff3b3b; margin-left:7px; vertical-align:middle;
    animation:livepulse 1.6s ease-in-out infinite;
  }
  @keyframes livepulse{
    0%{ box-shadow:0 0 0 0 rgba(255,59,59,.55); }
    70%{ box-shadow:0 0 0 7px rgba(255,59,59,0); }
    100%{ box-shadow:0 0 0 0 rgba(255,59,59,0); }
  }
  @media (prefers-reduced-motion: reduce){ .live-dot{ animation:none; } }
  .menu-toggle{
    display:none; order:3;
    width:38px; height:38px; flex:none;
    align-items:center; justify-content:center;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
    color:#fff; border-radius:8px; font-size:18px; line-height:1; cursor:pointer;
  }
  .menu-toggle:hover{ background:rgba(255,255,255,.16); }
  @media (max-width:760px){
    .crest{ order:0; }
    .wordmark{ order:1; }
    .wordmark .l2{ display:none; }
    .record-chip{ order:2; }
    .menu-toggle{ display:flex; }
    nav.tabs{
      order:4; display:none; flex-direction:column; gap:3px;
      flex:none; flex-basis:100%; width:100%;
      margin:8px 0 0; overflow-x:visible;
      max-height:min(60vh, 420px); overflow-y:auto;
    }
    nav.tabs.mobile-open{ display:flex; }
    nav.tabs button{ width:100%; text-align:left; padding:13px 14px; font-size:15px; }
  }
  .record-chip{
    flex:none;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    color:#fff; border-radius:999px; padding:6px 12px;
    font-size:12.5px; display:flex; align-items:center; gap:7px;
  }
  .record-chip b{ font-family:'IBM Plex Mono'; font-size:14px; color:var(--ice-2); }

  /* ---------- Layout ---------- */
  main{ max-width:1180px; margin:0 auto; padding:24px 20px 64px; }
  .panel{ display:none; }
  .panel.active{ display:block; animation:fade .25s ease; }
  @media (prefers-reduced-motion: reduce){ .panel.active{ animation:none; } }
  @keyframes fade{ from{ opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

  .grid{ display:grid; gap:16px; }
  .card{
    background:var(--surface); border:1px solid var(--border);
    border-radius:14px; box-shadow:var(--shadow);
  }
  .section-label{
    display:flex; align-items:center; gap:10px;
    margin:32px 0 14px;
  }
  .section-label:first-child{ margin-top:0; }
  .section-label h2{ font-size:17px; color:var(--ink); margin:0; }
  .section-label .count{
    background:var(--surface-2); color:var(--ink-dim);
    font-family:'IBM Plex Mono'; font-size:12px; border-radius:999px;
    padding:2px 9px; font-weight:600;
  }
  .section-label .rule{ flex:1; height:1px; background:var(--border); }

  /* ---------- Home ---------- */
  .game-card{
    display:grid; grid-template-columns:minmax(84px,auto) 1fr auto; gap:16px; align-items:center;
    padding:14px 18px 14px 15px;
    background:linear-gradient(120deg, var(--navy) 0%, var(--navy-3) 100%);
    border-left:4px solid var(--red-2);
    color:#fff; position:relative; overflow:hidden;
  }
  .game-card::after{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 34px);
    pointer-events:none;
  }
  .game-card.tbd{ background:linear-gradient(120deg, var(--navy-2) 0%, var(--navy-3) 100%); opacity:.88; border-left-color:var(--ice); }
  .game-card.recap{ background:linear-gradient(120deg, #2f4f79 0%, #3a5f8f 100%); border-left-color:var(--ice); }
  .game-card.recap .gc-opp,.game-card.recap .gc-time,.game-card.recap .gc-meta{ color:#eaf3fb; }
  .gc-when{ display:flex; flex-direction:column; align-items:center; gap:4px; }
  .gc-when .gc-time{ font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--ice-2); font-weight:600; white-space:nowrap; }
  /* Result badge (W/L/T or LIVE) inside a card: one consistent size/weight for
     every outcome, and smaller than the date pill above it — not the bigger,
     bolder look the Season-page contrast fix gave the W/L variant everywhere else. */
  .gc-when .gc-time .result{ font-size:11px; font-weight:800; padding:3px 9px; }
  .gc-opp{ font-family:'Anton'; font-size:18px; letter-spacing:.01em; }
  .gc-meta{ color:var(--ice-2); font-size:12.5px; margin-top:2px; }
  .gc-note{ font-size:12px; color:#ffe9a8; text-align:right; white-space:nowrap; }
  .gc-note.muted{ color:rgba(255,255,255,.55); font-style:italic; }

  .rink-row{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:14px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap;
  }
  .rink-row:last-child{ border-bottom:none; }
  .rink-row .rink-name{ font-weight:700; font-size:14.5px; }
  .rink-row .rink-games{ font-size:12.5px; color:var(--ink-dim); margin-top:2px; }

  .switch-row{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; margin:14px 0 4px; }
  .switch-label{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-dim); cursor:pointer; user-select:none; }
  .switch{ position:relative; width:36px; height:20px; flex:none; }
  .switch input{ opacity:0; width:0; height:0; position:absolute; }
  .switch .slider{ position:absolute; inset:0; background:var(--border); border-radius:999px; transition:.2s; }
  .switch .slider::before{ content:""; position:absolute; width:16px; height:16px; left:2px; top:2px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.25); }
  .switch input:checked + .slider{ background:var(--ice); }
  .switch input:checked + .slider::before{ transform:translateX(16px); }
  .switch input:focus-visible + .slider{ outline:2px solid var(--ice); outline-offset:2px; }

  .scoreboard{
    position:relative; isolation:isolate; overflow:hidden;
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding:28px 20px; border-radius:14px;
    background:
      radial-gradient(120% 140% at 50% -10%, rgba(63,184,214,.22), transparent 62%),
      linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  }
  .scoreboard .rink-bg{
    position:absolute; inset:0; z-index:0; pointer-events:none;
  }
  .scoreboard .rink-bg svg{ width:100%; height:100%; display:block; }
  .scoreboard > *{ position:relative; z-index:1; }
  .scoreboard .sb-side{ text-align:center; flex:1; min-width:130px; }
  .scoreboard .sb-side .sb-name{ color:var(--ice-2); font-size:12.5px; text-transform:uppercase; letter-spacing:.09em; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.5); }
  .scoreboard .sb-side.opp .sb-name{ color:#ffb4bb; }
  .scoreboard .sb-side .sb-score{ font-family:'IBM Plex Mono'; font-size:78px; font-weight:700; line-height:1.05; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.5); }
  .scoreboard .sb-side.us .sb-score{ color:#bdeeff; }
  .scoreboard .sb-side.opp .sb-score{ color:#ffd7dc; }
  .scoreboard .sb-mid{ text-align:center; }
  .scoreboard .sb-clock{ font-family:'IBM Plex Mono'; font-size:17px; font-weight:600; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5); }
  .scoreboard .sb-status{ font-size:11.5px; color:var(--ice-2); margin-top:3px; letter-spacing:.06em; font-weight:700; }
  .scoreboard .sb-status.live{ color:#ff5b6c; }
  @media (max-width:520px){ .scoreboard .sb-side .sb-score{ font-size:56px; } }
  .bench-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    border:none; border-radius:999px; padding:10px 16px; font-weight:700; font-size:13px;
    cursor:pointer; color:#fff; background:var(--navy-3); min-height:44px;
  }
  .bench-btn.clock-primary{ min-height:64px; padding:14px 28px; font-size:18px; min-width:190px; border-radius:14px; }
  .bench-btn.team-action{ width:100%; min-height:52px; font-size:15px; border-radius:12px; }
  .bench-team-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .bench-team-section{ border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--surface-2); }
  .bench-team-title{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:9px; }
  .bench-team-title.us{ color:var(--ice); }
  .bench-team-title.opp{ color:var(--red); }
  @media (max-width:620px){ .bench-team-grid{ grid-template-columns:1fr; } .bench-btn.clock-primary{ width:100%; } }
  .bench-btn.win{ background:var(--win); }
  .bench-btn.loss{ background:var(--ink-dim); }
  .bench-btn.red{ background:var(--red); }
  .bench-btn.ghost{ background:transparent; color:var(--ink-dim); border:1px solid var(--border); }
  .bench-field{ padding:9px 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:14px; font-family:inherit; }
  .bench-status-msg{ font-size:12px; color:var(--ink-dim); margin-top:8px; min-height:16px; }
  .bench-clock-wrap{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    background:var(--surface-2); border-radius:12px; padding:12px 16px;
  }
  .bench-clock-big{ font-family:'IBM Plex Mono'; font-weight:700; font-size:38px; line-height:1; color:var(--ink); }
  .bench-clock-sub{ font-size:11px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }

  table.plain{ width:100%; border-collapse:collapse; }
  #stats-table{ table-layout:fixed; width:100%; min-width:520px; }
  /* # and Player columns size to fit their content (jersey number, name + "R" badge)
     on one line; the remaining stat columns (GP/G/A/Pts/Pts-per-Gm/PIM) are left
     without an explicit width so table-layout:fixed divides the rest equally. */
  #stats-table th:nth-child(1), #stats-table td:nth-child(1){ width:34px; white-space:nowrap; }
  #stats-table th:nth-child(2), #stats-table td:nth-child(2){ width:172px; white-space:nowrap; }
  #stats-table th:nth-child(n+3), #stats-table td:nth-child(n+3){ text-align:center; }
  .stat-lead{ font-weight:800; color:var(--red-2); }
  table.plain th{
    text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-dim); padding:10px 16px; border-bottom:1px solid var(--border);
    background:var(--surface-2);
  }
  table.plain td{ padding:12px 16px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:top; }
  table.plain tr:last-child td{ border-bottom:none; }
  .day-pill{
    font-family:'Anton'; font-size:12px; background:var(--navy); color:#fff;
    border-radius:6px; padding:3px 9px; display:inline-block; letter-spacing:.04em;
    white-space:nowrap;
  }
  .day-pill.skills{ background:var(--ice); color:var(--navy); }
  .game-card .day-pill{ background:var(--red-2); }
  .muted{ color:var(--ink-dim); }
  .table-wrap{ overflow-x:auto; }

  .note{
    display:flex; gap:10px; padding:14px 16px; border-radius:10px;
    background:var(--surface-2); border:1px dashed var(--border);
    font-size:13px; color:var(--ink-dim); line-height:1.5;
  }
  .note b{ color:var(--ink); }

  /* ---------- Live banner ---------- */
  .live-banner{ display:none; position:relative; z-index:20; background:#c8102e; color:#fff; box-shadow:0 3px 12px rgba(200,16,46,.22); }
  .live-banner.show{ display:block; }
  .live-banner a{ display:flex; align-items:center; justify-content:center; gap:14px; min-height:50px; padding:10px 18px; color:#fff; text-decoration:none; font-weight:800; }
  .live-banner .live-label{ display:inline-flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
  .live-banner .live-pulse{ width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:livePulse 1.5s infinite; }
  .live-banner .live-score{ font-family:'IBM Plex Mono',monospace; font-size:16px; }
  .live-banner .live-meta{ font-size:12px; font-weight:600; opacity:.9; }
  .live-banner .live-arrow{ font-size:16px; opacity:.85; }
  @keyframes livePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.65); } 50%{ box-shadow:0 0 0 6px rgba(255,255,255,0); } }
  @media(max-width:600px){ .live-banner a{ gap:9px; justify-content:space-between; } .live-banner .live-meta{ display:none; } .live-banner .live-score{ font-size:14px; } }

  /* ---------- Season ---------- */
  .season-record{
    padding:22px 24px; color:#fff;
    background:linear-gradient(120deg, var(--navy) 0%, var(--navy-3) 100%);
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  }
  .season-record .num{ font-family:'IBM Plex Mono'; font-size:42px; font-weight:600; line-height:1; }
  .season-record .num.good{ color:#8fe8b4; }
  .season-record .num.bad{ color:#ffb4bb; }
  .season-record .lbl{ color:var(--ice-2); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-top:4px; }
  .season-record .stats{ display:flex; gap:28px; flex-wrap:wrap; }
  #season-months{ margin-top:28px; }
  .month-group{ margin-bottom:26px; }
  .month-title{
    font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
    color:var(--navy); margin:0 2px 10px; display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  }
  .month-title span:last-child{ color:var(--ink-dim); font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:none; }
  .game-row{
    display:grid; grid-template-columns: 64px minmax(0,1fr) auto; gap:16px; align-items:center;
    min-height:74px; padding:15px 18px; border-bottom:1px solid #d5dbe5;
  }
  .game-row:last-child{ border-bottom:none; }
  .month-group .card{ overflow:hidden; border:1px solid #d4dbe6; box-shadow:0 2px 8px rgba(15,31,61,.06); }
  .game-row .side{
    font-family:'Anton'; font-size:10.5px; text-align:center; padding:6px 0; border-radius:6px;
    letter-spacing:.05em;
  }
  .game-row .side.away{ background:#fde8ec; color:#a70f27; border:1px solid #f4c4cd; }
  .game-row .side.home{ background:#e5f6fb; color:#176b7e; border:1px solid #b9e5ef; }
  .game-row .opp{ font-weight:800; font-size:15px; color:var(--navy); line-height:1.25; }
  .game-row .meta{ font-size:12px; color:#5d6878; margin-top:4px; line-height:1.4; }
  .result{
    font-family:'IBM Plex Mono'; font-weight:600; font-size:14px;
    padding:5px 11px; border-radius:7px; white-space:nowrap;
  }
  .result.w{ background:#d9f2e2; color:#0f6934; border:1px solid #a9dfc0; font-weight:800; }
  .result.l{ background:#fbdde2; color:#8f0c22; border:1px solid #f3b3bf; font-weight:800; }
  .result.pending{ background:#eef2f6; color:#4b5869; border:1px solid #d7dee7; font-family:'Public Sans'; font-size:12px; font-weight:700; }
  .game-row.played{ background:linear-gradient(90deg, #e4eef4, #eef4f8); border-left:4px solid #6a8798; padding-left:14px; min-height:44px; padding-top:8px; padding-bottom:8px; }
  .game-row.played .opp{ font-size:13.5px; }
  .game-row.played .meta{ font-size:11px; margin-top:2px; }
  .game-row.played .schedule-opponent-heading{ gap:8px; }
  .game-row.upcoming{ background:#fff; border-left:4px solid var(--ice); padding-left:14px; }
  .game-row.upcoming:hover{ background:#f3fbfd; }
  .game-row.practice{ background:#fffcf5; border-left:4px solid #d7a33d; padding-left:14px; }
  .game-row .type-tag{ display:inline-block; margin-left:7px; padding:3px 8px; border-radius:999px; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; vertical-align:middle; }
  .type-tag.league{ background:#dcecff; color:#164d8a; }
  .type-tag.tournament{ background:#fff0cf; color:#7a4d00; }
  .type-tag.skills{ background:#d9f5fb; color:#0d6274; }
  .type-tag.practice{ background:#e8f3e8; color:#28623a; }
  .type-tag.dryland{ background:#eee7ff; color:#5a3c8f; }
  .arrival{ display:inline-block; margin-left:8px; color:#526171; font-size:11px; font-weight:600; }
  .arrival b{ color:#173a57; }
  @media(max-width:600px){
    .season-record{ padding:18px 16px; gap:16px; }
    .season-record .num{ font-size:36px; }
    .season-record .stats{ gap:16px 22px; }
    #season-months{ margin-top:22px; }
    .month-group{ margin-bottom:22px; }
    .month-title{ margin-left:0; margin-right:0; }
    .game-row{
      grid-template-columns:52px minmax(0,1fr) auto;
      gap:10px;
      min-height:72px;
      padding:12px 12px;
    }
    .game-row.played,.game-row.upcoming,.game-row.practice{ padding-left:8px; }
    .game-row .side{ font-size:10px; padding:6px 2px; }
    .game-row .opp{ font-size:14px; }
    .game-row .meta{ font-size:11px; }
    .game-row .type-tag{ margin:4px 4px 0 0; }
    .arrival{ display:block; margin:4px 0 0; }
    .result{ padding:5px 8px; font-size:12px; }
  }
  .stats-sortbar{ display:flex; gap:8px; align-items:center; justify-content:flex-end; padding:12px 14px; border-bottom:1px solid var(--border); background:#fafaf8; flex-wrap:wrap; }
  .stats-sortbar label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); font-weight:700; }
  .stats-sortbar select{ padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--ink); font-family:inherit; font-size:13px; }
  .goalie-board{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; padding:14px; }
  .goalie-card{ border:1px solid var(--border); border-radius:12px; padding:14px; background:linear-gradient(135deg,#fff,#f6f8fb); }
  .goalie-card h3{ margin:0 0 10px; font-size:16px; }
  .goalie-statgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
  .goalie-stat{ background:#eef2f6; border-radius:8px; padding:8px 5px; text-align:center; }
  .goalie-stat b{ display:block; font-family:'IBM Plex Mono'; font-size:16px; }
  .goalie-stat span{ display:block; font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim); margin-top:2px; }
  .attendance-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:6px; }
  .attendance-item{ display:flex; align-items:center; gap:8px; padding:7px 8px; border:1px solid var(--border); border-radius:8px; background:#fff; font-size:12.5px; }
  .attendance-item input{ accent-color:var(--red); }
  .map-wrap{ height:320px; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:#eef2f4; }
  #schedule-map{ width:100%; height:100%; }
  .map-legend{ padding:9px 12px; font-size:11.5px; color:var(--ink-dim); background:#fff; border-top:1px solid var(--border); }
  .opp-logo{ width:30px; height:30px; border-radius:8px; object-fit:contain; border:1px solid var(--border); background:#fff; display:inline-flex; align-items:center; justify-content:center; flex:none; }
  .opp-cell{ display:flex; align-items:center; gap:10px; min-width:0; }
  .opp-cell > div{ min-width:0; }


  /* ---------- Roster ---------- */
  /* The image and lettering share a square SVG coordinate system. */
  .roster-grid{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:20px; }
  .jersey-stage{ position:relative; width:100%; flex:1; min-height:0; display:grid; place-items:center; overflow:hidden; border-radius:8px 8px 0 0; background:radial-gradient(ellipse at 50% 35%,#ffffff,#e6edf3); padding:14px 5px 8px; }
  .jersey-art{display:block; width:100%; height:100%; min-height:0; filter:drop-shadow(0 5px 4px #122c4525);}
  .jersey-last{font-family:'Anton',Impact,'Arial Narrow',sans-serif; fill:#f5f2eb; font-weight:400; letter-spacing:2px;}
  .jersey-num{font-family:Impact,'Anton','Arial Narrow',sans-serif; font-weight:400; fill:#f5f2eb; stroke:#c92436; stroke-width:10px; paint-order:stroke fill; stroke-linejoin:round;}
  #roster-grid .r-tag{position:absolute; top:10px; right:10px; z-index:2; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--navy); color:white; border:2px solid white; font-size:11px; font-weight:800; box-shadow:0 2px 5px #122c4525;}
  /* Player photo fully replaces the jersey art when it loads; the jersey stays
     as the fallback until then (or permanently, if no photo exists for that player). */
  .player-photo{position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; object-position:top center;}
  .jersey-stage.has-photo .jersey-art{display:none;}
  .jersey-card-footer{flex:none; background:var(--navy); color:#fff; padding:12px 8px 25px; text-align:center; border-radius:0 0 8px 8px;}
  .jersey-card-footer .name{font-size:14px; line-height:1.3; font-weight:800;}
  .jersey-card-footer .pos{margin-top:4px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#dce8f4;}
  #roster-grid .flip-card{height:360px;}
  #roster-grid .front .flip-hint{color:#dce8f4; opacity:1; bottom:7px; right:0; left:0; justify-content:center;}
  #roster-grid .flip-face{overflow:hidden;}
  @media(max-width:480px){.roster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} #roster-grid .flip-card{height:290px;} .jersey-card-footer .name{font-size:12px;} .jersey-stage{padding:22px 0 6px;}}
  @media(prefers-reduced-motion:reduce){#roster-grid .flip-inner{transition:none;}}
  .flip-card{
    position:relative; height:262px; perspective:1000px; cursor:pointer;
    background:transparent !important; border:none !important; box-shadow:none !important;
  }
  .flip-card:focus-visible .flip-inner{ outline:2px solid var(--ice); outline-offset:2px; }
  .flip-inner{
    position:relative; width:100%; height:100%;
    transition:transform .5s cubic-bezier(.4,.2,.2,1);
    transform-style:preserve-3d;
  }
  .flip-card.flipped .flip-inner{ transform:rotateY(180deg); }
  .flip-face{
    position:absolute; inset:0; backface-visibility:hidden;
    border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow);
    background:var(--surface); border-top:4px solid var(--red);
    display:flex; flex-direction:column;
  }
  .flip-face.back{ transform:rotateY(180deg); }

  .player{ padding:14px 14px 12px; text-align:center; position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .avatar{
    width:92px; height:92px; border-radius:50%; margin:0 auto 12px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Anton'; font-size:42px; line-height:1; color:#fff;
    background:linear-gradient(135deg, var(--navy-3), var(--navy));
    border:3px solid var(--surface-2);
    text-shadow:0 2px 0 rgba(0,0,0,.3);
    -webkit-text-stroke:1px rgba(0,0,0,.18);
    font-variant-numeric:tabular-nums;
  }
  .player .name{ font-weight:700; font-size:15.5px; margin-top:2px; }
  .player .pos{
    font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-dim); margin-top:2px;
  }
  .flip-hint{
    position:absolute; bottom:6px; right:8px; font-size:9px; color:var(--ink-dim);
    display:flex; align-items:center; gap:3px; opacity:.7;
  }
  .stat-face{ padding:14px 14px 10px; flex:1; display:flex; flex-direction:column; }
  .stat-face .sf-head{ text-align:center; margin-bottom:8px; }
  .stat-face .sf-name{ font-weight:800; font-size:13px; }
  .stat-face .sf-sub{ font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); }
  .stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; flex:1; }
  .stat-cell{ background:var(--surface-2); border-radius:7px; padding:6px 2px; text-align:center; }
  .stat-cell .sv{ font-family:'IBM Plex Mono'; font-weight:600; font-size:15px; }
  .stat-cell .sl{ font-size:8px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); margin-top:1px; }
  .stat-face .sf-foot{ text-align:center; font-size:9.5px; color:var(--ink-dim); margin-top:6px; }

  .roster-legend{ display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-dim); margin-top:14px; }
  .roster-legend span{ display:inline-flex; align-items:center; gap:6px; }
  .swatch{ width:10px; height:10px; border-radius:3px; display:inline-block; }

  /* ---------- Home: Game MVP & Player of the Week ---------- */
  /* These sections are wrapped in a container div (for the `hidden` toggle),
     which makes their .section-label a :first-child and wrongly zeroes its
     normal 32px top margin (that rule is meant only for the page's very first
     heading). Restore the standard section gap on the wrapper itself. */
  #home-mvp-section, #home-potw-section{ margin-top:32px; }
  .mvp-card{ display:flex; gap:14px; align-items:center; padding:14px 16px; }
  .mvp-photo-wrap{ position:relative; width:60px; height:60px; border-radius:50%; overflow:hidden; flex:none; background:var(--surface-2); border:2px solid var(--ice); }
  .mvp-photo-wrap img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
  .mvp-photo-wrap.group{ width:76px; height:76px; }
  .mvp-photo-wrap.group img{ object-position:center; }
  .mvp-star{ position:absolute; top:-5px; right:-5px; font-size:15px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
  .mvp-info{ min-width:0; }
  .mvp-name{ font-weight:800; font-size:15px; }
  .mvp-game{ font-size:12px; color:var(--ink-dim); margin-top:1px; }
  .mvp-note{ font-size:12.5px; color:var(--ink); margin-top:5px; line-height:1.4; }

  .potw-wrap{ display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; }
  .potw-card-slot{ width:220px; flex:none; }
  /* Static photo card -- no flip, no stats (see app.js note). */
  .potw-photo-card{ position:relative; display:flex; flex-direction:column; height:280px; overflow:hidden; border-top:4px solid var(--red); }
  /* Each dt/dd pair is wrapped in its own .potw-qa so the grid places a
     question and its answer in the same cell -- letting dt/dd flow as direct
     grid children split pairs across different rows/columns. */
  .potw-answers{ flex:1; min-width:240px; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px 20px; align-content:start; }
  .potw-qa{ min-width:0; }
  .potw-answers dt{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); }
  .potw-answers dd{ margin:3px 0 0; font-size:13.5px; font-weight:600; line-height:1.35; }
  @media(max-width:480px){ .potw-card-slot{ width:100%; max-width:220px; margin:0 auto; } }

  /* ---------- Resources ---------- */
  .res-grid{ grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
  .res-card{ padding:18px 20px; }
  .res-card h4{
    margin:0 0 10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ice); display:flex; align-items:center; gap:8px;
  }
  .res-card dl{ margin:0; }
  .res-card dt{ font-size:11.5px; color:var(--ink-dim); margin-top:10px; }
  .res-card dt:first-child{ margin-top:0; }
  .res-card dd{ margin:2px 0 0; font-size:14.5px; font-weight:600; }
  .cta{
    display:inline-flex; align-items:center; gap:6px; margin-top:14px;
    background:var(--red); color:#fff !important; text-decoration:none;
    font-weight:700; font-size:13.5px; padding:9px 16px; border-radius:999px;
  }

  footer{
    max-width:1180px; margin:0 auto; padding:20px 20px 40px;
    color:var(--ink-dim); font-size:12.5px; display:flex; justify-content:space-between;
    flex-wrap:wrap; gap:8px;
  }

  /* --- Access gate --- */
  .gate{
    position:fixed; inset:0; z-index:9999;
    background:radial-gradient(1200px 800px at 50% -10%, var(--navy-3), var(--navy) 60%);
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  .gate.hidden{ display:none; }
  .gate-card{
    background:var(--navy-2); border:1px solid rgba(255,255,255,.08);
    border-radius:18px; padding:36px 32px; max-width:360px; width:100%;
    text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.4);
  }
  .gate-card .gate-emoji{ font-size:36px; margin-bottom:10px; }
  .gate-card h1{
    font-family:'Anton',sans-serif; font-weight:400; letter-spacing:.5px;
    font-size:24px; color:#fff; margin:0 0 4px;
  }
  .gate-card p.sub{ color:var(--ice-2); font-size:12.5px; margin:0 0 22px; line-height:1.5; }
  .gate-card input{
    width:100%; box-sizing:border-box; padding:12px 14px; border-radius:10px;
    border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06);
    color:#fff; font-size:15px; text-align:center; letter-spacing:1px;
    margin-bottom:12px;
  }
  .gate-card input::placeholder{ color:rgba(255,255,255,.4); letter-spacing:normal; }
  .gate-card button{
    width:100%; padding:12px; border:none; border-radius:10px;
    background:var(--red); color:#fff; font-weight:700; font-size:14.5px;
    cursor:pointer;
  }
  .gate-card .err{ color:#ff9aa8; font-size:12px; margin-top:10px; min-height:14px; opacity:0; }
  .gate-card .err.show{ opacity:1; }
  #site-content{ display:none; }
  #site-content.unlocked{ display:block; }

  /* --- Custom modal (replaces window.prompt/alert, which the artifact
       viewer's sandbox blocks — those calls silently no-op there) --- */
  .modal-overlay{
    position:fixed; inset:0; z-index:10000;
    background:rgba(10,18,32,.6);
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .modal-overlay[hidden]{ display:none; }
  .modal-card{
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:24px 22px; max-width:340px; width:100%; box-shadow:var(--shadow);
  }
  .modal-card h3{ margin:0 0 14px; font-size:17px; color:var(--ink); }
  .modal-field{ margin-bottom:12px; }
  .modal-field:last-child{ margin-bottom:0; }
  .modal-field label{
    font-size:11px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-dim); display:block; margin-bottom:4px;
  }
  .modal-field input, .modal-field select{
    width:100%; box-sizing:border-box; padding:10px 12px; border-radius:8px;
    border:1px solid var(--border); background:var(--paper); color:var(--ink);
    font-size:15px; font-family:inherit;
  }
  .event-row-actions{ display:inline-flex; gap:6px; margin-left:8px; }
  .event-row-actions button{
    border:none; background:var(--surface-2); color:var(--ink-dim); border-radius:6px;
    padding:3px 8px; font-size:11px; font-weight:700; cursor:pointer;
  }
  .event-row-actions button:hover{ background:var(--border); }
  .boxscore-leaders{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-bottom:4px; }
  .leader-cell{ background:var(--surface-2); border-radius:8px; padding:8px 10px; }
  .leader-cell .ln{ font-weight:700; font-size:13.5px; }
  .leader-cell .ls{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-dim); margin-top:1px; }
  .period-block{ margin-bottom:18px; }
  .period-block:last-child{ margin-bottom:0; }
  .period-block h4{
    font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-dim);
    margin:0 0 8px; font-weight:800;
  }
  .play-row{
    display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
    padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px;
  }
  .play-row:last-child{ border-bottom:none; }
  .play-row .play-time{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-dim); min-width:44px; margin-top:1px; }
  .play-row .play-desc{ flex:1; }
  .play-row .play-desc b{ color:var(--ink); }
  .play-row .play-sub{ font-size:12px; color:var(--ice); margin-top:2px; font-weight:600; }
  .play-row .play-sub.none{ color:var(--ink-dim); font-weight:400; font-style:italic; }
  .play-row.penalty .play-desc{ color:var(--red-2); }
  .play-row.penalty .play-sub{ color:var(--red-2); opacity:.85; }
  .modal-note{ font-size:12.5px; color:var(--ink-dim); line-height:1.5; margin-top:2px; }
  .hist-manage-panel{ padding:12px 2px 6px; border-bottom:1px solid var(--border); margin-bottom:2px; }
  .hist-manage-panel .event-row-actions button{ padding:5px 10px; font-size:11.5px; }

  /* Roster presentation: four columns at most, larger cards and a single open stats face. */
  #roster-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}
  #roster-grid .flip-card{height:420px;}
  #roster-grid .flip-inner{transition:transform .65s cubic-bezier(.4,.2,.2,1);}
  #roster-grid .jersey-art{transition:transform .35s ease;transform-origin:50% 45%;}
  #roster-grid .jersey-card-footer .name{font-size:16px;}
  #roster-grid .stat-cell .sv{font-size:22px;}
  #roster-grid .stat-cell .sl{font-size:10px;}
  @media(hover:hover) and (pointer:fine){#roster-grid .flip-card:not(.flipped):hover .jersey-art{transform:scale(1.12);}}
  @media(max-width:1000px){#roster-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}}
  @media(max-width:740px){#roster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}#roster-grid .flip-card{height:370px;}}
  @media(max-width:420px){#roster-grid{grid-template-columns:1fr;}#roster-grid .flip-card{height:430px;}}
  @media(prefers-reduced-motion:reduce){#roster-grid .flip-inner,#roster-grid .jersey-art{transition:none;}#roster-grid .flip-card:hover .jersey-art{transform:none;}}

  #stats-table-body tr{transition:box-shadow .18s ease;}
  #stats-table-body tr td{transition:background-color .18s ease;}
  @media(hover:hover) and (pointer:fine){
    #stats-table-body tr:hover{box-shadow:inset 3px 0 0 #2174a5;}
    #stats-table-body tr:hover td{background-color:#e0edf7;}
  }
  @media(prefers-reduced-motion:reduce){#stats-table-body tr,#stats-table-body tr td{transition:none;}#stats-table-body tr:hover{transform:none;}}