/*
Theme Name: Esports Theme
Theme URI: https://foxybetting.com
Author: Foxy Team
Description: Custom gaming and esports theme for FoxyBetting.
Version: 1.1.0
Text Domain: esports-theme
*/

:root {
  /* Colors */
  --color-surface: #10131d;
  --color-surface-dim: #10131d;
  --color-surface-bright: #363944;
  --color-surface-container-lowest: #0b0e18;
  --color-surface-container-low: #181b26;
  --color-surface-container: #1c1f2a;
  --color-surface-container-high: #272a35;
  --color-surface-container-highest: #323440;
  
  --color-on-surface: #e0e1f1;
  --color-on-surface-variant: #c4caac;
  --color-inverse-surface: #e0e1f1;
  --color-inverse-on-surface: #2d303b;
  
  --color-outline: #8e9479;
  --color-outline-variant: #434933;
  --color-surface-tint: #a8d700;
  
  --color-primary: #ffffff;
  --color-on-primary: #273500;
  --color-primary-container: #c0f500;
  --color-on-primary-container: #546d00;
  
  --color-secondary: #e0b6ff;
  --color-on-secondary: #4c007d;
  --color-secondary-container: #6d11ad;
  --color-on-secondary-container: #d7a4ff;
  
  --color-background: #10131d;
  --color-on-background: #e0e1f1;
  
  --color-neon-green: #C8FF00;
  --color-neon-purple: #9D4EDD;
  --color-odds-up: #00FFA3;
  --color-odds-down: #FF3D00;
  --color-cyan: #43e8ff;
  --color-ink: #070913;
  
  /* Typography */
  --font-family-display: 'Montserrat', sans-serif;
  --font-family-body: 'Inter', sans-serif;
  --font-family-mono: 'JetBrains Mono', monospace;
  
  /* Spacing */
  --spacing-unit: 4px;
  --spacing-gutter: 16px;
  --spacing-margin-mobile: 16px;
  --spacing-margin-desktop: 32px;
  --max-width: 1440px;
}

/* Base resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-ink);
  background-image:
    linear-gradient(rgba(67, 232, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 232, 255, .025) 1px, transparent 1px);
  background-size: 38px 38px;
  color: var(--color-on-background);
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  font-weight: 700;
  margin-bottom: var(--spacing-gutter);
}

a {
  color: var(--color-neon-green);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

a:hover {
  text-shadow: 0 0 8px rgba(200, 255, 0, 0.4);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-cyan);
  outline-offset: 4px;
}

/* Layout */
.esports-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-margin-mobile);
}

@media (min-width: 768px) {
  .esports-container {
    padding: 0 var(--spacing-margin-desktop);
  }
}

.esports-header {
  background: rgba(7, 9, 19, .9);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(67, 232, 255, .2);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.esports-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.esports-brand {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--color-on-background);
  letter-spacing: .02em;
  text-shadow: 0 0 18px rgba(200, 255, 0, .2);
}

.esports-brand-accent {
  color: var(--color-neon-green);
}

/* Buttons */
.esports-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-mono);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 0; /* Sharp corners */
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: all 0.2s ease;
}

.esports-btn-primary {
  background-color: var(--color-neon-green);
  color: #000;
  box-shadow: 4px 4px 0 var(--color-neon-purple), 0 0 0 rgba(200, 255, 0, 0);
}

.esports-btn-primary:hover {
  box-shadow: 6px 6px 0 var(--color-neon-purple), 0 0 22px rgba(200, 255, 0, 0.4);
  transform: translateY(-2px);
}

.esports-btn-secondary {
  background-color: transparent;
  color: var(--color-on-background);
  border: 1px solid rgba(67, 232, 255, .55);
}

.esports-btn-secondary:hover {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}

/* Match Row Component */
.esports-match-row {
  background-color: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  padding: 16px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.2s;
}

.esports-match-row:hover {
  border-color: var(--color-neon-purple);
}

