/* Puck Your Odds: content styles (normal pages). Tokens and header/footer live in shell.css. */
*{box-sizing:border-box}
body{margin:0;background:var(--navy);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.75}
a{color:var(--orange-hi)}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding-inline:16px}
.col{max-width:720px}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.1;text-wrap:balance;margin:0 0 .5em}
h1{font-size:clamp(38px,6.5vw,68px);text-transform:uppercase;letter-spacing:.01em}
h2{font-size:clamp(26px,3.6vw,36px);text-transform:uppercase;letter-spacing:.02em}
h3{font-size:22px;letter-spacing:.02em}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.small{font-size:15px}
.num{font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-block;font-family:var(--display);font-size:17px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:12px 26px;border-radius:999px;border:2px solid var(--orange);background:var(--orange);color:var(--on-orange)}
.btn:hover{background:var(--orange-hi);border-color:var(--orange-hi)}
.btn.ghost{background:transparent;color:var(--orange-hi)}
.btn:focus-visible,.card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btns{display:flex;gap:12px;flex-wrap:wrap}

/* hero */
.hero{padding-block:64px 48px;background:radial-gradient(1200px 400px at 80% 0%,#1b3160 0%,transparent 60%)}
.hero .tag{font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-size:16px;margin-bottom:12px}
.hero p.lead{font-size:21px;color:var(--muted);max-width:640px}

section.block{padding-block:40px;border-top:1px solid var(--line)}
.eyebrow{font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-size:15px;margin:0 0 8px}

/* pick card */
.pick{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:6px;padding:20px 22px;margin-block:8px 20px}
.pick .label{font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--orange);font-size:14px}
.pick .bet{font-family:var(--display);font-size:clamp(24px,3.4vw,32px);margin:4px 0 6px;line-height:1.15}
.pick .meta{font-family:var(--mono);font-size:14px;color:var(--muted)}
.pick p{margin:10px 0 0}
.nopick{background:var(--panel);border:1px dashed var(--line);border-radius:6px;padding:16px 20px;color:var(--muted)}

/* game list */
.games{list-style:none;padding:0;margin:0;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.games li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.games li:last-child{border-bottom:none}
.games .m{font-family:var(--display);font-size:19px;letter-spacing:.02em}
.games .l{font-size:15px;color:var(--muted)}
.chip{display:inline-block;font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:3px;background:var(--panel2);color:var(--muted);white-space:nowrap;align-self:center}
.chip.bet{background:var(--orange);color:var(--on-orange)}
.chip.win{background:var(--good);color:#04160c}
.chip.loss{background:var(--bad);color:#1d0503}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:18px;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--orange)}
.card .k{font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--orange);font-size:13px}
.card .t{font-family:var(--display);font-size:22px;line-height:1.15;margin:6px 0}
.card .d{font-size:15px;color:var(--muted)}

/* tables */
.tbl{border:1px solid var(--line);border-radius:6px}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--display);font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:14px;color:var(--muted);background:var(--panel2)}
tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tier{font-family:var(--display);font-size:18px}
.tier.A{color:#46B97F}.tier.B{color:#58B8C8}.tier.C{color:#B8C2D6}.tier.D{color:#E3A64E}.tier.E{color:#E86A5F}

/* article */
.article{padding-block:40px 24px}
.article h2{margin-top:1.6em}
.article .dek{font-size:20px;color:var(--muted)}
.byline{font-family:var(--mono);font-size:14px;color:var(--muted);margin-bottom:24px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-block:16px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px}
.stat .v{font-family:var(--display);font-size:30px}
.stat .c{font-size:14px;color:var(--muted)}
.crumbs{font-family:var(--display);font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding-top:24px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}

@media (max-width:560px){body{font-size:17px}.hero{padding-block:40px 32px}.games li{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* data and odds: Roboto Mono */
.prices{font-family:var(--mono);font-size:14px;color:var(--orange-hi);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:8px 12px;font-variant-numeric:tabular-nums}
.stat .v,td.n,.pick .meta{font-family:var(--mono)}
.chip.draft{background:#7A2EA8;color:#fff}
.verdict{margin-top:6px}

/* wide tables: break out of the text column; any remaining overflow gets a visible scrollbar and edge shadows */
.col .tw,.col .tbl{--bw:min(1040px,calc(100vw - 40px));width:var(--bw);margin-inline:calc((100% - var(--bw)) / 2)}
.tw,.tbl{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--orange,#F47B20) var(--panel2);
  background:
    linear-gradient(to right,var(--panel) 30%,rgba(19,32,56,0)) left center/48px 100% no-repeat local,
    linear-gradient(to left,var(--panel) 30%,rgba(19,32,56,0)) right center/48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(244,123,32,.55),rgba(244,123,32,0)) left center/16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(244,123,32,.55),rgba(244,123,32,0)) right center/16px 100% no-repeat scroll,
    var(--panel)}
.tw::-webkit-scrollbar,.tbl::-webkit-scrollbar{height:9px}
.tw::-webkit-scrollbar-track,.tbl::-webkit-scrollbar-track{background:var(--panel2)}
.tw::-webkit-scrollbar-thumb,.tbl::-webkit-scrollbar-thumb{background:var(--orange,#F47B20);border-radius:9px}

/* 60-minute prices: three-part 1 / X / 2 box */
.px3-h{font-family:var(--display);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:22px 0 8px}
.px3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel)}
.px3>div{padding:12px 10px;text-align:center;border-right:1px solid var(--line);display:grid;gap:2px}
.px3>div:last-child{border-right:none}
.px3 .k{font-family:var(--display);font-size:16px;letter-spacing:.03em;color:var(--ink)}
.px3 .k b{font-weight:400;color:var(--muted);margin-right:4px}
.px3 .p{font-family:var(--mono);font-size:24px;color:var(--orange-hi);font-variant-numeric:tabular-nums;line-height:1.2}
.px3 .o{font-family:var(--mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.px3 .on{background:var(--panel2);box-shadow:inset 0 0 0 2px var(--orange)}
@media (max-width:480px){.px3 .p{font-size:20px}.px3 .k{font-size:15px}}
/* hub game list: team names link to previews, white with underline */
.games .m a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--muted);text-underline-offset:4px}
.games .m a:hover{color:var(--orange-hi);text-decoration-color:var(--orange-hi)}
.cta{margin-top:28px}
.note{margin-top:24px}