/*
 * projector.css — il proiettore a schermo intero (#proj): fascio, didascalia,
 * link all'originale su archive.org, pulsanti.
 */

.plink {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  color: #eee;
  text-decoration: underline;
}

/* projector */
.proj {
  position: fixed;
  inset: 0;
  background: #050505;
  display: none;
  z-index: 50;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.proj.on {
  display: flex;
}

.proj .beam {
  position: relative;
  width: min(92vw,calc((100dvh - 160px) * 1.5));
  height: min(calc(92vw / 1.5),calc(100dvh - 160px));
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 120px 20px rgba(255,236,190,.12);
}

.proj img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: sepia(.18) saturate(1.05) contrast(1.04);
  transition: opacity .25s;
}

.proj .beam::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55));
  pointer-events: none;
}

.proj .cap {
  color: #e9dfc4;
  font-family: var(--hand);
  font-size: 26px;
  margin-top: 14px;
  text-align: center;
  padding: 0 16px;
}

.proj .ctl {
  position: absolute;
  bottom: calc(16px + env(safe-area-inset-bottom,0px));
  display: flex;
  gap: 8px;
}

.proj .x {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top,0px));
  right: 14px;
}

/* pulsanti XP scuri, per non abbagliare durante la proiezione */
.proj .tbtn {
  --btn: linear-gradient(180deg,#4c4f55 0,#3a3d42 40%,#2e3035 86%,#25272b 100%);
  --btn-down: linear-gradient(180deg,#1b1c1f 0,#26282c 100%);
  --btn-edge: #000;
  --btn-ink: #f0f0f0;
  --focus: #ffb347;
  min-width: 86px;
}

@media (prefers-reduced-motion: reduce) {
  .proj img {
    transition: none;
  }
}