/* ═══════════════════════════════════════════════════════════════════
   WM 2026 HUB — DESIGN TOKENS (Brasilien-2014-Ästhetik)
   Von Claude Design generiert — authentischer als unsere v1
   ═══════════════════════════════════════════════════════════════════ */
/* Bunny Fonts: DSGVO-konformer Google-Fonts-Ersatz (EU-Server, kein IP-Tracking) */
@import url("https://fonts.bunny.net/css2?family=Alfa+Slab+One&family=Archivo+Black&family=Bungee&family=Cinzel:wght@500;700;900&family=Cormorant+Garamond:wght@400;500;700&family=Cormorant+SC:wght@500;700&family=Fraunces:opsz,wght@9..144,400..900&family=Inter:wght@400;500;600;700;900&family=Lilita+One&family=Lobster+Two:wght@400;700&family=Modak&family=Mulish:wght@400;600;800&family=Noto+Sans:wght@400;600;700;900&family=Oswald:wght@500;600;700&family=PT+Sans:wght@400;700&family=Rye&family=Russo+One&family=Saira+Condensed:wght@500;600;700&family=Source+Sans+3:wght@400;600;700;900&display=swap");

:root {
  /* ─── Brand palette ────────────────────────────────────────────── */
  --wm-green-900: #002816;   /* Canvas */
  --wm-green-800: #0a3b22;   /* Panel base */
  --wm-green-700: #0f5a32;   /* Panel-strong / hover */
  --wm-green-600: #336F1B;   /* Authentic FIFA-2014 Laurel */
  --wm-green-500: #009C3B;   /* Brasilien-Flaggen-Grün */
  --wm-lime:      #ABCB2D;   /* Karneval-Akzent */
  --wm-yellow:    #FDD301;   /* Cyber Yellow */
  --wm-gold-deep: #C8973A;   /* Button-Schatten-Gold */
  --wm-blue:        #003469; /* Matte midnight */
  --wm-blue-bright: #1E78C8; /* Broadcast Blue */
  --wm-orange: #F79516;      /* Beer/Sun Orange */
  --wm-red:    #D8131A;      /* Lava Red */
  --wm-cream:  #FFF7DC;
  --wm-white:  #FFFFFF;
  --wm-ink:    #001A0E;

  /* ─── Surfaces ─────────────────────────────────────────────────── */
  --paper:        var(--wm-green-900);
  --panel:        var(--wm-green-800);
  --panel-strong: var(--wm-green-700);
  --panel-raised: #11492a;

  /* ─── Foreground scale ─────────────────────────────────────────── */
  --fg-1:      #FFFFFF;
  --fg-2:      rgba(255, 255, 255, 0.72);
  --fg-3:      rgba(255, 255, 255, 0.5);
  --fg-mute:   rgba(255, 255, 255, 0.32);
  --fg-accent: var(--wm-yellow);
  --fg-lime:   var(--wm-lime);
  --fg-on-yellow: var(--wm-green-900);
  --fg-on-lime:   var(--wm-green-900);
  --fg-on-orange: var(--wm-green-900);
  --fg-on-red:    #FFFFFF;
  --fg-on-blue:   #FFFFFF;

  /* ─── Borders ──────────────────────────────────────────────────── */
  --line:        rgba(253, 211, 1, 0.18);
  --line-strong: rgba(253, 211, 1, 0.42);
  --line-soft:   rgba(255, 255, 255, 0.08);

  /* ─── Semantic ─────────────────────────────────────────────────── */
  --sem-success: var(--wm-lime);
  --sem-warning: var(--wm-orange);
  --sem-danger:  var(--wm-red);
  --sem-info:    var(--wm-blue-bright);
  --sem-live:    var(--wm-red);
  --sem-host:    var(--wm-orange);
  --sem-top:     var(--wm-yellow);
  --sem-final:   var(--wm-yellow);

  /* ─── Spacing ──────────────────────────────────────────────────── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* ─── Radii ────────────────────────────────────────────────────── */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-pill: 999px;

  /* ─── Shadows ──────────────────────────────────────────────────── */
  --sh-card:    0 8px 24px rgba(0, 0, 0, 0.45);
  --sh-deep:    0 12px 32px rgba(0, 0, 0, 0.55);
  --sh-stadium: 0 18px 40px -8px rgba(0, 0, 0, 0.7),
                0 0 0 1px rgba(253, 211, 1, 0.08) inset;
  --sh-stamp-y: 0 4px 0 var(--wm-gold-deep);
  --sh-stamp-g: 0 4px 0 #1c5a13;
  --sh-stamp-r: 0 4px 0 #8a0a12;
  --sh-glow-y:  0 0 0 3px rgba(253, 211, 1, 0.25);

  /* ─── Motion ───────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-pop:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap: cubic-bezier(0.6, 0.04, 0.98, 0.34);
  --dur-quick: 160ms;
  --dur-base:  240ms;
  --dur-emph:  420ms;

  /* ─── Type families ────────────────────────────────────────────── */
  --font-display:   "Lilita One", "Bowlby One SC", Impact, sans-serif;
  --font-condensed: "Oswald", "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body:      "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:      "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* ─── Type-Skala ───────────────────────────────────────────────── */
  --fs-display-xl: clamp(3.8rem, 9vw, 7.4rem);
  --fs-display-l:  clamp(2.4rem, 5vw, 4.4rem);
  --fs-display-m:  clamp(1.6rem, 2.6vw, 2.2rem);
  --fs-h4:         1.25rem;
  --fs-body:       1rem;
  --fs-body-l:     1.125rem;
  --fs-body-s:     0.875rem;
  --fs-caption:    0.78rem;
  --fs-eyebrow:    0.72rem;
  --fs-micro:      0.65rem;
  --lh-tight: 0.92;
  --lh-snug:  1.1;
  --lh-base:  1.5;
  --lh-loose: 1.65;
  --tr-display: 0.005em;
  --tr-eyebrow: 0.12em;
  --tr-caps:    0.08em;

  /* ─── Backward-Compatibility Aliases ───────────────────────────── */
  /* Damit das gesamte bestehende CSS (styles.css + tippspiel.css)   */
  /* automatisch die neuen Werte nutzt ohne dass wir alles umschreiben */
  --ink:         var(--fg-1);
  --muted:       var(--fg-2);
  --gold:        var(--wm-yellow);
  --warm-gold:   var(--wm-gold-deep);
  --red:         var(--wm-red);
  --green:       var(--wm-green-500);
  --deep-green:  var(--wm-green-900);
  --blue:        var(--wm-blue);
  --shadow:      var(--sh-deep);
}

* {
  box-sizing: border-box;
}

*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-body);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(
      45deg,
      var(--wm-green-700) 0px,
      var(--wm-green-700) 1px,
      transparent 1px,
      transparent 28px
    ),
    repeating-linear-gradient(
      -45deg,
      var(--wm-green-700) 0px,
      var(--wm-green-700) 1px,
      transparent 1px,
      transparent 28px
    );
  background-blend-mode: overlay;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background-image:
    radial-gradient(circle, var(--wm-yellow) 1.5px, transparent 1.5px),
    radial-gradient(circle, var(--wm-green-500) 1.5px, transparent 1.5px),
    radial-gradient(circle, var(--wm-red) 1.5px, transparent 1.5px);
  background-size: 130px 130px, 97px 97px, 160px 160px;
  background-position: 0 0, 48px 64px, 90px 30px;
  opacity: 0.07;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--paper);
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--gold);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--warm-gold);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.site-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 18px clamp(16px, 3vw, 34px) 64px;
}

.topbar {
  position: sticky;
  top: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--gold);
  border-radius: 6px;
  background: var(--panel-strong);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid rgba(254, 223, 0, 0.5);
  border-radius: 8px;
  background: var(--panel-strong);
  flex-shrink: 0;
}

.brand strong,
.brand small {
  display: block;
  line-height: 1.05;
}

.brand strong {
  color: var(--gold);
  font-family: Oswald, sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.brand small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-menu button {
  padding: 11px 12px;
  border: 0;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.88);
  background: transparent;
  font-family: Oswald, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}

.site-menu button:hover,
.site-menu button.active {
  color: #002b1a;
  background: var(--gold);
}

.tp-nav-btn {
  border: 1px solid rgba(254, 223, 0, 0.3) !important;
  margin-left: 6px;
}

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 4px;
  color: #002b1a;
  background: var(--gold);
}

.menu-button span {
  display: block;
  width: 19px;
  height: 2px;
  margin: 4px auto;
  border-radius: 4px;
  background: currentColor;
}

