/* CrazyGames Best - design tokens and site shell.
   Light theme "Matchday Programme" is the default; dark theme "Night Stadium" shares the same
   structure and type scale and only swaps colors. Loaded last on every page. */

@font-face { font-family: "Barlow"; src: url("/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root,
[data-theme="light"] {
  color-scheme: light;
  --cg-bg: #F3F5F1;
  --cg-surface: #FFFFFF;
  --cg-sunken: #E6EBE4;
  --cg-ink: #10201A;
  --cg-ink-2: #2C3B34;
  --cg-muted: #51605A;
  --cg-line: #C9D1C8;
  --cg-rule: #10201A;
  --cg-accent: #0A6B3B;
  --cg-accent-hover: #064F2B;
  --cg-on-accent: #FFFFFF;
  --cg-mark: #FFD23F;
  --cg-on-mark: #10201A;
  --cg-invert-bg: #10201A;
  --cg-invert-ink: #F3F5F1;
  --cg-stage: #0B0E12;
  --cg-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cg-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;
  --cg-bg: #0B0E12;
  --cg-surface: #151A21;
  --cg-sunken: #11161C;
  --cg-ink: #E9EEF3;
  --cg-ink-2: #C3CCD6;
  --cg-muted: #9AA6B2;
  --cg-line: #232B36;
  --cg-rule: #4A5564;
  --cg-accent: #C6F432;
  --cg-accent-hover: #DDFB7A;
  --cg-on-accent: #0B0E12;
  --cg-mark: #C6F432;
  --cg-on-mark: #0B0E12;
  --cg-invert-bg: #E9EEF3;
  --cg-invert-ink: #0B0E12;
  --cg-stage: #0B0E12;
}

/* ---------- Shell: header and footer (every page) ---------- */

.cg-header,
.cg-footer,
.cg-header *,
.cg-footer * { box-sizing: border-box; }

.cg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 8px 0 16px;
  background: var(--cg-bg);
  border-bottom: 2px solid var(--cg-rule);
  font-family: var(--cg-font-body);
}

.cg-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--cg-ink);
  font: 800 21px/1 var(--cg-font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.cg-brand img { display: block; border-radius: 6px; }
.cg-brand b { color: var(--cg-accent); font-weight: 800; }

.cg-nav { display: flex; align-items: center; gap: 2px; }
.cg-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--cg-ink);
  font: 600 15px/1 var(--cg-font-body);
  text-decoration: none;
}
.cg-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cg-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--cg-accent); }

.cg-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cg-ink);
  cursor: pointer;
}
.cg-icon-btn:hover { background: var(--cg-sunken); }
.cg-icon { display: block; flex: 0 0 auto; }
.cg-icon-sun { display: none; }
[data-theme="dark"] .cg-icon-sun { display: block; }
[data-theme="dark"] .cg-icon-moon { display: none; }

.cg-header a:focus-visible,
.cg-header button:focus-visible,
.cg-footer a:focus-visible,
.cg-footer button:focus-visible,
.cg-page a:focus-visible,
.cg-page button:focus-visible,
.cg-page input:focus-visible,
.cg-page summary:focus-visible {
  outline: 3px solid var(--cg-accent);
  outline-offset: 2px;
}

.cg-footer {
  margin-top: 48px;
  background: var(--cg-bg);
  border-top: 2px solid var(--cg-rule);
  color: var(--cg-muted);
  font: 400 14px/1.5 var(--cg-font-body);
}
.cg-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px;
}
.cg-footer p { margin: 0; }
.cg-footer b { color: var(--cg-ink); font-weight: 600; margin-right: 6px; }
.cg-footer nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: -8px; }
.cg-footer a,
.cg-link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--cg-ink);
  font: 600 14px/1 var(--cg-font-body);
  text-decoration: none;
  cursor: pointer;
}
.cg-footer a:hover,
.cg-link-btn:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 479px) {
  .cg-nav-secondary { display: none !important; }
}

/* ---------- Pages built on the new system ---------- */

