/* Plus2Poker brand theme: loaded last on every page (scripts/seo.js adds it).
   Light is a pale felt-tinted daylight, dark is a deep felt green-black. Red belongs to the "2". */

html[data-theme="light"], :root[data-theme="light"] {
  --ink: #0f1a14; --ink-soft: #5f6b63; --paper: #eef2ee; --surface: #ffffff; --surface-2: #f6f9f6; --line: #d6dfd8;
  --felt: #0e6b47; --felt-hover: #0b5a3b; --red: #d6322a; --red-dark: #a8231d; --gold: #b7790c; --gold-bright: #e8a91f;
  --nav-bg: rgba(238, 242, 238, 0.86);
  color-scheme: light;
}
html[data-theme="dark"], :root[data-theme="dark"] {
  --ink: #edf2ec; --ink-soft: #94a39a; --paper: #0b120e; --surface: #121c16; --surface-2: #17241c; --line: #233328;
  --felt: #19a06a; --felt-hover: #14885a; --red: #e8443a; --red-dark: #b52b23; --gold: #f2bc3c; --gold-bright: #f2bc3c;
  --nav-bg: rgba(11, 18, 14, 0.86);
  color-scheme: dark;
}

/* Every page's own colour variables, mapped onto the brand palette.
   :root[data-theme] outranks the pages' own html[data-theme='dark'] rules wherever they appear. */
:root[data-theme] {
  /* home, play, how to play, trainer, content pages */
  --bg: var(--paper); --bg-surface: var(--surface); --bg-card: var(--surface); --bg-input: var(--surface-2);
  --primary: var(--felt); --primary-hover: var(--felt-hover); --primary-glow: transparent;
  --accent: var(--gold); --accent-glow: transparent; --highlight: var(--gold); --highlight-glow: transparent;
  --text: var(--ink); --text-muted: var(--ink-soft); --border: var(--line);
  --danger: var(--red); --correct: var(--felt); --wrong: var(--red);
  /* poker math pages */
  --bg-color: var(--paper); --text-main: var(--ink); --primary-color: var(--ink); --accent-color: var(--felt);
  --card-bg: var(--surface); --border-color: var(--line); --poker-red: var(--red); --poker-black: var(--ink);
  /* preflop quiz */
  --bg2: var(--surface); --tx: var(--ink); --tx2: var(--ink-soft); --bdr: var(--line);
}
html[data-theme] body { background: var(--paper); color: var(--ink); }

/* Calmer surfaces: no blurry glow blobs, no glassy gradients. */
.ambient-glow { display: none !important; }
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3, html[data-theme] h4,
.zone-title, .category-header, .hero h1, .gradient-text { font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif !important; letter-spacing: -0.03em; }
.gradient-text, .hero h1 .gradient-text {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important; color: var(--felt) !important;
}

/* Navigation bar */
nav, .global-nav { background: var(--nav-bg) !important; border-bottom: 1px solid var(--line) !important; }
.nav-links a { color: var(--ink-soft) !important; }
.nav-links a:hover, .nav-links a.current { color: var(--ink) !important; }
.mobile-menu-btn { color: var(--ink) !important; }
@media (max-width: 768px) {
  .nav-links { background: var(--surface) !important; border-bottom: 1px solid var(--line) !important; }
}
.nav-right { display: flex; align-items: center; gap: 18px; }
.theme-toggle {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  display: inline-grid; place-items: center; cursor: pointer; font-size: 1.05rem; line-height: 1; flex: none;
}
.theme-toggle:hover { border-color: var(--ink-soft); }

