/* BatSignal — Szene füllt den Screen (Letterbox in Nachtschwarz), Overlays in %-Koordinaten. */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; background:#06060c; overflow:hidden; font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; }

.wrap { height:100dvh; display:flex; align-items:center; justify-content:center; position:relative; }
.scene { position:relative; width:min(100vw, calc(100dvh * 0.5625)); aspect-ratio:9/16; container-type:inline-size; }
.scene .bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity 2.6s ease; }
.scene .fog, .scene .sad { opacity:0; }
/* Zustände: body.relapse = Nebel; .sadnow = Batman lässt Kopf hängen (2. Stufe) */
body.relapse .fog { opacity:1; }
body.relapse.sadnow .fog { opacity:0; transition-duration:1.4s; }
body.relapse.sadnow .sad { opacity:1; transition-duration:1.4s; }

/* ---- Bat-Signal (Kegel + Logo), Geometrie auf die Scheinwerfer-Linse (~26%/64%) abgestimmt ---- */
.sig { position:absolute; inset:0; pointer-events:none; opacity:1; transition:opacity .4s;
  transform-origin:26.5% 64.5%; animation:sigsway 13s ease-in-out infinite alternate; }
@keyframes sigsway { from{transform:rotate(-1.7deg)} to{transform:rotate(1.7deg)} }
body.relapse .sig { opacity:0; }
.beam { position:absolute; inset:0;
  /* Strahl endet WEICH mitten im Logo-Glow (kein harter Kastenrand hinter der Projektion) */
  background:linear-gradient(315deg, rgba(140,190,255,0) 38%, rgba(150,200,255,.16) 55%, rgba(190,225,255,.28) 76%, rgba(210,235,255,.12) 90%, rgba(210,235,255,0) 98%);
  clip-path:polygon(24.5% 65.5%, 28.5% 63.2%, 66% 13.5%, 52% 9%);
  filter:blur(4px); mix-blend-mode:screen; animation:sigpulse 5.2s ease-in-out infinite;
  /* Ellipsen-Maske in Halo-Geometrie (Zentrum 58%/10.5%, Radien 21.5%/7.8%): der Kegel
     endet dadurch exakt an der halbrunden Logo-Kante statt hineinzulaufen */
  -webkit-mask-image:radial-gradient(ellipse 21.5% 7.8% at 58% 10.5%, transparent 88%, #000 103%);
  mask-image:radial-gradient(ellipse 21.5% 7.8% at 58% 10.5%, transparent 88%, #000 103%); }
.halo { position:absolute; left:37%; top:3.2%; width:42%; aspect-ratio:100/62;
  transform:rotate(-9deg); animation:sigpulse 5.2s ease-in-out infinite; }
.halo::before { content:''; position:absolute; inset:-10%;
  background:radial-gradient(ellipse closest-side at center, rgba(185,220,255,.30), rgba(150,195,255,.12) 55%, transparent 75%);
  filter:blur(7px); mix-blend-mode:screen; }
.halo img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  mix-blend-mode:screen; filter:blur(.5px) drop-shadow(0 0 14px rgba(170,210,255,.55));
  animation:projflick 7.3s steps(1,end) infinite; }
@keyframes projflick {
  0%,100%{opacity:1} 7%{opacity:.94} 11%{opacity:1} 23%{opacity:.9} 26%{opacity:1}
  41%{opacity:.96} 47%{opacity:1} 58%{opacity:.72} 60%{opacity:1} 71%{opacity:.93}
  76%{opacity:1} 88%{opacity:.85} 90%{opacity:1} }
@keyframes sigpulse { 0%,100%{opacity:.88} 50%{opacity:1} }
/* Erlöschen: Stottern, dann aus */
body.dying .sig { animation:sigdie 1.6s steps(1,end) forwards; }
@keyframes sigdie { 0%{opacity:1} 14%{opacity:.2} 26%{opacity:.95} 38%{opacity:.15} 52%{opacity:.8} 64%{opacity:.1} 78%{opacity:.5} 100%{opacity:0} }

/* ---- Fledermäuse (kleine Emblem-Silhouetten, quer durchs Bild) ---- */
.bats { position:absolute; inset:0; pointer-events:none; opacity:1; transition:opacity 1.2s; overflow:hidden; }
body.relapse .bats { opacity:0; }
.fbat { position:absolute; width:4.5cqw; filter:brightness(0) opacity(.8); animation-timing-function:linear; animation-iteration-count:infinite; }
.f1 { top:26%; animation-name:batflyA; animation-duration:19s; }
.f2 { top:33%; width:3.2cqw; animation-name:batflyB; animation-duration:27s; animation-delay:-11s; }
.f3 { top:21%; width:2.6cqw; animation-name:batflyA; animation-duration:34s; animation-delay:-22s; }
@keyframes batflyA { 0%{left:-6%; transform:translateY(0) scale(1)} 25%{transform:translateY(-3cqw)} 50%{transform:translateY(1cqw)} 75%{transform:translateY(-2cqw)} 100%{left:104%; transform:translateY(0) scale(.9)} }
@keyframes batflyB { 0%{left:104%; transform:translateY(0) scaleX(-1)} 30%{transform:translateY(2cqw) scaleX(-1)} 60%{transform:translateY(-2.5cqw) scaleX(-1)} 100%{left:-6%; transform:translateY(0) scaleX(-1)} }

/* ---- Billboard-Zähler (Tafel ~63–82% / 63–74%, leicht angeschrägt) ---- */
.board { position:absolute; left:63%; top:63.6%; width:19.2%; height:10.4%;
  transform:perspective(600px) rotateY(-7deg) skewY(1.5deg);
  background:none; border:0; color:#ffcf6e; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1cqw;
  text-shadow:0 0 3cqw rgba(255,190,80,.8); transition:filter 2.6s, color 2.6s; }
.b-tag { font-size:2.1cqw; letter-spacing:.35cqw; opacity:.85; }
.b-num { font-size:11cqw; font-weight:800; line-height:1; }
.b-best { font-size:2.1cqw; letter-spacing:.3cqw; opacity:.7; }
body.relapse .board { color:#7d3535; text-shadow:0 0 2cqw rgba(160,50,50,.55); filter:brightness(.75); }

/* ---- Scheinwerfer-Trigger ---- */
.lamp-zone { position:absolute; left:2%; top:56%; width:33%; height:24%;
  background:none; border:0; cursor:pointer; }
.lamp-zone:active { filter:brightness(1.2); }

/* ---- Alfreds Kommentar (unten auf dem Dachvorsprung) ---- */
.alfred[hidden] { display:none; }
.alfred { position:absolute; left:5%; right:5%; bottom:1.6%; text-align:center;
  font-style:italic; font-size:3cqw; line-height:1.45; color:#c3cbe6;
  text-shadow:0 1px 6px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.7); pointer-events:none; }
.alfred::before { content:'🎩 '; font-style:normal; }

/* ---- Kopfzeile ---- */
.topbar { position:absolute; top:calc(env(safe-area-inset-top, 0px) + 10px); left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; padding:0 14px; }
.title { color:#8a93b8; font-size:13px; letter-spacing:6px; font-weight:600; text-shadow:0 1px 6px #000; }
.chip { min-width:42px; min-height:42px; border-radius:12px; border:1px solid rgba(140,150,190,.25);
  background:rgba(12,14,26,.55); color:#cfd6f2; font-size:18px; cursor:pointer; backdrop-filter:blur(4px); }
.chip.on { border-color:rgba(255,207,110,.6); color:#ffcf6e; }

/* ---- Toast ---- */
.toast[hidden] { display:none; }
.toast { position:absolute; bottom:calc(env(safe-area-inset-bottom, 0px) + 18px); left:50%; transform:translateX(-50%);
  background:rgba(14,16,30,.92); color:#dfe4f8; border:1px solid rgba(140,150,190,.3); border-radius:14px;
  padding:10px 14px; display:flex; gap:12px; align-items:center; font-size:14px; white-space:nowrap; }
.toast button { background:none; border:0; color:#ffcf6e; font-weight:700; font-size:14px; cursor:pointer; }

/* ---- Dialoge ---- */
dialog { border:0; border-radius:18px; background:#101322; color:#e6eaf8; padding:22px;
  width:min(88vw,360px); box-shadow:0 12px 50px rgba(0,0,0,.7); }
dialog::backdrop { background:rgba(2,3,8,.65); backdrop-filter:blur(3px); }
dialog h2 { font-size:18px; margin-bottom:10px; color:#ffcf6e; }
dialog p { font-size:14.5px; line-height:1.5; color:#aeb6d4; }
.row { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.btn { border:0; border-radius:12px; padding:10px 16px; font-size:15px; font-weight:600; cursor:pointer; }
.btn.ghost { background:rgba(140,150,190,.15); color:#cfd6f2; }
.btn.danger { background:#7e2f2f; color:#ffd9d9; }
.stats { font-size:15px; line-height:2; color:#cfd6f2; }
.stats b { color:#ffcf6e; }

@media (prefers-reduced-motion: reduce) {
  .beam,.halo,.halo img,.sig,.fbat { animation:none !important; }
  .scene .bg,.sig,.bats { transition-duration:.3s; }
}

.notrans * { transition:none !important; animation:none !important; }