/* ============================================================
   EVA ENHANCE — Erweiterungsschicht (Standings-Broadcast-Look,
   Light-Theme, Einstellungen/Tutorial-Overlays, Responsive)
   Entfernbar: Datei + Verweise in Head-Config löschen.
   Die React-App selbst wird nicht verändert.
   ============================================================ */

/* ---------- 1. Globale Verfeinerungen (alle Routen) ---------- */

:root {
  --esl-glow: 0.45;           /* Intensität der Panel-Glows (Dark) */
  --esl-glow-soft: 0.14;
}

/* Tastatur-Fokus deutlich sichtbar (A11y) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Sanfte Panel-Übergänge überall */
.panel { transition: border-color .25s, box-shadow .25s; }

/* ---------- 2. Standings: Broadcast-/Esports-Look ---------- */

body[data-esl-route^="/standings"] main h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--foreground) 55%, color-mix(in oklab, var(--foreground) 55%, transparent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body[data-esl-route^="/standings"] main h1::after {
  content: "";
  display: block;
  width: 84px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--primary) 60%, transparent);
  -webkit-text-fill-color: initial;
}

/* Gruppen-/Poule-Panels mit feinen Glow-Kanten */
body[data-esl-route^="/standings"] .panel,
body[data-esl-route^="/divisions"] .panel {
  border-color: color-mix(in oklab, var(--primary) 28%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--primary) 4%, var(--surface)), var(--surface) 38%);
  box-shadow:
    0 0 34px -14px color-mix(in oklab, var(--primary) calc(var(--esl-glow) * 100%), transparent),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}

body[data-esl-route^="/standings"] .panel:hover,
body[data-esl-route^="/divisions"] .panel:hover {
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  box-shadow:
    0 0 44px -12px color-mix(in oklab, var(--primary) calc(var(--esl-glow) * 130%), transparent),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Panel-Kopf: Akzentleiste + Gradient wie Broadcast-Bauchbinde */
body[data-esl-route^="/standings"] .panel > div:first-child {
  position: relative;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--primary) 13%, transparent), transparent 58%),
    color-mix(in oklab, var(--surface-elevated) 72%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--primary) 22%, var(--border));
  padding-top: 14px;
  padding-bottom: 14px;
}

body[data-esl-route^="/standings"] .panel > div:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), color-mix(in oklab, var(--primary) 25%, transparent));
  box-shadow: 0 0 10px color-mix(in oklab, var(--primary) 55%, transparent);
}

body[data-esl-route^="/standings"] .panel h2 {
  font-size: 1.25rem;
  letter-spacing: .01em;
}

/* Tabellen-Typografie */
body[data-esl-route^="/standings"] table thead th {
  font-size: 10px;
  letter-spacing: .18em;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--primary) 18%, var(--border));
}

body[data-esl-route^="/standings"] table tbody td {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Rang-Spalte: Mono-Ziffern, Leader betont */
body[data-esl-route^="/standings"] table td:first-child {
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
  width: 3.2rem;
}

/* Zeilen-Hover + Zebra */
body[data-esl-route^="/standings"] table tbody tr {
  transition: background-color .15s;
}
body[data-esl-route^="/standings"] table tbody tr:nth-child(even) {
  background: color-mix(in oklab, var(--surface-elevated) 38%, transparent);
}
body[data-esl-route^="/standings"] table tbody tr:hover {
  background: color-mix(in oklab, var(--primary) 7%, transparent);
}

/* Tabellenführer: Akzent-Zeile mit Qualifikations-Leiste */
body[data-esl-route^="/standings"] table tbody tr:first-child:has(td:nth-child(4)) {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--primary) 10%, transparent), transparent 70%);
  box-shadow: inset 3px 0 0 var(--primary);
}
body[data-esl-route^="/standings"] table tbody tr:first-child:has(td:nth-child(4)) td:first-child {
  color: var(--primary);
  font-weight: 700;
}

/* Punkte-/Win%-Spalte als stärkster Wert */
body[data-esl-route^="/standings"] table td:last-child {
  font-weight: 700;
  color: var(--foreground);
}