@media (min-width: 768px) {
  .esports-match-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.esports-match-teams {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.esports-team {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 18px;
}

.esports-match-vs {
  font-family: var(--font-family-mono);
  color: var(--color-neon-purple);
  font-size: 14px;
}

.esports-match-odds {
  display: flex;
  gap: 8px;
}

.esports-odd-btn {
  background-color: var(--color-surface-container-highest);
  border: 1px solid var(--color-outline-variant);
  color: var(--color-on-background);
  font-family: var(--font-family-mono);
  font-weight: 700;
  font-size: 16px;
  padding: 8px 16px;
  min-width: 80px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.esports-odd-btn:hover {
  border-color: var(--color-neon-green);
  color: var(--color-neon-green);
}

.esports-odd-btn.down {
  border-color: var(--color-odds-down);
  color: var(--color-odds-down);
}

.esports-odd-btn.up {
  border-color: var(--color-odds-up);
  color: var(--color-odds-up);
}

/* Chips */
.esports-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.esports-chips::-webkit-scrollbar {
  display: none;
}

.esports-chip {
  background-color: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  padding: 8px 16px;
  font-family: var(--font-family-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}

.esports-chip.active, .esports-chip:hover {
  border-color: var(--color-neon-purple);
  color: var(--color-neon-purple);
}

/* Glassmorphism Panel */
.esports-panel {
  background: rgba(22, 27, 42, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-outline-variant);
  padding: 24px;
}

/* Footer */
.esports-footer {
  margin-top: 64px;
  padding: 40px 0;
  background-color: var(--color-surface-container-lowest);
  border-top: 1px solid var(--color-outline-variant);
  font-family: var(--font-family-mono);
  font-size: 12px;
  color: var(--color-on-surface-variant);
  text-align: center;
}

.esports-brand small {
  display: block;
  color: var(--color-neon-purple);
  font: 700 10px/1 var(--font-family-mono);
  letter-spacing: .18em;
}

.esports-main-nav {
  display: flex;
  gap: 24px;
  font: 700 12px/1 var(--font-family-mono);
  text-transform: uppercase;
}

.esports-world-switcher {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--color-outline-variant);
  border-radius: 2px;
  background: rgba(24, 27, 38, .9);
  font: 700 11px/1 var(--font-family-mono);
  text-transform: uppercase;
}

.esports-world-switcher span,
.esports-world-switcher strong {
  padding: 8px 12px;
  border-radius: 1px;
}

.esports-world-switcher span { color: var(--color-on-surface-variant); }
.esports-world-switcher strong { color: #111; background: var(--color-neon-green); }
.esports-header-actions { display: flex; align-items: center; gap: 10px; }
.esports-header-ggbet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  color: #090b14;
  background: var(--color-neon-green);
  box-shadow: 3px 3px 0 var(--color-neon-purple);
  font: 900 12px/1 var(--font-family-display);
  letter-spacing: .04em;
}
.esports-header-ggbet span { font: 800 8px/1 var(--font-family-mono); letter-spacing: .08em; text-transform: uppercase; }
.esports-header-ggbet:hover { color: #090b14; text-shadow: none; transform: translateY(-1px); }

.esports-lang-switcher {
  position: relative;
  z-index: 100;
  font: 700 11px/1 var(--font-family-mono);
  text-transform: uppercase;
}

.esports-lang-switcher summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--color-outline-variant);
  border-radius: 2px;
  background: rgba(24, 27, 38, .9);
  color: var(--color-on-surface);
  cursor: pointer;
  list-style: none;
}

.esports-lang-switcher summary::-webkit-details-marker {
  display: none;
}

.esports-lang-label {
  color: var(--color-on-surface-variant);
  font-size: 10px;
}

.esports-lang-switcher summary strong {
  color: var(--color-neon-green);
}

.esports-lang-caret {
  color: var(--color-on-surface-variant);
  font-size: 10px;
  transition: transform .16s ease;
}

.esports-lang-switcher[open] summary {
  border-color: var(--color-neon-purple);
}

.esports-lang-switcher[open] .esports-lang-caret {
  transform: rotate(180deg);
}

.esports-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 3px;
  width: min(240px, calc(100vw - 28px));
  max-height: min(380px, calc(100vh - 110px));
  overflow-y: auto;
  border: 1px solid var(--color-outline-variant);
  border-radius: 2px;
  background: #0d0f1a;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .6), 0 0 0 1px rgba(171, 214, 0, .1);
  padding: 8px;
}

.esports-lang-menu-title {
  display: block;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  font-size: 9px;
  letter-spacing: .08em;
}

.esports-lang-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 2px;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  font-size: 11px;
}

