@font-face{font-family:"Roboto";src:url("../assets/fonts/roboto-400.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap;}
@font-face{font-family:"Roboto";src:url("../assets/fonts/roboto-500.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap;}
@font-face{font-family:"Roboto";src:url("../assets/fonts/roboto-700.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap;}
@font-face{font-family:"Roboto";src:url("../assets/fonts/roboto-900.woff2") format("woff2");font-style:normal;font-weight:900;font-display:swap;}
@font-face { font-family:'Noto Sans Arabic'; src:url('../assets/fonts/noto-sans-arabic-400.woff2') format('woff2'); font-style:normal; font-weight:400 500; font-display:swap; }
@font-face { font-family:'Noto Sans Arabic'; src:url('../assets/fonts/noto-sans-arabic-700.woff2') format('woff2'); font-style:normal; font-weight:600 900; font-display:swap; }
:root {
  --font-heading: "Roboto", Arial, sans-serif;
  --font-body: "Roboto", Arial, sans-serif;
  --font-slot-title: "Inter Variable", "Inter", ui-sans-serif, sans-serif;
  --navy: #102744;
  --text: #10223c;
  --muted: #626d7d;
  --border: #dfe3e8;
  --light: #f5f6f8;
  --lighter: #fafafa;
  --white: #ffffff;
  --brand-bg: #141b1f;
  --brand-surface: #22421a;
  --brand-surface-strong: #2d5822;
  --brand-lime: #2caf4d;
  --brand-aqua: #a7e240;
  --brand-text: #f7fff7;
  --brand-muted: #bdd2b8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
  margin: 0;
  color: var(--text);
  background: #f2f3f6;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
[dir="rtl"] {
  --font-heading: "Roboto", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --font-body: "Roboto", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}
.game-card-copy strong, .game-placeholder strong { font-family: var(--font-slot-title); }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #101210;
  background: var(--brand-lime);
  font-weight: 850;
  transform: translateY(-160%);
  transition: transform .16s ease;
}
.skip-link:focus-visible { transform: translateY(0); outline: 3px solid var(--brand-aqua); outline-offset: 2px; }


.forecast-section {margin-block:22px;padding:22px;background:var(--brand-surface);border:1px solid color-mix(in srgb,var(--brand-muted) 24%,transparent);border-radius:16px;}
.forecast-heading {display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;}
.forecast-heading h2 {margin:0;font-size:24px;line-height:1.3;}.forecast-heading>a {flex-shrink:0;font-size:12px;font-weight:650;color:var(--brand-aqua);text-decoration:underline;text-underline-offset:4px;}
.forecast-eyebrow {color:var(--brand-aqua);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin:0 0 6px;}
.forecast-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.forecast-card {display:block;min-width:0;position:relative;padding:20px;border:1px solid color-mix(in srgb,var(--brand-muted) 24%,transparent);border-radius:12px;background:var(--brand-bg);color:inherit;text-decoration:none;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease;}
.forecast-card:hover {border-color:var(--brand-aqua);box-shadow:0 0 0 1px color-mix(in srgb,var(--brand-aqua) 35%,transparent);}
.forecast-card:focus-visible,.editorial-page .forecast-card:focus-visible {outline:2px solid var(--brand-aqua);outline-offset:4px;border-radius:12px;}
@media(prefers-reduced-motion:reduce){.forecast-card{transition:none;}}
.forecast-card h3 {font-size:18px;line-height:1.4;margin:7px 0 10px;}.forecast-card p {font-size:13px;line-height:1.6;color:var(--brand-muted);margin:9px 0;}
.forecast-card .forecast-card-meta {font-size:10px;color:var(--brand-muted);margin:0;}
.forecast-score-line {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0;font-size:14px;font-weight:750;}.forecast-score-line bdi {font-size:27px;color:var(--brand-lime);letter-spacing:.03em;white-space:nowrap;}
.forecast-read {display:inline-flex;align-items:center;gap:9px;color:var(--brand-text);font-weight:700;font-size:12px;min-height:32px;text-decoration:underline;text-underline-offset:4px;}
.forecast-read:focus-visible {outline:2px solid var(--brand-lime);outline-offset:4px;border-radius:2px;}
.forecast-guide-links {display:flex;flex-wrap:wrap;gap:12px 26px;padding-top:16px;margin-top:16px;border-top:1px solid color-mix(in srgb,var(--brand-muted) 20%,transparent);}
.forecast-guide-links a {font-size:12px;text-decoration:underline;text-underline-offset:4px;color:var(--brand-muted);line-height:1.6;}
.forecast-disclaimer {font-size:11px;color:var(--brand-muted);line-height:1.6;margin:14px 0 0;}
.match-card-foot {gap:12px;justify-content:space-between;flex-wrap:wrap;}.match-preview-link {color:var(--brand-aqua);font-weight:700;}
@media(max-width:767px){.forecast-section {padding:16px;}.forecast-heading {align-items:flex-start;}.forecast-heading h2 {font-size:21px;}.forecast-grid {grid-template-columns:minmax(0,1fr);gap:12px;}.forecast-card {padding:16px;}.forecast-card h3 {font-size:17px;}.forecast-guide-links {display:grid;gap:12px;}}

body.editorial-page {background:var(--brand-bg);color:var(--brand-text);font-size:16px;line-height:1.7;}
.editorial-shell {max-width:1140px;margin-inline:auto;padding:0 24px;}
.editorial-header {display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:23px;border-bottom:1px solid color-mix(in srgb,var(--brand-muted) 25%,transparent);}
.editorial-brand {display:grid;gap:5px;min-width:0;}
.editorial-brand img {width:145px;height:34px;object-fit:contain;object-position:left;}
[dir=rtl] .editorial-brand img {object-position:right;}
.editorial-brand small,.editorial-meta,.editorial-breadcrumb,.editorial-footer {font-size:12px;color:var(--brand-muted);}
.editorial-header nav {display:flex;align-items:center;flex-wrap:wrap;gap:20px;font-size:14px;}
.editorial-header nav a {padding-block:8px;}
.editorial-header nav [aria-current=page] {color:var(--brand-aqua);font-weight:750;}
.editorial-breadcrumb {display:flex;flex-wrap:wrap;gap:8px;margin-block:22px 25px;}
.editorial-breadcrumb a {text-decoration:underline;text-underline-offset:4px;}
.editorial-main {padding:0;}
.editorial-hero {max-width:850px;margin-bottom:30px;}
.editorial-kicker {font-size:11px;letter-spacing:.09em;font-weight:800;text-transform:uppercase;color:var(--brand-aqua);margin:0 0 9px;}
.editorial-hero h1 {font-size:clamp(26px,4vw,42px);line-height:1.18;letter-spacing:-.025em;margin:0 0 15px;text-wrap:balance;}
[dir=rtl] .editorial-hero h1 {line-height:1.55;letter-spacing:0;}
.editorial-lead {font-size:17px;line-height:1.7;color:var(--brand-muted);margin-block:15px;}
.editorial-meta {display:flex;flex-wrap:wrap;gap:8px 20px;}
.editorial-layout {display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:38px;align-items:start;margin-top:25px;}
.editorial-body {min-width:0;}
.editorial-body section {margin-bottom:31px;scroll-margin-top:20px;}
.editorial-body h2 {font-size:24px;line-height:1.35;letter-spacing:-.015em;margin:0 0 12px;}
.editorial-body p {margin:0 0 15px;}
.editorial-aside {position:sticky;top:20px;background:var(--brand-surface);border:1px solid color-mix(in srgb,var(--brand-muted) 25%,transparent);border-radius:14px;padding:20px;font-size:13px;}
.editorial-aside strong {display:block;margin-bottom:10px;font-size:14px;}
.editorial-aside a {display:block;padding:8px 0;color:var(--brand-muted);line-height:1.5;}
.editorial-aside a:hover {color:var(--brand-lime);}
.prediction-pick {background:var(--brand-surface);border:1px solid color-mix(in srgb,var(--brand-lime) 65%,transparent);border-radius:16px;padding:22px;margin-bottom:20px;}
.prediction-pick-top {display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--brand-muted);}
.prediction-versus {display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);direction:ltr;align-items:center;gap:20px;text-align:center;padding-block:16px;}
.prediction-team {display:grid;justify-items:center;gap:7px;font-weight:700;font-size:15px;}
.prediction-team img {width:62px;height:66px;}
.prediction-score {font-size:38px;line-height:1.1;font-weight:850;color:var(--brand-lime);font-variant-numeric:tabular-nums;}
.prediction-score-label {font-size:11px;color:var(--brand-muted);display:block;margin-top:7px;font-weight:450;}
.prediction-verdict {display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;border-top:1px solid color-mix(in srgb,var(--brand-muted) 20%,transparent);padding-top:14px;}
.prediction-verdict strong {font-size:18px;}.prediction-verdict span {font-size:12px;color:var(--brand-muted);}
.prediction-note,.forecast-state {font-size:13px;line-height:1.65;color:var(--brand-muted);}
.forecast-state {padding:12px 16px;border-inline-start:3px solid var(--brand-lime);background:var(--brand-surface);border-radius:0 8px 8px 0;}
.editorial-source-list {padding-inline-start:20px;font-size:13px;color:var(--brand-muted);}
.editorial-source-list a {display:inline-block;padding-block:7px;text-decoration:underline;text-underline-offset:3px;}
.editorial-sources {padding-top:22px;border-top:1px solid color-mix(in srgb,var(--brand-muted) 25%,transparent);}
.editorial-related {padding:25px 0 15px;border-top:1px solid color-mix(in srgb,var(--brand-muted) 25%,transparent);margin-top:35px;}
.editorial-related h2 {font-size:24px;}
.editorial-related a {text-decoration:underline;text-underline-offset:4px;}
.editorial-footer {padding-block:25px 35px;margin-top:35px;border-top:1px solid color-mix(in srgb,var(--brand-muted) 25%,transparent);}
.editorial-footer nav {display:flex;gap:18px;flex-wrap:wrap;}
.editorial-page a:focus-visible {outline:2px solid var(--brand-lime);outline-offset:5px;border-radius:3px;}
.editorial-page .forecast-grid {margin-bottom:25px;}
.editorial-page .forecast-card p {line-height:1.65;}
@media(max-width:767px){.editorial-shell {padding-inline:18px;}.editorial-header {gap:16px;align-items:flex-start;}.editorial-header nav {gap:7px 13px;justify-content:flex-end;font-size:12px;}.editorial-brand img {width:118px;height:28px;}.editorial-brand small {font-size:10px;}.editorial-layout {grid-template-columns:1fr;gap:15px;}.editorial-aside {position:static;grid-row:1;font-size:12px;}.editorial-aside nav {display:flex;flex-wrap:wrap;gap:0 14px;}.editorial-aside strong {margin-bottom:4px;}.editorial-body h2 {font-size:21px;}.editorial-lead {font-size:16px;}.prediction-pick {padding:16px;}.prediction-versus {gap:8px;}.prediction-score {font-size:32px;}.prediction-team {font-size:13px;}.editorial-breadcrumb {margin-block:18px;}.editorial-meta {gap:6px 12px;}}
@media(prefers-reduced-motion:reduce){html {scroll-behavior:auto;}}