/* drawn font pair: onest_inter */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
/* bold.css v2 — dark theme, aggressive typography, high-energy iGaming
   Fonts: Barlow Condensed (headings) + DM Sans (body)
   Mood: sports betting, dark UI, teal/green accents, card elevation
   ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Brand — overridden per-site via layout.html */
  --color-brand:          #0d0f1a;
  --color-accent:         #00d4aa;
  --color-accent-hover:   #00b890;
  --color-accent-light:   rgba(0,212,170,0.12);

  /* Surfaces — dark theme */
  --color-bg-primary:     #0d0f1a;
  --color-bg-section:     #111422;
  --color-bg-section-alt: #161928;
  --color-bg-dark:        var(--color-brand);
  --color-bg-card:        #1a1d2e;
  --color-bg-card-hover:  #1e2235;

  /* Text */
  --color-text-primary:   #f0f2f8;
  --color-text-secondary: #c8cdd8;
  --color-text-muted:     #7d8494;
  --color-text-light:     #4a5060;
  --color-text-inverse:   #0d0f1a;

  /* Borders */
  --color-border:         rgba(255,255,255,0.08);
  --color-border-strong:  rgba(255,255,255,0.14);

  /* Status */
  --color-live:           #ef4444;
  --color-success:        #00d4aa;
  --color-warning:        #f59e0b;
  --color-star:           #f59e0b;
  --color-accent-red:     #ff4757;

  /* Elevation — on dark surfaces */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-lg:  0 8px 28px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.6), 0 6px 18px rgba(0,0,0,0.35);
  --shadow-accent: 0 4px 20px rgba(0,212,170,0.25);

  /* Radii */
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-btn: 8px;
  --radius-card: 12px;

  /* Spacing */
  --spacing-section:    80px;
  --spacing-section-sm: 56px;
  --spacing-block:      48px;

  /* Fonts */
  --font-heading: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--color-accent-text); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }

/* ── Base ────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ──────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.375rem, 2.5vw, 1.875rem); }
h4 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 700; }
h5 {
  font-size: 0.6875rem;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-light);
}

p { color: var(--color-text-secondary); }
strong { font-weight: 600; color: var(--color-text-primary); }

/* ── Layout ──────────────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 640px) { .container { padding: 0 20px; } }

section {
  padding: var(--spacing-section) 0;
  border-bottom: 1px solid var(--color-border);
}
section:nth-of-type(even) { background: var(--color-bg-section); }

/* ── Header ──────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13,15,26,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 var(--color-border), 0 4px 20px rgba(0,0,0,0.4);
  padding: 14px 0;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.site-logo__img { max-height: 32px; width: auto; display: inline-block; vertical-align: middle; }

.site-logo {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.site-logo:hover { color: var(--color-accent-text); }

.site-logo-flag {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 8px;
  vertical-align: middle;
}
.site-logo-flag svg {
  height: 16px;
  width: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
  display: block;
}

.site-nav { display: flex; gap: 28px; }
.site-nav a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
  letter-spacing: 0.01em;
}
.site-nav a:hover { color: var(--color-accent-text); }
.site-nav a[aria-current="page"] { color: var(--color-accent-text); border-bottom: 2px solid var(--color-accent); padding-bottom: 2px; }

/* ── Mobile nav toggle ── */
.site-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.site-nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text-secondary);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.site-nav-toggle--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav-toggle--open span:nth-child(2) { opacity: 0; }
.site-nav-toggle--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-nav-toggle:hover span { background: var(--color-accent); }

.footer-nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.footer-nav a {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--color-accent-text); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: var(--radius-btn);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-accent);
  letter-spacing: 0.01em;
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 6px 28px rgba(0,212,170,0.35);
  transform: translateY(-1px);
  color: var(--color-text-inverse);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  background: transparent;
  color: var(--color-accent-text);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 12px 24px;
  border-radius: var(--radius-btn);
  border: 1.5px solid var(--color-accent);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-secondary:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.btn-sm { font-size: 0.875rem; padding: 10px 20px; }

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  background: var(--card-bg-override, var(--color-bg-card));
  border: var(--card-border, 1px solid var(--color-border));
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--card-shadow, var(--shadow-sm));
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.card--elevated { box-shadow: var(--shadow-md); }
.card--accent {
  border-color: rgba(0,212,170,0.25);
  box-shadow: 0 0 0 1px rgba(0,212,170,0.1), var(--shadow-md);
}