/* ---------- The wordmark: Plus [2] Poker, where the red 2 fans out a pair now and then ---------- */
a.logo {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important; color: var(--ink) !important; text-decoration: none !important;
  font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif !important; font-weight: 800 !important; letter-spacing: -0.035em !important;
  display: inline-flex !important; align-items: center; line-height: 1 !important; gap: 0 !important;
}
.wm { display: inline-flex; align-items: center; white-space: nowrap; }
.wm-slot { position: relative; display: inline-block; width: 0.82em; height: 1.04em; margin: 0 0.08em; }
.wm-slot i, .wm-slot b {
  position: absolute; inset: 0; border-radius: 0.14em; display: grid; place-items: center;
  font-size: 0.86em; font-style: normal; font-weight: 800; transform-origin: 50% 110%; transform: rotate(-6deg);
}
.wm-slot b { background: var(--red); color: #fff; box-shadow: 0 0.05em 0 var(--red-dark); }
.wm-slot i { background: var(--surface); color: var(--ink); border: 0.04em solid var(--ink); }
.wm-slot i.g2 { color: var(--red); }
.wm-slot .g1 { animation: wm-fan-left 6s cubic-bezier(.4, 1.4, .5, 1) infinite; }
.wm-slot .g2 { animation: wm-fan-right 6s cubic-bezier(.4, 1.4, .5, 1) infinite; }
a.logo:hover .wm-slot .g1, a.logo:hover .wm-slot .g2 { animation-duration: 1.4s; }
@keyframes wm-fan-left { 0%, 66%, 94%, 100% { transform: rotate(-6deg); } 73%, 87% { transform: rotate(-30deg); } }
@keyframes wm-fan-right { 0%, 66%, 94%, 100% { transform: rotate(-6deg); } 73%, 87% { transform: rotate(16deg); } }
@media (prefers-reduced-motion: reduce) { .wm-slot .g1, .wm-slot .g2 { animation: none; } }

/* Buttons and cards that used neon glows */
.card:hover, .panel:hover, .related a:hover { box-shadow: 0 10px 26px rgba(15, 26, 20, 0.12) !important; }
html[data-theme="dark"] .card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important; }
.card-icon { box-shadow: none !important; }
.btn-primary, .cta-primary { box-shadow: none !important; }
footer { color: var(--ink-soft) !important; border-top-color: var(--line) !important; }

/* ---------- Fixes for page styles written for the old dark-only look ---------- */
a.logo .wm, a.logo .wm > span { color: var(--ink) !important; -webkit-text-fill-color: currentColor !important; }
.category-header { color: var(--ink) !important; }
.category-header span { background: linear-gradient(90deg, var(--line) 0%, transparent 100%) !important; }

/* Text on green buttons and active tabs */
.btn-primary, .cta-primary, .tab.active, .btn.go, .cta-btn, a.btn-primary { color: #fff !important; }
.cta-btn { background: var(--felt) !important; box-shadow: none !important; }
.cta-secondary, .btn-ghost { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.btn-primary:hover, .cta-primary:hover { background: var(--felt-hover) !important; }

/* Form fields and segmented tabs */
input[type=text], input[type=number], input:not([type]), select, textarea {
  background: var(--surface-2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important;
}
input::placeholder { color: var(--ink-soft) !important; opacity: 0.8; }
.tabs { background: var(--surface-2) !important; border: 1px solid var(--line); }
.tab { color: var(--ink-soft) !important; }
.tab.active { background: var(--felt) !important; box-shadow: none !important; }
.badge { background: var(--surface) !important; border-color: var(--line) !important; color: var(--felt) !important; }

/* Poker math pages: their own dark mode used navy panels */
.concept-card, .quiz-container, .poker-container .question:not(.correct-answer):not(.wrong-answer):not(.partial-answer) { background-color: var(--surface) !important; }
.formula-box, .mode-toggle, .custom-check-box,
.options-label:not(.selected):not(.option-wrong):not(.option-missed):not(.option-correct-picked) { background-color: var(--surface-2) !important; border-color: var(--line) !important; }

/* How to Play: purple buttons and card backs become brand colours */
.wt-next-btn { background: var(--felt) !important; box-shadow: none !important; }
.mc.facedown, .wt-seat-cards .mc-mini { background: repeating-linear-gradient(45deg, #1c3d2e 0 4px, #2a5a43 4px 8px) !important; border-color: #1c3d2e !important; }
code { background: var(--surface-2); border: 1px solid var(--line); }
:root[data-theme] .concept-card div[style*="background: var(--bg-color)"] { background-color: var(--surface-2) !important; }

/* Poker table on phones: the game name needs the top bar's space more than the logo does. */
@media (max-width: 860px), (max-aspect-ratio: 1/1), (max-height: 520px) {
  .topbar a.logo { display: none !important; }
}

/* Jumping to a section (e.g. /#trainers) lands below the sticky navigation bar, not under it. */
[id] { scroll-margin-top: 88px; }

/* "Read the lesson first" banner at the top of every trainer */
.lesson-first { max-width: 860px; margin: 0 auto 18px; padding: 11px 16px; border-radius: 12px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--felt); color: var(--ink-soft); font-weight: 500; font-size: 0.93rem; }
.lesson-first a { color: var(--felt) !important; font-weight: 700; text-decoration: none; }
.lesson-first a:hover { text-decoration: underline; }
.quiz-container .lesson-first { margin: -6px 0 18px; }