/* ═══════════════════════════════════════════════════════════════════
   🦎 MECCHA CHAMELEON — „CHROMA" v7
   Design-System: ruhiges Glas auf tiefem Navy, EINE Akzentfarbe (Chamäleon-Grün) +
   Gold für Sieger, Chamäleon-Auge als Logo, Insel-Navigation, Bühnen-Podium (aus v6),
   Schriften: Unbounded (Display/Zahlen) · Sora (Überschriften/UI) · Manrope (Text).
   Alle von den JS-Modulen genutzten Klassen/IDs bleiben erhalten; Legacy-Variablen
   (--neon, --steel-*, --rust*, --brass*, --patina*, --head-font, --title-font …) sind gemappt.
   Schriften werden in index.html per <link> geladen.
   ═══════════════════════════════════════════════════════════════════ */

@property --ga { syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* ═══════════════ TOKENS ═══════════════ */
:root{
  /* Farben */
  --green:#00ffa3; --green-2:#7dffce; --green-3:#00c98a;
  --teal:#00d4ff; --violet:#8b5cf6; --pink:#ff3d8f;
  --gold:#ffd166; --gold-2:#ffe49a; --coral:#ff5c7a;
  --bg-0:#060a12; --bg-1:#0a1120; --bg-2:#0f1728; --bg-3:#152036; --bg-4:#1b2843;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.22);
  --text:#eef3fb; --text-2:#c6cfe0; --muted:#8a97b3;
  /* Schrift */
  --font-display:'Unbounded','Sora','Segoe UI',sans-serif;
  --font-head:'Sora','Segoe UI',system-ui,sans-serif;
  --font-body:'Manrope','Segoe UI',system-ui,sans-serif;
  --title-font:var(--font-display); --head-font:var(--font-head);
  /* Radien / Layout */
  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --nav-h:60px; --nav-real-h:60px; --pinned-h:46px;
  /* Verläufe */
  --grad-main:linear-gradient(90deg,var(--green),var(--teal));
  --grad-chroma:linear-gradient(90deg,var(--green),var(--teal) 45%,var(--violet) 80%,var(--pink));
  --grad-ring:conic-gradient(from var(--ga,0deg),var(--green),var(--teal),var(--violet),var(--pink),var(--teal),var(--green));
  --glass:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  --shadow-card:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -28px rgba(0,0,0,.75);
  /* Legacy-Mapping (Module, Shows, Overrides) */
  --neon:var(--green); --neon-hi:var(--green-2); --cyan:var(--teal); --gold-hi:var(--gold-2);
  --rust:var(--green); --rust-bright:var(--green-2); --rust-dark:var(--green-3); --rust-glow:rgba(0,255,163,.35);
  --brass:var(--gold); --brass-bright:var(--gold-2); --patina:var(--teal); --patina-bright:#5ce1ff;
  --steel-950:var(--bg-0); --steel-900:var(--bg-1); --steel-800:var(--bg-2); --steel-700:var(--bg-3);
  --steel-600:var(--bg-4); --steel-500:#22304f; --steel-400:rgba(255,255,255,.14); --steel-300:rgba(255,255,255,.22);
  --metal-hi:rgba(255,255,255,.06); --border:var(--line-2);
  --danger:var(--coral); --danger-bright:#ff8aa0; --blue:#5ce1ff;
  --panel:var(--bg-2); --panel2:var(--bg-3); --accent:var(--green); --accent2:var(--green-3);
  --silver:#cfd6e4; --bronze:#f0a56b;
  /* Draco-Gold, nur fuer Verweise auf Draco-Gaming (wie auf der Nordstreitmacht-Seite) */
  --draco:#f2a23a; --draco-hell:#ffd48f;
}

/* ═══════════════ RESET ═══════════════ */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-0)}
::-webkit-scrollbar-thumb{background:var(--bg-4);border:2px solid var(--bg-0);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#26375c}
*{scrollbar-width:thin;scrollbar-color:var(--bg-4) var(--bg-0)}
::selection{background:var(--green);color:#04250f}
button,input,select,textarea{font-family:inherit;}

/* ═══════════════ BODY: Mesh + Punktraster ═══════════════ */
body{
  font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--text);min-height:100vh;
  padding:0 16px 100px;position:relative;overflow-x:hidden;
  background:
    radial-gradient(1px 1px at 50% 50%,rgba(255,255,255,.07) 1px,transparent 1.5px) 0 0/28px 28px,
    radial-gradient(70% 55% at 12% 6%,rgba(0,255,163,.13),transparent 62%),
    radial-gradient(55% 45% at 88% 0%,rgba(0,212,255,.11),transparent 62%),
    radial-gradient(60% 50% at 72% 100%,rgba(139,92,246,.13),transparent 62%),
    linear-gradient(180deg,#0a1120 0%,#070c16 55%,#060a12 100%);
  background-attachment:fixed;
}
body::before{ /* langsam wandernde Farbwolken – das „Chamäleon“ atmet */
  content:'';position:fixed;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(34vw 24vw at 22% 26%,rgba(0,255,163,.13),transparent 62%),
    radial-gradient(30vw 22vw at 80% 16%,rgba(0,212,255,.11),transparent 62%),
    radial-gradient(30vw 26vw at 66% 84%,rgba(139,92,246,.13),transparent 62%),
    radial-gradient(24vw 18vw at 10% 78%,rgba(255,61,143,.08),transparent 62%);
  filter:blur(12px);
  animation:auroraDrift 40s ease-in-out infinite alternate, auroraHue 90s linear infinite;
}
@keyframes auroraDrift{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(6deg) scale(1.08)}100%{transform:rotate(-5deg) scale(1.04)}}
@keyframes auroraHue{0%{filter:blur(12px) hue-rotate(0deg)}100%{filter:blur(12px) hue-rotate(360deg)}}
/* Vignette + feines Grain (eine statische SVG-Kachel) */
body::after{
  content:'';position:fixed;inset:0;z-index:999998;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/180px 180px repeat,
    radial-gradient(ellipse at 50% 35%,rgba(0,0,0,0) 58%,rgba(3,5,10,.38) 100%);   /* Vignette nur am Rand – die Mal-Fläche bleibt weiß */
}
#bgCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:.7;}
/* Arena-Boden (Perspektiv-Gitter) unten */
.bg-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:radial-gradient(70% 34% at 50% 102%,rgba(0,255,163,.11),rgba(0,212,255,.04) 45%,transparent 72%);}
.bg-overlay::before{
  content:'';position:absolute;left:-40%;right:-40%;bottom:-8%;height:50%;
  transform-origin:50% 100%;transform:perspective(520px) rotateX(64deg);
  background:
    repeating-linear-gradient(90deg,rgba(0,255,163,.10) 0 2px,transparent 2px 84px),
    repeating-linear-gradient(0deg,rgba(0,212,255,.08) 0 2px,transparent 2px 84px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 60%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 60%,#000 100%);
  animation:floorMove 6s linear infinite;
}
@keyframes floorMove{to{background-position:0 84px,0 84px}}
#leaderTint{position:fixed;inset:0;z-index:-1;pointer-events:none;transition:background 1.2s ease;}
body.maint-active{overflow:hidden;}

/* ═══════════════ LOGO: Chamäleon-Auge ═══════════════ */
.brand-mark,.logo-mark{
  display:inline-block;flex:none;vertical-align:middle;
  width:26px;height:26px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='i' cx='38%25' cy='32%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23a8ffe0'/%3E%3Cstop offset='.35' stop-color='%2300ffa3'/%3E%3Cstop offset='.75' stop-color='%23009a66'/%3E%3Cstop offset='1' stop-color='%2304452f'/%3E%3C/radialGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2300ffa3'/%3E%3Cstop offset='.5' stop-color='%2300d4ff'/%3E%3Cstop offset='1' stop-color='%238b5cf6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='29' fill='%230b1220' stroke='url(%23r)' stroke-width='3'/%3E%3Ccircle cx='32' cy='32' r='22' fill='url(%23i)'/%3E%3Ccircle cx='32' cy='32' r='16' fill='none' stroke='%2303301f' stroke-opacity='.35' stroke-width='1.2'/%3E%3Ccircle cx='32' cy='32' r='10' fill='none' stroke='%2303301f' stroke-opacity='.35' stroke-width='1.2'/%3E%3Cellipse cx='32' cy='32' rx='4.2' ry='13' fill='%2304160f'/%3E%3Ccircle cx='25.5' cy='24.5' r='3.4' fill='%23fff' fill-opacity='.9'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(0,255,163,.45));
}
.logo-mark{width:44px;height:44px;animation:eyeLook 7s ease-in-out infinite;}
@keyframes eyeLook{0%,100%{transform:rotate(0)}40%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}

/* ═══════════════ INSEL-NAVIGATION ═══════════════ */
.topnav{
  position:sticky;top:10px;z-index:200;
  max-width:1560px;margin:10px auto 0;border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:rgba(10,17,32,.72);backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 18px 50px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-inner{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:8px 12px;min-height:var(--nav-h);}
.nav-brand{
  display:flex;align-items:center;gap:9px;flex:none;
  font-family:var(--font-display);font-weight:900;font-size:.9rem;letter-spacing:.06em;
  color:var(--text);padding:6px 12px 6px 8px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
}
.nav-brand .brand-text{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;}
.nav-tabs{flex:1 0 auto;display:flex;gap:4px;min-width:0;overflow:visible;} /* schrumpft nie – Pillen brechen stattdessen in eine 2. Zeile */
.tab-btn,a.tab-extern{
  display:flex;align-items:center;gap:7px;position:relative;
  background:transparent;border:1px solid transparent;color:var(--muted);
  padding:9px 13px;border-radius:999px;cursor:pointer;
  font-family:var(--font-head);font-size:.82rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  transition:color .18s,background .18s,border-color .18s,transform .18s;
}
.tab-btn .tab-ico{font-size:1.05rem;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));transition:transform .2s cubic-bezier(.2,1.6,.4,1);}
.tab-btn:hover,a.tab-extern:hover{color:var(--text);background:rgba(255,255,255,.05);}
.tab-btn:hover .tab-ico{transform:translateY(-1px) scale(1.12);}
.tab-btn.active{color:var(--green-2);background:rgba(0,255,163,.12);border-color:rgba(0,255,163,.3);box-shadow:0 0 22px -6px rgba(0,255,163,.5);}
.tab-btn.active .tab-ico{animation:icoLand .4s cubic-bezier(.2,1.6,.4,1);}
@keyframes icoLand{0%{transform:scale(.3) rotate(-18deg)}70%{transform:scale(1.25) rotate(5deg)}100%{transform:scale(1)}}
@media(max-width:1250px){
  .nav-tabs{overflow-x:auto;scrollbar-width:none;}
  .nav-tabs::-webkit-scrollbar{display:none;}
  .tab-btn{padding:9px 10px;}
  .tab-btn .tab-lbl{display:none;}
  .tab-btn .tab-ico{font-size:1.25rem;}
}
.nav-pills{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;padding:2px 0;flex:1 1 auto;margin-left:auto;}
.nav-pills::-webkit-scrollbar{display:none;}

/* Pillen */
.status-pill{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--font-head);
  font-size:.7rem;font-weight:600;letter-spacing:.02em;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);
  white-space:nowrap;cursor:default;transition:.18s;flex:none;
}
.status-pill.live{color:var(--green-2);border-color:rgba(0,255,163,.35);background:rgba(0,255,163,.08);animation:ledPulse 2.4s ease-in-out infinite;}
@keyframes ledPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,255,163,0)}50%{box-shadow:0 0 16px -2px rgba(0,255,163,.55)}}
.status-pill.local{color:var(--gold-2);border-color:rgba(255,209,102,.35);background:rgba(255,209,102,.07);}
.sound-toggle{cursor:pointer;}
.sound-toggle:hover{border-color:rgba(0,255,163,.45);color:var(--green-2);background:rgba(0,255,163,.08);transform:translateY(-1px);}