.view {
  display: none;
  min-height: calc(100vh - 130px);
}

.view.active {
  display: block;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: end;
  min-height: clamp(480px, 68vh, 680px);
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(254, 223, 0, 0.15);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      var(--paper) 0%,
      var(--panel-strong) 50%,
      var(--paper) 100%
    ),
    repeating-linear-gradient(
      45deg,
      var(--wm-green-700) 0px,
      var(--wm-green-700) 1px,
      transparent 1px,
      transparent 22px
    );
  background-blend-mode: overlay;
}

.hero-content {
  max-width: 780px;
  padding: clamp(28px, 7vw, 78px);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--fg-lime);
  font-family: var(--font-condensed);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
}

h1 {
  max-width: 840px;
  margin-bottom: 16px;
  font-size: clamp(2.6rem, 6vw, 5.8rem);
  line-height: 0.94;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
}

.hero-copy {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.55;
}

/* ── Feature Chips ──────────────────────────────────────────
   §4 no-emoji-icons: SVGs only
   §6 color-accessible-pairs: Gold-Akzent für Kontrast
   §2 touch-target-size: min 44px Höhe
   ─────────────────────────────────────────────────────────── */
.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.hero-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  min-height: 44px;                          /* §2 touch-target */
  background: rgba(253, 211, 1, 0.06);       /* subtle gold tint */
  border: 1px solid rgba(253, 211, 1, 0.22); /* gold border */
  border-radius: var(--r-pill);
  color: var(--fg-1);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease,
              border-color 150ms ease,
              transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  touch-action: manipulation;
}

.hero-feature-chip:hover {
  background: rgba(253, 211, 1, 0.14);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.hero-feature-chip:active {
  transform: translateY(0);
  transition-duration: 80ms;
}

/* Gold chip für Tippspiel — stärkstes Feature */
.hfc-gold {
  background: rgba(253, 211, 1, 0.12);
  border-color: rgba(253, 211, 1, 0.45);
  color: var(--gold);
  font-weight: 700;
}

.hfc-gold:hover {
  background: rgba(253, 211, 1, 0.22);
  border-color: var(--gold);
}

/* SVG Icon: immer gold, einheitlich 1.5px stroke */
.hfc-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--gold);
  opacity: 0.9;
}

.hfc-gold .hfc-icon {
  opacity: 1;
}

/* ── Theme-Link ─────────────────────────────────────────────
   §9 progressive-disclosure: volle Auswahl weiter unten
   §5 whitespace-balance: genug Abstand zu den CTAs
   ─────────────────────────────────────────────────────────── */
.hero-theme-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;                          /* klare Trennung von CTAs */
  padding: 0;
  background: none;
  border: none;
  color: var(--fg-3);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 150ms;
}

.hero-theme-link:hover {
  color: var(--gold);
}

.hero-theme-link:hover .htl-swatch-row span {
  transform: scaleY(1.2);
}

/* Farbstreifen der 6 Themes */
.htl-swatch-row {
  display: flex;
  gap: 3px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.htl-swatch-row span {
  width: 8px;
  height: 16px;
  transition: transform 150ms ease;
  flex-shrink: 0;
}

/* ── Hero Actions ───────────────────────────────────────── */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.primary-action,
.ghost-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.primary-action {
  border: 0;
  border-radius: 4px;
  color: #002b1a;
  background: var(--gold);
  box-shadow: 0 4px 0 var(--warm-gold);
}

.ghost-action {
  border: 2px solid var(--gold);
  border-radius: 4px;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.3);
}

/* ── Countdown-Badge: Pill mit bold number ───────────────────
   §6 weight-hierarchy: number prominent, labels subordinate
   §6 whitespace-balance: compact but impactful
   ─────────────────────────────────────────────────────────── */
.hero-countdown-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 16px 8px 12px;
  background: rgba(253, 211, 1, 0.08);
  border: 1px solid rgba(253, 211, 1, 0.25);
  border-radius: var(--r-pill);
}

.hero-countdown-badge strong {
  color: var(--gold);
  font-family: var(--font-condensed);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hero-countdown-badge span {
  color: var(--fg-3);
  font-family: var(--font-condensed);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* ── Theme-Panel (rechte Spalte im Hero) ── */
/* ── Theme-Panel (rechte Spalte im Hero) ── */
.hero-theme-panel {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: 16px 12px;
  border-left: 1px solid rgba(254, 223, 0, 0.15);
  background: rgba(0, 0, 0, 0.12);
  gap: 0;
  overflow: hidden;
}

.hero-theme-panel-label {
  font-family: var(--font-condensed);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 10px;
}

.hero-theme-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

/* Panel-Context Override: echte theme-cards komprimiert (section 4 consistency) */
.hero-theme-panel .theme-card {
  min-height: 72px;
  padding: 9px 10px;
  gap: 6px;
  border-radius: var(--r-2);
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 150ms ease;
}

.hero-theme-panel .theme-card:hover {
  transform: perspective(300px) translateZ(4px) scale(1.02);
}

.hero-theme-panel .theme-dots span {
  width: 11px;
  height: 11px;
}

.hero-theme-panel .theme-year {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.hero-theme-panel .theme-host {
  font-size: 0.62rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.hero-theme-panel .theme-active-badge,
.hero-theme-panel .theme-free-badge {
  top: 6px;
  right: 6px;
  font-size: 0.55rem;
  padding: 2px 6px;
}

.hero-theme-panel .theme-lock-badge {
  top: 6px;
  right: 6px;
  font-size: 0.8rem;
}


.quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0 0;
}

.quick-stats article,
.match-card,
.group-card,
.stat-board,
.city-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.quick-stats article {
  padding: 20px;
  border-top: 4px solid var(--gold);
}

.quick-stats span,
.match-meta,
.team-seed,
.city-card span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quick-stats strong {
  display: block;
  margin-top: 8px;
  color: var(--gold);
  font-family: Oswald, sans-serif;
  font-size: 2.5rem;
  line-height: 1;
}

.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin: 32px 0 18px;
  scroll-margin-top: 110px;
}

.section-header::after {
  flex: 1 1 120px;
  height: 3px;
  border-radius: 0;
  background:
    repeating-linear-gradient(
      90deg,
      #fedf00 0px, #fedf00 8px,
      transparent 8px, transparent 14px
    );
  content: "";
  opacity: 0.7;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
}

.section-note {
  max-width: 470px;
  margin-bottom: 4px;
  color: var(--muted);
  line-height: 1.5;
}

.toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
}

.search-box {
  display: grid;
  gap: 6px;
  min-width: min(280px, 42vw);
}

.search-box span {
  color: rgba(255, 255, 255, 0.55);
  font-family: Oswald, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-box input {
  width: 100%;
  height: 42px;
  border: 2px solid rgba(254, 223, 0, 0.25);
  border-radius: 4px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.35);
  outline: none;
  padding: 0 12px;
}

.tz-selector {
  display: grid;
  gap: 6px;
}

.tz-selector span {
  color: rgba(255, 255, 255, 0.55);
  font-family: Oswald, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tz-selector select {
  height: 42px;
  padding: 0 10px;
  border: 2px solid rgba(254, 223, 0, 0.25);
  border-radius: 4px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.35);
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FEDF00' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  min-width: 200px;
}

.tz-selector select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(254, 223, 0, 0.18);
}

.tz-selector select option {
  background: var(--panel);
  color: #ffffff;
}

.bulk-cal-label {
  display: grid;
  gap: 6px;
}

.bulk-cal-label span {
  color: rgba(255, 255, 255, 0.55);
  font-family: Oswald, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bulk-cal-btn {
  height: 42px;
  padding: 0 14px;
  border: 2px solid rgba(254, 223, 0, 0.25);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.3);
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.bulk-cal-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(254, 223, 0, 0.06);
}

input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(254, 223, 0, 0.18);
}

