@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=DM+Sans:wght@400;600;700&display=swap');
:root { color-scheme: dark; font-family: 'DM Sans', Arial, sans-serif; background: #11130f; color: #f1f0e8; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
.page { min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(circle at 78% 45%, #222719 0, transparent 38%), #11130f; }
.topbar, .footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar { padding: 28px clamp(22px, 5vw, 76px); border-bottom: 1px solid #34392e; font-size: 11px; font-weight: 700; letter-spacing: .19em; }
.badge { display: inline-flex; align-items: center; gap: 11px; }
.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #dfff52; box-shadow: 0 0 14px #dfff52; }
.season { color: #a5aa9b; text-align: right; }
.hero { width: 100%; max-width: 1600px; margin: auto; padding: 64px clamp(22px, 5vw, 76px) 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .58fr); align-items: center; gap: 24px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 13px; margin: 0 0 27px; font-size: 12px; font-weight: 700; letter-spacing: .24em; color: #dfff52; }
.eyebrow-line { width: 34px; height: 2px; background: currentColor; }
h1 { margin: 0; font-family: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif; font-size: clamp(78px, 9.5vw, 160px); font-weight: 900; line-height: .78; letter-spacing: -.035em; text-transform: uppercase; }
h1 span { display: block; white-space: nowrap; }
h1 .highlight { color: #dfff52; }
.period { display: inline; color: #dfff52; }
.pressure { --pressure: 100%; width: min(100%, 720px); margin: 40px 0 0; padding: 24px 25px 21px; border: 1px solid #ae5b42; background: linear-gradient(125deg, #29231a, #231c18); box-shadow: inset 4px 0 #f36b47, 0 20px 46px #05060250; }
.pressure-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; }
.pressure-kicker { margin: 0 0 8px; color: #ff986d; font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.pressure h2 { margin: 0; font: 900 clamp(38px, 3.7vw, 60px)/.9 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif; letter-spacing: -.015em; }
.pressure h2 em { color: #ff986d; font-style: normal; }
.pressure-score { flex: none; color: #ff986d; font: 900 clamp(49px, 5vw, 78px)/.75 'Barlow Condensed', Impact, sans-serif; }
.pressure-score span { color: #ae9585; font-size: .38em; }
.pressure-track { position: relative; height: 26px; margin-top: 25px; border: 2px solid #ad7a5b; background: #3c3930; }
.pressure-fill { position: absolute; inset: 0; background: linear-gradient(90deg, #dfff52 0%, #eac347 40%, #fa8647 72%, #f24d3f 100%); clip-path: inset(0 calc(100% - var(--pressure)) 0 0); transition: clip-path .7s ease; }
.pressure-needle { position: absolute; top: -8px; left: calc(var(--pressure) - 8px); width: 8px; height: 38px; border: 2px solid #f1f0e8; background: #11130f; box-shadow: 0 0 0 2px #11130f; transition: left .7s ease; }
.pressure-scale { display: flex; justify-content: space-between; gap: 8px; margin-top: 13px; color: #b9a99d; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.pressure-scale span:last-child { color: #ff986d; }
.pressure-copy { margin: 19px 0 0; color: #cbbeb3; font-size: 13px; line-height: 1.55; }
.pressure-copy strong { color: #fff; }
.subline { margin: 36px 0 0; max-width: 460px; color: #adb2a5; font-size: clamp(14px, 1.35vw, 18px); line-height: 1.6; }
.art { position: relative; min-height: 560px; display: grid; place-items: center; isolation: isolate; }
.art-ring { position: absolute; width: 90%; aspect-ratio: 1; border: 1px solid #46503a; border-radius: 50%; }
.ring-one { transform: rotate(-25deg) scaleX(.77); }
.ring-two { transform: rotate(30deg) scaleX(.77); }
.football { position: relative; width: min(30vw, 420px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #dfff52; box-shadow: inset -26px -27px 0 #b6d52d, 0 34px 70px #05060270; transform: rotate(-14deg); animation: float 5s ease-in-out infinite; }
.football:before, .football:after { content: ''; position: absolute; border: 3px solid #141710; border-radius: 50%; opacity: .85; }
.football:before { inset: 17%; }
.football:after { inset: 4%; }
.football-inner { position: relative; z-index: 1; width: 44%; aspect-ratio: 1; display: grid; place-items: center; background: #11130f; clip-path: polygon(50% 0, 97% 35%, 79% 91%, 21% 91%, 3% 35%); color: #dfff52; font: 900 clamp(40px, 5.6vw, 82px)/1 'Barlow Condensed', Impact, sans-serif; }
.art-star { position: absolute; color: #dfff52; font-size: 55px; }
.star-one { left: 1%; top: 12%; }
.star-two { right: 4%; bottom: 18%; font-size: 35px; }
.art-caption { position: absolute; right: -5%; top: 8%; transform: rotate(9deg); border: 2px solid #dfff52; padding: 10px 13px; color: #dfff52; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.footer { padding: 24px clamp(22px, 5vw, 76px); border-top: 1px solid #34392e; color: #858b7c; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.footer strong { color: #f1f0e8; margin-left: 8px; }
.this-week { padding: 78px clamp(22px, 5vw, 76px) 70px; border-top: 1px solid #34392e; background: #202719; }
.week-shell { max-width: 1450px; margin: 0 auto; }
.week-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 20px; }
.week-heading .eyebrow { margin-bottom: 22px; }
.week-heading h2 { margin: 0; font: 900 clamp(58px, 7.4vw, 112px)/.86 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif; letter-spacing: -.025em; }
.week-heading h2 em { color: #dfff52; font-style: normal; }
.week-lede { margin: 22px 0 0; color: #c3cdb7; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.5; }
.fixture-label { flex: none; margin-bottom: 5px; padding: 10px 12px; border: 1px solid #71805e; color: #dfff52; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.forecast-method { max-width: 850px; margin: 0 0 32px; color: #b4c39e; font-size: 13px; line-height: 1.6; }
.forecast-method a { color: #dfff52; text-underline-offset: 3px; }
.pick-banner { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 17px; margin: 38px 0 0; padding: 15px 18px; border: 2px solid #71805e; border-bottom: 0; background: #313c28; color: #b4c39e; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.forecast-method + .pick-banner { margin-top: 0; }
.pick-person { color: #dfff52; white-space: nowrap; }
.pick-banner strong { color: #f1f0e8; font: 900 25px/1 'Barlow Condensed', Impact, sans-serif; letter-spacing: .02em; }
.pick-banner > span:last-child { margin-left: auto; }
.match-card { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: stretch; border: 2px solid #71805e; background: #181e15; }
.team-card { min-width: 0; padding: clamp(22px, 3.3vw, 48px); }
.picked-team { background: #27331c; }
.team-role, .form-heading, .prediction-label { color: #b4c39e; font-size: 10px; font-weight: 700; letter-spacing: .17em; }
.team-role { color: #dfff52; }
.team-card h3 { margin: 22px 0; font: 900 clamp(48px, 5.8vw, 90px)/.83 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif; letter-spacing: -.025em; }
.team-place { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0 0 33px; color: #b4c39e; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.team-place strong { color: #dfff52; font: 900 31px/.9 'Barlow Condensed', Impact, sans-serif; }
.team-place span { margin-left: auto; color: #f1f0e8; }
.form-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.form-run { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.form-run span { display: grid; place-items: center; height: 44px; color: #10120e; font: 900 25px/1 'Barlow Condensed', Impact, sans-serif; }
.form-win { background: #dfff52; }
.form-draw { background: #a5ad9a; }
.form-loss { background: #e58a69; }
.form-detail { min-height: 3em; margin: 18px 0 0; color: #c3cdb7; font-size: 14px; line-height: 1.5; }
.match-v { display: grid; place-items: center; border-left: 1px solid #71805e; border-right: 1px solid #71805e; color: #dfff52; font: 900 58px/1 'Barlow Condensed', Impact, sans-serif; }
.prediction { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px clamp(22px, 3.3vw, 48px); border: 2px solid #dfff52; border-top: 0; background: #dfff52; color: #11130f; }
.prediction-label { color: #354015; }
.prediction p { margin: 5px 0 0; font: 900 clamp(29px, 3vw, 42px)/1 'Barlow Condensed', Impact, sans-serif; }
.prediction strong { text-align: right; font: 900 clamp(32px, 3.6vw, 54px)/.95 'Barlow Condensed', Impact, sans-serif; }
.prediction strong span { padding: 0 8px; color: #50641b; }
.week-note { margin: 17px 0 0; color: #aab79e; font-size: 12px; line-height: 1.7; }
.week-note a { color: #dfff52; text-underline-offset: 3px; }
.week-note a:hover { color: #fff; }
.results { width: 100%; padding: 78px clamp(22px, 5vw, 76px) 85px; border-top: 1px solid #34392e; background: #171a14; }
.results-intro, .table-wrap, .results-note { max-width: 1450px; margin-left: auto; margin-right: auto; }
.results-intro { position: relative; padding-right: 230px; margin-bottom: 34px; }
.results-intro .eyebrow { margin-bottom: 22px; }
.results h2 { margin: 0; font: 900 clamp(54px, 7vw, 105px)/.88 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif; letter-spacing: -.025em; }
.results h2 em { font-style: normal; color: #dfff52; }
.results-lede { margin: 28px 0 0; max-width: 690px; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.55; color: #c2c7b9; }
.results-lede strong { color: #fff; }
.result-stat { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 13px; color: #dfff52; }
.result-stat strong { font: 900 94px/.75 'Barlow Condensed', Impact, sans-serif; }
.result-stat span { font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .15em; }
.table-wrap { overflow-x: auto; border: 1px solid #3b4133; border-radius: 4px; }
table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 14px; }
caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
thead { background: #dfff52; color: #10120e; }
th { padding: 18px 20px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
th:nth-child(3), td.score { text-align: center; }
td { padding: 15px 20px; border-top: 1px solid #363b31; color: #d8dbd1; }
tbody tr:nth-child(even) { background: #1d211a; }
tbody tr:hover { background: #293022; }
td:first-child { color: #929b87; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
td:nth-child(2) { min-width: 270px; }
td.score { color: #fff; font-weight: 700; white-space: nowrap; }
td.winner { color: #dfff52; font-weight: 700; white-space: nowrap; }
tbody tr.md-row { background: #303822; box-shadow: inset 4px 0 #dfff52; }
.md-tag { display: inline-block; margin-left: 8px; padding: 4px 6px; color: #11130f; background: #dfff52; font-size: 9px; letter-spacing: .07em; }
.results-note { margin-top: 18px; color: #929b87; font-size: 12px; line-height: 1.7; }
.results-note a { color: #dfff52; text-underline-offset: 3px; }
.results-note a:hover { color: #fff; }
@keyframes float { 50% { transform: rotate(-9deg) translateY(-17px); } }
@media (max-width: 950px) { .hero { grid-template-columns: 1fr; padding-top: 52px; } h1 { font-size: clamp(70px, 15vw, 140px); } .art { min-height: 340px; margin-top: -20px; } .football { width: min(52vw, 300px); } .art-ring { width: min(70vw, 390px); } .art-caption { right: 8%; } }
@media (max-width: 600px) { .topbar { padding-block: 22px; } .season { font-size: 9px; max-width: 125px; line-height: 1.5; } .hero { padding-top: 48px; padding-bottom: 44px; } h1 { font-size: clamp(60px, 16vw, 96px); } .pressure { margin-top: 32px; padding: 20px 18px 19px; } .pressure h2 { font-size: clamp(36px, 10vw, 50px); } .pressure-score { font-size: clamp(44px, 12vw, 60px); } .pressure-scale { font-size: 8px; letter-spacing: .02em; } .subline { margin-top: 27px; } .art { min-height: 290px; margin-top: 5px; } .football { width: min(57vw, 250px); } .art-caption { right: 0; top: 0; font-size: 9px; } .footer { flex-wrap: wrap; justify-content: flex-start; row-gap: 16px; } .footer span:last-child { width: 100%; } }
@media (max-width: 750px) { .results { padding-top: 54px; padding-bottom: 60px; } .results-intro { padding-right: 0; padding-bottom: 92px; } .result-stat { left: 0; right: auto; bottom: 8px; } .result-stat strong { font-size: 72px; } .results h2 { font-size: clamp(54px, 13vw, 84px); } }
@media (max-width: 750px) { .this-week { padding-top: 54px; padding-bottom: 54px; } .week-heading { display: block; } .week-heading h2 { font-size: clamp(58px, 12vw, 84px); } .fixture-label { display: inline-block; margin-top: 20px; } .pick-banner { gap: 6px 12px; margin-top: 32px; } .pick-banner > span:last-child { width: 100%; margin-left: 0; } .match-card { grid-template-columns: 1fr; } .team-card { padding: 26px; } .team-card h3 { font-size: clamp(57px, 12vw, 78px); } .match-v { height: 42px; border: 0; border-top: 1px solid #71805e; border-bottom: 1px solid #71805e; font-size: 32px; } .form-detail { min-height: 0; } .prediction { align-items: start; flex-direction: column; gap: 13px; } .prediction strong { text-align: left; font-size: clamp(34px, 8vw, 50px); } }
@media (max-width: 850px) {
  .table-wrap { overflow: visible; border: 0; border-radius: 0; }
  table, tbody { display: block; min-width: 0; width: 100%; }
  thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  tbody tr, tbody tr:nth-child(even) { display: grid; grid-template-columns: minmax(0, 1fr) 76px; grid-template-areas: 'league score' 'match match' 'winner winner'; align-content: start; min-width: 0; padding: 0; border: 2px solid #7d8c70; border-radius: 3px; background: #1d211a; }
  tbody tr.md-row { border-color: #dfff52; box-shadow: none; background: #303822; }
  tbody td { min-width: 0; padding: 13px 14px; border: 0; }
  tbody td:first-child { grid-area: league; align-self: stretch; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #7d8c70; background: #292f24; white-space: normal; }
  tbody td:nth-child(2) { grid-area: match; min-width: 0; border-bottom: 1px solid #7d8c70; color: #f1f0e8; font-size: 16px; font-weight: 700; line-height: 1.35; }
  tbody td.score { grid-area: score; display: grid; place-items: center; padding: 8px 5px; border-left: 1px solid #7d8c70; border-bottom: 1px solid #7d8c70; background: #292f24; font: 900 28px/.9 'Barlow Condensed', Impact, sans-serif; }
  tbody td.winner { grid-area: winner; background: #232b1e; white-space: normal; font-size: 15px; }
  tbody td.winner::before { content: 'WINNING PICK'; display: block; margin-bottom: 5px; color: #aab5a0; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
  .md-tag { margin: 0 0 0 4px; }
}
@media (max-width: 620px) { tbody { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .football { animation: none; } .pressure-fill, .pressure-needle { transition: none; } }