/* 📍 Turnier-Statusleiste (status-bar.js, hängt in der Insel) */
.status-strip{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:7px 14px 8px;border-top:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg);
  font-family:var(--font-head);font-size:.8rem;font-weight:600;color:var(--text-2);
  background:linear-gradient(90deg,rgba(0,255,163,.05),rgba(0,212,255,.04) 50%,rgba(139,92,246,.05));
}
.status-strip .ss-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none;}
.status-strip .ss-ico{font-size:1.05rem;line-height:1;}
.status-strip .ss-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(78vw,900px);}
.status-strip .ss-time{font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.04em;padding:2px 10px;border-radius:999px;
  color:var(--green-2);border:1px solid rgba(0,255,163,.35);background:rgba(0,255,163,.08);font-variant-numeric:tabular-nums;}
.status-strip .ss-time.hot{color:#ffb3c1;border-color:rgba(255,92,122,.55);background:rgba(255,92,122,.12);animation:ssHot .7s ease-in-out infinite;}
@keyframes ssHot{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.status-strip .ss-prog{display:inline-flex;gap:3px;align-items:center;}
.status-strip .ss-prog i{display:block;width:14px;height:5px;border-radius:3px;background:rgba(255,255,255,.12);}
.status-strip .ss-prog i.on{background:var(--grad-main);box-shadow:0 0 6px rgba(0,255,163,.5);}
.status-strip.live .ss-dot{background:var(--green);box-shadow:0 0 10px var(--rust-glow);animation:ledPulse 1.6s ease-in-out infinite;}
.status-strip.live{color:var(--green-2);}
.status-strip.playing .ss-dot{background:var(--coral);box-shadow:0 0 10px rgba(255,92,122,.6);animation:ledPulse 1.2s ease-in-out infinite;}
.status-strip.playing{color:#ffb3c1;background:linear-gradient(90deg,rgba(255,92,122,.1),rgba(255,61,143,.05));}
.status-strip.wait .ss-dot{background:var(--gold);box-shadow:0 0 10px rgba(255,209,102,.5);}
.status-strip.gold{color:var(--gold-2);} .status-strip.gold .ss-dot{background:var(--gold);}
.status-strip.warn{color:var(--gold-2);background:repeating-linear-gradient(-45deg,rgba(255,209,102,.09) 0 12px,rgba(0,0,0,0) 12px 24px);}
.status-strip.flash{animation:ssFlash .9s ease;}
@keyframes ssFlash{0%{box-shadow:inset 0 0 0 200px rgba(0,255,163,.2)}100%{box-shadow:inset 0 0 0 200px rgba(0,255,163,0)}}

/* ═══════════════ HEADER ═══════════════ */
.site-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:18px 0 20px;padding:22px 26px;position:relative;overflow:hidden;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:
    linear-gradient(90deg,rgba(15,23,40,0) 0%,rgba(15,23,40,.55) 45%,rgba(15,23,40,.95) 100%),
    radial-gradient(circle at 100% 50%,transparent 24%,rgba(0,255,163,.06) 25%,rgba(0,255,163,.06) 31%,transparent 32%) 0 0/26px 26px,
    radial-gradient(circle at 0 50%,transparent 24%,rgba(0,212,255,.05) 25%,rgba(0,212,255,.05) 31%,transparent 32%) 0 0/26px 26px,
    var(--bg-2);
  box-shadow:var(--shadow-card), 0 0 60px -20px rgba(0,255,163,.25);
  animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both;
}
.site-header::before,.site-header::after{content:'';position:absolute;border-radius:50%;pointer-events:none;filter:blur(18px);}
.site-header::before{width:260px;height:260px;top:-150px;right:6%;background:radial-gradient(circle,rgba(0,255,163,.22),transparent 70%);animation:orbFloat 10s ease-in-out infinite;}
.site-header::after{width:220px;height:220px;bottom:-130px;left:3%;background:radial-gradient(circle,rgba(0,212,255,.18),transparent 70%);animation:orbFloat 13s ease-in-out infinite reverse;}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(26px,18px) scale(1.15)}66%{transform:translate(-18px,10px) scale(.92)}}
.header-main{position:relative;z-index:1;display:flex;align-items:center;gap:16px;}
.header-main h1{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-display);font-size:1.75rem;font-weight:900;letter-spacing:.01em;line-height:1.1;
  text-transform:uppercase;color:var(--text);
}
.header-main h1 .h1-text{background:linear-gradient(90deg,#fff 0%,var(--green-2) 55%,var(--teal) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(0,255,163,.25));}
.header-main h1 em{font-style:normal;font-weight:700;opacity:.55;}
.header-main p{color:var(--muted);margin-top:6px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-head);font-weight:600;}
.header-main{flex-direction:column;align-items:flex-start;gap:0;}
.header-main h1 + p{margin-left:58px;}
#mascot{
  display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;
  border:1px solid var(--line-2);position:relative;z-index:1;
  background:rgba(255,255,255,.04);backdrop-filter:blur(8px);
  font-size:.98rem;transition:.6s;white-space:nowrap;font-family:var(--font-head);font-weight:600;
}
.masc-emoji{font-size:1.4rem;vertical-align:middle;display:inline-block;position:relative;filter:drop-shadow(0 0 8px currentColor);animation:blink 4s infinite;}

/* ═══════════════ LAYOUT & KARTEN ═══════════════ */
.container{max-width:1560px;margin:0 auto;position:relative;z-index:1;}
.view{display:none;} .view.active{display:block;}
.view.active .card,.sub-pane.active .card{animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both;}
.view.active .card:nth-child(2),.sub-pane.active .card:nth-child(2){animation-delay:.05s}
.view.active .card:nth-child(3),.sub-pane.active .card:nth-child(3){animation-delay:.1s}
.view.active .card:nth-child(4),.sub-pane.active .card:nth-child(4){animation-delay:.15s}
.view.active .card:nth-child(n+5),.sub-pane.active .card:nth-child(n+5){animation-delay:.2s}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
@keyframes ringSpin{to{--ga:360deg}}

.card{
  position:relative;overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 18px 20px;margin-bottom:18px;
  background:var(--glass),var(--bg-2);
  box-shadow:var(--shadow-card);
  transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease;
}
.card:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 30px 70px -30px rgba(0,0,0,.85), 0 0 40px -22px rgba(0,255,163,.35);}
.card h2{
  margin:0 0 16px;padding:0 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--font-head);font-size:1rem;font-weight:700;letter-spacing:.01em;color:var(--text);
  border-bottom:1px solid var(--line);
}
.card h2::before{content:'';flex:none;width:4px;height:16px;border-radius:3px;background:var(--grad-main);box-shadow:0 0 12px rgba(0,255,163,.45);}
.card h2::after{content:'';flex:1;min-width:20px;height:1px;}
/* Hero-Karte (Treppchen): Chroma-Ring + Glühen in Farbe des Führenden */
.card.hero-card{
  --lead:var(--green);padding:22px 22px 26px;border:1px solid transparent;
  background:var(--glass) padding-box,var(--bg-2) padding-box,var(--grad-ring) border-box;
  box-shadow:var(--shadow-card), 0 0 50px -14px rgba(0,255,163,.3);
  box-shadow:var(--shadow-card), 0 0 54px -14px color-mix(in srgb,var(--lead) 55%,transparent);
  animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both, ringSpin 18s linear infinite;
  transition:box-shadow .9s ease,transform .3s ease;
}
.card.hero-card:hover{box-shadow:var(--shadow-card), 0 0 70px -12px color-mix(in srgb,var(--lead) 70%,transparent);}
.card.mk-cb-flex{border:none;background:none;box-shadow:none;}

/* 🔖 Gruppen-Überschriften (Hauptseite) */
.pub-group{display:flex;align-items:center;gap:12px;margin:30px 0 14px;user-select:none;}
.pub-group.first{margin-top:4px;}
.pub-group .pg-ico{font-size:1.15rem;line-height:1;flex:none;filter:drop-shadow(0 0 10px rgba(0,255,163,.35));}
.pub-group .pg-title{font-family:var(--font-head);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;white-space:nowrap;color:var(--muted);}
.pub-group .pg-line{flex:1;height:1px;background:linear-gradient(90deg,var(--line-3),transparent);}

/* Sub-Tabs (Ruhm) als Segment-Control */
.sub-tabs{display:inline-flex;gap:4px;margin:0 auto 18px;padding:4px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);left:50%;position:relative;transform:translateX(-50%);}
.sub-tab{font-family:var(--font-head);font-weight:600;font-size:.84rem;color:var(--muted);padding:9px 20px;border-radius:999px;cursor:pointer;background:transparent;border:none;transition:.2s;}
.sub-tab:hover{color:var(--text);}
.sub-tab.active{color:#04250f;background:var(--grad-main);box-shadow:0 8px 22px -8px rgba(0,255,163,.6);}
.sub-pane{display:none;} .sub-pane.active{display:block;}

/* ═══════════════ 👤 PROFIL (Gruppen via profile-layout.js) + ⭐ XP-OVERRIDE ═══════════════ */
#profileContent{display:block;}
#profileContent > .card.pc-main{margin-bottom:6px;}
.pf-group{margin:0 0 6px;}
.pf-group .pub-group{margin:22px 0 12px;}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;align-items:start;}
.pf-grid > .card{margin-bottom:0;height:100%;}
.pf-grid > .card.pf-wide{grid-column:1/-1;}
@media(max-width:760px){.pf-grid{grid-template-columns:1fr;}}
/* ausgeloggt: Login-Karte und Overlay-Download nebeneinander */
#profile.pf-out.active{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start;}   /* nur wenn der Tab aktiv ist – sonst bleibt .view{display:none} */
#profile.pf-out > .card{margin-bottom:0;}
#profile.pf-out > #profileContent{grid-column:1/-1;}
@media(max-width:860px){#profile.pf-out{grid-template-columns:1fr;}}
/* Kopf-Karte */
.pc-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.pc-av{--pc:var(--green);flex:none;width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:3px solid var(--pc);background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.1),rgba(8,12,20,.9) 70%);
  box-shadow:0 0 0 5px rgba(255,255,255,.05),0 0 30px color-mix(in srgb,var(--pc) 55%,transparent);}
.pc-av .p-av{border:none!important;box-shadow:none;}
.pc-id{flex:1;min-width:220px;}
.pc-name{font-family:var(--font-display);font-weight:900;font-size:1.6rem;line-height:1.1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pc-sub{color:var(--muted);font-family:var(--font-head);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;margin:6px 0 10px;}
.pc-badges{display:flex;flex-wrap:wrap;gap:4px;}
.pc-badges .badge{margin:0;}
.pc-nobadge{color:var(--muted);font-size:.85rem;}
.pc-actions{display:flex;flex-direction:column;gap:6px;align-items:stretch;flex:none;}
.pc-actions .action{margin:0;}
#pcXpSlot:empty{display:none;}
#pcXpSlot .xp-wrap{margin:16px 0 0!important;animation:none!important;}
.pc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:18px;}
.pc-kpi{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px 10px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03);text-align:center;transition:.2s;}
.pc-kpi:hover{border-color:var(--line-2);transform:translateY(-2px);}
.pc-kpi .k-ico{font-size:1.3rem;line-height:1;filter:drop-shadow(0 0 8px rgba(0,255,163,.35));}
.pc-kpi b{font-family:var(--font-display);font-weight:900;font-size:1.5rem;line-height:1.1;background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;}
.pc-kpi .k-lbl{font-family:var(--font-head);font-weight:600;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.pc-hist{margin-top:16px;border-top:1px solid var(--line);padding-top:10px;}
.pc-hist summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--text-2);padding:6px 12px;border-radius:999px;border:1px solid var(--line);transition:.15s;}
.pc-hist summary::-webkit-details-marker{display:none;}
.pc-hist summary::after{content:'▾';font-size:.8rem;color:var(--muted);transition:transform .2s;}
.pc-hist[open] summary::after{transform:rotate(180deg);}
.pc-hist summary:hover{border-color:rgba(0,255,163,.4);color:var(--text);}
.pc-hist .pc-cnt{font-family:var(--font-display);font-size:.72rem;padding:1px 8px;border-radius:999px;background:rgba(0,255,163,.12);color:var(--green-2);}
.pc-hist-body{margin-top:10px;max-height:300px;overflow:auto;border-radius:12px;}
.pc-hist-body table{min-width:0;}
.pc-look #profileEmojiPicker .emoji-opt{width:38px;height:38px;font-size:1.3rem;border-radius:10px;}
.pc-look .emoji-picker{gap:5px;}
@media(max-width:640px){
  .pc-hero{flex-direction:column;align-items:center;text-align:center;gap:10px;}
  .pc-av{width:76px;height:76px;}
  .pc-id{min-width:0;width:100%;}
  .pc-name{font-size:1.3rem;justify-content:center;}
  .pc-badges{justify-content:center;}
  .pc-actions{flex-direction:row;width:100%;}.pc-actions .action{flex:1;}
  .pc-kpis{grid-template-columns:repeat(2,1fr);gap:8px;}
  .pc-kpi b{font-size:1.25rem;}
}
.xp-wrap{border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;background:var(--glass),var(--bg-2)!important;
  box-shadow:var(--shadow-card)!important;animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both!important;margin:0 0 16px!important;padding:16px 18px!important;}