/* ---------- 3. Match-Detail: dezente Broadcast-Politur ---------- */

body[data-esl-route^="/matches/"] .panel {
  border-color: color-mix(in oklab, var(--primary) 22%, var(--border));
  box-shadow: 0 0 30px -16px color-mix(in oklab, var(--primary) calc(var(--esl-glow) * 90%), transparent);
}

/* ---------- 4. Light-Theme (per Einstellungen umschaltbar) ---------- */

:root.esl-light {
  --background: oklch(96.5% .006 250);
  --foreground: oklch(21% .02 250);
  --surface: oklch(99.2% .002 250);
  --surface-elevated: oklch(93.5% .008 250);
  --card: oklch(99.2% .002 250);
  --card-foreground: oklch(21% .02 250);
  --popover: oklch(99.2% .002 250);
  --popover-foreground: oklch(21% .02 250);
  --primary: oklch(52% .12 215);
  --primary-foreground: oklch(99% .002 250);
  --secondary: oklch(91% .01 250);
  --secondary-foreground: oklch(21% .02 250);
  --muted: oklch(92% .008 250);
  --muted-foreground: oklch(45% .02 250);
  --accent: oklch(90% .015 255);
  --accent-foreground: oklch(21% .02 250);
  --destructive: oklch(55% .2 25);
  --destructive-foreground: oklch(99% .002 250);
  --success: oklch(55% .15 150);
  --success-foreground: oklch(99% .002 250);
  --warning: oklch(60% .13 85);
  --warning-foreground: oklch(21% .02 250);
  --border: oklch(84% .01 250 / .9);
  --input: oklch(89% .008 250);
  --ring: oklch(52% .12 215);
  --sidebar: oklch(98% .004 250);
  --sidebar-foreground: oklch(28% .02 250);
  --sidebar-primary: oklch(52% .12 215);
  --sidebar-primary-foreground: oklch(99% .002 250);
  --sidebar-accent: oklch(91% .01 250);
  --sidebar-accent-foreground: oklch(21% .02 250);
  --sidebar-border: oklch(87% .01 250 / .9);
  --sidebar-ring: oklch(52% .12 215);
  --esl-glow: 0.16;           /* Glows im Hellen stark reduzieren */
}

:root.esl-light .panel { box-shadow: 0 1px 3px rgba(15, 30, 45, .06); }
:root.esl-light body[data-esl-route^="/standings"] .panel,
:root.esl-light body[data-esl-route^="/divisions"] .panel {
  box-shadow: 0 2px 14px -6px rgba(15, 30, 45, .12), inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* ---------- 5. Einstellungen/Tutorial-Overlay ---------- */

.esl-backdrop {
  position: fixed; inset: 0;
  z-index: 2147482500;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: color-mix(in oklab, var(--background) 55%, rgba(0, 0, 0, .5));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .22s ease;
}
.esl-backdrop.esl-open { opacity: 1; }

.esl-modal {
  width: min(680px, 100%);
  max-height: min(86vh, 900px);
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--border));
  background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 5%, var(--surface)), var(--surface) 30%);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, .5),
    0 0 44px -12px color-mix(in oklab, var(--primary) calc(var(--esl-glow) * 100%), transparent);
  color: var(--foreground);
  font-family: Inter, system-ui, sans-serif;
  transform: translateY(14px) scale(.985);
  transition: transform .22s ease;
}
.esl-backdrop.esl-open .esl-modal { transform: none; }

.esl-modal-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  background: inherit;
  border-bottom: 1px solid var(--border);
}
.esl-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--primary);
}
.esl-modal-head h2 { margin: 4px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.esl-modal-sub { margin-top: 4px; font-size: 13px; color: var(--muted-foreground); }

.esl-close {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 9px;
  background: transparent; color: var(--muted-foreground);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.esl-close:hover { color: var(--foreground); border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); background: color-mix(in oklab, var(--primary) 8%, transparent); }
.esl-close svg { width: 16px; height: 16px; }

.esl-body { padding: 20px 24px 26px; }
.esl-section { margin-bottom: 26px; }
.esl-section:last-child { margin-bottom: 0; }
.esl-label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 10px;
}