/* ── Badges & Tags ───────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}
.badge--accent  { background: var(--color-accent-light); color: var(--color-accent-text); }
.badge--live    { background: rgba(239,68,68,0.15); color: var(--color-live); }
.badge--success { background: rgba(0,212,170,0.12); color: var(--color-success); }
.badge--dark    { background: rgba(255,255,255,0.07); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* ── Divider ─────────────────────────────────────────────────────── */
.rule-accent {
  width: 40px;
  height: 3px;
  background: var(--color-accent);
  margin: 12px 0 20px;
  border-radius: 2px;
}

/* ── Tables ──────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th {
  background: var(--color-bg-section);
  color: var(--color-text-light);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 16px;
  text-align: start;
  border-bottom: 1px solid var(--color-border-strong);
}
td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--color-bg-section); }
td strong { color: var(--color-text-primary); }
th[scope="row"] { padding: 14px 16px; font-size: 0.8125rem; background: color-mix(in srgb, var(--color-bg-section) 50%, transparent); }

/* ── Utility ─────────────────────────────────────────────────────── */
.text-muted   { color: var(--color-text-muted); }
.text-accent  { color: var(--color-accent-text); }
.text-light   { color: var(--color-text-light); }
.text-inverse { color: var(--color-text-inverse); }
.font-heading { font-family: var(--font-heading); }

.section-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent-text);
  margin-bottom: 8px;
}
.section-title { margin-bottom: 8px; }
.section-lead  { color: var(--color-text-muted); font-size: 1.0625rem; max-width: 600px; margin-top: 12px; }

/* ── Stars ───────────────────────────────────────────────────────── */
.stars { color: var(--color-star); letter-spacing: 2px; }

/* ── Dark sections (hero, banners) ───────────────────────────────── */
.dark-section {
  background: var(--color-brand);
  color: var(--color-text-primary);
}
/* In bold theme body IS dark, so dark-section just uses brand color */
.dark-section h1, .dark-section h2, .dark-section h3 { color: var(--color-text-primary); }
.dark-section p { color: var(--color-text-secondary); }
.dark-section .text-muted { color: var(--color-text-muted); }
.dark-section .card {
  background: var(--color-bg-section-alt);
  border-color: var(--color-border);
}

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-bg-section);
  border-top: 1px solid var(--color-border);
  padding: 40px 0;
}
.footer-rg {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}
.footer-copy { font-size: 0.75rem; color: var(--color-text-muted); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .editorial-grid,
  .editorial-grid--reversed { grid-template-columns: 1fr !important; gap: 32px; }
}
@media (max-width: 640px) {
  section { padding: var(--spacing-section-sm) 0; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.875rem; }
  .btn-primary { width: 100%; justify-content: center; }

  /* Mobile nav */
  .site-nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: var(--color-bg-section);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    padding: 8px 0;
    gap: 0;
    z-index: 99;
  }
  .site-nav.site-nav--open { display: flex; }
  .site-nav a {
    padding: 12px 20px;
    font-size: 0.9375rem;
    border-bottom: none;
  }
  .site-nav a[aria-current="page"] {
    border-bottom: none;
    border-inline-start: 3px solid var(--color-accent);
    padding-inline-start: 17px;
  }
  .site-header .container { position: relative; }
}

/* ── Editorial grid (for bold pages using asymmetric layout) ─────── */
.editorial-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 56px;
  align-items: start;
}
.editorial-grid--reversed { grid-template-columns: 2fr 3fr; }