.xp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px!important;flex-wrap:wrap;}
.xp-lvlbadge{display:inline-flex;align-items:center;gap:10px;font-weight:700!important;color:var(--text)!important;font-family:var(--font-head)!important;letter-spacing:0!important;}
.xp-lvlnum{display:inline-flex;align-items:center;justify-content:center;min-width:40px!important;height:40px!important;padding:0 10px!important;border-radius:50%!important;
  background:var(--grad-main)!important;box-shadow:0 8px 20px -8px rgba(0,255,163,.7)!important;color:#04250f!important;font-family:var(--font-display)!important;font-weight:700!important;font-size:1rem!important;}
.xp-xptext{font-size:.8rem!important;color:var(--muted)!important;font-family:var(--font-head)!important;letter-spacing:0!important;}
.xp-bar{position:relative!important;height:22px!important;border-radius:999px!important;background:rgba(255,255,255,.06)!important;border:1px solid var(--line)!important;overflow:hidden!important;}
.xp-fill{height:100%!important;background:var(--grad-chroma)!important;box-shadow:0 0 14px rgba(0,212,255,.4)!important;transition:width .8s cubic-bezier(.2,.8,.2,1)!important;}
.xp-fill.levelup{animation:xpFlash 1s ease!important;}
@keyframes xpFlash{0%,100%{filter:brightness(1)}50%{filter:brightness(2)}}
.xp-bartxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center!important;font-size:.74rem!important;font-weight:700!important;color:#fff!important;
  text-shadow:0 1px 2px #000!important;font-family:var(--font-head)!important;letter-spacing:.02em!important;}
.xp-gain{font-family:var(--font-display)!important;color:var(--green-2)!important;text-shadow:0 0 24px var(--rust-glow)!important;}
#xpAdminCard .xp-mini{color:var(--muted)!important;}

/* ═══════════════ TABELLEN ═══════════════ */
table{width:100%;border-collapse:collapse;min-width:620px;font-size:.9rem;font-variant-numeric:tabular-nums;}
.hof-table,.king-table,.h2h-table{min-width:480px;}
th,td{padding:9px 10px;text-align:center;border-bottom:1px solid var(--line);}
td{transition:background .15s;}
th{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;color:var(--muted);
  position:sticky;top:0;z-index:2;background:rgba(15,23,40,.96)!important;border-bottom:1px solid var(--line-2);backdrop-filter:blur(4px);}
td.name-col,th.name-col{text-align:left;font-weight:600;}
tbody tr{transition:transform .15s;}
tbody tr:nth-child(even) td{background:rgba(255,255,255,.015);}
tr:hover td{background:rgba(0,255,163,.06);}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--green);}
.rank-1 td:first-child{color:var(--gold-2);font-weight:700;}
.rank-2 td:first-child{color:var(--silver);font-weight:700}
.rank-3 td:first-child{color:var(--bronze);font-weight:700}
.total-col{font-family:var(--font-display);font-weight:700;color:var(--green-2);font-size:.95rem;}
.hof-winner{color:var(--gold-2);font-weight:700;}
.locked-cell{color:var(--muted);}
/* Rangliste */
#ranking td{padding:10px 10px;}
#ranking td.total-col{font-size:1rem;}
#ranking tr.rank-1{box-shadow:inset 0 0 0 1px rgba(255,209,102,.35), 0 0 28px -8px rgba(255,209,102,.35);}
#ranking tr.rank-1 td{padding-top:13px;padding-bottom:13px;}
#ranking tr.rank-1 td.total-col{font-size:1.3rem;color:var(--gold-2);text-shadow:0 0 16px rgba(255,209,102,.5);}
#ranking tr.rank-1 .p-chip .clickable-name{font-size:1.06rem;}
#ranking tr.rank-2 td.total-col{color:#e6ecf5;}
#ranking tr.rank-3 td.total-col{color:#ffc79a;}

/* ═══════════════ CHIPS / AVATARE / PFEILE ═══════════════ */
.p-chip{display:inline-flex;align-items:center;gap:8px;}
.p-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;box-shadow:0 0 8px currentColor, inset 0 1px 2px rgba(255,255,255,.5);}
.p-av{border-radius:50%;object-fit:cover;vertical-align:middle;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.5);}
.clickable-name{cursor:pointer;border-bottom:1px dotted rgba(255,255,255,.3);transition:text-shadow .15s,border-color .15s;}
.clickable-name:hover{text-shadow:0 0 10px currentColor;border-color:currentColor;}
#ranking tr[data-idx]{will-change:transform;}
.arrow-up{color:var(--green-2);font-weight:700} .arrow-down{color:var(--danger-bright);font-weight:700}
.arrow-same{color:var(--muted)} .arrow-new{color:var(--gold-2)}
#champion{display:none;text-align:center;margin-bottom:18px;}
.champ-inner{display:inline-block;padding:10px 20px;border-radius:999px;border:1px solid rgba(255,209,102,.35);
  background:linear-gradient(135deg,rgba(255,209,102,.12),rgba(255,160,60,.05));color:var(--gold-2);font-size:1rem;box-shadow:0 8px 24px -10px rgba(255,209,102,.4);}
#favSpot{text-align:center;margin-top:8px;}
.fav-card{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;border:1px solid rgba(255,209,102,.35);
  background:linear-gradient(135deg,rgba(255,209,102,.1),transparent);color:var(--gold-2);font-size:.98rem;box-shadow:0 8px 24px -10px rgba(255,209,102,.35);}
.fav-card .fav-sub{color:var(--muted);font-size:.8rem;}

/* ═══════════════ PODIUM „ARENA" ═══════════════ */
#podiumWrap{position:relative;}
#podiumMascot{display:none;}
@keyframes idleBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
@keyframes blink{0%,44%,50%,100%{opacity:1}47%{opacity:.25}}
@keyframes hop{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-16px) rotate(-10deg)}50%{transform:translateY(0)}75%{transform:translateY(-9px) rotate(10deg)}}
.hop{animation:hop .7s ease !important;}
.masc-emoji.tongue::after,.pm-inner.tongue::after{content:"";position:absolute;left:50%;top:62%;width:4px;height:0;background:var(--pink);border-radius:3px;transform:translateX(-50%);transform-origin:top;animation:tongueShoot .8s ease;}
@keyframes tongueShoot{0%{height:0}40%{height:30px}62%{height:30px}100%{height:0}}
#podiumWrap::before{ /* Spotlights */
  content:'';position:absolute;inset:-30px -12px 26px;pointer-events:none;z-index:0;
  background:
    conic-gradient(from 152deg at 10% -12%,transparent 0deg,rgba(0,255,163,.13) 13deg,transparent 30deg),
    conic-gradient(from 188deg at 90% -12%,transparent 0deg,rgba(0,212,255,.12) 13deg,transparent 30deg),
    conic-gradient(from 170deg at 50% -30%,transparent 0deg,rgba(139,92,246,.09) 12deg,transparent 26deg);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
  animation:spotSway 9s ease-in-out infinite alternate;
}
@keyframes spotSway{from{transform:translateX(-16px)}to{transform:translateX(16px)}}
.podium-wrap{display:flex;justify-content:center;align-items:flex-end;gap:22px;margin:54px 0 10px;min-height:300px;flex-wrap:wrap;position:relative;z-index:1;padding-bottom:22px;}
.podium-wrap::after{ /* Bühnenkante */
  content:'';position:absolute;left:2%;right:2%;bottom:21px;height:3px;border-radius:3px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--green) 20%,var(--teal) 50%,var(--violet) 80%,transparent);
  box-shadow:0 0 18px rgba(0,255,163,.7), 0 10px 44px rgba(0,212,255,.35), 0 -14px 34px rgba(0,255,163,.12);
}
.podium-step{position:relative;width:212px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;transition:transform .35s cubic-bezier(.2,.8,.2,1);--pc:var(--green);}
.podium-step:hover{transform:translateY(-6px);}
.podium-step.enter{animation:podiumEnter .8s cubic-bezier(.2,.9,.2,1) both;}
.podium-step.enter.p2{animation-delay:.05s} .podium-step.enter.p1{animation-delay:.2s} .podium-step.enter.p3{animation-delay:.32s}
@keyframes podiumEnter{0%{opacity:0;transform:translateY(70px) scale(.88)}100%{opacity:1;transform:none}}
.podium-step .p-avatar{position:relative;z-index:2;margin-bottom:12px;filter:drop-shadow(0 6px 20px rgba(0,0,0,.6));}
.podium-step .p-avatar .av-wrap{width:var(--as,112px);height:var(--as,112px);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:3px solid var(--pc);background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.10),rgba(8,12,20,.92) 70%);
  box-shadow:0 0 0 5px rgba(255,255,255,.05), 0 0 34px var(--pc), inset 0 -12px 24px rgba(0,0,0,.45);}
.podium-step .p-avatar .p-av{border:none!important;box-shadow:none;}
.podium-step .rank-badge{position:absolute;right:-8px;bottom:-4px;z-index:3;font-size:1.8rem;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.7));}
.p1 .rank-badge{animation:medalPop .7s cubic-bezier(.2,1.6,.4,1) both .35s, medalGlow 2.5s ease-in-out infinite 1s;}
.p2 .rank-badge{animation:medalPop .7s cubic-bezier(.2,1.6,.4,1) both .5s;}
.p3 .rank-badge{animation:medalPop .7s cubic-bezier(.2,1.6,.4,1) both .65s;}
@keyframes medalPop{0%{transform:scale(0) rotate(-25deg)}100%{transform:scale(1) rotate(0)}}
@keyframes medalGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(255,209,102,.5))}50%{filter:drop-shadow(0 0 16px rgba(255,209,102,.9))}}
.p-halo{position:absolute;inset:-12px;border-radius:50%;pointer-events:none;z-index:-1;opacity:.55;
  background:conic-gradient(from var(--ga,0deg),transparent 0 62%,var(--pc) 78%,#fff 84%,var(--pc) 88%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  animation:ringSpin 6s linear infinite;}
.p1 .p-halo{inset:-18px;opacity:.95;animation-duration:4.5s;filter:drop-shadow(0 0 10px var(--pc));}
.p1 .p-avatar{animation:floaty 4.5s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.p1 .p-avatar::before{content:'👑';position:absolute;left:50%;top:-40px;transform:translateX(-50%);z-index:4;font-size:2rem;line-height:1;filter:drop-shadow(0 0 12px var(--gold));animation:crownFloat 2.4s ease-in-out infinite;}
@keyframes crownFloat{0%,100%{transform:translateX(-50%) translateY(0) rotate(-6deg)}50%{transform:translateX(-50%) translateY(-7px) rotate(6deg)}}
.p1 .p-avatar::after,.p1 .p-halo::after{content:'✦';position:absolute;color:var(--gold-2);text-shadow:0 0 10px var(--gold);pointer-events:none;animation:twinkle 1.9s ease-in-out infinite;font-size:1.1rem;line-height:1;z-index:4;}
.p1 .p-avatar::after{left:-14px;top:14px;} .p1 .p-halo::after{right:-6px;top:38%;font-size:.85rem;animation-delay:.9s;}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(45deg)}}
.podium-step .p-name{font-family:var(--font-head);font-size:1.25rem;font-weight:800;letter-spacing:.01em;word-break:break-word;z-index:2;text-shadow:0 0 16px currentColor;max-width:100%;padding:0 6px;}
.p1 .p-name{font-size:1.5rem;animation:champPulse 2.5s ease-in-out infinite;}
@keyframes champPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
.podium-step .p-points{display:flex;align-items:baseline;gap:7px;z-index:2;margin:4px 0 14px;}
.podium-step .p-num{font-family:var(--font-display);font-weight:900;font-size:1.65rem;line-height:1;background:linear-gradient(180deg,#fff 20%,var(--pc));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px var(--pc));}
.p1 .p-num{font-size:2rem;}
.podium-step .p-points small{font-family:var(--font-head);font-weight:600;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.podium-step .p-block{position:relative;width:100%;height:var(--bh,84px);border-radius:14px 14px 0 0;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(11,16,25,.96) 55%,#070b12);
  background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 42%,#0b1019) 0%,rgba(11,16,25,.96) 58%,#070b12 100%);
  border:1px solid rgba(255,255,255,.12);border-bottom:none;border-color:color-mix(in srgb,var(--pc) 55%,transparent);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2), inset 0 -34px 40px rgba(0,0,0,.5), 0 0 30px color-mix(in srgb,var(--pc) 28%,transparent);
  transition:height .5s cubic-bezier(.2,.8,.2,1);}
.podium-step .p-block::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.13) 50%,transparent 70%);background-size:220% 100%;animation:goldSweep 4.5s linear infinite;}
@keyframes goldSweep{to{background-position:220% 0}}
.podium-step .p-block::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--pc);box-shadow:0 0 16px var(--pc), 0 0 4px var(--pc);}
.podium-step .p-block span{font-family:var(--font-display);font-weight:900;font-size:2.4rem;line-height:1;margin-top:14px;color:rgba(255,255,255,.13);text-shadow:0 1px 0 rgba(255,255,255,.1), 0 -1px 0 rgba(0,0,0,.7);}
.p1 .p-block span{color:rgba(255,209,102,.26);}
.p1{--bh:122px} .p2{--bh:86px} .p3{--bh:62px}
.p1 .p-block::after{background:linear-gradient(90deg,var(--gold),var(--gold-2),var(--gold));box-shadow:0 0 18px rgba(255,209,102,.8);}
.podium-step.empty .p-avatar .av-wrap{border-style:dashed;opacity:.5;box-shadow:none;}
.podium-step.empty .p-halo,.podium-step.empty .p-avatar::before,.podium-step.empty .p-avatar::after,.podium-step.empty .p-halo::after{display:none;}

