/* ==========================================================================
   sushibet NHL -- design system
   --------------------------------------------------------------------------
   Loaded AFTER style.css and scoped to body.nhl, so nothing here can leak
   into CFB or Pay Dirt. style.css still supplies the brand mark, the sport
   switcher's structure and the responsible-gambling bar.

   DIRECTION: a rink at night under arena lights. Deep ink-blue ice, frosted
   glass surfaces, one cold accent (glacier cyan) and one warm one (gold,
   reserved for stakes and the free play, exactly as on CFB). The only
   hockey ornament is the rink's own geometry: a hairline red centre line and
   blue lines in the header. No clip-art icicles, no snow.

   TYPE: Barlow Condensed for display and every scoreboard number (it is the
   face of arena boards and jersey numbers -- tall, tight, legible at a
   glance); Inter for everything read as text. All figures are tabular so
   columns of numbers line up.

   ACCESSIBILITY, measured not assumed (see tests/test_nhl_site.py):
     text      #EAF6FC on the page  >= 15:1
     text-2    #B4CCDA              >=  9:1
     text-3    #8FA9BB              >=  6:1   (AA for small text)
     every accent used for text     >=  4.5:1 on its surface
   Win/loss is never colour alone (letters W / L / OT ride on every chip),
   focus is always visible, motion respects prefers-reduced-motion, and every
   tap target is at least 44px tall on touch screens.

   EXISTS TWICE: src/site/static/nhl.css and site/dist/static/nhl.css.
   A test asserts they are byte-identical.
   ========================================================================== */

body.nhl{
  /* ground */
  --bg-0:#050E16; --bg-1:#081827; --bg-2:#0C2336;
  /* surfaces (frosted glass over the ground) */
  --s-1:rgba(206,234,248,.055); --s-2:rgba(206,234,248,.09); --s-3:rgba(206,234,248,.14);
  --edge:rgba(190,228,245,.16); --edge-strong:rgba(190,228,245,.30);
  /* text */
  --t-1:#EAF6FC; --t-2:#B4CCDA; --t-3:#8FA9BB;
  /* accents */
  --ice:#8FDCF7; --ice-2:#C6F0FF; --glacier:#3FA9DB;
  --gold:#F4C55A; --gold-ink:#1C1404;
  --win:#5FD9A8; --loss:#FF9B9B; --otl:#C9B8FF;
  --rink-red:#D8404E; --rink-blue:#3B7BD8;
  /* type */
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* rhythm */
  --r-lg:18px; --r-md:12px; --r-sm:8px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -18px rgba(0,0,0,.65);

  margin:0; min-height:100vh; color:var(--t-1);
  font-family:var(--f-text); font-size:15px; line-height:1.55;
  font-feature-settings:"tnum" 1,"cv11" 1; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 520px at 50% -140px, rgba(143,220,247,.16), transparent 70%),
    radial-gradient(900px 600px at 110% 20%, rgba(63,169,219,.08), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 60%) fixed;
  background-color:var(--bg-0);
  overflow-x:hidden;
}
body.nhl::before{ /* a whisper of frost at the top edge of the glass */
  content:""; position:fixed; inset:0 0 auto 0; height:220px; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(198,240,255,.07), transparent);
}
.nhl *,.nhl *::before,.nhl *::after{ box-sizing:border-box; }
.nhl a{ color:var(--ice); text-decoration-thickness:1px; text-underline-offset:3px; }
.nhl a:hover{ color:var(--ice-2); }
.nhl :focus-visible{ outline:2px solid var(--ice-2); outline-offset:3px; border-radius:6px; }
.nhl .sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.nhl .skip{ position:absolute; left:12px; top:-60px; z-index:10; background:var(--ice-2); color:var(--bg-0);
  padding:10px 14px; border-radius:var(--r-sm); font-weight:700; }
.nhl .skip:focus{ top:12px; }

.nhl .wrap{ position:relative; z-index:1; max-width:1160px; margin:0 auto; padding:0 20px 56px; }

/* ---- masthead ------------------------------------------------------------ */
.nhl .masthead{ position:relative; padding:20px 0 0; }
.nhl .rinklines{ position:absolute; inset:0 -20px auto; height:3px; pointer-events:none;
  background:linear-gradient(90deg, transparent 0 22%, var(--rink-blue) 22% 23%, transparent 23% 49.6%,
    var(--rink-red) 49.6% 50.4%, transparent 50.4% 77%, var(--rink-blue) 77% 78%, transparent 78%); opacity:.85; }
.nhl .topbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 0 0; }
.nhl .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; background:none; border:0; padding:0; box-shadow:none; }
.nhl .brand .mascot{ width:40px; height:40px; border-radius:50%; border:2px solid var(--edge-strong); }
.nhl .brand .word{ font-family:var(--f-display); font-size:26px; font-weight:700; letter-spacing:.01em; color:var(--t-1); text-shadow:none; }
.nhl .brand .bet-pill{ background:var(--ice); color:var(--bg-0); border-radius:6px; padding:0 6px; margin:0 1px; }
.nhl .sportsw{ display:flex; gap:2px; padding:3px; margin-left:auto; border-radius:999px; background:var(--s-1); border:1px solid var(--edge); }
.nhl .sportsw a{ padding:7px 14px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.04em;
  color:var(--t-2); text-decoration:none; min-height:36px; display:inline-flex; align-items:center; }
.nhl .sportsw a:hover{ color:var(--t-1); }
.nhl .sportsw a.on{ background:var(--t-1); color:var(--bg-0); }
.nhl .nav{ display:flex; }
.nhl a.authlink{ font-family:var(--f-text); font-size:13px; font-weight:700; padding:8px 16px; border-radius:999px;
  background:var(--gold); color:var(--gold-ink); border:0; min-height:36px; display:inline-flex; align-items:center; }
.nhl a.authlink.out{ background:transparent; color:var(--t-1); border:1px solid var(--edge-strong); }

/* section tabs */
.nhl .tabs{ display:flex; gap:4px; margin:22px 0 0; border-bottom:1px solid var(--edge); overflow-x:auto; scrollbar-width:none; }
.nhl .tabs::-webkit-scrollbar{ display:none; }
.nhl .tabs a{ position:relative; padding:12px 14px 13px; font-size:14px; font-weight:600; color:var(--t-2);
  text-decoration:none; white-space:nowrap; }
.nhl .tabs a:hover{ color:var(--t-1); }
.nhl .tabs a[aria-current="page"]{ color:var(--t-1); }
.nhl .tabs a[aria-current="page"]::after{ content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px;
  border-radius:2px; background:var(--ice); box-shadow:0 0 12px rgba(143,220,247,.8); }

/* ---- page heading -------------------------------------------------------- */
.nhl .pagehead{ display:flex; align-items:flex-end; gap:16px 24px; flex-wrap:wrap; margin:30px 0 20px; }
.nhl .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ice); margin:0 0 6px; }
.nhl h1{ font-family:var(--f-display); font-weight:700; font-size:clamp(34px,5vw,52px); line-height:1; letter-spacing:.005em; margin:0; color:var(--t-1); }
.nhl h2{ font-family:var(--f-display); font-weight:700; font-size:24px; line-height:1.1; letter-spacing:.01em; margin:0; color:var(--t-1); }
.nhl h3{ font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--t-2); margin:0 0 10px; }
.nhl .lede{ color:var(--t-2); margin:10px 0 0; max-width:62ch; }
.nhl .meta{ color:var(--t-3); font-size:13px; }
.nhl .pagehead .meta{ margin-left:auto; text-align:right; }

/* ---- surfaces ------------------------------------------------------------ */
.nhl .panel{ background:var(--s-1); border:1px solid var(--edge); border-radius:var(--r-lg); padding:20px;
  box-shadow:var(--shadow); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); margin:0 0 18px; }
.nhl .panel-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.nhl .panel-head .meta{ margin-left:auto; }
.nhl .grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:0 0 18px; }
.nhl .grid-2 > .panel{ margin:0; }

.nhl .notice{ display:flex; gap:12px; align-items:flex-start; border-radius:var(--r-md); padding:14px 16px; margin:0 0 18px;
  background:rgba(143,220,247,.08); border:1px solid rgba(143,220,247,.28); color:var(--t-1); font-size:14px; }
.nhl .notice .ic{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--ice); color:var(--bg-0); font-weight:800; font-size:13px; }
.nhl .notice.warn{ background:rgba(255,155,155,.08); border-color:rgba(255,155,155,.35); }
.nhl .notice.warn .ic{ background:var(--loss); }
.nhl .notice p{ margin:0; }

/* ---- stat strip (record) ------------------------------------------------- */
.nhl .statstrip{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; border-radius:var(--r-lg);
  overflow:hidden; background:var(--edge); border:1px solid var(--edge); margin:0 0 22px; }
.nhl .statstrip > div{ background:var(--bg-1); padding:16px 18px; }
.nhl .statstrip .v{ font-family:var(--f-display); font-size:34px; font-weight:700; line-height:1; }
.nhl .statstrip .k{ margin-top:6px; font-size:12px; color:var(--t-3); letter-spacing:.02em; }
.nhl .pos{ color:var(--win); } .nhl .neg{ color:var(--loss); }

/* ---- controls ------------------------------------------------------------ */
.nhl .toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 16px; }
.nhl .toolbar h2{ margin-right:6px; }
.nhl .count{ font-size:12px; font-weight:700; color:var(--t-2); background:var(--s-2); border:1px solid var(--edge);
  padding:3px 10px; border-radius:999px; }
.nhl .search{ margin-left:auto; position:relative; }
.nhl .search input{ font:inherit; font-size:14px; color:var(--t-1); background:var(--s-1);
  border:1px solid var(--edge); border-radius:999px; min-height:40px; padding:0 14px 0 36px; width:220px; }
.nhl .search input::placeholder{ color:var(--t-3); }
.nhl .search svg{ position:absolute; left:12px; top:50%; translate:0 -50%; width:16px; height:16px; color:var(--t-3); }
.nhl .toggle{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--t-2); cursor:pointer; min-height:40px; }
.nhl .toggle input{ width:18px; height:18px; accent-color:var(--ice); }
.nhl .noresults{ color:var(--t-2); padding:20px 0; }

