/* Carter Group Pick 'Em. A white scoreboard in the brand's black and gold.
   One working column; each matchup is two team tiles facing each other. */
:root {
  --bg: #FFFFFF; --surface: #FFFFFF; --raised: #F4F3EF; --ink: #0A0A0A; --muted: #5C5F62; --line: #D9D8D3;
  --accent: #AD8330; --accent-ink: #84611C; --on-accent: #0A0A0A;
  --good: #17683F; --good-bg: #DDF0E4; --bad: #A03232; --bad-bg: #F7E2E0; --quiet: #F4F3EF; --me-bg: #F8F1DF;
  --inv-bg: #0A0A0A; --inv-ink: #FFFFFF; --inv-muted: #C8C7C2; --inv-accent: #D2A957;
  --logo-w: none; --logo-b: block;
  --display: 'Big Shoulders Display', 'Barlow Condensed', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
/* One look by choice: the Carter Group brand is black and gold on white, so the page stays white in every viewer theme. */

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5 }
.wrap { max-width: 940px; margin: 0 auto; padding-inline: 16px; padding-block: 28px 72px; display: flex; flex-direction: column; gap: 28px }
button, input, select { font: inherit; color: inherit }
button { cursor: pointer }
button:disabled { cursor: default }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600 }

/* header */
.top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px }
.brand { display: flex; flex-direction: column; gap: 16px; min-width: 0; flex: 1 1 100% }
.logo img { height: 52px; width: auto; max-width: 100% }
.logo img.w { display: var(--logo-w) }
.logo img.b { display: var(--logo-b) }
.brand h1 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 6vw, 58px); line-height: 0.9; letter-spacing: 0.01em }
.brand h1 { flex: 0 0 auto }
.brand h1 .pe { display: block; height: clamp(150px, 24vw, 220px); width: auto; max-width: 100% }
.hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px }
@media (min-width: 900px) { .hd { flex-wrap: nowrap } .hd .wk { align-items: flex-end } }
.wk { display: flex; flex-direction: column; align-items: flex-start; gap: 10px }
.wkrow { display: flex; align-items: stretch; gap: 8px }
.wkbadge { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 112px; padding: 12px 24px 10px; background: var(--accent); color: var(--on-accent) }
.wknum { font-family: var(--display); font-weight: 900; font-size: clamp(52px, 7vw, 78px); line-height: 0.86; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap }
.wkstate { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase }
.wkb { width: 64px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid transparent; background: none }
.wkb svg { width: 34px; height: 34px }
.wkb:not(:disabled):hover { border-color: var(--ink) }
.wkb:disabled { opacity: 0.3 }
@media (max-width: 680px) { .wkbadge { min-height: 76px; padding: 8px 18px } .wknum { font-size: 44px } .wkb { width: 54px } .wkb svg { width: 26px; height: 26px } }
.who { font-size: 14px; color: var(--muted) }
.who strong { color: var(--ink); font-weight: 700 }
.hash { height: 12px; background: repeating-linear-gradient(90deg, var(--muted) 0 2px, transparent 2px 16px); opacity: 0.45 }

/* tabs */
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.tabs a { text-decoration: none; display: flex; align-items: center; gap: 12px; min-height: 96px; padding: 16px 14px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; min-width: 0 }
.tabs a:hover { border-color: var(--ink) }
.tabs .ic { flex: 0 0 auto; display: flex; color: var(--accent-ink) }
.tabs .ic svg { width: 28px; height: 28px }
.tabs .tx { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.tabs .tt { font-family: var(--display); font-weight: 900; font-size: 20px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase }
.tabs .ts { font-size: 14px; line-height: 1.3; color: var(--muted); font-weight: 500 }
.tabs a[aria-current="page"] { background: var(--me-bg); border-color: var(--accent); color: var(--ink); box-shadow: inset 0 -5px 0 var(--accent) }
.tabs a[aria-current="page"] .ic { color: var(--accent-ink) }
.tabs a[aria-current="page"] .ts { color: var(--muted) }
@media (max-width: 860px) {
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .tabs a { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 112px; padding: 12px }
  .tabs .tt { font-size: 20px }
  .tabs .ts { font-size: 12px }
  .tabs .ic svg { width: 26px; height: 26px }
}

/* scoreboard summary */
.sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px }
.sum div { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--ink); padding: 10px 14px 8px; display: flex; flex-direction: column; min-width: 0 }
.sum .v { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.05; text-transform: uppercase; font-variant-numeric: tabular-nums; overflow-wrap: anywhere }
.sum .v.todo { color: var(--bad) }
.help { margin: 0; font-size: 15px; color: var(--muted); max-width: 72ch }
.notice { margin: 0; padding: 12px 14px; background: var(--bad-bg); color: var(--bad); font-size: 15px; font-weight: 600 }