/* ═══════════════ HEAD-TO-HEAD ═══════════════ */
.h2h-selects{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:16px;font-size:1rem;}
.h2h-selects select{width:auto;min-width:150px;}
.h2h-bar-wrap{position:relative;background:rgba(255,255,255,.05);border-radius:999px;height:26px;min-width:120px;display:flex;align-items:center;border:1px solid var(--line);overflow:hidden;}
.h2h-bar{height:100%;border-radius:999px;transition:width .5s ease;box-shadow:0 0 10px currentColor;}
.h2h-bar-wrap span{position:absolute;right:10px;font-weight:700;text-shadow:0 1px 3px #000;font-size:.85rem;}

/* ═══════════════ LOGIN / INPUTS / BUTTONS ═══════════════ */
.login-box{max-width:420px;margin:50px auto;padding:32px;text-align:center;position:relative;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--glass),var(--bg-2);box-shadow:var(--shadow-card);animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both;}
input,select,textarea{background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--text);padding:10px 14px;border-radius:var(--r-sm);font-size:.92rem;width:100%;
  font-family:var(--font-body);transition:border-color .18s, box-shadow .18s, background .18s;}
input::placeholder{color:rgba(138,151,179,.75);}
input[type=color]{padding:3px;height:40px;cursor:pointer;}
input[type=file]{font-size:.75rem;padding:6px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(0,255,163,.6);background:rgba(0,255,163,.04);box-shadow:0 0 0 4px rgba(0,255,163,.12);}
select option{background:var(--bg-2);}
.admin-table input{text-align:center;} .admin-table input.name-input{text-align:left;}
.emoji-input{width:46px!important;text-align:center;font-size:1.1rem;} .color-input{width:46px!important;}
.avatar-input{width:120px!important;font-size:.75rem;}

