/* 3D-Lichtraum: Bühne, Maß-Regler, Lampenauswahl.
   Die Bühne ist bewusst der Blickfang der Seite — dunkler als der App-Grund,
   damit das Licht darin überhaupt als Licht liest. */

.stage3d {
  position: relative;
  margin-top: var(--s3);
  border-radius: var(--r3);
  overflow: hidden;
  background: #07060B;
  border: 1px solid var(--glass-line);
  /* Randabschattung: lässt die Bühne wie ein Fenster in einen Raum wirken,
     statt wie ein aufgeklebtes Rechteck. */
  box-shadow: inset 0 0 60px 10px rgba(0, 0, 0, .75), 0 18px 40px -24px rgba(0, 0, 0, .9);
}

.stage3d-canvas {
  display: block;
  width: 100%;
  /* Bewusst großzügig: der Raum ist der Blickfang der Seite, und man muss
     ihn drehen können, ohne dass er an den Rand stößt. */
  height: 64dvh;
  min-height: 320px;
  max-height: 560px;
  /* Ohne das deutet der Browser das Ziehen als Seiten-Scroll und die Geste
     kommt nie an (dieselbe Falle wie bei den Reglern, siehe js/drag.js). */
  touch-action: none;
  cursor: grab;
}
.stage3d-canvas:active { cursor: grabbing; }

.stage3d-hint {
  position: absolute;
  left: var(--s2); bottom: var(--s2);
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(8, 7, 13, .62);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(6px);
  font-size: .7rem;
  color: var(--text-faint);
  pointer-events: none;
}

/* Zoomstand — nur sichtbar, wenn vom Standard abgewichen wird */
.stage3d-zoom {
  position: absolute;
  right: var(--s2); bottom: var(--s2);
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(var(--mark-rgb), .14);
  border: 1px solid rgba(var(--mark-rgb), .4);
  backdrop-filter: blur(6px);
  font: inherit; font-family: var(--f-data); font-size: .7rem;
  color: var(--mark);
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1);
}
.stage3d-zoom:active { transform: scale(.94); }
.stage3d-zoom[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  #view.is-entering .stage3d {
    animation: stage-in 620ms cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: 60ms;
  }
  @keyframes stage-in {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to { opacity: 1; transform: none; }
  }
}

/* ---- Maß-Regler ---- */
.dim-row { display: flex; align-items: center; gap: var(--s2); margin-top: 10px; }
.dim-label {
  flex: none; width: 58px;
  font-size: .8rem; color: var(--text-soft);
}
.dim-row .slider { flex: 1; }

/* ---- Lampenauswahl im Positionierungs-Editor ---- */
.lamp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s1); }
.lamp-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--glass-line);
  font: inherit; font-size: .8rem; color: var(--text-soft); cursor: pointer;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), border-color 160ms ease, color 160ms ease;
}
.lamp-pill:active { transform: scale(.95); }
.lamp-pill.is-active {
  border-color: rgba(var(--mark-rgb), .5);
  background: rgba(var(--mark-rgb), .1);
  color: var(--mark);
}
.lamp-pill-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: rgba(150, 148, 166, .45);
}
.lamp-pill-dot.is-on {
  background: #ffb76a;
  box-shadow: 0 0 8px rgba(255, 183, 106, .9);
}

/* ---- Ausgewählte Lampe in der Ansicht ---- */
.lamp-card {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s2); padding: 13px 14px;
  border-radius: var(--r1);
  background: var(--glass); border: 1px solid var(--glass-line);
}
.lamp-card-ic { flex: none; width: 30px; height: 30px; color: var(--text-soft); }
.lamp-card-ic svg { width: 100%; height: 100%; }
.lamp-card-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lamp-card-body b { font-size: .95rem; font-weight: 400; color: var(--text); }
.lamp-card-body span { font-family: var(--f-data); font-size: .74rem; color: var(--text-faint); margin-top: 2px; }

/* ---- Einstiegsknopf auf der Raumseite ---- */
.room3d-btn {
  width: 36px; height: 36px; flex: none;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--text-soft);
  cursor: pointer; transition: transform 140ms cubic-bezier(.23, 1, .32, 1), color 160ms ease, border-color 160ms ease;
}
.room3d-btn svg { width: 19px; height: 19px; }
.room3d-btn:active { transform: scale(.9); }
.room3d-btn:hover { color: var(--mark); border-color: rgba(var(--mark-rgb), .35); }
.room3d-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }