/* Team colors (--board, --accent, --stripe, --ctl-*, --title) are set by script for the chosen team.
   Brand ("Barnstormer"): cream wool home sweater in light mode, navy road sweater in dark mode. */
:root{
  --board:#001628; --accent:#99D9D9; --stripe:#99D9D9; --brand:#355464; --title:#99D9D9;
  --ctl-light:#355464; --ctl-dark:#99D9D9; --ctl-ink-light:#fff; --ctl-ink-dark:#001628;
  --wool:#EFE6D2; --navy:#1C2B45; --red:#9B1C1F; --gold:#D9A33A;
  --ink:#17233A; --muted:#5D6473; --line:#DDD3BF; --panel:#FBF7EE;
  --bg:color-mix(in srgb, var(--brand) 6%, #F3ECDD);
  --home:color-mix(in srgb, var(--brand) 7%, #FBF7EE);
  --ctl:var(--ctl-light); --ctl-ink:var(--ctl-ink-light);
  --alarm:#E9072B;
  --win:#0E7C66; --winbg:#D5F0E8; --loss:#B3122C; --lossbg:#FBDDE2; --otl:#9A6A00; --otlbg:#FBEFCF;
  --display:"Oswald","Arial Narrow",sans-serif; --serif:"Libre Caslon Text",Georgia,serif;
  --board-ink:#fff; --hem-a:var(--red); --hem-b:var(--navy); --btn:var(--navy); --btn-ink:var(--wool);
  /* logo.svg reads these */
  --logo-ink:#9B1C1F; --logo-bg:var(--bg); --logo-wood:#B98245; --logo-grain:#7A4E22; --logo-tape:#1C2B45; --logo-wrap:#EFE6D2; --logo-puck-rim:none;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Road sweater (dark). The <head> script sets data-scheme from the Look setting (Auto follows the device). */
:root[data-scheme="dark"]{
    color-scheme:dark;
    --ink:#EFE6D2; --muted:#B4BCCB; --line:#2E3B50;
    --panel:color-mix(in srgb, var(--board) 22%, #121A28);
    --bg:color-mix(in srgb, var(--board) 30%, #0B111C);
    --home:color-mix(in srgb, var(--board) 40%, #121A28);
    --ctl:var(--ctl-dark); --ctl-ink:var(--ctl-ink-dark);
    --win:#5FD3B3; --winbg:#0F3A31; --loss:#FF8095; --lossbg:#3E1520; --otl:#F2C14E; --otlbg:#3A2D0C;
    --red:#E8463F; --hem-a:#E8463F; --hem-b:var(--wool); --btn:var(--wool); --btn-ink:var(--navy);
    --logo-ink:#E8463F; --logo-wood:#C99456; --logo-tape:#F3EEE2; --logo-wrap:#1C2B45; --logo-puck-rim:#EFE6D2;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 190px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.45}
/* knit wool texture: rows of little V stitches */
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M0 0 L5 6 L10 0' fill='none' stroke='%23000' stroke-opacity='.05' stroke-width='2'/%3E%3C/svg%3E")}
[data-scheme="dark"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M0 0 L5 6 L10 0' fill='none' stroke='%23fff' stroke-opacity='.035' stroke-width='2'/%3E%3C/svg%3E")}
/* sweater hem stripes */
.hem{height:38px;background:linear-gradient(to bottom,var(--hem-a) 0 10px,transparent 10px 16px,var(--hem-b) 16px 26px,transparent 26px 32px,var(--hem-a) 32px 38px)}
.hem-top{height:16px;background:linear-gradient(to bottom,var(--hem-a) 0 6px,transparent 6px 10px,var(--hem-b) 10px 16px)}
.wrap{max-width:820px;margin:0 auto;padding:0 16px 48px}

/* Scoreboard */
.board{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--board);color:var(--board-ink);
  margin:0 -16px;padding:14px 16px 0}
/* the header ends in sweater hem stripes in the team's colours */
.board::after{content:"";display:block;height:24px;margin:14px -16px 0;
  background:linear-gradient(to bottom,var(--stripe) 0 7px,transparent 7px 11px,var(--brand) 11px 17px,transparent 17px 20px,var(--stripe) 20px 24px)}
.board-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.board h1{font-family:"Oswald",sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:.02em;margin:0;color:var(--title)}
.teamsel{font:500 .85rem var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--board-ink);background:color-mix(in srgb, var(--board-ink) 10%, transparent);border:2px solid color-mix(in srgb, var(--board-ink) 40%, transparent);border-radius:4px;padding:4px 8px;max-width:100%}
.teamsel option,.teamsel optgroup{color:#000;background:#fff}
.sub{font-size:.85rem;color:color-mix(in srgb, var(--board-ink) 75%, transparent);display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
.record{display:flex;align-items:flex-end;gap:22px;margin-top:6px;flex-wrap:wrap}
.rec{font-family:"Oswald",sans-serif;font-weight:700;font-size:clamp(2.6rem,9vw,4rem);line-height:.9;font-variant-numeric:tabular-nums}
.rec .dash{opacity:.55;padding:0 .08em}
.stat{font-family:"Oswald",sans-serif;line-height:1}
.stat b{display:block;font-size:1.9rem;font-weight:700;font-variant-numeric:tabular-nums}
.stat span{font-size:.85rem;color:color-mix(in srgb, var(--board-ink) 75%, transparent);font-family:"Barlow",sans-serif}
.actual{margin-top:8px;font-size:.9rem;color:color-mix(in srgb, var(--board-ink) 75%, transparent)}
.actual b{color:var(--board-ink);font-weight:600;font-variant-numeric:tabular-nums}
.progress{margin-top:10px;height:6px;background:color-mix(in srgb, var(--board-ink) 18%, transparent);border-radius:3px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--stripe);transition:width .25s}
.save{display:inline-flex;align-items:center;gap:6px}
.save::before{content:"";width:8px;height:8px;border-radius:50%;background:color-mix(in srgb, var(--board-ink) 50%, transparent)}
.save[data-s="ok"]::before{background:#5FD3B3}
.save[data-s="busy"]::before{background:#F2C14E}
.save[data-s="err"]::before{background:#FF4D5E}

/* Account + controls */
.account{margin:16px 0 0;padding:12px;border:1.5px solid var(--line);border-radius:8px;background:var(--panel);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.account p{margin:0;flex:1 1 220px;font-size:.9rem;color:var(--muted)}
.account input{flex:1 1 200px;min-width:0;font:inherit;padding:7px 10px;border:1.5px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:14px 0 6px}
.right{display:flex;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;border:1.5px solid var(--ctl);border-radius:6px;overflow:hidden}
.seg button{border:0;background:transparent;color:var(--ink);font:600 .9rem "Barlow",sans-serif;padding:7px 12px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ctl);color:var(--ctl-ink)}
.plain{border:1.5px solid var(--line);background:var(--panel);color:var(--ink);font:600 .9rem "Barlow",sans-serif;padding:7px 12px;border-radius:6px;cursor:pointer}
.plain:hover{border-color:var(--ctl)}
.plain.primary{background:var(--ctl);border-color:var(--ctl);color:var(--ctl-ink)}
.plain.armed{background:var(--alarm);border-color:var(--alarm);color:#fff}
.note{font:italic .85rem/1.5 var(--serif);color:var(--muted);margin:4px 0 0}
.empty{margin-top:24px;padding:16px;border:1.5px dashed var(--line);border-radius:8px;color:var(--muted)}

/* Games */
.month{margin-top:26px}
.month-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:4px}
.month-head h2{font-family:"Oswald",sans-serif;font-weight:600;font-size:1.7rem;text-transform:uppercase;margin:0;line-height:1}
.month-head .mrec{font-family:"Oswald",sans-serif;font-weight:600;font-size:1.05rem;color:var(--muted);font-variant-numeric:tabular-nums}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--alarm);outline-offset:2px}

.hidden{display:none!important}

/* ───── App: install bar (home page) and offline notice (every page) ───── */
.installbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px;padding:12px 14px;
  background:var(--panel);border:2px solid var(--ink);border-left:6px solid var(--red);max-width:34rem}
.installbar-text{display:grid;gap:2px;flex:1 1 220px}
.installbar-text b{font:600 .95rem var(--display);letter-spacing:.08em;text-transform:uppercase}
.installbar-text span{font:italic .88rem/1.45 var(--serif);color:var(--muted)}
.installbar-text span b{font:inherit;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
.installbar-actions{display:flex;align-items:center;gap:12px}
.installbar .btn{padding:7px 16px}
.ios-share{width:1.05em;height:1.05em;vertical-align:-.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--ink)}
.offline{display:none;position:relative;z-index:40;padding:8px 16px;background:var(--gold);color:#2A1E00;font:italic .85rem/1.4 var(--serif);text-align:center}
.offline.on{display:block}
footer{margin-top:28px;font:italic .82rem/1.5 var(--serif);color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.board{position:static}.controls,.account,.teamsel,.topbar,.tabbar,.sh-controls,.sh-strip,.sh-switch,.hem,.hem-top{display:none}.game{break-inside:avoid}}

/* ───── Navigation + username ───── */
.board-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.navlink{color:var(--board-ink);font:600 .82rem var(--display);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:2px solid color-mix(in srgb, var(--board-ink) 40%, transparent);border-radius:4px;padding:4px 10px;white-space:nowrap}
.navlink:hover{background:color-mix(in srgb, var(--board-ink) 12%, transparent)}
.navlink:focus-visible{outline:3px solid var(--alarm);outline-offset:2px}
.navlink.scriptlink{font:1.5rem/1 "Yellowtail",cursive;letter-spacing:0;text-transform:none;color:var(--title);border-color:transparent;padding:2px 8px 4px;transform:rotate(-6deg)}
.navlink.scriptlink:hover{background:transparent;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.userrow{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:10px;border-top:1px solid var(--line);font-size:.9rem}
.userrow input{flex:0 1 220px;min-width:0;font:inherit;padding:7px 10px;border:1.5px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}
.unameMsg{color:var(--muted);font-size:.85rem}

/* ───── Leaderboard ───── */
.lbpage .wrap{max-width:1040px}
/* "All teams": plain cream wool page under the navy road-sweater header */
.neutral{--bg:#EFE6D2;--panel:#F7F1E3;--home:#F7F1E3;--line:#D8CDB6;--ink:#1C2B45;--muted:#5B6475}
.neutral[data-scheme="dark"]{--bg:#1C2B45;--panel:#22355A;--home:#22355A;--line:#3A4C6E;--ink:#EFE6D2;--muted:#B8C0CF}
.lb-board{position:static}
.lb-board .board-top{justify-content:space-between}
.board .lb-headline{font:clamp(2.3rem,7vw,3.6rem)/1.1 "Yellowtail",cursive;letter-spacing:0;word-spacing:.15em;color:var(--title);margin:14px 0 0}
.lb-sub{font:italic .85rem var(--serif);color:color-mix(in srgb, var(--board-ink) 75%, transparent);margin-top:8px}

/* Table on the right, your standing in a sticky sidebar on the left */
.lb-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:start;margin-top:20px}
.lb-layout > .you.hidden + .lb-main{grid-column:1 / -1}
/* "Your spot": a sweater banner in the board's colours (sleeve stripes left, hem stripes along the bottom) */
.you{position:sticky;top:16px;background:var(--board);color:var(--board-ink);border:2px solid var(--ink);border-radius:8px;padding:16px 16px 26px 38px;overflow:hidden}
.you::before{content:"";position:absolute;left:0;top:0;bottom:10px;width:24px;
  background:linear-gradient(to right,transparent 0 5px,var(--lb-stripe) 5px 10px,transparent 10px 14px,var(--lb-stripe) 14px 19px,transparent 19px)}
.you::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background:linear-gradient(to bottom,var(--lb-stripe) 0 4px,transparent 4px 6px,var(--lb-stripe) 6px 10px)}
.you-label{font:600 .76rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--title)}
.you-team{display:flex;align-items:center;gap:8px;margin-top:10px;font:500 1rem var(--display);letter-spacing:.03em;text-transform:uppercase}
.you-rank{font:700 3.4rem/1 var(--display);margin-top:10px;font-variant-numeric:tabular-nums}
.you-rank span{font:italic 1rem var(--serif);color:color-mix(in srgb, var(--board-ink) 72%, transparent)}
.you-pts{display:inline-block;margin-top:8px;font:500 .8rem "Barlow",sans-serif;padding:2px 10px;border-radius:999px;border:1px solid color-mix(in srgb, var(--board-ink) 40%, transparent)}
.you p{font:italic .9rem/1.5 var(--serif);color:color-mix(in srgb, var(--board-ink) 80%, transparent);margin:10px 0 0}
.you .btn{width:100%;margin-top:14px;background:var(--title);border-color:var(--title);color:var(--board)}
@media (max-width:760px){
  .lb-layout{grid-template-columns:1fr}
  .you{position:relative;top:auto}
}

/* The table: the column headers are a band in the board's colours ending in two hem stripes */
.lb-wrap{overflow-x:auto;border:2px solid var(--ink);border-radius:8px;background:var(--panel)}
table.lb{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.lb th{font:600 .76rem var(--display);text-transform:uppercase;letter-spacing:.14em;color:var(--board-ink);text-align:right;padding:12px 12px 20px;white-space:nowrap;
  background:linear-gradient(to bottom,var(--board) 0 calc(100% - 10px),var(--lb-stripe) calc(100% - 10px) calc(100% - 6px),var(--board) calc(100% - 6px) calc(100% - 4px),var(--lb-stripe) calc(100% - 4px))}
.lb th:nth-child(1),.lb th:nth-child(2){text-align:left}
.lb td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.lb tr:last-child td{border-bottom:0}
.lb td.rank{text-align:left;width:3.2rem}
.lb td.name{text-align:left;font-weight:600;white-space:normal;min-width:9rem;overflow-wrap:anywhere}
/* medium widths: team tags only (no full team names) and no "Games picked", so player names keep their room */
@media (max-width:900px){ .lb .tname{display:none} .lb .opt{display:none} }
.lb td.pts{font:600 1.4rem var(--display)}
/* rank medals: stitched felt patches in gold, silver and bronze */
.rk{display:inline-flex;align-items:center;justify-content:center;min-width:2.1rem;height:2.1rem;border-radius:50%;font:600 1rem var(--display);color:var(--muted)}
.rk.r1,.rk.r2,.rk.r3{outline:1.4px dashed rgba(255,255,255,.8);outline-offset:-4px;box-shadow:0 1px 1px rgba(0,0,0,.25)}
.rk.r1{background:#C08A2A;color:#2A1C02}
.rk.r2{background:#AEB4BD;color:#1E2A31}
.rk.r3{background:#B07447;color:#2E1605}
/* your rows: a team-colour edge and a light gold tint (no label) */
.lbpage{--edge:var(--board);--lb-stripe:var(--stripe)} .lbpage[data-scheme="dark"]{--edge:var(--stripe)}
/* All teams board: the brand's cardinal red stripes */
html.lbpage.neutral{--lb-stripe:var(--red)} html.lbpage.neutral[data-scheme="dark"]{--edge:var(--red)}
.lb tr.me td{background:color-mix(in srgb, var(--gold) 13%, var(--panel))}
.lb tr.me td:first-child{box-shadow:inset 5px 0 0 var(--edge)}
@media (max-width:560px){
  .lb .opt,.lb .frac{display:none}
  .lb th,.lb td{padding:9px 6px}
  .lb th{letter-spacing:.04em;font-size:.72rem}
  .lb th[data-short]{font-size:0}                 /* Pts / Res / Gls on phones */
  .lb th[data-short]::after{content:attr(data-short);font-size:.72rem}
  .lb td.rank{width:2.4rem}
  .lb td.name{min-width:8.5rem;word-break:normal;overflow-wrap:anywhere}
  .board .lb-headline{transform:none}
}
.lb-board{overflow:hidden}
.nowrap{white-space:nowrap}
.muted{color:var(--muted);font-size:.85em}

a.plain{display:inline-flex;align-items:center;text-decoration:none}

/* ═════════ Home page ═════════ */
/* Home sweater: cream wool. Road sweater (dark mode): navy. */
.home{--bg:#EFE6D2;--panel:#F7F1E3;--line:#D8CDB6;--ink:#1C2B45;--muted:#5B6475;--board:#1C2B45;--goal:#9B1C1F;--btn:#1C2B45;--btn-ink:#EFE6D2}
.home[data-scheme="dark"]{--bg:#1C2B45;--panel:#22355A;--line:#3A4C6E;--ink:#EFE6D2;--muted:#B8C0CF;--board:#14203A;--goal:#E8463F;--btn:#EFE6D2;--btn-ink:#1C2B45}
.home body,.home{background-color:var(--bg)}

/* News ticker */
.ticker{display:flex;align-items:stretch;background:var(--board);color:#fff;font-size:.9rem;overflow:hidden;min-height:38px}
.ticker-label{flex:none;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--goal);font:700 .85rem "Oswald",sans-serif;letter-spacing:.08em;text-transform:uppercase;z-index:1}
.ticker-viewport{flex:1;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.ticker-track{display:inline-flex;white-space:nowrap;animation:tick var(--dur,90s) linear infinite;padding-left:12px}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:8px;padding:9px 18px 9px 0}
.ticker a:hover{text-decoration:underline}
.ticker a::after{content:"";width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.4);margin-left:10px}
.ticker time{color:rgba(255,255,255,.6);font-size:.8rem}
.ticker a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker-viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .ticker-track{animation:none}
  .ticker-track [aria-hidden="true"]{display:none}
}

/* Top bar (position:relative anchors the Pick Team panel) */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;flex-wrap:wrap;position:relative;z-index:20}
/* .brand holds logo.svg (injected by teams.js); the script text is the fallback until it loads */
.brand{display:inline-block;font:2rem/1 "Yellowtail",cursive;color:var(--logo-ink);text-decoration:none;transform:rotate(-6deg)}
.brand.has-logo{transform:none}
.brand .logo-svg{display:block;height:58px;width:auto;overflow:visible}
.topnav{display:flex;gap:16px;align-items:center;font:500 .95rem var(--display);letter-spacing:.08em;text-transform:uppercase}
.topnav a{color:var(--ink);text-decoration:none;text-underline-offset:6px;text-decoration-thickness:3px}
.topnav a:hover{text-decoration:underline;text-decoration-color:var(--goal)}
.topnav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--goal)}

/* account button: outlined, fills in navy (cream on the road sweater) on hover */
.navaccount{border:2px solid var(--ink);border-radius:4px;padding:4px 12px;max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .12s,color .12s}
.topnav a.navaccount:hover{text-decoration:none;background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.topnav a.navaccount[aria-current="page"]{text-decoration:none;box-shadow:inset 0 -3px 0 var(--goal)}

/* "Pick Team" button (desktop and tablets): a navy sweater sleeve with red and cream stripes */
.topbar{--sleeve2:var(--wool)} [data-scheme="dark"] .topbar{--sleeve2:var(--navy)}
.teammenu-btn{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--btn);color:var(--btn-ink);font:600 .9rem var(--display);letter-spacing:.1em;text-transform:uppercase;
  padding:6px 13px 6px 26px;border-radius:4px;cursor:pointer;white-space:nowrap;
  background:linear-gradient(to right,transparent 0 5px,#E8463F 5px 9px,transparent 9px 12px,var(--sleeve2) 12px 16px,transparent 16px),var(--btn)}
.teammenu-btn:hover{filter:brightness(1.12)}
.teammenu-btn::after{content:"";width:.45em;height:.45em;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.teammenu-btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
/* the panel: navy sweater banner, four divisions of mini sweaters, and a link to every team */
.teammenu-panel{position:absolute;top:calc(100% - 6px);right:0;z-index:20;width:min(920px,calc(100vw - 32px));
  background:var(--panel);border:2px solid var(--ink);border-radius:8px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.22)}
.teammenu-panel[hidden]{display:none}
.tm-head{position:relative;display:grid;gap:2px;padding:12px 18px 22px 40px;background:var(--navy);color:var(--wool)}
[data-scheme="dark"] .tm-head{background:#14203A}
.tm-head::before{content:"";position:absolute;left:0;top:0;bottom:10px;width:24px;
  background:linear-gradient(to right,transparent 0 5px,#E8463F 5px 10px,transparent 10px 14px,var(--wool) 14px 19px,transparent 19px)}
.tm-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(to bottom,#E8463F 0 4px,transparent 4px 6px,var(--wool) 6px 10px)}
.tm-head small{font:600 .7rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.tm-head b{font:700 1.5rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.tm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 18px;padding:14px 16px 6px}
.teammenu-div h3{font:600 .8rem var(--display);text-transform:uppercase;letter-spacing:.14em;color:var(--ink);margin:0 0 6px;padding-bottom:4px;border-bottom:4px double var(--ink)}
.teammenu-panel .teammenu-div a{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 6px;border-radius:4px;color:var(--ink);text-decoration:none;
  font:500 .9rem var(--display);letter-spacing:.04em;text-transform:uppercase}
.teammenu-panel .teammenu-div a:hover,.teammenu-panel .teammenu-div a:focus-visible{text-decoration:none;
  background:color-mix(in srgb, var(--t-board) 12%, transparent);box-shadow:inset 4px 0 0 var(--t-board)}
[data-scheme="dark"] .teammenu-panel .teammenu-div a:hover,[data-scheme="dark"] .teammenu-panel .teammenu-div a:focus-visible{background:color-mix(in srgb, var(--t-stripe) 14%, transparent);box-shadow:inset 4px 0 0 var(--t-stripe)}
.tm-jersey{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#F4EDDC;border:1.5px solid var(--t-board)}
.tm-jersey svg{width:84%;height:84%;margin-top:6%;--j1:var(--t-board);--j2:var(--t-stripe)}
.teammenu-panel a.tm-all{display:block;margin:6px 16px 14px;padding-top:10px;border-top:1px solid var(--line);font:italic .9rem var(--serif);color:var(--ink);text-decoration:none;text-transform:none;letter-spacing:0}
.teammenu-panel a.tm-all:hover{text-decoration:underline;text-decoration-color:var(--goal)}
@media (max-width:860px){ .tm-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }@media (max-width:560px){
  /* phones and the app use the bottom tab bar (its Pick Team tab opens teams.html),
     so the top bar keeps only the logo and the account button */
  .topbar{flex-wrap:nowrap;padding:12px 0}
  .brand{font-size:1.6rem;white-space:nowrap}
  .brand .logo-svg{height:44px}
  .topnav{gap:8px;font-size:.9rem}
  .topnav > a:not(.navaccount):not(.navrules),.topnav .teammenu{display:none}
  .topnav > a.navrules{border:2px solid var(--ink);border-radius:4px;padding:4px 10px;text-decoration:none}
  .navaccount{max-width:9em}
}

/* ───── Pick Team page: sweater banner, then every team as a card with its sweater ───── */
.teamspage .wrap{max-width:1040px}
.teams-banner{position:relative;margin-top:4px;padding:18px 20px 30px 44px;background:var(--navy);color:var(--wool);border-radius:8px;overflow:hidden}
[data-scheme="dark"] .teams-banner{background:#14203A;box-shadow:0 0 0 2px var(--ink)}
.teams-banner::before{content:"";position:absolute;left:0;top:0;bottom:14px;width:26px;
  background:linear-gradient(to right,transparent 0 5px,#E8463F 5px 10px,transparent 10px 14px,var(--wool) 14px 19px,transparent 19px)}
.teams-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;
  background:linear-gradient(to bottom,#E8463F 0 5px,transparent 5px 8px,var(--wool) 8px 14px)}
.tb-kicker{font:600 .75rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.teams-banner h1{font:700 clamp(2.2rem,6.5vw,3.2rem)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:4px 0 0}
.teams-banner p{font:italic .95rem var(--serif);color:#C9D0DC;margin:8px 0 0}
.division{margin-top:26px}
.division .section-head{margin-bottom:12px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px}
/* a cream card: the team's sweater in a stitched patch, the name, and a team-colour hem along the bottom */
.tile{position:relative;display:flex;align-items:center;gap:12px;min-height:76px;padding:10px 14px 18px 12px;border:2px solid var(--ink);border-radius:8px;overflow:hidden;
  background:var(--panel);color:var(--ink);text-decoration:none;transition:transform .12s ease,box-shadow .12s ease}
.tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;
  background:linear-gradient(to bottom,var(--t-board) 0 3px,transparent 3px 5px,var(--t-stripe) 5px 8px)}
[data-scheme="dark"] .tile::after{background:linear-gradient(to bottom,var(--t-stripe) 0 3px,transparent 3px 5px,var(--t-board) 5px 8px)}
.tile:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.14)}
.tile:focus-visible{outline:3px solid var(--alarm);outline-offset:2px}
.tile-jersey{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#F4EDDC;
  border:2px solid var(--t-board);box-shadow:inset 0 0 0 3px #F4EDDC,inset 0 0 0 4.5px color-mix(in srgb, var(--t-board) 35%, transparent)}
.tile-jersey svg{width:84%;height:84%;margin-top:6%;--j1:var(--t-board);--j2:var(--t-stripe)}
.tile-text{display:grid;gap:2px;min-width:0}
.tile-name{font:600 1.02rem/1.15 var(--display);letter-spacing:.04em;text-transform:uppercase}
.tile-code{font:italic .78rem var(--serif);color:var(--muted)}
.tile-tag{justify-self:start;margin-top:3px;font:600 .62rem var(--display);letter-spacing:.1em;text-transform:uppercase;padding:1px 7px;border-radius:999px;border:1.5px solid var(--ink);color:var(--ink)}
.tile-tag.is-last{background:var(--gold);border-color:var(--gold);color:#2A1C02}
@media (prefers-reduced-motion:reduce){ .tile{transition:none} .tile:hover{transform:none} }
.home .wrap{max-width:1040px}
/* Desktop: intro beside the account card, today's games full width below.
   Phones and the installed app: headline, account card, Continue button, install bar, today's games. */
.homegrid{display:grid;grid-template-columns:1.15fr .85fr;grid-template-areas:"intro account" "upnext upnext" "today today" "promo promo";column-gap:32px;align-items:start;padding-top:20px}
.homegrid .intro{grid-area:intro}
.homegrid #account{grid-area:account}
.homegrid #today{grid-area:today;margin-top:36px}
.homegrid #upnext{grid-area:upnext;margin-top:36px}
.homegrid .promo{grid-area:promo}
@media (max-width:760px){
  .homegrid{grid-template-columns:1fr;grid-template-areas:"headline" "account" "upnext" "install" "today" "promo"}
  .homegrid .intro{display:contents}   /* lets the account card sit between the headline and the install bar */
  .homegrid .intro h1{grid-area:headline}
  .homegrid #account{margin-top:22px}
  .homegrid .intro .installbar{grid-area:install}
  .homegrid #today,.homegrid #upnext{margin-top:28px}
}
.intro h1{font:600 clamp(2.4rem,6.5vw,4rem)/1 "Oswald",sans-serif;text-transform:uppercase;margin:0;letter-spacing:.01em}
.intro h1 em{font-style:normal;color:var(--goal)}
.teambtn{background:var(--t-board);border-color:var(--t-board);box-shadow:inset -6px 0 0 var(--t-stripe);color:var(--t-ink,#fff);padding-right:24px}
.btn.teambtn{background:var(--t-board);border-color:var(--t-board);color:var(--t-ink,#fff)}
[data-scheme="dark"] .btn.teambtn{border-color:color-mix(in srgb, var(--t-board) 60%, #fff)}
.lede{font:italic 1.1rem/1.5 var(--serif);color:var(--muted);max-width:34em;margin:16px 0 14px}
.chips{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:2px solid var(--ink);border-radius:4px;background:var(--panel);font:500 .85rem var(--display);letter-spacing:.08em;text-transform:uppercase}
.chips b{font:700 1.05rem "Oswald",sans-serif;color:var(--goal)}
.cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* Home account box: "Current Picks" label, and Continue at the bottom */
.acct-label{font:600 .75rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.acct-cta{margin-top:4px}
.acct-cta .btn{width:100%;justify-content:center;box-sizing:border-box;text-align:center}
.promo{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:36px;padding:16px 20px;border-radius:8px;background:var(--navy);color:var(--wool);text-decoration:none;border-left:6px solid var(--goal);font:italic .95rem var(--serif)}
[data-scheme="dark"] .promo{background:var(--board)}
.promo b{font:600 1.3rem "Oswald",sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;margin-right:8px}
.promo:hover{filter:brightness(1.15)}
.intermission .section-head h1{font:700 clamp(2rem,6vw,2.8rem)/1 "Oswald",sans-serif;text-transform:uppercase;margin:0}
.intermission .section-head h1 em{font-style:normal;color:var(--goal)}
.intermissionpage .section{margin-top:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--btn,var(--board));background:var(--btn,var(--board));color:var(--btn-ink,#fff);font:600 .95rem var(--display);letter-spacing:.1em;text-transform:uppercase;padding:9px 18px;border-radius:4px;text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn:disabled{opacity:.6;cursor:default}

/* Account card */
.card{background:var(--panel);border:2px solid var(--ink);border-radius:8px;padding:20px}
.card h2{font:2rem/1.1 "Yellowtail",cursive;color:var(--goal);margin:0 0 6px}
.card .hint{font-size:.88rem;color:var(--muted);margin:0 0 14px}
.tabs{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:16px}
.tabs button{border:0;background:transparent;color:var(--muted);font:600 .85rem var(--display);letter-spacing:.1em;text-transform:uppercase;padding:9px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--btn,var(--board));color:var(--btn-ink,#fff)}
.field{display:grid;gap:4px;margin-bottom:12px}
.field label{font-weight:600;font-size:.9rem}
.field input,.field select{font:inherit;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);width:100%;box-sizing:border-box}
.field select{padding-right:8px}
.field input:focus,.field select:focus{border-color:var(--board)}
.pw{position:relative}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);font:600 .8rem "Barlow",sans-serif;padding:6px 8px;cursor:pointer}
.pw input{padding-right:64px}
.form-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.linkbtn{border:0;background:none;color:var(--ink);font:600 .9rem "Barlow",sans-serif;text-decoration:underline;cursor:pointer;padding:4px 0}
.formmsg{min-height:1.3em;margin:12px 0 0;font-size:.9rem}
.formmsg.err{color:var(--loss)} .formmsg.ok{color:var(--win)}
.mysheets{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.mysheets a{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none}
.mysheets a:hover{border-color:var(--ink)}
.mysheets .meta{margin-left:auto;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* Team swatch */
.sw{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:1.7rem;border-radius:5px;background:var(--t-board);box-shadow:inset -4px 0 0 var(--t-stripe);color:var(--t-ink,#fff);font:700 .8rem "Oswald",sans-serif;letter-spacing:.04em}

/* Sections */
.section{margin-top:44px}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;border-bottom:4px double var(--ink);padding-bottom:6px;margin-bottom:14px}
.section-head h2{font:600 1.7rem "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.02em;margin:0;line-height:1}
.section-head span{color:var(--muted);font:italic .88rem var(--serif)}

/* Today's games: each card wears both teams' colours as sleeve stripes across the top */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
.gcard{background:var(--panel);border:2px solid var(--ink);border-radius:8px;padding:0 14px 12px;overflow:hidden}
.gcard{--away:var(--away-board,var(--goal));--home:var(--home-board,var(--ink))}
[data-scheme="dark"] .gcard{--away:var(--away-stripe,var(--goal));--home:var(--home-stripe,var(--ink))}
.gcard::before{content:"";display:block;height:14px;margin:0 -14px 10px;
  background:linear-gradient(to bottom,var(--away) 0 5px,transparent 5px 9px,var(--home) 9px 14px)}
.gcard .team{display:flex;align-items:center;gap:10px;padding:4px 0}
.gcard .team a{color:var(--ink);text-decoration:none;font:500 1.05rem var(--display);letter-spacing:.03em;text-transform:uppercase;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard .team a:hover{text-decoration:underline}
.gcard .score{font:600 1.4rem "Oswald",sans-serif;font-variant-numeric:tabular-nums;min-width:1.2em;text-align:right}
.gcard .team.lost{opacity:.55}
.gcard .status{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font:italic .85rem var(--serif);color:var(--muted);display:flex;justify-content:space-between}
.gcard .status b{color:var(--goal);font:600 .85rem var(--display);font-style:normal;letter-spacing:.08em;text-transform:uppercase}
.gcard .live{color:var(--goal);font-weight:700}
.gcard .team a.pickbtn{flex:none;padding:3px 12px;border-radius:4px;background:var(--btn,var(--board));color:var(--btn-ink,#fff);font:600 .8rem var(--display);letter-spacing:.12em}
.gcard .team a.pickbtn:hover{text-decoration:none;filter:brightness(1.2)}

.home footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font:italic .85rem var(--serif)}
.home footer a{color:var(--muted)}
.home .wrap{padding-bottom:28px}

/* Sheet: the row a home-page "Pick" button jumped to */
.game.flash{animation:flash 2.4s ease-out}
@keyframes flash{0%,30%{box-shadow:inset 0 0 0 3px var(--stripe)}100%{box-shadow:inset 0 0 0 3px transparent}}
@media (prefers-reduced-motion:reduce){ .game.flash{animation:none;box-shadow:inset 0 0 0 3px var(--stripe)} }

/* ───── Phone tab bar (built by mountTabBar in teams.js) ───── */
.tabbar{display:none}
@media (max-width:560px){
  /* navy bar on the home sweater, wool bar on the road sweater */
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);
    background:var(--navy);border-top:3px solid var(--hem-a);padding:4px 2px calc(4px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 16px rgba(0,0,0,.12)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;color:rgba(239,230,210,.75);text-decoration:none;font:500 .66rem var(--display);letter-spacing:.08em;text-transform:uppercase;border-radius:8px}
  .tabbar a > svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a[aria-current="page"]{color:var(--gold)}
  .tabbar a[aria-current="page"] > svg{stroke:var(--gold)}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:560px){
  [data-scheme="dark"] .tabbar{background:var(--wool)}
  [data-scheme="dark"] .tabbar a{color:rgba(28,43,69,.7)}
  [data-scheme="dark"] .tabbar a[aria-current="page"],[data-scheme="dark"] .tabbar a[aria-current="page"] > svg{color:#9B1C1F;stroke:#9B1C1F}
}

/* ═════════ Pick sheet (sheet.html) ═════════
   Brand page (cream or navy knit) with the team's colours in one banner: sleeve stripes on the left,
   hem stripes along the bottom that fill in as you pick (the progress bar). */
.sheetpage .wrap{max-width:940px}
html.sheetpage{scroll-padding-top:16px;--edge:var(--board)}
html.sheetpage[data-scheme="dark"]{--edge:var(--stripe)}
.sheethead{position:relative;margin-top:4px;background:var(--board);color:var(--board-ink);border-radius:8px;overflow:hidden}
.sheethead::before{content:"";position:absolute;left:0;top:0;bottom:14px;width:26px;
  background:linear-gradient(to right,transparent 0 5px,var(--stripe) 5px 10px,transparent 10px 14px,var(--stripe) 14px 19px,transparent 19px)}
.sh-in{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 24px;flex-wrap:wrap;padding:18px 22px 16px 44px}
.sh-main{min-width:0;flex:1 1 300px}
.sh-kicker{font:600 .75rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--title)}
.sh-team{font:700 clamp(1.8rem,5vw,2.6rem)/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:2px 0 0;color:var(--board-ink)}
.sh-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.sh-chip{display:inline-flex;align-items:center;gap:6px;font:500 .8rem "Barlow",sans-serif;padding:2px 10px;border-radius:999px;
  border:1px solid color-mix(in srgb, var(--board-ink) 35%, transparent);white-space:nowrap;font-variant-numeric:tabular-nums}
.sh-switch{position:relative;display:inline-flex;align-items:center;gap:7px;font:600 .75rem var(--display);letter-spacing:.12em;text-transform:uppercase;
  padding:3px 12px;border-radius:999px;background:var(--title);color:var(--board);cursor:pointer}
.sh-switch::after{content:"";width:.4em;height:.4em;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.sh-switch select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.sh-switch:focus-within{outline:3px solid var(--alarm);outline-offset:2px}
.sh-rec{text-align:right;margin-left:auto}
.sheethead .rec{font:700 clamp(2.4rem,7vw,3.6rem)/.95 var(--display);font-variant-numeric:tabular-nums}
.sh-recnote{font:italic .82rem var(--serif);color:color-mix(in srgb, var(--board-ink) 75%, transparent);margin-top:4px}
.sh-hem{position:relative;height:14px;
  background:linear-gradient(to bottom,color-mix(in srgb, var(--stripe) 30%, transparent) 0 5px,transparent 5px 9px,color-mix(in srgb, var(--stripe) 30%, transparent) 9px 14px)}
.sh-hem i{position:absolute;left:0;top:0;bottom:0;width:0;transition:width .25s;
  background:linear-gradient(to bottom,var(--stripe) 0 5px,transparent 5px 9px,var(--stripe) 9px 14px)}

/* One-line notes under the banner: sign in / choose a username, or viewing someone else's sheet */
.sh-strip{margin:12px 0 0;padding:9px 12px;border:2px dashed var(--ink);border-radius:8px;background:var(--panel);font-size:.92rem}
.sh-strip a{color:var(--ink);font-weight:700}
.sh-viewing{border-style:solid;border-left:6px solid var(--edge);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.sh-viewing p{margin:0;flex:1 1 260px}
.sh-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Filter + More menu */
.sh-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:16px 0 4px}
.sh-seg{display:inline-flex;border:2px solid var(--ink);border-radius:4px;overflow:hidden;min-width:0}
.sh-seg button,.sh-morebtn{border:0;background:transparent;color:var(--ink);font:600 .8rem var(--display);letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;cursor:pointer;white-space:nowrap}
.sh-seg button[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink)}
.sh-more{position:relative;flex:none}
.sh-morebtn{border:2px solid var(--ink);border-radius:4px;padding:5px 11px}
.sh-morebtn[aria-expanded="true"]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.sh-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:15;min-width:16rem;background:var(--panel);border:2px solid var(--ink);border-radius:6px;box-shadow:0 12px 28px rgba(0,0,0,.18);overflow:hidden}
.sh-menu[hidden]{display:none}
.sh-menu > *{display:block;width:100%;box-sizing:border-box;text-align:left;padding:11px 14px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);
  font:600 .82rem var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.sh-menu > :last-child{border-bottom:0}
.sh-menu > :hover{background:color-mix(in srgb, var(--ink) 7%, transparent)}
.sh-menu .danger{color:var(--loss)}
.sh-menu .danger.armed{background:var(--loss);color:#fff}

/* Months */
.sheetpage .month{margin-top:22px}
.sheetpage .month-head{border-bottom:4px double var(--ink);padding-bottom:4px}
.sheetpage .month-head h2{font-size:1.3rem;letter-spacing:.06em}
.sheetpage .month-head .myear{color:var(--muted);font-weight:500}
.sheetpage .month-head .mrec{font:italic .85rem var(--serif);color:var(--muted)}

/* Game rows: date · opponent (+ final score) · W/L/OTL · goals · points badge. Home games get a team-colour edge. */
.game{display:grid;grid-template-columns:6.4rem minmax(0,1fr) auto auto 2.4rem;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
.game.is-home{box-shadow:inset 5px 0 0 var(--edge)}
.gdate b{display:block;font:600 1rem/1.15 var(--display);letter-spacing:.02em}
.gdate small{display:block;font:italic .75rem var(--serif);color:var(--muted)}
.opp{min-width:0}
.oppline{display:flex;align-items:center;gap:8px;min-width:0}
.oppline strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game .sw{width:2.5rem;height:1.45rem;font-size:.72rem;border-radius:4px}
.gmeta{display:flex;flex-wrap:wrap;gap:0 6px}
.gmeta .tag,.final:not(:empty){margin-top:4px}
.gmeta .tag{font:600 .68rem var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:0 5px}
.final:not(:empty){display:inline-block;font:600 .72rem var(--display);letter-spacing:.06em;text-transform:uppercase;padding:1px 7px;border-radius:3px;color:#fff;background:var(--muted);font-variant-numeric:tabular-nums}
.final[data-r="W"]{background:#2E7D4F} .final[data-r="L"]{background:#9B1C1F} .final[data-r="OTL"]{background:#A8730F}
.game.secret .final{background:transparent;color:var(--muted);font:italic .78rem var(--serif);letter-spacing:0;text-transform:none;padding:0}
.picks{display:inline-flex;gap:4px}
.picks button{width:2.8rem;height:2.3rem;border:2px solid color-mix(in srgb, var(--ink) 30%, transparent);background:transparent;color:var(--muted);
  font:600 .95rem var(--display);letter-spacing:.03em;border-radius:4px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.picks button:hover{border-color:var(--ink);color:var(--ink)}
.picks button[aria-pressed="true"]{background:var(--board);border-color:var(--board);color:var(--board-ink);box-shadow:inset 0 -4px 0 var(--stripe)}
[data-scheme="dark"] .picks button[aria-pressed="true"]{border-color:var(--stripe)}
.game.locked .picks button{cursor:default}
.game.locked .picks button:not([aria-pressed="true"]){opacity:.35}
.goals{display:inline-flex;align-items:stretch;height:2.3rem;border:2px solid color-mix(in srgb, var(--ink) 30%, transparent);border-radius:4px;overflow:hidden}
.goals.set{border-color:var(--ink)}
.glabel{align-self:center;font:600 .62rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 4px 0 7px}.gbtn{width:1.9rem;border:0;background:transparent;color:var(--ink);font:600 1.15rem/1 var(--display);cursor:pointer;padding:0}
.gbtn:hover:not(:disabled){background:color-mix(in srgb, var(--ink) 8%, transparent)}
.gin{width:2.3rem;border:0;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink);
  text-align:center;font:600 1.1rem var(--display);font-variant-numeric:tabular-nums;padding:0}
.gin::placeholder{color:var(--muted)}
.gin:focus{outline:none}
.goals:focus-within{outline:3px solid var(--alarm);outline-offset:2px}
.game.locked .goals{opacity:.55}
.game.locked .goals.set{opacity:1}
.game.locked .gbtn{visibility:hidden}
.ptsbadge{justify-self:end;min-width:2.2rem;text-align:center;font:700 .8rem var(--display);padding:2px 6px;border-radius:3px}
.ptsbadge:empty{visibility:hidden}
.ptsbadge[data-p="2"]{background:var(--gold);color:#3A2A08}
.ptsbadge[data-p="1"]{background:var(--navy);color:var(--wool)}
[data-scheme="dark"] .ptsbadge[data-p="1"]{background:var(--wool);color:var(--navy)}
.ptsbadge[data-p="0"]{background:color-mix(in srgb, var(--ink) 10%, transparent);color:var(--muted)}

@media (max-width:560px){
  .sh-in{padding:14px 14px 12px 36px}
  .sheethead::before{width:22px;background:linear-gradient(to right,transparent 0 4px,var(--stripe) 4px 8px,transparent 8px 11px,var(--stripe) 11px 15px,transparent 15px)}
  .sh-rec{text-align:left;flex-basis:100%;margin-left:0}
  .sh-controls{gap:8px}
  .sh-seg button{padding:6px 8px;font-size:.74rem;letter-spacing:.08em}
  .sh-morebtn{padding:4px 9px;font-size:.74rem}
}
@media (max-width:760px){
  /* two short lines per game: opponent + date, then picks + goals + points */
  .game{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;padding:8px 10px}
  .picks,.goals,.ptsbadge{margin-top:7px}
  .picks button,.goals{height:2.15rem}
  .opp{order:1;flex:1 1 0;min-width:0}
  .gdate{order:2;flex:none;text-align:right;align-self:flex-start;padding-top:3px}
  .game::after{content:"";order:3;flex-basis:100%;height:0}   /* line break between the two rows */
  .picks{order:4}.goals{order:5}.ptsbadge{order:6;margin-left:auto}
  .gdate b,.gdate small{display:inline;font:italic .75rem var(--serif);color:var(--muted);letter-spacing:0}
  .gdate small::before{content:" · "}
}
@media (max-width:420px){
  .picks button{width:2.4rem}
  .gbtn{width:1.7rem}
  .gin{width:2rem}
  .glabel{padding:0 2px 0 6px;letter-spacing:.08em}
  .gdate b,.gdate small{display:block;line-height:1.3}   /* narrow phones: day over time, so the opponent keeps its room */
  .gdate small::before{content:none}
}
.lb td.teamcell{text-align:left}
.teamlink{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.teamlink:hover .tname{text-decoration:underline}
.teamcol{text-align:left!important}
@media (max-width:560px){ .board{position:static} }

/* ───── Breakaway mini-game ───── */
.rinkwrap{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;line-height:0;background:#18222D}
#rink{display:block;width:100%;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#rink:focus{outline:none}
.rinkwrap:focus-within{outline:3px solid var(--goal,#D7263D);outline-offset:2px}
.runbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.runbar .hint{margin:0;flex:1 1 300px}
kbd{font:600 .8rem "Barlow",sans-serif;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--panel)}
.runbtns{display:none;gap:8px}
.runbtns .btn{min-width:110px;user-select:none;-webkit-user-select:none;touch-action:none}
@media (pointer:coarse){ .runbtns{display:flex;flex:1 1 100%} .runbtns .btn{flex:1;padding:14px} }
.lede a{color:inherit}

/* ───── Rules page ───── */
.note a,footer a{color:inherit}
.rulespage .wrap{max-width:820px}
.rules-hero{padding:20px 0 4px}
.rules-hero h1{font:600 clamp(2.6rem,8vw,4rem)/1 "Oswald",sans-serif;text-transform:uppercase;margin:0}
.points-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.points-strip div{display:flex;align-items:center;gap:12px;background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:14px}
.points-strip b{font:700 2.4rem "Oswald",sans-serif;line-height:1;color:var(--win)}
.points-strip .max{background:var(--board);border-color:var(--board);color:#fff}
.points-strip .max b{color:#fff}
.points-strip span{font-weight:600;line-height:1.25}
.points-strip small{font-weight:400;color:var(--muted)}
.points-strip .max small{color:rgba(255,255,255,.7)}
.basics{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.basics li{padding:12px 14px 12px 16px;background:var(--panel);border:2px solid var(--ink);border-left:6px solid var(--goal);border-radius:0;line-height:1.55}
.basics .pill{min-width:0;font-size:.85rem;padding:1px 6px}
.rules section{margin-top:36px;scroll-margin-top:16px}
.rules-more{margin-top:36px!important}
.rules > details{scroll-margin-top:16px}
.rules > details > summary{font:600 1.1rem "Oswald",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.rules > details > :not(summary){margin-left:14px;margin-right:14px}
.rules > details > :last-child{margin-bottom:14px}
.rules > details > p{padding:0;color:var(--ink)}
.rules h2{font:600 1.7rem "Oswald",sans-serif;text-transform:uppercase;margin:0 0 10px;border-bottom:4px double var(--ink);padding-bottom:4px}
.rules h3{font:700 1.25rem "Oswald",sans-serif;margin:22px 0 6px}
.rules p,.rules li,.rules dd{line-height:1.6}
.rules a{color:var(--ink)}
.defs{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;margin:14px 0;padding:14px 16px;background:var(--panel);border:1.5px solid var(--line);border-radius:10px}
.defs dt{font-weight:700}
.defs dd{margin:0}
.callout{background:var(--panel);border-left:5px solid var(--goal);border-radius:6px;padding:12px 14px}
.tablewrap{overflow-x:auto;margin:12px 0;border:1.5px solid var(--line);border-radius:10px;background:var(--panel)}
.rtable{width:100%;border-collapse:collapse}
.rtable th,.rtable td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.rtable thead th{font:600 .8rem "Barlow",sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:2px solid var(--ink);white-space:nowrap}
.rtable tr:last-child th,.rtable tr:last-child td{border-bottom:0}
.rtable tbody th{width:4.5rem}
.rtable:not(.examples) thead th{white-space:normal} /* the 2-column pick table fits a phone without sideways scrolling */
.examples td:nth-child(n+3){text-align:center}
.examples thead th:nth-child(n+3){text-align:center}
.yes{color:var(--win);font-weight:700}.no{color:var(--loss);font-weight:700}.na{color:var(--muted)}
.examples .pts{font:700 1.3rem "Oswald",sans-serif}
.pill{display:inline-block;min-width:2.6rem;text-align:center;font:700 .95rem "Oswald",sans-serif;padding:3px 6px;border-radius:5px;border:1.5px solid}
.pill.w{color:var(--win);background:var(--winbg)} .pill.l{color:var(--loss);background:var(--lossbg)} .pill.otl{color:var(--otl);background:var(--otlbg)}
.bullets{padding-left:1.2rem}
.bullets li{margin-bottom:8px}
details{border:1.5px solid var(--line);border-radius:10px;background:var(--panel);margin-bottom:8px}
summary{cursor:pointer;font-weight:600;padding:12px 14px;list-style-position:inside}
details p{margin:0;padding:0 14px 14px;color:var(--muted)}
details[open] summary{border-bottom:1px solid var(--line);margin-bottom:10px}
.rules-cta{margin-top:32px}
@media (max-width:600px){ .points-strip{grid-template-columns:1fr} .defs{grid-template-columns:1fr} }

/* ───── Viewing another player's sheet ───── */
.viewing{margin:16px 0 0;padding:12px 14px;border:1.5px solid var(--line);border-left:6px solid var(--stripe);border-radius:8px;background:var(--panel);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.viewing p{margin:0;flex:1 1 280px;font-size:.92rem}
.game.secret .final{color:var(--muted);font-weight:500;font-style:italic}
.viewmode .game .picks button,.viewmode .gin{cursor:default}

/* clickable leaderboard rows */
.lb tbody tr.clickable{cursor:pointer}
.lb tbody tr.clickable:hover td{background:color-mix(in srgb, var(--ink) 6%, var(--panel))}
.lb td.name a{color:var(--ink);text-decoration:none}
.lb td.name a:hover,.lb td.name a:focus-visible{text-decoration:underline}

/* ───── Side-by-side comparison (compare.html): same sweater banner and rows as the pick sheet ───── */
.h2h{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;margin-top:8px}
.h2h .side{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.h2h .them{text-align:right;align-items:flex-end}
.h2h .who{display:inline-flex;align-items:center;gap:8px;max-width:100%;font:600 1.05rem var(--display);letter-spacing:.04em;text-transform:uppercase;color:color-mix(in srgb, var(--board-ink) 85%, transparent)}
.h2h .whoname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2h .who .avatar{border-width:2px}
.h2h b{font:700 clamp(2.6rem,9vw,3.8rem)/1 var(--display);font-variant-numeric:tabular-nums;margin-top:4px}
.h2h .detail{font:italic .8rem var(--serif);color:color-mix(in srgb, var(--board-ink) 72%, transparent);margin-top:4px}
.h2h .vs{font:700 1rem var(--display);color:var(--title);text-transform:uppercase;letter-spacing:.14em}
.h2h[data-lead="me"] .me b,.h2h[data-lead="them"] .them b{color:var(--title)}
.cmp-links{margin-top:8px}
.sh-link{text-decoration:none}
.sh-link::after{content:none}
.sh-link.ghost{display:inline-flex;align-items:center;font:600 .75rem var(--display);letter-spacing:.12em;text-transform:uppercase;padding:2px 11px;border-radius:999px;
  color:var(--board-ink);border:1.5px solid color-mix(in srgb, var(--board-ink) 45%, transparent)}
.sh-link:hover{filter:brightness(1.1);text-decoration:underline}

.cmp-head,.cmp-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center}
.cmp-head{margin-top:14px;padding:0 12px 6px;font:600 .78rem var(--display);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);border-bottom:4px double var(--ink)}
.cmp-head span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comparepage .month{margin-top:20px}
.cmp-row{padding:9px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
.cmp-row.is-home{box-shadow:inset 5px 0 0 var(--edge)}
.cmp-game{display:flex;gap:12px;align-items:center;min-width:0}
.cmp-game .gdate{flex:none;width:6.2rem}
.cmp-game .opp{min-width:0}
.final[data-r="live"]{background:var(--gold);color:#3A2A08}
.cmp-cell{display:flex;align-items:center;gap:8px;min-height:2.5rem;padding:4px 8px;border-radius:6px;border:2px solid transparent}
.cmp-cell.diff{border-color:color-mix(in srgb, var(--ink) 25%, transparent);border-style:dashed}
.cmp-row[data-winner="me"] .cmp-cell[data-side="me"],.cmp-row[data-winner="them"] .cmp-cell[data-side="them"]{background:color-mix(in srgb, var(--gold) 16%, transparent);border-color:var(--gold);border-style:solid}
.cmp-who{display:none}
.cpick{display:inline-flex;align-items:center;justify-content:center;gap:1px;min-width:2.6rem;height:1.9rem;padding:0 6px;border-radius:4px;background:var(--board);color:var(--board-ink);box-shadow:inset 0 -3px 0 var(--stripe);font:600 .9rem var(--display);white-space:nowrap}
[data-scheme="dark"] .cpick{outline:1.5px solid var(--stripe);outline-offset:-1.5px}
.cpick.none{background:transparent;color:var(--muted);box-shadow:none;border:2px solid var(--line)}
.gpick{font:600 .95rem var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.gpick small{font:inherit}
.hitmark::after{content:" ✓";color:var(--win)}
.missmark::after{content:" ✗";color:var(--loss)}
.cpick.missmark{opacity:.6}
.cmp-cell .ptsbadge{margin:0 0 0 auto}
.locknote{font:italic .82rem var(--serif);color:var(--muted)}
@media (max-width:760px){
  .h2h{gap:8px}
  .h2h .who{font-size:.9rem;gap:6px}
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr 1fr;row-gap:6px;column-gap:8px;padding:8px 10px}
  .cmp-game{grid-column:1 / -1;gap:10px}
  .cmp-game .gdate{width:auto}
  .cmp-cell{flex-wrap:wrap;gap:4px 6px;padding:5px 6px;align-content:flex-start}
  .gpick small{display:none}
  .cmp-cell .ptsbadge{min-width:1.9rem;padding:2px 4px}
  .cmp-who{display:block;flex-basis:100%;font:600 .66rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:420px){ .h2h .detail{display:none} .sh-seg button[data-short]{font-size:0} .sh-seg button[data-short]::after{content:attr(data-short);font-size:.74rem} }
/* ───── Avatars: sweater (team + number), photo, or initial ───── */
.avatar{--av-size:32px;width:var(--av-size);height:var(--av-size);flex:none;box-sizing:border-box;border-radius:50%;overflow:hidden;
  display:inline-grid;place-items:center;vertical-align:middle;background:var(--wool);color:#9B1C1F;
  border:max(2px,calc(var(--av-size) * .045)) solid var(--av-ring,var(--gold));
  font:600 calc(var(--av-size) * .5)/1 var(--display);text-transform:uppercase;user-select:none}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-sweater{background:#F4EDDC}
.avatar-sweater svg{width:94%;height:94%;display:block;margin-top:6%}
.avatar-sweater text{font:600 30px "Oswald",sans-serif;letter-spacing:-.02em}
.avatar-empty svg{width:62%;height:62%;fill:none;stroke:#1C2B45;stroke-width:2;stroke-linecap:round}
[data-scheme="dark"] .avatar:not(.avatar-sweater){background:#1C2B45;color:var(--wool)}
[data-scheme="dark"] .avatar-empty svg{stroke:var(--wool)}

/* Me tab: your picture; the ring shows whether you're on your profile */
.tabbar .me-badge{border-color:currentColor;border-width:2px}
.tabbar a.tab-me{color:rgba(239,230,210,.75)}
.tabbar a.tab-me[aria-current="page"]{color:var(--gold)}

/* Top-bar account button: picture + username */
.navaccount.has-avatar{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 2px}
.navaccount.has-avatar .avatar{border-width:1.5px}
.navaccount-name{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Leaderboard name cells */
.lb-who{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;vertical-align:middle}
.lb-who .avatar{border-width:1.5px}
.lb-who > span:last-child{min-width:0}
.lb td.name a.lb-who:hover,.lb td.name a.lb-who:focus-visible{text-decoration:none}
.lb td.name a.lb-who:hover > span:last-child,.lb td.name a.lb-who:focus-visible > span:last-child{text-decoration:underline}

/* ───── Profile page ───── */
.profilepage .wrap{max-width:1040px}
.pf-banner{margin-top:8px;background:var(--navy);color:var(--wool);border-radius:8px;overflow:hidden}
[data-scheme="dark"] .pf-banner{background:#14203A}
.pf-banner-in{display:flex;gap:18px;align-items:center;padding:18px 20px;flex-wrap:wrap}
.pf-avatar{flex:none;display:flex}
.pf-avatar .avatar:not(.avatar-sweater):not(.avatar-photo),.av-preview .avatar:not(.avatar-sweater):not(.avatar-photo){
  font:400 calc(var(--av-size) * .62)/1 "Yellowtail",cursive;text-transform:none}
.pf-name{font:clamp(2.2rem,6vw,3rem)/1.1 "Yellowtail",cursive;color:var(--wool);word-break:break-word}
.pf-est{font:600 .8rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:#B8C0CF;margin-top:6px}
.pf-banner::after{content:"";display:block;height:14px;background:linear-gradient(to bottom,#E8463F 0 5px,transparent 5px 9px,var(--wool) 9px 14px)}
.pf-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:18px}
@media (max-width:760px){ .pf-grid{grid-template-columns:1fr} }
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:900px){ .pf-stats{grid-template-columns:repeat(2,1fr)} }
.pf-stat{background:var(--panel);border:2px solid var(--ink);border-radius:8px;padding:10px 12px}
.pf-stat b{display:block;font:600 2rem/1.05 var(--display);font-variant-numeric:tabular-nums}
.pf-stat small{font:italic .8rem var(--serif);color:var(--muted)}
.pf-label{font:600 .75rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pf-card{background:var(--panel);border:2px solid var(--ink);border-radius:8px;padding:14px 16px}
.pf-card + .pf-card{margin-top:14px}
.pf-card h2{font:600 1.05rem var(--display);letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px;padding-bottom:6px;border-bottom:4px double var(--ink)}
.pf-row{padding:12px 0;border-bottom:1px solid var(--line)}
.pf-row:last-child{border-bottom:0;padding-bottom:0}
.pf-row:first-of-type{padding-top:0}
.pf-row .field{margin:8px 0 0}
.pf-row .form-actions{margin-top:8px}
.pf-row .formmsg{margin-top:8px}
.pf-value{font-weight:600;margin-top:4px;word-break:break-word}
.lookseg,.avseg{display:inline-grid;grid-template-columns:repeat(3,auto);margin-top:8px;border:2px solid var(--ink);border-radius:4px;overflow:hidden}
.avseg{grid-template-columns:repeat(2,auto);margin-top:0}
.lookseg button,.avseg button{border:0;background:transparent;color:var(--ink);font:600 .8rem var(--display);letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;cursor:pointer}
.lookseg button[aria-pressed="true"],.avseg button[aria-pressed="true"]{background:var(--btn,var(--board));color:var(--btn-ink,#fff)}
/* Profile picture picker */
.av-pick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;margin-top:8px}
.av-preview{display:flex}
@media (max-width:480px){ .av-pick{grid-template-columns:1fr;gap:10px} }
.av-fields{display:grid;grid-template-columns:minmax(0,1fr) 5.5em;gap:8px;margin-top:10px}
.av-fields .field{margin:0}
.av-photo .hint{margin:10px 0 0;font-size:.85rem}
.av-pick .form-actions{margin-top:10px}
.av-pick .linkbtn{margin-top:8px}
.pf-link{display:flex;justify-content:space-between;align-items:center;color:var(--ink);text-decoration:none;font:600 .9rem var(--display);letter-spacing:.1em;text-transform:uppercase}
.pf-link:hover{text-decoration:underline}
.pf-danger{color:var(--loss)}
/* Another player's profile: read-only, no settings column */
.pf-public .pf-settings-col{display:none}
.pf-public .pf-grid{grid-template-columns:1fr}
.pf-signedout{max-width:34rem;margin:28px auto 0;text-align:center}
.pf-signedout .form-actions{justify-content:center}
/* ───── Leaderboard header logo: the real logo on the coloured header ───── */
/* script in the team's readable accent, light tape, outline in the header colour */
.lb-brand{--logo-ink:var(--title);--logo-bg:var(--board);--logo-tape:#F3EEE2;--logo-wrap:var(--board);--logo-puck-rim:#EFE6D2;margin-right:6px}
html.neutral .lb-brand{--logo-ink:#E8463F}
.lb-board .lb-brand .logo-svg{height:46px}
@media (max-width:560px){ .lb-board .lb-brand .logo-svg{height:38px} }

/* Phones and the app: no account button in the top bar; the Me tab opens your profile (or sign-in) */
@media (max-width:560px){ .topnav > a.navaccount{display:none} }
/* ───── Home: "Since your last visit" recap (in the account box) ───── */
.recap{margin:12px 0 4px;padding:10px 12px 12px;border:2px solid var(--ink);border-left:6px solid var(--gold);border-radius:8px;background:var(--bg)}
.recap .acct-label{margin:0 0 8px}
.recap-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.recap-stats div{display:flex;flex-direction:column;line-height:1.05}
.recap-stats b{font:700 1.7rem var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.recap-stats b small{font:600 .8rem var(--display);vertical-align:.45em}
.recap-stats b small.up{color:var(--win)} .recap-stats b small.down{color:var(--loss)}
.recap-stats span{font:italic .78rem var(--serif);color:var(--muted);margin-top:3px}
.recap-note{margin:8px 0 0;font-size:.85rem;color:var(--muted)}

/* ───── Home: "Up next on your sheets" quick picks (same rows as the pick sheet) ───── */
.uprows{background:var(--panel);border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.uprows .game:last-child{border-bottom:0}
.upgame{--edge:var(--board)}
[data-scheme="dark"] .upgame{--edge:var(--stripe)}
.upname{color:var(--ink);font-weight:600;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upname:hover{text-decoration:underline}
.upstate{margin-top:3px;font:italic .76rem var(--serif);color:var(--muted)}
.upstate[data-s="ok"]{color:var(--win)} .upstate[data-s="err"]{color:var(--loss)}
.upstate[data-s="todo"]{color:var(--goal);font-style:normal;font:600 .7rem var(--display);letter-spacing:.1em;text-transform:uppercase}
.upnext-hint{margin:8px 0 0;font:italic .82rem var(--serif);color:var(--muted)}
.upnext-empty{margin:0;padding:14px;color:var(--muted)}
/* ───── Badges: felt sweater patches ───── */
.badge{display:inline-block;width:var(--bd-size,56px);height:var(--bd-size,56px);flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.badge svg{display:block;width:100%;height:100%}
.badge.locked{filter:grayscale(1);opacity:.32}
.badge-count{font:italic .85rem var(--serif);letter-spacing:0;text-transform:none;color:var(--muted);margin-left:6px}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 12px}
.badge-item{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:10px;align-items:start}
.badge-item .badge{grid-row:1 / span 3}
.badge-item .bprog{margin-top:6px}
.badge-item b{font:600 .9rem var(--display);letter-spacing:.08em;text-transform:uppercase;line-height:1.2;margin-top:4px}
.badge-item small{font:italic .76rem/1.35 var(--serif);color:var(--muted);margin-top:2px}
.badge-item.is-locked b{color:var(--muted)}

/* "New badge" pop-up (home page) */
.badge-toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:12px;
  width:min(440px,calc(100% - 24px));padding:10px 12px;background:var(--panel);color:var(--ink);border:2px solid var(--ink);border-left:6px solid var(--gold);border-radius:8px;
  box-shadow:0 14px 34px rgba(0,0,0,.28);animation:toastin .35s ease-out;transition:opacity .5s,transform .5s}
.badge-toast.out{opacity:0;transform:translate(-50%,12px)}
.badge-toast-text{display:grid;min-width:0;flex:1}
.badge-toast-text small{font:600 .7rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--goal)}
.badge-toast-text b{font:600 1.05rem var(--display);letter-spacing:.04em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge-toast-text a{font:italic .82rem var(--serif);color:var(--ink)}
.badge-toast-x{align-self:flex-start;border:0;background:transparent;color:var(--muted);font:600 1.3rem/1 var(--display);cursor:pointer;padding:0 4px}
@keyframes toastin{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:560px){ .badge-toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))} }
@media (prefers-reduced-motion:reduce){ .badge-toast{animation:none} }

/* Up next: link to turn on reminders */
.upnext-hint a{color:var(--ink);font-style:normal;font-weight:600}
/* ───── Home: Today's games as a sideways strip of game days (swipe or ‹ ›) ───── */
.daynav{display:flex;align-items:center;gap:8px}
.daybtn{width:2.1rem;height:2.1rem;border:2px solid var(--ink);border-radius:4px;background:transparent;color:var(--ink);font:600 1.3rem/1 var(--display);cursor:pointer;padding:0 0 2px}
.daybtn:hover:not(:disabled){background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.daybtn:disabled{opacity:.3;cursor:default}
.daystrip{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overflow-anchor:none;transition:height .2s ease}
.daystrip::-webkit-scrollbar{display:none}
.daypanel{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
@media (prefers-reduced-motion:reduce){ .daystrip{transition:none} }
.day-empty{margin:0;padding:22px 16px;border:2px dashed var(--line);border-radius:8px;text-align:center;font:italic .95rem var(--serif);color:var(--muted)}

/* ───── Home account box: a navy sweater banner on top (sleeve stripes, hem), panels below ───── */
.acct-card{padding:0 0 20px;overflow:hidden}
.acct-card > :not(.acct-banner){margin-left:20px;margin-right:20px}
.acct-card > :not(.acct-banner):not(.hidden):not(.acct-cta){margin-top:16px}
.acct-banner{position:relative;display:flex;align-items:center;gap:14px;min-height:92px;padding:16px 18px 26px 40px;background:var(--navy);color:var(--wool)}
[data-scheme="dark"] .acct-banner{background:#14203A}
.acct-banner::before{content:"";position:absolute;left:0;top:0;bottom:12px;width:24px;
  background:linear-gradient(to right,transparent 0 5px,#E8463F 5px 10px,transparent 10px 14px,var(--wool) 14px 19px,transparent 19px)}
.acct-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;
  background:linear-gradient(to bottom,#E8463F 0 4px,transparent 4px 7px,var(--wool) 7px 12px)}
.acct-face{display:flex;flex:none}
.acct-face .avatar:not(.avatar-sweater):not(.avatar-photo){font:400 calc(var(--av-size) * .62)/1 "Yellowtail",cursive;text-transform:none}
.acct-head{display:grid;min-width:0}
.acct-kicker{font:600 .72rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.acct-title{font:2.1rem/1.15 "Yellowtail",cursive;color:var(--wool);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 .35em 2px 0}   /* room for the script's last stroke */
/* the panels' own headings now live in the banner; keep them for screen readers only */
.acct-card h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.acct-card .acct-cta{margin-top:12px}

/* Current Picks rows: a team-colour edge, team names in the display face */
.mysheets a{box-shadow:inset 5px 0 0 var(--t-board,transparent);padding-left:14px}
[data-scheme="dark"] .mysheets a{box-shadow:inset 5px 0 0 var(--t-stripe,transparent)}
.mysheets a > span:not(.sw):not(.meta){font:500 .98rem var(--display);letter-spacing:.04em;text-transform:uppercase}
/* ───── Badge progress bars (profile badges and "Badges in reach" on the home page) ───── */
.bprog{--bp:#1C2B45}
.bprog[data-ring="red"]{--bp:#9B1C1F} .bprog[data-ring="gold"]{--bp:#C08A2A}
[data-scheme="dark"] .bprog{--bp:#EFE6D2} [data-scheme="dark"] .bprog[data-ring="red"]{--bp:#E8463F} [data-scheme="dark"] .bprog[data-ring="gold"]{--bp:#D9A33A}
.bprog.compact{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}
.bprog-body{display:grid;gap:4px;min-width:0}
.bprog-body b{font:600 .85rem var(--display);letter-spacing:.08em;text-transform:uppercase}
.bprog-bar{height:9px;border-radius:999px;background:color-mix(in srgb, var(--ink) 12%, transparent);overflow:hidden}
.bprog-bar i{display:block;height:100%;min-width:0;border-radius:inherit;background:var(--bp);transition:width .4s ease}
.bprog small{font:italic .76rem/1.3 var(--serif);color:var(--muted)}
@media (prefers-reduced-motion:reduce){ .bprog-bar i{transition:none} }

/* Home account box: Pick Now (never picked yet) and Badges in reach */
.acct-picknow{display:flex;width:100%;box-sizing:border-box;margin-top:4px;padding:12px 18px;font-size:1.1rem}
.acct-reach .acct-label{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.acct-reach .acct-label a{font:italic .82rem var(--serif);letter-spacing:0;text-transform:none;color:var(--ink)}
.reach-list{display:grid;gap:12px}
/* Upcoming Picks: a navy day header with a red-and-cream hem above each day's games */
.upday{position:relative;padding:8px 14px 13px;background:var(--navy);color:var(--wool);font:600 .8rem var(--display);letter-spacing:.16em;text-transform:uppercase}
[data-scheme="dark"] .upday{background:#14203A}
.upday::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(to bottom,#E8463F 0 2.5px,transparent 2.5px 3.5px,var(--wool) 3.5px 6px)}
.uprows .upgame .gdate b{font:600 .95rem var(--display);letter-spacing:.02em}
@media (max-width:760px){ .uprows .upgame .gdate b{font:italic .78rem var(--serif);letter-spacing:0} }
/* ───── Leaderboard banner: the pick sheet's sweater banner, keeping the script headline ───── */
.lbhead .lb-headline{font:clamp(2.1rem,5.5vw,3.2rem)/1.1 "Yellowtail",cursive;letter-spacing:0;word-spacing:.12em;color:var(--board-ink);margin:4px 0 0;padding-right:.3em}
.lbhead .sh-chips{margin-top:12px}
html.lbpage.neutral .lbhead{--stripe:var(--red)}   /* All teams: brand red sleeve and hem stripes */
[data-scheme="dark"] .lbhead{box-shadow:0 0 0 2px var(--ink)}
.lbpage .lb-layout{margin-top:22px}
/* ───── Rules page: sweater banner, felt medals, numbered patches, sweater-band sections ───── */
.rules-banner{margin-top:4px}
.rulespage .points-strip{margin-top:16px}
.rulespage .points-strip div{background:var(--panel);border:2px solid var(--ink);border-radius:8px;padding:12px 14px;color:var(--ink)}
.rulespage .points-strip span{display:grid;font:600 .95rem var(--display);letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.rulespage .points-strip small{font:italic .8rem var(--serif);letter-spacing:0;text-transform:none;color:var(--muted);margin-top:2px}
.medal{flex:none;display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:50%;background:var(--navy);color:var(--wool)!important;
  font:700 1.35rem var(--display)!important;outline:1.5px dashed rgba(255,255,255,.75);outline-offset:-5px}
.medal.red{background:#9B1C1F} .medal.gold{background:#C08A2A;color:#2A1C02!important}
.rulespage .basics{counter-reset:rule}
.rulespage .basics li{position:relative;counter-increment:rule;padding:12px 14px 12px 60px;border:2px solid var(--ink);border-radius:8px}
.rulespage .basics li::before{content:counter(rule);position:absolute;left:12px;top:10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:var(--wool);font:700 1rem var(--display);outline:1.2px dashed rgba(255,255,255,.75);outline-offset:-4px}
[data-scheme="dark"] .rulespage .basics li::before,[data-scheme="dark"] .medal:not(.red):not(.gold){background:#14203A;box-shadow:0 0 0 1.5px var(--wool)}
.rulespage details{border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.rulespage summary{font:600 1rem var(--display);letter-spacing:.08em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.rulespage summary::-webkit-details-marker{display:none}
.rulespage summary::after{content:"+";font:700 1.3rem/1 var(--display)}
.rulespage details[open] > summary{position:relative;background:var(--navy);color:var(--wool);border-bottom:0;padding-bottom:18px}
[data-scheme="dark"] .rulespage details[open] > summary{background:#14203A}
.rulespage details[open] > summary::after{content:"–"}
.rulespage details[open] > summary::before{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(to bottom,#E8463F 0 2.5px,transparent 2.5px 3.5px,var(--wool) 3.5px 6px)}
.rulespage #faq summary{font-size:.9rem;letter-spacing:.04em}
/* ───── Sharing: Share buttons, Invite friends, and the share box for browsers without a share sheet ───── */
.sharebtn{display:inline-flex;align-items:center;gap:6px}
.sharebtn svg{width:1.05em;height:1.05em;flex:none}
.linkbtn.sharebtn{text-decoration:none;font:600 .78rem var(--display);letter-spacing:.12em;text-transform:uppercase;padding:4px 0}
.linkbtn.sharebtn span{text-decoration:underline;text-underline-offset:3px}
.recap-share{margin-top:6px}
.recap-share:empty{display:none}
.acct-invite{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;padding-top:14px;border-top:1px dashed var(--line)}
.acct-invite p{margin:0;font:italic .9rem var(--serif);color:var(--muted)}
.badge-toast-acts{display:flex;align-items:center;gap:14px;margin-top:2px}
.badge-toast-acts .linkbtn{color:var(--ink)}
.badge-item .badge-share{grid-column:2;justify-self:start;margin-top:4px}
.pf-acts{margin-left:auto}
.pf-acts:empty{display:none}
.pf-invite{background:var(--wool);border-color:var(--wool);color:var(--navy)}
.pf-public .pf-acts{display:none}
.you .you-share{margin-top:14px}
.you .you-invite{display:flex;margin:10px auto 0;color:var(--board-ink)}
.sharesheet{width:min(520px,calc(100% - 32px));padding:0;border:2px solid var(--ink);border-radius:8px;background:var(--panel);color:var(--ink);box-shadow:0 18px 44px rgba(0,0,0,.35)}
.sharesheet::backdrop{background:rgba(15,24,40,.55)}
.ss-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:10px 14px 16px;background:var(--navy);color:var(--wool);
  font:600 .9rem var(--display);letter-spacing:.16em;text-transform:uppercase}
.ss-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:linear-gradient(to bottom,#E8463F 0 3px,transparent 3px 4px,var(--wool) 4px 7px)}
.ss-x{border:0;background:transparent;color:var(--wool);font:600 1.5rem/1 var(--display);cursor:pointer;padding:0 4px}
.ss-body{padding:14px}
.ss-body img{display:block;width:100%;border-radius:6px;border:1px solid var(--line)}
.ss-body p{margin:12px 0;font-size:.9rem;overflow-wrap:anywhere}
.ss-acts{display:flex;flex-wrap:wrap;gap:8px}
.ss-acts .btn{padding:7px 12px;font-size:.8rem}
.ss-status{display:block;min-height:1.2em;margin-top:8px;font:italic .82rem var(--serif);color:var(--muted)}

/* ───── Leaderboard: Season / Month / Week switch, and ‹ › for earlier months and weeks ───── */
.lb-when{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px}
.lb-period{display:inline-flex;border:1.5px solid color-mix(in srgb, var(--board-ink) 45%, transparent);border-radius:999px;padding:2px}
.lb-period button{border:0;background:transparent;color:var(--board-ink);font:600 .75rem var(--display);letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border-radius:999px;cursor:pointer}
.lb-period button[aria-pressed="true"]{background:var(--title);color:var(--board)}
.lb-period button:focus-visible,.lb-step button:focus-visible{outline:3px solid var(--alarm);outline-offset:1px}
.lb-step{display:inline-flex;align-items:center;gap:8px;font:500 .9rem "Barlow",sans-serif;font-variant-numeric:tabular-nums}
.lb-step.hidden{display:none}
.lb-step button{width:1.9rem;height:1.9rem;border:1.5px solid color-mix(in srgb, var(--board-ink) 45%, transparent);border-radius:4px;background:transparent;color:var(--board-ink);
  font:600 1.2rem/1 var(--display);cursor:pointer;padding:0 0 2px}
.lb-step button:disabled{opacity:.3;cursor:default}

/* ───── Privacy & Terms page: the Rules page's look, with every section open ───── */
.legal-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.legal-jump a{font:600 .78rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:6px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--panel)}
.legal-jump a:hover{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.legal section{scroll-margin-top:16px}
.legal h3{font:600 1.05rem var(--display);letter-spacing:.06em;text-transform:uppercase;margin:24px 0 6px}
.legal-short{margin-top:12px;padding:4px 16px 8px;background:var(--panel);border:2px solid var(--ink);border-left:6px solid var(--gold);border-radius:8px}
.legal-short h3{margin-top:12px}
.legal-agree{margin:10px 0 0;font-size:.82rem}
.legal-agree a{color:var(--ink)}

/* ───── Badges page: groups of felt patches under navy sweater bands; tap one for the details ───── */
.badges-banner{margin-top:4px}
.badges-banner p a{color:var(--wool)}
.bb-back{display:inline-block;margin-top:12px;font:600 .75rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--wool);text-decoration:none;
  padding:4px 12px;border:1.5px solid rgba(239,230,210,.55);border-radius:999px}
.bb-back:hover{background:var(--wool);color:var(--navy)}
.bfilter{display:inline-flex;margin-top:16px;border:2px solid var(--ink);border-radius:999px;padding:2px;background:var(--panel)}
.bfilter.hidden{display:none}
.bfilter button{border:0;background:transparent;color:var(--ink);font:600 .78rem var(--display);letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;border-radius:999px;cursor:pointer}
.bfilter button[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink)}
.bgroup{margin-top:18px;background:var(--panel);border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.bgroup-head{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0;padding:9px 14px 15px;background:var(--navy);color:var(--wool);
  font:600 .9rem var(--display);letter-spacing:.14em;text-transform:uppercase}
[data-scheme="dark"] .bgroup-head{background:#14203A}
.bgroup-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(to bottom,#E8463F 0 2.5px,transparent 2.5px 3.5px,var(--wool) 3.5px 6px)}
.bgroup-head small{font:italic .82rem var(--serif);letter-spacing:0;text-transform:none;color:var(--gold)}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:4px;padding:10px 8px}
.btile{display:grid;justify-items:center;align-content:start;gap:6px;padding:10px 6px;border:0;border-radius:8px;background:transparent;color:var(--ink);cursor:pointer;text-align:center}
.btile:hover{background:color-mix(in srgb, var(--ink) 7%, transparent)}
.btile:focus-visible{outline:3px solid var(--alarm);outline-offset:1px}
.btile b{font:600 .76rem/1.2 var(--display);letter-spacing:.07em;text-transform:uppercase}
.btile:not(.is-earned) b{color:var(--muted)}
.btile-bar{display:block;width:70%;height:5px;border-radius:999px;background:color-mix(in srgb, var(--ink) 12%, transparent);overflow:hidden;--bp:#1C2B45}
.btile-bar[data-ring="red"]{--bp:#9B1C1F} .btile-bar[data-ring="gold"]{--bp:#C08A2A}
[data-scheme="dark"] .btile-bar{--bp:#EFE6D2} [data-scheme="dark"] .btile-bar[data-ring="red"]{--bp:#E8463F} [data-scheme="dark"] .btile-bar[data-ring="gold"]{--bp:#D9A33A}
.btile-bar i{display:block;height:100%;background:var(--bp);border-radius:inherit}
.bdlg{width:min(400px,calc(100% - 32px));padding:0;border:2px solid var(--ink);border-radius:8px;background:var(--panel);color:var(--ink);box-shadow:0 18px 44px rgba(0,0,0,.35)}
.bdlg::backdrop{background:rgba(15,24,40,.55)}
.bdlg-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:10px 14px 16px;background:var(--navy);color:var(--wool);
  font:600 .8rem var(--display);letter-spacing:.16em;text-transform:uppercase}
.bdlg-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:linear-gradient(to bottom,#E8463F 0 3px,transparent 3px 4px,var(--wool) 4px 7px)}
.bdlg-body{display:grid;justify-items:center;gap:6px;padding:18px 20px 20px;text-align:center}
.bdlg-body h3{margin:6px 0 0;font:700 1.5rem var(--display);letter-spacing:.04em;text-transform:uppercase}
.bdlg-state{font:600 .72rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bdlg-state.is-earned{color:var(--win)}
.bdlg-body p{margin:4px 0 6px;font:italic .95rem/1.5 var(--serif)}
.bdlg-body .bprog{width:100%;text-align:left}
.bdlg-body .sharebtn{margin-top:10px}
/* Profile: trophy case (5 rarest), Next up, and a link to the Badges page */
.pf-sub{font:600 .75rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.pf-badges > .pf-sub:first-child{margin-top:0}
.trophy-case{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.trophy{display:grid;justify-items:center;gap:5px;text-decoration:none;color:var(--ink);text-align:center}
.trophy span{font:600 .68rem/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase}
.trophy .badge{width:min(64px,100%);height:auto;aspect-ratio:1}
.pf-allbadges{display:flex;margin-top:16px}

/* ───── Intermission: sweater banner, the game in a navy-banded card, leaders and badges side by side ───── */
.bk-banner{margin-top:4px}
.bk-banner p b{color:var(--wool);font-style:normal}
.bk-card{margin-top:18px;background:var(--panel);border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.bk-head{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0;padding:9px 14px 15px;background:var(--navy);color:var(--wool);
  font:600 1rem var(--display);letter-spacing:.16em;text-transform:uppercase}
[data-scheme="dark"] .bk-head{background:#14203A}
.bk-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(to bottom,#E8463F 0 2.5px,transparent 2.5px 3.5px,var(--wool) 3.5px 6px)}
.bk-head small{font:italic .9rem var(--serif);letter-spacing:0;text-transform:none;color:var(--gold)}
.bk-head small b{font:600 1.05rem var(--display);color:var(--wool);font-style:normal}
.bk-card .rinkwrap{border:0;border-radius:0;background:var(--navy)}
.bk-card .runbar{padding:10px 14px 12px;margin-top:0}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin-top:14px;align-items:start}
.bk-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.bk-list li{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 8px;border-radius:6px}
.bk-list li.hint{display:block;padding:4px 0}
.bk-list li.me{background:color-mix(in srgb, var(--gold) 22%, transparent)}
.bk-list .rk{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;font:600 .85rem var(--display);color:var(--ink)}
.bk-list .rk.r1{background:#C08A2A;color:#fff} .bk-list .rk.r2{background:#9AA6B2;color:#fff} .bk-list .rk.r3{background:#9B5B2E;color:#fff}
.bk-who{display:flex;align-items:center;gap:8px;min-width:0;color:var(--ink);text-decoration:none;font:600 .95rem "Barlow",sans-serif}
.bk-who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-who:hover span{text-decoration:underline}
.bk-list b{font:700 1.1rem var(--display);font-variant-numeric:tabular-nums}
.bk-you{margin:10px 0 0;font:italic .9rem var(--serif);color:var(--muted)}
.bk-badges .reach-list{gap:10px}
.bk-signin{margin:12px 0 0}
.bk-signin a{color:var(--ink);font-weight:600}
.bk-all{display:flex;margin-top:14px}