/* Webversion: Steuerleiste unter der Bühne (nur von scripts/build-web.ts eingebunden) */

/* Leistung: kein Echtzeit-Weichzeichnen hinter den Glas-Panels (der Hintergrund bewegt sich ständig),
   stattdessen etwas dichtere Flächen */
.theme-b .glass, .pill, .card-shade { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.theme-b .glass:not(.hot) { background: linear-gradient(160deg, rgba(26, 39, 63, 0.88) 0%, rgba(11, 22, 40, 0.84) 60%, rgba(7, 18, 38, 0.88) 100%); }
#stage .scene { will-change: opacity, transform; }
html, body { background: #03060e; height: 100%; overflow: hidden; overscroll-behavior: none; }
/* iPhone: kein Doppeltipp-Zoom (danach treffen Fingertipps die fixierte Leiste nicht mehr) */
html, body, #webbar, .wb-btn { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
#viewport { bottom: 56px; overflow: hidden; }

#webbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 56px; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 0 16px;
  background: #03060e; border-top: 1px solid rgba(212, 175, 55, 0.12);
  padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box;
}
.wb-hint { position: absolute; left: 20px; font: 500 13px "Inter", sans-serif; color: #9fa7b8; transition: opacity 0.8s ease; }
.wb-hint.gone { opacity: 0; }
.wb-nav { display: flex; align-items: center; gap: 14px; }
.wb-count { min-width: 64px; text-align: center; font: 600 13px "Inter", sans-serif; letter-spacing: 0.12em; color: #9fa7b8; font-variant-numeric: tabular-nums; }
.wb-btn {
  width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(212, 175, 55, 0.4); background: rgba(212, 175, 55, 0.08); color: #f5f1e8;
  transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
}
.wb-btn:hover { background: rgba(212, 175, 55, 0.18); border-color: rgba(242, 214, 117, 0.8); }
.wb-btn:focus-visible { outline: 2px solid #f2d675; outline-offset: 2px; }
.wb-btn:disabled { opacity: 0.3; cursor: default; }
.wb-btn.primary { border: 0; background: linear-gradient(170deg, #f6dd86, #d4af37 55%, #b8891f); color: #07101f; }
.wb-btn.primary:hover { filter: brightness(1.08); }
.wb-btn.primary.pulse { animation: wb-pulse 1.8s ease-out infinite; }
@keyframes wb-pulse {
  0% { box-shadow: 0 0 0 0 rgba(242, 214, 117, 0.75); }
  70% { box-shadow: 0 0 0 16px rgba(242, 214, 117, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 214, 117, 0); }
}
@media (prefers-reduced-motion: reduce) { .wb-btn.primary.pulse { animation: none; box-shadow: 0 0 0 3px rgba(242, 214, 117, 0.6); } }
.wb-btn svg { width: 18px; height: 18px; }
.wb-btn.primary svg:last-child, .wb-btn.primary.restart svg:first-child { display: none; }
.wb-btn.primary.restart svg:last-child { display: block; }
.wb-fs { position: absolute; right: 16px; }

@media (max-width: 640px) {
  #viewport { bottom: 48px; }
  #webbar { height: 48px; }
  .wb-hint { display: none; }
  .wb-btn { width: 34px; height: 34px; }
}