:root {
  --neon-bg: #0d0221;
  --neon-bg-2: #1c0645;
  --pink: #ff2ec4;
  --cyan: #19f0ff;
  --yellow: #ffd23f;
  --text-neon: #f6ecff;

  --sport-bg: #f5f7fa;
  --sport-text: #16202e;
  --sport-muted: #5b6776;
  --sg: #2fa44d;
  --win: #1f9d55;
  --draw: #b7811f;
  --loss: #d64545;

  --radius: 18px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.is-locked, html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--neon-bg);
  color: var(--text-neon);
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

img, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* ---------- Splash ---------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  background:
    radial-gradient(circle at 50% 38%, #4a0d80 0%, transparent 60%),
    var(--neon-bg);
  transition: opacity .5s ease, visibility .5s ease;
}
.splash.is-leaving { opacity: 0; visibility: hidden; }

.splash-enter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: calc(24px + var(--safe-top)) 24px calc(96px + var(--safe-bottom));
  border: 0;
  background: none;
  text-align: center;
}
.splash-logo {
  width: min(52vw, 230px);
  border-radius: 22px;
  box-shadow: 0 0 0 2px rgba(25, 240, 255, .5), 0 0 40px rgba(25, 240, 255, .35), 0 0 80px rgba(255, 46, 196, .3);
  animation: pulse 1.6s ease-in-out infinite;
}
.splash-cta {
  font-size: clamp(1.45rem, 6.5vw, 2.1rem);
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 0 8px var(--pink), 0 0 24px var(--pink);
}
.splash-hint {
  color: var(--cyan);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.splash-silent {
  position: absolute;
  left: 50%;
  bottom: calc(24px + var(--safe-bottom));
  transform: translateX(-50%);
  padding: .6rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .75);
  font-size: .9rem;
  white-space: nowrap;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: calc(28px + var(--safe-top)) 20px 40px;
  text-align: center;
  background:
    radial-gradient(120% 55% at 50% 100%, rgba(255, 46, 196, .35), transparent 62%),
    linear-gradient(180deg, #14033a 0%, var(--neon-bg) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .7;
  background-image:
    radial-gradient(3px 3px at 12% 18%, var(--pink) 50%, transparent 55%),
    radial-gradient(2px 2px at 82% 12%, #fff 50%, transparent 55%),
    radial-gradient(3px 3px at 90% 38%, var(--cyan) 50%, transparent 55%),
    radial-gradient(2px 2px at 8% 52%, var(--yellow) 50%, transparent 55%),
    radial-gradient(3px 3px at 70% 26%, var(--yellow) 50%, transparent 55%),
    radial-gradient(2px 2px at 30% 8%, var(--cyan) 50%, transparent 55%),
    radial-gradient(2px 2px at 55% 44%, #fff 50%, transparent 55%);
}
.hero > * { position: relative; }

.logo-row { display: flex; justify-content: center; gap: 14px; }
.badge {
  width: 68px;
  height: 68px;
  border-radius: 22%;
  object-fit: cover;
  background: #000;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 0 18px rgba(25, 240, 255, .25);
}
.badge-round { border-radius: 50%; }

.kicker {
  margin: 18px 0 0;
  color: var(--cyan);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-wrap: balance;
}
.neon-title {
  margin: 6px 0 0;
  color: #fff;
  font-size: clamp(3.6rem, 21vw, 6.5rem);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 6px #fff, 0 0 14px var(--pink), 0 0 32px var(--pink), 0 0 64px var(--pink);
  animation: flicker 6s infinite;
}
.neon-sub {
  margin: 8px 0 24px;
  color: var(--cyan);
  font-weight: 800;
  text-shadow: 0 0 10px rgba(25, 240, 255, .6);
}

.jens-trigger {
  position: relative;
  display: block;
  width: min(100%, 460px);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: none;
  box-shadow: 0 0 0 2px rgba(255, 46, 196, .7), 0 0 40px rgba(255, 46, 196, .35);
  transition: transform .15s ease;
}
.jens-trigger:active { transform: scale(.98); }
.tap-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: .35rem .75rem;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  background: rgba(13, 2, 33, .82);
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
  animation: bob 1.8s ease-in-out infinite;
}

/* ---------- Neon-Sections ---------- */
.section { max-width: 720px; margin: 0 auto; padding: 36px 20px; }
.section-title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.6rem, 7.5vw, 2.2rem);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 0 12px var(--cyan);
}
.section-sub { margin: 6px 0 18px; color: rgba(246, 236, 255, .75); text-align: center; }
.loading, .load-error { color: rgba(246, 236, 255, .7); text-align: center; list-style: none; }