/* games */
.slot { display: flex; flex-direction: column; gap: 8px }
.slot h2 { margin: 30px 0 4px; display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink) }
.slot h2::after { content: ""; flex: 1; height: 2px; background: var(--line) }
.games { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.game { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 10px 16px; align-items: center }
.teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch; min-width: 0 }
.at { align-self: center; font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: 0.08em; color: var(--muted) }
.team { display: flex; align-items: stretch; min-height: 68px; padding: 0; border: 1px solid var(--line); background: var(--surface); text-align: left; min-width: 0; overflow: hidden }
.team.home { flex-direction: row-reverse; text-align: right }
.team .blk { flex: 0 0 68px; display: flex; align-items: center; justify-content: center; background: var(--bk, var(--tc)); color: var(--bi, var(--ti)); font-family: var(--display); font-weight: 900; font-size: 27px; letter-spacing: 0.02em; box-shadow: inset 0 -7px 0 var(--ts) }
.team .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 6px 12px }
.team .city { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.team .nick { font-family: var(--display); font-weight: 800; font-size: 23px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.team .sc { align-self: center; padding: 0 14px; font-family: var(--display); font-weight: 900; font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums }
.team .ck { align-self: center; padding: 0 12px; display: none }
.game.need .team { border-style: dashed; border-color: var(--accent) }
.needs { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--accent-ink); white-space: nowrap }
.needs::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent) }
.team:not(:disabled):hover { border-color: var(--ink); border-style: solid }
.team[aria-pressed="true"] { background: var(--tc); border-color: var(--ink); color: var(--ti); box-shadow: inset 0 0 0 2px var(--ink), inset 0 -9px 0 var(--ts) }
.team[aria-pressed="true"] .blk { background: transparent; box-shadow: none }
.team[aria-pressed="true"] .city { color: var(--ti); opacity: 0.88 }
.team[aria-pressed="true"] .ck { display: block }
.team.plain[aria-pressed="true"] { background: var(--me-bg); color: var(--ink); border-color: var(--accent); border-bottom-width: 6px; box-shadow: inset 0 0 0 1px var(--accent) }
.team.plain[aria-pressed="true"] .blk { background: var(--accent); color: var(--on-accent) }
.team.plain[aria-pressed="true"] .city { color: var(--muted); opacity: 1 }
.team.plain[aria-pressed="true"] .ck { color: var(--accent-ink) }
.game.picked:not(.done) .team[aria-pressed="false"] { opacity: 0.6 }
.game.done .team.lost .sc, .game.done .team.lost .nick { color: var(--muted) }
.team .ri { align-self: center; display: flex; color: var(--good) }
.team.res-no .ri { color: var(--bad) }
.team[aria-pressed="true"].res-ok, .team[aria-pressed="true"].res-no { background: var(--surface); color: var(--ink) }
.team[aria-pressed="true"].res-ok { border-color: var(--good); border-bottom-width: 6px; box-shadow: inset 0 0 0 1px var(--good) }
.team[aria-pressed="true"].res-no { border-color: var(--bad); border-bottom-width: 6px; box-shadow: inset 0 0 0 1px var(--bad) }
.team[aria-pressed="true"].res-ok .blk, .team[aria-pressed="true"].res-no .blk { background: var(--bk, var(--tc)); color: var(--bi, var(--ti)) }
.team[aria-pressed="true"].res-ok .city, .team[aria-pressed="true"].res-no .city { color: var(--muted); opacity: 1 }
.meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap }
.mult { display: flex; gap: 4px; margin-left: auto }
.mult button { min-width: 48px; min-height: 46px; border: 1px solid var(--line); background: var(--surface); font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--muted) }
.mult button[aria-pressed="true"] { background: var(--raised); color: var(--ink); border-color: var(--muted) }
.mult button.hot[aria-pressed="true"] { background: var(--inv-bg); color: var(--inv-accent); border-color: var(--inv-bg) }
.mult button:disabled { opacity: 0.55 }
.mult button.hot:disabled[aria-pressed="true"] { opacity: 1 }
.chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; background: var(--raised); color: var(--muted) }
.chip.good { background: var(--good-bg); color: var(--good) }
.chip.bad { background: var(--bad-bg); color: var(--bad) }
.chip.open { background: none; border: 1px solid var(--line) }
@media (max-width: 680px) {
  .game { grid-template-columns: minmax(0, 1fr); padding-bottom: 6px }
  .meta { justify-content: space-between }
  .team { min-height: 60px }
  .team .blk { flex-basis: 50px; font-size: 21px }
  .team .txt { padding: 4px 8px }
  .team .nick { font-size: 19px }
  .team .city { display: none }
  .team .sc { padding: 0 8px; font-size: 28px }
  .team .ck { display: none !important }
  .game.done .team .txt { display: none }
  .game.done .team { justify-content: space-between }
  .sum { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .sum div:last-child { grid-column: 1 / -1 }
  .sum .v { font-size: 30px }
}

.mult button.used { opacity: 0.45; text-decoration: line-through }
.uses { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px }
.uses > div { border: 1px solid var(--line); padding: 10px 14px; display: flex; flex-direction: column; gap: 6px }
.uses .chips { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--display); font-weight: 800; font-size: 19px }
.uses .chips > :not(em) { }
.uses .chips span { font-family: var(--body); font-weight: 500; font-size: 12px; color: var(--muted); margin: 0 10px 0 2px; align-self: center }
.uses .chips em { font-family: var(--body); font-style: normal; font-weight: 500; font-size: 15px; color: var(--muted) }
/* tiebreaker */
.tb { margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px }
.tb label { flex: 1 1 240px; min-width: 0; font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.15 }
.tb label span { display: block; font-family: var(--body); font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--muted); line-height: 1.5 }
.tb input { width: 120px; height: 56px; padding: 0 12px; border: 2px solid var(--muted); background: var(--bg); font-family: var(--display); font-weight: 900; font-size: 34px; text-align: center; font-variant-numeric: tabular-nums }
.tb input:disabled { border-color: var(--line); color: var(--muted) }
.tb .err { flex-basis: 100%; margin: 0; color: var(--bad); font-size: 14px; font-weight: 600 }

