/* Bottom Nav Glass/Neon skin v2 — Multi-Color.
   WHY: Owner-Wunsch nach Stil aus Referenz-Bild — jede Tab-Cell bekommt
   eine eigene Akzent-Farbe ueber CSS-Variable --tab-color (RGB-Tripel),
   active-State leuchtet in dieser Farbe statt einheitlich gruen.
   Tabs/Routing/Logik bleiben unveraendert.

   Notbremse: Diesen Stylesheet-Link aus index.html entfernen → die
   Inline-Styles aus dem index.html block uebernehmen wieder. */

@media (max-width: 600px) {
  /* Container: Glass-Dock mit Sternenfeld-Hauch */
  #mobile-bottom-nav {
    left: 0;
    right: 0;
    bottom: var(--mobile-nav-lift, 0px);
    height: 64px;
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 5px 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background:
      /* mini "stars" — subtile helle Punkte */
      radial-gradient(1px 1px at 14% 22%, rgba(255,255,255,.55), transparent 60%),
      radial-gradient(1px 1px at 28% 70%, rgba(255,255,255,.35), transparent 60%),
      radial-gradient(1px 1px at 52% 18%, rgba(255,255,255,.45), transparent 60%),
      radial-gradient(1px 1px at 74% 60%, rgba(255,255,255,.30), transparent 60%),
      radial-gradient(1px 1px at 88% 26%, rgba(255,255,255,.40), transparent 60%),
      radial-gradient(1.5px 1.5px at 40% 82%, rgba(255,255,255,.25), transparent 60%),
      /* color washes */
      radial-gradient(circle at 14% 0%, rgba(64, 196, 255, .14), transparent 40%),
      radial-gradient(circle at 50% 100%, rgba(255, 71, 156, .15), transparent 45%),
      radial-gradient(circle at 86% 0%, rgba(179, 136, 255, .14), transparent 40%),
      /* glass base */
      linear-gradient(180deg, rgba(20, 24, 34, .82), rgba(6, 9, 14, .92));
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .05) inset,
      0 -10px 38px rgba(64, 196, 255, .08),
      0 0 26px rgba(255, 71, 156, .08),
      0 18px 44px rgba(0, 0, 0, .6);
    /* Owner-Bug 2026-05-07: blur(24px) verursacht Glitch-Effekt auf Mobile-GPU
       (Layer werden unter Last kurz verworfen → Logo/Tabs flackern weg).
       blur(6px) ist ausreichend fuer den Glas-Look, deutlich guenstiger. */
    backdrop-filter: blur(6px) saturate(1.2);
    -webkit-backdrop-filter: blur(6px) saturate(1.2);
  }

  /* obere Hairline: Multi-Color Gradient (cyan → pink → purple) */
  #mobile-bottom-nav::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(64, 196, 255, .8) 22%,
      rgba(255, 71, 156, .85) 50%,
      rgba(179, 136, 255, .8) 78%,
      transparent 100%);
    opacity: .8;
    pointer-events: none;
  }

  /* dezenter Sweep-Glanz */
  #mobile-bottom-nav::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 21px 21px 0 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .07) 45%, transparent 70%);
    transform: translateX(-72%);
    animation: bottomNavSweep 6.5s ease-in-out infinite;
    pointer-events: none;
  }

  /* Per-Tab Akzentfarbe (RGB-Tripel) ----------------------------- */
  #mobile-bottom-nav button[data-mb-tab="tipps"]       { --tab-color: 0, 230, 118; }   /* green */
  #mobile-bottom-nav button[data-mb-tab="schein"]      { --tab-color: 64, 196, 255; }  /* cyan */
  #mobile-bottom-nav button[data-mb-tab="model"]       { --tab-color: 179, 136, 255; } /* purple */
  #mobile-bottom-nav button[data-mb-tab="smartkombi"]  { --tab-color: 255, 71, 156; }  /* pink */
  #mobile-bottom-nav button[data-mb-tab="manualkombi"] { --tab-color: 255, 145, 0; }   /* orange */
  #mobile-bottom-nav button[data-mb-tab="costs"]       { --tab-color: 255, 215, 64; }  /* gold */

  /* Tab-Button: kleine Glass-Cell, faerbt sich nach --tab-color */
  #mobile-bottom-nav button {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    height: 54px;
    min-height: 0;
    padding: 4px 0 5px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: rgba(255, 255, 255, .55);
    background: transparent;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    transition: color .18s ease, transform .18s ease,
                background .18s ease, box-shadow .18s ease,
                border-color .18s ease;
  }

  /* Icon-Wrapper: kein Chip mehr, kein Background, kein Border —
     nur Sizing + Centering. Glow kommt direkt aufs SVG. */
  #mobile-bottom-nav button .mbn-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: 2px;
    background: transparent;
    box-shadow: none;
    line-height: 1;
    transition: transform .2s ease, filter .2s ease;
  }

  /* SVG: groesser als vorher (war 20px), jetzt 28px. Glow per drop-shadow. */
  #mobile-bottom-nav button .mbn-icon svg {
    display: block;
    width: 28px;
    height: 28px;
    filter:
      drop-shadow(0 0 3px rgba(var(--tab-color), .45))
      drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
    transition: filter .2s ease, transform .2s ease;
  }

  #mobile-bottom-nav button:hover .mbn-icon svg {
    filter:
      drop-shadow(0 0 6px rgba(var(--tab-color), .7))
      drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
  }

  /* Aktiver Tab: kraeftiger Glow + dezenter Tinted Background.
     Border wird subtiler, Container darf das Icon "atmen lassen". */
  #mobile-bottom-nav button.on {
    color: #ffffff;
    border-color: rgba(var(--tab-color), .45);
    background:
      radial-gradient(ellipse at 50% 100%, rgba(var(--tab-color), .25), transparent 70%),
      linear-gradient(180deg, rgba(var(--tab-color), .12), rgba(var(--tab-color), .02));
    box-shadow:
      0 0 0 1px rgba(var(--tab-color), .28) inset,
      0 0 16px rgba(var(--tab-color), .28),
      0 0 28px rgba(var(--tab-color), .12);
  }

  #mobile-bottom-nav button.on .mbn-icon {
    transform: translateY(-1px) scale(1.08);
  }

  #mobile-bottom-nav button.on .mbn-icon svg {
    width: 30px;
    height: 30px;
    filter:
      drop-shadow(0 0 8px rgba(var(--tab-color), .9))
      drop-shadow(0 0 16px rgba(var(--tab-color), .45))
      drop-shadow(0 1px 2px rgba(0, 0, 0, .65));
  }

  #mobile-bottom-nav button:active {
    transform: translateY(1px) scale(.98);
  }

  /* Bottom-Fade — bleibt unveraendert, damit Content nicht hinter Nav herfliesst */
  body::after,
  body.mobile-first::after {
    bottom: var(--mobile-nav-lift, 0px);
    height: 92px;
    background: linear-gradient(180deg, rgba(8, 12, 16, 0) 0%, rgba(8, 12, 16, .92) 54%, rgba(8, 12, 16, .98) 100%);
  }
}

@keyframes bottomNavSweep {
  0%, 46%, 100% { transform: translateX(-74%); opacity: 0; }
  58% { opacity: .65; }
  78% { transform: translateX(74%); opacity: 0; }
}

/* Owner-Bug 2026-05-07: Glitch-Fix — backdrop-filter blur(24px) auf
   Navbar UND Mobile-League-Picker auf Mobile reduzieren. Ueberlagert
   die !important-Regeln aus ui-polish.css und mobile-league-picker.css. */
@media (max-width: 600px) {
  .nb {
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
  }
  .mlp-sheet {
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  #mobile-bottom-nav::after { animation: none; opacity: 0; }
  #mobile-bottom-nav button,
  #mobile-bottom-nav button .mbn-icon { transition-duration: .01ms; }
}