/* Raster, Kopfzeile, Blattdialoge. */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(120vw 60vh at 20% -10%, rgba(154, 51, 255, .10), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--f-ui);
  line-height: 1.5;
  padding: calc(env(safe-area-inset-top) + var(--s3)) var(--s3) calc(env(safe-area-inset-bottom) + 96px);
}

main { max-width: 34rem; margin: 0 auto; }

.app-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.app-header h1 { margin: 0; line-height: 0; }
.header-right { display: flex; align-items: center; gap: var(--s2); }

.brand-logo { height: 60px; width: auto; display: block; }

/* Verbindungsstatus zur Bridge: nur ein Punkt, kein Textknopf. Details im title-Tooltip. */
.status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-faint);
  box-shadow: 0 0 0 3px transparent;
  transition: background 300ms ease, box-shadow 300ms ease;
}
.status-dot.is-ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(63, 224, 160, .18); }
.status-dot.is-bad { background: var(--crit); box-shadow: 0 0 0 3px rgba(232, 105, 91, .18); }

/* Seitenwechsel: die Bausteine treten nacheinander ein statt alles auf
   einmal. Wird pro Navigation neu angestoßen (siehe Router in index.html),
   nicht bei jeder Datenaktualisierung — sonst flackert es bei jedem Tippen. */
@keyframes view-in { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes hero-in { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  #view.is-entering > * {
    animation: view-in 520ms cubic-bezier(.16, 1, .3, 1) backwards;
  }
  #view.is-entering > *:nth-child(1) { animation-delay: 0ms; }
  #view.is-entering > *:nth-child(2) { animation-delay: 55ms; }
  #view.is-entering > *:nth-child(3) { animation-delay: 110ms; }
  #view.is-entering > *:nth-child(4) { animation-delay: 165ms; }
  #view.is-entering > *:nth-child(5) { animation-delay: 220ms; }
  #view.is-entering > *:nth-child(6) { animation-delay: 275ms; }
  #view.is-entering > *:nth-child(n+7) { animation-delay: 320ms; }

  /* Der Lampenkopf kommt mit etwas mehr Schwung — er ist der Blickfang */
  #view.is-entering .light-hero,
  #view.is-entering .master {
    animation: hero-in 620ms cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: 60ms;
  }
}

/* Lade-/Fehlertext, bevor die eigentliche Ansicht steht. */
.rooms-summary { text-align: center; color: var(--text-soft); font-size: .9rem; padding: var(--s5) var(--s3); }