button.action,label.action,a.action{
  position:relative;overflow:hidden;display:inline-block;text-decoration:none;
  font-family:var(--font-head);font-weight:700;font-size:.8rem;letter-spacing:.01em;
  background:linear-gradient(135deg,#5cffc6 0%,#00ffa3 35%,#00c9a7 70%,#00b4d8 100%);background-size:180% 180%;
  border:none;color:#03261b;padding:10px 18px;border-radius:999px;cursor:pointer;transition:.18s;margin:6px 4px;
  box-shadow:0 10px 24px -10px rgba(0,255,163,.7), inset 0 1px 0 rgba(255,255,255,.45);
}
button.action::after,label.action::after,a.action::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .5s ease;pointer-events:none;}
button.action:hover,label.action:hover,a.action:hover{transform:translateY(-2px);background-position:100% 100%;box-shadow:0 16px 30px -10px rgba(0,255,163,.8), inset 0 1px 0 rgba(255,255,255,.5);}
button.action:hover::after,label.action:hover::after,a.action:hover::after{left:130%;}
button.action:active,label.action:active,a.action:active{transform:translateY(0);box-shadow:0 6px 14px -8px rgba(0,255,163,.6);}
button.danger{background:linear-gradient(135deg,#ff8aa0,#ff5c7a 45%,#e0245e);color:#fff;box-shadow:0 10px 24px -10px rgba(255,92,122,.7), inset 0 1px 0 rgba(255,255,255,.35);}
button.danger:hover{box-shadow:0 16px 30px -10px rgba(255,92,122,.8), inset 0 1px 0 rgba(255,255,255,.4);}
button.blue,label.blue{background:linear-gradient(135deg,#8be9ff,#5ce1ff 40%,#3b82f6);color:#04182b;box-shadow:0 10px 24px -10px rgba(92,225,255,.7), inset 0 1px 0 rgba(255,255,255,.4);}
button.blue:hover,label.blue:hover{box-shadow:0 16px 30px -10px rgba(92,225,255,.8), inset 0 1px 0 rgba(255,255,255,.45);}
button.small{padding:6px 13px;font-size:.72rem;margin:0;}
.admin-actions{margin:18px 0;text-align:center;padding-top:16px;border-top:1px solid var(--line);}
.locked-note{text-align:center;color:var(--muted);margin:14px 0;font-size:.88rem;line-height:1.55;}
.hof-add-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px;}
.hof-add-row input{width:auto;flex:1;min-width:120px;}
.map-manager{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.map-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:var(--r-sm);background:rgba(255,255,255,.04);border:1px solid var(--line);transition:.15s;}
.map-item:hover{border-color:rgba(0,255,163,.4);}
.map-item input{width:110px;}
.reveal-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px;}

/* ═══════════════ TOAST / LEER / QR ═══════════════ */
.toast{position:fixed;bottom:56px;left:50%;transform:translateX(-50%) translateY(24px);z-index:100;
  background:rgba(12,19,34,.94);backdrop-filter:blur(12px);border:1px solid var(--line-2);border-left:4px solid var(--green);color:var(--text);
  padding:12px 22px 12px 18px;border-radius:14px;opacity:0;transition:.4s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;
  font-family:var(--font-head);font-size:.95rem;font-weight:600;box-shadow:0 20px 50px -20px rgba(0,0,0,.9), 0 0 30px -10px rgba(0,255,163,.35);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.empty-note{color:var(--muted);text-align:center;padding:18px;font-size:.92rem;}
#qrBox{display:none;text-align:center;margin-top:16px;}
#qrBox #qrcode{display:inline-block;background:#fff;padding:12px;border-radius:16px;border:3px solid var(--green);box-shadow:0 0 30px -6px rgba(0,255,163,.5);}
#qrBox p{margin-top:10px;color:var(--muted);word-break:break-all;font-size:.85rem;}

/* ═══════════════ VOTING / MVP / BADGES ═══════════════ */
.vote-grid{display:flex;flex-wrap:wrap;gap:8px;}
.vote-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1.5px solid var(--line-2);color:var(--text);
  padding:8px 13px;border-radius:999px;cursor:pointer;font-size:.9rem;font-family:var(--font-head);font-weight:600;transition:.16s;}
.vote-btn:hover{transform:translateY(-2px);border-color:var(--green);box-shadow:0 10px 24px -12px rgba(0,255,163,.6);}
.vote-btn:active{transform:translateY(0) scale(.97);}
.vote-btn.voted{background:linear-gradient(135deg,rgba(0,255,163,.22),rgba(0,212,255,.14));border-color:var(--green)!important;color:var(--green-2);box-shadow:0 0 22px -6px rgba(0,255,163,.6);animation:votedPop .35s cubic-bezier(.2,1.6,.4,1);}
@keyframes votedPop{0%{transform:scale(.9)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.name-input-small{max-width:280px;margin:0 auto;display:block;text-align:center;}
.mvp-leader{font-size:1.05rem;text-align:center;}
.badge{display:inline-block;padding:4px 12px;border-radius:999px;background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.4);color:var(--gold-2);font-size:.8rem;margin:3px;transition:.15s;font-family:var(--font-head);font-weight:600;}
.badge:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(255,209,102,.6);}
.champ-crown{margin-left:5px;display:inline-block;filter:drop-shadow(0 0 5px var(--gold));animation:crownGlow 2s ease-in-out infinite;}
@keyframes crownGlow{0%,100%{transform:translateY(0);filter:drop-shadow(0 0 4px var(--gold));}50%{transform:translateY(-3px);filter:drop-shadow(0 0 12px var(--gold-2));}}
.badge-strip{margin-left:6px;font-size:.9rem;letter-spacing:2px;cursor:help;vertical-align:middle;}
.badge-more{font-size:.7rem;color:var(--muted);letter-spacing:0;margin-left:2px;}
/* Externer Verweis in der Menuezeile (Workshop-Maps). Nutzt den Reiter-Stil,
   ist aber ein Link - Unterstreichung weg, kleiner Pfeil als Hinweis, dass er
   die Seite verlaesst. Bewusst zurueckhaltend: er soll erreichbar sein, sich
   aber nicht vor das Turnier draengen. */
a.tab-extern{text-decoration:none;}
a.tab-extern::after{content:'\2197';font-size:.7em;opacity:.55;margin-left:1px;}
a.tab-extern:hover::after{opacity:1;}
/* Zurueck zur Hauptseite draco-gaming.de (15.10.2026): links vor dem Logo, gleicher Tab.
   Seit 27.10.2026 genau wie auf der Nordstreitmacht-Seite (wardogs\seite\assets\stil.css,
   .zurueck): Draco-Gold mit animiertem Drachenkopf, Handy nur der Kopf. Im Overlay-Tool
   (html.mecca-overlay, setzt preload.js fuer die ganze Seite) und im Beamer-Modus
   ausgeblendet: Dort braucht ihn niemand, und im Overlay ginge der Browser hinter dem
   Spiel auf. Dasselbe gilt fuer den Block "Diese Webseite stammt von Draco-Gaming". */
a.nav-zurueck{
  display:inline-flex;align-items:center;gap:.45rem;flex:none;
  padding:.28rem .55rem .28rem .3rem;
  border:1px solid color-mix(in srgb,var(--draco) 50%,transparent);border-radius:3px;
  color:var(--draco-hell);text-decoration:none;font-family:var(--font-head);font-size:.82rem;font-weight:700;letter-spacing:.02em;
  background:color-mix(in srgb,var(--draco) 10%,transparent);white-space:nowrap;
  box-shadow:0 0 16px -6px color-mix(in srgb,var(--draco) 70%,transparent);
  transition:border-color .2s,color .2s,background-color .2s,box-shadow .2s;
}
a.nav-zurueck:hover{border-color:var(--draco);color:#fff;background:color-mix(in srgb,var(--draco) 18%,transparent);box-shadow:0 0 22px -4px color-mix(in srgb,var(--draco) 80%,transparent);}
a.nav-zurueck picture,.fuss-herkunft picture{display:flex;}   /* nicht contents: leere <source> braechten je einen Abstand mit */
a.nav-zurueck img{width:28px;height:28px;object-fit:contain;border-radius:3px;filter:drop-shadow(0 0 6px rgba(255,90,40,.45));}
html.mecca-overlay a.nav-zurueck,body.beamer-mode a.nav-zurueck,
html.mecca-overlay .fuss-herkunft,body.beamer-mode .fuss-herkunft{display:none!important;}
/* Draco-Gaming unten links in allen Vollbild-Shows und im Beamer-Modus (User 03.11.2026: „dauerhaft bei allen darstellungen unten
   in der ecke draco-gaming“). Auf der normalen Seite steht schon „Powered by Draco-Gaming.de“ (#brandFooter), unten rechts liegt
   dort die Jubel-Wall. Zurückhaltend wie auf Partner-Overlays: kleines Logo, blasses Gold, kein Leuchten; nimmt keine Klicks an.
   Links, weil rechts unten in den Shows der Weiter-Knopf des Admins sitzt; der Tastatur-Hinweis links beginnt erst bei 34 px. */
#dracoEcke{display:none;position:fixed;left:14px;bottom:8px;z-index:100600;pointer-events:none;align-items:center;gap:7px;
  font-family:var(--font-head);font-size:.8rem;font-weight:600;line-height:1;letter-spacing:.03em;color:color-mix(in srgb,var(--draco-hell) 80%,transparent);
  text-shadow:0 1px 3px rgba(0,0,0,.75);}
#dracoEcke picture{display:flex;}
#dracoEcke img{width:24px;height:24px;object-fit:contain;opacity:.9;}
body.beamer-mode #dracoEcke{display:flex;bottom:62px;}   /* über dem Laufband (#ticker, im Beamer 52 px) */
html:has(#cdShow.show:not(.mini),#kickoffIntro.show,#tiShow.show,#piShow.show,#mvpShow.show,#mvOverlay.show,#countdown[style*="flex"],#readyPopup.show,#endShow.show,#maintOverlay.show) #dracoEcke{display:flex;bottom:8px;}
/* Pausen-Video (pause-show.js): über dem INFO-Laufband des Films (unterste 60 von 1080 px). Der Film füllt die Fläche mit
   object-fit:contain, also Bildhöhe = min(100vh, 56.25vw), dazu der schwarze Rand bei schmalerem Fenster */
html:has(#pauseShow.show) #dracoEcke{display:flex;bottom:calc((100vh - min(100vh,56.25vw))/2 + min(100vh,56.25vw)*.056 + 8px);}
/* Herkunft der Webseite, eigener Block ganz unten wie auf der Nordstreitmacht-Seite (.fuss-herkunft) */
.fuss-herkunft{position:relative;z-index:1;max-width:1560px;margin:2.4rem auto 0;padding:2rem 0 2.4rem;border-top:1px solid var(--line);text-align:center;color:var(--text-2);}   /* unten Luft: Reaktionsleiste, Hinweis und Laufband liegen fest darüber */
.fuss-herkunft a{display:inline-flex;flex-direction:column;align-items:center;gap:.8rem;color:inherit;text-decoration:none;}
.fuss-herkunft a:hover{color:var(--text);}
.fuss-herkunft img{width:171px;height:179px;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(255,90,40,.3));}
.fuss-herkunft span{font-size:1.12rem;}
.fuss-herkunft b{color:var(--draco-hell);font-weight:600;white-space:nowrap;}
.fuss-herkunft .fuss-adresse{
  padding:.5rem 1.1rem;border:1px solid color-mix(in srgb,var(--draco) 50%,transparent);border-radius:3px;
  color:var(--draco-hell);font:700 1.1rem/1 var(--font-head);letter-spacing:.04em;
  background:color-mix(in srgb,var(--draco) 10%,transparent);transition:border-color .2s,color .2s,background-color .2s;
}
.fuss-herkunft a:hover .fuss-adresse{border-color:var(--draco);color:#fff;background:color-mix(in srgb,var(--draco) 18%,transparent);}
.new-marker{background:rgba(0,255,163,.12);border:1px solid rgba(0,255,163,.6);color:var(--green-2);border-radius:999px;padding:1px 8px;font-size:.66rem;font-weight:700;margin-left:4px;animation:lockPulse 2s ease-in-out infinite;}
.dog-badge{background:rgba(0,212,255,.12);border:1px solid var(--teal);color:#5ce1ff;border-radius:6px;padding:0 5px;font-size:.72rem;font-weight:700;}
.streak-badge{background:rgba(255,61,143,.1);border:1px solid var(--pink);color:#ff7fb6;border-radius:999px;padding:2px 9px;font-size:.8rem;}
.playing-badge{background:rgba(255,92,122,.12);border:1px solid var(--coral);color:var(--danger-bright);border-radius:999px;padding:2px 9px;font-size:.8rem;animation:lockPulse 1.4s ease-in-out infinite;}
button.playing{background:linear-gradient(135deg,#ff8aa0,#e0245e)!important;color:#fff!important;}

/* ═══════════════ JUBEL-WALL ═══════════════ */
.chat-widget{position:fixed;right:16px;bottom:104px;width:300px;max-width:calc(100vw - 32px);z-index:94;border:1px solid var(--line-2);border-radius:18px;
  display:flex;flex-direction:column;overflow:hidden;background:rgba(12,19,34,.9);backdrop-filter:blur(16px);box-shadow:0 24px 60px -24px rgba(0,0,0,.9);}
.chat-widget-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(90deg,rgba(0,255,163,.14),rgba(0,212,255,.08));color:var(--green-2);font-family:var(--font-head);font-weight:700;font-size:.82rem;user-select:none;transition:.15s;}
.chat-widget-head:hover{filter:brightness(1.15);}
.chat-widget-head::after{content:'';position:absolute;top:0;left:-70%;width:40%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-20deg);animation:chatSheen 4s ease-in-out infinite;}
@keyframes chatSheen{0%,55%{left:-70%}100%{left:150%}}
.chat-widget.collapsed{width:auto;}
.chat-widget.collapsed .chat-wall,.chat-widget.collapsed .chat-input-bar{display:none;}
.chat-wall{max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:10px;text-align:left;}
.chat-msg{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:7px 11px;font-size:.88rem;animation:fade .3s;word-break:break-word;}
.chat-msg .cm-name{color:var(--green-2);font-weight:700;margin-right:6px;font-family:var(--font-head);}
.chat-msg .cm-time{color:var(--muted);font-size:.7rem;float:right;}
.chat-empty{color:var(--muted);text-align:center;padding:14px;font-size:.82rem;}
.chat-input-bar{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line);}
.chat-input-bar input{flex:1;font-size:.85rem;padding:8px 12px;}
.chat-input-bar button{margin:0;padding:7px 13px;}
.chat-badge{background:var(--pink);color:#fff;border-radius:10px;font-size:.7rem;padding:0 6px;margin-left:6px;font-weight:700;box-shadow:0 0 10px rgba(255,61,143,.5);}

/* ═══════════════ ANGEPINNTE NACHRICHT ═══════════════ */
.pinned-bar{position:fixed;top:0;left:0;right:0;z-index:300;font-weight:700;text-align:center;padding:12px 44px;font-size:.92rem;word-break:break-word;display:none;color:#eafff5;
  text-shadow:0 1px 4px rgba(0,0,0,.6);font-family:var(--font-head);background:linear-gradient(90deg,#00b877,#0090c8,#7c3aed,#00b877);background-size:300% 100%;animation:pinFlow 10s linear infinite;box-shadow:0 4px 22px rgba(0,0,0,.55);}
@keyframes pinFlow{to{background-position:300% 0}}
.pinned-bar.show{display:block;animation:pinFlow 10s linear infinite, pinnedSlide .4s ease;}
.pinned-bar .pin-icon{margin-right:6px;}
@keyframes pinnedSlide{from{transform:translateY(-100%);}to{transform:translateY(0);}}
body.has-pinned{padding-top:var(--pinned-h);}
body.has-pinned .topnav{top:calc(var(--pinned-h) + 10px);}

/* ═══════════════ MVP LAST CALL ═══════════════ */
@keyframes mvpGlow{0%,100%{box-shadow:0 0 6px rgba(255,92,122,.25);opacity:.9;}50%{box-shadow:0 0 20px rgba(255,92,122,.6);opacity:1;}}
.mvp-lastcall{text-align:center;margin-bottom:10px;padding:9px 14px;border-radius:12px;border:1px solid var(--coral);background:rgba(255,92,122,.1);color:var(--danger-bright);font-weight:600;animation:mvpGlow 1.5s ease-in-out infinite;}

/* ═══════════════ 🎮 READY-POPUP ═══════════════ */
.ready-pop{display:none;position:fixed;inset:0;z-index:10060;align-items:center;justify-content:center;padding:18px;background:rgba(4,7,14,.76);backdrop-filter:blur(10px);}
.ready-pop.show{display:flex;animation:fade .25s;}
.rp-box{width:min(500px,94vw);max-height:92vh;overflow-y:auto;text-align:center;position:relative;padding:30px 28px 26px;border:1px solid transparent;border-radius:var(--r-lg);
  background:var(--bg-2) padding-box,var(--grad-ring) border-box;box-shadow:0 30px 80px -20px rgba(0,0,0,.9), 0 0 44px -10px rgba(0,255,163,.3);
  animation:rpIn .45s cubic-bezier(.2,.9,.3,1.2) both, ringSpin 16s linear infinite;}
@keyframes rpIn{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:none}}
.rp-close{position:absolute;top:12px;right:16px;cursor:pointer;font-size:1.3rem;color:var(--muted);transition:.2s;line-height:1;}
.rp-close:hover{color:var(--danger-bright);transform:rotate(90deg);}
.rp-ico{font-size:3.2rem;line-height:1;margin-bottom:8px;filter:drop-shadow(0 0 16px var(--rust-glow));animation:rpBob 2.2s ease-in-out infinite;}
@keyframes rpBob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-8px) rotate(5deg)}}
.rp-kicker{font-family:var(--font-head);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.rp-map{font-family:var(--font-display);font-size:1.5rem;font-weight:900;color:var(--gold-2);text-shadow:0 0 18px rgba(255,209,102,.4);margin-bottom:4px;word-break:break-word;}
.rp-sub{color:var(--muted);font-size:.92rem;margin-bottom:16px;}
.rp-prog{position:relative;height:22px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid var(--line);margin:0 8px 12px;}
.rp-prog-fill{height:100%;width:0;border-radius:999px;transition:width .5s ease;background:var(--grad-main);box-shadow:0 0 12px rgba(0,255,163,.4);}
.rp-prog span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:.76rem;font-weight:700;color:#fff;text-shadow:0 1px 3px #000;}
.rp-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-height:112px;overflow-y:auto;margin-bottom:16px;padding:0 6px;}
.rp-btn{display:block;width:100%;max-width:340px;margin:0 auto;font-family:var(--font-head);font-weight:700;font-size:1rem;color:#03261b;border:none;border-radius:999px;cursor:pointer;padding:15px 20px;
  background:linear-gradient(135deg,#5cffc6,#00ffa3 40%,#00b4d8);box-shadow:0 12px 30px -10px rgba(0,255,163,.8), inset 0 1px 0 rgba(255,255,255,.4);transition:.18s;animation:rpBtnPulse 2.2s ease-in-out infinite;}
@keyframes rpBtnPulse{0%,100%{box-shadow:0 12px 26px -10px rgba(0,255,163,.6), inset 0 1px 0 rgba(255,255,255,.4)}50%{box-shadow:0 12px 40px -6px rgba(0,255,163,.9), inset 0 1px 0 rgba(255,255,255,.4)}}
.rp-btn:hover{transform:translateY(-2px);} .rp-btn:active{transform:translateY(1px);}
.rp-later{display:block;margin:12px auto 0;background:none;border:none;cursor:pointer;color:var(--muted);font-size:.82rem;text-decoration:underline dotted;transition:.15s;}
.rp-later:hover{color:var(--text);}

/* ═══════════════ 🎮 LOBBY / READY-CHIPS ═══════════════ */
.lobby-row{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;margin-top:6px;}
.lobby-box{flex:1;min-width:170px;background:rgba(255,255,255,.03);border:1px solid rgba(255,209,102,.3);border-radius:var(--r-md);padding:12px 16px;}
.lobby-box .lb-label{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:4px;font-family:var(--font-head);font-weight:600;}
.lobby-box .lb-val{font-size:1.12rem;font-weight:700;color:var(--text);word-break:break-word;display:flex;align-items:center;gap:8px;}
.lobby-box .lb-pw{font-family:ui-monospace,Consolas,monospace;letter-spacing:2px;}
.lb-eye{cursor:pointer;font-size:1.15rem;user-select:none;opacity:.85;transition:.15s;flex:none;} .lb-eye:hover{opacity:1;transform:scale(1.15);}
.lb-copy{cursor:pointer;font-size:1rem;user-select:none;opacity:.7;transition:.15s;flex:none;margin-left:auto;} .lb-copy:hover{opacity:1;transform:scale(1.15);}
.lobby-empty{color:var(--muted);font-size:.9rem;}
.ready-yes{color:var(--green-2);font-weight:700;} .ready-no{color:var(--muted);}
.ready-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);font-size:.82rem;transition:.15s;animation:chipIn .3s ease both;}
@keyframes chipIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.ready-chip.on{border-color:rgba(0,255,163,.55);background:rgba(0,255,163,.1);color:var(--green-2);}
.ready-chip.off{border-color:rgba(255,92,122,.35);opacity:.7;}
.seeker-badge-tag{display:inline-block;padding:2px 10px;border-radius:999px;background:rgba(255,209,102,.12);border:1px solid rgba(255,209,102,.5);color:var(--gold-2);font-size:.72rem;font-weight:700;margin-left:6px;}
.seeker-row{background:linear-gradient(90deg,rgba(255,209,102,.1),rgba(255,209,102,.03))!important;}

/* ═══════════════ BEAMER-MODUS ═══════════════ */
body.beamer-mode .nav-brand,body.beamer-mode .nav-tabs{display:none!important;}
/* kein backdrop-filter im Beamer-Modus: er wäre Containing Block für die fixed positionierte Statusleiste */
body.beamer-mode .topnav{position:fixed;top:12px;right:16px;left:auto;margin:0;width:auto;max-width:none;border-radius:14px;backdrop-filter:none;background:rgba(10,17,32,.9);}
body.beamer-mode .nav-inner{min-height:0;padding:6px 8px;}
body.beamer-mode.has-pinned .topnav{top:calc(var(--pinned-h) + 12px);}
body.beamer-mode .status-strip{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:210;width:auto;max-width:90vw;padding:10px 24px;border-radius:999px;font-size:1.05rem;
  border:1px solid rgba(0,255,163,.3);background:rgba(10,17,32,.86);backdrop-filter:blur(12px);box-shadow:0 18px 50px -20px rgba(0,0,0,.9),0 0 30px -12px rgba(0,255,163,.5);}
body.beamer-mode.has-pinned .status-strip{top:calc(var(--pinned-h) + 12px);}
body.beamer-mode .status-strip .ss-time{font-size:1.05rem;}
body.beamer-mode .site-header{flex-direction:column;text-align:center;margin:76px 0 22px;padding:28px 30px 26px;}
body.beamer-mode .header-main{flex-direction:column;gap:6px;}
body.beamer-mode .header-main h1{font-size:2.7rem;}
body.beamer-mode .logo-mark{width:64px;height:64px;}
body.beamer-mode .header-main h1 + p{margin-left:0;font-size:.95rem;letter-spacing:.22em;margin-top:10px;}
body.beamer-mode #mascot{font-size:1.25rem;padding:14px 26px;}
body.beamer-mode #kpiStrip{display:none!important;}
body.beamer-mode .card h2{font-size:1.25rem;}
body.beamer-mode .card.hero-card{padding:26px 26px 30px;}
body.beamer-mode .podium-wrap{min-height:560px;gap:46px;margin-top:80px;padding-bottom:30px;}
body.beamer-mode .podium-step{width:330px;}
body.beamer-mode .p1{--bh:205px} body.beamer-mode .p2{--bh:148px} body.beamer-mode .p3{--bh:104px}
body.beamer-mode .podium-step .p-name{font-size:1.9rem;}
body.beamer-mode .p1 .p-name{font-size:2.4rem;}
body.beamer-mode .podium-step .p-num{font-size:2.7rem;}
body.beamer-mode .p1 .p-num{font-size:3.3rem;}
body.beamer-mode .podium-step .p-points small{font-size:.9rem;}
body.beamer-mode .podium-step .p-block span{font-size:4rem;margin-top:18px;}
body.beamer-mode .podium-step .rank-badge{font-size:2.6rem;right:-10px;bottom:-6px;}
body.beamer-mode .p1 .p-avatar::before{font-size:3rem;top:-60px;}
body.beamer-mode .p1 .p-halo{inset:-26px;}
body.beamer-mode .podium-wrap::after{height:4px;bottom:29px;}
body.beamer-mode .fav-card{font-size:1.25rem;padding:14px 24px;}
body.beamer-mode table{font-size:1.15rem;}
body.beamer-mode th{font-size:.8rem;}
body.beamer-mode td{padding:12px 12px;}
body.beamer-mode #ranking tr.rank-1 td.total-col{font-size:1.65rem;}
body.beamer-mode #ranking td.total-col{font-size:1.3rem;}
body.beamer-mode .rk-medal{font-size:1.6rem;}
body.beamer-mode #ticker{height:52px;}
body.beamer-mode #ticker::after{width:120px;font-size:.9rem;}
body.beamer-mode .tick-item{font-size:1.2rem;}
body.beamer-mode #brandFooter,body.beamer-mode .reaction-bar,body.beamer-mode #chatWidget{display:none!important;}
body.beamer-mode #publicContent .card:not(.beamer-keep),body.beamer-mode #publicContent .pub-group{display:none!important;}

/* ═══════════════ REAKTIONEN ═══════════════ */
.reaction-bar{position:fixed;right:16px;bottom:54px;z-index:95;display:flex;gap:4px;background:rgba(12,19,34,.86);padding:6px 8px;border-radius:999px;
  border:1px solid var(--line-2);backdrop-filter:blur(14px);box-shadow:0 20px 50px -20px rgba(0,0,0,.9);}
.reaction-bar button{background:none;border:none;font-size:1.35rem;cursor:pointer;transition:transform .18s cubic-bezier(.2,1.6,.4,1);padding:2px;}
.reaction-bar button:hover{transform:scale(1.45) rotate(-8deg);filter:drop-shadow(0 0 8px rgba(0,255,163,.6));}
.fly-react{position:fixed;bottom:80px;font-size:2rem;z-index:96;pointer-events:none;animation:flyUp 3s ease-out forwards;}
@keyframes flyUp{0%{opacity:0;transform:translateY(0) scale(.4) rotate(0)}15%{opacity:1;transform:translateY(-20px) scale(1.25) rotate(10deg)}100%{opacity:0;transform:translateY(-70vh) scale(1) rotate(-12deg)}}

/* ═══════════════ 3-2-1 / SPOTLIGHT / TICKER ═══════════════ */
#countdown{display:none;position:fixed;inset:0;z-index:9998;align-items:center;justify-content:center;flex-direction:column;gap:22px;
  background:rgba(4,7,14,.82);backdrop-filter:blur(10px);--cd:var(--green);font-family:var(--font-display);font-size:clamp(7rem,26vmin,16rem);font-weight:900;color:var(--cd);line-height:1;}
#countdown[data-n="3"]{--cd:var(--green)} #countdown[data-n="2"]{--cd:var(--teal)} #countdown[data-n="1"]{--cd:var(--gold)} #countdown[data-n="go"]{--cd:var(--pink)}
#countdown .cd-num{position:relative;display:inline-block;animation:cdPop .9s ease;color:var(--cd);text-shadow:0 0 30px var(--cd),0 0 90px var(--cd);transition:color .3s;}
#countdown .cd-num::before,#countdown .cd-num::after{content:'';position:absolute;left:50%;top:50%;width:1.15em;height:1.15em;margin:-.575em 0 0 -.575em;border-radius:50%;border:3px solid var(--cd);opacity:0;pointer-events:none;animation:cdRing 1s ease-out;}
#countdown .cd-num::after{animation-delay:.18s;}
@keyframes cdRing{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.7);opacity:0;border-width:1px}}
@keyframes cdPop{0%{transform:scale(.15);opacity:0}40%{transform:scale(1.35);opacity:1}100%{transform:scale(1);opacity:1}}
#countdown .cd-cap{font-family:var(--font-head);font-size:clamp(1rem,2.4vw,1.5rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);text-shadow:0 0 16px rgba(255,209,102,.4);animation:spSub .5s ease both;}
#spotlight{display:none;position:fixed;top:calc(var(--nav-real-h, var(--nav-h)) + 24px);left:50%;transform:translateX(-50%) scale(.7);z-index:9997;padding:18px 34px;border-radius:18px;text-align:center;opacity:0;
  border:1px solid transparent;background:rgba(12,19,34,.94) padding-box, var(--grad-ring) border-box;backdrop-filter:blur(12px);box-shadow:0 30px 70px -20px rgba(0,0,0,.9), 0 0 40px -10px rgba(0,255,163,.35);}