/* MVP */
.mvp-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mvp-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 46, 196, .2), rgba(25, 240, 255, .08));
}
.mvp-item.is-top { border-color: rgba(255, 210, 63, .7); box-shadow: 0 0 18px rgba(255, 210, 63, .18); }
.mvp-rank { font-size: 1.5rem; font-weight: 900; text-align: center; }
.mvp-name { font-size: 1.05rem; font-weight: 800; overflow-wrap: anywhere; }
.mvp-count { color: var(--yellow); font-weight: 900; white-space: nowrap; }
.mvp-note { margin: 14px 0 0; color: var(--yellow); font-weight: 800; text-align: center; }

/* Galerie */
.gallery { position: relative; margin: 0 -20px; }
.gallery-track {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 4px 20px 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 88%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: var(--neon-bg-2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  scroll-snap-align: center;
}
.slide img { width: 100%; height: 100%; object-fit: cover; }

.gallery-nav {
  position: absolute;
  top: 50%;
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(13, 2, 33, .75);
  font-size: 1.6rem;
  line-height: 1;
  transform: translateY(-50%);
}
.gallery-nav.prev { left: 28px; }
.gallery-nav.next { right: 28px; }
@media (hover: hover) and (pointer: fine) {
  .gallery-nav { display: grid; }
}

.gallery-meta { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.dots { display: flex; }
.dot { width: 22px; height: 22px; padding: 0; border: 0; background: none; }
.dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  transition: width .2s ease, background .2s ease;
}
.dot[aria-current="true"]::before { width: 18px; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.gallery-count { color: rgba(246, 236, 255, .7); font-size: .85rem; font-variant-numeric: tabular-nums; }

/* Reminder-Video */
.video-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
  box-shadow: 0 0 0 2px rgba(25, 240, 255, .5), 0 0 30px rgba(25, 240, 255, .25);
}
.video-card video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pill {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: .6rem 1.05rem;
  border: 0;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 0 16px rgba(255, 46, 196, .6);
}
.pill[aria-pressed="true"] { background: #fff; color: var(--neon-bg); }

.divider { height: 90px; background: linear-gradient(180deg, var(--neon-bg), var(--sport-bg)); }

/* ---------- Sport (hell, Vereinsfarben) ---------- */
.sport {
  padding: 4px 16px 44px;
  background: var(--sport-bg);
  color: var(--sport-text);
  color-scheme: light;
}
.sport-inner { max-width: 720px; margin: 0 auto; }
.sport-title { margin: 0 0 8px; font-size: clamp(1.6rem, 7.5vw, 2.2rem); font-weight: 900; text-align: center; }
.sport .loading { color: var(--sport-muted); }
.example-badge {
  width: fit-content;
  margin: 0 auto 16px;
  padding: .35rem .85rem;
  border: 1px solid #f0d58a;
  border-radius: 999px;
  background: #fff4d6;
  color: #6f4f00;
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 16px;
  padding: 5px;
  border-radius: 14px;
  background: #e3e7ee;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: .6rem .5rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sport-muted);
}
.tab[aria-selected="true"] { background: #fff; color: var(--sport-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.tab-cat { font-size: 1rem; font-weight: 900; }
.tab-name { font-size: .72rem; line-height: 1.2; text-align: center; }

.team-panel { --team: var(--sg); }
.team-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: var(--team);
  color: #fff;
}
.team-head img { flex: none; width: 52px; height: 52px; border-radius: 12px; background: #000; object-fit: cover; }
.team-head h3 { margin: 0; font-size: 1.1rem; line-height: 1.2; }
.team-head p { margin: 2px 0 0; font-size: .85rem; opacity: .85; }

.block-title {
  margin: 22px 0 10px;
  color: var(--sport-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.card { border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); }

.table-wrap { overflow-x: auto; }
.league { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.league th, .league td { padding: .55rem .35rem; text-align: center; white-space: nowrap; }
.league th {
  border-bottom: 1px solid #e6e9ee;
  color: var(--sport-muted);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.league .team { min-width: 118px; font-weight: 600; text-align: left; white-space: normal; }
.league tbody tr + tr td { border-top: 1px solid #f0f2f5; }
.league tr.own td { background: #eef3f8; background: color-mix(in srgb, var(--team) 13%, #fff); font-weight: 800; }
.league tr.own td:first-child { box-shadow: inset 4px 0 0 var(--team); }
.league .pts { font-weight: 900; }

.games { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.game { padding: 12px 14px; }
.game-date { color: var(--sport-muted); font-size: .78rem; font-weight: 600; text-align: center; }
.game-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 4px; }
.game-team { font-size: .92rem; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.game-team.home { text-align: right; }
.game-team.away { text-align: left; }
.game-team.is-own { color: var(--team); font-weight: 900; }
.score {
  min-width: 64px;
  padding: .3rem .6rem;
  border-radius: 8px;
  background: #eef1f5;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.score.win { background: var(--win); color: #fff; }
.score.draw { background: var(--draw); color: #fff; }
.score.loss { background: var(--loss); color: #fff; }
.vs { color: var(--sport-muted); font-size: .8rem; font-weight: 800; }
.game-venue { margin-top: 6px; color: var(--sport-muted); font-size: .78rem; text-align: center; }
.empty { color: var(--sport-muted); }

/* ---------- Footer ---------- */
.footer { padding: 40px 20px calc(120px + var(--safe-bottom)); background: var(--neon-bg); text-align: center; }
.insta { display: grid; gap: 12px; max-width: 420px; margin: 0 auto; }
.insta-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7);
  box-shadow: 0 6px 24px rgba(238, 42, 123, .35);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
  text-decoration: none;
}
.insta-btn small { font-size: .8rem; font-weight: 600; opacity: .9; }
.insta-jens { background: linear-gradient(45deg, #0bb8c7, var(--pink)); }
.footer-logos { margin: 28px 0 14px; }
.footer-logos .badge { width: 52px; height: 52px; }
.footer p { margin: 4px 0; color: rgba(246, 236, 255, .6); font-size: .8rem; }

/* ---------- Floating: Lurchi + Sound ---------- */
.lurchi {
  position: fixed;
  left: var(--safe-left);
  bottom: calc(10px + var(--safe-bottom));
  z-index: 40;
  width: 84px;
  padding: 0;
  border: 0;
  background: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45));
  transform: translateX(-62%) rotate(14deg);
  animation: peek 9s ease-in-out infinite;
}
.sound-btn {
  position: fixed;
  right: calc(14px + var(--safe-right));
  bottom: calc(14px + var(--safe-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  background: rgba(13, 2, 33, .85);
  color: #fff;
  box-shadow: 0 0 18px rgba(25, 240, 255, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sound-btn svg { width: 26px; height: 26px; }
.sound-btn .ic-off { display: none; }
.sound-btn[aria-pressed="false"] { border-color: rgba(255, 255, 255, .4); box-shadow: none; }
.sound-btn[aria-pressed="false"] .ic-on { display: none; }
.sound-btn[aria-pressed="false"] .ic-off { display: block; }
.sound-btn[aria-pressed="true"] { animation: glow 1.4s ease-in-out infinite; }

/* ---------- Jens-Popup ---------- */
.jens-dialog {
  width: min(88vw, 420px, 46dvh);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}
.jens-dialog::backdrop { background: rgba(8, 0, 20, .86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.jens-inner { position: relative; }
.jens-inner video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius);
  background: #000;
  box-shadow: 0 0 0 2px var(--pink), 0 0 40px rgba(255, 46, 196, .5);
}
.jens-close {
  position: absolute;
  top: -14px;
  right: -10px;
  width: 44px;
  height: 44px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
}

/* ---------- Animationen ---------- */
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes flicker {
  0%, 17%, 21%, 24%, 52%, 56%, 100% { opacity: 1; }
  19%, 22.5%, 54% { opacity: .55; }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 10px rgba(25, 240, 255, .4); }
  50% { box-shadow: 0 0 24px rgba(25, 240, 255, .85); }
}
@keyframes peek {
  0%, 70%, 100% { transform: translateX(-62%) rotate(14deg); }
  77%, 92% { transform: translateX(-6%) rotate(0deg); }
  82% { transform: translateX(-6%) rotate(-7deg); }
  87% { transform: translateX(-6%) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}