/* ---- team chip ----------------------------------------------------------- */
.nhl .chip{ --size:34px; flex:none; width:var(--size); height:var(--size); border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(145deg, color-mix(in srgb, var(--tc) 88%, white), var(--tc));
  color:var(--tc-ink); font-family:var(--f-display); font-weight:700; font-size:calc(var(--size) * .38); letter-spacing:.02em;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 0 0 2px color-mix(in srgb, var(--tc2) 55%, transparent); }
.nhl .chip.lg{ --size:64px; border-radius:18px; }
.nhl .chip.sm{ --size:26px; border-radius:7px; }

/* ---- game tiles ---------------------------------------------------------- */
.nhl .tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px; align-items:start; }
.nhl .tile{ position:relative; display:flex; flex-direction:column; background:var(--s-1); border:1px solid var(--edge);
  border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; transition:border-color .2s; }
.nhl .tile:hover{ border-color:var(--edge-strong); }
.nhl .tile.has-bet{ background:linear-gradient(180deg, rgba(143,220,247,.07), var(--s-1) 40%); }
.nhl .tile.free{ border-color:rgba(244,197,90,.7); box-shadow:0 0 0 1px rgba(244,197,90,.35), var(--shadow); }
.nhl .tile-top{ display:flex; align-items:center; gap:8px; padding:14px 16px 0; font-size:12.5px; color:var(--t-3); }
.nhl .tile-top .when{ font-weight:600; color:var(--t-2); }
.nhl .tile-top .flags{ margin-left:auto; display:flex; gap:6px; }
.nhl .badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px; background:var(--s-2); color:var(--t-2); border:1px solid var(--edge); }
.nhl .badge.gold{ background:var(--gold); color:var(--gold-ink); border-color:transparent; }
.nhl .badge.ice{ background:rgba(143,220,247,.14); color:var(--ice-2); border-color:rgba(143,220,247,.35); }
.nhl .badge.live{ background:rgba(255,155,155,.15); color:#FFD0D0; border-color:rgba(255,155,155,.4); }
.nhl .badge.live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--loss); }

.nhl .board{ padding:10px 16px 4px; }
.nhl .brow{ display:flex; align-items:center; gap:12px; padding:7px 0; }
.nhl .brow + .brow{ border-top:1px dashed var(--edge); }
.nhl .brow .nm{ min-width:0; flex:1; }
.nhl .brow .nm a,.nhl .brow .nm .name{ display:block; font-weight:700; font-size:16px; color:var(--t-1); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nhl .brow .nm a:hover{ color:var(--ice-2); }
.nhl .brow .nm small{ display:block; font-size:12px; color:var(--t-3); }
.nhl .brow .g{ font-family:var(--f-display); font-size:34px; font-weight:700; line-height:1; color:var(--t-2); min-width:2.2ch; text-align:right; }
.nhl .brow.lead .g{ color:var(--t-1); }
.nhl .board .caption{ font-size:11px; color:var(--t-3); letter-spacing:.1em; text-transform:uppercase; font-weight:800; padding:0 0 2px; }

/* win-chance bar: always paired with the numbers in text */
.nhl .wp{ padding:6px 16px 12px; }
.nhl .wp .lbls{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--t-2); margin-bottom:6px; }
.nhl .wp .lbls b{ color:var(--t-1); }
.nhl .wp .bar{ position:relative; height:8px; border-radius:999px; background:var(--s-3); }
.nhl .wp .bar i{ position:absolute; inset:0 auto 0 0; border-radius:999px 0 0 999px;
  background:linear-gradient(90deg, var(--glacier), var(--ice)); }
.nhl .wp .bar .mkt{ position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; background:var(--t-1); border-radius:1px;
  box-shadow:0 0 0 2px var(--bg-1); }
.nhl .wp .legend{ display:flex; gap:14px; margin-top:7px; font-size:11.5px; color:var(--t-3); }
.nhl .wp .legend span::before{ content:""; display:inline-block; width:10px; height:3px; margin-right:6px; vertical-align:middle;
  background:var(--ice); border-radius:2px; }
.nhl .wp .legend span.m::before{ width:2px; height:10px; background:var(--t-1); }

/* a bet inside a tile / on a game page */
.nhl .bet{ margin:4px 12px 12px; padding:12px 14px; border-radius:var(--r-md); background:var(--s-2); border:1px solid var(--edge); }
.nhl .bet.free{ border-color:rgba(244,197,90,.6); background:linear-gradient(180deg, rgba(244,197,90,.10), var(--s-2)); }
.nhl .bet.watch{ border-style:dashed; }
.nhl .bets .bet{ margin:0; }
.nhl .bets{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.nhl .bet-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.nhl .bet .mk{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--t-3); }
.nhl .bet .pick{ font-family:var(--f-display); font-size:26px; font-weight:700; line-height:1.05; color:var(--t-1); }
.nhl .bet .mu{ font-size:12.5px; color:var(--t-3); }
.nhl .stake{ margin-left:auto; font-family:var(--f-display); font-size:18px; font-weight:700; padding:2px 10px; border-radius:8px;
  background:var(--t-1); color:var(--bg-0); }
.nhl .stake.big{ background:var(--gold); color:var(--gold-ink); }
.nhl .prices{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.nhl .price{ font-size:12.5px; color:var(--t-2); background:var(--s-1); border:1px solid var(--edge); border-radius:8px; padding:5px 9px; }
.nhl .price b{ color:var(--t-1); font-weight:700; }
.nhl .why{ margin:10px 0 0; font-size:13px; color:var(--t-2); line-height:1.5; }
.nhl .why b{ color:var(--t-1); }

.nhl .locked{ margin:4px 12px 12px; padding:12px 14px; border-radius:var(--r-md); border:1px dashed var(--edge-strong);
  display:flex; align-items:center; gap:10px; color:var(--t-2); font-size:13.5px; }
.nhl .locked a{ font-weight:700; margin-left:auto; white-space:nowrap; }
.nhl .locked svg{ width:16px; height:16px; flex:none; color:var(--t-3); }

/* tile drawer */
.nhl .tile details{ margin-top:auto; border-top:1px solid var(--edge); }
.nhl .tile summary{ list-style:none; display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--t-2); min-height:44px; }
.nhl .tile summary::-webkit-details-marker{ display:none; }
.nhl .tile summary:hover{ color:var(--t-1); }
.nhl .tile summary .chev{ width:14px; height:14px; transition:rotate .2s; }
.nhl .tile details[open] summary .chev{ rotate:180deg; }
.nhl .tile .full{ margin-left:auto; color:var(--ice); font-weight:700; text-decoration:none; font-size:13px; }
.nhl .drawer{ padding:0 16px 14px; }
.nhl .drawer .src{ font-size:11.5px; color:var(--t-3); margin-top:8px; }

/* ---- comparison ("tale of the tape") ------------------------------------ */
.nhl .tape{ width:100%; border-collapse:collapse; font-size:13.5px; }
.nhl .tape th,.nhl .tape td{ padding:8px 6px; border-bottom:1px solid var(--edge); }
.nhl .tape thead th{ font-size:12px; font-weight:800; color:var(--t-1); letter-spacing:.06em; }
.nhl .tape thead th:first-child{ text-align:right; } .nhl .tape thead th:last-child{ text-align:left; }
.nhl .tape th[scope="row"]{ text-align:center; font-weight:500; color:var(--t-3); font-size:12.5px; white-space:nowrap; }
.nhl .tape td{ width:40%; }
.nhl .tape td.a{ text-align:right; } .nhl .tape td.h{ text-align:left; }
.nhl .tape .val{ font-weight:700; color:var(--t-2); }
.nhl .tape .better .val{ color:var(--t-1); }
.nhl .tape .meter{ display:block; height:4px; border-radius:2px; background:var(--s-2); margin-top:5px; overflow:hidden; }
.nhl .tape .meter i{ display:block; height:100%; background:var(--t-3); border-radius:2px; opacity:.6; }
.nhl .tape td.a .meter i{ margin-left:auto; }
.nhl .tape .better .meter i{ background:var(--ice); opacity:1; }
.nhl .tape tbody tr:last-child th,.nhl .tape tbody tr:last-child td{ border-bottom:0; }
.nhl .window{ display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--s-1); border:1px solid var(--edge); }
.nhl .window button{ font:inherit; font-size:12.5px; font-weight:700; color:var(--t-2); background:none; border:0; border-radius:999px;
  padding:6px 12px; min-height:32px; cursor:pointer; }
.nhl .window button[aria-pressed="true"]{ background:var(--t-1); color:var(--bg-0); }
.nhl [data-window-panel][hidden]{ display:none; }

/* ---- game page hero ------------------------------------------------------ */
.nhl .matchup{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; padding:26px 22px;
  border-radius:24px; border:1px solid var(--edge); box-shadow:var(--shadow); margin:26px 0 18px; overflow:hidden; position:relative;
  background:
    radial-gradient(420px 200px at 0% 50%, color-mix(in srgb, var(--away) 26%, transparent), transparent 70%),
    radial-gradient(420px 200px at 100% 50%, color-mix(in srgb, var(--home) 26%, transparent), transparent 70%),
    var(--s-1); }
.nhl .side{ display:flex; align-items:center; gap:16px; min-width:0; }
.nhl .side.home{ flex-direction:row-reverse; text-align:right; }
.nhl .side .who{ min-width:0; }
.nhl .side .city{ font-size:13px; color:var(--t-2); }
.nhl .side .team{ font-family:var(--f-display); font-size:clamp(24px,3.4vw,38px); font-weight:700; line-height:1; color:var(--t-1);
  text-decoration:none; display:block; }
.nhl .side .team:hover{ color:var(--ice-2); }
.nhl .side .rec{ font-size:12.5px; color:var(--t-3); margin-top:6px; }
.nhl .center{ text-align:center; }
.nhl .center .proj{ font-family:var(--f-display); font-size:clamp(44px,7vw,72px); font-weight:700; line-height:.9; letter-spacing:.01em; }
.nhl .center .proj .dash{ color:var(--t-3); margin:0 .12em; }
.nhl .center .proj .lo{ color:var(--t-2); }
.nhl .center .lbl{ font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--t-3); margin-top:8px; }
.nhl .center .when{ font-size:13.5px; color:var(--t-2); margin-top:10px; }
.nhl .matchup .wp{ grid-column:1 / -1; padding:4px 0 0; }