#spotlight.show{display:block;animation:spotIn .5s forwards;}
#spotlight .sp-title{font-family:var(--font-head);font-size:1.3rem;font-weight:700;}
#spotlight .sp-sub{font-size:1.05rem;margin-top:6px;color:var(--green-2);font-family:var(--font-head);font-weight:600;}
@keyframes spotIn{to{opacity:1;transform:translateX(-50%) scale(1);}}
#ticker{position:fixed;left:0;right:0;bottom:0;height:40px;background:rgba(7,11,20,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);overflow:hidden;z-index:90;display:flex;align-items:center;}
#ticker::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad-chroma);background-size:200% 100%;animation:tickLine 8s linear infinite;opacity:.8;}
@keyframes tickLine{to{background-position:200% 0}}
#ticker::after{content:'● LIVE';position:absolute;left:0;top:0;bottom:0;width:92px;z-index:2;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:800;font-size:.7rem;letter-spacing:.16em;color:#03261b;background:var(--grad-main);box-shadow:10px 0 22px rgba(4,6,11,.95);animation:livePulse 1.7s ease-in-out infinite;}
@keyframes livePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
#tickerTrack{display:inline-block;white-space:nowrap;animation:tickerScroll 28s linear infinite;}
@keyframes tickerScroll{0%{transform:translateX(100vw)}100%{transform:translateX(-100%)}}
.tick-item{color:var(--text-2);font-size:.9rem;padding:0 6px;}
.tick-sep{color:var(--green);padding:0 14px;text-shadow:0 0 8px var(--rust-glow);}