.segmented {
  display: inline-flex;
  padding: 4px;
  border: 2px solid rgba(254, 223, 0, 0.22);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.segmented::-webkit-scrollbar {
  display: none;
}

.segmented button {
  min-height: 34px;
  border: 0;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  padding: 0 12px;
  font-family: Oswald, sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
}

.segmented button.active {
  color: #002b1a;
  background: var(--gold);
}

.match-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.match-card {
  position: relative;
  overflow: hidden;
  min-height: 254px;
  padding: 18px;
  border-top: 4px solid var(--accent, #fedf00);
}

.match-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  content: "";
  background: var(--accent, var(--gold));
}

.match-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.match-card h3 {
  color: var(--gold);
  font-family: Oswald, sans-serif;
}

.match-group-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.match-group-row h3 {
  margin: 0;
}

.match-day-badge {
  padding: 2px 7px;
  border: 1px solid rgba(254, 223, 0, 0.35);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.55);
  font-family: Oswald, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.match-badge {
  padding: 6px 9px;
  border-radius: 3px;
  color: #ffffff;
  background: var(--red);
  font-family: Oswald, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.match-card[data-accent="#FEDF00"] .match-badge,
.match-card[data-accent="#fedf00"] .match-badge {
  color: #002b1a;
  background: #fedf00;
}

.match-card[data-accent="#009B3A"] .match-badge,
.match-card[data-accent="#009b3a"] .match-badge {
  color: #ffffff;
  background: #009a44;
}

.match-card[data-accent="#C8973A"] .match-badge,
.match-card[data-accent="#c8973a"] .match-badge {
  color: #002b1a;
  background: #c8973a;
}

.match-card[data-accent="#002776"] .match-badge,
.match-card[data-accent="#002776"] .match-badge {
  color: #ffffff;
  background: #003da5;
}

.versus {
  display: grid;
  gap: 10px;
  margin: 28px 0 24px;
}

.team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
}

.team-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 700;
}

.team-code {
  color: rgba(255, 255, 255, 0.45);
  font-family: Oswald, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
}

.match-details {
  display: grid;
  gap: 6px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.93rem;
}

.match-details strong {
  color: var(--ink);
}

/* ── Kalender-Button ── */

.cal-row {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.cal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(254, 223, 0, 0.22);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.2);
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.cal-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(254, 223, 0, 0.06);
}

/* Inline-Expansion */
.cal-options {
  display: none;
  flex-direction: column;
  gap: 4px;
}

.cal-row.expanded .cal-btn     { display: none; }
.cal-row.expanded .cal-options { display: flex; }

.cal-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(254, 223, 0, 0.15);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.15);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.cal-opt:hover {
  background: rgba(254, 223, 0, 0.08);
  border-color: rgba(254, 223, 0, 0.35);
  color: #ffffff;
}


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

.group-card {
  overflow: hidden;
  border-top: 4px solid var(--gold);
}

.group-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 3px solid var(--gold);
  color: #ffffff;
  background: var(--paper);
}