.esports-lang-menu-item:hover,
.esports-lang-menu-item.esports-lang-active {
  background: rgba(171, 214, 0, .12);
  color: var(--color-neon-green);
}

.esports-lang-code {
  display: inline-block;
  min-width: 20px;
  font-weight: 900;
  color: var(--color-neon-purple);
}

.esports-lang-menu-item:hover .esports-lang-code,
.esports-lang-menu-item.esports-lang-active .esports-lang-code {
  color: var(--color-neon-green);
}

.esports-lang-name {
  font-size: 11px;
  text-transform: none;
}

.esports-hero {
  position: relative;
  padding: 106px 0 82px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7, 9, 19, .92), rgba(7, 9, 19, .5)),
    radial-gradient(circle at 78% 27%, rgba(157, 78, 221, .42), transparent 27%),
    radial-gradient(circle at 62% 70%, rgba(67, 232, 255, .16), transparent 26%),
    linear-gradient(135deg, var(--color-surface-container-lowest), #14112a);
  border-bottom: 1px solid rgba(67, 232, 255, .2);
}

.esports-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .32; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.035) 3px 4px); }
.esports-hero > * { position: relative; z-index: 1; }

.esports-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, .5fr);
  gap: 48px;
  align-items: center;
}

.esports-kicker {
  color: var(--color-neon-green);
  font: 700 12px/1.4 var(--font-family-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.esports-hero h1 {
  max-width: 820px;
  margin: 16px 0;
  font-size: clamp(46px, 6.2vw, 84px);
  line-height: .98;
  letter-spacing: -.045em;
}
.esports-hero h1 em { color: var(--color-neon-green); font-style: normal; text-shadow: 3px 0 var(--color-neon-purple); }

.esports-hero p { max-width: 720px; color: var(--color-on-surface-variant); }
.esports-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.esports-trust-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.esports-trust-strip span { padding: 7px 9px; border: 1px solid rgba(67, 232, 255, .28); color: var(--color-on-surface-variant); background: rgba(7, 9, 19, .62); font: 700 9px/1 var(--font-family-mono); letter-spacing: .08em; text-transform: uppercase; }

.esports-hero-panel {
  display: grid;
  padding: 28px;
  position: relative;
  border: 1px solid rgba(67, 232, 255, .65);
  background: linear-gradient(145deg, rgba(17, 25, 46, .94), rgba(7, 9, 19, .92));
  box-shadow: 8px 8px 0 rgba(157, 78, 221, .45), 0 0 48px rgba(67, 232, 255, .12);
}

.esports-panel-topline { color: var(--color-cyan); font: 700 11px/1 var(--font-family-mono); letter-spacing: .13em; }
.esports-pulse { display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--color-neon-green); box-shadow: 0 0 12px var(--color-neon-green); animation: esports-blink 1.7s infinite; }
.esports-pulse-muted { background: var(--color-neon-purple); box-shadow: 0 0 10px var(--color-neon-purple); animation: none; }
@keyframes esports-blink { 50% { opacity: .35; } }
.esports-hero-panel strong { margin: 18px 0 8px; font: 800 72px/.9 var(--font-family-display); }
.esports-hero-panel p { font-size: 14px; }
.esports-data-readout { display: grid; gap: 9px; margin-top: 22px; padding-top: 15px; border-top: 1px solid rgba(67, 232, 255, .2); }
.esports-data-readout div { display: flex; justify-content: space-between; gap: 12px; font: 700 10px/1.3 var(--font-family-mono); letter-spacing: .05em; }
.esports-data-readout dt { color: var(--color-on-surface-variant); }
.esports-data-readout dd { margin: 0; color: var(--color-cyan); text-align: right; }

.esports-offer-band {
  position: relative;
  overflow: hidden;
  padding: 30px 0;
  border-block: 1px solid rgba(200, 255, 0, .45);
  background:
    linear-gradient(90deg, rgba(200, 255, 0, .08), transparent 45%),
    linear-gradient(135deg, #12180d, #100b20 76%);
}
.esports-offer-band::after { content: 'GG'; position: absolute; right: 2vw; top: 50%; color: rgba(200, 255, 0, .035); font: 900 190px/.8 var(--font-family-display); transform: translateY(-50%) skewX(-9deg); pointer-events: none; }
.esports-offer-band-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.esports-offer-band h2 { margin: 7px 0 8px; font-size: clamp(25px, 3vw, 38px); line-height: 1.05; }
.esports-offer-band p { max-width: 760px; color: var(--color-on-surface-variant); }
.esports-offer-mark { display: grid; grid-template-columns: auto 1fr; align-items: end; width: 138px; padding: 16px; color: var(--color-ink); background: var(--color-neon-green); box-shadow: 6px 6px 0 var(--color-neon-purple); transform: skewX(-4deg); }
.esports-offer-mark span, .esports-offer-mark strong { font: 900 32px/.85 var(--font-family-display); letter-spacing: -.08em; }
.esports-offer-mark strong { color: #5c168b; }
.esports-offer-mark small { grid-column: 1 / -1; margin-top: 9px; font: 900 8px/1 var(--font-family-mono); letter-spacing: .13em; }
.esports-offer-proof { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.esports-offer-proof span { padding: 6px 8px; border: 1px solid rgba(200, 255, 0, .28); color: var(--color-neon-green); font: 700 9px/1 var(--font-family-mono); letter-spacing: .06em; text-transform: uppercase; }

.esports-section { padding-top: 72px; padding-bottom: 72px; }
.esports-section-head { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin-bottom: 30px; }
.esports-section-head h2 { margin: 8px 0 0; font-size: clamp(30px, 4vw, 48px); }
.esports-section-head > p { max-width: 560px; color: var(--color-on-surface-variant); }

.esports-game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.esports-game-card {
  overflow: hidden;
  border: 1px solid var(--color-outline-variant);
  position: relative;
  background: linear-gradient(160deg, rgba(28, 31, 42, .96), rgba(10, 12, 24, .96));
  transition: transform .2s ease, border-color .2s ease;
}

.esports-game-card:hover { transform: translateY(-6px); border-color: var(--color-cyan); box-shadow: 0 18px 32px rgba(0, 0, 0, .34); }
.esports-game-card::before { content: 'GAME FILE'; position: absolute; z-index: 1; top: 10px; left: 10px; padding: 5px 7px; color: var(--color-cyan); background: rgba(7,9,19,.78); font: 700 9px/1 var(--font-family-mono); letter-spacing: .1em; }
.esports-game-cover { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-container-high); }
.esports-game-cover img { width: 100%; height: 100%; object-fit: cover; }
.esports-game-cover > span { font: 800 54px/1 var(--font-family-display); color: var(--color-neon-purple); }
.esports-game-body { padding: 20px; }
.esports-game-body > span { color: var(--color-cyan); font: 700 10px/1.4 var(--font-family-mono); text-transform: uppercase; }
.esports-game-body h3 { margin: 8px 0; font-size: 21px; }
.esports-game-body h3 a { color: var(--color-on-background); }
.esports-game-body p { min-height: 60px; color: var(--color-on-surface-variant); font-size: 14px; line-height: 20px; }
.esports-game-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-outline-variant); }
.esports-game-meta small { color: var(--color-on-surface-variant); }
.esports-game-meta b { color: var(--color-neon-green); font-family: var(--font-family-mono); white-space: nowrap; }
.esports-game-ggbet {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 16px -20px -20px;
  padding: 13px 20px;
  border-top: 1px solid rgba(200, 255, 0, .22);
  color: var(--color-neon-green);
  background: rgba(200, 255, 0, .055);
  font: 800 10px/1.25 var(--font-family-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.esports-game-ggbet:hover { color: #090b14; background: var(--color-neon-green); text-shadow: none; }

.esports-market-section { background: var(--color-surface-container-lowest); border-block: 1px solid var(--color-outline-variant); }
.esports-market-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 46px; align-items: end; margin-bottom: 30px; }
.esports-market-hero h2 { max-width: 760px; margin: 9px 0 0; font-size: clamp(31px, 4.2vw, 52px); line-height: 1.02; }
.esports-market-hero > p { color: var(--color-on-surface-variant); }
.esports-market-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.esports-market-grid a { display: grid; gap: 9px; padding: 22px; border: 1px solid var(--color-outline-variant); background: var(--color-surface-container-low); }
.esports-market-grid a:hover { border-color: var(--color-neon-green); transform: translateY(-3px); }
.esports-market-grid span { color: var(--color-neon-purple); font: 700 11px/1 var(--font-family-mono); }
.esports-market-grid strong { color: var(--color-on-background); font-size: 19px; }
.esports-market-grid small { color: var(--color-on-surface-variant); }
.esports-market-grid small b { float: right; color: var(--color-neon-green); }
.esports-affiliate-note { margin-top: 22px; color: var(--color-on-surface-variant); font-size: 12px; line-height: 1.55; }
.esports-direct-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 28px;
  border: 1px solid rgba(200, 255, 0, .48);
  background: linear-gradient(120deg, rgba(200, 255, 0, .09), rgba(157, 78, 221, .11) 70%, rgba(7, 9, 19, .94));
  box-shadow: 7px 7px 0 rgba(157, 78, 221, .24);
}
.esports-direct-offer > div { display: grid; gap: 8px; }
.esports-direct-offer span { color: var(--color-neon-green); font: 800 10px/1 var(--font-family-mono); letter-spacing: .1em; }
.esports-direct-offer strong { color: var(--color-on-background); font: 800 clamp(22px, 3vw, 34px)/1.05 var(--font-family-display); }
.esports-direct-offer small { color: var(--color-on-surface-variant); }

.esports-live-section { background: linear-gradient(135deg, rgba(8, 11, 26, .8), rgba(26, 13, 42, .92)); border-block: 1px solid rgba(157, 78, 221, .42); }
.esports-live-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); gap: 58px; align-items: center; }
.esports-live-grid h2 { max-width: 620px; margin: 10px 0 16px; font-size: clamp(32px, 4vw, 54px); line-height: 1.02; }
.esports-live-grid > div > p { max-width: 640px; color: var(--color-on-surface-variant); }
.esports-live-console { padding: 26px; border: 1px solid rgba(157, 78, 221, .72); background: rgba(7, 9, 19, .84); box-shadow: 7px 7px 0 rgba(67, 232, 255, .25); }
.esports-live-console > div { display: flex; align-items: center; font: 700 13px/1.2 var(--font-family-mono); text-transform: uppercase; color: var(--color-on-background); }
.esports-live-console > p { margin: 18px 0; font-size: 14px; line-height: 1.55; }
.esports-live-console ul { list-style: none; border-top: 1px solid var(--color-outline-variant); }
.esports-live-console li { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-outline-variant); font-size: 12px; }
.esports-live-console li span { color: var(--color-neon-green); font: 700 10px/1 var(--font-family-mono); }
.esports-live-console li b { color: var(--color-on-background); }
.esports-live-console li em { color: var(--color-cyan); font: 700 10px/1 var(--font-family-mono); font-style: normal; text-align: right; }
.esports-match-radar { margin-top: 34px; }
.esports-discipline-rail { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 28px; }
.esports-discipline-rail > span { margin-right: 4px; color: var(--color-cyan); font: 800 10px/1 var(--font-family-mono); letter-spacing: .12em; }
.esports-discipline-rail a,
.esports-discipline-rail em { display: inline-flex; gap: 9px; padding: 8px 10px; border: 1px solid rgba(67, 232, 255, .25); color: var(--color-on-surface-variant); background: rgba(7, 9, 19, .58); font: 700 10px/1 var(--font-family-mono); font-style: normal; }
.esports-discipline-rail b { color: var(--color-neon-green); }
.esports-discipline-rail a:hover { border-color: var(--color-neon-green); color: var(--color-on-background); }
.esports-match-radar-head { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 14px; color: var(--color-on-surface-variant); font: 700 10px/1.3 var(--font-family-mono); letter-spacing: .08em; text-transform: uppercase; }
.esports-match-radar-head > span { color: var(--color-neon-green); }
.esports-match-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.esports-match-card { display: flex; flex-direction: column; overflow: hidden; min-height: 284px; border: 1px solid rgba(67, 232, 255, .35); background: linear-gradient(145deg, rgba(22, 28, 49, .97), rgba(7, 9, 19, .98)); box-shadow: 5px 5px 0 rgba(157, 78, 221, .2); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.esports-match-card:hover { transform: translateY(-3px); border-color: rgba(67, 232, 255, .72); box-shadow: 7px 7px 0 rgba(157, 78, 221, .3), 0 18px 34px rgba(0, 0, 0, .28); }
.esports-match-card-live { border-color: rgba(200, 255, 0, .58); box-shadow: 5px 5px 0 rgba(200, 255, 0, .14), 0 0 28px rgba(200, 255, 0, .07); }
.esports-match-card-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(67, 232, 255, .16); font: 700 10px/1.2 var(--font-family-mono); letter-spacing: .06em; text-transform: uppercase; }
.esports-match-card-head span { color: var(--color-neon-green); }
.esports-match-card-head span a { color: inherit; }
.esports-match-card-head small { overflow: hidden; color: var(--color-on-surface-variant); font: inherit; text-overflow: ellipsis; white-space: nowrap; }
.esports-match-state { display: flex; justify-content: space-between; gap: 14px; padding: 9px 14px; border-bottom: 1px solid rgba(67, 232, 255, .12); color: var(--color-on-surface-variant); font: 700 9px/1.3 var(--font-family-mono); letter-spacing: .07em; text-transform: uppercase; }
.esports-match-state b { color: var(--color-neon-green); }
.esports-match-state span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esports-match-teams { display: grid; gap: 1px; padding: 1px 0; }
.esports-match-team { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 58px; padding: 12px 14px; background: rgba(7, 9, 19, .3); }
.esports-match-team-name { display: flex; min-width: 0; align-items: center; gap: 9px; overflow: hidden; color: var(--color-on-background); }
.esports-match-team-name img { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; object-fit: contain; background: rgba(255, 255, 255, .08); }
.esports-match-team-name strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.esports-match-team b { color: var(--color-cyan); font: 900 22px/1 var(--font-family-display); }
.esports-match-card footer { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-top: 1px solid rgba(67, 232, 255, .16); color: var(--color-on-surface-variant); font: 700 10px/1.2 var(--font-family-mono); }
.esports-match-card footer strong { color: var(--color-neon-purple); }
.esports-match-ggbet { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding: 12px 14px; color: #090b14; background: var(--color-neon-green); font: 900 10px/1.2 var(--font-family-mono); letter-spacing: .06em; text-transform: uppercase; }
.esports-match-ggbet:hover { color: #090b14; background: var(--color-cyan); text-shadow: none; }
.esports-match-radar-next { margin-top: 34px; }
.esports-match-empty { padding: 28px; border: 1px dashed rgba(67, 232, 255, .45); background: rgba(7, 9, 19, .54); }
.esports-match-empty span { color: var(--color-cyan); font: 700 11px/1 var(--font-family-mono); letter-spacing: .1em; }
.esports-match-empty p { margin: 12px 0 0; max-width: 680px; color: var(--color-on-surface-variant); }

.esports-safety { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 32px; align-items: center; padding: 28px; border-left: 4px solid var(--color-neon-purple); background: var(--color-surface-container-low); }
.esports-safety h2 { margin: 8px 0 0; }
.esports-safety p { color: var(--color-on-surface-variant); }
.esports-empty { padding: 36px; border: 1px dashed var(--color-outline); background: var(--color-surface-container-low); }

.esports-back-link { display: inline-block; margin: 24px 0; color: var(--color-neon-green); font: 700 12px/1 var(--font-family-mono); text-transform: uppercase; }
.esports-game-detail { display: grid; grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr); gap: 48px; align-items: start; }
.esports-game-stage { padding-top: 24px; }
.esports-game-detail-cover { display: grid; place-items: center; min-height: 360px; overflow: hidden; position: relative; border: 1px solid var(--color-outline-variant); background: var(--color-surface-container-high); box-shadow: 8px 8px 0 rgba(157, 78, 221, .25); }
.esports-game-detail-cover img { display: block; width: 100%; height: auto; }
.esports-game-detail-cover span { color: var(--color-neon-purple); font: 800 64px/1 var(--font-family-display); }
.esports-game-detail-cover small { position: absolute; left: 14px; bottom: 14px; padding: 7px 9px; color: var(--color-cyan); background: rgba(7, 9, 19, .86); font: 800 9px/1 var(--font-family-mono); letter-spacing: .1em; }
.esports-game-detail h1 { margin: 12px 0 8px; font-size: clamp(42px, 6vw, 72px); line-height: 1; }
.esports-game-detail-genres { color: var(--color-neon-purple); font: 700 12px/1.5 var(--font-family-mono); text-transform: uppercase; }
.esports-game-detail-copy { margin: 28px 0; color: var(--color-on-surface-variant); font-size: 17px; line-height: 1.7; }
.esports-game-primary-cta { margin: -10px 0 28px; }
.esports-game-facts { display: grid; gap: 1px; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--color-outline-variant); }
.esports-game-facts div { padding: 18px; background: var(--color-surface-container-low); }
.esports-game-facts dt { color: var(--color-on-surface-variant); font: 700 10px/1 var(--font-family-mono); text-transform: uppercase; }
.esports-game-facts dd { margin: 8px 0 0; color: var(--color-on-background); font-weight: 700; }
.esports-single-market { margin-top: 72px; padding: 32px; border: 1px solid var(--color-outline-variant); background: var(--color-surface-container-lowest); }
.esports-single-market h2 { margin: 10px 0; }
.esports-single-market > p { margin-bottom: 24px; color: var(--color-on-surface-variant); }
.esports-game-offer { display: grid; grid-template-columns: 138px minmax(0, 1fr) auto; gap: 30px; align-items: center; margin-top: 44px; padding: 30px; border: 1px solid rgba(200, 255, 0, .42); background: linear-gradient(125deg, rgba(200, 255, 0, .075), rgba(157, 78, 221, .08) 62%, rgba(7, 9, 19, .94)); }
.esports-game-offer h2 { margin: 8px 0; font-size: clamp(26px, 3.1vw, 40px); line-height: 1.07; }
.esports-game-offer p { max-width: 780px; color: var(--color-on-surface-variant); }
.esports-game-radar { margin-top: 0; }