/* Theme-Karten */
.esl-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.esl-theme-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-elevated);
  cursor: pointer; text-align: left;
  color: var(--foreground);
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.esl-theme-card:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
.esl-theme-card[aria-pressed="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 0 22px -8px color-mix(in oklab, var(--primary) 60%, transparent);
}
.esl-theme-card[aria-pressed="true"]::after {
  content: "✓";
  position: absolute; top: 10px; right: 12px;
  font-size: 12px; color: var(--primary); font-weight: 700;
}
.esl-theme-preview {
  height: 44px; border-radius: 8px; overflow: hidden;
  display: flex; border: 1px solid var(--border);
}
.esl-theme-preview i { flex: 1; }
.esl-theme-name { font-size: 13px; font-weight: 600; }
.esl-theme-desc { font-size: 11px; color: var(--muted-foreground); margin-top: -6px; }

/* Akzentfarben */
.esl-swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.esl-swatch {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25);
  transition: transform .12s, box-shadow .15s;
}
.esl-swatch:hover { transform: scale(1.1); }
.esl-swatch[aria-pressed="true"] {
  border-color: var(--foreground);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--foreground) 25%, transparent);
}
.esl-swatch-custom {
  position: relative; overflow: hidden;
  background: conic-gradient(#f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa, #f87171);
}
.esl-swatch-custom input {
  position: absolute; inset: -8px;
  opacity: 0; cursor: pointer;
}

/* Select (Sprache) */
.esl-select {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--input);
  background: var(--surface-elevated);
  color: var(--foreground);
  font: 500 14px Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.esl-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent); }

/* Sprachauswahl: Suche + Weltsprachen-Liste */
.esl-lang-search {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid var(--input);
  background: var(--surface-elevated);
  color: var(--foreground);
  font: 500 14px Inter, system-ui, sans-serif;
  transition: border-color .15s, box-shadow .15s;
}
.esl-lang-search::placeholder { color: var(--muted-foreground); }
.esl-lang-search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
}
.esl-lang-list {
  max-height: 248px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in oklab, var(--surface-elevated) 55%, transparent);
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.esl-lang-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
  cursor: pointer;
  text-align: start;
  font: inherit;
  flex: none;
}
.esl-lang-row:last-child { border-bottom: 0; }
.esl-lang-row:hover { background: color-mix(in oklab, var(--primary) 8%, transparent); }
.esl-lang-row[aria-selected="true"] {
  background: color-mix(in oklab, var(--primary) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--primary);
}
.esl-lang-autonym { font-weight: 600; font-size: 14px; flex: none; min-width: 118px; }
.esl-lang-names {
  flex: 1;
  font-size: 11px;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.esl-lang-code {
  flex: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
}
.esl-lang-dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}
.esl-lang-row mark {
  background: color-mix(in oklab, var(--primary) 32%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.esl-lang-empty {
  padding: 16px;
  font-size: 12px;
  color: var(--muted-foreground);
  text-align: center;
}
.esl-lang-fallback {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--warning);
}
/* RTL-Sprachen: Auswahlleiste an der logischen Startkante */
.esl-modal[dir="rtl"] .esl-lang-row[aria-selected="true"] {
  box-shadow: inset -3px 0 0 var(--primary);
}

/* Aktionen */
.esl-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.esl-reset {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--destructive) 45%, var(--border));
  background: color-mix(in oklab, var(--destructive) 10%, transparent);
  color: var(--destructive);
  font: 600 13px Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.esl-reset:hover { background: color-mix(in oklab, var(--destructive) 18%, transparent); box-shadow: 0 0 18px -8px var(--destructive); }
.esl-reset svg { width: 14px; height: 14px; }
.esl-actions-hint { font-size: 11px; color: var(--muted-foreground); text-align: right; }