/* tables */
.scroll { position: relative; overflow-x: auto; border: 1px solid var(--line); background: var(--surface) }
table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums }
th, td { padding: 10px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap }
tr:last-child td { border-bottom: 0 }
thead th { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; vertical-align: bottom; background: var(--raised) }
thead th small { display: block; font-size: 10px; letter-spacing: 0.04em; font-weight: 500 }
td.num, th.num { text-align: right }
td.big { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1 }
td.c, th.c { text-align: center }
.grid td.c { min-width: 60px; font-family: 'Barlow Condensed', var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.02em }
.grid th:first-child, .grid td:first-child { position: sticky; left: 0; background: var(--surface); border-right: 1px solid var(--line) }
.grid thead th:first-child { background: var(--raised) }
tr.me td:first-child, tr.me td.big { color: var(--accent-ink) }
tr.me td { font-weight: 700 }
tr.me td:not(.ok):not(.no), .grid tr.me td:first-child { background: var(--me-bg) }
td.hid { color: var(--muted) }
td.ok { background: var(--good-bg); color: var(--good) }
td.no { background: var(--bad-bg); color: var(--bad) }
.grid td.c { position: relative }
.grid .mx { font-family: var(--body); font-weight: 800 }
.ms-plain .mx { font-size: 11px; margin-left: 2px; vertical-align: super }
.ms-badge .mx { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 5px; font-size: 11px; letter-spacing: -0.02em; vertical-align: middle; clip-path: polygon(50.0% 0.0%,52.4% 1.9%,54.4% 5.8%,56.3% 8.0%,58.8% 6.5%,61.9% 3.4%,64.7% 2.2%,66.5% 4.8%,67.2% 9.1%,68.4% 11.7%,71.2% 11.0%,75.1% 8.9%,78.2% 8.7%,79.1% 11.6%,78.5% 16.0%,78.9% 18.8%,81.8% 19.0%,86.1% 18.2%,89.1% 18.8%,89.1% 21.9%,87.3% 25.9%,86.8% 28.8%,89.5% 29.8%,93.9% 30.2%,96.5% 31.7%,95.6% 34.7%,92.7% 38.0%,91.4% 40.5%,93.7% 42.3%,97.8% 44.0%,99.9% 46.3%,98.1% 48.8%,94.4% 51.1%,92.4% 53.2%,94.0% 55.5%,97.4% 58.4%,98.7% 61.1%,96.3% 63.0%,92.1% 64.1%,89.6% 65.5%,90.4% 68.3%,92.8% 72.0%,93.3% 75.0%,90.4% 76.1%,86.0% 75.9%,83.2% 76.5%,83.3% 79.4%,84.5% 83.6%,84.0% 86.7%,80.9% 86.9%,76.8% 85.4%,73.9% 85.1%,73.1% 87.9%,73.0% 92.3%,71.7% 95.0%,68.7% 94.3%,65.2% 91.7%,62.5% 90.6%,60.9% 93.0%,59.5% 97.2%,57.5% 99.4%,54.8% 97.9%,52.2% 94.3%,50.0% 92.5%,47.8% 94.3%,45.2% 97.9%,42.5% 99.4%,40.5% 97.2%,39.1% 93.0%,37.5% 90.6%,34.8% 91.7%,31.3% 94.3%,28.3% 95.0%,27.0% 92.3%,26.9% 87.9%,26.1% 85.1%,23.2% 85.4%,19.1% 86.9%,16.0% 86.7%,15.5% 83.6%,16.7% 79.4%,16.8% 76.5%,14.0% 75.9%,9.6% 76.1%,6.7% 75.0%,7.2% 72.0%,9.6% 68.3%,10.4% 65.5%,7.9% 64.1%,3.7% 63.0%,1.3% 61.1%,2.6% 58.4%,6.0% 55.5%,7.6% 53.2%,5.6% 51.1%,1.9% 48.8%,0.1% 46.3%,2.2% 44.0%,6.3% 42.3%,8.6% 40.5%,7.3% 38.0%,4.4% 34.7%,3.5% 31.7%,6.1% 30.2%,10.5% 29.8%,13.2% 28.7%,12.7% 25.9%,10.9% 21.9%,10.9% 18.8%,13.9% 18.2%,18.2% 19.0%,21.1% 18.8%,21.5% 16.0%,20.9% 11.6%,21.8% 8.7%,24.9% 8.9%,28.8% 11.0%,31.6% 11.7%,32.8% 9.1%,33.5% 4.8%,35.3% 2.2%,38.1% 3.4%,41.2% 6.5%,43.7% 8.0%,45.6% 5.8%,47.6% 1.9%) }
.ms-badge .mx::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.55 }
.ms-badge td.c { padding-top: 6px; padding-bottom: 6px }
.ms-badge td.no .mx { background: rgba(160, 50, 50, 0.16); color: var(--bad) }
.ms-badge td.no .mx::before { opacity: 0.25 }
.ms-badge .x2 .mx, .ms-corner .x2 .mx { background: var(--ink); color: var(--inv-accent) }
.ms-badge .x3 .mx, .ms-corner .x3 .mx { background: var(--accent); color: var(--on-accent) }
.ms-corner .mx { position: absolute; top: 0; right: 0; padding: 1px 5px; font-size: 11px; line-height: 1.35 }
.ms-outline .mx { font-size: 11px; margin-left: 3px; vertical-align: super }
.ms-outline td.x2 { box-shadow: inset 0 0 0 2px var(--accent) }
.ms-outline td.x3 { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 5px var(--accent) }
.tag { display: inline-block; margin-left: 8px; padding: 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--accent); color: var(--on-accent) }
.sample { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px }
.panel { display: flex; flex-direction: column; gap: 14px }
/* home */
.hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px }
.hero .main { background: var(--raised); color: var(--ink); border: 1px solid var(--line); border-top: 6px solid var(--accent); padding: clamp(20px, 4vw, 36px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0 }
.hero h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(40px, 7.4vw, 76px); line-height: 0.9; text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance }
.hero p { margin: 0; font-size: 17px; max-width: 46ch }
.hero p.todo { color: var(--accent-ink); font-weight: 600 }
.hero .main.st-bad { border-top-color: var(--bad) }
.hero .main.st-good { border-top-color: var(--good) }
.hero .main.st-bad h2 { color: var(--bad) }
.hero .main.st-good h2 { color: var(--good) }
.herohead { display: flex; align-items: center; gap: 18px }
.herohead svg { flex: 0 0 auto; width: clamp(56px, 9vw, 88px); height: auto; color: var(--accent) }
.hero .stack { display: grid; gap: 8px; align-content: stretch }
.stat { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--ink); padding: 12px 16px; display: flex; flex-direction: column; justify-content: center }
.stat .v { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums }
.cta, .ghost { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 28px; font-family: var(--display); font-weight: 900; font-size: 24px; letter-spacing: 0.03em; text-transform: uppercase }
.cta { background: var(--accent); color: var(--on-accent); border: 2px solid var(--accent) }
.cta:hover { border-color: var(--ink) }
.ghost { background: none; border: 2px solid var(--line); min-height: 48px; padding: 0 18px; font-size: 19px; align-self: flex-start }
.ghost:hover { border-color: var(--ink) }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 10px; align-items: start }
.card { background: var(--surface); border: 1px solid var(--line); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.card h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em }
.card p { margin: 0; color: var(--muted); font-size: 15px }
.card .bigname { font-family: var(--display); font-weight: 900; font-size: 40px; line-height: 1; text-transform: uppercase; color: var(--ink) }
.card.flush { padding: 0; gap: 0 }
.card.flush .scroll { border: 0 }
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px }
.prizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px }
.prizes .stat .v { font-size: 24px; line-height: 1.1; color: var(--accent-ink) }
.prizes .stat { justify-content: flex-start; gap: 6px }
.invite { display: flex; flex-wrap: wrap; gap: 8px }
.invite input { flex: 1 1 100%; min-width: 0; height: 48px; padding: 0 12px; border: 1px solid var(--muted); background: var(--bg); font-size: 15px }
.check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 15px; color: var(--ink) }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent) }
.foot { margin-top: 44px; padding-top: 28px; border-top: 2px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px }
.foot .logo img { height: 46px }
.foot p { margin: 0; flex: 1 1 280px; font-size: 15px; color: var(--muted); max-width: 60ch }
.foot p strong { color: var(--ink); font-weight: 600; user-select: all }
@media (max-width: 680px) { .hero { grid-template-columns: minmax(0, 1fr) } .hero .stack { grid-template-columns: repeat(3, minmax(0, 1fr)) } .stat { padding: 10px } .stat .v { font-size: 32px } .cta { font-size: 21px; padding: 0 20px } }
.panel h2.sec { margin: 36px 0 4px; padding-top: 32px; border-top: 2px solid var(--line); font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em }
.panel > h2.sec:first-child { margin-top: 12px; padding-top: 0; border-top: 0 }
.flinks { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 26px }
.flinks button, .flinks a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px }
.flinks button:hover, .flinks a:hover { color: var(--accent-ink) }
.faq { display: flex; flex-direction: column; gap: 8px; max-width: 760px }
.faq details { border: 1px solid var(--line); background: var(--surface) }
.faq details[open] { border-color: var(--accent) }
.faq summary { min-height: 52px; padding: 14px 18px; cursor: pointer; font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em }
.faq details p { margin: 0; padding: 0 18px 18px; font-size: 16px; max-width: 64ch }
.pz { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px }
.card .bigname { overflow-wrap: anywhere }
.pz .ph { max-height: 220px; width: 100% }
.pz .ph { aspect-ratio: 4 / 3; max-width: 100%; background: var(--raised); display: flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted) }
/* sign-in */
.li { max-width: 580px; display: flex; flex-direction: column; gap: 16px }
.li h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(44px, 8vw, 76px); line-height: 0.92; text-transform: uppercase }
.okmsg { margin: 0; padding: 10px 14px; background: var(--good-bg); color: var(--good); font-size: 15px; font-weight: 600 }
.form .cta { align-self: flex-start }
/* sign-up and admin */
.su { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: start }
.su h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(38px, 6vw, 64px); line-height: 0.92; text-transform: uppercase; text-wrap: balance }
.su .intro { display: flex; flex-direction: column; gap: 16px }
.su .intro p { margin: 0; font-size: 17px; max-width: 46ch }
.su .facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.su .facts li { padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--accent); font-size: 15px }
.su .facts strong { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: 0.02em }
.form { gap: 18px }
.form .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.field label { font-size: 14px; font-weight: 600 }
.field label span { font-weight: 400; color: var(--muted) }
.field input, .field select { height: 48px; padding: 0 12px; border: 1px solid var(--muted); background: var(--bg); font-size: 16px; min-width: 0; width: 100% }
.field .hint { font-size: 13px; color: var(--muted); margin: 0 }
.ferr { margin: 0; color: var(--bad); font-size: 14px; font-weight: 600 }
.card p.ferr { color: var(--bad); font-size: 14px }
.card p.okmsg { color: var(--good) }
.consent { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 6px }
.consent .fine { margin: 0 0 6px 32px; font-size: 13px; line-height: 1.45; color: var(--muted) }
.form .legal { margin: 0; font-size: 13px; color: var(--muted) }
.form .legal a { color: var(--accent-ink) }
.adm-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px }
.adm-top .stat .v { font-size: 36px }
.adm-top .stat .v.sm { font-size: 22px; line-height: 1.1 }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.bar p { margin: 0; font-size: 15px; color: var(--muted) }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--muted); background: var(--surface); font-size: 14px; font-weight: 600; text-align: left }
td .btn { white-space: nowrap }
.btn:hover { border-color: var(--ink) }
.btn.solid { background: var(--ink); border-color: var(--ink); color: var(--bg) }
.btn.danger { color: var(--bad) }
td .btn { min-height: 40px; margin-right: 6px }
.ag { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px }
.ag .g { border: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 6px }
.ag .g .when { font-size: 12px; color: var(--muted) }
.ag .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.ag .pair button { min-height: 44px; border: 1px solid var(--line); background: var(--surface); font-family: var(--display); font-weight: 800; font-size: 19px }
.ag .pair button[aria-pressed="true"] { background: var(--me-bg); border-color: var(--accent); box-shadow: inset 0 -4px 0 var(--accent) }
.score { width: 64px; height: 44px; padding: 0 8px; border: 1px solid var(--muted); background: var(--bg); font-family: var(--display); font-weight: 800; font-size: 22px; text-align: center }
.score:disabled { border-color: var(--line); color: var(--muted); background: var(--quiet) }
.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.log li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px }
.log li:last-child { border-bottom: 0 }
.pill { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--raised); color: var(--muted) }
.pill.on { background: var(--good-bg); color: var(--good) }
@media (max-width: 760px) { .su { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 680px) {
  .brand { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lock pe" "wk wk"; align-items: center; gap: 16px 12px }
  .brand > .logo { grid-area: lock }
  .brand > .logo img { height: 46px }
  .hd { display: contents }
  .brand h1 { grid-area: pe; justify-self: end }
  .brand h1 .pe { height: 96px }
  .hd .wk { grid-area: wk; justify-self: center; align-items: center }
}
@media (prefers-reduced-motion: no-preference) { .team, .mult button { transition: background-color .14s ease, border-color .14s ease, opacity .14s ease } }
/* ---- additions for the real app ---- */
a { color: var(--accent-ink) }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px }
.linkbtn { min-height: 44px; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px }
.linkbtn:hover { color: var(--accent-ink) }
a.cta, a.ghost, a.btn { text-decoration: none; color: var(--ink) }
a.cta { color: var(--on-accent) }
.cta[disabled], .btn[disabled] { opacity: 0.55; cursor: default }
.cta[disabled]:hover { border-color: var(--accent) }
.field input[aria-invalid="true"] { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad) }
.hero .main.wide { grid-column: 1 / -1 }
.dl { margin: 0; display: flex; flex-direction: column; font-size: 16px }
.dl dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600 }
.dl dd { margin: 0 0 12px; overflow-wrap: anywhere }
.dl dd:last-child { margin-bottom: 0 }
.dl.pairs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; font-size: 15px }
.dl.pairs dt { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 400 }
.dl.pairs dd { margin: 0 }
.pill { white-space: nowrap }
.loading { min-height: 30vh; display: flex; align-items: center; color: var(--muted); font-size: 15px }
.page { max-width: 760px; display: flex; flex-direction: column; gap: 14px }
.page h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(38px, 6vw, 64px); line-height: 0.92; text-transform: uppercase }
.page p { margin: 0; max-width: 64ch }
noscript p { max-width: 940px; margin: 24px auto; padding: 0 16px }