@media (max-width: 1050px) {
  .esports-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esports-match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esports-market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .esports-main-nav { display: none; }
  .esports-offer-band-grid, .esports-game-offer { grid-template-columns: 126px minmax(0, 1fr); }
  .esports-offer-band-grid > .esports-btn, .esports-game-offer > .esports-btn { grid-column: 2; justify-self: start; }
}

@media (max-width: 720px) {
  .esports-header { position: static; }
  .esports-header-inner { gap: 12px; }
  .esports-header-actions { margin-left: auto; }
  .esports-header-ggbet { padding: 9px; }
  .esports-header-ggbet span { display: none; }
  .esports-brand { font-size: 18px; }
  .esports-world-switcher span, .esports-world-switcher strong { padding: 7px 8px; }
  .esports-hero { padding: 56px 0 44px; }
  .esports-hero-grid, .esports-live-grid, .esports-safety, .esports-game-detail { grid-template-columns: 1fr; }
  .esports-offer-band-grid, .esports-game-offer, .esports-market-hero, .esports-direct-offer { grid-template-columns: 1fr; }
  .esports-offer-band-grid > .esports-btn, .esports-game-offer > .esports-btn { grid-column: auto; width: 100%; }
  .esports-offer-mark { width: 126px; }
  .esports-game-facts { grid-template-columns: 1fr; }
  .esports-game-grid, .esports-match-grid, .esports-market-grid { grid-template-columns: 1fr; }
  .esports-match-radar-head { display: block; }
  .esports-match-radar-head small { display: block; margin-top: 7px; }
  .esports-section-head { display: block; }
  .esports-section-head > p { margin-top: 14px; }
  .esports-game-detail-cover { min-height: 260px; }
  .esports-game-offer { padding: 24px; }
  .esports-safety { align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}