/* ── Mobile: text always before images ──────────────────────────── */
/* Global rule: on mobile all __media / __image containers come after text.
   Block-level order:-1 overrides are prohibited by this convention. */
@media (max-width: 768px) {
  [class*="__media"],
  [class*="__image"] { order: 2; }
  [class*="__body"],
  [class*="__copy"],
  [class*="__content"],
  [class*="__text"]  { order: 1; }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Broken image shimmer ────────────────────────────────────────── */
img.img-broken {
  display: block;
  min-height: 160px;
  background: linear-gradient(90deg, var(--color-bg-section) 25%, var(--color-bg-section-alt) 50%, var(--color-bg-section) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { img.img-broken { animation: none; } }

/* Brand-pill behind low-contrast logos (added by build.py contrast guard) */
.site-logo__pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  line-height: 0;
}
.site-logo__pill img { display: block; }

/* Caption under the logo (design.logo_note) — «Неофициальный сайт» and the like.
   Put here, not inline in build.py: the look belongs to the skin, and the QA
   check «every block class has CSS» rightly fails on decorative classes with
   no rules. Colour and the missing underline come from .site-logo itself. */
.site-logo__stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.1;
}
.site-logo__note {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.62;
  white-space: nowrap;
}

/* Header logo row: logo (or brand text), optional pill and geo flag must sit
   on one line, vertically centred — the global img{display:block} reset used
   to push the flag under the logo */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-logo .site-logo__img { display: block; height: 36px; width: auto; }
/* В шапке логотип крупнее: 36px рассчитаны на квадратную марку, а у словесного
   логотипа (600x300 и шире) при такой высоте остаётся около 70px ширины —
   на первом экране он читался как иконка, а не как логотип бренда. */
.site-header .site-logo .site-logo__img { height: 64px; }
@media (max-width: 600px) {
  .site-header .site-logo .site-logo__img { height: 48px; }
}
.site-logo-flag { margin-inline-start: 0; }

/* nav links carry .site-nav__link from build.py's nav builder */
.site-nav__link { text-decoration: none; }


/* generated palette — theme=dark accent=#fb4d00 density=roomy */
:root {
  --color-accent: #fb4d00;
  --color-accent-hover: #ff5600;
  --color-accent-light: rgba(251,77,0,0.14);
  --color-accent-red: #ff4757;
  --color-accent-text: #fb4d00;
  --color-bg-card: #1c1c1f;
  --color-bg-card-hover: #212125;
  --color-bg-dark: #001d3a;
  --color-bg-primary: #0b0b0d;
  --color-bg-section: #121214;
  --color-bg-section-alt: #17171a;
  --color-border: rgba(255,255,255,0.10);
  --color-border-strong: rgba(255,255,255,0.18);
  --color-brand: #001d3a;
  --color-dark-border: rgba(255,255,255,0.24);
  --color-device-frame: #2a2a2e;
  --color-live: #ef4444;
  --color-on-accent: #0b0d10;
  --color-star: #f59e0b;
  --color-success: #22c55e;
  --color-text-inverse: #0b0b0d;
  --color-text-light: #5c5d63;
  --color-text-muted: #8e8f95;
  --color-text-primary: #f2f2f3;
  --color-text-secondary: #c9c9cd;
  --color-warning: #f59e0b;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Onest', 'Segoe UI', system-ui, sans-serif;
  --radius-btn: 3px;
  --radius-card: 3px;
  --radius-lg: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;
  --radius-xl: 4px;
  --radius-xs: 2px;
  --shadow-accent: 0 4px 20px rgba(251,77,0,0.28);
  --shadow-lg: 0 3px 8px rgba(0,0,0,.20);
  --shadow-md: 0 2px 4px rgba(0,0,0,.16);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.14);
  --shadow-xl: 0 6px 14px rgba(0,0,0,.24);
  --shadow-xs: 0 1px 1px rgba(0,0,0,.10);
  --spacing-block: 56px;
  --spacing-section: 96px;
  --spacing-section-sm: 64px;
}