body.cg-page {
  margin: 0;
  background: var(--cg-bg);
  color: var(--cg-ink);
  font: 400 16px/1.5 var(--cg-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cg-page *,
.cg-page *::before,
.cg-page *::after { box-sizing: border-box; }
.cg-prose a,
.cg-lede a,
.cg-section-note a { color: var(--cg-accent); }

.cg-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.cg-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.cg-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: var(--cg-muted);
  font: 600 12px/1.3 var(--cg-font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cg-mark { padding: 2px 8px; background: var(--cg-mark); color: var(--cg-on-mark); }

.cg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  background: var(--cg-accent);
  color: var(--cg-on-accent) !important;
  font: 700 20px/1 var(--cg-font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.cg-btn:hover { background: var(--cg-accent-hover); }
.cg-btn-ghost {
  background: transparent;
  color: var(--cg-ink) !important;
  border: 2px solid var(--cg-rule);
}
.cg-btn-ghost:hover { background: var(--cg-sunken); }
.cg-btn-small { min-height: 44px; padding: 0 16px; font: 600 15px/1 var(--cg-font-body); letter-spacing: 0; text-transform: none; }

/* Page title band: the H1 stays, the pictures carry the page */
.cg-top { padding-top: 18px; padding-bottom: 14px; }
.cg-top h1 { margin: 0; font: 800 clamp(26px, 3.6vw, 40px)/1 var(--cg-font-display); letter-spacing: 0; text-transform: uppercase; }
.cg-top h1 span { color: var(--cg-accent); }
.cg-lede { max-width: 80ch; margin: 6px 0 0; color: var(--cg-muted); font-size: 15px; line-height: 1.45; }

/* Feature banner: real game screen + one action */
.cg-banner {
  display: grid;
  background: var(--cg-surface);
  border: 2px solid var(--cg-rule);
  color: var(--cg-ink);
  text-decoration: none;
}
.cg-banner-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #030A06; }
.cg-banner-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.cg-banner:hover .cg-banner-media img { transform: scale(1.02); }
.cg-banner-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
.cg-banner-body strong { font: 800 clamp(30px, 4vw, 46px)/0.95 var(--cg-font-display); text-transform: uppercase; }
.cg-banner-text { color: var(--cg-ink-2); }
.cg-banner .cg-btn { align-self: stretch; margin-top: 4px; }
.cg-banner:hover .cg-btn { background: var(--cg-accent-hover); }

/* Continue playing */
.cg-continue { margin-top: 16px; background: var(--cg-sunken); border-top: 1px solid var(--cg-line); border-bottom: 1px solid var(--cg-line); }
.cg-continue[hidden] { display: none; }
.cg-continue-inner { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.cg-continue-inner img { flex: 0 0 auto; display: block; width: 72px; height: 54px; object-fit: cover; background: var(--cg-surface); }
.cg-continue-inner img[hidden] { display: none; }
.cg-continue-copy { flex: 1 1 auto; min-width: 0; }
.cg-continue-title { display: block; overflow: hidden; color: var(--cg-ink); font-size: 16px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }

/* Section heading + filter tabs */
.cg-section { padding-top: 28px; }
.cg-section[hidden] { display: none; }
.cg-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.cg-section-head h2,
.cg-prose h2 { margin: 0; font: 800 clamp(26px, 3.4vw, 36px)/1 var(--cg-font-display); text-transform: uppercase; }
.cg-section-head a { color: var(--cg-accent); font-weight: 600; text-decoration: none; }
.cg-section-head a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cg-section-note { margin: 6px 0 0; max-width: 72ch; color: var(--cg-muted); font-size: 15px; }

.cg-tabs { display: flex; gap: 0; margin-top: 18px; border-bottom: 2px solid var(--cg-rule); overflow-x: auto; scrollbar-width: none; }
.cg-tabs::-webkit-scrollbar { display: none; }
.cg-tab {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 14px 0 0;
  margin-right: 10px;
  border: 0;
  background: transparent;
  color: var(--cg-muted);
  font: 700 18px/1 var(--cg-font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.cg-tab:hover { color: var(--cg-ink); }
.cg-tab[aria-pressed="true"] { color: var(--cg-ink); box-shadow: inset 0 -4px 0 var(--cg-accent); }
.cg-tab span { margin-left: 4px; font-weight: 700; }

.cg-search { position: relative; display: flex; align-items: center; width: min(100%, 420px); margin-top: 14px; }
.cg-search svg { position: absolute; left: 12px; color: var(--cg-muted); pointer-events: none; }
.cg-search input {
  width: 100%;
  min-height: 48px;
  padding: 0 12px 0 40px;
  border: 2px solid var(--cg-rule);
  border-radius: 0;
  background: var(--cg-surface);
  color: var(--cg-ink);
  font: 400 16px/1 var(--cg-font-body);
  -webkit-appearance: none;
  appearance: none;
}
.cg-search input::placeholder { color: var(--cg-muted); }

/* Cover grid: the picture sells the game, text stays to a title and one line */
.cg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.cg-grid li[hidden] { display: none; }
.cg-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--cg-surface);
  border: 1px solid var(--cg-line);
  color: var(--cg-ink);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.cg-card:hover { border-color: var(--cg-rule); transform: translateY(-3px); }
.cg-card-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cg-sunken); }
.cg-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.cg-card:hover .cg-card-media img { transform: scale(1.04); }
.cg-new {
  display: inline-block; margin-left: 8px; padding: 1px 7px; background: var(--cg-mark); color: var(--cg-on-mark);
  font: 700 12px/1.5 var(--cg-font-display); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 2px;
}
.cg-card-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; padding: 10px 10px 12px; }
.cg-card-body b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.cg-card-desc { display: none; color: var(--cg-muted); font-size: 13px; line-height: 1.4; }
.cg-card-meta { margin-top: auto; padding-top: 4px; color: var(--cg-muted); font: 600 11px/1.3 var(--cg-font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.cg-empty { margin: 0; padding: 20px 0; color: var(--cg-muted); }
.cg-empty[hidden] { display: none; }
.cg-more { display: flex; margin-top: 20px; }
.cg-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 10px 0 0; padding: 0; list-style: none; }
.cg-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cg-ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cg-card, .cg-card-media img, .cg-banner-media img { transition: none; }
  .cg-card:hover, .cg-card:hover .cg-card-media img, .cg-banner:hover .cg-banner-media img { transform: none; }
}

/* Text sections */
.cg-prose { padding-top: 40px; }
.cg-prose p { max-width: 70ch; margin: 12px 0 0; color: var(--cg-ink-2); }
.cg-prose strong { color: var(--cg-ink); font-weight: 600; }
.cg-faq { border-bottom: 1px solid var(--cg-line); }
.cg-faq:first-of-type { margin-top: 12px; border-top: 1px solid var(--cg-rule); }
.cg-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 0; font-weight: 600; cursor: pointer; list-style: none; }
.cg-faq summary::-webkit-details-marker { display: none; }
.cg-faq summary::after { content: "+"; flex: 0 0 auto; font: 700 24px/1 var(--cg-font-display); }
.cg-faq[open] summary::after { content: "\2212"; }
.cg-faq p { margin: 0; padding: 0 0 14px; }

@media (min-width: 640px) {
  .cg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .cg-card-body { padding: 12px 14px 14px; }
  .cg-card-body b { font-size: 17px; }
  .cg-card-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}

@media (min-width: 768px) {
  .cg-wrap { padding: 0 24px; }
  .cg-header { padding: 0 16px 0 24px; }
  .cg-footer-inner { padding: 16px 24px; }
  .cg-top { padding-top: 26px; padding-bottom: 18px; }
  .cg-section { padding-top: 40px; }
  .cg-prose { padding-top: 64px; }
  .cg-prose + .cg-prose { padding-top: 40px; }
}

@media (min-width: 900px) {
  .cg-banner { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  .cg-banner-media { aspect-ratio: auto; min-height: 100%; }
  .cg-banner-media img { aspect-ratio: 16 / 9; }
  .cg-banner-body { justify-content: center; gap: 14px; padding: 32px; }
  .cg-banner .cg-btn { align-self: flex-start; min-width: 200px; }
}

@media (min-width: 1000px) {
  .cg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

/* ---------- Shared utilities ---------- */

.cg-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1100;
  max-width: min(92vw, 420px);
  padding: 12px 16px;
  transform: translateX(-50%);
  background: var(--cg-invert-bg);
  color: var(--cg-invert-ink);
  font: 600 15px/1.4 var(--cg-font-body);
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.cg-toast[hidden] { display: none; }

/* Consent bar: base look lives here so pages without the legacy stylesheet still get it.
   Layout rules ship with analytics-consent.js. */
.analytics-consent {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  box-sizing: border-box;
  color: #F3F5F1;
  background: #10201A;
  border: solid #36404C;
  font-family: var(--cg-font-body);
}
.analytics-consent[hidden] { display: none; }
.analytics-consent__copy p { color: #C9D1C8; }
.analytics-consent__copy a { color: #FFD23F; text-decoration: underline; text-underline-offset: 3px; }
.analytics-consent__actions button {
  box-sizing: border-box;
  color: #F3F5F1;
  background: transparent;
  border: 1px solid #8B978F;
  border-radius: 0;
  font: 600 15px/1.2 var(--cg-font-body);
  cursor: pointer;
}
.analytics-consent__actions .analytics-consent__accept { color: #10201A; background: #FFD23F; border-color: #FFD23F; }
.analytics-consent__actions button:hover,
.analytics-consent__actions button:focus-visible { outline: 2px solid #FFD23F; outline-offset: 2px; }
/* Privacy choices now lives in the footer; the floating pill stays in the DOM for the script. */
.analytics-preferences { display: none !important; }

.cg-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 16px; background: var(--cg-invert-bg); color: var(--cg-invert-ink) !important; font-weight: 600; }
.cg-skip:focus { left: 8px; top: 8px; }

/* ---------- Legacy pages: shell restyle ----------
   Game, guide and text pages still load the old stylesheets. These rules map their shell
   (page ground, side dock, info cards, related cards, buttons) onto the tokens.
   The doubled attribute selector outranks the old theme rules; remove this block as each
   page family moves to cg- components. Game boards themselves are not restyled here. */

:root[data-theme][data-theme] body:not(.career-xi-page):not(.copero-guide-page) {
  background: var(--cg-bg) !important;
  color: var(--cg-ink);
  font-family: var(--cg-font-body);
}

/* Side dock */
:root[data-theme][data-theme] .game-side-dock {
  background: var(--cg-surface) !important;
  border: 2px solid var(--cg-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--cg-ink) !important;
}
:root[data-theme][data-theme] .game-side-dock .breadcrumb,
:root[data-theme][data-theme] .game-side-dock .breadcrumb span { color: var(--cg-muted) !important; }
:root[data-theme][data-theme] .game-side-dock .breadcrumb a { color: var(--cg-ink) !important; }
:root[data-theme][data-theme] .game-side-dock .side-dock-title {
  background: none !important;
  color: var(--cg-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: var(--cg-font-display) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}
:root[data-theme][data-theme] .game-side-dock .side-dock-subtitle {
  color: var(--cg-muted) !important;
  font-family: var(--cg-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}
:root[data-theme][data-theme] .game-side-dock .side-dock-desc,
:root[data-theme][data-theme] .game-side-dock p,
:root[data-theme][data-theme] .game-side-dock li { color: var(--cg-ink-2) !important; }
:root[data-theme][data-theme] .game-side-dock .dock-tag {
  background: var(--cg-sunken) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--cg-ink) !important;
  font-weight: 600 !important;
}
:root[data-theme][data-theme] .game-side-dock .side-dock-guide {
  background: var(--cg-sunken) !important;
  border: 0 !important;
  border-radius: 0 !important;
}
:root[data-theme][data-theme] .game-side-dock .side-dock-guide strong { color: var(--cg-ink) !important; }

/* Buttons */
:root[data-theme][data-theme] .primary-button {
  background: var(--cg-accent) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cg-on-accent) !important;
  font-family: var(--cg-font-body) !important;
  font-weight: 600 !important;
}
:root[data-theme][data-theme] .primary-button:hover { background: var(--cg-accent-hover) !important; transform: none !important; }
:root[data-theme][data-theme] .secondary-button,
:root[data-theme][data-theme] .action-jump,
:root[data-theme][data-theme] .frame-tool-button,
:root[data-theme][data-theme] .game-frame-tools a {
  background: transparent !important;
  border: 2px solid var(--cg-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cg-ink) !important;
  font-family: var(--cg-font-body) !important;
  font-weight: 600 !important;
}
:root[data-theme][data-theme] .secondary-button:hover,
:root[data-theme][data-theme] .action-jump:hover,
:root[data-theme][data-theme] .frame-tool-button:hover:not(:disabled) { background: var(--cg-sunken) !important; }
:root[data-theme][data-theme] .frame-tool-button:disabled { border-color: var(--cg-line) !important; color: var(--cg-muted) !important; }

/* Game boards sit on the page surface; their colours come from the tokens via css/first-party-games.css. */
:root[data-theme][data-theme] .fp-board-card:not(.nba-shell) {
  background: var(--cg-surface) !important;
  border: 2px solid var(--cg-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Embedded and link-out game panels */
:root[data-theme][data-theme] .embedded-game-panel,
:root[data-theme][data-theme] .game-source-panel {
  background: var(--cg-surface) !important;
  border: 2px solid var(--cg-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cg-ink) !important;
}
:root[data-theme][data-theme] .embedded-game-panel h2,
:root[data-theme][data-theme] .game-source-panel h2 { color: var(--cg-ink) !important; font-family: var(--cg-font-display) !important; font-weight: 800 !important; text-transform: uppercase; }
:root[data-theme][data-theme] .game-source-panel p,
:root[data-theme][data-theme] .game-frame-note { color: var(--cg-muted) !important; }
:root[data-theme][data-theme] .game-embed-shell,
:root[data-theme][data-theme] .source-cover,
:root[data-theme][data-theme] .source-cover img { border-radius: 0 !important; box-shadow: none !important; }
:root[data-theme][data-theme] .status-pill {
  background: var(--cg-mark) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--cg-on-mark) !important;
  font-weight: 600 !important;
}

/* Guide and info cards */
:root[data-theme][data-theme] .info-card,
:root[data-theme][data-theme] .page-card {
  background: var(--cg-surface) !important;
  border: 1px solid var(--cg-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cg-ink-2) !important;
}
:root[data-theme][data-theme] .info-card h2,
:root[data-theme][data-theme] .info-card h3,
:root[data-theme][data-theme] .page-card h1,
:root[data-theme][data-theme] .page-card h2,
:root[data-theme][data-theme] .page-card h3 {
  color: var(--cg-ink) !important;
  font-family: var(--cg-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}
:root[data-theme][data-theme] .info-card p,
:root[data-theme][data-theme] .info-card li,
:root[data-theme][data-theme] .page-card p,
:root[data-theme][data-theme] .page-card li { color: var(--cg-ink-2) !important; }
:root[data-theme][data-theme] .info-card strong,
:root[data-theme][data-theme] .page-card strong,
:root[data-theme][data-theme] .info-card summary,
:root[data-theme][data-theme] .info-list dd { color: var(--cg-ink) !important; }
:root[data-theme][data-theme] .info-list dt,
:root[data-theme][data-theme] .source-note { color: var(--cg-muted) !important; }
:root[data-theme][data-theme] .info-list div,
:root[data-theme][data-theme] .faq-item { border-color: var(--cg-line) !important; }
:root[data-theme][data-theme] .info-card a,
:root[data-theme][data-theme] .page-card a { color: var(--cg-accent) !important; }

/* Related games */
:root[data-theme][data-theme] .content-section,
:root[data-theme][data-theme] .category-section { background: transparent !important; border: 0 !important; }
:root[data-theme][data-theme] .section-heading .eyebrow {
  color: var(--cg-muted) !important;
  font-family: var(--cg-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
}
:root[data-theme][data-theme] .section-heading h2 {
  color: var(--cg-ink) !important;
  font-family: var(--cg-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}
:root[data-theme][data-theme] .game-card {
  background: var(--cg-surface) !important;
  border: 1px solid var(--cg-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cg-ink) !important;
}
:root[data-theme][data-theme] .game-card:hover { background: var(--cg-surface) !important; border-color: var(--cg-rule) !important; box-shadow: none !important; transform: none !important; }
:root[data-theme][data-theme] .game-card h3 { color: var(--cg-ink) !important; }
:root[data-theme][data-theme] .game-card p { color: var(--cg-muted) !important; }
:root[data-theme][data-theme] .game-card .game-media,
:root[data-theme][data-theme] .game-card .game-media img { border-radius: 0 !important; }
:root[data-theme][data-theme] .badge {
  background: var(--cg-sunken) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--cg-ink) !important;
}

/* Text pages (about, contact, privacy, terms) and guide hubs */
:root[data-theme][data-theme] .page-hero {
  background: transparent !important;
  border-bottom: 2px solid var(--cg-rule);
  box-shadow: none !important;
  color: var(--cg-ink) !important;
}
:root[data-theme][data-theme] .page-hero h1 {
  color: var(--cg-ink) !important;
  font-family: var(--cg-font-display) !important;
  font-weight: 800 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase;
}
:root[data-theme][data-theme] .page-hero p { color: var(--cg-ink-2) !important; }
:root[data-theme][data-theme] .eyebrow {
  color: var(--cg-muted) !important;
  font-family: var(--cg-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
}

/* Football Career Simulator keeps its night-pitch cockpit in both themes for now:
   the whole page is treated as the game stage. */
:root[data-theme][data-theme] body.career-xi-page { background: #030A06 !important; color: #F8FAFC; }

@media (max-width: 639px) {
  /* Keep the first picture high on a phone: the intro line gives way to the banner. */
  .cg-top .cg-lede { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}