/* ═══════════════ MODAL / EMOJI-PICKER / FOOTER ═══════════════ */
.modal-overlay{display:none;position:fixed;inset:0;z-index:9990;background:rgba(4,7,14,.72);backdrop-filter:blur(8px);align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;}
.modal-overlay.show{display:flex;animation:fade .25s;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;max-width:640px;width:100%;position:relative;background:var(--glass),var(--bg-2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95), 0 0 40px -16px rgba(0,255,163,.3);animation:modalIn .35s cubic-bezier(.2,.9,.3,1.2) both;}
@keyframes modalIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.modal .close-x{position:absolute;top:12px;right:16px;cursor:pointer;font-size:1.3rem;color:var(--muted);transition:.2s;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;}
.modal .close-x:hover{color:var(--danger-bright);background:rgba(255,92,122,.1);transform:rotate(90deg);}
.modal table{min-width:auto;}
.modal h2{font-family:var(--font-display);font-weight:700;font-size:1.3rem;display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.emoji-picker{display:flex;flex-wrap:wrap;gap:6px;}
.emoji-opt{font-size:1.5rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:.16s cubic-bezier(.2,1.6,.4,1);}
.emoji-opt:hover{transform:scale(1.15) rotate(-6deg);border-color:var(--green);}
.emoji-opt.sel{border-color:var(--green);background:linear-gradient(135deg,rgba(0,255,163,.22),rgba(0,212,255,.14));box-shadow:0 0 18px -4px rgba(0,255,163,.6);animation:icoLand .35s cubic-bezier(.2,1.6,.4,1);}
#brandFooter{position:fixed;left:0;right:0;bottom:40px;z-index:89;text-align:center;font-size:.76rem;padding:5px 0;color:var(--muted);background:rgba(7,11,20,.86);backdrop-filter:blur(8px);border-top:1px solid var(--line);}
#brandFooter a{color:var(--green-2);text-decoration:none;font-weight:600;transition:.15s;}
#brandFooter a:hover{text-shadow:0 0 10px var(--rust-glow);}

/* ═══════════════ ON FIRE / FROST ═══════════════ */
.av-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;}
.momentum-fire{animation:fireGlow 1s ease-in-out infinite alternate;}
.momentum-fire::after{content:'🔥';position:absolute;top:-9px;right:-9px;font-size:.85rem;animation:flamePulse .5s infinite alternate;}
.momentum-frost{animation:frostGlow 1.4s ease-in-out infinite alternate;}
.momentum-frost::after{content:'❄️';position:absolute;top:-9px;right:-9px;font-size:.85rem;}
@keyframes fireGlow{from{filter:drop-shadow(0 0 4px #ff9d3c)}to{filter:drop-shadow(0 0 14px #ff5f1f)}}
@keyframes flamePulse{from{transform:scale(.85) rotate(-8deg)}to{transform:scale(1.2) rotate(8deg)}}
@keyframes frostGlow{from{filter:drop-shadow(0 0 4px #7fdcff)}to{filter:drop-shadow(0 0 12px #00a2ff)}}

/* ═══════════════ SPERR-SCREEN & TERMIN ═══════════════ */
.lock-screen{text-align:center;padding:60px 20px 30px;overflow:hidden;}
.lock-screen h2{justify-content:center;font-family:var(--font-display);font-size:1.15rem;font-weight:700;border:none;}
.lock-screen h2::before,.lock-screen h2::after{display:none;}
.lock-icon{position:relative;display:inline-block;font-size:5rem;line-height:1;margin-bottom:24px;animation:lockPulse 2s ease-in-out infinite;filter:drop-shadow(0 0 24px var(--rust-glow));}
.lock-icon::before,.lock-icon::after{content:'';position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:2px solid rgba(0,255,163,.5);pointer-events:none;animation:radar 2.8s ease-out infinite;}
.lock-icon::after{animation-delay:1.4s;border-color:rgba(0,212,255,.45);}
@keyframes radar{0%{transform:scale(.45);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes lockPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}}
.next-event{background:rgba(0,255,163,.06);border:1px solid rgba(0,255,163,.28);border-radius:var(--r-md);padding:16px 20px;margin-bottom:16px;text-align:center;font-size:1.02rem;}
.event-countdown{margin-top:10px;font-family:var(--font-display);font-size:1.45rem;font-weight:700;color:var(--green-2);text-shadow:0 0 18px var(--rust-glow);font-variant-numeric:tabular-nums;}
.event-countdown.live{color:var(--danger-bright);text-shadow:0 0 14px rgba(255,92,122,.5);animation:lockPulse 1.5s ease-in-out infinite;}

/* ═══════════════ 🖥️ OVERLAY-CLIENT DOWNLOAD (client-download.js) ═══════════════ */
.cdl-wrap{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.cdl-lead{color:var(--text-2);line-height:1.55;margin:0;text-align:left;font-size:.92rem;}
.cdl-more{width:100%;margin-top:4px;border-top:1px solid var(--line);padding-top:10px;}
.cdl-more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:.86rem;color:var(--text-2);padding:6px 12px;border-radius:999px;border:1px solid var(--line);transition:.15s;}
.cdl-more summary::-webkit-details-marker{display:none;}
.cdl-more summary::after{content:'▾';font-size:.8rem;color:var(--muted);transition:transform .2s;}
.cdl-more[open] summary::after{transform:rotate(180deg);}
.cdl-more summary:hover{border-color:rgba(0,255,163,.4);color:var(--text);}
.cdl-more .cdl-steps{margin-top:12px;}
.cdl-lead b{color:var(--green-2);}
.cdl-btn{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;text-decoration:none;padding:13px 26px;border-radius:18px;font-family:var(--font-head);font-weight:800;font-size:1.05rem;
  color:#03261b;background:linear-gradient(135deg,#5cffc6,#00ffa3 40%,#00b4d8);box-shadow:0 14px 34px -12px rgba(0,255,163,.8), inset 0 1px 0 rgba(255,255,255,.3);transition:.15s;}
.cdl-btn:hover{filter:brightness(1.08);transform:translateY(-2px);}
.cdl-btn small{font-weight:700;font-size:.66rem;letter-spacing:.12em;opacity:.8;text-transform:uppercase;}
.cdl-meta{color:var(--muted);font-size:.8rem;margin:0;line-height:1.5;text-align:left;}
.cdl-meta:empty{display:none;}
.cdl-meta code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px;color:var(--gold-2);font-size:.9em;}
.cdl-steps{margin:0;padding-left:22px;color:var(--text-2);line-height:1.55;font-size:.9rem;text-align:left;}
.cdl-steps li{margin-bottom:8px;} .cdl-steps li::marker{color:var(--green);font-family:var(--font-head);font-weight:700;}
.cdl-keys{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-2);color:var(--muted);font-size:.82rem;}
.cdl-keys kbd,.cdl-steps kbd{display:inline-block;padding:1px 7px;border-radius:6px;border:1px solid var(--line-3);border-bottom-width:2px;background:rgba(255,255,255,.08);color:var(--text);font-family:var(--font-head);font-size:.85em;font-weight:700;}
.cdl-status{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;margin-bottom:12px;font-family:var(--font-head);font-weight:700;font-size:.85rem;border:1px solid rgba(0,255,163,.4);background:rgba(0,255,163,.08);color:var(--green-2);}
.cdl-status.update{border-color:rgba(255,209,102,.55);background:rgba(255,209,102,.1);color:var(--gold-2);animation:ledPulse 2s ease-in-out infinite;}

/* ═══════════════ SHOW-OVERLAYS angleichen ═══════════════ */
#cdShow .cd-logo{color:var(--green-2)!important;text-shadow:0 0 30px var(--rust-glow)!important;}
#cdShow .cd-sub{color:var(--gold-2)!important;}
#endShow .es-kicker{color:var(--gold-2)!important;}
#endShow .es-title{color:var(--green-2)!important;text-shadow:0 0 60px var(--rust-glow)!important;}
#piShow .pi-label,#piShow .pi-i-kicker{color:var(--green-2)!important;}
#piShow .pi-i-title{color:var(--gold-2)!important;}
#mvOverlay h1{color:var(--green-2)!important;}

/* ═══════════════ 🎭 SHOW-BÜHNE (Boden + Spotlights für alle Vollbild-Shows) ═══════════════
   position:fixed-Pseudos mit z-index:-1: über dem Show-Hintergrund, unter jedem Inhalt. Kein backdrop-filter auf
   den Overlays – er würde den Fixed-Pseudos einen Containing Block geben (Quer-Scrollbalken). */
#kickoffIntro::before,#endShow::before,#piShow::before,#tiShow::before,#mvOverlay::before{
  content:'';position:fixed;left:-40%;right:-40%;bottom:-6%;height:46%;z-index:-1;pointer-events:none;
  transform-origin:50% 100%;transform:perspective(560px) rotateX(64deg);
  background:repeating-linear-gradient(90deg,rgba(0,255,163,.15) 0 2px,transparent 2px 88px),repeating-linear-gradient(0deg,rgba(0,212,255,.12) 0 2px,transparent 2px 88px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 55%);mask-image:linear-gradient(180deg,transparent 0%,#000 55%);
  animation:floorMove 5s linear infinite;
}
#kickoffIntro::after,#endShow::after,#piShow::after,#tiShow::after,#mvOverlay::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:conic-gradient(from 150deg at 6% -12%,transparent 0deg,rgba(0,255,163,.14) 12deg,transparent 28deg),conic-gradient(from 190deg at 94% -12%,transparent 0deg,rgba(0,212,255,.13) 12deg,transparent 28deg),radial-gradient(70% 32% at 50% 104%,rgba(0,255,163,.2),transparent 70%);
  animation:spotSway 9s ease-in-out infinite alternate;
}
html #endShow .es-spot{opacity:.3;}
html #endShow,html #piShow,html #tiShow{background:radial-gradient(circle at 50% 38%,#0b1526 0%,#060a12 55%,#04060b 100%);}
html #mvOverlay{background:radial-gradient(circle at 50% 25%,#0d1f1a 0%,#070d14 55%,#04060b 100%);}
html #endShow .es-avwrap,html #piShow .pi-avwrap{isolation:isolate;}
html #endShow .es-halo,html #piShow .pi-halo{position:absolute;inset:-24px;border-radius:50%;pointer-events:none;z-index:-1;opacity:.95;
  background:conic-gradient(from var(--ga,0deg),transparent 0 58%,var(--pc,var(--green)) 78%,#fff 84%,var(--pc,var(--green)) 88%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));
  animation:ringSpin 4.5s linear infinite;filter:drop-shadow(0 0 12px var(--pc,var(--green)));}
html #endShow .es-chip{background:var(--glass),var(--bg-2);border-width:1px;border-style:solid;box-shadow:var(--shadow-card);border-radius:16px;}
html #endShow .es-chip b{font-family:var(--font-display);font-size:1.6rem;}
html #endShow .es-pod-col .es-p-base{position:relative;overflow:hidden;border-radius:14px 14px 0 0!important;padding-top:10px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(11,16,25,.96) 55%,#070b12)!important;
  background:linear-gradient(180deg,color-mix(in srgb,currentColor 42%,#0b1019) 0%,rgba(11,16,25,.96) 58%,#070b12 100%)!important;
  border:1px solid rgba(255,255,255,.12)!important;border-bottom:none!important;border-color:color-mix(in srgb,currentColor 55%,transparent)!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2), inset 0 -34px 40px rgba(0,0,0,.5), 0 0 34px color-mix(in srgb,currentColor 30%,transparent);
  text-shadow:0 1px 0 rgba(255,255,255,.12), 0 -1px 0 rgba(0,0,0,.7);}
html #endShow .es-pod-col .es-p-base::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);background-size:220% 100%;animation:goldSweep 4.5s linear infinite;}
html #endShow .es-pod-col .es-p-base::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:currentColor;box-shadow:0 0 16px currentColor,0 0 4px currentColor;}
html #endShow .es-pod{position:relative;padding-bottom:6px;}
html #endShow .es-pod::after{content:'';position:absolute;left:-6%;right:-6%;bottom:2px;height:3px;border-radius:3px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--green) 20%,var(--teal) 50%,var(--violet) 80%,transparent);box-shadow:0 0 18px rgba(0,255,163,.7),0 10px 44px rgba(0,212,255,.35);}
html #endShow .es-name{text-shadow:0 0 50px currentColor,0 0 14px currentColor;}
html #piShow .pi-inner::before{content:attr(data-emoji);position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:-1;font-size:min(72vmin,640px);line-height:1;opacity:.055;pointer-events:none;filter:blur(1px);animation:kiBgBob 8s ease-in-out infinite;}
@keyframes kiBgBob{0%,100%{transform:translate(-50%,-52%) rotate(-6deg) scale(1)}50%{transform:translate(-50%,-49%) rotate(6deg) scale(1.06)}}
html #piShow .pi-inner{isolation:isolate;}
html #piShow .pi-name{text-shadow:0 0 50px currentColor,0 0 14px currentColor;}
html #piShow .pi-chip{background:var(--glass),var(--bg-2);border-radius:16px;box-shadow:var(--shadow-card);}
html #piShow .pi-chip b{font-family:var(--font-display);}
html #piShow .pi-lvlnum{position:relative;overflow:hidden;}
html #piShow .pi-lvlnum::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:220% 100%;animation:goldSweep 3s linear infinite;}
html #piShow .pi-spruch{background:linear-gradient(90deg,rgba(255,209,102,.12),rgba(255,209,102,.03));}
html #mvOverlay{padding-top:3vh;backdrop-filter:none;overflow-x:hidden;justify-content:safe center;}
html #mvOverlay .mv-title{font-size:clamp(1.8rem,5vw,3.2rem);}
html #mvOverlay .mv-sub{font-size:clamp(1rem,2.6vw,1.3rem);}
html #mvOverlay .mv-timer{font-size:clamp(3.4rem,10vw,6.2rem);filter:drop-shadow(0 0 22px rgba(0,255,163,.35));}
html #mvOverlay .mv-timer.hot{filter:drop-shadow(0 0 26px rgba(255,92,122,.6));}
html #mvOverlay #mvGrid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;max-width:1320px;}
html #mvOverlay .mv-card{border-radius:18px;box-shadow:0 20px 50px -24px rgba(0,0,0,.9);}
html #mvOverlay .mv-card img,html #mvOverlay .mv-noimg{height:160px;transition:transform .4s ease;}
html #mvOverlay .mv-card:hover img{transform:scale(1.06);}
html #mvOverlay .mv-cname{font-size:1.15rem;padding:12px 10px;}
html #mvOverlay .mv-card.voted{box-shadow:0 0 34px -6px rgba(255,209,102,.6),0 20px 50px -24px rgba(0,0,0,.9);}
html #mvOverlay .mv-card.rand-winner{animation:mvWin .5s ease, ledPulse 1.6s ease-in-out infinite;}
html #mvOverlay .mv-tipbar{height:28px;}
html #mvOverlay .mv-result-ico{position:relative;font-size:5.5rem;margin:26px 0 10px;}
html #mvOverlay .mv-result-ico::before,html #mvOverlay .mv-result-ico::after{content:'';position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:2px solid rgba(255,92,122,.6);pointer-events:none;animation:radar 2.6s ease-out infinite;}
html #mvOverlay .mv-result-ico::after{animation-delay:1.3s;border-color:rgba(255,209,102,.5);}
html #mvOverlay .mv-result-map{font-size:clamp(2.4rem,8vw,5rem);text-shadow:none;background:linear-gradient(90deg,#ffe49a,#ffd166,#ff9e2d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgba(255,209,102,.5));}
html #tiShow .ti-screen{box-shadow:0 18px 60px rgba(0,0,0,.6),0 0 44px rgba(0,255,163,.16);}

/* ═══════════════ ✨ SPLASH (fx.js) ═══════════════ */
#mcSplash{position:fixed;inset:0;z-index:2147482000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(circle at 50% 42%,#0c1730 0%,#070c16 55%,#060a12 100%);overflow:hidden;cursor:pointer;transition:opacity .55s ease,transform .55s ease;}
#mcSplash.out{opacity:0;transform:scale(1.06);pointer-events:none;}
#mcSplash .sp-glow{position:absolute;left:50%;top:44%;width:60vmin;height:60vmin;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,163,.22),rgba(0,212,255,.08) 45%,transparent 70%);filter:blur(20px);animation:spGlow 1.6s ease-out both;}
@keyframes spGlow{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}60%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:.9}}
#mcSplash .sp-scan{position:absolute;left:0;right:0;height:38%;top:-45%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(0,255,163,.09) 50%,transparent);animation:spScan 1.5s ease-in-out .15s both;}
@keyframes spScan{to{top:115%}}
#mcSplash .sp-eye{width:clamp(96px,22vmin,170px);height:clamp(96px,22vmin,170px);position:relative;filter:drop-shadow(0 0 34px rgba(0,255,163,.55));animation:spLogo 1.1s cubic-bezier(.2,1.4,.3,1) both;}
#mcSplash .sp-eye svg{width:100%;height:100%;display:block;}
#mcSplash .sp-eye .pupil{transform-origin:32px 32px;animation:pupil 1.9s ease-in-out .6s both;}
@keyframes pupil{0%{transform:scaleX(2.4)}40%{transform:scaleX(.6)}70%{transform:scaleX(1.15)}100%{transform:scaleX(1)}}
@keyframes spLogo{0%{transform:scale(.15) rotate(-40deg);opacity:0}55%{transform:scale(1.12) rotate(6deg);opacity:1}100%{transform:none}}
#mcSplash .sp-title{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,7vw,4.2rem);letter-spacing:.14em;text-align:center;line-height:1;
  background:linear-gradient(90deg,#fff,var(--green-2) 45%,var(--teal));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:spTitle .9s cubic-bezier(.2,.9,.2,1) .3s both, titleFlow 4s linear infinite;}
@keyframes titleFlow{to{background-position:300% 0}}
@keyframes spTitle{0%{opacity:0;letter-spacing:.6em;filter:blur(12px)}100%{opacity:1;letter-spacing:.14em;filter:blur(0)}}
#mcSplash .sp-sub{font-family:var(--font-head);font-weight:600;font-size:clamp(.8rem,2.2vw,1.05rem);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);animation:spSub .7s ease .75s both;}
@keyframes spSub{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
#mcSplash .sp-bar{width:min(58vw,320px);height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:18px;}
#mcSplash .sp-bar i{display:block;height:100%;width:0;background:var(--grad-main);box-shadow:0 0 14px var(--green);animation:spBar 1.45s cubic-bezier(.2,.8,.2,1) .25s forwards;}
@keyframes spBar{to{width:100%}}
#mcSplash .sp-hint{position:absolute;bottom:26px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(138,151,179,.6);font-family:var(--font-head);animation:spSub .6s ease 1.1s both;}

/* 💥 Schockwelle */
.mc-shock{position:fixed;left:50%;top:50%;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;border:3px solid var(--mc-col,var(--green));
  box-shadow:0 0 40px var(--mc-col,var(--green)),inset 0 0 30px var(--mc-col,var(--green));pointer-events:none;z-index:9996;animation:mcShock 1.05s cubic-bezier(.1,.6,.3,1) forwards;}
@keyframes mcShock{0%{transform:scale(.15);opacity:1}100%{transform:scale(14);opacity:0;border-width:1px}}

/* ═══════════════ ✨ EFFEKTE REDUZIERT (html.fx-lite) ═══════════════ */
html.fx-lite body::before{animation:none;}
html.fx-lite body::after{background:radial-gradient(ellipse at 50% 35%,rgba(0,0,0,0) 58%,rgba(3,5,10,.38) 100%);}
html.fx-lite .bg-overlay::before{animation:none;}
html.fx-lite #podiumWrap::before{animation:none;}
html.fx-lite .p-halo{animation:none;opacity:.35;}
html.fx-lite .podium-step .p-block::before{animation:none;}
html.fx-lite .card.hero-card,html.fx-lite .rp-box{animation-name:cardIn;animation-duration:.5s;animation-iteration-count:1;}
html.fx-lite .site-header::before,html.fx-lite .site-header::after,html.fx-lite .header-main h1 .h1-text,html.fx-lite .logo-mark,
html.fx-lite .p-dot,html.fx-lite .masc-emoji,html.fx-lite #ticker::before,html.fx-lite #ticker::after,html.fx-lite .chat-widget-head::after,
html.fx-lite .p1 .p-avatar,html.fx-lite .p1 .p-name,html.fx-lite .p1 .rank-badge,html.fx-lite .status-pill.live{animation:none;}
html.fx-lite .card:hover{transform:none;}
html.fx-lite #kickoffIntro::before,html.fx-lite #endShow::before,html.fx-lite #piShow::before,html.fx-lite #tiShow::before,html.fx-lite #mvOverlay::before,
html.fx-lite #kickoffIntro::after,html.fx-lite #endShow::after,html.fx-lite #piShow::after,html.fx-lite #tiShow::after,html.fx-lite #mvOverlay::after,
html.fx-lite #endShow .es-halo,html.fx-lite #piShow .pi-halo,html.fx-lite #piShow .pi-inner::before,html.fx-lite .kickoff-intro .ki-bg{animation:none;}

/* ═══════════════ BEWEGUNG REDUZIEREN (außer ausdrücklich „Effekte an“) ═══════════════ */
@media (prefers-reduced-motion: reduce){
  html:not(.fx-force) *,html:not(.fx-force) *::before,html:not(.fx-force) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* ═══════════════ MOBILE ═══════════════ */
@media(max-width:640px){
  :root{--nav-h:100px;}
  body{padding:0 10px 100px;}
  .topnav{top:6px;margin:6px 0 0;border-radius:18px;}
  .nav-inner{flex-wrap:wrap;padding:6px 8px;gap:6px;}
  .nav-brand{padding:5px 10px 5px 6px;font-size:.8rem;}
  a.nav-zurueck{padding:.28rem;}
  a.nav-zurueck .nz-text{display:none;}   /* Handy: nur der Drachenkopf (wie Nordstreitmacht) */
  /* Zeile 1: Zurueck + Logo + Pillen, Zeile 2: Tabs */
  .nav-pills{flex:1 1 0;min-width:0;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0;padding:2px 0;}
  .nav-pills::-webkit-scrollbar{display:none;}
  .status-pill{font-size:.64rem;padding:4px 9px;}
  .nav-tabs{order:1;flex:1 1 100%;justify-content:space-between;}
  .tab-btn{padding:8px 9px;}
  .tab-btn .tab-ico{font-size:1.3rem;}
  #statusPill,#beamerToggle{display:none!important;}
  .status-strip{font-size:.72rem;gap:6px;padding:6px 8px 7px;border-radius:0 0 18px 18px;} .status-strip .ss-prog{display:none;}
  .site-header{padding:14px 16px;gap:12px;flex-direction:column;align-items:stretch;}
  .header-main h1{font-size:1.05rem;gap:10px;}
  .logo-mark{width:34px;height:34px;}
  .header-main h1 + p{margin-left:44px;font-size:.66rem;letter-spacing:.12em;}
  #mascot{font-size:.85rem;padding:9px 14px;justify-content:center;white-space:normal;text-align:center;}
  .chat-widget{bottom:118px;}
  .reaction-bar{left:8px;right:8px;bottom:70px;justify-content:space-around;gap:0;padding:5px 6px;}
  .reaction-bar button{font-size:1.15rem;}
  #brandFooter{font-size:.68rem;}
  .card{padding:14px 14px 16px;border-radius:18px;}
  .podium-wrap{gap:8px;min-height:240px;margin-top:44px;}
  .podium-step{width:calc(33.33% - 8px);min-width:96px;}
  .p1{--bh:84px}.p2{--bh:58px}.p3{--bh:42px}
  .podium-step .p-name{font-size:.92rem;} .p1 .p-name{font-size:1.02rem;}
  .podium-step .p-num{font-size:1.15rem;} .p1 .p-num{font-size:1.35rem;}
  .podium-step .p-block span{font-size:1.5rem;margin-top:8px;}
  .podium-step .rank-badge{font-size:1.3rem;right:-4px;}
  .p1 .p-avatar::before{font-size:1.4rem;top:-28px;}
  .chat-widget{width:230px;} .chat-wall{max-height:180px;}
  #ticker::after{width:70px;font-size:.62rem;letter-spacing:.1em;}
  .pinned-bar{font-size:.8rem;padding:9px 14px;}
  .pub-group .pg-title{font-size:.68rem;letter-spacing:.1em;}
  .rp-map{font-size:1.2rem;}
  .sub-tabs{display:flex;left:0;transform:none;width:100%;justify-content:center;}
}

/* ===== Wertung mit Platzpunkten + Finalrunde (15.10.2026) =====
   Hauptzahl = Platzpunkte (.tc-num), darunter klein die Spielpunkte aus dem Spiel (.tc-spiel). */
.total-col .tc-num{display:block;font:inherit;color:inherit;line-height:1.05;}
.total-col .tc-spiel{display:block;margin-top:2px;font-family:var(--font-head);font-weight:600;font-size:.62rem;letter-spacing:.06em;color:var(--muted);text-shadow:none;}
.total-col .tc-spiel::after{content:" Spielpkt.";}
.podium-step .p-points{flex-wrap:wrap;justify-content:center;row-gap:2px;}
.podium-step .p-points .p-spiel{flex-basis:100%;text-align:center;letter-spacing:.08em;opacity:.8;}
.pp-badge{margin-left:3px;font-family:var(--font-head);font-weight:700;font-size:.62rem;color:var(--muted);vertical-align:super;}
.finalrunde-note{margin:0 0 10px;padding:8px 12px;border-radius:var(--r-sm);border:1px solid rgba(168,85,247,.45);background:rgba(168,85,247,.10);color:var(--text);font-size:.85rem;}
.map-done-tag,.map-fr-tag{font-family:var(--font-head);font-size:.68rem;font-weight:700;letter-spacing:.04em;padding:3px 7px;border-radius:999px;white-space:nowrap;}
.map-done-tag{color:#e9d5ff;background:rgba(168,85,247,.22);border:1px solid rgba(168,85,247,.5);}
.map-fr-tag{color:var(--muted);border:1px dashed rgba(168,85,247,.45);}
/* Map-Vote: Lose des Schlusslichts */
.mv-lot-bonus{position:absolute;top:8px;right:8px;padding:2px 7px;border-radius:999px;font-size:.66rem;font-weight:700;color:#d9ffe9;background:rgba(0,0,0,.6);border:1px solid var(--green-2);}
.mv-sl-note{color:var(--green-2);}