.group-card h3 {
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.group-card header .team-seed {
  text-align: right;
  font-size: 0.62rem;
  line-height: 1.25;
  letter-spacing: 0.06em;
}

.group-matches-btn {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid rgba(254, 223, 0, 0.15);
  border-radius: 0;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.2);
  font-family: Oswald, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.group-matches-btn:hover {
  background: rgba(254, 223, 0, 0.1);
}

.team-list {
  display: grid;
  gap: 0;
  padding: 8px 0;
}

.group-team {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
}

.group-team:nth-child(even) {
  background: rgba(0, 0, 0, 0.15);
}

.team-seed {
  color: rgba(255, 255, 255, 0.45);
}

/* ── Flag-Dot: kein Kreis, kein Hintergrund, kein Clip ── */
.flag-dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  /* KEIN border-radius, KEIN overflow:hidden, KEIN background */
  border: none;
  background: none;
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

/* England & Scotland: CSS-gezeichnete Flagge braucht Container
   → kleines abgerundetes Quadrat statt Kreis, kein weißer Hintergrund */
.flag-dot.flag-england,
.flag-dot.flag-scotland {
  border-radius: 3px;
  overflow: hidden;
  font-size: 0;
}

/* Team-Chip Wrapper: 3D-Hover überall einheitlich */
.mc-team,
.group-team-row {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

/* 3D: Flagge + Name kommen auf dich zu */
.mc-team:hover,
.group-team-row:hover {
  transform: perspective(400px) translateZ(8px) scale(1.04);
}

/* Tap-Feedback Mobile */
.mc-team:active,
.group-team-row:active {
  transform: perspective(400px) translateZ(3px) scale(1.01);
  transition-duration: 80ms;
}

.flag-dot.flag-england,
.flag-dot.flag-scotland {
  font-size: 0;
}

.flag-dot.flag-england {
  background:
    linear-gradient(90deg, transparent 0 38%, #c8102e 38% 62%, transparent 62%),
    linear-gradient(0deg, transparent 0 38%, #c8102e 38% 62%, transparent 62%),
    #ffffff;
}

.flag-dot.flag-scotland {
  background:
    linear-gradient(34deg, transparent 0 43%, #ffffff 43% 57%, transparent 57%),
    linear-gradient(-34deg, transparent 0 43%, #ffffff 43% 57%, transparent 57%),
    #0065bd;
}

.bracket-wrap {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 16px;
}

.bracket-container {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 1500px;
  min-height: 560px;
}

.bracket-half {
  display: flex;
  flex: 1;
  gap: 6px;
  align-items: stretch;
}

.bracket-left {
  flex-direction: row;
}

.bracket-right {
  flex-direction: row-reverse;
  /* row-reverse bedeutet: im DOM [HF, VF, AF, R32] stehen,
     aber visuell erscheint R32 rechts außen, HF links nahe der Mitte */
}

.bracket-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 170px;
  gap: 0;
}

.bracket-col-title {
  padding: 8px 10px;
  margin-bottom: 8px;
  color: var(--gold);
  font-family: Oswald, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid rgba(254, 223, 0, 0.3);
  white-space: nowrap;
}

.bracket-col-matches {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
  gap: 6px;
  padding: 4px 0;
}

.bracket-match {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  background: var(--panel);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.bracket-match span {
  display: block;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bracket-match strong {
  display: block;
  margin-top: 6px;
  color: #ffffff;
  font-size: 0.85rem;
  line-height: 1.3;
}

/* FINALE - hervorgehoben in der Mitte */
.bracket-final-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  flex-shrink: 0;
  padding: 0 8px;
  gap: 10px;
}

.bracket-final-label {
  color: var(--gold);
  font-family: Oswald, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
}

.bracket-final-label--sub {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.bracket-match--final {
  border: 2px solid var(--gold);
  border-left: 6px solid var(--gold);
  background: rgba(254, 223, 0, 0.08);
  box-shadow:
    0 0 0 1px rgba(254, 223, 0, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.6);
  min-width: 174px;
}

.bracket-match--final span {
  color: var(--gold);
  font-size: 0.75rem;
}

.bracket-match--final strong {
  color: #ffffff;
  font-size: 0.88rem;
}

.stats-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 14px;
}

.stat-board {
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.stat-board h3 {
  margin-bottom: 16px;
  color: var(--gold);
  font-family: Oswald, sans-serif;
}

.format-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.format-item {
  min-height: 104px;
  padding: 14px;
  border: 1px solid rgba(254, 223, 0, 0.12);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
}

.format-item strong {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-family: Oswald, sans-serif;
  font-size: 1.7rem;
}

.format-item span {
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.55;
}

.insight-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
}

.insight-list strong {
  color: var(--gold);
}

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

.city-card {
  min-height: 126px;
  padding: 16px;
  border-top: 4px solid var(--green);
  border-radius: 4px;
  background: var(--panel);
}

.city-card span {
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.city-card strong {
  display: block;
  margin: 10px 0 6px;
  color: var(--gold);
  font-family: Oswald, sans-serif;
  font-size: 1.15rem;
  text-transform: uppercase;
}

.city-card p {
  margin-bottom: 0;
  color: var(--muted);
}

.city-meta {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.conf-label {
  display: block;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 2px;
}

.records-grid {
  display: grid;
  gap: 10px;
}

.record-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(254, 223, 0, 0.12);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
}

.record-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.record-label {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.record-value {
  display: block;
  color: #ffffff;
  font-size: 0.95rem;
  margin-top: 2px;
}

@media (max-width: 1040px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .countdown-panel {
    align-self: auto;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .match-grid,
  .groups-grid,
  .cities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .site-shell {
    padding-inline: 12px;
  }

  .menu-button {
    display: block;
  }

  .site-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    border: 1px solid rgba(254, 223, 0, 0.25);
    border-radius: 4px;
    background: var(--panel-strong);
  }

  .site-menu.open {
    display: flex;
  }

  .site-menu button {
    min-height: 44px;
  }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero-content {
    padding: 24px 16px 20px;
  }

  .hero-features {
    gap: 6px;
  }

  .hero-feature-chip {
    font-size: 0.76rem;
    padding: 0 10px;
    min-height: 40px;
  }

  /* Theme-Panel: auf Mobile unter Content, 2×3 Grid */
  .hero-theme-panel {
    border-left: none;
    border-top: 1px solid rgba(254, 223, 0, 0.15);
    padding: 14px 12px;
  }

  .hero-theme-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }

  .hero-theme-panel .theme-card {
    min-height: 60px;
    padding: 7px 8px;
  }

  .hero-countdown-badge {
    padding: 6px 12px;
  }

  .hero-countdown-badge strong {
    font-size: 1.7rem;
  }

  .hero-actions a,
  .hero-actions button {
    width: 100%;
  }

  .quick-stats,
  .match-grid,
  .groups-grid,
  .cities-grid,
  .format-stats {
    grid-template-columns: 1fr;
  }

  .section-header,
  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .section-header::after {
    flex-basis: 3px;
    min-height: 3px;
  }

  .search-box {
    min-width: 0;
  }

  .segmented {
    width: 100%;
  }

  .segmented button {
    flex: 1;
    padding-inline: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════
   SPIELBAUM TABS
   ═══════════════════════════════════════════════════════════ */

.bracket-tabs {
  display: flex;
  gap: 6px;
  margin: 18px 0 0;
}

.bracket-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px solid rgba(254, 223, 0, 0.25);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.25);
  font-family: Oswald, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bracket-tab:hover {
  border-color: rgba(254, 223, 0, 0.5);
  color: #ffffff;
}

.bracket-tab.active {
  border-color: var(--gold);
  color: #002b1a;
  background: var(--gold);
}

.tab-new-badge {
  padding: 2px 7px;
  border-radius: 3px;
  color: #002b1a;
  background: #ffffff;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  animation: pulse-badge 2s ease-in-out infinite;
}

.bracket-tab.active .tab-new-badge {
  background: #002b1a;
  color: var(--gold);
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

.bracket-tab-panel {
  display: none;
}

.bracket-tab-panel.active {
  display: block;
}

/* ═══════════════════════════════════════════════════════════
   SIMULATOR
   ═══════════════════════════════════════════════════════════ */

.sim-intro {
  margin: 20px 0 24px;
}

.sim-intro-text {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.sim-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(254, 223, 0, 0.25);
  color: var(--gold);
  font-family: Oswald, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sim-bracket-title { margin-top: 36px; }

.sim-section-note {
  margin: -6px 0 14px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.sim-third-counter {
  padding: 2px 9px;
  border: 1px solid rgba(254, 223, 0, 0.3);
  border-radius: 3px;
  color: rgba(255,255,255,0.55);
  font-size: 0.7rem;
  font-weight: 700;
}
.sim-third-counter.full { border-color: var(--green); color: var(--green); }

/* ── Gruppen ── */

.sim-groups-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sim-group-card {
  border: 1px solid rgba(254, 223, 0, 0.15);
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
}

.sim-group-header {
  padding: 8px 12px;
  border-bottom: 2px solid var(--gold);
  background: var(--paper);
  color: var(--gold);
  font-family: Oswald, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sim-team-list {
  padding: 4px 0;
}

.sim-team-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: grab;
  transition: background 0.12s ease;
  user-select: none;
}

.sim-team-item:last-child { border-bottom: 0; }
.sim-team-item:hover { background: rgba(254,223,0,0.06); }
.sim-team-item.dragging { opacity: 0.4; background: rgba(254,223,0,0.1); }
.sim-team-item.drag-over { background: rgba(254,223,0,0.15); border-top: 2px solid var(--gold); }

.sim-rank-badge {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-family: Oswald, sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
}

.rank-1 .sim-rank-badge { background: var(--gold); color: #002b1a; }
.rank-2 .sim-rank-badge { background: rgba(255,255,255,0.2); color: #fff; }
.rank-3 .sim-rank-badge { background: rgba(200,151,58,0.35); color: var(--warm-gold); }
.rank-4 .sim-rank-badge { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.4); }

.sim-team-item-name {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ffffff;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sim-drag-handle {
  color: rgba(255,255,255,0.2);
  font-size: 1rem;
  flex-shrink: 0;
}

/* ── Drittplatzierte Zonen ── */

.sim-third-zones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 8px;
}

.sim-zone {
  display: flex;
  flex-direction: column;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
  min-height: 120px;
}

.sim-zone-in  { border-color: rgba(0,154,68,0.35); }
.sim-zone-out { border-color: rgba(255,255,255,0.12); }

.sim-zone-label {
  flex-shrink: 0;
  padding: 8px 12px;
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.55);
  font-family: Oswald, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sim-zone-in .sim-zone-label { color: var(--green); }

.sim-zone-drop {
  flex: 1;           /* füllt den gesamten verbleibenden Platz der Zone */
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  padding: 10px;
  min-height: 60px;
  transition: background 0.15s;
  cursor: default;
}

.sim-zone-drop.drag-hover { background: rgba(254,223,0,0.06); }

.sim-third-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(254,223,0,0.2);
  border-radius: 3px;
  background: rgba(0,0,0,0.25);
  cursor: grab;
  font-size: 0.78rem;
  color: #ffffff;
  user-select: none;
  transition: background 0.12s;
}

.sim-third-item:hover { background: rgba(254,223,0,0.08); }
.sim-third-item.dragging { opacity: 0.4; }

.sim-third-group-label {
  color: var(--gold);
  font-family: Oswald, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
}

.sim-zone-empty {
  color: rgba(255,255,255,0.25);
  font-size: 0.8rem;
  font-style: italic;
  padding: 4px 0;
  margin: 0;
}

/* ── K.O.-Bracket ── */

.sim-bracket-wrap { margin-top: 8px; }

.sim-ko-match {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 10px;
}

.sim-ko-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: rgba(255,255,255,0.45);
  font-size: 0.78rem;
  text-align: left;
  width: 100%;
  cursor: pointer;
  /* 3D-Hover via spring-easing (UI/UX §7: spring-physics) */
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 120ms ease;
  will-change: transform;
}

.sim-ko-slot:hover:not(.sim-ko-empty) {
  background: rgba(254,223,0,0.08);
  transform: perspective(300px) translateZ(6px) scale(1.03);
}

.sim-ko-slot:active:not(.sim-ko-empty) {
  transform: perspective(300px) translateZ(2px) scale(1.01);
  transition-duration: 80ms;
}

/* Flagge im Simulator: kleiner, kein Clip */
.sim-ko-slot .flag-dot {
  width: 18px;
  height: 18px;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.sim-ko-slot.sim-ko-winner {
  color: var(--gold);
  background: rgba(254,223,0,0.12);
  font-weight: 700;
}

.sim-ko-slot.sim-ko-loser {
  opacity: 0.35;
  text-decoration: line-through;
}

.sim-ko-slot.sim-ko-empty {
  color: rgba(255,255,255,0.2);
  font-style: italic;
  font-size: 0.7rem;
  cursor: default;
}

.sim-ko-check {
  margin-left: auto;
  color: var(--green);
  font-size: 0.8rem;
}

.sim-vs-line {
  display: block;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 2px 0;
}

.sim-ko-match.sim-ko-filled {
  border-left-color: rgba(254,223,0,0.4);
}

.sim-finale-match {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sim-champion {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border: 2px solid var(--gold);
  border-radius: 4px;
  background: rgba(254,223,0,0.1);
  color: var(--gold);
  font-family: Oswald, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  animation: champion-glow 2s ease-in-out infinite;
}

@keyframes champion-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(254,223,0,0.2); }
  50%       { box-shadow: 0 0 24px rgba(254,223,0,0.45); }
}

/* ── Mobile ── */

@media (max-width: 1040px) {
  .sim-groups-grid { grid-template-columns: repeat(3, 1fr); }
  .sim-third-zones { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .sim-groups-grid { grid-template-columns: repeat(2, 1fr); }
  .bracket-tabs   { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════
   MATCH-CARD V2 — Claude Design (Brasilien-2014-Ästhetik)
   ═══════════════════════════════════════════════════════════════════ */

.match-card {
  --mc-accent: var(--wm-yellow);

  position: relative;
  overflow: hidden;
  min-height: 240px;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-top: 0;            /* override altes 4px-Top-Border, neuer LED-Stitch übernimmt */
  border-radius: var(--r-2);
  background: var(--panel);
  box-shadow: var(--sh-card);
  transition: transform var(--dur-quick) var(--ease-out),
              box-shadow var(--dur-quick);
}
.match-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-deep);
}

/* Signature 1: 4px LED-Stitch oben */
.match-card::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--mc-accent) 0 14px,
    rgba(0, 0, 0, 0.25) 14px 18px
  );
  pointer-events: none;
}

/* Signature 2: durchgehende Akzent-Schiene links */
.match-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--mc-accent);
}

/* Kopf */
.match-card .mc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-1);
}
.match-card .mc-grp {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
}
.match-card .mc-grp h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--fg-accent);
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  line-height: 1;
}
.match-card .mc-day {
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-caps);
  color: var(--fg-3);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Phase-Badge */
.match-card .mc-badge {
  padding: 5px 9px;
  border-radius: var(--r-1);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.match-card .mc-badge.is-top   { background: var(--wm-yellow); color: var(--fg-on-yellow); }
.match-card .mc-badge.is-host  { background: var(--wm-orange); color: var(--fg-on-orange); }
.match-card .mc-badge.is-open  { background: var(--wm-lime);   color: var(--fg-on-lime); }
.match-card .mc-badge.is-grp   { background: rgba(255,255,255,.08); color: var(--fg-2); }
.match-card .mc-badge.is-live {
  background: var(--wm-red); color: var(--fg-on-red);
  display: inline-flex; align-items: center; gap: 5px;
}
.match-card .mc-badge.is-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  animation: mc-pulse 1s ease-in-out infinite;
}
@keyframes mc-pulse { 50% { opacity: 0.3; } }

/* Versus-Block */
.match-card .mc-vs {
  display: grid; gap: var(--s-2);
  margin: var(--s-5) 0 var(--s-4);
}
.match-card .mc-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); min-height: 32px;
}
.match-card .mc-team {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 1.2rem; font-weight: 700; color: var(--fg-1);
}
.match-card .mc-team .mc-flag {
  width: 26px; height: 26px;
  /* Kein Kreis, kein weißer Hintergrund — Flagge direkt */
  border-radius: 0;
  border: none;
  background: none;
  display: grid; place-items: center;
  font-size: 1.15rem; line-height: 1;
  flex-shrink: 0;
  overflow: visible;
}
.match-card .mc-code {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--fs-body-s);
  color: var(--fg-mute);
}
.match-card .mc-score {
  font-family: var(--font-display);
  font-size: 1.6rem; line-height: 1;
  color: var(--fg-accent);
  font-variant-numeric: tabular-nums;
}

