:root {
    --navy: #14233B;
    --navy-2: #1E3352;
    --ice: #F2F6F9;
    --ice-2: #E3ECF3;
    --blue: #659CCC;
    --gold: #A89C58;
    --gold-ink: #7D7236;
    --red: #C23A3F;
    --ink: #14233B;
    --muted: #5B6B80;
    --line: #D3DEE8;
    --white: #FFFFFF;
    --display: "Archivo", system-ui, sans-serif;
    --sans: "Archivo", system-ui, sans-serif;
    /* Height of GameSheet's own logo bar inside each embed, cropped off so the embed sits inside our frame */
    --gs-bar: 60px;
    /* Where GameSheet's leader cards sit inside the player and goalie embeds */
    --gs-cards-top: 80px;
    --gs-cards-h: 146px;
    /* Logo bar plus the team header card at the top of GameSheet's team pages */
    --gs-team-top: 256px;
    /* Logo bar plus the list/card view buttons on GameSheet's scores page */
    --gs-live-top: 104px;
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin: 0; background: var(--ice); color: var(--ink); font: 16px/1.5 var(--sans); }
  img { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
  .num { font-variant-numeric: tabular-nums; }

  /* Header */
  header { background: var(--navy); color: var(--white); position: sticky; top: 0; z-index: 10; }
  .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; }
  .brand { display: flex; align-items: center; gap: 12px; }
  .brandlogo { height: 36px; width: auto; display: block; }
  .brand b { font: semi-expanded 800 20px/1 var(--display); letter-spacing: -.01em; }
  .brand small { display: block; font-size: 12px; color: #A9B8CB; font-weight: 500; margin-top: 3px; }
  nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
  nav a { display: block; padding: 8px 12px; border-radius: 6px; font-weight: 600; font-size: 15px; color: #D5DFEA; transition: background-color .15s, color .15s; }
  nav a:hover { background: var(--navy-2); color: var(--white); }
  .menu { display: none; background: none; border: 1px solid #3A5070; color: var(--white); border-radius: 6px; padding: 8px 12px; font: 600 14px var(--sans); cursor: pointer; }
  .drawer { display: none; }

  /* Teams dropdown */
  .dd { position: relative; }
  nav ul { align-items: center; }
  nav a, .ddbtn { white-space: nowrap; }
  @media (max-width: 1000px) { .brand small { display: none; } }
  /* Same font, line height and padding as the other nav links so Teams sits level with them */
  .ddbtn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 6px; background: none; cursor: pointer; font: 600 15px/1.5 var(--sans); color: #D5DFEA; transition: background-color .15s, color .15s; }
  .ddbtn svg { width: 12px; height: 12px; transition: transform .15s ease; }
  .ddbtn:hover, .dd.open .ddbtn { background: var(--navy-2); color: var(--white); }
  .dd.open .ddbtn svg { transform: rotate(180deg); }
  .ddmenu { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; background: var(--white); border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px rgba(20,35,59,.28); border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility 0s .15s; z-index: 20; }
  .dd.open .ddmenu { opacity: 1; visibility: visible; transform: none; transition: opacity .15s ease, transform .15s ease; }
  /* Opens on hover with a mouse; click still works for touch and keyboard */
  @media (hover: hover) {
    .dd:hover .ddmenu { opacity: 1; visibility: visible; transform: none; transition: opacity .15s ease, transform .15s ease; }
    .dd:hover .ddbtn { background: var(--navy-2); color: var(--white); }
    .dd:hover .ddbtn svg { transform: rotate(180deg); }
  }
  /* Invisible bridge over the gap so the menu stays open while the pointer moves down to it */
  .ddmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .ddmenu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-weight: 600; font-size: 15px; }
  .ddmenu a:hover { background: var(--ice); }
  .ddmenu img { width: 28px; height: 28px; object-fit: contain; }
  .drawer-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 4px 16px 16px; }
  .drawer-teams span { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: .04em; padding: 6px 4px 4px; }
  .drawer-teams a { display: flex; align-items: center; gap: 8px; padding: 8px 4px; font-weight: 600; color: #D5DFEA; }
  .drawer-teams img { width: 26px; height: 26px; object-fit: contain; background: var(--white); border-radius: 50%; padding: 2px; }

  /* Upcoming strip, built from the season schedule */
  .ticker { background: var(--navy-2); border-top: 1px solid #2A4265; }
  .ticker .wrap { display: flex; gap: 10px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
  .ticker .wrap::-webkit-scrollbar { display: none; }
  .tick { flex: 0 0 auto; min-width: 178px; background: var(--navy); border-radius: 8px; padding: 8px 12px; color: var(--white); font-size: 14px; transition: background-color .15s; }
  .tick:hover { background: #0E1A2D; }
  .tick .st { font-size: 11px; font-weight: 700; color: #A9B8CB; letter-spacing: .04em; margin-bottom: 4px; }
  .tick .st.final { color: var(--gold); }
  .tick .row { display: flex; align-items: center; gap: 8px; }
  .tick .row img { width: 20px; height: 20px; object-fit: contain; background: var(--white); border-radius: 50%; padding: 1px; }
  .tick .row span { flex: 1; font-weight: 600; }
  .tick .row strong { font: semi-expanded 800 16px/1.2 var(--display); }
  .tick .row.lost { color: #A9B8CB; }

  /* Hero: center ice */
  .hero { padding: 36px 0 8px; }
  .rink { position: relative; border-radius: 120px; overflow: hidden; background: var(--white); border: 3px solid var(--navy); min-height: 420px; display: grid; place-items: center; }
  .rink svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* Fixed width so the rink's contents don't shift as the games rotate */
  .board { position: relative; z-index: 1; text-align: center; padding: 40px 24px; width: min(600px, 100%); }
  .board::before { content: ""; position: absolute; inset: 10% -6%; z-index: -1; background: radial-gradient(closest-side, rgba(255,255,255,.92), rgba(255,255,255,0)); }
  .when { display: inline-block; background: var(--navy); color: var(--white); font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 99px; letter-spacing: .03em; }
  .when em { font-style: normal; color: var(--gold); }
  .matchup { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: 28px; margin: 22px 0 14px; }
  .side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .side img { width: 112px; height: 112px; object-fit: contain; background: var(--white); border-radius: 50%; border: 3px solid var(--ice-2); padding: 8px; }
  .side .nm { font: semi-expanded 800 20px/1.1 var(--display); letter-spacing: -.01em; }
  .side .ha { font-size: 13px; color: var(--muted); }
  .center { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 180px; }
  .time { font: semi-expanded 800 66px/0.95 var(--display); letter-spacing: -.03em; color: var(--navy); }
  .time small { font-size: .42em; margin-left: 4px; }
  .countdown { font-weight: 600; font-size: 14px; color: var(--gold-ink); }
  .rinkname { margin: 0 auto; color: var(--muted); font-size: 15px; }
  .last { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; background: var(--ice); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; font-size: 14px; }
  .last b { font-weight: 700; }
  .last img { width: 22px; height: 22px; object-fit: contain; }
  .last .sc { font: semi-expanded 800 17px/1 var(--display); }
  /* Rotating games in the rink */
  .rinkname b { color: var(--gold-ink); font-weight: 800; margin: 0 2px; }
  .time .dash { margin: 0 .12em; color: var(--red); }
  .slide.in { animation: slidein .35s ease both; }
  @keyframes slidein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .slidenav { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }
  .dots { display: flex; gap: 6px; }
  .dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--line); cursor: pointer; transition: width .2s ease, background-color .2s; }
  .dots button[aria-current="true"] { width: 22px; background: var(--navy); }
  .timer { width: 140px; height: 3px; border-radius: 3px; background: var(--ice-2); overflow: hidden; }
  .timer i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 3px; }
  @keyframes fill { from { width: 0; } to { width: 100%; } }
  .board:has(.slide:hover, .slidenav:hover, .slide :focus-visible) .timer i { animation-play-state: paused !important; }

  /* Live scores window in the rink: GameSheet's scores page from just under its view buttons,
     so it starts at "Live games" during games and at the next game date otherwise */
  .livebox { width: min(440px, 100%); margin: 18px auto 0; background: var(--navy); border-radius: 16px; padding: 4px 6px 6px; text-align: left; }
  .livehead { display: flex; align-items: center; gap: 8px; padding: 7px 10px 8px; font-size: 13px; font-weight: 600; color: #C7D3E1; }
  .liverows { display: grid; gap: 4px; }
  .liverow { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: var(--white); border-radius: 11px; padding: 10px 12px 8px; transition: background-color .15s; }
  .liverow:hover { background: var(--ice); }
  .lr-teams { display: grid; gap: 6px; min-width: 0; }
  .lr-teams span { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lr-teams img { width: 26px; height: 26px; object-fit: contain; flex: none; }
  .lr-time { font: semi-expanded 800 18px/1 var(--display); color: var(--navy); }
  .live-gs { width: 120px; }
  .lr-go { grid-column: 1 / -1; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 12px; font-weight: 700; color: var(--gold-ink); }
  .lr-none { margin: 0; padding: 14px; background: var(--white); border-radius: 11px; color: var(--muted); font-size: 14px; }
  /* GameSheet score windows are for looking only: taps go to the link around them (our game page) */
  .gsscore iframe, #scorecrop iframe, .placecrop iframe, #statcrop iframe { pointer-events: none; }
  .links { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  .btn { display: inline-block; padding: 11px 18px; border-radius: 8px; font-weight: 700; font-size: 15px; transition: transform .12s ease, background-color .15s; }
  .btn:active { transform: scale(.97); }
  .btn.solid { background: var(--navy); color: var(--white); }
  .btn.solid:hover { background: var(--navy-2); }
  .btn.ghost { background: var(--white); border: 1.5px solid var(--navy); }
  .btn.ghost:hover { background: var(--ice-2); }

  /* League data board: GameSheet embeds inside our frame */
  .section { margin-top: 48px; scroll-margin-top: 150px; }
  h2 { font: semi-expanded 800 28px/1.1 var(--display); letter-spacing: -.02em; margin: 0; }
  .head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
  .sync { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: #3FA36B; animation: pulse 2.4s ease-out infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(63,163,107,.45); } 70%,100% { box-shadow: 0 0 0 8px rgba(63,163,107,0); } }

  .boardframe { background: var(--white); border: 3px solid var(--navy); border-radius: 18px; overflow: hidden; }
  .tabs { display: flex; gap: 2px; background: var(--navy); padding: 6px 6px 0; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; border: 0; cursor: pointer; background: transparent; color: #C7D3E1; font: semi-expanded 700 15px/1 var(--display); padding: 13px 18px 14px; border-radius: 10px 10px 0 0; transition: background-color .15s, color .15s; }
  .tabs button:hover { color: var(--white); background: var(--navy-2); }
  .tabs button[aria-selected="true"] { background: var(--white); color: var(--navy); box-shadow: inset 0 3px 0 var(--gold); }
  .tabnote { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--ice-2); }
  .tabnote b { color: var(--ink); }
  .embed { position: relative; height: 760px; overflow: hidden; background: #F5F5F5; }
  .embed iframe { position: absolute; left: 0; top: calc(-1 * var(--gs-bar)); width: 100%; height: calc(100% + var(--gs-bar)); border: 0; }
  .embed .loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
  .credit { padding: 10px 18px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--ice-2); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .credit a { color: var(--gold-ink); font-weight: 600; border-bottom: 1px solid currentColor; }

  /* League leaders: only the leader-card band of GameSheet's player and goalie pages */
  .leaders { background: var(--navy); border-radius: 18px; padding: 8px; display: grid; gap: 8px; }
  .lrow { display: grid; grid-template-columns: 168px 1fr; background: var(--ice); border-radius: 12px; overflow: hidden; }
  .lrow .lab { background: var(--navy-2); color: var(--white); padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
  .lrow .lab b { font: semi-expanded 800 22px/1 var(--display); letter-spacing: -.01em; }
  .lrow .lab span { font-size: 13px; color: #A9B8CB; line-height: 1.35; }
  .lrow .lab i { display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--gold); margin-bottom: 6px; }
  .cards { position: relative; height: var(--gs-cards-h); overflow: hidden; }
  /* Tall enough that the embed never scrolls itself, so a swipe on the cards can't scroll the hidden table into view */
  .cards iframe { position: absolute; left: 0; top: calc(-1 * var(--gs-cards-top)); width: 100%; height: 6000px; border: 0; }
  /* On wide screens the embed is drawn at 1100px, where GameSheet puts all four cards in a row, then scaled to fit */
  .cards.fit { height: calc(var(--gs-cards-h) * var(--s)); }
  .cards.fit iframe { width: 1100px; top: calc(-1 * var(--gs-cards-top) * var(--s)); transform: scale(var(--s)); transform-origin: 0 0; }
  .lnote { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 10px 4px; font-size: 13px; color: #A9B8CB; }
  .lnote a { color: var(--gold); font-weight: 600; border-bottom: 1px solid currentColor; }

  /* Teams */
  .teams { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .team { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 18px 10px 14px; text-align: center; transition: border-color .15s, transform .15s ease; }
  .team:hover { border-color: var(--gold); transform: translateY(-2px); }
  .team img { width: 76px; height: 76px; object-fit: contain; margin: 0 auto 10px; }
  .team b { display: block; font: semi-expanded 800 16px/1.15 var(--display); }
  .team span { display: block; font-size: 13px; line-height: 1.3; color: var(--muted); margin-top: 4px; }

  /* About strip */
  .about { margin-top: 48px; background: var(--navy); color: var(--white); border-radius: 16px; padding: 32px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
  .about h2 { color: var(--white); margin-bottom: 10px; }
  .about p { margin: 0; color: #C7D3E1; max-width: 58ch; }
  .about ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .about li a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 8px; background: var(--navy-2); font-weight: 600; transition: background-color .15s; }
  .about li a:hover { background: #29426A; }
  .about li a span { color: var(--gold); }

  /* Team page */
  .thero { background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
  /* Blue lines and the red center line, as on the rink */
  .thero::before { content: ""; position: absolute; inset: 0; background:
      linear-gradient(90deg, transparent 0 22%, rgba(101,156,204,.22) 22% calc(22% + 14px), transparent 0 50%, rgba(194,58,63,.25) 50% calc(50% + 10px), transparent 0 78%, rgba(101,156,204,.22) 78% calc(78% + 14px), transparent 0); }
  .thero .wrap { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; padding-top: 40px; padding-bottom: 40px; }
  .tlogo { width: 148px; height: 148px; border-radius: 50%; background: var(--white); border: 4px solid var(--gold); padding: 12px; object-fit: contain; }
  .thero h1 { font: semi-expanded 800 52px/1 var(--display); letter-spacing: -.03em; margin: 0 0 8px; }
  .thero .sub { color: #C7D3E1; font-size: 15px; }
  .back { display: inline-block; color: var(--gold); font-weight: 600; font-size: 14px; margin-bottom: 14px; }
  .back:hover { color: var(--white); }
  .tnext { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 16px 18px; min-width: 260px; }
  .tnext .k { font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: .04em; }
  .tnext .opp { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; font: semi-expanded 800 20px/1.1 var(--display); }
  .tnext .opp img { width: 38px; height: 38px; border-radius: 50%; background: var(--white); padding: 3px; object-fit: contain; }
  .tnext .opp small { font: 500 14px var(--sans); color: #A9B8CB; }
  .tnext .t { font-size: 14px; color: #C7D3E1; }

  .tfacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
  .fact { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
  .fact b { display: block; font: semi-expanded 800 26px/1.1 var(--display); letter-spacing: -.02em; }
  .fact span { font-size: 13px; color: var(--muted); }

  .games-list { background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .grow { display: grid; grid-template-columns: 92px 44px 1fr auto; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--ice-2); transition: background-color .15s; }
  .grow:last-child { border-bottom: 0; }
  .grow:hover { background: var(--ice); }
  .grow .date { font-weight: 700; font-size: 14px; line-height: 1.25; }
  .grow .date small { display: block; font-weight: 500; color: var(--muted); }
  .grow .va { font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; }
  .grow .opp { display: flex; align-items: center; gap: 12px; font-weight: 700; }
  .grow .opp img { width: 34px; height: 34px; object-fit: contain; }
  .grow .opp small { display: block; font-weight: 500; font-size: 13px; color: var(--muted); }
  .grow .res { text-align: right; font-weight: 600; font-size: 14px; }
  .grow .res b { font: semi-expanded 800 18px/1 var(--display); margin-left: 6px; }
  .tag { display: inline-block; min-width: 26px; text-align: center; padding: 3px 7px; border-radius: 6px; font-size: 12px; font-weight: 800; }
  .tag.w { background: #DDF1E5; color: #1F6B41; }
  .tag.l { background: #F6E1E2; color: #8E2A2E; }
  .tag.next { background: var(--gold); color: var(--navy); }
  .grow.past { color: var(--muted); }

  /* Cropped GameSheet windows (sized by fitCrops in site.js) */
  .crop { position: relative; overflow: hidden; }
  .crop iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; }
  .crop .loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
  .placecrop { width: 250px; border-radius: 6px; }
  .tmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
  .tplace { background: var(--white); border-radius: 8px; padding: 4px 6px 2px; }
  .mybtn { border: 1.5px solid rgba(255,255,255,.35); background: transparent; color: var(--white); font: 600 14px var(--sans); padding: 7px 12px; border-radius: 8px; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
  .mybtn:hover { border-color: var(--gold); }
  .mybtn.on { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .numbers { background: var(--navy); border-radius: 18px; padding: 8px; }
  .numbers .crop { border-radius: 12px; background: #F5F5F5; }
  .grow .bs { display: block; font-size: 12px; font-weight: 600; color: var(--gold-ink); margin-top: 4px; }
  .tick.mine { box-shadow: inset 0 0 0 2px var(--gold); }
  .team.mine { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
  .bslink { margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--gold-ink); border-bottom: 1.5px solid currentColor; }
  .bslink:hover { color: var(--navy); }

  /* Home: mini standings beside the next few games */
  .duo { display: grid; grid-template-columns: 526px 1fr; gap: 28px; align-items: start; }
  .more { font-size: 14px; font-weight: 600; color: var(--gold-ink); border-bottom: 1.5px solid currentColor; }
  .more:hover { color: var(--navy); }
  .soonrow { grid-template-columns: 74px 1fr; cursor: default; }
  .soonrow:hover { background: none; }
  .soonrow.mine { box-shadow: inset 3px 0 0 var(--gold); }
  .soonrow .opp { gap: 10px; flex-wrap: wrap; }
  .soonrow .opp a { display: flex; align-items: center; gap: 8px; font-weight: 700; }
  .soonrow .opp a:hover { color: var(--gold-ink); }
  .soonrow .opp b { color: var(--gold-ink); }
  .soonrow .opp img { width: 28px; height: 28px; }
  @media (max-width: 1000px) { .duo { grid-template-columns: 1fr; } }

  /* Game page */
  .ghero .wrap { grid-template-columns: 1fr auto; }
  .ghero h1 { font-size: 44px; }
  .ghero h1 span { color: var(--gold); }
  .gfacts { display: flex; flex-wrap: wrap; gap: 8px 22px; color: #C7D3E1; font-size: 15px; }
  .gfacts b { color: var(--white); font-weight: 700; margin-right: 4px; }
  .gteams { display: flex; gap: 14px; }
  .gteams a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #A9B8CB; letter-spacing: .04em; }
  .gteams img { width: 92px; height: 92px; border-radius: 50%; background: var(--white); border: 3px solid var(--gold); padding: 8px; object-fit: contain; transition: transform .15s ease; }
  .gteams a:hover img { transform: translateY(-2px); }
  .scorecard { margin-top: -28px; position: relative; background: var(--navy); border-radius: 18px; padding: 4px 8px 8px; box-shadow: 0 10px 30px rgba(20,35,59,.18); }
  .scorecard .crop { border-radius: 12px; background: var(--white); }
  /* GameSheet's game header (score and its own tabs) is cropped; content starts below it */
  .embed.gameembed { height: 900px; }
  .embed.gameembed iframe { top: -430px; height: calc(100% + 430px); }

  /* Team cards: next game and season dots */
  .team .tnextline { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.3; }
  .dots-track, .team .dots-track { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 10px; }
  .dots-track i { width: 7px; height: 7px; border-radius: 50%; background: #C5D3E1; }
  .dots-track i.w { background: #2E9D5E; }
  .dots-track i.l { background: var(--red); }
  .dots-track i.played { background: var(--navy); }
  .dots-track i.next { background: var(--gold); box-shadow: 0 0 0 2px rgba(168,156,88,.3); }

  /* Season path on team pages */
  .path { margin-top: 28px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 12px; }
  .path-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
  .path-head h2 { font-size: 20px; }
  .path-row { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; position: relative; }
  .stop { flex: 0 0 auto; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
  /* The line that joins the stops */
  .stop::before { content: ""; position: absolute; top: 25px; left: -6px; right: 50%; height: 2px; background: var(--line); z-index: 0; }
  .stop:first-child::before { display: none; }
  .ring { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; background: var(--white); border: 3px solid var(--ice-2); display: grid; place-items: center; transition: transform .15s ease; }
  .stop:hover .ring { transform: translateY(-2px); }
  .ring img { width: 34px; height: 34px; object-fit: contain; }
  .stop.w .ring { border-color: #2E9D5E; }
  .stop.l .ring { border-color: var(--red); }
  .stop.played .ring { border-color: var(--navy); }
  .stop.next .ring { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(168,156,88,.22); }
  .stop.later .ring img { opacity: .55; }
  .stop .ha { font-size: 11px; font-weight: 800; color: var(--gold-ink); }
  .stop .lbl { font-size: 12px; font-weight: 700; color: var(--muted); }
  .stop.w .lbl { color: #1F7A47; } .stop.l .lbl { color: #A1343A; } .stop.next .lbl, .stop.played .lbl { color: var(--navy); }

  /* Who we play */
  .opps { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
  .opp-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 12px 14px; transition: border-color .15s, transform .15s ease; }
  .opp-tile:hover { border-color: var(--gold); transform: translateY(-2px); }
  .opp-tile img { width: 60px; height: 60px; object-fit: contain; }
  .opp-tile b { font: semi-expanded 800 16px/1.1 var(--display); }
  .meets { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
  .meets em { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--ice); color: var(--navy); }
  .meets em.played { background: var(--ice-2); color: var(--navy); }
  .meets em.w { background: #DDF1E5; color: #1F6B41; }
  .meets em.l { background: #F6E1E2; color: #8E2A2E; }

  /* Page transitions: pages cross-fade with a small lift, and team logos glide between the grid and team pages */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .16s cubic-bezier(.4,0,1,1) both; }
  ::view-transition-new(root) { animation: vt-in .34s cubic-bezier(.22,1,.36,1) .04s both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
  ::view-transition-group(*) { animation-duration: .42s; animation-timing-function: cubic-bezier(.22,1,.36,1); }
  ::view-transition-image-pair(*) { isolation: auto; }
  header { view-transition-name: site-header; }
  ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }

  /* Player page */
  .phero .wrap { grid-template-columns: auto 1fr auto; }
  .pjersey { width: 132px; height: 146px; border-radius: 22px 22px 16px 16px; display: grid; place-items: center; padding-top: 16px; background:
      linear-gradient(90deg, var(--gold) 0 14px, transparent 14px calc(100% - 14px), var(--gold) calc(100% - 14px)) top / 100% 40px no-repeat, var(--white); box-shadow: 0 12px 28px rgba(0,0,0,.25); }
  .pjersey .num { font: semi-expanded 900 64px/1 var(--display); color: var(--navy); letter-spacing: -.04em; }
  .pjersey.none .num { font-size: 40px; color: var(--muted); }
  .pmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; color: #C7D3E1; font-size: 15px; font-weight: 600; }
  .pteam { display: inline-flex; align-items: center; gap: 8px; background: var(--white); color: var(--navy); padding: 4px 12px 4px 4px; border-radius: 99px; font-weight: 700; transition: transform .15s ease; }
  .pteam:hover { transform: translateY(-1px); }
  .pteam img { width: 28px; height: 28px; object-fit: contain; }
  .statcard { width: 356px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 4px 8px 8px; }
  .statcard .crop { width: 340px; background: var(--white); border-radius: 10px; }
  .embed.playerembed { height: 900px; --gs-player-top: 270px; }
  .embed.playerembed iframe { top: calc(-1 * var(--gs-player-top)); height: calc(100% + var(--gs-player-top)); }
  a.pcard { color: inherit; }

  /* League stats page */
  .shero .wrap { grid-template-columns: 1fr minmax(300px, 420px); align-items: start; }
  .ssub { color: #C7D3E1; font-size: 16px; max-width: 52ch; margin: 0 0 16px; }
  .finder { background: var(--white); color: var(--ink); border-radius: 16px; padding: 14px; box-shadow: 0 14px 30px rgba(0,0,0,.25); }
  .finder label { display: block; font: semi-expanded 800 16px/1 var(--display); margin-bottom: 10px; }
  .finder input { width: 100%; font: 500 16px var(--sans); padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--ice); color: var(--ink); outline: none; transition: border-color .15s, background-color .15s; }
  .finder input:focus { border-color: var(--gold); background: var(--white); }
  .finds { display: grid; gap: 6px; margin-top: 8px; max-height: 330px; overflow-y: auto; }
  .finds:empty { display: none; }
  .finds .pcard { padding: 6px 10px 6px 6px; }
  .finds .jersey { width: 42px; height: 46px; padding-top: 6px; }
  .finds .jersey .num { font-size: 16px; }
  .nofind { margin: 6px 2px; font-size: 14px; color: var(--muted); }
  img.mini { display: inline-block; width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 4px; }
  .teampick { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; scrollbar-width: none; }
  .teampick::-webkit-scrollbar { display: none; }
  .teampick button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--white); border-radius: 99px; padding: 6px 14px 6px 6px; font: 600 14px var(--sans); color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
  .teampick button:hover { border-color: var(--gold); }
  .teampick button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
  .teampick img { width: 28px; height: 28px; object-fit: contain; background: var(--white); border-radius: 50%; padding: 2px; }
  #bcount .more { margin-left: 6px; }

  /* Team page: our own place tag and team summary */
  .tplace.ours { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; color: var(--navy); }
  .tplace.ours b { font: semi-expanded 800 14px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
  .tplace.ours span { font-size: 14px; color: var(--muted); font-weight: 600; }
  .tsum { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
  .tsum div { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
  .tsum b { display: block; font: semi-expanded 800 24px/1.1 var(--display); color: var(--navy); }
  .tsum span { font-size: 12px; color: var(--muted); }
  @media (max-width: 760px) { .tsum { grid-template-columns: repeat(3, 1fr); } .tsum b { font-size: 19px; } }
  /* Phones: the full standings keep #, team, GP, W, L and points; the rest is on desktop */
  @media (max-width: 760px) { .ltable.stand:not(.mini) th:nth-child(n+8):not(:last-child), .ltable.stand:not(.mini) td:nth-child(n+8):not(:last-child) { display: none; } .ltable td, .ltable th button { padding-left: 7px; padding-right: 7px; } }

  /* Player page: our own season line */
  .statcard.ours { width: 340px; }
  .pline { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--white); border-radius: 10px; overflow: hidden; }
  .pline div { text-align: center; padding: 10px 4px; border-right: 1px solid var(--ice-2); }
  .pline div:last-child { border-right: 0; }
  .pline b { display: block; font: semi-expanded 800 24px/1 var(--display); color: var(--navy); }
  .pline span { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }

  /* Simple page header for Standings and Schedule */
  .pagehero .wrap { grid-template-columns: 1fr; padding-top: 30px; padding-bottom: 30px; }
  .pagehero h1 { margin-bottom: 8px; }

  /* Our own tables: standings and stats */
  .ltable { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--white); }
  .ltable th { position: sticky; top: 0; background: var(--navy); color: #C7D3E1; font-size: 12px; font-weight: 700; text-align: right; padding: 0; white-space: nowrap; }
  .ltable th button { all: unset; display: block; width: 100%; box-sizing: border-box; padding: 11px 10px; cursor: pointer; text-align: inherit; }
  .ltable th button:hover { color: var(--white); }
  .ltable th.on { color: var(--gold); }
  .ltable th:not(:has(button)) { padding: 11px 10px; }
  .ltable td { padding: 10px; text-align: right; border-bottom: 1px solid var(--ice-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .ltable .l { text-align: left; }
  .ltable td.on { background: #F7F4E8; font-weight: 700; }
  .ltable tbody tr:hover td { background: var(--ice); }
  .ltable tr.mine td { background: #FBF7E6; }
  .ltable td a { font-weight: 600; }
  .ltable td a:hover { color: var(--gold-ink); }
  .ltable .rk { text-align: left; color: var(--muted); font-weight: 700; width: 36px; }
  .ltable .pts { font: semi-expanded 800 17px/1 var(--display); color: var(--navy); }
  .ltable td.pos { color: #1F7A47; } .ltable td.neg { color: #A1343A; }
  .ltable .empty { text-align: center; color: var(--muted); padding: 24px; }
  .tcell { display: inline-flex; align-items: center; gap: 8px; }
  .tcell img { width: 24px; height: 24px; object-fit: contain; }
  .last5 { display: inline-flex; gap: 3px; }
  .last5 i { width: 9px; height: 9px; border-radius: 50%; }
  .last5 i.w { background: #2E9D5E; } .last5 i.l { background: var(--red); }
  .last5 em { font-style: normal; color: var(--muted); }
  .tablecard { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--white); }
  .tscroll { overflow: auto; max-height: 640px; }
  .tablenote { padding: 10px 14px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--ice-2); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .tablenote i { display: inline-block; width: 20px; border-top: 2px dashed var(--blue); vertical-align: middle; margin-right: 6px; }

  /* Our own leader cards */
  .lgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .lgrid.g3 { grid-template-columns: repeat(3, 1fr); }
  .lcard { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 8px; align-content: start; }
  .lcard .lhead { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--muted); }
  .lcard .lhead img { width: 34px; height: 34px; object-fit: contain; }
  .lbig { display: flex; align-items: baseline; gap: 6px; }
  .lbig b { font: semi-expanded 900 40px/1 var(--display); color: var(--navy); letter-spacing: -.02em; }
  .lbig small { font-size: 13px; font-weight: 700; color: var(--gold-ink); }
  .lwho { display: grid; gap: 2px; font-weight: 700; font-size: 15px; }
  .lwho > a:hover { color: var(--gold-ink); }
  .lwho span { font-size: 13px; font-weight: 600; color: var(--muted); }
  .lwho .tcell img { width: 18px; height: 18px; }
  .lrest { list-style: none; margin: 4px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 4px; font-size: 13px; }
  .lrest li { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
  .lrest li span { display: inline-flex; align-items: center; gap: 4px; }
  .lrest b { color: var(--navy); }
  .lsub { font: semi-expanded 700 15px/1 var(--display); color: var(--navy); margin: 18px 0 10px; }
  .seasonnote { margin-top: 10px; font-size: 13px; color: var(--muted); }
  .seasontoggle { display: inline-flex; background: var(--ice-2); border-radius: 10px; padding: 3px; }
  .seasontoggle button { border: 0; background: none; padding: 7px 14px; border-radius: 8px; font: 600 14px var(--sans); color: var(--muted); cursor: pointer; }
  .seasontoggle button[aria-pressed="true"] { background: var(--white); color: var(--navy); box-shadow: 0 1px 3px rgba(20,35,59,.12); }
  .filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
  .filters select { font: 600 14px var(--sans); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink); }

  /* Home: slim top with latest results and the next game */
  .hometop { padding: 26px 0 0; }
  .htgrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
  .htcard { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
  .htcard h2 { font-size: 18px; margin: 2px 2px 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .htcard h2 a { font: 600 13px var(--sans); color: var(--gold-ink); border-bottom: 1.5px solid currentColor; }
  .htcard .liverows { gap: 6px; }
  .htcard .liverow { border: 1px solid var(--ice-2); }
  .nextcard { background: var(--navy); color: var(--white); border: 0; position: relative; overflow: hidden; }
  .nextcard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 30%, rgba(101,156,204,.18) 30% calc(30% + 10px), transparent 0 69%, rgba(194,58,63,.22) 69% calc(69% + 8px), transparent 0); }
  .nextcard > * { position: relative; }
  .nextcard h2 { color: var(--gold); }
  .nextcard h2 span { font: 600 13px var(--sans); color: #C7D3E1; }
  .nx { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center; padding: 6px 0 4px; }
  .nx a { display: grid; justify-items: center; gap: 6px; font: semi-expanded 800 15px/1.1 var(--display); }
  .nx img { width: 64px; height: 64px; border-radius: 50%; background: var(--white); padding: 6px; object-fit: contain; border: 2px solid var(--gold); }
  .nx .mid b { display: block; font: semi-expanded 900 30px/1 var(--display); }
  .nx .mid span { font-size: 13px; color: var(--gold); font-weight: 700; }
  .nxfoot { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; color: #C7D3E1; }
  .nxfoot a { color: var(--gold); font-weight: 700; }
  .duo2 { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; align-items: start; }
  .duo2 .lgrid { grid-template-columns: repeat(2, 1fr); }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lr-final { display: flex; align-items: baseline; gap: 6px; font: semi-expanded 800 26px/1 var(--display); color: #8C9BB0; }
  .lr-final b.win { color: var(--navy); }
  .lr-final span { color: var(--red); }
  .lr-final small { font: 700 12px var(--sans); color: var(--muted); margin-left: 4px; }
  .liverow.mine { box-shadow: inset 3px 0 0 var(--gold); }
  @media (max-width: 1000px) { .htgrid, .duo2 { grid-template-columns: 1fr; } .lgrid, .lgrid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* Ticket cards */
  .tickets-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(350px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .tickets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 14px; }
  .ticket { color: var(--ink); scroll-snap-align: start; position: relative; display: grid; grid-template-columns: 70px 1fr; grid-template-rows: 1fr auto; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform .15s ease, border-color .15s, box-shadow .15s; }
  .ticket:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 8px 20px rgba(20,35,59,.1); }
  .ticket.mine { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
  .tk-stub { grid-row: 1 / 3; background: var(--navy); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; border-right: 2px dashed rgba(255,255,255,.28); }
  /* Notches where the ticket would tear */
  .tk-stub::before, .tk-stub::after { content: ""; position: absolute; right: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--ice); }
  .tk-stub::before { top: -9px; } .tk-stub::after { bottom: -9px; }
  .tk-mon { font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; }
  .tk-day { font: semi-expanded 800 32px/1 var(--display); }
  .tk-wd { font-size: 12px; color: #A9B8CB; }
  .tk-body { display: flex; align-items: center; gap: 10px; padding: 14px 14px 8px 16px; }
  .tk-teams { flex: 1; display: grid; gap: 6px; min-width: 0; }
  .tk-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .tk-team img { width: 34px; height: 34px; object-fit: contain; flex: none; }
  .tk-team b { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tk-at { font-weight: 800; color: var(--gold-ink); font-size: 13px; padding-left: 12px; line-height: 1; }
  .tk-right { position: relative; text-align: right; flex: none; }
  .tk-time { font: semi-expanded 800 18px/1 var(--display); white-space: nowrap; }
  .tk-score { font: semi-expanded 800 26px/1 var(--display); }
  .tk-score span { color: var(--red); margin: 0 2px; }
  .tk-final { font: semi-expanded 800 18px/1 var(--display); color: var(--navy); }
  /* GameSheet score windows: their status line and score, scaled to fit */
  .gsscore { border-radius: 8px; background: var(--white); }
  .gsscore .loading { font: semi-expanded 800 14px/1 var(--display); color: var(--navy); }
  .tk-gs { width: 96px; }
  .rink-gs { width: 160px; margin: 0 auto; border: 1px solid var(--line); }
  .tk-when { font-size: 12px; color: var(--muted); margin-top: 4px; }
  .stamp { position: absolute; top: -26px; right: -4px; transform: rotate(-12deg); border: 2px solid currentColor; border-radius: 6px; padding: 0 6px; font: semi-expanded 800 15px/1.4 var(--display); opacity: .85; }
  .stamp.w { color: #1F7A47; } .stamp.l { color: #A1343A; }
  .ticket.won { background: #EEF8F1; border-color: #A9D9BB; }
  .ticket.lost { background: #FBEFEF; border-color: #E6B9BC; }
  .ticket.won .tk-when { color: #1F7A47; font-weight: 800; }
  .ticket.lost .tk-when { color: #A1343A; font-weight: 800; }
  .ticket.won .tk-foot { border-top-color: #CBE8D5; } .ticket.lost .tk-foot { border-top-color: #F0D3D5; }
  .tk-foot { grid-column: 2; display: flex; justify-content: space-between; padding: 8px 16px 10px 18px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
  .tk-foot span:last-child { color: var(--gold-ink); font-weight: 700; }
  .ticket.done .tk-stub { background: var(--navy-2); }
  .month-h { font: semi-expanded 700 16px/1 var(--display); color: var(--navy); margin: 26px 0 12px; display: flex; align-items: center; gap: 12px; }
  .month-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .month-h:first-child { margin-top: 0; }

  /* Calendar */
  .cal { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
  .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .cal-head b { font: semi-expanded 800 20px/1 var(--display); }
  .cal-nav { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--ice); font-size: 22px; line-height: 1; color: var(--navy); cursor: pointer; transition: background-color .15s; }
  .cal-nav:hover:not([disabled]) { background: var(--ice-2); }
  .cal-nav[disabled] { opacity: .35; cursor: default; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .cal-wd { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 0 6px; }
  .cal-cell { min-width: 0; min-height: 92px; border-radius: 10px; background: var(--ice); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
  .cal-cell.empty { background: transparent; }
  .cal-cell.has { background: #EAF1F8; }
  .cal-cell.today { box-shadow: inset 0 0 0 2px var(--navy); }
  .cal-d { font-size: 13px; font-weight: 700; color: var(--muted); }
  .cal-cell.has .cal-d { color: var(--navy); }
  .cal-g { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 3px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 3px 5px; transition: border-color .15s; }
  .cal-g:hover { border-color: var(--gold); }
  .cal-g.mine { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
  .cal-g img { width: 22px; height: 22px; object-fit: contain; }
  .cal-g i { font-style: normal; font-weight: 800; font-size: 11px; color: var(--gold-ink); }
  .cal-g small { flex-basis: 100%; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1.2; }
  .cal-g.done small { color: var(--navy); }
  .viewtoggle { display: inline-flex; background: var(--ice-2); border-radius: 10px; padding: 3px; }
  .viewtoggle button { border: 0; background: none; padding: 7px 14px; border-radius: 8px; font: 600 14px var(--sans); color: var(--muted); cursor: pointer; }
  .viewtoggle button[aria-pressed="true"] { background: var(--white); color: var(--navy); box-shadow: 0 1px 3px rgba(20,35,59,.12); }

  /* Roster cards */
  .rgroup + .rgroup { margin-top: 24px; }
  .rgroup h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: semi-expanded 700 16px/1 var(--display); color: var(--navy); }
  .rgroup h3 span { font: 700 12px/1 var(--sans); color: var(--muted); background: var(--ice-2); padding: 4px 8px; border-radius: 99px; }
  .rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
  .pcard { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 10px 10px; transition: border-color .15s, transform .15s ease; }
  .pcard:hover { border-color: var(--gold); transform: translateY(-1px); }
  /* Jersey back: navy with gold shoulder stripes */
  .jersey { flex: none; width: 56px; height: 60px; border-radius: 10px 10px 8px 8px; background:
      linear-gradient(90deg, var(--gold) 0 6px, transparent 6px calc(100% - 6px), var(--gold) calc(100% - 6px)) top / 100% 18px no-repeat, var(--navy);
    display: grid; place-items: center; padding-top: 8px; }
  .jersey .num { font: semi-expanded 800 22px/1 var(--display); color: var(--white); letter-spacing: -.02em; }
  /* No number entered: initials, dimmer jersey */
  .jersey.none { background:
      linear-gradient(90deg, var(--gold) 0 6px, transparent 6px calc(100% - 6px), var(--gold) calc(100% - 6px)) top / 100% 18px no-repeat, var(--navy-2); }
  .jersey.none .num { font-size: 17px; color: #C7D3E1; }
  .pinfo { min-width: 0; position: relative; z-index: 1; }
  .pinfo b { display: block; font-weight: 700; font-size: 15px; line-height: 1.25; }
  .pinfo span { font-size: 13px; color: var(--muted); }

  /* GameSheet team pages repeat the team's own header card; crop it along with the logo bar */
  .embed.teamembed iframe { top: calc(-1 * var(--gs-team-top)); height: calc(100% + var(--gs-team-top)); }
  .others { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .others::-webkit-scrollbar { display: none; }
  .others a { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px 6px 6px; font-weight: 600; font-size: 14px; transition: border-color .15s; }
  .others a:hover { border-color: var(--gold); }
  .others img { width: 28px; height: 28px; object-fit: contain; }

  main { padding-bottom: 56px; }
  footer { border-top: 1px solid var(--line); padding: 24px 0 32px; font-size: 13px; color: var(--muted); }
  footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
  .footlogo img { height: 64px; width: auto; display: block; }
  .footnote { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
  .aboutlogo { display: block; width: min(320px, 100%); height: auto; margin-bottom: 18px; }

  @media (max-width: 960px) {
    .teams { grid-template-columns: repeat(3, 1fr); }
    .about { grid-template-columns: 1fr; }
  }
  @media (max-width: 760px) {
    .wrap { padding: 0 16px; }
    header { position: static; }
    .section { scroll-margin-top: 12px; }
    nav { display: none; }
    .menu { display: block; }
    .drawer.open { display: block; background: var(--navy); border-top: 1px solid #2A4265; }
    .drawer ul { list-style: none; margin: 0; padding: 8px 16px 14px; }
    .drawer a { display: block; padding: 12px 4px; font-weight: 600; color: #D5DFEA; border-bottom: 1px solid #2A4265; }
    .drawer li:last-child a { border-bottom: 0; }
    .drawer .drawer-teams a { display: flex; padding: 8px 4px; border-bottom: 0; }
    .brand small { display: none; }
    .hero { padding: 20px 0 0; }
    .rink { border-radius: 48px; min-height: 0; }
    .board { padding: 28px 12px; }
    .matchup { gap: 8px; margin: 18px 0 12px; }
    .side img { width: 68px; height: 68px; padding: 5px; }
    .side .nm { font-size: 15px; }
    .center { min-width: 0; }
    .time { font-size: 42px; }
    .countdown { font-size: 13px; }
    .last { gap: 6px; font-size: 13px; padding: 8px 10px; }
    .last img { display: none; }
    .tabs button { font-size: 14px; padding: 12px 14px 13px; }
    .lrow { grid-template-columns: 1fr; }
    .lrow .lab { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px; padding: 12px 16px; }
    .lrow .lab i { display: none; }
    .lrow .lab b { font-size: 19px; }
    .lrow .lab span { display: none; }
    .lrow .lab::after { content: "Swipe for more"; margin-left: auto; font-size: 13px; color: #A9B8CB; }
    .cards { --gs-cards-top: 73px; }
    .embed { height: 620px; }
    .teamembed { --gs-team-top: 372px; }
    .thero.shero .wrap { grid-template-columns: 1fr; }
    .phero .wrap { grid-template-columns: auto 1fr; gap: 16px; }
    .statcard { grid-column: 1 / -1; width: 100%; }
    .statcard .crop { width: 100%; }
    .pjersey { width: 84px; height: 94px; padding-top: 10px; border-radius: 14px 14px 10px 10px; background-size: 100% 26px, auto; }
    .pjersey .num { font-size: 40px; }
    .pmeta { font-size: 13px; }
    .embed.playerembed { height: 720px; --gs-player-top: var(--gs-player-top-narrow, 325px); }
    .embed.gameembed { height: 720px; }
    .embed.gameembed iframe { top: -615px; height: calc(100% + 615px); }
    .ghero .wrap { grid-template-columns: 1fr; }
    .ghero h1 { font-size: 28px; }
    .gfacts { font-size: 13px; gap: 4px 14px; }
    .gteams { display: none; }
    .scorecard { margin-top: 16px; }
    .tickets-row { grid-auto-columns: 86%; }
    /* On phones the time sits under the teams so names get the full width */
    .tk-body { flex-direction: column; align-items: stretch; gap: 8px; }
    .tk-right { display: flex; align-items: baseline; gap: 8px; text-align: left; }
    .tk-when { margin-top: 0; }
    .stamp { top: -4px; right: 0; }
    .tickets-grid { grid-template-columns: 1fr; }
    .cal { padding: 10px 6px; }
    .cal-grid { gap: 3px; }
    .cal-wd { font-size: 10px; }
    .cal-cell { min-height: 62px; padding: 3px; border-radius: 7px; }
    .cal-d { font-size: 11px; }
    .cal-g { flex-direction: column; padding: 2px; gap: 0; border-radius: 6px; }
    .cal-g img { width: 16px; height: 16px; }
    .cal-g i, .cal-g small { display: none; }
    .thero .wrap { grid-template-columns: auto 1fr; gap: 18px; padding-top: 24px; padding-bottom: 24px; }
    .tlogo { width: 84px; height: 84px; padding: 7px; border-width: 3px; }
    .thero h1 { font-size: 30px; margin-bottom: 4px; }
    .thero .sub { font-size: 13px; }
    .back { margin-bottom: 8px; }
    .tnext { grid-column: 1 / -1; min-width: 0; }
    .tfacts { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
    .fact:last-child { grid-column: 1 / -1; }
    .fact b { font-size: 20px; }
    .grow { grid-template-columns: 64px 1fr auto; gap: 10px; padding: 12px 14px; }
    .grow .va { display: none; }
    .grow .opp img { width: 28px; height: 28px; }
    .rgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .pcard { flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px; }
    .jersey { width: 48px; height: 52px; }
    .jersey .num { font-size: 19px; }
    .pinfo b { font-size: 14px; }
    .about { padding: 24px 20px; }
    .footnote { align-items: flex-start; text-align: left; }
    .brandlogo { height: 30px; }
    .footlogo img { height: 52px; }
    h2 { font-size: 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    html { scroll-behavior: auto; }
    .dot { animation: none; }
    * { transition: none !important; }
  }

  /* ---------- Home: soft landing (v4.1) ---------- */
  .wk { padding-top: 34px; }
  .wk h2.big { font: semi-expanded 900 34px/1 var(--display); color: var(--navy); margin: 0 0 4px; }
  .wk .sub { color: var(--muted); margin: 0 0 18px; font-weight: 600; }
  .bigrow { display: grid; grid-template-columns: 110px 1fr 120px 1fr 150px; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; margin-bottom: 10px; color: var(--navy); }
  .bigrow .day { font: semi-expanded 800 15px/1.2 var(--display); }
  .bigrow .day small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
  .bigrow .t { display: flex; align-items: center; gap: 12px; font: semi-expanded 800 20px/1 var(--display); }
  .bigrow .t.h { justify-content: flex-end; }
  .bigrow img { width: 48px; height: 48px; object-fit: contain; }
  .bigrow .mid { text-align: center; font: expanded 900 30px/1 var(--display); color: var(--gold-ink); }
  .bigrow .mid small { display: block; font-size: 13px; font-weight: 700; color: var(--muted); }
  .bigrow .st { white-space: nowrap; text-align: right; font-weight: 800; font-size: 13px; letter-spacing: .06em; color: var(--muted); }
  .bigrow.final .st { color: var(--red); }
  .bigrow .lose { opacity: .55; }
  .wkfoot { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }
  .topcard { background: var(--navy); color: var(--white); border-radius: 16px; padding: 22px; display: grid; gap: 10px; }
  .topcard small { color: var(--gold); font-weight: 800; letter-spacing: .08em; font-size: 12px; }
  .topcard b.n { font: expanded 900 54px/1 var(--display); color: var(--gold); }
  .topcard .who { font: semi-expanded 800 22px/1.1 var(--display); }
  .topcard .who a { color: var(--white); }
  .topcard img { width: 40px; height: 40px; object-fit: contain; background: var(--white); border-radius: 50%; padding: 3px; }


  /* 4: Soft landing */
  .soft { position: relative; overflow: hidden; background: radial-gradient(circle at 1px 1px, #D9E3EC 1.2px, transparent 1.6px) 0 0/26px 26px, linear-gradient(180deg, #FFFFFF, var(--ice)); border-bottom: 1px solid var(--line); }
  .softgrid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 30px; min-height: 560px; }
  .softcopy { padding: 56px 0; position: relative; z-index: 1; }
  .softcopy .kick { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-ink); font: semi-expanded 800 14px/1 var(--display); letter-spacing: .12em; }
  .softcopy .kick img { height: 30px; }
  .softcopy h1 { font-family: var(--display); font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 5.4vw, 80px); line-height: .94; letter-spacing: -.005em; color: var(--navy); margin: 18px 0 18px; }
  .softcopy h1 span { color: var(--blue); }
  .softcopy p { color: var(--muted); font-size: 18px; line-height: 1.5; max-width: 470px; margin: 0 0 26px; }
  .softbtns { display: flex; flex-wrap: wrap; gap: 12px; }
  .softbtns a { padding: 14px 22px; border-radius: 99px; font-weight: 800; font-size: 15px; }
  .softbtns .go { background: var(--navy); color: var(--white); }
  .softbtns .ghost { border: 2px solid var(--navy); color: var(--navy); }
  .softnext { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--muted); }
  .softnext img { width: 26px; height: 26px; object-fit: contain; }
  .softnext b { color: var(--navy); }
  .slants { position: relative; height: 560px; display: flex; gap: 16px; justify-content: flex-end; margin-right: -40px; }
  .slant { flex: 0 0 128px; transform: skewX(-12deg); border-radius: 6px; overflow: hidden; background: var(--white); box-shadow: 0 20px 40px rgba(20,35,59,.12); display: grid; grid-template-rows: 1fr 1fr; }
  .slant:nth-child(1) { margin-top: 40px; height: 440px; }
  .slant:nth-child(2) { margin-top: 110px; height: 470px; }
  .slant:nth-child(3) { margin-top: 0; height: 450px; }
  .slant:nth-child(4) { margin-top: 90px; height: 470px; }
  .slant:nth-child(5) { margin-top: 20px; height: 450px; }
  .slant a { display: grid; place-items: center; transform: skewX(12deg); }
  .slant a + a { border-top: 1px solid var(--line); }
  .slant img { width: 92px; height: 92px; object-fit: contain; transition: transform .2s ease; }
  .slant a:hover img { transform: scale(1.08); }
  @media (max-width: 900px) {
    .softgrid { grid-template-columns: 1fr; min-height: 0; gap: 0; }
    .softcopy { padding: 40px 0 10px; }
    .softcopy h1 br { display: none; }
    .slants { height: 250px; margin: 0 0 10px; justify-content: center; gap: 8px; }
    .slant { flex-basis: 60px; height: 210px !important; margin-top: 0 !important; }
    .slant:nth-child(even) { margin-top: 30px !important; }
    .slant img { width: 46px; height: 46px; }
  }

  .bigrow.mine { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }
  @media (max-width: 760px) {
    .wkfoot { grid-template-columns: 1fr; }
    .bigrow { grid-template-columns: 1fr auto 1fr; padding: 14px; } .bigrow .day, .bigrow .st { display: none; }
    .bigrow .t { font-size: 15px; flex-direction: column; gap: 6px; } .bigrow img { width: 40px; height: 40px; }
  }

  /* ---------- Live and final states, and links out to GameSheet (v4.2) ---------- */
  .gstate { display: inline-flex; align-items: center; gap: 6px; font: semi-expanded 900 15px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
  .gstate.live { color: var(--red); }
  .gstate.live i, .sc-status.live i { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: livepulse 1.4s ease-in-out infinite; }
  @keyframes livepulse { 50% { opacity: .3; } }
  @media (prefers-reduced-motion: reduce) { .gstate.live i, .sc-status.live i { animation: none; } }
  .bigrow .mid .gstate { font-size: 18px; }
  .scorecard.ours { padding: 22px 26px 18px; color: var(--white); }
  .sc-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
  .sc-team { display: flex; align-items: center; gap: 14px; color: var(--white); font: semi-expanded 800 22px/1.1 var(--display); }
  .sc-team:last-child { flex-direction: row-reverse; text-align: right; }
  .sc-team img { width: 58px; height: 58px; object-fit: contain; background: var(--white); border-radius: 12px; padding: 4px; }
  .sc-team b { font: expanded 900 48px/1 var(--display); color: var(--gold); margin: 0 6px; }
  .sc-team:first-child b { margin-left: auto; }
  .sc-team:last-child b { margin-right: auto; }
  .sc-team.lost { color: #A9B8CB; } .sc-team.lost b { color: #7F92AA; }
  .sc-mid { display: grid; justify-items: center; gap: 6px; min-width: 110px; }
  .sc-time { font: expanded 900 30px/1 var(--display); color: var(--gold); }
  .sc-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #C7D3E1; }
  .sc-status.live { color: #FF8A8E; }
  .sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid #2A4265; color: #C7D3E1; font-size: 14px; }
  .gsbtn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 99px; border: 2px solid var(--gold); color: var(--white); font-weight: 800; font-size: 14px; white-space: nowrap; }
  .gsbtn.primary { background: var(--gold); color: var(--navy); }
  .gsbtn:hover { filter: brightness(1.08); }
  @media (max-width: 760px) {
    .scorecard.ours { padding: 18px 16px 16px; }
    .sc-row { gap: 10px; }
    .sc-team, .sc-team:last-child { flex-direction: column; text-align: center; gap: 8px; font-size: 15px; }
    .sc-team b, .sc-team:first-child b, .sc-team:last-child b { margin: 0; font-size: 36px; }
    .sc-team img { width: 46px; height: 46px; }
    .sc-mid { min-width: 0; }
    .sc-foot { flex-direction: column; align-items: stretch; text-align: center; }
    .gsbtn { justify-content: center; }
  }
  .tick .st.live { display: flex; align-items: center; gap: 6px; color: #FF8A8E; }
  .tick .st.live i { width: 7px; height: 7px; border-radius: 50%; background: #FF5A60; animation: livepulse 1.4s ease-in-out infinite; }
  .gsdeck { display: block; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px 6px; color: var(--navy); transition: border-color .15s, box-shadow .15s; }
  .gsdeck:hover { border-color: var(--gold); box-shadow: 0 10px 26px rgba(20,35,59,.10); }
  .gsdeck-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
  .gsdeck-head span { font: semi-expanded 900 22px/1 var(--display); }
  .gsdeck-head b { color: var(--gold-ink); font-size: 15px; }
  .gsdeck-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .gsdeck-grid div { background: var(--ice); border-radius: 12px; padding: 14px; display: grid; gap: 4px; }
  .gsdeck-grid b { font: semi-expanded 800 16px/1.2 var(--display); }
  .gsdeck-grid span { color: var(--muted); font-size: 13px; }
  @media (max-width: 760px) { .gsdeck-grid { grid-template-columns: 1fr 1fr; } .gsdeck { padding: 16px 14px 4px; } .gsdeck-head { flex-direction: column; gap: 6px; } }

  /* ---------- Add schedule to calendar (v4.3) ---------- */
  .calpick { position: relative; }
  .thero:has(.calpick) { overflow: visible; z-index: 5; }
  .calpick summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; }
  .calpick summary::-webkit-details-marker { display: none; }
  .calpick[open] summary { border-color: var(--gold); }
  .calmenu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; background: var(--white); border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px rgba(20,35,59,.28); border: 1px solid var(--line); display: grid; }
  .calmenu a { padding: 10px 12px; border-radius: 8px; color: var(--navy); font-weight: 700; font-size: 14px; }
  .calmenu a:hover { background: var(--ice); }
  .calmenu small { padding: 6px 12px 6px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); margin-top: 4px; }
  .schedfoot { margin-top: 12px; font-size: 13px; color: var(--muted); }
  .schedfoot a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
  .schedfoot a:hover { text-decoration-color: var(--gold); }

  /* ---------- Motion (v4.4): one easing, short durations, nothing that slows anyone down ---------- */
  :root { --ease: cubic-bezier(.22,1,.36,1); }

  /* Things you tap press in a little, so every tap feels answered */
  .ticket, .bigrow, .team, .opp-tile, .pcard, .tick, .gsdeck, .lcard, .wt, .softbtns a, .gsbtn, .mybtn, .btn,
  .seasontoggle button, .viewtoggle button, .teampick button, .cal-nav, .others a, .liverow {
    transition: transform .18s var(--ease), border-color .18s, box-shadow .18s, background-color .18s, color .18s;
  }
  .ticket:active, .bigrow:active, .team:active, .opp-tile:active, .pcard:active, .tick:active, .gsdeck:active, .wt:active,
  .softbtns a:active, .gsbtn:active, .mybtn:active, .btn:active, .cal-nav:active, .others a:active, .liverow:active { transform: scale(.97); transition-duration: .08s; }
  .seasontoggle button:active, .viewtoggle button:active, .teampick button:active { transform: scale(.94); transition-duration: .08s; }

  /* Hover lifts, only on devices that really hover (no sticky hover on phones) */
  @media (hover: hover) {
    .bigrow:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 10px 24px rgba(20,35,59,.08); }
    .softbtns .go:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(20,35,59,.22); }
    .softbtns .ghost:hover { background: var(--navy); color: var(--white); }
    .gsbtn:hover { transform: translateY(-1px); }
    .slant a:hover img { transform: scale(1.1) rotate(-2deg); }
    .slant { transition: transform .3s var(--ease), box-shadow .3s; }
    .slant:hover { transform: skewX(-12deg) translateY(-6px); box-shadow: 0 26px 46px rgba(20,35,59,.18); }
  }

  /* Menus open with a quick drop instead of popping in */
  @keyframes drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
  .calpick[open] .calmenu { animation: drop .2s var(--ease); transform-origin: top left; }
  .drawer.open { animation: drop .22s var(--ease); transform-origin: top; }
  .ddbtn svg { transition: transform .2s var(--ease); }

  /* When a table, list or calendar redraws (sorting, switching season or team, changing month), it fades in */
  @keyframes settle { from { opacity: 0; transform: translateY(4px); } }
  .ltable tbody, .cal-grid, #gtickets > *, .lgrid > * { animation: settle .26s var(--ease) backwards; }
  .lgrid > *:nth-child(2) { animation-delay: .03s; } .lgrid > *:nth-child(3) { animation-delay: .06s; } .lgrid > *:nth-child(4) { animation-delay: .09s; }

  /* Home page: the logo panels rise in one after another on first load */
  @keyframes rise { from { opacity: 0; transform: skewX(-12deg) translateY(28px); } }
  .slant { animation: rise .7s var(--ease) backwards; }
  .slant:nth-child(2) { animation-delay: .07s; } .slant:nth-child(3) { animation-delay: .14s; }
  .slant:nth-child(4) { animation-delay: .21s; } .slant:nth-child(5) { animation-delay: .28s; }
  @keyframes fadeup { from { opacity: 0; transform: translateY(14px); } }
  .softcopy > * { animation: fadeup .6s var(--ease) backwards; }
  .softcopy > *:nth-child(2) { animation-delay: .05s; } .softcopy > *:nth-child(3) { animation-delay: .1s; }
  .softcopy > *:nth-child(4) { animation-delay: .15s; } .softcopy > *:nth-child(5) { animation-delay: .2s; }

  /* Sections drift in as they scroll into view, in browsers that support scroll-linked animation */
  @supports (animation-timeline: view()) {
    @keyframes reveal { from { opacity: 0; transform: translateY(24px); } }
    main .section, main .about { animation: reveal linear backwards; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; }
    .ticket:active, .bigrow:active, .team:active, .softbtns a:active, .gsbtn:active, .mybtn:active { transform: none; }
  }
  .lcard.empty .lbig b { color: var(--line); }
  .lcard.empty .lwho span { color: var(--muted); font-weight: 600; font-size: 14px; }

  /* ---------- QA fixes (Nov 8) ---------- */
  /* Phones: two teams per row so ten teams fill five even rows */
  @media (max-width: 560px) { .teams { grid-template-columns: repeat(2, 1fr); } }
  /* Leader runner-up names stay on one line instead of wrapping around the logo */
  .lrest li span { min-width: 0; }
  .lrest li span a, .lrest li span > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  /* Top goalie card on the home page: the light twin of the Top scorer card */
  .topgoalie-head { margin-top: 26px; }
  .topcard.alt { background: var(--white); color: var(--navy); border: 1px solid var(--line); }
  .topcard.alt small { color: var(--gold-ink); }
  .topcard.alt b.n { color: var(--navy); }
  .topcard b.n em { font-style: normal; font-size: 18px; color: var(--gold-ink); margin-left: 6px; letter-spacing: .04em; }
  .topcard.alt .who a { color: var(--navy); }
  .topcard.alt img { border: 1px solid var(--line); }
  .tg-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--muted); font-weight: 600; }
  /* The schedule marks the next game */
  .ticket.nextup { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
  .ticket.nextup .tk-foot span:first-child::after { content: " · Next game"; color: var(--gold-ink); font-weight: 700; }

  /* Ties and overtime losses (league rulebook: tie and OT loss are 1 point) */
  .dots-track i.t, .last5 i.t { background: #A3AFBF; }
  .dots-track i.otl, .last5 i.otl { background: transparent; box-shadow: inset 0 0 0 2px var(--red); }
  .stop.t .ring { border-color: #A3AFBF; } .stop.otl .ring { border-color: #E39A9E; }
  .stop.t .lbl { color: var(--muted); } .stop.otl .lbl { color: #A1343A; }
  .meets em.t { background: var(--ice-2); color: var(--navy); } .meets em.otl { background: #F6E1E2; color: #8E2A2E; }
  .ticket.tied { background: #F3F5F8; border-color: #C9D3DF; } .ticket.tied .tk-when { color: var(--navy); font-weight: 800; }
  .ssub a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
  /* Phones: standings now carry T and OTL, so tighten cells and let long team names trim */
  @media (max-width: 480px) {
    .ltable.stand td, .ltable.stand th { padding-left: 4px; padding-right: 4px; font-size: 13px; }
    .ltable.stand td:first-child, .ltable.stand th:first-child { padding-left: 8px; }
    .ltable.stand td:last-child, .ltable.stand th:last-child { padding-right: 10px; }
    .ltable.stand .tcell { gap: 6px; max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; }
    .ltable.stand .tcell img { width: 20px; height: 20px; flex: none; }
  }

  /* ---------- Champions and photos (v4.7) ---------- */
  .rafters { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
  .banner { position: relative; width: 210px; min-height: 290px; padding: 22px 16px 54px; display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center;
    background: var(--navy); color: var(--white); border-top: 6px solid var(--gold);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); box-shadow: inset 0 0 0 2px rgba(168,156,88,.35); }
  .banner .bn-k { font: semi-expanded 800 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
  .banner img { width: 86px; height: 86px; object-fit: contain; background: var(--white); border-radius: 50%; padding: 8px; border: 3px solid var(--gold); }
  .banner b { font: semi-expanded 900 22px/1.1 var(--display); }
  .banner b a { color: var(--white); }
  .banner .bn-y { font: expanded 900 20px/1 var(--display); color: var(--gold); }
  .banner small { color: #A9B8CB; font-size: 12px; font-weight: 600; }
  .banner .bn-vs { display: flex; align-items: center; gap: 6px; }
  .banner .bn-vs img { width: 62px; height: 62px; }
  .banner .bn-vs i { font-style: normal; font-weight: 800; color: var(--gold); font-size: 13px; }
  .banner.tbd b { font-size: 16px; }
  .banner.empty { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); border-top-color: var(--line); justify-content: center; align-content: center; }
  .banner.empty b { color: var(--navy); font-size: 18px; }
  .banner.empty small { color: var(--muted); }
  .polist { display: grid; gap: 8px; }
  .porow { display: grid; grid-template-columns: 150px 1fr 120px 1fr; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; color: var(--navy); font-weight: 700; }
  .porow.final { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }
  .po-d { color: var(--muted); font-size: 13px; display: grid; }
  .po-d em { font-style: normal; color: var(--gold-ink); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
  .po-t { display: flex; align-items: center; gap: 10px; font: semi-expanded 800 17px/1 var(--display); }
  .po-t.h { justify-content: flex-end; }
  .po-t img { width: 34px; height: 34px; object-fit: contain; }
  .po-t.lose { opacity: .5; }
  .po-s { text-align: center; font: expanded 900 22px/1 var(--display); color: var(--gold-ink); }
  .po-s small { font: 600 12px/1.2 var(--sans); color: var(--muted); }
  @media (max-width: 760px) {
    .rafters { justify-content: center; }
    .banner { width: calc(50% - 9px); min-height: 250px; }
    .banner img { width: 70px; height: 70px; }
    .banner .bn-vs img { width: 50px; height: 50px; }
    .porow { grid-template-columns: 1fr auto 1fr; padding: 12px; }
    .po-d { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: start; gap: 8px; }
    .po-t { font-size: 14px; flex-direction: column; gap: 6px; }
    .po-t.h { flex-direction: column-reverse; }
  }
  .titlepill { display: inline-flex; align-items: center; gap: 6px; background: var(--gold); color: var(--navy); font-weight: 800; font-size: 13px; padding: 6px 11px; border-radius: 8px; }
  @media (hover: hover) { .titlepill:hover { filter: brightness(1.08); } }

  /* ---------- Photos (v4.8): home mosaic, photos page, full-screen viewer ---------- */
  @keyframes shimmer { to { background-position: -200% 0; } }
  .ph { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in;
    background: linear-gradient(100deg, var(--ice-2) 30%, #E8EEF4 50%, var(--ice-2) 70%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
  .ph img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity .45s var(--ease), transform .6s var(--ease); }
  .ph img.in { opacity: 1; transform: none; }
  .ph:has(img.in) { animation: none; }
  .ph span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; color: var(--white); font-size: 13px; font-weight: 600; text-align: left; background: linear-gradient(transparent, rgba(11,20,36,.82)); }
  @media (hover: hover) { .ph:hover img.in { transform: scale(1.04); } }
  /* Photos page: a masonry wall that keeps each photo's own shape */
  .gallery { columns: 3 260px; column-gap: 12px; }
  .gallery .ph { aspect-ratio: var(--ar); margin-bottom: 12px; break-inside: avoid; }
  /* Home: one big photo and four small */
  .phmosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 190px); gap: 10px; position: relative; }
  .phmosaic .ph.big { grid-row: 1 / 3; }
  .phmosaic.few { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-template-rows: 260px; }
  .phmosaic.few .ph.big { grid-row: auto; }
  .ph-more { position: absolute; right: 10px; bottom: 10px; background: var(--navy); color: var(--white); font-weight: 800; font-size: 13px; padding: 8px 12px; border-radius: 99px; }
  .ph-empty { grid-column: 1 / -1; grid-row: 1 / -1; column-span: all; display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center; padding: 40px 20px; border: 2px dashed var(--line); border-radius: 16px; color: var(--muted); background: var(--white); }
  .ph-empty svg { color: var(--gold); }
  .ph-empty b { color: var(--navy); font-size: 17px; }
  .phmosaic:has(.ph-empty) { display: block; }
  /* Full-screen viewer */
  .lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; border: 0; padding: 0; background: rgba(11,20,36,.94); color: var(--white); }
  .lightbox[open] { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; animation: drop .22s var(--ease); }
  .lightbox::backdrop { background: transparent; }
  .lightbox figure { margin: 0; display: grid; justify-items: center; gap: 12px; min-width: 0; }
  .lightbox img { max-width: 100%; max-height: 84vh; border-radius: 10px; opacity: 0; transition: opacity .3s var(--ease); }
  .lightbox img.in { opacity: 1; }
  .lightbox figcaption { font-weight: 600; font-size: 14px; color: #C7D3E1; text-align: center; }
  .lb-close { position: fixed; top: 14px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--white); color: var(--navy); font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; }
  .lb-nav { width: 48px; height: 48px; justify-self: center; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: var(--white); font-size: 30px; line-height: 1; cursor: pointer; }
  @media (hover: hover) { .lb-nav:hover { background: rgba(255,255,255,.24); } }
  @media (max-width: 760px) {
    .phmosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 120px 120px; }
    .phmosaic .ph.big { grid-row: auto; grid-column: 1 / -1; }
    .phmosaic.few { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-auto-rows: 150px; }
    .gallery { columns: 2 140px; column-gap: 8px; }
    .gallery .ph { margin-bottom: 8px; }
    .lightbox[open] { grid-template-columns: 1fr; }
    .lb-nav { position: fixed; bottom: 22px; }
    .lb-nav.prev { left: calc(50% - 60px); } .lb-nav.next { right: calc(50% - 60px); }
  }
  /* Six menu items: tighten them a little on small laptops and tablets */
  @media (max-width: 960px) { nav a, .ddbtn { padding-left: 8px; padding-right: 8px; font-size: 14px; } }
  /* 20 seasons of champions: a tidy grid of smaller banners */
  .rafters { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
  .banner { width: auto; min-height: 236px; padding: 18px 10px 46px; gap: 8px; }
  .banner img, .bn-init { width: 72px; height: 72px; }
  .bn-init { display: grid; place-items: center; border-radius: 50%; background: var(--white); border: 3px solid var(--gold); color: var(--navy); font: expanded 900 17px/1 var(--display); }
  .banner b { font-size: 19px; }
  .banner .bn-y { font-size: 17px; }
  @media (max-width: 760px) {
    .rafters { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .banner { width: auto; min-height: 168px; padding: 12px 4px 34px; gap: 6px; border-top-width: 4px; }
    .banner .bn-k { font-size: 9px; letter-spacing: .1em; }
    .banner img, .bn-init { width: 46px; height: 46px; padding: 4px; border-width: 2px; }
    .bn-init { font-size: 11px; }
    .banner b { font-size: 14px; }
    .banner .bn-y { font-size: 13px; }
  }

  /* ---------- Logo intro on first visit (v4.9) ---------- */
  .splash { display: none; }
  html.intro .splash { display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000; background: radial-gradient(circle at 50% 45%, #1E3352 0, var(--navy) 55%, #0B1424 100%); }
  html.intro:not(.intro-done) body { overflow: hidden; }
  html.intro-done .splash { display: none; }
  .splash svg { width: min(560px, 82vw); height: auto; overflow: visible; }
  .s-word text { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: 78px; fill: #FFFFFF; }
  .s-name { font-family: var(--display); font-weight: 700; font-stretch: 112%; font-size: 13px; fill: #A9B8CB; letter-spacing: .02em; }
  /* Before go: everything waits off-stage */
  html.intro .s-word, html.intro .s-stick, html.intro .s-ball, html.intro .s-marks, html.intro .s-name { opacity: 0; }
  .s-word { transform-box: fill-box; transform-origin: center; }
  .s-ball { transform-box: fill-box; transform-origin: center; }
  .s-marks { stroke-dasharray: 12; stroke-dashoffset: 12; }
  /* 1. Letters punch in together  2. Stick slides in along the ice  3. Ball snaps off the blade  4. Name, then lift away */
  html.intro-go .s-word { animation: s-punch .5s cubic-bezier(.22,1,.36,1) forwards; }
  html.intro-go .s-stick { animation: s-slide .55s cubic-bezier(.16,1,.3,1) .22s forwards; }
  html.intro-go .s-ball { animation: s-shot .42s cubic-bezier(.2,1.4,.4,1) .66s forwards; }
  html.intro-go .s-marks { animation: s-marks .3s ease-out .78s forwards; }
  html.intro-go .s-name { animation: s-fade .35s ease-out .86s forwards; }
  html.intro-go .splash { animation: s-out .45s cubic-bezier(.4,0,.2,1) 1.4s forwards; }
  @keyframes s-punch { 0% { opacity: 0; transform: scale(1.25); filter: blur(8px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } }
  @keyframes s-slide { from { opacity: 1; transform: translateX(-520px); } to { opacity: 1; transform: none; } }
  @keyframes s-shot { 0% { opacity: 1; transform: translate(-10px, 22px) scale(.2); } 100% { opacity: 1; transform: none; } }
  @keyframes s-marks { from { opacity: 1; stroke-dashoffset: 12; } to { opacity: 1; stroke-dashoffset: 0; } }
  @keyframes s-fade { to { opacity: 1; } }
  @keyframes s-out { to { opacity: 0; transform: translateY(-14px); visibility: hidden; } }
  /* The home page's own entrance waits for the intro to lift */
  html.intro .softcopy > *, html.intro .slant { animation-delay: calc(var(--d, 0s) + 1.55s); }
  .softcopy > *:nth-child(2) { --d: .05s; } .softcopy > *:nth-child(3) { --d: .1s; } .softcopy > *:nth-child(4) { --d: .15s; } .softcopy > *:nth-child(5) { --d: .2s; }
  .slant:nth-child(2) { --d: .07s; } .slant:nth-child(3) { --d: .14s; } .slant:nth-child(4) { --d: .21s; } .slant:nth-child(5) { --d: .28s; }