/* goalies */
.nhl .goalies{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.nhl .goalie{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--r-md); background:var(--s-2); border:1px solid var(--edge); }
.nhl .goalie .nm{ font-weight:700; }
.nhl .goalie .st{ margin-left:auto; }
.nhl .st{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:4px 8px; border-radius:999px; border:1px solid var(--edge); color:var(--t-2); white-space:nowrap; }
.nhl .st.confirmed{ color:#0A2A1D; background:var(--win); border-color:transparent; }
.nhl .st.likely,.nhl .st.projected,.nhl .st.manual{ color:var(--gold-ink); background:var(--gold); border-color:transparent; }

/* form strip */
.nhl .form{ display:flex; gap:5px; flex-wrap:wrap; }
.nhl .res{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:12px; font-weight:800;
  border:1px solid var(--edge); background:var(--s-2); color:var(--t-2); }
.nhl .res.W{ background:rgba(95,217,168,.16); border-color:rgba(95,217,168,.55); color:var(--win); }
.nhl .res.L{ background:rgba(255,155,155,.12); border-color:rgba(255,155,155,.45); color:var(--loss); }
.nhl .res.OT{ background:rgba(201,184,255,.12); border-color:rgba(201,184,255,.45); color:var(--otl); font-size:10.5px; }

/* ---- tables -------------------------------------------------------------- */
.nhl .tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.nhl table.data{ width:100%; border-collapse:collapse; font-size:13.5px; }
.nhl table.data th,.nhl table.data td{ padding:10px 10px; text-align:right; border-bottom:1px solid var(--edge); white-space:nowrap; }
.nhl table.data th:first-child,.nhl table.data td:first-child{ text-align:left; padding-left:4px; }
.nhl table.data thead th{ font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--t-3); }
.nhl table.data tbody tr:hover{ background:var(--s-1); }
.nhl table.data .teamcell{ display:flex; align-items:center; gap:10px; font-weight:700; text-align:left; }
.nhl table.data .teamcell a{ color:var(--t-1); text-decoration:none; }
.nhl table.data .teamcell a:hover{ color:var(--ice-2); }
.nhl table.data tbody tr:last-child td,.nhl table.data tbody tr:last-child th{ border-bottom:0; }
.nhl .num-lg{ font-family:var(--f-display); font-size:20px; font-weight:700; }
.nhl .mv{ font-size:11.5px; font-weight:700; }
.nhl .mv.up{ color:var(--win); } .nhl .mv.dn{ color:var(--loss); }
.nhl .muted{ color:var(--t-3); }

/* diverging rating bar */
.nhl .dbar{ position:relative; width:160px; height:8px; border-radius:999px; background:var(--s-2); display:inline-block; vertical-align:middle; }
.nhl .dbar::after{ content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--edge-strong); }
.nhl .dbar i{ position:absolute; top:0; bottom:0; }
.nhl .dbar i.p{ left:50%; background:var(--ice); border-radius:0 999px 999px 0; }
.nhl .dbar i.n{ right:50%; background:var(--loss); border-radius:999px 0 0 999px; }

/* projection range bar */
.nhl .range{ position:relative; width:180px; height:8px; display:inline-block; vertical-align:middle; }
.nhl .range .track{ position:absolute; inset:0; border-radius:999px; background:var(--s-2); }
.nhl .range .band{ position:absolute; top:0; bottom:0; border-radius:999px; background:rgba(143,220,247,.35); }
.nhl .range .pt{ position:absolute; top:-4px; width:4px; height:16px; margin-left:-2px; border-radius:2px; background:var(--t-1); }

/* ---- team page ----------------------------------------------------------- */
.nhl .teamhero{ position:relative; display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:26px 24px; margin:26px 0 18px;
  border-radius:24px; border:1px solid var(--edge); box-shadow:var(--shadow); overflow:hidden;
  background:linear-gradient(120deg, color-mix(in srgb, var(--tc) 38%, var(--bg-1)) 0%, var(--bg-1) 62%); }
.nhl .teamhero::after{ content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%;
  border:28px solid color-mix(in srgb, var(--tc2) 22%, transparent); pointer-events:none; }
.nhl .teamhero h1{ position:relative; z-index:1; }
.nhl .teamhero .facts{ display:flex; gap:28px; flex-wrap:wrap; margin-left:auto; position:relative; z-index:1; }
.nhl .fact .v{ font-family:var(--f-display); font-size:36px; font-weight:700; line-height:1; }
.nhl .fact .k{ font-size:12px; color:var(--t-2); margin-top:4px; }
.nhl .lines{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.nhl .line{ padding:12px 14px; border-radius:var(--r-md); background:var(--s-2); border:1px solid var(--edge); }
.nhl .line h3{ margin:0 0 8px; font-size:11.5px; }
.nhl .line ul{ list-style:none; margin:0; padding:0; }
.nhl .line li{ display:flex; gap:8px; align-items:baseline; padding:3px 0; font-size:14px; }
.nhl .line li .p{ color:var(--t-3); font-size:11.5px; font-weight:700; min-width:2.4ch; }
.nhl .line li .inj{ margin-left:auto; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--loss); }

/* ---- CTA (public) -------------------------------------------------------- */
.nhl .cta{ text-align:center; padding:28px 20px; border-radius:var(--r-lg); border:1px solid rgba(244,197,90,.45);
  background:linear-gradient(180deg, rgba(244,197,90,.10), transparent); margin:18px 0; }
.nhl .cta h2{ font-size:28px; }
.nhl .cta p{ color:var(--t-2); margin:8px auto 16px; max-width:52ch; }
.nhl .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; border-radius:999px;
  background:var(--gold); color:var(--gold-ink); font-weight:800; text-decoration:none; font-size:14.5px; }
.nhl .btn:hover{ color:var(--gold-ink); filter:brightness(1.06); }
.nhl .btn.ghost{ background:transparent; color:var(--t-1); border:1px solid var(--edge-strong); }

/* ---- empty / placeholder ------------------------------------------------- */
.nhl .hero-empty{ text-align:center; padding:56px 20px 44px; }
.nhl .hero-empty .puck{ width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid var(--edge-strong);
  box-shadow:0 0 0 10px rgba(143,220,247,.06), 0 20px 40px -18px #000; }
.nhl .hero-empty h1{ margin:22px 0 10px; }
.nhl .hero-empty p{ color:var(--t-2); max-width:54ch; margin:0 auto; }
.nhl .hero-empty .row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px; }

.nhl .howto dl{ display:grid; grid-template-columns:minmax(120px,180px) 1fr; gap:14px 20px; margin:0; }
.nhl .howto dt{ font-family:var(--f-display); font-size:20px; font-weight:700; color:var(--t-1); }
.nhl .howto dd{ margin:0; color:var(--t-2); }

.nhl footer.foot{ margin-top:36px; padding-top:18px; border-top:1px solid var(--edge); display:flex; gap:12px; flex-wrap:wrap;
  font-size:12.5px; color:var(--t-3); }
