/* Het staalpaneel (paneel.js): altijd het hele paneel, geen zoom. */
.paneel-toestel {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: #0b0b0a; overflow: hidden;
}
.pn-plaat {
  position: relative;
  aspect-ratio: var(--verhouding, 853 / 1844);
  height: min(100dvh, 1844px);
  max-width: 100vw;
}
@supports (height: 100dvh) { .pn-plaat { height: min(100dvh, 1844px); } }
/* staand scherm (iPhone): het paneel vult de breedte in plaats van zwarte
   randen links en rechts; boven en onder valt evenveel weg. Hoogstens
   1,25x, zodat een iPad niet te veel verliest (Jeroen, 25-09). */
@media (orientation: portrait) {
  .paneel-toestel { place-content: center; }   /* anders viel alleen de onderkant weg */
  .pn-plaat {
    height: auto; max-width: none;
    width: min(100vw, calc(100dvh * 853 / 1844 * 1.25));
  }
}
.pn-plaat > *, .pn-laag { position: absolute; }
.pn-laag { inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }

/* de buis: leeg glas in het paneel, het licht komt van onder */
.pn-buis { pointer-events: none; }
.pn-buis-aan {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(transparent, transparent); mask-image: linear-gradient(transparent, transparent);
  transition: filter .6s linear;
}
.paneel-toestel[data-buisvol="ja"] .pn-buis-aan { animation: pn-zoem 1.6s ease-in-out infinite; }
@keyframes pn-zoem { 50% { opacity: .5; } }

/* de stappen: geen eigen licht (Jeroen, 25-09: niet nodig) */
.pn-stap { pointer-events: none; }

/* het naambordje: de naam van het event, gegraveerd */
.pn-bordje { display: grid; place-items: center; pointer-events: none; container-type: size; }
.pn-bordje span {
  display: block; text-align: center;
  font: 500 38cqh/1.12 "Oswald", system-ui, sans-serif;
  letter-spacing: .09em; text-transform: uppercase; color: #d9b98a;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 0 6px rgba(217, 185, 138, .25);
}

/* hoorn en knop: onzichtbare knoppen op het beeld */
.pn-hoorn, .pn-knop, .pn-gat {
  background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.pn-hoorn { border-radius: 30%; outline: none; }  /* geen hover-effect (Jeroen, 25-09) */

/* de schijf: ring draait, gaten zijn de knoppen */
.pn-schijf { transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s; z-index: 3; }
.pn-schijf img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pn-ring { transform-origin: 50% 50%; }
.pn-gat { position: absolute; transform: translate(-50%, -50%); }
.pn-gat.geraakt { box-shadow: 0 0 10px 2px rgba(255, 210, 140, .45); }
.paneel-toestel[data-inzet="aan"] .pn-schijf {
  transform: scale(1.9);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .8));
}
.pn-doek { inset: 0; pointer-events: none; background: rgba(0, 0, 0, 0); transition: background .45s; z-index: 2; }
.paneel-toestel[data-inzet="aan"] .pn-doek { background: rgba(0, 0, 0, .45); }
/* de buis blijft ook bij de inzet in beeld: boven het doek */
.paneel-toestel[data-inzet="aan"] .pn-buis { z-index: 4; }