/* Meta */
.match-card .mc-meta {
  display: grid; gap: 4px;
  color: var(--fg-2);
  font-size: var(--fs-body-s);
}
.match-card .mc-meta strong { color: var(--fg-1); font-weight: 600; }

/* Varianten */
.match-card.is-top {
  --mc-accent: var(--wm-yellow);
  background:
    radial-gradient(ellipse at top, rgba(253, 211, 1, 0.08), transparent 60%),
    var(--panel);
}
.match-card.is-host { --mc-accent: var(--wm-orange); }
.match-card.is-open { --mc-accent: var(--wm-lime); }
.match-card.is-live {
  --mc-accent: var(--wm-red);
  box-shadow:
    var(--sh-card),
    0 0 0 1px rgba(216, 19, 26, 0.35);
  animation: mc-edge 1.6s ease-in-out infinite;
}
@keyframes mc-edge {
  50% { box-shadow: var(--sh-card), 0 0 0 2px rgba(216, 19, 26, 0.55); }
}

/* Deadline-Lock */
.match-card.is-locked {
  opacity: 0.55;
  filter: saturate(0.55);
}
.match-card.is-locked::after {
  background: repeating-linear-gradient(
    90deg,
    var(--fg-mute) 0 14px,
    rgba(0, 0, 0, 0.25) 14px 18px
  );
}
.match-card.is-locked::before { background: var(--fg-mute); }
.match-card.is-locked .mc-grp h3 { color: var(--fg-2); }
.match-card.is-locked:hover {
  transform: none;
  box-shadow: var(--sh-card);
}

@media (prefers-reduced-motion: reduce) {
  .match-card.is-live { animation: none; }
  .match-card .mc-badge.is-live::before { animation: none; }
  /* 3D-Hover deaktivieren bei reduzierter Bewegung */
  .mc-team:hover,
  .mc-team:active,
  .group-team-row:hover,
  .group-team-row:active,
  .sim-ko-slot:hover,
  .sim-ko-slot:active,
  .theme-card:hover,
  .theme-card:active {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   WM 2026 HUB — TOURNAMENT THEMES
   Aktiv via <html data-theme="wm-2014-brazil"> etc.
   ═══════════════════════════════════════════════════════════════════ */

/* 0. DEFAULT — "UEFA Portal Clean"
   Solide, vertrauenswürdig, leicht premium. Slate-Tonality statt reinem Grau.
   Kein Template-Look. Sauber genug, dass WM-Themes danach als echter Wow-Moment wirken.
   Farben: Slate-50/900-System + tiefstes FIFA-Navy + minimaler Gold-Anker.
   Font: Inter — explizit akzeptiert für neutrales Sport-Portal. */
[data-theme="default"] {
  /* Surfaces: Slate-System, warm-cool balanced */
  --wm-green-900: #F6F7F9;   /* canvas: Slate-50-Tonality, kein reines Grau */
  --wm-green-800: #FFFFFF;   /* panel: reines Weiß */
  --wm-green-700: #F0F2F6;   /* hover surface: Slate-100-Tonality */
  --wm-green-600: #E8ECF2;   /* raised element: Slate-200-Tonality */
  --wm-green-500: #1A3A6E;   /* primary accent: FIFA/UEFA Navy */
  --wm-lime:      #0E7490;   /* secondary: Cyan-700, gedämpft */
  --wm-yellow:    #1A3A6E;   /* primary accent — ersetzt "Gold" für CTAs */
  --wm-gold-deep: #0F2451;   /* button shadow: tiefes Navy */
  --wm-blue:        #0C1A3A; /* deep navy base */
  --wm-blue-bright: #1D4ED8; /* helleres Navy für Info */
  --wm-orange: #C2460E;      /* live / warm accent */
  --wm-red:    #B91C1C;      /* error / result */
  --font-display:   "Inter", system-ui, -apple-system, sans-serif;
  --font-condensed: "Inter", system-ui, sans-serif;
  --font-body:      "Inter", system-ui, -apple-system, sans-serif;
  /* Foreground: Slate-Scale — dunkler = wertiger */
  --fg-1:      #0F172A;           /* Slate-900 */
  --fg-2:      #334155;           /* Slate-700 */
  --fg-3:      #64748B;           /* Slate-500 */
  --fg-mute:   #94A3B8;           /* Slate-400 */
  --fg-accent: #1A3A6E;
  --fg-lime:   #0E7490;
  --fg-on-yellow: #FFFFFF;
  --fg-on-lime:   #FFFFFF;
  --fg-on-orange: #FFFFFF;
  /* Borders: explizite Slate-Werte — definierter als rgba */
  --line:        #E2E8F0;         /* Slate-200 */
  --line-strong: #CBD5E1;         /* Slate-300 */
  --line-soft:   #F1F5F9;         /* Slate-100 */
  /* Derived aliases */
  --gold:       #1A3A6E;
  --warm-gold:  #0F2451;
  --ink:        #0F172A;
  --muted:      #334155;
  --panel-raised: #E8ECF2;
  /* Shadows: subtil, kein Ring-Shadow (verhindert Doppel-Border) */
  --sh-card:    0 1px 3px rgba(15, 23, 42, 0.07);
  --sh-deep:    0 4px 14px rgba(15, 23, 42, 0.08);
  --sh-stadium: 0 6px 22px -4px rgba(15, 23, 42, 0.10),
                0 0 0 1px rgba(15, 23, 42, 0.05) inset;
  --sh-stamp-y: 0 3px 0 #0F2451;
  --sh-stamp-g: 0 3px 0 #094060;
  --sh-stamp-r: 0 3px 0 #7F1D1D;
  --sh-glow-y:  0 0 0 3px rgba(26, 58, 110, 0.18);
}

/* Headings: kein Uppercase, kein harter Text-Shadow auf hellem Bg */
[data-theme="default"] h1,
[data-theme="default"] h2,
[data-theme="default"] h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-transform: none;
}

[data-theme="default"] h1 {
  text-shadow: none;
}

/* Body: sauberes Off-White, kein Muster */
[data-theme="default"] body {
  background-image: none;
  background-blend-mode: normal;
}

[data-theme="default"] body::before {
  opacity: 0;
}

/* Hero-BG: warmer Slate-Gradient, keine diagonalen Linien */
[data-theme="default"] .hero-bg {
  background: linear-gradient(150deg, #FFFFFF 0%, #F4F5F8 55%, #F6F7F9 100%);
  background-blend-mode: normal;
}

/* ── Default-Theme: Scoped Overrides ─────────────────────────────────
   Hartcodierte Werte aus dem globalen CSS überschreiben.
   Nur [data-theme="default"] — kein anderes Theme berührt.
   ─────────────────────────────────────────────────────────────────── */

/* Karten: kein Ring-Shadow, nur sanfte Elevation */
[data-theme="default"] .quick-stats article,
[data-theme="default"] .match-card,
[data-theme="default"] .group-card,
[data-theme="default"] .stat-board,
[data-theme="default"] .city-card {
  box-shadow: var(--sh-card);
}

/* Metadata-Texte: Slate-500 statt unsichtbares Weiß */
[data-theme="default"] .quick-stats span,
[data-theme="default"] .match-meta,
[data-theme="default"] .team-seed,
[data-theme="default"] .city-card span {
  color: var(--fg-3);
}

/* Team-Namen / Codes */
[data-theme="default"] .team-name { color: var(--fg-1); }
[data-theme="default"] .team-code { color: var(--fg-3); }
[data-theme="default"] .match-details { color: var(--fg-2); }
[data-theme="default"] .match-day-badge {
  border-color: var(--line-strong);
  color: var(--fg-3);
}

/* Hero */
[data-theme="default"] .hero {
  border-color: var(--line);
  box-shadow: var(--sh-deep);
}
[data-theme="default"] .hero-theme-panel {
  border-left-color: var(--line);
  background: rgba(240, 242, 246, 0.7);
}
[data-theme="default"] .hero-copy { color: var(--fg-2); }
[data-theme="default"] .hero-countdown-badge {
  background: rgba(26, 58, 110, 0.05);
  border-color: var(--line-strong);
}
[data-theme="default"] .hero-feature-chip {
  background: rgba(15, 23, 42, 0.04);
  border-color: var(--line-strong);
  color: var(--fg-2);
}
[data-theme="default"] .hero-feature-chip:hover {
  background: rgba(26, 58, 110, 0.07);
  border-color: var(--gold);
  color: var(--fg-1);
}
/* Tippspiel-Chip: kleiner Gold-Anker als einzige Warm-Note */
[data-theme="default"] .hfc-gold {
  background: rgba(184, 150, 43, 0.06);
  border-color: rgba(184, 150, 43, 0.30);
  color: var(--fg-1);
}
[data-theme="default"] .hfc-gold:hover {
  background: rgba(184, 150, 43, 0.10);
}
[data-theme="default"] .hfc-icon { color: rgba(184, 150, 43, 0.80); }
[data-theme="default"] .hfc-gold .hfc-icon { color: rgba(184, 150, 43, 1); }

/* Brand */
[data-theme="default"] .brand small { color: var(--fg-3); }
/* Gold-Anker: brand-mark bekommt eine winzige Wärme */
[data-theme="default"] .brand-mark {
  border-color: rgba(184, 150, 43, 0.35);
  background: rgba(26, 58, 110, 0.04);
}

/* Topbar: sehr ruhige Shadow */
[data-theme="default"] .topbar {
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.07);
}

/* Nav-Buttons: Inter statt Oswald */
[data-theme="default"] .site-menu button {
  font-family: var(--font-body);
  color: var(--fg-2);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 600;
}
[data-theme="default"] .site-menu button:hover,
[data-theme="default"] .site-menu button.active { color: #FFFFFF; }

/* Buttons: Inter statt Oswald, weißer Text auf Navy */
[data-theme="default"] .primary-action,
[data-theme="default"] .ghost-action {
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 600;
}
[data-theme="default"] .primary-action { color: #FFFFFF; }
[data-theme="default"] .ghost-action {
  background: transparent;
  color: var(--gold);
}

/* Segmented Control: Inter statt Oswald */
[data-theme="default"] .segmented {
  background: rgba(15, 23, 42, 0.04);
  border-color: var(--line-strong);
}
[data-theme="default"] .segmented button {
  font-family: var(--font-body);
  color: var(--fg-2);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.82rem;
  font-weight: 600;
}
[data-theme="default"] .segmented button.active { color: #FFFFFF; }

/* Quick-Stats: Inter statt Oswald für Zahlen */
[data-theme="default"] .quick-stats strong {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Inputs & Selects */
[data-theme="default"] .search-box input,
[data-theme="default"] .tz-selector select {
  background: #FFFFFF;
  color: var(--fg-1);
  border-color: var(--line-strong);
}
[data-theme="default"] .tz-selector select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A3A6E' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}
[data-theme="default"] input::placeholder { color: var(--fg-mute); }

/* Form-Labels: Inter statt Oswald */
[data-theme="default"] .search-box span,
[data-theme="default"] .tz-selector span,
[data-theme="default"] .bulk-cal-label span {
  font-family: var(--font-body);
  color: var(--fg-3);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.78rem;
}

/* Bulk-Cal-Button */
[data-theme="default"] .bulk-cal-btn {
  border-color: var(--line-strong);
  color: var(--fg-2);
  background: #FFFFFF;
  font-family: var(--font-body);
}
[data-theme="default"] .bulk-cal-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(26, 58, 110, 0.04);
}

/* Cal-Buttons in Match-Cards */
[data-theme="default"] .cal-btn {
  border-color: var(--line-strong);
  color: var(--fg-3);
  background: transparent;
  font-family: var(--font-body);
}
[data-theme="default"] .cal-btn:hover {
  background: rgba(26, 58, 110, 0.06);
  border-color: var(--gold);
  color: var(--gold);
}
[data-theme="default"] .cal-opt {
  border-color: var(--line);
  color: var(--fg-2);
  background: transparent;
}
[data-theme="default"] .cal-opt:hover {
  background: rgba(26, 58, 110, 0.06);
  border-color: var(--gold);
  color: var(--gold);
}
[data-theme="default"] .cal-row {
  border-top-color: var(--line-soft);
}

/* Section-Header Akzentlinie: Navy, dezent */
[data-theme="default"] .section-header::after {
  background:
    repeating-linear-gradient(
      90deg,
      var(--gold) 0px, var(--gold) 8px,
      transparent 8px, transparent 14px
    );
  opacity: 0.30;
}

/* ── Select-Optionen: war weiß auf dunklem Dropdown-Bg ── */
[data-theme="default"] .tz-selector select option {
  background: #FFFFFF;
  color: var(--fg-1);
}

/* ── Bracket / Spielbaum ── */
[data-theme="default"] .bracket-tab {
  background: rgba(15, 23, 42, 0.05);
  border-color: var(--line-strong);
  color: var(--fg-2);
  font-family: var(--font-body);
  box-shadow: none;
}
[data-theme="default"] .bracket-tab:hover { color: #FFFFFF; }
[data-theme="default"] .bracket-match span { color: var(--fg-3); }
[data-theme="default"] .bracket-match strong { color: var(--fg-1); }
[data-theme="default"] .bracket-final-label--sub { color: var(--fg-3); }
[data-theme="default"] .bracket-match--final strong { color: var(--fg-1); }

/* ── Format / Gruppeninfo ── */
[data-theme="default"] .format-item span { color: var(--fg-2); }
[data-theme="default"] .insight-list { color: var(--fg-2); }

/* ── Cities ── */
[data-theme="default"] .city-meta { color: var(--fg-3); }

/* ── Teams / Records ── */
[data-theme="default"] .conf-label { color: var(--fg-3); }
[data-theme="default"] .record-label { color: var(--fg-3); }
[data-theme="default"] .record-value { color: var(--fg-1); }

/* ── Simulator ── */
[data-theme="default"] .sim-team-item-name { color: var(--fg-1); }
[data-theme="default"] .sim-zone-label {
  background: rgba(15, 23, 42, 0.05);
  color: var(--fg-3);
  font-family: var(--font-body);
}
[data-theme="default"] .sim-third-item {
  background: rgba(15, 23, 42, 0.03);
  border-color: var(--line-strong);
  color: var(--fg-2);
}
[data-theme="default"] .sim-ko-slot { color: var(--fg-2); }
[data-theme="default"] .sim-ko-slot.sim-ko-empty { color: var(--fg-mute); }
[data-theme="default"] .sim-zone-empty { color: var(--fg-mute); }
[data-theme="default"] .sim-third-counter {
  border-color: var(--line-strong);
  color: var(--fg-3);
}
[data-theme="default"] .rank-2 .sim-rank-badge {
  background: rgba(15, 23, 42, 0.08);
  color: var(--fg-2);
}
[data-theme="default"] .rank-4 .sim-rank-badge {
  background: rgba(15, 23, 42, 0.04);
  color: var(--fg-mute);
}

/* 1. WM 2026 · USA / Mexico / Canada — "WE ARE 26"
   Modulares Multi-Color-System: Rot + Grün + Blau gleich-stark.
   Canvas = neutrales Anthrazit (kein Navy!), Display = Noto Sans 900
   (offizielle FIFA-Fallback für custom "FWC 2026"). */
[data-theme="wm-2026-usa-mex-can"] {
  --wm-green-900: #0D1117;   /* neutral anthracite canvas */
  --wm-green-800: #161B22;   /* panel — mid-tone neutral */
  --wm-green-700: #21262D;   /* hover */
  --wm-green-600: #2D333B;   /* accent surface */
  --wm-green-500: #00BC4D;   /* Mexico modern green */
  --wm-lime:      #34D058;   /* brighter mint pop */
  --wm-yellow:    #FFC72C;   /* FIFA-2026 signature ball-yellow — PRIMARY */
  --wm-gold-deep: #A8761A;
  --wm-blue:        #1C3FA0; /* USA saturated blue */
  --wm-blue-bright: #3B9DDB; /* bright sky broadcast */
  --wm-orange: #FF6B00;      /* restrained warm accent */
  --wm-red:    #E51E2F;      /* Canada vibrant red */
  --font-display:   "Noto Sans", "Inter", system-ui, sans-serif;
  --font-condensed: "Saira Condensed", "Barlow Condensed", "Oswald", sans-serif;
  --font-body:      "Inter", system-ui, -apple-system, sans-serif;
}

/* Noto Sans / Inter braucht 900-Weight für Display-Charakter */
[data-theme="wm-2026-usa-mex-can"] h1,
[data-theme="wm-2026-usa-mex-can"] h2,
[data-theme="wm-2026-usa-mex-can"] h3 {
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* 2. WM 2022 · Qatar */
[data-theme="wm-2022-qatar"] {
  --wm-green-900: #2A0814;
  --wm-green-800: #3D0D1E;
  --wm-green-700: #5C1530;
  --wm-green-600: #7A1F40;
  --wm-green-500: #8A1538;
  --wm-lime:      #E8C9A3;
  --wm-yellow:    #D4AF6E;
  --wm-gold-deep: #8E7044;
  --wm-blue:        #1F3B4A;
  --wm-blue-bright: #3B7388;
  --wm-orange: #C97B3A;
  --wm-red:    #B91C2A;
  --font-display:   "Cinzel", "Trajan Pro", Georgia, serif;
  --font-condensed: "Cormorant SC", "Marcellus SC", serif;
  --font-body:      "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

/* 3. WM 2018 · Russia */
[data-theme="wm-2018-russia"] {
  --wm-green-900: #0A1228;
  --wm-green-800: #14213D;
  --wm-green-700: #1F3464;
  --wm-green-600: #2B4690;
  --wm-green-500: #0039A6;
  --wm-lime:      #F4D35E;
  --wm-yellow:    #FFB800;
  --wm-gold-deep: #A87800;
  --wm-blue:        #002C5F;
  --wm-blue-bright: #1170B8;
  --wm-orange: #E76F51;
  --wm-red:    #D52B1E;
  --font-display:   "Russo One", "Impact", "Arial Black", sans-serif;
  --font-condensed: "Oswald", "Bebas Neue", sans-serif;
  --font-body:      "PT Sans", "Roboto", system-ui, sans-serif;
}

/* 4. WM 2014 · Brazil (= unser Default — explizit verfügbar zum Wechseln) */
[data-theme="wm-2014-brazil"] {
  --wm-green-900: #002816;
  --wm-green-800: #0a3b22;
  --wm-green-700: #0f5a32;
  --wm-green-600: #336F1B;
  --wm-green-500: #009C3B;
  --wm-lime:      #ABCB2D;
  --wm-yellow:    #FDD301;
  --wm-gold-deep: #C8973A;
  --wm-blue:        #003469;
  --wm-blue-bright: #1E78C8;
  --wm-orange: #F79516;
  --wm-red:    #D8131A;
  --font-display:   "Lilita One", "Bowlby One SC", Impact, sans-serif;
  --font-condensed: "Oswald", "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body:      "Source Sans 3", system-ui, -apple-system, sans-serif;
}

/* 5. WM 2010 · South Africa — "Soweto-Sonntag, Vuvuzelas, Veld-Erde" */
[data-theme="wm-2010-south-africa"] {
  --wm-green-900: #1A2D1A;   /* deep warm-earth green canvas */
  --wm-green-800: #243B22;   /* panel — lighter earth-green */
  --wm-green-700: #2F4D2A;   /* hover */
  --wm-green-600: #3F6B34;   /* olive-veld mid accent surface */
  --wm-green-500: #007A4D;   /* SA flag green */
  --wm-lime:      #75C040;   /* Apple Green — FIFA-2010 official, THE pop */
  --wm-yellow:    #F8A20C;   /* Dark Tangerine — FIFA-2010 official primary */
  --wm-gold-deep: #A66600;
  --wm-blue:        #004A98; /* USAFA Blue — FIFA-2010 official */
  --wm-blue-bright: #3A9DD8; /* Tufts Blue — FIFA-2010 official */
  --wm-orange: #FFB81C;      /* SA gold — warm secondary */
  --wm-red:    #DF1922;      /* Maximum Red — FIFA-2010 official */
  --font-display:   "Fraunces", "Modak", "Lobster Two", Georgia, serif;
  --font-condensed: "Oswald", "Bebas Neue", sans-serif;
  --font-body:      "Mulish", "Lato", system-ui, sans-serif;
}

/* Fraunces Hand-Cut-Charakter bei Headlines im 2010-Theme aktivieren */
[data-theme="wm-2010-south-africa"] h1,
[data-theme="wm-2010-south-africa"] h2,
[data-theme="wm-2010-south-africa"] h3 {
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

/* ═══════════════════════════════════════════════════════════════════
   THEME-SWITCHER UI (auf Home-Seite)
   ═══════════════════════════════════════════════════════════════════ */

.theme-switcher {
  margin-top: 40px;
  padding: 32px 0;
  border-top: 1px solid var(--line-soft);
}

.theme-switcher-head {
  margin-bottom: 18px;
}

.theme-switcher-head .eyebrow { margin-bottom: 6px; }

.theme-switcher-head h3 {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.05;
}

.theme-switcher-head p {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--fs-body-s);
  line-height: 1.5;
  max-width: 540px;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 2px solid transparent;
  border-radius: var(--r-2);
  background: var(--tc-bg, #0a3b22);
  color: #ffffff;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: transform var(--dur-quick) var(--ease-out),
              border-color var(--dur-quick);
  min-height: 130px;
  overflow: hidden;
}

.theme-card:hover {
  transform: perspective(400px) translateZ(8px) scale(1.03);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}

.theme-card:active {
  transform: perspective(400px) translateZ(4px) scale(1.01);
}

.theme-card.is-active {
  border-color: var(--wm-yellow);
  box-shadow: 0 0 0 3px rgba(253, 211, 1, 0.2);
}

.theme-card .theme-dots {
  display: flex;
  gap: 5px;
}

.theme-card .theme-dots span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.theme-card .theme-year {
  font-family: var(--tc-font, "Lilita One"), Impact, sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--tc-accent, #FDD301);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.theme-card .theme-host {
  font-family: var(--font-condensed);
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: auto;
}

.theme-card .theme-active-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  background: var(--wm-yellow);
  color: #002b1a;
  font-family: var(--font-condensed);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  opacity: 0;
  transition: opacity var(--dur-quick);
}

.theme-card.is-active .theme-active-badge {
  opacity: 1;
}

/* Kostenlos-Badge */
.theme-free-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 2px 7px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.8);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
}

/* Theme-grid: 6 Cards → 3+3 */
.theme-grid {
  grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 1100px) {
  .theme-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   SIMULATOR — KO-SLOT ADVANCE ANIMATION
   Klick → Team springt vor → gleitet in nächste Runde
   ═══════════════════════════════════════════════════════════════════ */

/* Phase 1: Slot springt zum Viewer vor (bleibt kurz in der Luft) */
@keyframes sim-advance-out {
  0%   { transform: perspective(300px) translateZ(0)  scale(1);    opacity: 1; }
  40%  { transform: perspective(300px) translateZ(18px) scale(1.1); opacity: 1; }
  100% { transform: perspective(300px) translateZ(40px) scale(1.15); opacity: 0; }
}

/* Phase 2: Slot landet im Ziel-Feld (kommt von "vorne" an) */
@keyframes sim-advance-in {
  0%   { transform: perspective(300px) translateZ(30px) scale(1.12); opacity: 0; }
  60%  { transform: perspective(300px) translateZ(4px)  scale(1.04); opacity: 1; }
  80%  { transform: perspective(300px) translateZ(-2px) scale(0.99); opacity: 1; }
  100% { transform: perspective(300px) translateZ(0)   scale(1);    opacity: 1; }
}

.sim-ko-slot.is-advancing {
  animation: sim-advance-out 220ms cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
  position: relative;
  z-index: 10;
}

.sim-ko-slot.is-landing {
  animation: sim-advance-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Winner-Glow beim Landen */
.sim-ko-slot.sim-ko-winner.is-landing {
  box-shadow: 0 0 0 2px var(--gold), 0 4px 16px rgba(253,211,1,0.35);
}

@media (prefers-reduced-motion: reduce) {
  .sim-ko-slot.is-advancing,
  .sim-ko-slot.is-landing {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE: BOTTOM-TAB-BAR + MEHR-OVERLAY
   ═══════════════════════════════════════════════════════════ */

/* Desktop-Default: beides ausgeblendet */
.bottom-tab-bar {
  display: none;
}

.mehr-overlay {
  display: none;
}

@media (max-width: 760px) {
  /* Hamburger-Menü ausblenden — Bottom-Tabs übernehmen die Navigation */
  .menu-button { display: none !important; }

  /* Platz unter Content für die fixe Tab-Bar */
  main {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }

  /* Hero-Theme-Panel auf Mobile ausblenden (spart Höhe, Themes noch via Home-Seite) */
  .hero-theme-panel { display: none; }

  /* ── Bottom Tab Bar ────────────────────────────────────── */
  .bottom-tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--panel-strong, #1A2236);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  .bottom-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--fg-2);
    cursor: pointer;
    padding: 6px 4px 8px;
    min-height: 48px;
    touch-action: manipulation;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .bottom-tab.active {
    color: var(--green);
  }

  .bottom-tab-icon {
    font-size: 1.35rem;
    line-height: 1;
  }

  .bottom-tab-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
  }

  /* ── Mehr-Overlay (Bottom Sheet) ──────────────────────── */
  .mehr-overlay {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    z-index: 190;
    background: var(--panel-strong, #1A2236);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 8px 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
    animation: mehr-slide-up 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .mehr-overlay[hidden] {
    display: none;
  }

  @keyframes mehr-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
  }

  .mehr-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: none;
    border: none;
    color: var(--fg-1);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 14px 20px;
    cursor: pointer;
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .mehr-item:active {
    background: rgba(255, 255, 255, 0.05);
  }

  .mehr-item-icon {
    font-size: 1.25rem;
    width: 28px;
    text-align: center;
  }

  /* ── Spielbaum: horizontal scrollbar auf Mobile ──────── */
  [data-view-panel="spielbaum"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: -12px;
    padding-inline: 12px;
  }
}

/* Theme-Switcher auf Desktop ausblenden: Themes sind im Hero-Panel sichtbar */
@media (min-width: 761px) {
  .theme-switcher { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   CODE-UNLOCK — Leiste unter Theme-Grid + Modal
   ═══════════════════════════════════════════════════════════════════ */

.theme-code-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.theme-code-label {
  color: var(--fg-3);
  font-size: 0.82rem;
}

.theme-code-btn {
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}

.theme-code-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(26, 58, 110, 0.05);
}

/* Code-Unlock Modal */
.cu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ttp-fade-in 0.2s ease forwards;
}

.cu-modal {
  position: relative;
  width: min(400px, 100%);
  padding: 28px 24px 22px;
  border-radius: 8px;
  background: #0F1923;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  animation: ttp-slide-up 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.cu-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.78rem;
  cursor: pointer;
  transition: color 0.14s, border-color 0.14s;
}
.cu-close:hover { color: #fff; border-color: rgba(255,255,255,0.35); }

.cu-heading {
  margin: 0 0 6px;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
}

.cu-sub {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.84rem;
  line-height: 1.5;
}

.cu-row {
  display: flex;
  gap: 8px;
}

.cu-input {
  flex: 1;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  font-size: 0.95rem;
  font-family: monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.cu-input::placeholder { color: rgba(255,255,255,0.28); }
.cu-input:focus {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.10);
}

.cu-btn {
  height: 42px;
  padding: 0 18px;
  border: none;
  border-radius: 6px;
  background: #1A3A6E;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s;
}
.cu-btn:hover { background: #234d8f; }

.cu-error {
  min-height: 1.2em;
  margin: 8px 0 0;
  color: #f87171;
  font-size: 0.78rem;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   THEME-TEASER POPUP
   Erscheint nach 30 s wenn Nutzer noch auf Default-Theme ist.
   ═══════════════════════════════════════════════════════════════════ */

#theme-teaser-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: ttp-fade-in 0.3s ease forwards;
}

#theme-teaser-overlay.ttp-closing {
  animation: ttp-fade-out 0.22s ease forwards;
  pointer-events: none;
}

@keyframes ttp-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ttp-fade-out { from { opacity: 1; } to { opacity: 0; } }

.ttp-modal {
  position: relative;
  width: min(680px, 100%);
  padding: 32px 30px 26px;
  border-radius: 8px;
  background: #0F1923;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65);
  animation: ttp-slide-up 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes ttp-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.ttp-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.14s, border-color 0.14s;
}

.ttp-close:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}

.ttp-eyebrow {
  margin: 0 0 8px;
  color: #FDD301;
  font-family: var(--font-condensed);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ttp-heading {
  margin: 0 0 8px;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.ttp-body {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.60);
  font-size: 0.88rem;
  line-height: 1.55;
  max-width: 520px;
}

.ttp-body strong {
  color: #FDD301;
  font-weight: 700;
}

.ttp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  margin-bottom: 14px;
}

/* Das 2014-Brasil-Card im Popup hervorheben */
.ttp-grid .theme-card[data-theme-key="wm-2014-brazil"] {
  outline: 2px solid #FDD301;
  outline-offset: 2px;
}

.ttp-hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.28);
  font-size: 0.72rem;
  text-align: center;
  letter-spacing: 0.02em;
}

@media (max-width: 580px) {
  .ttp-modal { padding: 24px 16px 20px; }
  .ttp-grid  { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 380px) {
  .ttp-grid  { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER & LEGAL MODALS
   ═══════════════════════════════════════════════════════════════════ */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 18px 16px;
  border-top: 1px solid var(--line-soft);
  margin-top: 32px;
}

.footer-link {
  padding: 0;
  border: none;
  background: none;
  color: var(--fg-3);
  font-family: var(--font-body);
  font-size: 0.78rem;
  cursor: pointer;
  transition: color 0.14s;
}
.footer-link:hover { color: var(--gold); }

.footer-sep { color: var(--fg-mute); font-size: 0.78rem; }

.footer-note {
  color: var(--fg-mute);
  font-size: 0.72rem;
}

@media (max-width: 760px) {
  .site-footer {
    margin-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

/* Legal Modal */
.legal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ttp-fade-in 0.22s ease forwards;
}

.legal-overlay[hidden] { display: none; }

.legal-modal {
  position: relative;
  width: min(480px, 100%);
  max-height: 88vh;
  padding: 28px 26px 24px;
  border-radius: 8px;
  background: var(--panel, #fff);
  color: var(--fg-1);
  border: 1px solid var(--line);
  box-shadow: var(--sh-stadium);
  display: flex;
  flex-direction: column;
  animation: ttp-slide-up 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.legal-modal--wide { width: min(620px, 100%); }

.legal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--fg-3);
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.14s, border-color 0.14s;
}
.legal-close:hover { color: var(--fg-1); border-color: var(--fg-2); }

.legal-heading {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg-1);
  text-transform: none;
  letter-spacing: -0.01em;
}

.legal-sub {
  margin: 0 0 18px;
  color: var(--fg-3);
  font-size: 0.82rem;
}

.legal-body {
  color: var(--fg-2);
  font-size: 0.86rem;
  line-height: 1.65;
}

.legal-body--scroll {
  overflow-y: auto;
  max-height: 60vh;
  padding-right: 8px;
  scrollbar-width: thin;
}

.legal-body h3 {
  margin: 18px 0 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--fg-1);
  text-transform: none;
  letter-spacing: 0;
}

.legal-body h3:first-child { margin-top: 0; }

.legal-body a {
  color: var(--gold);
  text-decoration: underline;
}

.legal-disclaimer {
  margin-top: 16px;
  padding: 10px 14px;
  border-left: 3px solid var(--line-strong);
  color: var(--fg-3);
  font-size: 0.82rem;
}