.nhl .rg-bar{ position:relative; z-index:1; background:var(--bg-0); color:var(--t-3); border-top:1px solid var(--edge); }
.nhl .rg-bar a{ color:var(--t-1); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:760px){
  .nhl .wrap{ padding:0 16px 44px; }
  .nhl .sportsw{ margin-left:0; order:3; }
  .nhl .nav{ margin-left:auto; }
  .nhl .pagehead .meta{ margin-left:0; text-align:left; }
  .nhl .statstrip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nhl .grid-2,.nhl .goalies{ grid-template-columns:1fr; }
  .nhl .tiles{ grid-template-columns:1fr; }
  .nhl .search{ margin-left:0; width:100%; }
  .nhl .search input{ width:100%; }
  .nhl .matchup{ grid-template-columns:1fr; padding:20px 16px; gap:14px; }
  .nhl .side.home{ flex-direction:row; text-align:left; }
  .nhl .center{ order:-1; }
  .nhl .teamhero .facts{ margin-left:0; gap:20px; }
  .nhl .howto dl{ grid-template-columns:1fr; gap:4px 0; }
  .nhl .howto dd{ margin-bottom:12px; }
  .nhl .dbar{ width:90px; } .nhl .range{ width:110px; }
  .nhl .tabs a,.nhl .sportsw a,.nhl a.authlink,.nhl .window button{ min-height:44px; }
}
@media (prefers-reduced-motion:reduce){
  .nhl *{ transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}
@media (prefers-contrast:more){
  body.nhl{ --edge:rgba(190,228,245,.45); --t-2:#D5E6EF; --t-3:#B8CDDA; }
}

.nhl details.moved{ border-top:1px solid var(--edge); padding:4px 0; }
.nhl details.moved:first-of-type{ border-top:0; }
.nhl details.moved summary{ display:flex; align-items:center; gap:12px; justify-content:space-between; cursor:pointer; min-height:44px; list-style:none; }
.nhl details.moved summary::-webkit-details-marker{ display:none; }
.nhl details.moved p{ margin:4px 0 8px 36px; }

/* ==========================================================================
   PAGE STYLES (Caleb, 2026-09-21). Everything above is the shared foundation
   and is never shown on its own. C. BROADCAST is the default body class;
   D. ARCADE MODE and E. RETRO HOCKEY CARD MODE are chosen from the style menu
   (a cookie; see nhl_views.STYLES). Each re-points tokens plus a few component
   details, so layout, data and accessibility are identical across all three.
   ========================================================================== */

/* the style menu */
.nhl .stylepick{ position:relative; margin-left:8px; }
.nhl .stylepick summary{ list-style:none; display:inline-flex; align-items:center; gap:7px; cursor:pointer; min-height:36px;
  padding:0 12px; font-size:13px; font-weight:700; color:var(--t-1); border:1px solid var(--edge-strong); border-radius:var(--r-sm); }
.nhl .stylepick summary::-webkit-details-marker{ display:none; }
.nhl .stylepick summary svg{ width:16px; height:16px; }
.nhl .stylepick ul{ position:absolute; right:0; top:calc(100% + 8px); z-index:20; margin:0; padding:6px; list-style:none; min-width:250px;
  background:var(--bg-1); border:1px solid var(--edge-strong); border-radius:var(--r-md); box-shadow:0 18px 40px -12px rgba(0,0,0,.6); }
.nhl .stylepick a{ display:flex; align-items:center; gap:10px; padding:10px; min-height:44px; border-radius:var(--r-sm);
  color:var(--t-1); text-decoration:none; font-size:14px; font-weight:600; font-family:var(--f-text); text-shadow:none; }
.nhl .stylepick a:hover{ background:var(--s-2); }
.nhl .stylepick a[aria-current="true"]{ background:var(--s-3); }
.nhl .stylepick a[aria-current="true"]::after{ content:""; margin-left:auto; width:6px; height:11px; border:solid var(--ice); border-width:0 2.5px 2.5px 0; rotate:45deg; translate:0 -2px; }
.nhl .stylepick small{ color:var(--t-3); font-weight:500; }
.nhl .sw{ flex:none; width:28px; height:18px; border-radius:4px; border:1px solid rgba(128,128,128,.5); }
.nhl .sw-broadcast{ background:linear-gradient(90deg,#05070A 0 50%,#4DB8FF 50% 75%,#FFC83D 75%); }
.nhl .sw-arcade{ background:linear-gradient(90deg,#141F48 0 50%,#F0CE63 50% 75%,#B83A48 75%); }
.nhl .sw-card{ background:linear-gradient(90deg,#F5ECD7 0 50%,#B3121F 50% 75%,#1D3F94 75%); }

/* ---- C. BROADCAST: TV scorebug, cold steel ------------------------------- */
body.nhl.theme-broadcast{
  --bg-0:#05070A; --bg-1:#0A0E13; --bg-2:#111820;
  --s-1:#0E141B; --s-2:#141C25; --s-3:#1D2833;
  --edge:#233040; --edge-strong:#3A4B5E;
  --t-1:#F2F6FA; --t-2:#B7C3CF; --t-3:#8C9BAA;
  --ice:#4DB8FF; --ice-2:#9ED8FF; --glacier:#1F7FD1;
  --gold:#FFC83D; --gold-ink:#1A1300;
  --win:#3FE0A0; --loss:#FF7C86; --otl:#B9A6FF;
  --f-display:"Chakra Petch","Arial Narrow",system-ui,sans-serif;
  --f-text:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-lg:4px; --r-md:3px; --r-sm:2px;
  --shadow:0 0 0 1px rgba(255,255,255,.02) inset;
  background:
    linear-gradient(180deg, rgba(77,184,255,.08), transparent 280px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 80px),
    var(--bg-0);
}
body.nhl.theme-broadcast::before{ display:none; }
.nhl.theme-broadcast .panel,.nhl.theme-broadcast .tile{ backdrop-filter:none; }
.nhl.theme-broadcast h1,.nhl.theme-broadcast h2{ text-transform:uppercase; letter-spacing:.03em; }
.nhl.theme-broadcast .tile{ clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); border-top:3px solid var(--edge-strong); }
.nhl.theme-broadcast .tile.has-bet{ border-top-color:var(--ice); background:var(--s-1); }
.nhl.theme-broadcast .tile.free{ border-top-color:var(--gold); }
.nhl.theme-broadcast .chip{ border-radius:3px; background:var(--tc); box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--tc2) 80%, transparent); }
.nhl.theme-broadcast .brow{ background:var(--s-2); padding:6px 10px; margin:3px 0; border:0; }
.nhl.theme-broadcast .brow + .brow{ border-top:0; }
.nhl.theme-broadcast .brow.lead{ background:linear-gradient(90deg, rgba(77,184,255,.18), var(--s-2) 60%); }
.nhl.theme-broadcast .brow .g{ font-size:30px; }
.nhl.theme-broadcast .wp .bar{ border-radius:0; height:6px; }
.nhl.theme-broadcast .wp .bar i{ border-radius:0; background:var(--ice); }
.nhl.theme-broadcast .sportsw,.nhl.theme-broadcast .sportsw a,.nhl.theme-broadcast a.authlink,.nhl.theme-broadcast .btn,
.nhl.theme-broadcast .badge,.nhl.theme-broadcast .count,.nhl.theme-broadcast .search input,.nhl.theme-broadcast .window,
.nhl.theme-broadcast .window button,.nhl.theme-broadcast .stake,.nhl.theme-broadcast .st{ border-radius:3px; }
.nhl.theme-broadcast .tabs a[aria-current="page"]::after{ height:3px; box-shadow:none; left:0; right:0; }
.nhl.theme-broadcast .statstrip > div{ background:var(--s-1); border-left:3px solid var(--ice); }
.nhl.theme-broadcast .matchup{ border-radius:4px; border-top:4px solid var(--ice); }
.nhl.theme-broadcast .teamhero{ border-radius:4px; border-left:6px solid var(--tc); }
.nhl.theme-broadcast .teamhero::after{ display:none; }

/* ---- D. '94 GENESIS: the stat screens of a 1993 console hockey game -------
   Reference: the Sega Genesis NHL '94 menus (nhl94.com screenshots). Royal-blue
   dithered ground; raised gray bevelled title plaques with white blocky type
   and a hard black shadow; a red team banner; a green selector bar with yellow
   type and arrows; yellow column headers over white rows; pale cyan rink ice
   with diagonal glare and red / blue lines. Inspired by, never branded as. -- */
body.nhl.theme-arcade{
  --bg-0:#0C0C9C; --bg-1:#1414B8; --bg-2:#0A0A86;
  --s-1:#0E0EA8; --s-2:#1818C4; --s-3:#2A2AD8;
  --edge:#000054; --edge-strong:#000000;
  --t-1:#FFFFFF; --t-2:#E2E2FF; --t-3:#B9B9FF;
  --ice:#FCFC54; --ice-2:#FFFFA8; --glacier:#88E0F8;
  --gold:#FCFC54; --gold-ink:#000000;
  --win:#54FC54; --loss:#FF7070; --otl:#FCA854;
  --g-red:#C80000; --g-green:#00A800; --g-steel:#A8A8A8;
  --bev:inset 3px 3px 0 #FFFFFF55, inset -3px -3px 0 #00000070;
  --f-display:"Press Start 2P",monospace;
  --f-text:"Space Mono",ui-monospace,monospace;
  --r-lg:0; --r-md:0; --r-sm:0;
  --shadow:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    conic-gradient(from 90deg at 2px 2px, #1414B8 25%, #1010AC 0 50%, #1414B8 0 75%, #1010AC 0) 0 0/4px 4px;
  background-color:#1212B0;
}
body.nhl.theme-arcade::before{ display:none; }
.nhl.theme-arcade .rinklines{ height:22px; inset:0 -20px auto; opacity:1;
  background:
    linear-gradient(90deg, transparent 0 22%, #2A48E8 22% 23.2%, transparent 23.2% 49.4%, #D02040 49.4% 50.6%,
      transparent 50.6% 76.8%, #2A48E8 76.8% 78%, transparent 78%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.55) 0 2px, transparent 2px 26px),
    #88E0F8;
  border-bottom:4px solid #7A7A7A; box-shadow:0 4px 0 #3A3A3A; }
.nhl.theme-arcade .topbar{ padding-top:34px; }
.nhl.theme-arcade .panel,.nhl.theme-arcade .tile{ backdrop-filter:none; }

/* type: the Genesis font is blocky, bold and always drop-shadowed */
.nhl.theme-arcade h1,.nhl.theme-arcade h2,.nhl.theme-arcade .brow .g,.nhl.theme-arcade .center .proj,
.nhl.theme-arcade .bet .pick,.nhl.theme-arcade .statstrip .v,.nhl.theme-arcade .num-lg,.nhl.theme-arcade .fact .v{
  font-family:"Press Start 2P",monospace; font-weight:400; text-shadow:3px 3px 0 #000; }
.nhl.theme-arcade h1{ display:inline-block; font-size:clamp(16px,2.6vw,26px); line-height:1.5; color:#fff; letter-spacing:.02em;
  padding:14px 20px 12px; background:linear-gradient(180deg,#8C8C8C,#6A6A6A); border:3px solid #000;
  box-shadow:inset 3px 3px 0 #D8D8D8, inset -3px -3px 0 #3C3C3C; }
.nhl.theme-arcade h2{ font-size:14px; line-height:1.5; color:var(--gold); }
.nhl.theme-arcade .eyebrow{ display:inline-block; font-family:"Press Start 2P",monospace; font-size:10px; letter-spacing:.04em;
  color:#fff; background:var(--g-red); border:2px solid #000; padding:5px 12px 4px; margin-bottom:12px;
  border-radius:10px; text-shadow:2px 2px 0 #000; }
.nhl.theme-arcade .lede,.nhl.theme-arcade .meta,.nhl.theme-arcade .sub{ color:var(--t-2); }
.nhl.theme-arcade .brand .word{ font-family:"Press Start 2P",monospace; font-size:15px; text-shadow:3px 3px 0 #000; }
.nhl.theme-arcade .brand .bet-pill{ background:var(--g-red); color:#fff; border:2px solid #000; padding:2px 6px; }

/* the stat-screen frame: steel bevel around a blue field */
.nhl.theme-arcade .tile,.nhl.theme-arcade .panel,.nhl.theme-arcade .matchup,.nhl.theme-arcade .teamhero,
.nhl.theme-arcade .statstrip{ border:4px solid #000; background:var(--s-1);
  box-shadow:0 0 0 3px #9C9C9C, 0 0 0 6px #000, 8px 8px 0 6px rgba(0,0,40,.55); }
.nhl.theme-arcade .tile.has-bet{ background:var(--s-1); }
.nhl.theme-arcade .tile.free{ box-shadow:0 0 0 3px var(--gold), 0 0 0 6px #000, 8px 8px 0 6px rgba(0,0,40,.55); }
.nhl.theme-arcade .tile-top .when{ color:var(--gold); }
.nhl.theme-arcade .board .caption,.nhl.theme-arcade .bet .mk,.nhl.theme-arcade table.data thead th,
.nhl.theme-arcade .tape thead th,.nhl.theme-arcade .h3,.nhl.theme-arcade h3{
  font-family:"Press Start 2P",monospace; font-size:9px; letter-spacing:.02em; color:var(--gold); text-shadow:2px 2px 0 #000; }
.nhl.theme-arcade .brow + .brow{ border-top:2px dashed #3C3CE8; }
.nhl.theme-arcade .brow .nm a,.nhl.theme-arcade .brow .nm .name{ color:#fff; text-shadow:2px 2px 0 #000; }
.nhl.theme-arcade .brow .g{ font-size:22px; color:#fff; }
.nhl.theme-arcade .brow.lead .g{ color:var(--gold); }
.nhl.theme-arcade .chip{ border-radius:0; font-family:"Press Start 2P",monospace; font-size:calc(var(--size) * .24);
  background:var(--tc); border:2px solid #000; box-shadow:inset 2px 2px 0 rgba(255,255,255,.4), inset -2px -2px 0 rgba(0,0,0,.4); }

/* win chance as a strip of rink: pale ice with glare, a red centre-line tick for the market */
.nhl.theme-arcade .wp .bar{ height:16px; border-radius:0; border:2px solid #000; background:#0A0A70; }
.nhl.theme-arcade .wp .bar i{ border-radius:0;
  background:repeating-linear-gradient(120deg, rgba(255,255,255,.55) 0 2px, transparent 2px 14px), var(--glacier); }
.nhl.theme-arcade .wp .bar .mkt{ background:#D02040; width:4px; box-shadow:none; top:-5px; bottom:-5px; }
.nhl.theme-arcade .wp .legend span::before{ background:var(--glacier); }
.nhl.theme-arcade .wp .legend span.m::before{ background:#D02040; }

/* bets: red banner stakes, green selector bars */
.nhl.theme-arcade .bet{ border:3px solid #000; background:var(--s-2); box-shadow:inset 2px 2px 0 #4A4AF0, inset -2px -2px 0 #06066A; }
.nhl.theme-arcade .bet.free{ background:var(--s-2); outline:3px solid var(--gold); outline-offset:-6px; }
.nhl.theme-arcade .bet .pick{ font-size:20px; line-height:1.4; color:var(--gold); }
.nhl.theme-arcade .stake{ font-family:"Press Start 2P",monospace; font-size:13px; padding:7px 10px 6px; border:2px solid #000;
  background:var(--g-red); color:#fff; text-shadow:2px 2px 0 #000; }
.nhl.theme-arcade .stake.big{ background:var(--gold); color:#000; text-shadow:none; }
.nhl.theme-arcade .price{ border:2px solid #000; background:#0A0A86; color:var(--t-2); }
.nhl.theme-arcade .price b{ color:var(--gold); }
.nhl.theme-arcade .badge{ font-family:"Press Start 2P",monospace; font-size:8px; letter-spacing:.02em; padding:6px 8px 5px;
  border:2px solid #000; background:var(--g-green); color:var(--gold); text-shadow:1px 1px 0 #000; }
.nhl.theme-arcade .badge.ice{ background:var(--g-red); color:#fff; }
.nhl.theme-arcade .why b{ color:var(--gold); }

/* controls: the green selector bar with arrows */
.nhl.theme-arcade .sportsw,.nhl.theme-arcade .window{ border-radius:0; border:3px solid #000; background:#0A0A86; padding:3px; }
.nhl.theme-arcade .sportsw a,.nhl.theme-arcade .window button{ border-radius:0; font-family:"Press Start 2P",monospace; font-size:9px; color:#fff; }
.nhl.theme-arcade .sportsw a.on,.nhl.theme-arcade .window button[aria-pressed="true"]{ background:var(--g-green); color:var(--gold);
  text-shadow:1px 1px 0 #000; box-shadow:inset 2px 2px 0 #54FC54, inset -2px -2px 0 #005400; }
.nhl.theme-arcade a.authlink{ border-radius:0; font-family:"Press Start 2P",monospace; font-size:9px; border:3px solid #000;
  background:linear-gradient(180deg,#8C8C8C,#6A6A6A); color:#fff; text-shadow:2px 2px 0 #000;
  box-shadow:inset 2px 2px 0 #D8D8D8, inset -2px -2px 0 #3C3C3C; }
.nhl.theme-arcade .tabs{ border-bottom:4px solid #000; }
.nhl.theme-arcade .tabs a{ font-family:"Press Start 2P",monospace; font-size:9px; color:#fff; text-shadow:2px 2px 0 #000; }
.nhl.theme-arcade .tabs a[aria-current="page"]{ color:var(--gold); }
.nhl.theme-arcade .tabs a[aria-current="page"]::after{ height:4px; bottom:-4px; border-radius:0; background:var(--gold); box-shadow:none; }
.nhl.theme-arcade .search input{ border-radius:0; border:3px solid #000; background:#0A0A86; color:#fff; }
.nhl.theme-arcade .count{ border-radius:0; border:2px solid #000; background:var(--g-red); color:#fff; font-family:"Press Start 2P",monospace; font-size:9px; }
.nhl.theme-arcade .notice{ border-radius:0; border:3px solid #000; background:#0A0A86; box-shadow:inset 2px 2px 0 #4A4AF0; }
.nhl.theme-arcade .notice .ic{ border-radius:0; background:var(--gold); color:#000; }

/* the stat-screen table: yellow headers, white rows */
.nhl.theme-arcade table.data td,.nhl.theme-arcade .tape td{ color:#fff; border-bottom-color:#3434D8; }
.nhl.theme-arcade table.data tbody tr:hover{ background:#2020C8; }
.nhl.theme-arcade .tape .val{ color:#E2E2FF; } .nhl.theme-arcade .tape .better .val{ color:var(--gold); }
.nhl.theme-arcade .tape .meter{ border-radius:0; background:#0A0A70; height:6px; }
.nhl.theme-arcade .tape .meter i{ border-radius:0; } .nhl.theme-arcade .tape .better .meter i{ background:var(--glacier); }
.nhl.theme-arcade .tape th[scope="row"]{ color:var(--t-2); }
.nhl.theme-arcade .res,.nhl.theme-arcade .st,.nhl.theme-arcade .goalie{ border-radius:0; border:2px solid #000; }
.nhl.theme-arcade .res{ font-family:"Press Start 2P",monospace; font-size:8px; }
.nhl.theme-arcade .res.W{ background:var(--g-green); color:var(--gold); }
.nhl.theme-arcade .res.L{ background:var(--g-red); color:#fff; }
.nhl.theme-arcade .res.OT{ background:#A85400; color:#fff; }
.nhl.theme-arcade .goalie{ background:var(--s-2); }

/* game page: the matchup is the jumbotron over the ice */
.nhl.theme-arcade .matchup{ background:
    linear-gradient(180deg, #0A0A70 0 64%, transparent 64%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.5) 0 2px, transparent 2px 22px), var(--glacier); }
.nhl.theme-arcade .side .team{ font-family:"Press Start 2P",monospace; font-size:clamp(11px,1.4vw,16px); line-height:1.6; text-shadow:2px 2px 0 #000; }
.nhl.theme-arcade .side .city,.nhl.theme-arcade .side .rec{ color:var(--t-2); }
.nhl.theme-arcade .center .proj{ font-size:clamp(30px,5vw,54px); color:var(--gold); line-height:1.2; }
.nhl.theme-arcade .center .proj .lo{ color:#fff; }
.nhl.theme-arcade .center .lbl,.nhl.theme-arcade .center .when{ color:#fff; }
.nhl.theme-arcade .matchup .wp .lbls,.nhl.theme-arcade .matchup .wp .legend{ color:#000054; font-weight:700; }
.nhl.theme-arcade .matchup .wp .lbls b{ color:#000; }
.nhl.theme-arcade .teamhero{ background:linear-gradient(120deg, color-mix(in srgb, var(--tc) 45%, #0E0EA8) 0%, #0E0EA8 60%); }
.nhl.theme-arcade .teamhero::after{ display:none; }
.nhl.theme-arcade .statstrip{ background:#000; gap:4px; }
.nhl.theme-arcade .statstrip > div{ background:var(--s-1); }
.nhl.theme-arcade .statstrip .v{ font-size:22px; line-height:1.3; }
.nhl.theme-arcade .rg-bar{ background:#000054; }
.nhl.theme-arcade .btn{ border-radius:0; border:3px solid #000; font-family:"Press Start 2P",monospace; font-size:10px;
  background:var(--g-green); color:var(--gold); text-shadow:1px 1px 0 #000; }

/* ---- E. HOCKEY CARD: a 1970s trading card, cream stock and jersey stripes -- */
body.nhl.theme-card{
  --bg-0:#EFE3C8; --bg-1:#F5ECD7; --bg-2:#E6D6B4;
  --s-1:#FFF9EC; --s-2:#FBF1DC; --s-3:#EADBBB;
  --edge:#1E1A16; --edge-strong:#1E1A16;
  --t-1:#1E1A16; --t-2:#443A31; --t-3:#5F5244;
  --ice:#B3121F; --ice-2:#8A0C17; --glacier:#1D3F94;
  --gold:#E0A526; --gold-ink:#1E1A16;
  --win:#1E7A3E; --loss:#B3121F; --otl:#1D3F94;
  --f-display:"Alfa Slab One",Georgia,serif;
  --f-text:"Work Sans",system-ui,sans-serif;
  --r-lg:14px; --r-md:10px; --r-sm:6px;
  --shadow:5px 5px 0 #1E1A16;
  background:
    radial-gradient(circle at 1px 1px, rgba(30,26,22,.10) 1px, transparent 1.4px) 0 0/7px 7px,
    linear-gradient(180deg, #F5ECD7, #EFE3C8);
  background-attachment:fixed;
}
body.nhl.theme-card::before{ height:14px; opacity:1;
  background:linear-gradient(180deg, #B3121F 0 4px, #F5ECD7 4px 6px, #1D3F94 6px 10px, #F5ECD7 10px 12px, #B3121F 12px 14px); }
.nhl.theme-card .rinklines{ display:none; }
.nhl.theme-card .panel,.nhl.theme-card .tile{ backdrop-filter:none; border:3px solid var(--edge); }
.nhl.theme-card h1{ color:var(--t-1); text-shadow:3px 3px 0 var(--gold); letter-spacing:.01em; font-weight:400; }
.nhl.theme-card h2{ font-weight:400; }
.nhl.theme-card .eyebrow{ color:var(--ice); }
.nhl.theme-card .brand .word{ font-weight:400; }
.nhl.theme-card .brand .bet-pill{ background:var(--ice); color:#fff; }
.nhl.theme-card .tile{ padding-top:10px; background:var(--s-1); }
.nhl.theme-card .tile::before{ content:""; position:absolute; top:0; left:0; right:0; height:10px;
  background:linear-gradient(180deg, var(--ice) 0 4px, var(--s-1) 4px 6px, var(--glacier) 6px 10px); }
.nhl.theme-card .tile.free::before{ background:linear-gradient(180deg, var(--gold) 0 4px, var(--s-1) 4px 6px, var(--gold) 6px 10px); }
.nhl.theme-card .tile.has-bet{ background:var(--s-1); }
.nhl.theme-card .tile.free{ border-color:var(--edge); box-shadow:5px 5px 0 var(--gold); }
.nhl.theme-card .brow .g,.nhl.theme-card .center .proj,.nhl.theme-card .statstrip .v,.nhl.theme-card .num-lg,
.nhl.theme-card .fact .v,.nhl.theme-card .bet .pick,.nhl.theme-card .stake{ font-weight:400; }
.nhl.theme-card .brow + .brow{ border-top:2px dotted var(--t-3); }
.nhl.theme-card .brow.lead .g{ color:var(--ice); }
.nhl.theme-card .chip{ border-radius:50%; background:var(--tc); font-family:"Alfa Slab One",serif; font-weight:400;
  box-shadow:0 0 0 2px var(--s-1), 0 0 0 4px var(--tc2), 0 0 0 5px #1E1A16; }
.nhl.theme-card .chip.lg{ border-radius:50%; }
.nhl.theme-card .wp .bar{ height:12px; border:2px solid var(--edge); background:var(--s-1); }
.nhl.theme-card .wp .bar i{ background:repeating-linear-gradient(135deg, var(--glacier) 0 6px, #2E56B8 6px 12px); border-radius:999px 0 0 999px; }
.nhl.theme-card .wp .bar .mkt{ background:var(--ice); box-shadow:none; width:4px; }
.nhl.theme-card .stake{ background:var(--glacier); color:#fff; }
.nhl.theme-card .stake.big{ background:var(--gold); color:var(--gold-ink); }
.nhl.theme-card .badge{ border:2px solid var(--edge); color:var(--t-1); background:var(--s-1); }
.nhl.theme-card .badge.gold{ background:var(--gold); }
.nhl.theme-card .badge.ice{ background:var(--glacier); color:#fff; }
.nhl.theme-card .bet{ border:2px solid var(--edge); background:var(--s-2); }
.nhl.theme-card .bet.free{ background:#FCEFC8; }
.nhl.theme-card .price{ border:1.5px solid var(--t-3); background:var(--s-1); }
.nhl.theme-card .sportsw{ border:2px solid var(--edge); background:var(--s-1); }
.nhl.theme-card .sportsw a.on,.nhl.theme-card .window button[aria-pressed="true"]{ background:var(--ice); color:#fff; }
.nhl.theme-card a.authlink{ border:2px solid var(--edge); }
.nhl.theme-card a.authlink.out{ background:var(--s-1); }
.nhl.theme-card .tabs{ border-bottom:3px solid var(--edge); }
.nhl.theme-card .tabs a[aria-current="page"]::after{ height:5px; bottom:-4px; border-radius:0; background:var(--ice); box-shadow:none; }
.nhl.theme-card .statstrip{ background:var(--edge); border:3px solid var(--edge); box-shadow:var(--shadow); }
.nhl.theme-card .statstrip > div{ background:var(--s-1); }
.nhl.theme-card .notice{ border:2px solid var(--edge); background:#FCEFC8; }
.nhl.theme-card .notice .ic{ background:var(--glacier); color:#fff; }
.nhl.theme-card .search input{ border:2px solid var(--edge); background:var(--s-1); }
.nhl.theme-card .count{ border:2px solid var(--edge); background:var(--gold); color:var(--t-1); }
.nhl.theme-card .matchup{ border:3px solid var(--edge); background:
    linear-gradient(90deg, color-mix(in srgb, var(--away) 30%, var(--s-1)) 0 38%, var(--s-1) 38% 62%, color-mix(in srgb, var(--home) 30%, var(--s-1)) 62%); }
.nhl.theme-card .teamhero{ border:3px solid var(--edge); background:linear-gradient(120deg, color-mix(in srgb, var(--tc) 30%, var(--s-1)) 0%, var(--s-1) 65%); }
.nhl.theme-card .res{ border-width:2px; }
.nhl.theme-card .res.W{ background:#DDEFD9; border-color:var(--win); }
.nhl.theme-card .res.L{ background:#F6D7D3; border-color:var(--loss); }
.nhl.theme-card .res.OT{ background:#D9E0F3; border-color:var(--otl); }
.nhl.theme-card .goalie{ border:2px solid var(--edge); }
.nhl.theme-card .st.confirmed{ color:#fff; }
.nhl.theme-card .rg-bar{ background:var(--bg-2); }
.nhl.theme-card .chip{ font-size:calc(var(--size) * .28); letter-spacing:0; }

.nhl.theme-arcade .badge.gold::before,.nhl.theme-arcade .window button[aria-pressed="true"]::before{ content:""; display:inline-block;
  border:4px solid transparent; border-right:6px solid currentColor; border-left:0; margin-right:7px; vertical-align:middle; }
.nhl.theme-arcade .badge.gold::after,.nhl.theme-arcade .window button[aria-pressed="true"]::after{ content:""; display:inline-block;
  border:4px solid transparent; border-left:6px solid currentColor; border-right:0; margin-left:7px; vertical-align:middle; }
.nhl.theme-arcade .matchup,.nhl.theme-arcade .teamhero{ border-radius:0; }

/* ---- D, TUNED FOR ALL-DAY READING (Caleb 2026-09-21: "the '94 blue and
   yellow is horrible on the eyes ... blend the style with what makes sense in
   2026"). The '94 SIGNATURES stay -- bevelled steel plaque, red team banner,
   green selector with arrows, rink-ice strip and bars, pixel type on titles,
   scores and labels -- but the GROUND moves to a deep muted navy, the yellow
   softens to gold, the dither and scanlines go, and running text is Inter. -- */
body.nhl.theme-arcade{
  --bg-0:#0B1330; --bg-1:#101a3d; --bg-2:#0A1128;
  --s-1:#141F48; --s-2:#1A2757; --s-3:#24336B;
  --edge:#060B1E; --edge-strong:#000000;
  --t-1:#EEF1FA; --t-2:#C3CAE6; --t-3:#9AA5CD;
  --ice:#F0CE63; --ice-2:#F7E2A0; --glacier:#9AD9EE;
  --gold:#F0CE63; --gold-ink:#141005;
  --win:#6FD49A; --loss:#F08A8A; --otl:#E6B06A;
  --g-red:#B83A48; --g-green:#2F7D55; --g-steel:#6B7390;
  --f-text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(1100px 480px at 50% -160px, rgba(154,217,238,.10), transparent 70%),
    linear-gradient(180deg, #101a3d 0%, #0B1330 55%);
  background-color:#0B1330; background-attachment:fixed;
}
.nhl.theme-arcade .rinklines{ height:14px; border-bottom:3px solid #4B536C; box-shadow:0 3px 0 #1B2033; opacity:.9;
  background:
    linear-gradient(90deg, transparent 0 22%, #3B5BD8 22% 23.2%, transparent 23.2% 49.4%, #C23A4E 49.4% 50.6%,
      transparent 50.6% 76.8%, #3B5BD8 76.8% 78%, transparent 78%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.4) 0 2px, transparent 2px 26px), #9AD9EE; }
.nhl.theme-arcade .topbar{ padding-top:28px; }

/* softer shadows on the pixel type */
.nhl.theme-arcade h1,.nhl.theme-arcade h2,.nhl.theme-arcade .brow .g,.nhl.theme-arcade .center .proj,
.nhl.theme-arcade .bet .pick,.nhl.theme-arcade .statstrip .v,.nhl.theme-arcade .num-lg,.nhl.theme-arcade .fact .v,
.nhl.theme-arcade .brand .word,.nhl.theme-arcade .brow .nm a,.nhl.theme-arcade .side .team{ text-shadow:2px 2px 0 rgba(0,0,0,.55); }
.nhl.theme-arcade h1{ color:#F4F6FC; background:linear-gradient(180deg,#5E6784,#4A5270); border:2px solid #05091A;
  box-shadow:inset 2px 2px 0 #9097B0, inset -2px -2px 0 #2C3249; }
.nhl.theme-arcade h2{ color:var(--gold); font-size:13px; }
.nhl.theme-arcade .eyebrow{ border:2px solid #05091A; text-shadow:1px 1px 0 rgba(0,0,0,.5); }
.nhl.theme-arcade .board .caption,.nhl.theme-arcade .bet .mk,.nhl.theme-arcade table.data thead th,
.nhl.theme-arcade .tape thead th,.nhl.theme-arcade h3{ color:var(--gold); text-shadow:none; opacity:.9; }

/* frames: a slimmer steel bevel, no hard drop shadow */
.nhl.theme-arcade .tile,.nhl.theme-arcade .panel,.nhl.theme-arcade .matchup,.nhl.theme-arcade .teamhero,
.nhl.theme-arcade .statstrip{ border:2px solid #05091A; background:var(--s-1);
  box-shadow:0 0 0 2px #535C78, 0 0 0 4px #05091A, 0 14px 28px -14px rgba(0,0,0,.6); }
.nhl.theme-arcade .tile.free{ box-shadow:0 0 0 2px var(--gold), 0 0 0 4px #05091A, 0 14px 28px -14px rgba(0,0,0,.6); }
.nhl.theme-arcade .tile-top .when{ color:var(--t-2); }
.nhl.theme-arcade .brow + .brow{ border-top:1px dashed #33427E; }
.nhl.theme-arcade .brow .nm a,.nhl.theme-arcade .brow .nm .name{ color:var(--t-1); font-family:var(--f-text); }
.nhl.theme-arcade .brow .g{ color:var(--t-2); }
.nhl.theme-arcade .brow.lead .g{ color:var(--gold); }

/* bets */
.nhl.theme-arcade .bet{ border:2px solid #05091A; background:var(--s-2); box-shadow:inset 1px 1px 0 #2E3D78, inset -1px -1px 0 #0D1535; }
.nhl.theme-arcade .bet.free{ outline:2px solid var(--gold); outline-offset:-5px; }
.nhl.theme-arcade .bet .pick{ font-size:18px; }
.nhl.theme-arcade .stake{ border:2px solid #05091A; text-shadow:1px 1px 0 rgba(0,0,0,.5); }
.nhl.theme-arcade .price{ border:1px solid #33427E; background:var(--bg-2); }
.nhl.theme-arcade .badge{ border:2px solid #05091A; text-shadow:none; }
.nhl.theme-arcade .wp .bar{ height:12px; border:2px solid #05091A; background:#0A1128; }
.nhl.theme-arcade .wp .bar i{ background:repeating-linear-gradient(120deg, rgba(255,255,255,.35) 0 2px, transparent 2px 14px), var(--glacier); }
.nhl.theme-arcade .wp .bar .mkt{ background:#E0566A; }

/* controls */
.nhl.theme-arcade .sportsw,.nhl.theme-arcade .window,.nhl.theme-arcade .search input,.nhl.theme-arcade .notice{
  border:2px solid #05091A; background:var(--bg-2); box-shadow:none; }
.nhl.theme-arcade .sportsw a.on,.nhl.theme-arcade .window button[aria-pressed="true"]{ box-shadow:inset 1px 1px 0 #4FA374, inset -1px -1px 0 #1C4F35; }
.nhl.theme-arcade a.authlink{ border:2px solid #05091A; background:linear-gradient(180deg,#5E6784,#4A5270);
  box-shadow:inset 1px 1px 0 #9097B0, inset -1px -1px 0 #2C3249; text-shadow:1px 1px 0 rgba(0,0,0,.5); }
.nhl.theme-arcade .tabs{ border-bottom:2px solid #2A3668; }
.nhl.theme-arcade .tabs a{ color:var(--t-2); text-shadow:none; }
.nhl.theme-arcade .tabs a[aria-current="page"]{ color:var(--gold); }

/* tables: calm rows, gold only where something is better */
.nhl.theme-arcade table.data td,.nhl.theme-arcade .tape td{ color:var(--t-1); border-bottom-color:#243263; }
.nhl.theme-arcade table.data tbody tr:hover{ background:#1A2757; }
.nhl.theme-arcade .tape .meter{ background:#0A1128; }
.nhl.theme-arcade .res.W{ background:#245F43; color:#DFF5E8; }
.nhl.theme-arcade .res.L{ background:#8A2F3B; color:#FBE3E6; }
.nhl.theme-arcade .res.OT{ background:#7A5A26; color:#FBEBD2; }

/* game page: jumbotron over softer ice */
.nhl.theme-arcade .matchup{ background:
    linear-gradient(180deg, #111B42 0 64%, transparent 64%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.35) 0 2px, transparent 2px 22px), #8FCFE4; }
.nhl.theme-arcade .matchup .wp .lbls,.nhl.theme-arcade .matchup .wp .legend{ color:#0B1330; }
.nhl.theme-arcade .teamhero{ background:linear-gradient(120deg, color-mix(in srgb, var(--tc) 35%, #141F48) 0%, #141F48 60%); }
.nhl.theme-arcade .statstrip{ background:#05091A; }
.nhl.theme-arcade .rg-bar{ background:#070C20; }

/* power rank beside a team: a star and the number, like CFB's ranked teams */
.nhl .prank{ white-space:nowrap; font-weight:700; }
.nhl .prank span[aria-hidden]{ color:var(--gold); margin-right:2px; }

/* How it works: model cards and the responsible-gambling section */
.nhl .models{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.nhl .models article{ background:var(--s-2); border:1px solid var(--edge); border-radius:var(--r-md); padding:16px; }
.nhl .models h3{ margin:0 0 8px; color:var(--t-1); font-size:14px; }
.nhl .models p{ margin:0 0 8px; color:var(--t-2); font-size:14px; line-height:1.55; }
.nhl .models p:last-child{ margin-bottom:0; }
.nhl .models .uses b{ color:var(--t-1); }
.nhl .rg p{ color:var(--t-2); margin:0 0 10px; line-height:1.6; }
.nhl .rg h3{ margin:16px 0 8px; }
.nhl .rg ul{ margin:0 0 12px; padding-left:20px; color:var(--t-2); line-height:1.7; }
.nhl .rg li b{ color:var(--t-1); }
@media (max-width:760px){ .nhl .models{ grid-template-columns:1fr; } }

/* Share: deliberately quiet (Caleb: "very low key button that doesn't look ugly") */
.nhl .sharebtn{ display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:12.5px; font-weight:600;
  color:var(--t-3); background:none; border:0; padding:4px 6px; min-height:32px; cursor:pointer; border-radius:var(--r-sm); }
.nhl .sharebtn svg{ width:16px; height:16px; }
.nhl .sharebtn:hover{ color:var(--t-1); background:var(--s-2); }
.nhl .sharebtn.icon{ padding:4px; min-width:32px; justify-content:center; }
.nhl .sharebtn[disabled]{ opacity:.55; cursor:progress; }
.nhl .center .sharebtn{ margin-top:6px; }
@media (max-width:760px){ .nhl .sharebtn{ min-height:40px; } .nhl .sharebtn.icon{ min-width:40px; } }

/* How it works, as a note from Caleb: one reading column, no boxes */
.nhl .note{ max-width:720px; margin:34px auto 26px; }
.nhl .note-head{ margin-bottom:22px; }
.nhl .note p,.nhl .note li{ font-size:17px; line-height:1.7; color:var(--t-2); margin:0 0 16px; }
.nhl .note b{ color:var(--t-1); }
.nhl .note .big{ font-size:21px; line-height:1.55; color:var(--t-1); }
.nhl .note h2{ font-size:26px; margin:38px 0 12px; }
.nhl .note ul.plain{ list-style:none; padding:0; margin:0 0 16px; }
.nhl .note ul.plain li{ padding-left:18px; border-left:3px solid var(--edge-strong); margin-bottom:14px; }
.nhl .note .note-table{ margin:6px 0 18px; font-size:14px; }
.nhl .note .note-table .gap{ padding-left:26px; }
.nhl .note .sign{ font-family:var(--f-display); font-size:26px; color:var(--t-1); margin-top:30px; }
.nhl .note + .rg{ max-width:720px; margin-left:auto; margin-right:auto; }
@media (max-width:760px){ .nhl .note p,.nhl .note li{ font-size:16px; } .nhl .note .big{ font-size:19px; } }
.nhl .note .note-table td.gap,.nhl .note .note-table th.gap{ text-align:left; }

/* ---- leaks from the CFB stylesheet (2026-09-27) ---------------------------
   style.css is loaded on every NHL page and styles two class names bare:
   .noresults (a cream CFB card) and .ghost (a CFB placeholder tile with a
   fixed 132px height). Both landed on the "No games match" row and turned
   its Clear search button into a giant square. Reset them here. */
.nhl .noresults{ background:none; border:0; border-radius:0; box-shadow:none; text-align:left; margin:0;
  font-size:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.nhl .noresults[hidden]{ display:none; }
/* The filter/search hide tiles with [hidden]; .tile sets display:flex, which beats the
   browser default for [hidden], so the hide has to be restated (2026-10-01). */
.nhl .tile[hidden]{ display:none; }
.nhl .btn.ghost{ height:auto; box-shadow:none; }
.nhl .empty-card{ color:var(--t-2); padding:8px 0 20px; }
/* The rink lines bleed 20px past the content on each side, but phones only
   pad 16px -- the page scrolled sideways by 4px in every style. */
@media (max-width:760px){
  .nhl .rinklines,.nhl.theme-arcade .rinklines{ left:-16px; right:-16px; }
}
/* Tables scroll inside .tablewrap, but its .sr-only header labels are
   position:absolute and escaped to the page, widening it by up to 250px on
   ratings and futures. Grid columns also refused to shrink below a table's
   width (1fr has an automatic minimum), pushing game/team panels off-screen. */
.nhl .tablewrap{ position:relative; }
.nhl .panel,.nhl .grid-2 > *{ min-width:0; }
/* Arcade game page on phones: the matchup stacks, so the home team fell onto
   the pale ice meant for the win-chance bar -- white type on ice. Keep the
   jumbotron dark top to bottom and put the ice under the bar itself. */
@media (max-width:760px){
  .nhl.theme-arcade .matchup{ background:#0A0A70; }
  .nhl.theme-arcade .matchup .wp{ padding:10px 12px; border-top:3px solid #000;
    background:repeating-linear-gradient(120deg, rgba(255,255,255,.5) 0 2px, transparent 2px 22px), var(--glacier); }
}

/* ---- stake colours: the CFB confidence ramp, per style (Caleb, 2026-09-28) --
   Same idea as CFB -- muted at 1u, building to gold at 3u -- but each style
   draws its five rungs from its own palette so nothing looks pasted in:
   Broadcast steel -> blue -> ice -> amber -> gold; Arcade the NHL '94 console
   colours; Hockey Card the card stock and jersey stripes. Scoped on the rung
   class and last in the file so it beats every theme's .stake / .stake.big. */
.nhl{ --sk10:#3A4B5E; --sk15:#1F7FD1; --sk20:#4DB8FF; --sk25:#FF9F3D; --sk30:#FFC83D;
      --ski10:#F2F6FA; --ski15:#FFFFFF; --ski20:#05070A; --ski25:#1A1000; --ski30:#1A1300; }
.nhl.theme-arcade{ --sk10:#7A7A7A; --sk15:#1818C4; --sk20:#00A800; --sk25:#FC7C00; --sk30:#FCFC54;
      --ski10:#FFFFFF; --ski15:#FFFFFF; --ski20:#FFFFFF; --ski25:#000000; --ski30:#000000; }
.nhl.theme-card{ --sk10:#8C7D6B; --sk15:#1D3F94; --sk20:#1E7A3E; --sk25:#B3121F; --sk30:#E0A526;
      --ski10:#FFF9EC; --ski15:#FFFFFF; --ski20:#FFFFFF; --ski25:#FFFFFF; --ski30:#1E1A16; }
.nhl .stake.r10,.nhl.theme-card .stake.r10,.nhl.theme-arcade .stake.r10{ background:var(--sk10); color:var(--ski10); }
.nhl .stake.r15,.nhl.theme-card .stake.r15,.nhl.theme-arcade .stake.r15{ background:var(--sk15); color:var(--ski15); }
.nhl .stake.r20,.nhl.theme-card .stake.r20,.nhl.theme-arcade .stake.r20{ background:var(--sk20); color:var(--ski20); }
.nhl .stake.r25,.nhl.theme-card .stake.r25,.nhl.theme-arcade .stake.r25{ background:var(--sk25); color:var(--ski25); }
.nhl .stake.r30,.nhl.theme-card .stake.r30,.nhl.theme-arcade .stake.r30{ background:var(--sk30); color:var(--ski30); }
.nhl.theme-arcade .stake.r10,.nhl.theme-arcade .stake.r15,.nhl.theme-arcade .stake.r20{ text-shadow:1px 1px 0 #000; }
.nhl.theme-arcade .stake.r25,.nhl.theme-arcade .stake.r30{ text-shadow:none; }
/* the edge chip on a bet (Caleb, 2026-09-29) */
.nhl .price small{ font-size:11px; opacity:.75; }
.nhl .price.edge{ border-color:var(--gold); }
.nhl .price.edge b{ color:var(--gold); }
.nhl.theme-card .price.edge b{ color:var(--ice); }

/* ---- season record ribbon (Caleb, 2026-09-30): one line, tap for detail ---- */
.nhl .ribbon{ margin:18px 0 22px; border:1px solid var(--edge-strong); border-radius:var(--r-md); background:var(--s-1); }
.nhl .ribbon > summary{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:12px 16px; cursor:pointer; list-style:none; min-height:48px; }
.nhl .ribbon > summary::-webkit-details-marker{ display:none; }
.nhl .ribbon .rk{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t-3); }
.nhl .ribbon .rv{ font-family:var(--f-display); font-size:20px; font-weight:700; color:var(--t-1); }
.nhl .ribbon .rv.pos{ color:var(--win); } .nhl .ribbon .rv.neg{ color:var(--loss); }
.nhl .ribbon .more{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--t-2); }
.nhl .ribbon .more .chev{ width:14px; height:14px; transition:transform .15s; }
.nhl .ribbon[open] .more .chev{ transform:rotate(180deg); }
.nhl .ribbon-body{ padding:0 16px 14px; border-top:1px solid var(--edge); }
.nhl .ribbon-body .meta{ margin:12px 0 10px; }
.nhl.theme-arcade .ribbon{ border:4px solid #000; background:var(--s-1); border-radius:0; }
.nhl.theme-arcade .ribbon .rv{ font-family:"Press Start 2P",monospace; font-size:14px; font-weight:400; text-shadow:2px 2px 0 #000; }
.nhl.theme-card .ribbon{ border:3px solid var(--edge); background:var(--s-1); box-shadow:var(--shadow); }
.nhl.theme-card .ribbon .rv{ font-weight:400; }
/* "Good to +111": the worst price the play still clears its bar at (Caleb, 2026-09-30) */
.nhl .goodto{ margin:6px 0 0; font-size:12px; color:var(--t-3); letter-spacing:.02em; }
.nhl.theme-arcade .goodto{ color:var(--t-2); }

/* Player props page (/nhl/props, members only) */
.nhl .propfilters{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:flex-end; }
.nhl .propfilters label{ display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t-3); }
.nhl .propfilters select,.nhl .propfilters input{ font:inherit; font-size:14px; text-transform:none; letter-spacing:0; color:var(--t-1); background:var(--s-2); border:1px solid var(--edge-strong); border-radius:8px; padding:7px 10px; min-width:150px; }
.nhl .propgame{ display:inline-block; margin-right:16px; white-space:nowrap; }
.nhl table.props th[data-k]{ user-select:none; }
.nhl table.props th[aria-sort="descending"]::after{ content:" \25BC"; }
.nhl table.props th[aria-sort="ascending"]::after{ content:" \25B2"; }
.nhl table.props td:first-child{ white-space:nowrap; }
.nhl .gtd{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.06em; padding:1px 5px; border-radius:5px; background:#E8A83A; color:#1a1206; vertical-align:middle; }
.nhl .subtabs{ display:flex; gap:8px; margin:0 0 16px; }
.nhl .subtabs a{ font-weight:700; font-size:14px; color:var(--t-2); text-decoration:none; padding:7px 14px; border:1px solid var(--edge); border-radius:999px; }
.nhl .subtabs a[aria-current="page"]{ color:var(--t-1); background:var(--s-2); border-color:var(--edge-strong); }
.nhl .linesbtn{ font:inherit; font-size:13px; font-weight:700; color:var(--t-1); background:var(--s-2); border:1px solid var(--edge-strong); border-radius:8px; padding:8px 12px; cursor:pointer; }
.nhl table.props .xl{ display:none; }
.nhl table.props.all-lines .xl{ display:table-cell; }
.nhl .gst{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:6px; }
.nhl .gst-confirmed{ background:#2F8F6F; color:#fff; }
.nhl .gst-likely{ background:#E8A83A; color:#1a1206; }
.nhl .gst-assumed{ background:transparent; color:var(--t-3); border:1px dashed var(--t-3); }
.nhl table.gtable tr.st-assumed td{ opacity:.62; }
.nhl table.gtable tr.st-assumed td:nth-child(4){ opacity:1; }
.nhl .b2bopp{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.06em; padding:1px 5px; border-radius:5px; border:1px solid var(--t-3); color:var(--t-2); vertical-align:middle; }
.nhl table.props tr.prow{ cursor:pointer; }
.nhl table.props tr.prow .caret{ display:inline-block; color:var(--t-3); transition:transform .15s; }
.nhl table.props tr.prow[aria-expanded="true"] .caret{ transform:rotate(90deg); }
.nhl table.props tr.prow[aria-expanded="true"] td{ border-bottom-color:transparent; }
.nhl table.props tr.pdet td{ text-align:left; background:var(--s-1); padding:10px 14px 14px; }
.nhl .pgrid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px 18px; }
.nhl .pgrid > div{ display:flex; flex-direction:column; gap:3px; font-size:13.5px; color:var(--t-2); }
.nhl .pgrid .pl{ font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--t-3); }
.nhl .pgrid b{ color:var(--t-1); }
@media (max-width:700px){ .nhl .pgrid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* Props heat: a cell's --h (0..1) sets a green tint, strongest = slate's best (Caleb 2026-10-05) */
.nhl table.props td.hm{ background:rgba(46,204,113,calc(var(--h,0) * .38)); }
.nhl .pgrid .pv{ display:inline-block; padding:2px 8px; border-radius:6px; background:rgba(46,204,113,calc(var(--h,0) * .5)); }
.nhl table.props tr.prow:hover td.hm{ filter:brightness(1.08); }
/* Props market prices (2026-10-06): shown beside ours, never compared or coloured as a difference */
.nhl .pgrid .mk{ display:block; font-style:normal; font-size:13px; font-weight:600; color:var(--t-2); margin-top:2px; letter-spacing:.01em; }
.nhl .mkflag{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.06em; padding:1px 5px; border-radius:5px; border:1px solid var(--t-3); color:var(--t-2); vertical-align:middle; }
.nhl table.props td.mkcell{ text-align:left; white-space:nowrap; }
.nhl .mkl{ display:block; font-size:14.5px; line-height:1.45; color:var(--t-2); } .nhl .mkl b{ color:var(--t-1); } .nhl .mkl i{ font-style:normal; color:var(--t-3); }

.nhl .pgrid .pv{ padding:4px 9px; }
@media (max-width:700px){ .nhl .pgrid .mk{ font-size:12.5px; } .nhl table.props td.mkcell{ min-width:150px; } }
/* Phone: the tap-open detail sits inside a horizontally scrolling table, so pin it to the
   visible width (sticky left, viewport-sized) instead of letting it run off-screen (2026-10-06). */
@media (max-width:700px){
  .nhl table.props tr.pdet td{ padding:8px 0 10px; }
  .nhl table.props tr.pdet .pgrid{ position:sticky; left:0; width:calc(100vw - 74px); padding:0 8px; gap:10px 10px; }
  .nhl .pgrid .pv{ padding:4px 7px; }
}

/* Our read vs the market (Caleb 2026-10-06): one row per market, our side, our chance vs the market's */
.nhl .read{ border-top:1px solid var(--edge); margin:4px 16px 10px; }
.nhl .read.compact{ margin:2px 16px 8px; }
.nhl .panel .read{ margin:0; border-top:0; }
.nhl .read-h, .nhl .read-r{ display:grid; grid-template-columns:minmax(0,1fr) 74px 74px 52px; align-items:center; gap:8px; }
.nhl .read-h{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--t-3); padding:8px 0 4px; }
.nhl .read-h span:nth-child(n+2){ text-align:right; }
.nhl .read-r{ padding:7px 0; border-top:1px solid var(--edge); }
.nhl .read-r > span:nth-child(n+2){ text-align:right; }
.nhl .read-r small{ display:block; font-size:11.5px; color:var(--t-3); }
.nhl .read-r b{ font-size:14px; color:var(--t-1); font-variant-numeric:tabular-nums; }
.nhl .read-r .rl b{ font-size:14px; }
.nhl .read-r .rm b{ color:var(--t-2); font-weight:600; }
.nhl .read-r .rg{ font-size:13px; color:var(--t-3); font-variant-numeric:tabular-nums; }
.nhl .read-r.lean .rl b{ color:var(--ice); }
.nhl .read-r.lean .ro b{ color:var(--ice); }
.nhl .read-r.lean .rg{ color:var(--gold-ink); background:var(--gold); border-radius:999px; padding:2px 7px; justify-self:end; font-weight:700; }
.nhl .read-note{ font-size:11.5px; color:var(--t-3); margin:6px 0 0; }
.nhl .panel .read-h, .nhl .panel .read-r{ grid-template-columns:minmax(0,1fr) 96px 96px 64px; }
.nhl .panel .read-r b{ font-size:16px; }