/* ---- picks ---- */
.tabs[hidden] { display: none }
.team { --tc: var(--surface); --ts: transparent; --ti: var(--ink); --bk: var(--raised); --bi: var(--ink) }
.game > .notice { grid-column: 1 / -1 }
.hero a.cta { align-self: flex-start }
/* pages drawn inside one box: same spacing as the panel gives its own children */
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.col > h2.sec:first-child { margin-top: 12px; padding-top: 0; border-top: 0 }
.grid abbr { text-decoration: none }
.scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }
.col.sep > h2.sec:first-child { margin: 22px 0 4px; padding-top: 32px; border-top: 2px solid var(--line) }
/* player names are row headings in the tables */
tbody th { font-weight: 400; text-align: left }
tr.me th { font-weight: 700; color: var(--accent-ink); background: var(--me-bg) }
tbody tr:last-child th { border-bottom: 0 }
/* administrator page */
.okmsg { margin: 0; color: var(--good); font-weight: 600; font-size: 15px }
th .sub { display: block; font-weight: 400; font-size: 12px; color: var(--muted) }
.log .when { color: var(--muted); font-size: 13px; margin-right: 8px; white-space: nowrap }
.who a.linkbtn { text-decoration: underline }
td.soft { white-space: normal; max-width: 130px }
td.rem { min-width: 132px; line-height: 2 }
td.acts { white-space: normal }
td.acts .btn { margin: 3px 6px 3px 0 }
[data-part="players"] td.acts .btn { display: flex; width: 100%; justify-content: center; margin-right: 0 }
[data-part="players"] th, [data-part="players"] td { padding-left: 8px; padding-right: 8px }
/* the first column stays in view when a wide administrator table is scrolled sideways */
[data-part="players"] table th:first-child, [data-part="games"] table th:first-child { position: sticky; left: 0; background: var(--surface); border-right: 1px solid var(--line) }
[data-part="players"] thead th:first-child, [data-part="games"] thead th:first-child { background: var(--raised) }
[data-part="players"] tr.me th:first-child { background: var(--me-bg) }