/* Tutorial: Video-Slot (modular, gefahrlos entfernbar) */
.esl-video-slot {
  border-radius: 12px; overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--primary) 26%, var(--border));
  background: #000;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
}
.esl-video-slot video,
.esl-video-slot iframe { width: 100%; height: 100%; border: 0; display: block; }
.esl-video-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  color: var(--muted-foreground);
  background:
    radial-gradient(ellipse at center, color-mix(in oklab, var(--primary) 10%, transparent), transparent 70%),
    var(--surface-elevated);
  width: 100%; height: 100%;
}
.esl-video-placeholder svg { width: 44px; height: 44px; color: var(--primary); opacity: .85; }
.esl-video-placeholder strong { color: var(--foreground); font-size: 14px; }
.esl-video-placeholder span { font-size: 12px; max-width: 380px; line-height: 1.5; }

.esl-chapters { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.esl-chapter {
  display: flex; gap: 12px; align-items: baseline;
  padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in oklab, var(--surface-elevated) 60%, transparent);
}
.esl-chapter b {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: var(--primary); letter-spacing: .12em;
  flex: none; width: 24px;
}
.esl-chapter div { font-size: 13px; line-height: 1.5; }
.esl-chapter div strong { display: block; font-size: 13px; color: var(--foreground); }
.esl-chapter div span { color: var(--muted-foreground); font-size: 12px; }

/* ---------- 5b. SEO-Footer ---------- */

footer nav[aria-label="Footer"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}
footer nav[aria-label="Footer"] a {
  padding: 2px 0;
  transition: color .15s;
}
/* Platz für das schwebende Abmelde-Schloss unten rechts */
footer > div { padding-right: 56px; }

/* ---------- 6. Responsive: Mobile bis TV ---------- */

/* Kein ungewolltes horizontales Scrollen auf schmalen Screens */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
}

/* Kleine Screens: Standings kompakt, Maps-W/L-Spalten ausblenden (± bleibt) */
@media (max-width: 560px) {
  body[data-esl-route^="/standings"] table th:nth-child(6),
  body[data-esl-route^="/standings"] table td:nth-child(6),
  body[data-esl-route^="/standings"] table th:nth-child(7),
  body[data-esl-route^="/standings"] table td:nth-child(7) { display: none; }

  body[data-esl-route^="/standings"] table thead th,
  body[data-esl-route^="/standings"] table tbody td {
    padding-left: 10px; padding-right: 10px;
  }
  body[data-esl-route^="/standings"] main h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }

  /* Einstellungen als vollflächiges Sheet — vollständig bedienbar, scrollbar */
  .esl-backdrop { padding: 0; align-items: stretch; backdrop-filter: blur(6px); }
  .esl-modal {
    width: 100%; max-width: 100%;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0; border-left: 0; border-right: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .esl-modal-head { padding: 16px 18px 12px; }
  .esl-modal-head h2 { font-size: 20px; }
  .esl-body { padding: 16px 18px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .esl-theme-grid { grid-template-columns: 1fr; }
  .esl-lang-list { max-height: 46vh; }
  .esl-lang-autonym { min-width: 88px; }
  .esl-lang-names { display: none; }          /* auf Handy nur Autonym + Code */
  .esl-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .esl-actions-hint { text-align: left; }
  .esl-reset { justify-content: center; padding: 13px 16px; }
  /* iOS zoomt bei Fokus, wenn Schrift < 16px → alle Eingaben auf 16px */
  .esl-lang-search, .esl-select, .esl-modal input[type="text"],
  .esl-modal input[type="search"], .esl-modal input:not([type]) { font-size: 16px; }
  .esl-theme-card { padding: 13px; }
  .esl-close { width: 40px; height: 40px; }
}

/* Touch-Geräte: größere Trefferflächen im Overlay */
@media (pointer: coarse) {
  .esl-close { width: 40px; height: 40px; }
  .esl-swatch { width: 40px; height: 40px; }
  .esl-lang-row { padding: 13px 12px; }
  .esl-theme-card, .esl-select, .esl-lang-search { min-height: 44px; }
}

/* Sehr große Displays / TV: Interface global skalieren */
@media (min-width: 2200px) {
  html { font-size: 18px; }
}
@media (min-width: 3200px) {
  html { font-size: 21px; }
}

/* Reduzierte Bewegung respektieren (A11y) */
@media (prefers-reduced-motion: reduce) {
  .esl-backdrop, .esl-modal, .panel, .esl-theme-card, .esl-swatch { transition: none !important; }
}