:root {
  --ink: #10201b;
  --muted: #66736e;
  --paper: #f5f7f3;
  --white: #ffffff;
  --green-950: #071d17;
  --green-800: #124c3d;
  --green-600: #168463;
  --lime: #c8f169;
  --red: #d54d48;
  --amber: #d9992b;
  --line: #dce3de;
  --shadow: 0 14px 40px rgba(7, 29, 23, .09);
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button { cursor: pointer; }

.masthead { background: var(--green-950); color: white; min-height: 280px; overflow: hidden; position: relative; }
.masthead::after { background: var(--lime); content: ""; height: 8px; inset: auto 0 0; position: absolute; }
.masthead-inner { align-items: flex-end; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1180px; min-height: 280px; padding: 48px 30px 52px; position: relative; z-index: 1; }
.eyebrow { color: var(--lime); font-size: 12px; font-weight: 700; letter-spacing: 0; margin: 0 0 9px; text-transform: uppercase; }
.eyebrow.dark { color: var(--green-600); }
h1, h2 { font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: 0; margin: 0; text-transform: uppercase; }
h1 { font-size: clamp(52px, 8vw, 92px); line-height: .92; }
h1 strong { color: var(--lime); font-weight: 600; }
h2 { font-size: 34px; line-height: 1; }
.subhead { color: #b8c8c1; font-size: 16px; margin: 18px 0 0; max-width: 560px; }
.pitch-lines { border: 1px solid rgba(255,255,255,.1); border-radius: 50%; height: 460px; position: absolute; right: 4%; top: -180px; width: 460px; }
.pitch-lines::before, .pitch-lines::after, .pitch-lines span { border: 1px solid rgba(255,255,255,.08); content: ""; position: absolute; }
.pitch-lines::before { height: 100%; left: 50%; top: 0; }
.pitch-lines::after { border-radius: 50%; height: 100px; left: calc(50% - 50px); top: calc(50% - 50px); width: 100px; }
.pitch-lines span { height: 100%; left: -220px; top: 0; width: 900px; }
.update-status { align-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); display: flex; gap: 12px; min-width: 210px; padding: 13px 16px; }
.update-status span:not(.status-dot) { color: #9eb0a8; display: block; font-size: 11px; text-transform: uppercase; }
.update-status strong { display: block; font-size: 13px; margin-top: 3px; }
.status-dot { background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 5px rgba(200,241,105,.12); height: 8px; width: 8px; }

main { margin: 0 auto; max-width: 1180px; padding: 0 30px 70px; }
.scoreboard { background: var(--white); box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(4, 1fr); margin-top: -24px; min-height: 124px; position: relative; z-index: 2; }
.scoreboard > div { border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; padding: 22px 28px; }
.scoreboard > div:last-child { border-right: 0; }
.scoreboard span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.scoreboard strong { font-family: "Oswald", sans-serif; font-size: 26px; font-weight: 600; line-height: 1.15; margin-top: 7px; text-transform: uppercase; }
.scoreboard small { color: var(--muted); font-size: 12px; margin-top: 5px; }

.view-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 28px; margin-top: 42px; }
.tab { background: transparent; border: 0; color: var(--muted); font-size: 13px; font-weight: 700; padding: 15px 2px; position: relative; text-transform: uppercase; }
.tab.is-active { color: var(--ink); }
.tab.is-active::after { background: var(--green-600); bottom: -1px; content: ""; height: 3px; left: 0; position: absolute; right: 0; }
.view { display: none; }
.view.is-active { display: block; }
.section-heading { align-items: end; display: flex; justify-content: space-between; padding: 38px 0 22px; }
.live-standings-note { align-items: center; color: #9a6200; display: inline-flex; font-size: 10px; font-weight: 700; gap: 6px; margin: 10px 0 0; text-transform: uppercase; }
.live-standings-note::before { background: var(--amber); border-radius: 50%; box-shadow: 0 0 0 4px rgba(217,153,43,.15); content: ""; height: 7px; width: 7px; }
.live-standings-note[hidden] { display: none; }

.search { align-items: center; background: var(--white); border: 1px solid var(--line); display: flex; height: 42px; padding: 0 13px; width: 230px; }
.search input { background: transparent; border: 0; color: var(--ink); min-width: 0; outline: 0; width: 100%; }
.search span:not(.sr-only) { color: var(--muted); font-size: 20px; }
.leaderboard-shell { background: var(--white); border: 1px solid var(--line); overflow-x: auto; }
table { border-collapse: collapse; min-width: 720px; width: 100%; }
th { background: #eef2ee; color: var(--muted); font-size: 10px; padding: 13px 18px; text-align: left; text-transform: uppercase; }
td { border-top: 1px solid var(--line); padding: 14px 18px; }
tr:first-child td { border-top: 0; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: #f8faf7; }
.number { text-align: right; }
.rank { color: var(--muted); font-family: "Oswald", sans-serif; font-size: 18px; width: 90px; }
.rank.medal { color: var(--green-600); }
.rank-content { align-items: center; display: inline-flex; gap: 7px; }
.rank-medal { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 20px; line-height: 1; }
.rank-change { align-items: center; display: inline-flex; font-size: 13px; font-weight: 700; justify-content: flex-end; min-width: 32px; }
.rank-change span { font-size: 17px; line-height: 1; }
.rank-change.gained { color: var(--green-600); }
.rank-change.lost { color: var(--red); }
.rank-change.unchanged { color: var(--amber); }
.player-button { background: none; border: 0; color: var(--ink); font-weight: 700; padding: 0; text-align: left; }
.player-button:hover { color: var(--green-600); text-decoration: underline; }
.points { font-family: "Oswald", sans-serif; font-size: 22px; font-weight: 600; }
.accuracy { color: var(--muted); }

.group-filter { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; max-width: 600px; }
.group-filter button { background: var(--white); border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; height: 32px; min-width: 34px; padding: 0 10px; }
.group-filter button.is-active { background: var(--green-950); border-color: var(--green-950); color: white; }
.match-filters { align-items: flex-end; display: flex; flex-direction: column; gap: 12px; }
.country-search { position: relative; z-index: 4; }
.country-suggestions { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); left: 0; max-height: 260px; overflow-y: auto; position: absolute; right: 0; top: calc(100% + 4px); }
.country-suggestions[hidden] { display: none; }
.country-suggestion { background: var(--white); border: 0; border-bottom: 1px solid var(--line); color: var(--ink); display: block; font-size: 13px; padding: 11px 13px; text-align: left; width: 100%; }
.country-suggestion:last-child { border-bottom: 0; }
.country-suggestion:hover, .country-suggestion.is-active { background: #eef5ef; color: var(--green-800); }
.today-section { border-bottom: 1px solid var(--line); padding-bottom: 36px; }
.today-heading { padding-bottom: 18px; }
.today-date { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.today-match-grid { grid-template-columns: repeat(3, 1fr); }
.no-matches { background: var(--white); border: 1px dashed #cbd5ce; color: var(--muted); grid-column: 1 / -1; margin: 0; padding: 24px; text-align: center; }
.match-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.match-card { background: var(--white); border: 1px solid var(--line); color: var(--ink); min-height: 206px; padding: 17px; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; width: 100%; }
.match-card:hover { border-color: #aabbb1; box-shadow: 0 10px 26px rgba(7,29,23,.08); transform: translateY(-2px); }
.match-card:focus-visible { outline: 3px solid rgba(22,132,99,.3); outline-offset: 2px; }
.match-meta { align-items: center; color: var(--muted); display: flex; font-size: 10px; font-weight: 700; justify-content: space-between; text-transform: uppercase; }
.match-status { align-items: center; display: flex; gap: 6px; text-align: right; white-space: nowrap; }
.match-status::before { background: #aeb9b3; border-radius: 50%; content: ""; height: 6px; width: 6px; }
.match-card.finished .match-status { color: var(--green-600); }
.match-card.finished .match-status::before { background: var(--green-600); }
.match-card.live { border-color: #e2b252; }
.match-card.live .match-status, .match-card.live .team-score { color: #a96500; }
.match-card.live .match-status::before { background: var(--amber); box-shadow: 0 0 0 4px rgba(217,153,43,.15); }
.team-row { align-items: center; display: grid; gap: 10px; grid-template-columns: 42px 1fr 28px; margin-top: 14px; }
.team-code { align-items: center; background: #eef2ee; display: flex; font-size: 10px; font-weight: 700; height: 28px; justify-content: center; }
.team-flag { display: block; height: 20px; object-fit: cover; width: 26px; }
.team-name { font-size: 13px; font-weight: 600; }
.team-score { font-family: "Oswald", sans-serif; font-size: 20px; text-align: right; }
.live-disclaimer { color: #8a5a08; font-size: 10px; font-weight: 700; margin: 10px 0 -4px; text-transform: uppercase; }
.pick-distribution { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.distribution-labels { color: var(--muted); display: grid; font-size: 9px; grid-template-columns: repeat(3, 1fr); margin-bottom: 7px; text-transform: uppercase; }
.distribution-labels span:nth-child(2) { text-align: center; }
.distribution-labels span:last-child { text-align: right; }
.distribution-labels strong { color: var(--ink); }
.distribution-labels span { align-items: center; display: flex; gap: 3px; }
.distribution-labels span:nth-child(2) { justify-content: center; }
.distribution-labels span:last-child { justify-content: flex-end; }
.distribution-labels .is-correct { color: var(--green-800); font-weight: 700; }
.distribution-labels .is-correct strong { color: var(--green-800); font-weight: 800; }
.distribution-labels .is-incorrect { color: #9da7a2; }
.distribution-labels .is-incorrect strong { color: #7f8a84; }
.correct-result-mark { align-items: center; background: var(--green-600); border-radius: 50%; color: white; display: inline-flex; font-size: 8px; height: 14px; justify-content: center; margin-left: 2px; width: 14px; }
.distribution-bar { background: #e8ede9; display: flex; height: 8px; overflow: hidden; width: 100%; }
.distribution-bar span { display: block; height: 100%; min-width: 0; }
.distribution-team1 { background: var(--green-600); }
.distribution-draw { background: var(--amber); }
.distribution-team2 { background: var(--lime); }
.pick-distribution.has-result .distribution-bar { background: #d9dfdb; box-shadow: inset 0 0 0 1px #c6cec9; overflow: visible; }
.pick-distribution.has-result .distribution-bar span { opacity: .28; }
.pick-distribution.has-result .distribution-bar span.is-correct { box-shadow: 0 0 0 3px var(--green-950), 0 3px 9px rgba(7,29,23,.25); opacity: 1; position: relative; z-index: 1; }

dialog { background: var(--white); border: 0; box-shadow: 0 30px 80px rgba(7,29,23,.28); color: var(--ink); height: min(760px, calc(100vh - 40px)); margin: auto 0 auto auto; max-width: 560px; padding: 0; width: calc(100% - 28px); }
dialog::backdrop { background: rgba(7,29,23,.62); }
.dialog-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 24px 26px; }
.icon-button { align-items: center; background: #eef2ee; border: 0; color: var(--ink); display: flex; font-size: 25px; height: 36px; justify-content: center; line-height: 1; width: 36px; }
.dialog-summary { background: var(--green-950); color: white; display: grid; grid-template-columns: repeat(4, 1fr); }
.dialog-summary div { border-right: 1px solid rgba(255,255,255,.14); padding: 16px 20px; }
.dialog-summary div:last-child { border-right: 0; }
.dialog-summary span { color: #9eb0a8; display: block; font-size: 10px; text-transform: uppercase; }
.dialog-summary strong { display: block; font-family: "Oswald", sans-serif; font-size: 24px; margin-top: 4px; }
.pick-list { height: calc(100% - 170px); overflow-y: auto; padding: 10px 26px 30px; }
.pick-group-title { color: var(--green-600); font-size: 11px; font-weight: 700; margin: 22px 0 8px; text-transform: uppercase; }
.pick-row { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: 1fr auto; padding: 11px 0; }
.pick-row:first-of-type { border-top: 0; }
.pick-match { font-size: 12px; font-weight: 600; }
.pick-choice { color: var(--muted); font-size: 11px; margin-top: 3px; }
.pick-result { border: 1px solid var(--line); font-size: 10px; font-weight: 700; min-width: 62px; padding: 5px 7px; text-align: center; text-transform: uppercase; }
.pick-result.correct { background: #e4f5e8; border-color: #b9dec2; color: #20733d; }
.pick-result.incorrect { background: #fae9e7; border-color: #edc5c1; color: #a33a35; }
.pick-result.live-correct { background: #fff5d9; border-color: #e5c879; color: #7e5700; }
.pick-result.live-incorrect { background: #fff2e5; border-color: #e6bd91; color: #9a4c00; }
.dialog-meta { color: var(--muted); font-size: 11px; margin: 8px 0 0; text-transform: uppercase; }
.match-dialog-distribution { background: var(--green-950); color: white; padding: 20px 26px; }
.match-dialog-distribution .pick-distribution { border: 0; margin: 0; padding: 0; }
.match-dialog-distribution .distribution-labels { color: #9eb0a8; font-size: 10px; margin-bottom: 9px; }
.match-dialog-distribution .distribution-labels strong { color: white; }
.match-dialog-distribution .distribution-labels .is-incorrect, .match-dialog-distribution .distribution-labels .is-incorrect strong { color: #72877e; }
.match-dialog-distribution .distribution-labels .is-correct, .match-dialog-distribution .distribution-labels .is-correct strong { color: var(--lime); }
.match-dialog-distribution .distribution-bar { height: 12px; }
.match-pick-list { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); height: calc(100% - 190px); overflow-y: auto; padding: 24px 26px 32px; }
.match-pick-column { min-width: 0; }
.match-pick-heading { border-bottom: 2px solid var(--green-600); min-height: 58px; padding-bottom: 10px; }
.match-pick-heading h3 { font-size: 13px; margin: 0; overflow-wrap: anywhere; }
.match-pick-heading span { color: var(--muted); display: block; font-size: 10px; margin-top: 5px; text-transform: uppercase; }
.match-pick-column ul { list-style: none; margin: 0; padding: 0; }
.match-pick-column li { border-bottom: 1px solid var(--line); font-size: 12px; padding: 9px 0; }
.match-pick-column li.muted { color: var(--muted); }
.match-pick-column li.correct-pick { color: var(--green-800); font-weight: 800; }
.match-pick-column li.incorrect-pick { color: #98a29d; }
.error-state { background: var(--red); bottom: 20px; color: white; left: 20px; padding: 14px 18px; position: fixed; right: 20px; z-index: 5; }
.empty { color: var(--muted); padding: 40px; text-align: center; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0,0,0,0); }

@media (max-width: 850px) {
  .scoreboard { grid-template-columns: repeat(2, 1fr); }
  .scoreboard > div:nth-child(2) { border-right: 0; }
  .scoreboard > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .match-grid { grid-template-columns: repeat(2, 1fr); }
  .today-match-grid { grid-template-columns: repeat(2, 1fr); }
  .section-heading { align-items: flex-start; gap: 18px; }
}

@media (max-width: 600px) {
  .masthead, .masthead-inner { min-height: 310px; }
  .masthead-inner { align-items: flex-start; flex-direction: column; justify-content: flex-end; padding: 36px 20px 38px; }
  h1 { font-size: 54px; }
  .subhead { font-size: 14px; margin-top: 14px; }
  .update-status { margin-top: 24px; min-width: 0; width: 100%; }
  main { padding: 0 14px 50px; }
  .scoreboard { margin-top: -8px; }
  .scoreboard > div { min-height: 105px; padding: 16px; }
  .scoreboard strong { font-size: 21px; }
  .section-heading { align-items: stretch; flex-direction: column; }
  .search { width: 100%; }
  .match-filters { align-items: stretch; }
  .country-search { width: 100%; }
  th, td { padding: 13px 14px; }
  .match-grid { grid-template-columns: 1fr; }
  .today-match-grid { grid-template-columns: 1fr; }
  .group-filter { justify-content: flex-start; }
  dialog { height: 100%; max-height: none; width: 100%; }
  .dialog-header, .pick-list { padding-left: 18px; padding-right: 18px; }
  .dialog-summary { grid-template-columns: repeat(2, 1fr); }
  .dialog-summary div:nth-child(2) { border-right: 0; }
  .dialog-summary div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.14); }
  .match-dialog-distribution { padding-left: 18px; padding-right: 18px; }
  .match-pick-list { display: block; padding-left: 18px; padding-right: 18px; }
  .match-pick-column + .match-pick-column { margin-top: 28px; }
  .match-pick-heading { min-height: 0; }
}