/* Raumkarten, Regler, Chips, Knöpfe. */

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: .8; }
}
@keyframes breathe-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Home Pulse: Gesamtzustand des Hauses als Orb statt Textzeile ===== */
.pulse {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--s4) 0 var(--s2);
}

.pulse-orb {
  --glow: 154, 51, 255;
  position: relative;
  width: 128px; height: 128px;
  border-radius: 50%;
  display: grid; place-items: center;
  isolation: isolate;
}
.pulse-orb::before {
  /* Marken-Ring: immer präsent, das Spektrum aus dem Logo */
  content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 2px;
  background: var(--brand-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .85;
}
.pulse-orb::after {
  /* Echtes Licht: Farbe & Helligkeit der brennenden Lampen im Haus */
  content: ''; position: absolute; inset: 9px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(var(--glow), .85), rgba(var(--glow), .28) 55%, transparent 78%);
  transition: background 900ms ease;
}
.pulse-orb.is-lit::after { background: radial-gradient(circle at 38% 32%, rgba(var(--glow), .95), rgba(var(--glow), .38) 55%, transparent 78%); }
@media (prefers-reduced-motion: no-preference) {
  .pulse-orb.is-lit::after { animation: breathe 4.5s ease-in-out infinite; }
}

.pulse-count { position: relative; z-index: 2; font-family: var(--f-data); font-variant-numeric: tabular-nums; }
.pulse-count b { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1; }
.pulse-count span { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }

.pulse h2 { font-size: 1.05rem; font-weight: 700; margin: var(--s2) 0 2px; letter-spacing: -.01em; }
.pulse p { margin: 0; font-size: .84rem; color: var(--text-soft); }

/* ===== Filter-Chips ===== */
.filters {
  display: flex; gap: var(--s1); padding: var(--s3) 0 var(--s1);
  overflow-x: auto; scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }

.chip {
  flex: none; display: flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 var(--s2); border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--glass-line);
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--text-soft);
  white-space: nowrap; cursor: pointer;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), border-color 160ms ease;
}
.chip:active { transform: scale(.96); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip svg { width: 15px; height: 15px; stroke-width: 1.8; }
.chip .n { opacity: .65; }
.chip.is-active {
  color: #fff; border-color: transparent;
  background: var(--brand-gradient-diag);
  box-shadow: 0 6px 18px -8px rgba(154, 51, 255, .55);
}

/* Schlanke Statuszeile statt der früheren Kugel — sagt dasselbe in einer
   Zeile und lässt den Räumen den Platz. */
.status-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s3) 2px var(--s1);
}
.status-text { font-size: .96rem; font-weight: 300; color: var(--text-soft); }
.status-text b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.all-off {
  flex: none;
  min-height: 36px; padding: 0 var(--s3); border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--glass-line);
  color: var(--text-soft); font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: transform 140ms cubic-bezier(.23, 1, .32, 1), color 160ms ease;
}
.all-off:active { transform: scale(.96); }
.all-off:hover { color: var(--text); }
.all-off:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Raster der Räume ===== */
.section-label {
  font-family: var(--f-data); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); margin: var(--s4) 2px var(--s2);
}

/* Einheitliche Kacheln. Die frühere Bento-Staffelung nach Lampenzahl sah
   zwar interessant aus, machte aber schmale Kacheln, in denen lange
   Raumnamen abgeschnitten wurden — Lesbarkeit schlägt Layout-Effekt. */
.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s2);
}

.room-card {
  --glow: 255, 158, 44;
  --i: 0;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--s2); padding: var(--s2) var(--s2) 14px;
  min-height: 132px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .06), transparent 45%), var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r2);
  color: inherit; font-family: inherit; text-align: left;
  transition: border-color 220ms ease, background 220ms ease;
}
.room-card.is-empty { opacity: .55; }

.room-card.is-on {
  border-color: rgba(var(--glow), .5);
  background:
    radial-gradient(130% 110% at 100% 0%, rgba(var(--glow), .26), transparent 62%),
    linear-gradient(155deg, rgba(255, 255, 255, .07), transparent 45%),
    var(--glass);
}

.room-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s1); }

.room-icon {
  width: 36px; height: 36px; padding: 8px; border-radius: var(--r1); flex: none;
  background: rgba(255, 255, 255, .1); color: var(--text-soft);
  transition: background 220ms ease, color 220ms ease;
}
.room-card.is-on .room-icon { color: rgb(var(--glow)); background: rgba(var(--glow), .24); }
.room-icon svg { width: 100%; height: 100%; display: block; }

.room-motion {
  width: 7px; height: 7px; border-radius: 50%; flex: none; align-self: center;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(63, 224, 160, .22);
}
@media (prefers-reduced-motion: no-preference) {
  .room-motion { animation: breathe-soft 2.4s ease-in-out infinite; }
}

/* Der Name führt in den Raum, der Schalter schaltet direkt — zwei getrennte
   Ziele, damit »Licht aus« nicht erst einen Seitenwechsel braucht. */
.room-open {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  background: none; border: 0; padding: 0; margin: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer; min-width: 0;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1);
}
.room-open:active { transform: scale(.97); }
.room-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Leichte, größere Schrift wie das »Plus« im Logo. Name darf umbrechen,
   wird nie abgeschnitten. */
.room-name {
  font-size: 1.06rem; font-weight: 300; line-height: 1.2; letter-spacing: -.005em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.room-meta {
  font-family: var(--f-data); font-size: .68rem; letter-spacing: .02em;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.room-card.is-on .room-meta { color: var(--text-soft); }

@media (prefers-reduced-motion: no-preference) {
  #view.is-entering .room-card {
    animation: card-in 460ms cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(220ms + min(var(--i) * 32ms, 420ms));
  }
}

/* ===== Umsortieren per langem Druck ===== */
body.is-reordering { user-select: none; }
body.is-reordering .room-card { transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
.room-card.is-placeholder { opacity: .25; }
.room-card.is-ghost {
  z-index: 80; pointer-events: none; opacity: .96;
  transform: scale(1.06); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .7);
  border-color: rgba(154, 51, 255, .6);
}

.empty-state { text-align: center; padding: var(--s5) var(--s3); color: var(--text-faint); font-size: .88rem; }

/* ===== Schwebende Tab-Leiste ===== */
.tabbar {
  position: fixed; left: var(--s3); right: var(--s3);
  bottom: calc(env(safe-area-inset-bottom) + var(--s2));
  max-width: calc(34rem - 2 * var(--s3)); margin: 0 auto;
  display: flex; justify-content: space-around; align-items: center;
  padding: 8px; border-radius: var(--r-pill);
  background: rgba(18, 16, 24, .72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-line);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6);
  z-index: 20;
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--text-faint); font-size: .6rem; font-weight: 600;
  padding: 7px var(--s2); border-radius: var(--r-pill); position: relative;
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.tab svg { width: 20px; height: 20px; stroke-width: 1.7; }
.tab.is-active { color: #fff; background: var(--brand-gradient-diag); }
.tab[disabled] { opacity: .45; cursor: default; }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }