@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: optional; src: url(/static/fonts/barlow-400-latin-ext.c10e6afb.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: optional; src: url(/static/fonts/barlow-400-latin.1793b6dd.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: optional; src: url(/static/fonts/barlow-600-latin-ext.7792696b.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: optional; src: url(/static/fonts/barlow-600-latin.635ba4a4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: optional; src: url(/static/fonts/barlow-700-latin-ext.d81c2f8d.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: optional; src: url(/static/fonts/barlow-700-latin.5bb2752c.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: optional; src: url(/static/fonts/barlow-condensed-700-latin-ext.f22149af.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: optional; src: url(/static/fonts/barlow-condensed-700-latin.4cdd4b39.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: optional; src: url(/static/fonts/barlow-condensed-800-latin-ext.a1f515dc.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: optional; src: url(/static/fonts/barlow-condensed-800-latin.35b975ab.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Creepster'; font-style: normal; font-weight: 400; font-display: optional; src: url(/static/fonts/creepster-400-latin.e6e55167.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Mountains of Christmas'; font-style: normal; font-weight: 700; font-display: optional; src: url(/static/fonts/mountains-of-christmas-700-latin.a1176fee.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500 700; font-display: optional; src: url(/static/fonts/oswald-500-latin-ext.ced10842.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500 700; font-display: optional; src: url(/static/fonts/oswald-500-latin.85df1eb0.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Fallback'; font-weight: 400; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto'); size-adjust: 95.3%; ascent-override: 104.9%; descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Fallback'; font-weight: 500 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold'); size-adjust: 91.5%; ascent-override: 109.3%; descent-override: 21.9%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Condensed Fallback'; font-weight: 100 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold'); size-adjust: 70.4%; ascent-override: 142%; descent-override: 28.4%; line-gap-override: 0%; }

/* Layout: a broadcast listings sheet. One column, 760px measure, picks as big-number rows, slate as a dense table.
   Colours and faces come from the skin tokens below; this block only shapes. */
*, *::before, *::after { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 760px; margin: 0 auto; padding-block: 20px 56px; padding-inline: 16px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
header.brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; border-bottom: 3px solid var(--ink); padding-bottom: 10px; position: relative; }
header.brand .wordmark { font-family: var(--display); font-weight: 800; font-size: 44px; letter-spacing: .5px; margin: 0; text-transform: uppercase; line-height: 1; }
header.brand .wordmark a { color: inherit; text-decoration: none; }
header.brand .wordmark span { color: var(--accent); }
header.brand .meta { color: var(--muted); font-size: 14px; }
.skins { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.skins button { font: 600 12px/1 var(--body); letter-spacing: .8px; text-transform: uppercase; padding: 9px 12px; min-height: 36px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.skins button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
nav.site { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 14px; }
nav.site a { color: var(--muted); text-decoration: none; font-weight: 600; padding: 6px 0; min-height: 32px; display: inline-flex; align-items: center; } nav.site a:hover, nav.site a.on { color: var(--accent); }
.intro { margin: 18px 0 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--accent); display: flex; gap: 14px; align-items: flex-start; }
.intro p { margin: 0; font-size: 17px; max-width: 62ch; }
.intro button { margin-left: auto; flex: none; font: 600 12px/1 var(--body); text-transform: uppercase; letter-spacing: .8px; padding: 10px 12px; min-height: 36px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
h1.page, h2, h3.sec { font-family: var(--display); text-transform: uppercase; letter-spacing: 1px; font-size: 22px; margin: 32px 0 10px; text-wrap: balance; font-weight: 700; }
h1.page small, h2 small, h3.sec small { font-family: var(--body); text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; font-size: 14px; margin-left: 8px; }
.picks { display: grid; gap: 10px; }
.pick { display: grid; grid-template-columns: 72px 1fr; gap: 0 14px; background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; align-items: start; }
.pick .num { font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.pick .num small { display: block; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); font-family: var(--body); font-weight: 600; margin-top: 2px; }
.pick .game { font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.1; min-width: 0; overflow-wrap: break-word; }
.pick .game .at, .hip .game .at, .gamehead .game .at { color: var(--muted); font-weight: 400; }
.rk { color: var(--accent); font-weight: 800; }
.when { color: var(--muted); font-size: 14px; margin-top: 2px; } .when b { color: var(--ink); font-variant-numeric: tabular-nums; }
.why { margin-top: 6px; font-size: 15px; }
.actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.btn { font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink); border: 1px solid var(--line); padding: 9px 12px; min-height: 36px; display: inline-flex; align-items: center; background: var(--bg); }
.btn:hover { border-color: var(--ink); }
.btn.cal { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 2px 7px; border: 1px solid currentColor; }
.pill.disney { color: var(--accent); }
.hip { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--warm); padding: 14px 16px; }
.hip .game { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1.1; }
.hip p { margin: 8px 0 0; } .hip .fine { color: var(--muted); font-size: 14px; margin-top: 6px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
.tablewrap { overflow-x: auto; position: relative; }   /* positioned, so the .sr labels inside stay in the scroll box and never widen the page */
th { text-align: left; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 2px solid var(--line); }
td { padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.n { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--accent); font-variant-numeric: tabular-nums; width: 44px; }
td.t { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.a a { font-size: 13px; color: var(--ink); }
a.gl { color: inherit; text-decoration: none; } a.gl:hover { text-decoration: underline; }
.verdict { font-weight: 800; font-family: var(--display); font-size: 17px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.v-worth { color: var(--good); } .v-maybe { color: var(--warm); } .v-skip { color: var(--skip); } .v-not { color: var(--muted); }
nav.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
nav.jump a { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .8px; font-size: 15px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); padding: 7px 12px; min-height: 36px; display: inline-flex; align-items: center; background: var(--surface); }
nav.jump a:hover { border-color: var(--accent); color: var(--accent); }
section.league { margin-top: 36px; border-top: 3px solid var(--ink); padding-top: 6px; }
section.league h2.league-name { font-size: 32px; margin: 8px 0 0; color: var(--accent); }
details.slate summary { cursor: pointer; list-style: none; } details.slate summary::-webkit-details-marker { display: none; }
details.slate summary h2::after, details.slate summary h3::after { content: " \25BE"; color: var(--muted); font-size: 18px; } details.slate[open] summary h2::after, details.slate[open] summary h3::after { content: " \25B4"; }
nav.crumbs { font-size: 13px; color: var(--muted); margin-top: 12px; } nav.crumbs a { color: var(--muted); } nav.crumbs span { margin: 0 4px; }
p.lead { font-size: 17px; margin: 14px 0 0; max-width: 65ch; }
ul.case { margin: 8px 0 0; padding-left: 20px; max-width: 70ch; } ul.case li { margin: 6px 0; }
.rivmap { width: 100%; height: auto; margin: 18px 0; display: block; }
.rivmap .rv { fill: none; stroke: var(--accent); stroke-opacity: .55; stroke-width: 1.2px; transition: stroke-opacity .15s; }
.rivmap .rv.w10 { stroke-width: 2px; } .rivmap .rv.w15 { stroke-width: 3.2px; } .rivmap .rv.w5, .rivmap .rv.w4 { stroke-opacity: .35; }
.rivmap .rv.on { stroke-opacity: 1; stroke: var(--focus); } .rivmap .rv.dim { stroke-opacity: .08; }
.rivmap .rt { cursor: pointer; } .rivmap .rt text { fill: var(--ink); font-family: var(--body); font-weight: 600; } .rivmap .rt circle { fill: var(--muted); }
.rivmap .rt.on text { fill: var(--accent); } .rivmap .rt.on circle { fill: var(--accent); } .rivmap .rt:focus { outline: none; } .rivmap .rt:focus text { text-decoration: underline; }
section.mkt { border: 1px solid var(--line); padding: 4px 16px 14px; margin-top: 18px; } section.mkt h2 { margin-top: 14px; }
.mkts-wrap { display: flex; flex-direction: column; }
html[data-market="fi"] section.mkt[data-mk="fi"] { order: -1; border-left: 6px solid var(--accent); }
html[data-market="se"] section.mkt[data-mk="se"] { order: -1; border-left: 6px solid var(--accent); }
html[data-market="de"] section.mkt[data-mk="de"] { order: -1; border-left: 6px solid var(--accent); }
html[data-market="uk"] section.mkt[data-mk="uk"] { order: -1; border-left: 6px solid var(--accent); }
html[data-market="us"] section.mkt[data-mk="us"] { order: -1; border-left: 6px solid var(--accent); }
pre { background: var(--surface); border: 1px solid var(--line); padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
table.rights td small { display: block; color: var(--muted); }

.gamehead { display: grid; grid-template-columns: 96px 1fr; gap: 0 16px; align-items: start; margin-top: 18px; }
.gamehead .num { font-family: var(--display); font-weight: 800; font-size: 64px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.gamehead .num small { display: block; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); font-family: var(--body); font-weight: 600; }
.gamehead .game { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1.05; margin: 0; overflow-wrap: break-word; min-width: 0; }
.comps { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 14px; }
.comp { border: 1px solid var(--line); background: var(--surface); padding: 8px 10px; }
.comp b { display: block; font-family: var(--display); font-size: 22px; } .comp span { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
details.spoiler { margin-top: 18px; border: 1px solid var(--line); background: var(--surface); padding: 10px 14px; }
details.spoiler summary { cursor: pointer; font-weight: 700; padding: 6px 0; } details.spoiler summary::after { content: "  (reveals the result)"; color: var(--muted); font-weight: 400; }
.wp { width: 100%; max-width: 100%; height: auto; margin-top: 10px; }
.verdict-big { font-family: var(--display); font-size: 40px; font-weight: 800; text-transform: uppercase; }
.hublist { display: grid; gap: 6px; } .hublist a { color: inherit; padding: 2px 0; }
table.month { table-layout: fixed; width: 100%; min-width: 320px; } table.month th { text-align: center; }
table.month td { vertical-align: top; height: 58px; padding: 4px; border: 1px solid var(--line); } table.month td.pad { border: 0; }
table.month td .d { display: block; font-family: var(--display); font-weight: 700; color: var(--muted); }
table.month td.on { background: var(--surface); } table.month td.on a { display: block; color: inherit; text-decoration: none; height: 100%; }
table.month td.on .d { color: var(--ink); } table.month td small { display: block; font-size: 12px; line-height: 1.2; color: var(--muted); }
table.month td.on a:hover .d, table.month td.on a:focus-visible .d { color: var(--accent); text-decoration: underline; }
table.month td small.wi { color: var(--ink); font-weight: 600; } p.key { color: var(--muted); font-size: 14px; max-width: 65ch; } p.key .kn { display: none; }
@media (max-width: 600px) { table.month td { height: 52px; padding: 3px; } table.month td .w { display: none; } table.month td small.wi::after { content: " \2713"; } p.key .kn { display: inline; } }
footer { margin-top: 40px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
footer p { margin: 4px 0; max-width: 65ch; }
/* the label under a score fits its column at every width: COUCHCALL is 66px at 11px, 58px at 10px; two-word labels wrap */
@media (max-width: 480px) { .pick { grid-template-columns: 64px 1fr; } .pick .num small, .gamehead .num small { font-size: 10px; letter-spacing: .3px; } .pick .num { font-size: 36px; } header.brand .wordmark { font-size: 36px; } .skins { margin-left: 0; } .gamehead { grid-template-columns: 72px 1fr; } .gamehead .num { font-size: 48px; } }
[hidden] { display: none !important; }
html.js .nojs, html:not(.js) .jsonly { display: none; }
.prompt { position: relative; margin-top: 10px; } .prompt pre { white-space: pre-wrap; max-height: 26em; overflow: auto; } .prompt .copy { margin-bottom: 8px; }
ul.res { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; max-width: 72ch; } ul.res li { line-height: 1.4; } ul.res li > a { font-weight: 600; } .rnote { display: block; color: var(--muted); font-size: 14px; } .rfans { white-space: normal; } .rfans a { color: inherit; } .rt { display: inline-block; font: 600 11px/1 var(--body); letter-spacing: .5px; text-transform: uppercase; padding: 3px 6px; margin-left: 4px; border: 1px solid var(--line); color: var(--ink); background: var(--surface); vertical-align: 2px; } .rt.free { border-color: #2e7d4f; } .rt.spoil { border-color: var(--warm); border-style: dashed; } .rt.pay { border-color: var(--ink); } p.rlegend { font-size: 14px; color: var(--muted); max-width: 72ch; } p.rlegend .rt { margin-left: 0; }
section.fan p { max-width: 68ch; } p.fanpick { padding: 10px 14px; background: var(--surface); border-left: 4px solid var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
p.nudge { margin: 12px 0 0; padding: 8px 12px; background: var(--surface); border-left: 4px solid var(--warm); font-weight: 600; max-width: 65ch; }
p.tvlink { margin: 14px 0 0; font-weight: 600; } p.tvlink a { color: var(--accent); }
/* TV guide: hour blocks of rows. Grid areas: t time, c league chip, m matchup, l listing, s score bar or verdict, k calendar. */
[data-sport="football"] { --sport: var(--sport-football); } [data-sport="soccer"] { --sport: var(--sport-soccer); } [data-sport="hockey"] { --sport: var(--sport-hockey); }
.tv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
.tv-chip { font: 600 13px/1 var(--body); padding: 8px 10px; min-height: 36px; display: inline-flex; align-items: center; color: var(--chip-ink); background: var(--chip-bg); border: 1px solid var(--line); border-left: 4px solid var(--sport); }
button.tv-chip { cursor: pointer; } button.tv-chip[aria-pressed="false"] { background: transparent; color: var(--muted); border-left-color: var(--line); text-decoration: line-through; }
.tv-hour { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 6px; }
.tv-h { font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--muted); background: var(--tv-band); margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-variant-numeric: tabular-nums; }
.tv-h small { font: 400 13px/1.3 var(--body); color: var(--muted); }
.tv-rows { list-style: none; margin: 0; padding: 0; }
.tv-row { display: grid; grid-template-columns: 44px 58px minmax(0, 1fr) minmax(0, 150px) 124px 64px; grid-template-areas: "t c m l s k"; gap: 4px 10px; align-items: center; padding: 6px; min-height: 48px; background: var(--tv-row); }
.tv-rows .tv-row:nth-child(even) { background: var(--tv-row-alt); }
.tv-row > time { grid-area: t; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.tv-lg { grid-area: c; justify-self: start; font: 700 12px/1 var(--body); letter-spacing: .6px; text-transform: uppercase; text-decoration: none; color: var(--sport); background: var(--chip-bg); border: 1px solid var(--sport); padding: 4px 6px; white-space: nowrap; }
.tv-m { grid-area: m; min-width: 0; font-size: 15px; } .tv-mu { font-weight: 600; } .tv-m .at { color: var(--muted); font-weight: 400; }
.tv-pick { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 2px 6px; color: var(--accent-ink); background: var(--accent); vertical-align: 1px; white-space: nowrap; }
.tv-tv { grid-area: l; color: var(--muted); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.tv-s { grid-area: s; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.tv-bar { display: inline-flex; gap: 2px; } .tv-bar i { display: block; width: 6px; height: 14px; background: var(--line); }
.tv-row.hot .tv-bar i.on { background: var(--accent); } .tv-row.below .tv-bar i.on { background: var(--muted); }
.tv-n { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1; color: var(--accent); min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.tv-s .verdict { font-size: 15px; } .tv-soon { color: var(--muted); font-size: 13px; }
.tv-cal { grid-area: k; justify-self: end; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--bg); border: 1px solid var(--line); min-height: 36px; padding: 0 10px; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.tv-cal:hover { border-color: var(--ink); }
/* below the bar: faded to 70 percent, text in ink so it still reads at AA; started games (script only) at 50 percent */
.tv-row.below:not(.done) { opacity: .7; }
.tv-row.below:not(.done) .tv-n, .tv-row.below:not(.done) .tv-tv, .tv-row.below:not(.done) .at, .tv-row.below:not(.done) .tv-lg, .tv-row.below:not(.done) .rk { color: var(--ink); }
.tv-row.past, .tv-row.below.past { opacity: .62; }   /* .5 failed AA in Sheet light (3.3:1); .62 clears 4.5 */
.tv-now { list-style: none; display: flex; align-items: center; gap: 8px; margin: 6px 0; color: var(--accent); font: 700 13px/1 var(--body); letter-spacing: .8px; text-transform: uppercase; }
.tv-now::after { content: ""; flex: 1; border-top: 2px solid var(--accent); }
@media (max-width: 640px) {
  .tv-row { grid-template-columns: 44px auto minmax(0, 1fr) auto auto; grid-template-areas: "t c m m m" "t l l s k"; }
  .tv-row > time { align-self: start; padding-top: 2px; } .tv-lg { align-self: start; margin-top: 1px; } .tv-m { align-self: start; }
}
/* a 320px phone: the second row (network, score bar, calendar) needs the space the gaps take */
@media (max-width: 360px) { .tv-row { gap: 4px 6px; } .tv-s { gap: 6px; } }
/* Masthead controls: the TV market selector and the skin switcher, both groups of real buttons with aria-pressed */
.ctls { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.ctls .skins { margin-left: 0; }
.mkts .lbl { font: 700 12px/1 var(--body); letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.mkts button { padding-inline: 9px; }
/* TV listings per market: every market in the markup; with a market chosen (html[data-market], set before first paint)
   only that one shows; without scripts they read as one inline list "FI Viaplay · SE Viaplay · ...". */
.tvm > i { font-style: normal; color: var(--muted); }
.tv-mk[data-mk="other"] { display: none; }
html[data-market] .tvm > i, html[data-market] .tv-mk, html[data-market] .tv-mk > b { display: none; }
html[data-market="fi"] .tv-mk[data-mk="fi"], html[data-market="se"] .tv-mk[data-mk="se"], html[data-market="de"] .tv-mk[data-mk="de"], html[data-market="uk"] .tv-mk[data-mk="uk"], html[data-market="us"] .tv-mk[data-mk="us"], html[data-market="other"] .tv-mk[data-mk="other"] { display: inline; }
a.tv-mk { color: inherit; }
.wtw th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; width: 1%; }
.wtw a { color: var(--ink); font-weight: 600; }
.wtw .wtw-e { display: block; } .wtw .wtw-e + .wtw-e { margin-top: 6px; }
.wtw small { display: block; color: var(--muted); font-size: 13px; }
html[data-market="fi"] .wtw tr[data-mk="fi"], html[data-market="se"] .wtw tr[data-mk="se"], html[data-market="de"] .wtw tr[data-mk="de"], html[data-market="uk"] .wtw tr[data-mk="uk"], html[data-market="us"] .wtw tr[data-mk="us"], html[data-market="other"] .wtw tr[data-mk="other"] { background: var(--surface); box-shadow: inset 4px 0 0 var(--accent); }
main > p a { color: var(--accent); }
p.tellline { margin: 8px 0 0; font-size: 14px; } p.tellline a { color: var(--accent); font-weight: 600; }
/* corrections form */
.cform { display: grid; gap: 12px; max-width: 560px; margin-top: 16px; }
.cform label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.cform label small { font-weight: 400; color: var(--muted); }
.cform input, .cform select, .cform textarea { font: 16px/1.4 var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); padding: 8px 10px; min-height: 42px; width: 100%; }
.cform textarea { min-height: 96px; resize: vertical; }
.cform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cform button, .mailbox button { justify-self: start; font: 600 14px/1 var(--body); padding: 12px 16px; min-height: 44px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); cursor: pointer; }
.mailbox { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.mailbox code { font: 600 16px/1.2 var(--body); padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); user-select: all; }
.mailbox button { background: var(--bg); color: var(--ink); border-color: var(--line); }
@media (max-width: 480px) { .ctls { margin-left: 0; } .cform .row2 { grid-template-columns: 1fr; } }
/* one orchestrated reveal on load; off when the visitor prefers reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .pick, .hip { animation: rise .45s cubic-bezier(.2,.7,.2,1) both; }
  .picks .pick:nth-child(2) { animation-delay: .06s } .picks .pick:nth-child(3) { animation-delay: .12s } .picks .pick:nth-child(4) { animation-delay: .18s } .picks .pick:nth-child(5) { animation-delay: .24s }
  @keyframes rise { from { opacity: .001; transform: translateY(8px) } to { opacity: 1; transform: none } }
  .btn, .skins button, nav.jump a { transition: border-color .15s, background-color .15s, color .15s; }
}

:root, html[data-skin="calm"] {
  --bg: #f5f6f8; --surface: #ffffff; --ink: #121a2b; --muted: #58627a; --line: #d9dde5;
  --accent: #b8102a; --accent-ink: #ffffff; --warm: #8c6200; --good: #1f7a4d; --skip: #626b7e; --focus: #b8102a;
  --sport-football: #8a3a00; --sport-soccer: #0a6150; --sport-hockey: #2142a0;
  --tv-band: transparent; --tv-row: transparent; --tv-row-alt: transparent; --chip-bg: var(--surface); --chip-ink: var(--ink);
  --display: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Impact, sans-serif; --body: "Barlow", "Barlow Fallback", "Helvetica Neue", Arial, sans-serif; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-skin="broadcast"]):not([data-skin="halloween"]):not([data-skin="christmas"]) {
  --bg: #0f141d; --surface: #171d28; --ink: #eef1f6; --muted: #a3adbe; --line: #2a3340;
  --accent: #ff5c70; --accent-ink: #14060a; --warm: #f2b705; --good: #4ccb86; --skip: #8d97a8; --focus: #ffd166;
  --sport-football: #f5a25d; --sport-soccer: #4fd1b5; --sport-hockey: #8fb4ff;
  --tv-band: transparent; --tv-row: transparent; --tv-row-alt: transparent; --chip-bg: var(--surface); --chip-ink: var(--ink); color-scheme: dark } }
:root[data-theme="dark"]:not([data-skin="broadcast"]):not([data-skin="halloween"]):not([data-skin="christmas"]) {
  --bg: #0f141d; --surface: #171d28; --ink: #eef1f6; --muted: #a3adbe; --line: #2a3340;
  --accent: #ff5c70; --accent-ink: #14060a; --warm: #f2b705; --good: #4ccb86; --skip: #8d97a8; --focus: #ffd166;
  --sport-football: #f5a25d; --sport-soccer: #4fd1b5; --sport-hockey: #8fb4ff;
  --tv-band: transparent; --tv-row: transparent; --tv-row-alt: transparent; --chip-bg: var(--surface); --chip-ink: var(--ink); color-scheme: dark }

html[data-skin="broadcast"] {
  --bg: #0b1a3a; --surface: #12255a; --ink: #f4f7ff; --muted: #b7c6ee; --line: #2e4a93;
  --accent: #ffd400; --accent-ink: #0b1a3a; --warm: #ffa133; --good: #5dff91; --skip: #9db0dc; --focus: #ffd400; --red: #e0162b;
  --sport-football: #ff9f43; --sport-soccer: #3ee6b0; --sport-hockey: #8fc2ff;
  --tv-band: linear-gradient(90deg, #1b3c9a, #0d2060); --tv-row: #12255a; --tv-row-alt: #0e1e48; --chip-bg: #c8102e; --chip-ink: #ffffff;
  --display: "Oswald", "Arial Narrow", sans-serif; --body: "Barlow", "Barlow Fallback", Arial, sans-serif; color-scheme: dark; }
html[data-skin="broadcast"] body { background: var(--bg); background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.03) 18px 20px); }
html[data-skin="broadcast"] header.brand { border: 0; margin-top: 10px; padding: 12px 18px 10px; background: linear-gradient(180deg,#1b3c9a,#0d2060); box-shadow: 0 5px 0 var(--accent), 0 9px 0 var(--red); transform: skew(-8deg); }
html[data-skin="broadcast"] header.brand > * { transform: skew(8deg); }
html[data-skin="broadcast"] header.brand .wordmark { font-style: italic; font-size: 46px; letter-spacing: 1px; text-shadow: 3px 3px 0 var(--red); font-weight: 700; }
html[data-skin="broadcast"] header.brand .meta { color: var(--accent); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }
html[data-skin="broadcast"] .skins button { background: #0a1430; color: #fff; border-color: #2e4a93; font-style: italic; }
html[data-skin="broadcast"] .skins button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
html[data-skin="broadcast"] nav.site { margin-top: 18px; } html[data-skin="broadcast"] nav.site a { color: var(--ink); text-transform: uppercase; font-family: var(--display); letter-spacing: 1px; font-weight: 500; } html[data-skin="broadcast"] nav.site a.on, html[data-skin="broadcast"] nav.site a:hover { color: var(--accent); }
html[data-skin="broadcast"] .intro { background: linear-gradient(90deg, var(--red) 0, var(--red) 8px, #10224f 8px); border: 0; } html[data-skin="broadcast"] .intro button { background: #0a1430; color: #fff; border-color: #2e4a93; }
html[data-skin="broadcast"] nav.jump a { background: linear-gradient(180deg,#2a52c9,#15317e); color: #fff; border: 0; font-style: italic; box-shadow: 0 3px 0 var(--accent); }
html[data-skin="broadcast"] h2, html[data-skin="broadcast"] h3.sec { font-style: italic; letter-spacing: 2px; background: linear-gradient(90deg, var(--red) 0, var(--red) 6px, transparent 6px); padding-left: 14px; font-weight: 700; }
html[data-skin="broadcast"] section.league { border-top: 4px solid var(--accent); } html[data-skin="broadcast"] section.league h2.league-name { color: var(--accent); font-size: 34px; background: none; padding-left: 0; }
html[data-skin="broadcast"] .pick { background: linear-gradient(180deg,#1a3480,#10224f); border: 0; border-left: 10px solid var(--accent); box-shadow: 0 4px 0 #0a1430, inset 0 1px 0 rgba(255,255,255,.15); }
html[data-skin="broadcast"] .pick .num { color: var(--accent); font-style: italic; text-shadow: 2px 2px 0 var(--red); font-weight: 700; }
html[data-skin="broadcast"] .pick .game, html[data-skin="broadcast"] .hip .game, html[data-skin="broadcast"] .gamehead .game { font-style: italic; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
html[data-skin="broadcast"] .when b { color: #fff; }
html[data-skin="broadcast"] .btn { background: #0a1430; color: #fff; border-color: #2e4a93; } html[data-skin="broadcast"] .btn.cal { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-style: italic; text-transform: uppercase; }
html[data-skin="broadcast"] .hip { background: linear-gradient(180deg,#5a1030,#3a0a1e); border: 0; border-left: 10px solid var(--warm); }
html[data-skin="broadcast"] table { background: #0e1e48; } html[data-skin="broadcast"] th { background: var(--red); color: #fff; letter-spacing: 1px; } html[data-skin="broadcast"] td { border-color: #1e3570; }
html[data-skin="broadcast"] td.n, html[data-skin="broadcast"] .gamehead .num { color: var(--accent); font-style: italic; }
html[data-skin="broadcast"] .verdict, html[data-skin="broadcast"] .verdict-big { font-style: italic; }
html[data-skin="broadcast"] .comp { background: #10224f; border-color: #1e3570; } html[data-skin="broadcast"] details.spoiler { background: #10224f; border-color: #1e3570; }
html[data-skin="broadcast"] footer { color: var(--muted); border-top-color: var(--line); }
html[data-skin="broadcast"] .tv-hour { border-top: 0; margin-top: 14px; padding-top: 0; }
html[data-skin="broadcast"] .tv-h { color: var(--ink); border-left: 8px solid var(--accent); padding: 6px 12px; margin: 0; font-style: italic; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 3px 0 var(--red); }
html[data-skin="broadcast"] .tv-h small { color: var(--muted); font-style: normal; text-transform: none; letter-spacing: 0; }
html[data-skin="broadcast"] .tv-rows { margin-top: 3px; }
html[data-skin="broadcast"] .tv-lg { color: var(--chip-ink); border: 0; border-left: 4px solid var(--sport); }
html[data-skin="broadcast"] .tv-row.below:not(.done) .tv-lg { color: var(--chip-ink); }
html[data-skin="broadcast"] .tv-chip { border: 0; border-left: 4px solid var(--sport); font-style: italic; text-transform: uppercase; letter-spacing: .6px; }
html[data-skin="broadcast"] button.tv-chip[aria-pressed="false"] { background: transparent; color: var(--muted); border-left-color: var(--line); }
html[data-skin="broadcast"] .tv-mu { font-family: var(--display); font-style: italic; text-transform: uppercase; letter-spacing: .5px; font-weight: 500; }
html[data-skin="broadcast"] .tv-n { font-style: italic; text-shadow: 1px 1px 0 var(--red); }
html[data-skin="broadcast"] .tv-cal { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-style: italic; text-transform: uppercase; }
html[data-skin="broadcast"] .mkts .lbl { color: var(--accent); }
html[data-skin="broadcast"] .wtw th[scope="row"] { background: transparent; color: var(--ink); letter-spacing: 0; }
html[data-skin="broadcast"] .wtw a, html[data-skin="broadcast"] .wtw th[scope="row"] { color: var(--ink); }
html[data-skin="broadcast"] .cform input, html[data-skin="broadcast"] .cform select, html[data-skin="broadcast"] .cform textarea { background: #0a1430; border-color: #2e4a93; }
html[data-skin="broadcast"] .cform button { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-style: italic; text-transform: uppercase; }
html[data-skin="broadcast"] .mailbox code { background: #0a1430; border-color: #2e4a93; }
html[data-skin="broadcast"] .mailbox button { background: #0a1430; color: #fff; border-color: #2e4a93; }
html[data-skin="broadcast"] .tv-now { color: var(--accent); } html[data-skin="broadcast"] .tv-now span { background: var(--chip-bg); color: var(--chip-ink); padding: 4px 8px; font-style: italic; }
/* a 320px phone in Broadcast: uppercase italic titles and the 10px pick edge leave too little room, and the skewed
   masthead's corners reach past the page edge */
@media (max-width: 360px) {
  html[data-skin="broadcast"] .pick .game, html[data-skin="broadcast"] .hip .game { font-size: 20px; letter-spacing: 0; }
  html[data-skin="broadcast"] .gamehead .game { font-size: 28px; letter-spacing: 0; }
  html[data-skin="broadcast"] .pick { border-left-width: 6px; padding-left: 10px; }
  html[data-skin="broadcast"] header.brand { margin-inline: 10px; }
  html[data-skin="broadcast"] .tv-cal { padding: 0 6px; }
}

html[data-skin="halloween"] {
  --bg: #0e0714; --surface: #1a0f24; --ink: #f6ead2; --muted: #b8a3c8; --line: #3b2650;
  --accent: #ff7a1a; --accent-ink: #1a0800; --warm: #ffc145; --good: #9bf05a; --skip: #8f7f9e; --focus: #ffc145;
  --sport-football: #ffb061; --sport-soccer: #7ff0b0; --sport-hockey: #b9a6ff;
  --tv-band: linear-gradient(90deg, #2a1240, #140820); --tv-row: #1a0f24; --tv-row-alt: #140a1c; --chip-bg: #ff7a1a; --chip-ink: #1a0800;
  --display: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Impact, sans-serif; --body: "Barlow", "Barlow Fallback", "Helvetica Neue", Arial, sans-serif;
  --creep: "Creepster", "Barlow Condensed", Impact, sans-serif; color-scheme: dark; }
html[data-skin="halloween"] body { background: var(--bg); background-image: radial-gradient(ellipse 60% 40% at 85% -10%, rgba(255,122,26,.22), transparent 60%), radial-gradient(ellipse 40% 30% at 10% 110%, rgba(130,60,200,.18), transparent 60%); background-attachment: fixed; }
html[data-skin="halloween"] header.brand { border-bottom-color: var(--accent); }
html[data-skin="halloween"] header.brand .wordmark { font-family: var(--creep); font-weight: 400; letter-spacing: 1.5px; text-transform: none; font-size: 50px; text-shadow: 0 0 18px rgba(255,122,26,.45); }
html[data-skin="halloween"] header.brand .wordmark a::after { content: " \1F383"; font-size: .7em; }
html[data-skin="halloween"] header.brand .meta { color: var(--warm); }
html[data-skin="halloween"] .skins button, html[data-skin="halloween"] .intro button, html[data-skin="halloween"] .btn { background: #140a1c; color: var(--ink); border-color: #3b2650; }
html[data-skin="halloween"] .skins button[aria-pressed="true"], html[data-skin="halloween"] .btn.cal { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
html[data-skin="halloween"] h2, html[data-skin="halloween"] h3.sec { font-family: var(--creep); font-weight: 400; letter-spacing: 1.5px; text-transform: none; color: var(--warm); }
html[data-skin="halloween"] section.league h2.league-name { color: var(--accent); }
html[data-skin="halloween"] .pick { background: var(--surface); border-color: #3b2650; border-left: 10px solid var(--accent); box-shadow: 0 0 0 1px #2a1838, 0 0 24px rgba(255,122,26,.08); }
html[data-skin="halloween"] .pick .num { text-shadow: 0 0 14px rgba(255,122,26,.5); }
html[data-skin="halloween"] .hip { background: linear-gradient(180deg,#2a1240,#1a0f24); border-color: #3b2650; border-left: 10px solid #9b5cff; }
html[data-skin="halloween"] .intro { background: var(--surface); border-color: #3b2650; border-left-color: var(--accent); }
html[data-skin="halloween"] nav.site a.on, html[data-skin="halloween"] nav.site a:hover { color: var(--accent); }
html[data-skin="halloween"] nav.jump a { background: #2a1240; color: var(--ink); border-color: #3b2650; }
html[data-skin="halloween"] table { background: #140a1c; } html[data-skin="halloween"] th { background: #2a1240; color: var(--warm); } html[data-skin="halloween"] td { border-color: #2a1838; }
html[data-skin="halloween"] .comp, html[data-skin="halloween"] details.spoiler { background: var(--surface); border-color: #3b2650; }
html[data-skin="halloween"] .tv-h { border-left: 8px solid var(--accent); }
html[data-skin="halloween"] .cform input, html[data-skin="halloween"] .cform select, html[data-skin="halloween"] .cform textarea, html[data-skin="halloween"] .mailbox code { background: #140a1c; border-color: #3b2650; }
html[data-skin="halloween"] .cform button, html[data-skin="halloween"] .mailbox button { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
html[data-skin="halloween"] .tv-now span { background: var(--chip-bg); color: var(--chip-ink); padding: 4px 8px; }

html[data-skin="christmas"] {
  --bg: #0b1f16; --surface: #10291e; --ink: #f7f1e3; --muted: #a9c4b4; --line: #244636;
  --accent: #d62839; --accent-ink: #ffffff; --warm: #f2c14e; --good: #7fe3a0; --skip: #8aa394; --focus: #f2c14e;
  --sport-football: #f2a65a; --sport-soccer: #7fe3a0; --sport-hockey: #9fc9ff;
  --tv-band: linear-gradient(90deg, #143a29, #0b1f16); --tv-row: #10291e; --tv-row-alt: #0d2219; --chip-bg: #d62839; --chip-ink: #ffffff;
  --display: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Impact, sans-serif; --body: "Barlow", "Barlow Fallback", "Helvetica Neue", Arial, sans-serif;
  --festive: "Mountains of Christmas", "Barlow Condensed", Impact, sans-serif; color-scheme: dark; }
html[data-skin="christmas"] body { background: var(--bg); background-image: radial-gradient(ellipse 60% 40% at 50% -10%, rgba(242,193,78,.18), transparent 60%), radial-gradient(circle 2px at 12% 18%, rgba(255,255,255,.55) 0, transparent 3px), radial-gradient(circle 2px at 78% 34%, rgba(255,255,255,.45) 0, transparent 3px), radial-gradient(circle 1.5px at 32% 62%, rgba(255,255,255,.4) 0, transparent 3px), radial-gradient(circle 2px at 88% 76%, rgba(255,255,255,.5) 0, transparent 3px), radial-gradient(circle 1.5px at 56% 88%, rgba(255,255,255,.4) 0, transparent 3px); background-attachment: fixed; }
html[data-skin="christmas"] header.brand { border-bottom: 3px solid var(--accent); box-shadow: 0 6px 0 var(--warm); }
html[data-skin="christmas"] header.brand .wordmark { font-family: var(--festive); font-weight: 700; letter-spacing: 1px; text-transform: none; font-size: 50px; text-shadow: 0 0 18px rgba(242,193,78,.35); }
html[data-skin="christmas"] header.brand .wordmark a::after { content: " \1F384"; font-size: .7em; }
html[data-skin="christmas"] header.brand .meta { color: var(--warm); }
html[data-skin="christmas"] .skins button, html[data-skin="christmas"] .intro button, html[data-skin="christmas"] .btn { background: #0d2219; color: var(--ink); border-color: #244636; }
html[data-skin="christmas"] .skins button[aria-pressed="true"], html[data-skin="christmas"] .btn.cal { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
html[data-skin="christmas"] h2, html[data-skin="christmas"] h3.sec { font-family: var(--festive); font-weight: 700; letter-spacing: 1px; text-transform: none; color: var(--warm); }
html[data-skin="christmas"] section.league h2.league-name { color: var(--accent); }
html[data-skin="christmas"] .pick { background: var(--surface); border-color: #244636; border-left: 10px solid var(--warm); box-shadow: 0 0 0 1px #1a3a2b, 0 0 24px rgba(242,193,78,.08); }
html[data-skin="christmas"] .pick .num { color: var(--warm); text-shadow: 0 0 14px rgba(242,193,78,.5); }
html[data-skin="christmas"] .hip { background: linear-gradient(180deg,#4a1220,#2d0b14); border-color: #244636; border-left: 10px solid var(--accent); }
html[data-skin="christmas"] .intro { background: var(--surface); border-color: #244636; border-left-color: var(--accent); }
html[data-skin="christmas"] nav.site a.on, html[data-skin="christmas"] nav.site a:hover { color: var(--warm); }
html[data-skin="christmas"] nav.jump a { background: #143a29; color: var(--ink); border-color: #244636; }
html[data-skin="christmas"] table { background: #0d2219; } html[data-skin="christmas"] th { background: #143a29; color: var(--warm); } html[data-skin="christmas"] td { border-color: #1a3a2b; }
html[data-skin="christmas"] td.n, html[data-skin="christmas"] .gamehead .num { color: var(--warm); }
html[data-skin="christmas"] .comp, html[data-skin="christmas"] details.spoiler { background: var(--surface); border-color: #244636; }
html[data-skin="christmas"] .tv-h { border-left: 8px solid var(--accent); }
html[data-skin="christmas"] .cform input, html[data-skin="christmas"] .cform select, html[data-skin="christmas"] .cform textarea, html[data-skin="christmas"] .mailbox code { background: #0d2219; border-color: #244636; }
html[data-skin="christmas"] .cform button, html[data-skin="christmas"] .mailbox button { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
html[data-skin="christmas"] .tv-now span { background: var(--chip-bg); color: var(--chip-ink); padding: 4px 8px; }