/* L'Operatore — stili.
   Due mondi: il modulo "anni 2000" della Fondazione Sirio (form-mode)
   e la stazione al buio, terminale a fosfori verdi (dark-mode). */

:root {
  --phosphor: #3dff7f;
  --phosphor-dim: #1c8a45;
  --phosphor-glow: rgba(61, 255, 127, 0.45);
  --amber: #ffcf6a;
  --paper: #f3ecd8;
  --ink: #2a2620;
  --form-bg: #d9dee6;
  --form-blue: #1f3a63;
  --form-blue-2: #2f5a92;
  --form-line: #9aa6b8;
  --danger: #ff5a4f;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
.hidden { display: none !important; }

/* ------------------------------------------------------------------ modulo */
body.form-mode {
  background: var(--form-bg) repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.18) 3px 4px);
  font: 15px/1.45 Tahoma, Verdana, "Segoe UI", sans-serif;
  color: #1d2533;
}
.page {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100%;
  padding: 16px 16px 40px;
}
.card {
  background: #fff;
  border: 1px solid var(--form-line);
  box-shadow: 0 1px 0 #fff inset, 0 2px 6px rgba(20, 30, 50, .12);
}
.card-hdr {
  background: linear-gradient(#2f5a92, #1f3a63);
  color: #fff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo {
  width: 30px; height: 30px; flex: none;
  border: 2px solid #fff; border-radius: 50%;
  display: grid; place-items: center;
  font: bold 14px Georgia, serif;
}
.card-hdr .t1 { font-weight: bold; letter-spacing: .04em; font-size: 14px; }
.card-hdr .t2 { font-size: 12px; opacity: .85; }
.card-body { padding: 16px 16px 18px; }
.card-foot {
  border-top: 1px solid #e3e7ee;
  background: #f4f6f9;
  padding: 8px 14px;
  font-size: 11px;
  color: #6a7586;
}
h1.form-title { font-size: 18px; margin: 0 0 10px; color: var(--form-blue); }
.small { font-size: 12px; color: #5b6676; }
.meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #5b6676; margin-bottom: 10px;
}
.timer { font: bold 13px "Courier New", monospace; color: var(--form-blue); }
.timer.glitch-timer { color: #b3261e; }
.progress {
  height: 8px; border: 1px solid var(--form-line); background: #eef1f5; margin-bottom: 14px;
}
.progress > div { height: 100%; background: linear-gradient(#7fa3d6, #3d6aa8); transition: width .4s; }
.question { font-weight: bold; margin: 0 0 12px; }
.opts { display: grid; gap: 8px; margin-bottom: 14px; }
.opts label {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 10px; border: 1px solid #cfd6e1; background: #f8fafc; cursor: pointer;
}
.opts label:has(input:checked) { background: #e6eefb; border-color: #7fa3d6; }
.opts input { margin-top: 3px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field input {
  font: 16px Tahoma, Verdana, sans-serif;
  padding: 9px 10px; border: 1px solid #8b97aa; background: #fff;
  border-radius: 0; width: 100%;
}
.field input:focus, .field textarea:focus { outline: 2px solid #9fbbe6; }
.field textarea { font: 15px Tahoma, Verdana, sans-serif; padding: 9px 10px; border: 1px solid #8b97aa; border-radius: 0; width: 100%; resize: vertical; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.btn {
  font: bold 14px Tahoma, Verdana, sans-serif;
  padding: 9px 18px;
  border: 1px solid #6d7c93;
  background: linear-gradient(#fdfdfd, #d8dee8);
  color: #1d2533;
  cursor: pointer;
  border-radius: 2px;
  min-height: 40px;
}
.btn:active { background: linear-gradient(#d8dee8, #fdfdfd); }
.btn[disabled] { opacity: .5; }
.btn.primary { background: linear-gradient(#4a78b8, #24497f); color: #fff; border-color: #1c3863; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.notice {
  margin-top: 12px; padding: 9px 10px; font-size: 13px;
  background: #fff7dd; border: 1px solid #e5cf86;
}
.notice.err { background: #fde9e7; border-color: #e7a59d; }
.memo {
  font: bold clamp(24px, 8vw, 34px) "Courier New", monospace; letter-spacing: .3em;
  white-space: nowrap; text-align: center; padding: 18px 0; color: var(--form-blue);
}

/* annuncio */
.ad h2 { font-size: 14px; color: var(--form-blue); margin: 16px 0 4px; text-transform: uppercase; letter-spacing: .05em; }
.ad ul { margin: 4px 0 0; padding-left: 20px; }
.ad-tag { font: bold 11px Tahoma, sans-serif; color: #8a6d00; letter-spacing: .08em; margin-bottom: 6px; }
.ad-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #f4f6f9; border: 1px solid #e3e7ee; padding: 4px 12px 12px; margin: 12px 0; }
@media (max-width: 420px) { .ad-cols { grid-template-columns: 1fr; } }
.ad-note { font-style: italic; color: #5b6676; margin: 16px 0; }

/* due posizioni nell'annuncio */
.positions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
@media (max-width: 460px) { .positions { grid-template-columns: 1fr; } }
.pos-card { border: 1px solid #c7d0dc; background: #f8fafc; padding: 10px 12px 12px; display: flex; flex-direction: column; }
.pos-card h2 { margin: 0 0 4px; }
.pos-card p { margin: 0 0 6px; font-size: 13px; }
.pos-card ul { margin: 0 0 10px; padding-left: 18px; font-size: 13px; flex: 1; }
.ad-offer { background: #f4f6f9; border: 1px solid #e3e7ee; padding: 2px 12px 10px; margin-bottom: 8px; }

/* prova di osservazione al buio */
.darkroom { display: block; width: 100%; height: 210px; background: #000; touch-action: none; border: 1px solid #222; cursor: crosshair; }

/* confronto con il candidato del 1987 */
table.cmp { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0 8px; }
table.cmp th, table.cmp td { border-bottom: 1px solid #e3e7ee; padding: 6px 4px; text-align: left; vertical-align: top; }
table.cmp th { font-size: 12px; color: #5b6676; }
table.cmp th span { font-weight: normal; }
table.cmp td:first-child { color: #5b6676; width: 30%; }
table.cmp td:last-child, table.cmp th:last-child { font-family: "Courier New", monospace; color: #7a1f17; }
table.cmp td.red { color: #b3261e; font-weight: bold; }
.cmp-result { font-size: 16px; margin: 8px 0 4px; color: var(--form-blue); }

/* ritaglio di giornale */
.clip {
  background: #e9e1c9; color: #2a2620; max-width: 440px; width: 100%;
  max-height: 85vh; overflow-y: auto;
  padding: 16px 18px; font: 15px/1.45 Georgia, "Times New Roman", serif;
  box-shadow: 0 8px 30px rgba(0,0,0,.6); transform: rotate(-1deg);
  background-image: radial-gradient(rgba(120,90,40,.10) 1px, transparent 1px); background-size: 3px 3px;
}
.clip-paper { font: 900 20px Georgia, serif; text-align: center; border-bottom: 3px double #2a2620; padding-bottom: 4px; letter-spacing: .04em; }
.clip-date { font-size: 12px; text-align: center; margin: 4px 0 10px; font-style: italic; }
.clip h3 { font: bold 20px/1.2 Georgia, serif; margin: 0 0 10px; }
.clip p { margin: 0 0 10px; text-align: justify; }

/* tracce del candidato del 1987 */
.online { margin: -8px 0 12px; color: #5b6676; }
.online.ghost, .by { color: #b3261e; font-family: "Courier New", monospace; }
.by { display: block; font-size: 12px; margin-top: 2px; }

/* analizzatore di spettro */
.analyzer {
  margin-top: 14px;
  border: 1px solid #222;
  background: #050806;
  padding: 8px;
}
.analyzer-hdr {
  display: flex; justify-content: space-between; align-items: center;
  font: 12px "Courier New", monospace; color: #8fd9a8; margin-bottom: 6px;
}
.analyzer-screen { position: relative; }
.analyzer canvas { display: block; width: 100%; height: 110px; background: #000; }
.analyzer-grid {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(120,255,170,.07) 0 1px, transparent 1px 22px);
}
.analyzer-axis { display: flex; justify-content: space-between; font: 11px "Courier New", monospace; color: #5f9d74; margin-top: 4px; }
.analyzer .btn { min-height: 34px; padding: 5px 12px; }
.analyzer-filter { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 12px "Courier New", monospace; color: #8fd9a8; }
.analyzer-filter input { flex: 1; accent-color: #3dff7f; }
.analyzer-filter b { width: 1.2em; text-align: right; }

/* ------------------------------------------------------------------ mondo buio */
body.dark-mode {
  background: #000;
  color: var(--phosphor);
  font: 22px/1.15 VT323, "Courier New", monospace;
}
.dark-page {
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 24px 16px; text-align: center;
}
.phos { color: var(--phosphor); text-shadow: 0 0 6px var(--phosphor-glow); }
.dim { color: var(--phosphor-dim); }
.big { font-size: 34px; }
.code-input {
  font: 34px VT323, monospace;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-align: center;
  width: min(320px, 90vw);
  padding: 8px 6px;
  background: #000; color: var(--phosphor);
  border: 1px solid var(--phosphor-dim);
  text-shadow: 0 0 6px var(--phosphor-glow);
  caret-color: var(--phosphor);
  border-radius: 0;
}
.code-input:focus { outline: 1px solid var(--phosphor); }
.dbtn {
  font: 24px VT323, monospace;
  color: #000; background: var(--phosphor);
  border: 0; padding: 6px 22px; margin-top: 14px; cursor: pointer;
  box-shadow: 0 0 12px var(--phosphor-glow);
  min-height: 44px;
}
.dbtn.ghost { background: transparent; color: var(--phosphor-dim); box-shadow: none; text-decoration: underline; font-size: 20px; }
.dmsg { min-height: 2.6em; margin-top: 16px; max-width: 30ch; }
.manual-hint {
  margin-top: 26px; max-width: 34ch; color: var(--amber); font-size: 20px;
  border-top: 1px dashed rgba(255, 207, 106, .4); padding-top: 12px;
}

/* il proprio codice di turno, sempre in vista */
.code-page p { max-width: 32ch; margin: 10px 0 0; }
.mycode { border: 1px solid var(--phosphor-dim); padding: 12px 18px 14px; margin: 18px 0 6px; }
.mycode-val { font-size: 46px; letter-spacing: .14em; margin: 4px 0 2px; }
.mycode .dbtn { margin-top: 8px; }

/* barra superiore della sessione */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: calc(6px + env(safe-area-inset-top)) 10px 6px;
  background: linear-gradient(#000 70%, rgba(0,0,0,0));
  font-size: 20px;
}
.topbar .who { color: var(--phosphor-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #444; margin-right: 6px; vertical-align: middle; }
.dot.on { background: var(--phosphor); box-shadow: 0 0 6px var(--phosphor); }
.tbtn {
  font: 19px VT323, monospace; color: var(--phosphor);
  background: transparent; border: 1px solid var(--phosphor-dim);
  padding: 2px 8px; cursor: pointer; min-height: 32px;
}
.tbtn .badge { color: var(--amber); }
.tbtn.off { color: #5a5a5a; border-color: #333; text-decoration: line-through; }

/* terminale */
.term {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  padding: calc(48px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at center, #031a0b 0%, #000 75%);
}
.term::after { /* scanline */
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px);
}
.term-out {
  flex: 1; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
  font-size: clamp(15px, 4.7vw, 21px); line-height: 1.15;
  text-shadow: 0 0 5px var(--phosphor-glow);
  padding-bottom: 8px;
}
.term-out .echo { color: #b9ffd2; }
.term-out .sys { color: var(--amber); text-shadow: 0 0 5px rgba(255,207,106,.4); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.chips button {
  font: 19px VT323, monospace; color: var(--phosphor); background: #021a0a;
  border: 1px solid var(--phosphor-dim); padding: 2px 10px; cursor: pointer; min-height: 34px;
}
.term-out .dim { color: var(--phosphor-dim); text-shadow: none; }
.chips button.next { background: var(--phosphor); color: #000; animation: pulse 1.6s ease-in-out infinite; }
.term-out.crt-off { animation: crtoff .7s ease-in forwards; }
.term-out.crt-on { animation: crton .4s ease-out; }
@keyframes crtoff {
  0% { transform: scale(1, 1); filter: brightness(1); }
  60% { transform: scale(1, .006); filter: brightness(3); }
  100% { transform: scale(0, .006); filter: brightness(5); opacity: 0; }
}
@keyframes crton {
  0% { transform: scale(1, .006); filter: brightness(4); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}
.term-in { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--phosphor-dim); padding-top: 6px; }
.term-in span { font-size: 24px; }
.term-in input {
  flex: 1; min-width: 0;
  font: 22px VT323, monospace; color: var(--phosphor);
  background: transparent; border: 0; outline: none; caret-color: var(--phosphor);
  text-shadow: 0 0 5px var(--phosphor-glow);
}

/* torcia */
.torcia { position: fixed; inset: 0; background: #000; touch-action: none; }
.torcia canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.torcia-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; justify-content: center; gap: 10px; align-items: center;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(0,0,0,0), #000 45%);
}
.torcia-status {
  position: absolute; left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 5;
  text-align: center; font-size: 20px; color: #c9c2b0; text-shadow: 0 0 4px #000; padding: 0 16px;
  pointer-events: none;
}
.torcia-bar .tbtn { font-size: 21px; padding: 4px 14px; min-height: 42px; color: #e8dfc8; border-color: #6b6555; }
.torcia-bar .tbtn.off { color: #777; }

/* fine enigma: pulsante per spostarsi */
.dbtn.proceed {
  position: absolute; z-index: 6; left: 50%; transform: translateX(-50%);
  bottom: calc(150px + env(safe-area-inset-bottom));
  max-width: calc(100% - 32px); font-size: 21px; line-height: 1.1; padding: 8px 16px;
  white-space: nowrap; animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { box-shadow: 0 0 8px var(--phosphor-glow); } 50% { box-shadow: 0 0 22px var(--phosphor); } }

/* intermezzo della Torcia */
.inter { position: absolute; inset: 0; z-index: 30; background: #000; transition: opacity .9s ease; }
.inter canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.inter.out { opacity: 0; pointer-events: none; }
.inter-cap { position: absolute; left: 0; right: 0; bottom: 22%; text-align: center; padding: 0 16px; }
.inter-title { font: 34px/1.1 VT323, monospace; color: #efe6cf; letter-spacing: .08em; min-height: 1.1em; text-shadow: 0 0 10px rgba(255,230,180,.35); }
.inter-sub { margin-top: 8px; font: 20px VT323, monospace; color: #9c937e; opacity: 0; transition: opacity 1s; }
.inter-sub.on { opacity: 1; }

/* finale */
.term-out .vox-term { color: #f2f2f2; text-shadow: 0 0 8px rgba(255,255,255,.55); font-size: 1.15em; }
.overlay.end { justify-content: flex-start; padding-top: calc(48px + env(safe-area-inset-top)); overflow-y: auto; }
.report { width: min(360px, 100%); border: 1px solid var(--phosphor-dim); padding: 10px 14px; text-align: left; margin-bottom: 18px; }
.rep-title { color: var(--amber); font-size: 19px; margin-bottom: 6px; }
.rep-row { display: flex; justify-content: space-between; gap: 12px; font-size: 20px; color: var(--phosphor); border-bottom: 1px dotted rgba(61,255,127,.18); padding: 2px 0; }
.rep-row span:first-child { color: var(--phosphor-dim); }
.teaser { margin: 4px 0 10px; font-size: 22px; }
.teaser .phos { letter-spacing: .08em; }

/* VOX */
.vox {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
  top: calc(52px + env(safe-area-inset-top));
  width: min(560px, calc(100% - 20px));
  background: rgba(0, 0, 0, .88);
  border: 1px solid #3a3a3a; border-left: 3px solid #d8d8d8;
  padding: 8px 12px;
  font: 21px/1.2 VT323, "Courier New", monospace;
  color: #eaeaea;
  text-shadow: 0 0 4px rgba(255,255,255,.35);
}
body.form-mode .vox { top: auto; bottom: 18px; }
.vox-tag { color: #9a9a9a; margin-right: 8px; letter-spacing: .1em; }

/* pagine del manuale */
.toast {
  position: fixed; z-index: 45; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom));
  width: min(480px, calc(100% - 20px));
  background: var(--paper); color: var(--ink);
  font: 15px/1.4 Georgia, "Times New Roman", serif;
  padding: 12px 14px 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
  border: 1px solid #c9bc93;
}
.toast b { display: block; font: bold 12px Tahoma, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #7a6a3a; margin-bottom: 4px; }
.toast .close { float: right; font: 13px Tahoma, sans-serif; color: #7a6a3a; background: none; border: 0; cursor: pointer; padding: 0 0 6px 10px; }
.manual-list .toast-item { margin-bottom: 12px; }

/* overlay */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.92);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 24px; text-align: center;
}
.overlay p { max-width: 32ch; }
.overlay.paper { background: rgba(0,0,0,.8); }
.overlay.paper .sheet {
  background: var(--paper); color: var(--ink); text-align: left;
  font: 15px/1.45 Georgia, serif; padding: 16px; max-width: 480px; width: 100%;
  max-height: 80vh; overflow-y: auto;
}

/* foto degli armadietti: un tocco avvicina le targhette */
.photo-frame { overflow: hidden; border: 8px solid #f1ead8; border-bottom-width: 22px; box-shadow: 0 2px 6px rgba(0,0,0,.35); cursor: zoom-in; background: #f1ead8; }
.photo-frame img { display: block; width: 100%; height: auto; transition: transform .35s ease; transform-origin: 45% 22%; }
.photo-frame.zoom { cursor: zoom-out; }
.photo-frame.zoom img { transform: scale(2.3); }

/* lampo (corto circuito) */
.flash { position: fixed; inset: 0; z-index: 60; background: #fff; opacity: 0; pointer-events: none; }

/* glitch */
@keyframes glitch {
  0% { transform: translate(0); filter: none; }
  20% { transform: translate(-3px, 1px) skewX(4deg); filter: hue-rotate(40deg); }
  40% { transform: translate(3px, -1px) skewX(-6deg); }
  60% { transform: translate(-1px, 2px); filter: invert(.08); }
  80% { transform: translate(2px, 0) skewX(2deg); }
  100% { transform: translate(0); filter: none; }
}
.glitch { animation: glitch .35s steps(2) 2; }
@keyframes shake {
  0%,100% { transform: translate(0); }
  25% { transform: translate(-6px, 3px); }
  50% { transform: translate(5px, -4px); }
  75% { transform: translate(-3px, -2px); }
}
.shake { animation: shake .3s linear 1; }

@media (prefers-reduced-motion: reduce) {
  .glitch, .shake { animation: none; }
}

/* Atto II · tabulato dei relè (lascia libera la barra della torcia) */
.a2-sheet { position: fixed; left: 0; right: 0; top: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 20;
  background: rgba(0,0,0,.82); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.tab-paper { position: relative; width: min(340px, 100%); background: #e4dfcf; color: #2b2a26; padding: 14px 12px 18px;
  font: 13px/1.5 "Courier New", monospace; box-shadow: 0 4px 18px rgba(0,0,0,.6); transition: background .8s, color .8s; }
.tab-h { text-align: center; font-weight: bold; margin-bottom: 8px; }
.tab-l { display: flex; gap: 8px; white-space: nowrap; overflow: hidden; }
.tab-l span:nth-child(2) { flex: 1; }
.tab-x { position: relative; min-height: 1.5em; margin: 2px 0; }
.tab-x .bar { position: absolute; inset: 1px 0; background: #0b0b0b; transition: background .8s; }
.tab-x .hid { position: relative; white-space: normal; font-size: 12px; color: transparent; transition: color .8s, text-shadow .8s; }
.tab-hand { margin-top: 12px; font: italic 15px/1.3 Georgia, serif; color: #2846a0; transform: rotate(-2deg); transition: color .8s; }
.tab-cap { color: #c9c2b0; font-size: 19px; text-align: center; max-width: 32ch; }
.a2-sheet.backlit .tab-paper { background: #1a0c0a; color: #3a2420; box-shadow: 0 0 60px rgba(255,60,40,.25); }
.a2-sheet.backlit .tab-x .bar { background: rgba(120,20,15,.55); }
.a2-sheet.backlit .tab-x .hid { color: #ff7a64; text-shadow: 0 0 6px rgba(255,90,60,.8); }
.a2-sheet.backlit .tab-hand { color: #2a1612; }

/* Atto II · finale */
.overlay.finale2 { background: #000; justify-content: flex-start; padding-top: calc(70px + env(safe-area-inset-top)); overflow-y: auto; }
.f2-lines { width: min(520px, 100%); text-align: left; }
.f2-lines p { margin: 0 0 10px; font-size: 22px; color: #eaeaea; text-shadow: 0 0 6px rgba(255,255,255,.4); max-width: none; }
.f2-lines p.quote { color: #ffd38a; padding-left: 14px; }
.overlay.finale2.glitch { filter: invert(1) hue-rotate(90deg); transform: translateX(6px); }
.overlay.crash { background: #0018a8; justify-content: center; }
.crash-box { font: 20px/1.4 "Courier New", monospace; color: #fff; text-align: left; max-width: 340px; }
.crash-t { background: #fff; color: #0018a8; display: inline-block; padding: 0 8px; margin-bottom: 12px; font-weight: bold; }

/* Atto II · sensori in diretta (Terminale) e obiettivo (Torcia) */
.sensors { flex: none; margin: 0 0 6px; padding: 4px 6px 6px; border: 1px solid var(--phosphor-dim); color: var(--phosphor);
  font: 17px/1.1 VT323, monospace; text-shadow: 0 0 5px var(--phosphor-glow); }
.sens-h { margin-bottom: 2px; }
.sens-l { font-size: 16px; margin-top: 2px; }
.sens-l .me { color: #7dffa8; } .sens-l .an { color: #ffb347; }
.floor { display: block; width: 100%; max-height: 34vh; }
.floor .walls line { stroke: #3dff7f; stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(61,255,127,.6)); }
.floor .names text { fill: #2fd06a; font: 13px VT323, monospace; text-anchor: middle; }
.floor .names text.goal { fill: #e8fff0; font-size: 18px; }
.floor .me circle { fill: none; stroke: #9dffc0; stroke-width: 2.5; filter: drop-shadow(0 0 4px #7dffa8); }
.floor .me circle.dot { fill: #9dffc0; stroke: none; }
.floor .an circle { fill: #ffb347; filter: drop-shadow(0 0 6px #ffb347); animation: anpulse 1s ease-in-out infinite; }
@keyframes anpulse { 50% { opacity: .45; } }
.torcia-goal { position: absolute; z-index: 4; left: 0; right: 0; top: calc(50px + env(safe-area-inset-top)); text-align: center;
  font: clamp(14px, 4.2vw, 18px) VT323, monospace; white-space: nowrap; color: #8dffb0; text-shadow: 0 0 6px rgba(120,255,160,.5); letter-spacing: .02em; pointer-events: none; }
.torcia-goal.hidden { display: none; }

/* diario di Luisa Ferri */
.overlay.paper .sheet.diary-sheet { background: #efe7d2 repeating-linear-gradient(#efe7d2 0 27px, #c9d4e6 27px 28px); color: #23324f; max-height: 82vh; }
.diary-head { font: bold 12px Tahoma, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #7a6a3a; margin-bottom: 8px; }
.diary-when { font: 700 22px/1.2 Caveat, "Comic Sans MS", cursive; color: #8a2d22; }
.diary-text { font: 500 23px/28px Caveat, "Comic Sans MS", cursive; color: #1f2c4a; margin: 2px 0 8px; }
.diary-note { font: italic 13px/1.4 Georgia, serif; color: #6a5a3a; margin-bottom: 10px; }
.diary-page { border-bottom: 1px dashed #b9a985; padding-bottom: 6px; margin-bottom: 10px; }

/* apertura dell'atto */
.opening { position: fixed; inset: 0; z-index: 60; background: #000; overflow: hidden; transition: opacity .8s; }
.opening.out { opacity: 0; pointer-events: none; }
.op-img { position: absolute; inset: 0; background: url(img/a2-esterno.jpg) 58% 50% / cover no-repeat; opacity: 0; filter: brightness(.75) contrast(1.05); transform: scale(1.02); }
.opening.run .op-img { animation: opfade 3s ease forwards, opzoom 40s linear forwards; }
@keyframes opfade { to { opacity: 1; } }
@keyframes opzoom { to { transform: scale(1.22); } }
.op-shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.92)); }
.op-title { position: absolute; top: calc(28px + env(safe-area-inset-top)); left: 0; right: 0; text-align: center; font: 20px VT323, monospace; letter-spacing: .14em; color: #bfb7a2; }
.op-lines { position: absolute; left: 0; right: 0; bottom: calc(120px + env(safe-area-inset-bottom)); padding: 0 22px; text-align: center; }
.op-lines p { margin: 0 auto 8px; max-width: 30ch; font: 25px/1.2 VT323, monospace; color: #efe6cf; text-shadow: 0 0 10px rgba(0,0,0,.9); }
.op-start, .op-next { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(44px + env(safe-area-inset-bottom)); white-space: nowrap; }

/* fine atto: ultima pagina del diario e "cosa sappiamo" */
.end-diary { width: min(360px, 100%); text-align: left; background: #efe7d2 repeating-linear-gradient(#efe7d2 0 27px, #c9d4e6 27px 28px); padding: 12px 14px; margin-bottom: 16px; }
.known { width: min(360px, 100%); text-align: left; border: 1px solid var(--phosphor-dim); padding: 10px 14px; margin-bottom: 16px; }
.known ul { margin: 4px 0 0; padding-left: 18px; color: var(--phosphor); font-size: 19px; line-height: 1.2; }
.known li { margin-bottom: 6px; }
.known ul.q { color: var(--amber); }

/* ================================================================ Atto III */
.a3 { position: fixed; inset: 0; padding: calc(56px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; }
.a3-crash { background: #0018a8; color: #fff; }
.a3-crash-box { max-width: 420px; margin: 0 auto; font: 17px/1.4 "Courier New", monospace; }
.a3-dump { white-space: pre-wrap; font: 16px/1.35 "Courier New", monospace; margin: 8px 0 14px; }
.a3-site { display: inline-block; color: #fff; background: rgba(255,255,255,.12); border: 1px solid #fff; padding: 8px 12px; text-decoration: none; margin-bottom: 16px; }
.a3-lbl { display: block; font-size: 14px; opacity: .85; margin-bottom: 4px; }
.a3-row { display: flex; gap: 8px; }
.a3-row input { flex: 1; min-width: 0; font: 22px "Courier New", monospace; letter-spacing: .2em; padding: 6px 8px; background: #000c60; color: #fff; border: 1px solid #fff; }
.a3-btn { font: bold 15px "Courier New", monospace; background: #fff; color: #0018a8; border: 0; padding: 8px 12px; cursor: pointer; }
.a3-btn.ghost { background: none; color: #fff; border: 1px solid #fff; margin-top: 16px; }
.a3-msg { min-height: 1.4em; margin-top: 8px; color: #ffd38a; }
.a3-call { position: fixed; inset: 0; z-index: 70; background: linear-gradient(#1b2a20, #070b08); color: #e8f2ea; display: flex; flex-direction: column; align-items: center; padding: calc(60px + env(safe-area-inset-top)) 20px 30px; text-align: center; }
.a3-call-top { font: 16px Tahoma, sans-serif; opacity: .8; }
.a3-call-who { font: bold 26px Tahoma, sans-serif; margin-top: 14px; letter-spacing: .04em; }
.a3-call-sub { font: 16px Tahoma, sans-serif; opacity: .75; }
.a3-call-lines { flex: 1; width: min(440px, 100%); text-align: left; margin-top: 24px; overflow-y: auto; }
.a3-call-lines p { font: 20px/1.3 VT323, monospace; color: #cfe8d4; margin: 0 0 8px; }
.a3-call-lines p.drop { color: #ff8a80; text-align: center; margin-top: 14px; }
.a3-call-btns { display: flex; gap: 40px; margin-top: 12px; }
.a3-ans, .a3-rej { width: 84px; height: 84px; border-radius: 50%; border: 0; color: #fff; font: bold 13px Tahoma, sans-serif; cursor: pointer; }
.a3-ans { background: #22a447; animation: pulse 1.2s ease-in-out infinite; } .a3-rej { background: #c0392b; }
.a3-vox { background: #000; color: #eaeaea; }
.a3-vox-lines { max-width: 460px; margin: 0 auto; }
.a3-vox-lines p { font: 22px/1.3 VT323, monospace; text-shadow: 0 0 6px rgba(255,255,255,.4); margin: 0 0 10px; }
.a3-choice { max-width: 460px; margin: 18px auto 0; display: flex; flex-direction: column; gap: 12px; }
.a3-big { font: 26px VT323, monospace; letter-spacing: .12em; padding: 14px; border: 1px solid; background: none; cursor: pointer; }
.a3-big.off { color: #ff8a80; border-color: #ff8a80; } .a3-big.free { color: #9dffc0; border-color: #9dffc0; }
.a3-note, .a3-chosen { font: 18px VT323, monospace; color: #9a9a9a; text-align: center; }
.a3-chosen b { color: #fff; }
.a3-shut { text-align: center; user-select: none; -webkit-user-select: none; }
.a3-shut-t { font: 24px VT323, monospace; letter-spacing: .14em; color: #ff8a80; margin-top: 6px; }
.a3-shut-sub { font: 18px VT323, monospace; color: #9a9a9a; margin: 8px 0 18px; }
.a3-ring { position: relative; width: 240px; height: 240px; margin: 0 auto; }
.a3-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.a3-ring circle { fill: none; stroke-width: 7; } .a3-ring .bg { stroke: #222; } .a3-ring .fg { stroke: #ff5a4f; transition: stroke-dashoffset .9s linear; filter: drop-shadow(0 0 6px #ff5a4f); }
.a3-hold { position: absolute; inset: 26px; border-radius: 50%; border: 2px solid #ff5a4f; background: #1a0605; color: #ffb3ad; font: 24px/1.1 VT323, monospace; letter-spacing: .1em; touch-action: none; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.a3-hold.on { background: #5a120e; color: #fff; box-shadow: 0 0 30px rgba(255,90,79,.6) inset; }
.a3-count { font: 22px VT323, monospace; color: #ff8a80; margin-top: 12px; min-height: 1.2em; }
.a3.glitch { filter: invert(1) hue-rotate(90deg); transform: translateX(5px); }
.a3.shake { animation: shake .35s; }
.a3-end { text-align: center; }
.a3-end.blackout { background: #000; } .a3-end.blackout > * { visibility: hidden; }
.a3-after { font: 20px VT323, monospace; color: #ffd38a; margin-bottom: 14px; }
.a3-end-title { font: 30px VT323, monospace; letter-spacing: .12em; margin: 18px 0 12px; color: #fff; }
.end-spento .a3-end-title { color: #ff8a80; } .end-libero .a3-end-title { color: #9dffc0; } .end-diviso .a3-end-title { color: #ffd38a; }
.a3-twin { border: 1px solid #ffd38a; color: #ffd38a; padding: 10px; margin: 0 auto 14px; max-width: 360px; font: 18px VT323, monospace; }
.a3-twin b { font-size: 34px; letter-spacing: .14em; } .a3-twin span { color: #b9a77a; }
.a3-epi { max-width: 420px; margin: 0 auto 16px; } .a3-epi p { font: 19px/1.3 VT323, monospace; color: #bdbdbd; margin: 0 0 8px; }
.a3-end .known { margin: 0 auto 16px; }
.a3-credits { font: 22px VT323, monospace; letter-spacing: .3em; color: #eaeaea; margin: 22px 0 14px; } .a3-credits span { letter-spacing: .05em; color: #8a8a8a; font-size: 17px; }

/* ================================================================ intro (1987) e scena dopo i titoli */
.intro { position: fixed; inset: 0; z-index: 400; background: #000; overflow: hidden; color: #e8e4da; transition: opacity .9s; }
.intro.bye { opacity: 0; }
.intro-stage, .intro-shot, .intro-img, .intro-fx { position: absolute; inset: 0; }
.intro-shot { opacity: 0; transition: opacity 1.5s ease; }
.intro-shot.in { opacity: 1; } .intro-shot.out { opacity: 0; }
.intro-img { background: center / cover no-repeat; filter: contrast(1.05) saturate(.75); transition: filter 1.2s; }
.intro-img.ph { background: radial-gradient(ellipse at 50% 35%, #1c2430, #07090c 70%); }
.intro-img.ph::after { content: attr(data-ph); position: absolute; left: 0; right: 0; top: 46%; text-align: center; font: 12px monospace; color: #3a4452; letter-spacing: .08em; }
.intro-fx { width: 100%; height: 100%; }
/* movimenti di macchina */
.intro-shot.in .intro-img { animation-duration: 14s; animation-timing-function: linear; animation-fill-mode: both; }
.zoom-in.in .intro-img { animation-name: i-zoom-in; } .zoom-slow.in .intro-img { animation-name: i-zoom-in; animation-duration: 24s; }
.zoom-fast.in .intro-img { animation-name: i-zoom-in; animation-duration: 5s; } .zoom-out.in .intro-img { animation-name: i-zoom-out; animation-duration: 20s; }
.pan-up.in .intro-img { animation-name: i-pan-up; } .pan-left.in .intro-img { animation-name: i-pan-left; }
@keyframes i-zoom-in { from { transform: scale(1.02); } to { transform: scale(1.16); } }
@keyframes i-zoom-out { from { transform: scale(1.25); } to { transform: scale(1.02); } }
@keyframes i-pan-up { from { transform: scale(1.18) translateY(5%); } to { transform: scale(1.18) translateY(-3%); } }
@keyframes i-pan-left { from { transform: scale(1.2) translateX(5%); } to { transform: scale(1.2) translateX(-5%); } }
/* grana e vignettatura sopra tutto */
.intro-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.75)); }
/* neve */
.intro-snow { position: absolute; inset: -20% 0 0; pointer-events: none; opacity: 0; transition: opacity 1.5s;
  background-image: radial-gradient(2px 2px at 20px 30px, #fff8, transparent), radial-gradient(1.5px 1.5px at 80px 120px, #fff7, transparent), radial-gradient(2.5px 2.5px at 150px 60px, #fff6, transparent), radial-gradient(1px 1px at 200px 180px, #fff9, transparent);
  background-size: 230px 230px; animation: i-snow 3.5s linear infinite; }
.intro.snowing .intro-snow { opacity: 1; }
@keyframes i-snow { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: -60px 230px, -90px 230px, -40px 230px, -70px 230px; } }
/* le luci della base che si spengono */
.intro-shot.lights-3 .intro-img { filter: contrast(1.05) saturate(.75) brightness(1); }
.intro-shot.lights-2 .intro-img { filter: contrast(1.1) saturate(.6) brightness(.68); }
.intro-shot.lights-1 .intro-img { filter: contrast(1.2) saturate(.4) brightness(.4); }
.intro-shot.lights-0 .intro-img { filter: contrast(1.35) saturate(.2) brightness(.14) hue-rotate(190deg); }
.intro-shot[class*="lights-"] .intro-img { transition: filter .25s steps(3); }
.intro.cut .intro-stage { opacity: 0; transition: opacity .08s; }
.intro.black .intro-stage, .intro.black .intro-snow { opacity: 0; transition: opacity 2.5s; }
.intro.shudder .intro-stage { animation: i-shudder .45s; }
@keyframes i-shudder { 25% { transform: translate(-3px, 2px); } 50% { transform: translate(3px, -1px); } 75% { transform: translate(-1px, -2px); } }
/* il terminale */
.intro-crt { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #0b2a12 0%, #04140a 70%, #020a05 100%); border-radius: 9% / 12%;
  box-shadow: 0 0 2.5em rgba(0,0,0,.9) inset, 0 0 1.2em rgba(61,255,127,.25); animation: crt-flick 4s infinite; }
.intro-crt::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 2px, transparent 2px 4px), radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.07), transparent 45%); }
.intro-crt pre { margin: 0; font: 1em/1.2 VT323, "Courier New", monospace; color: #7dffa6; text-shadow: 0 0 .25em #3dff7f, 0 0 .7em rgba(61,255,127,.6); white-space: pre; text-align: left; letter-spacing: .04em; }
.intro-crt.msg pre { font-size: 2.3em; line-height: 1.05; text-align: left; color: #b6ffcb; letter-spacing: .08em; }
.intro-crt.blink pre { animation: crt-cursor 1s steps(1) infinite; }
@keyframes crt-flick { 0%, 100% { opacity: 1; } 47% { opacity: .96; } 48% { opacity: .85; } 49% { opacity: 1; } }
@keyframes crt-cursor { 50% { text-shadow: 0 0 .4em #3dff7f, 0 0 1.2em rgba(61,255,127,.9); } }
/* didascalie */
.intro-cap { position: absolute; left: 22px; right: 22px; bottom: 15%; font: 19px/1.4 Georgia, serif; text-shadow: 0 1px 6px #000, 0 0 2px #000; transition: opacity .8s; }
.intro-cap p { margin: 0 0 6px; }
.intro-cap.fade { opacity: 0; }
.intro-cap.stamp { font: 22px/1.3 VT323, "Courier New", monospace; color: var(--amber); letter-spacing: .06em; }
.intro-cap.epi { bottom: auto; top: 34%; text-align: center; font-size: 18px; }
.intro-cap.title { bottom: auto; top: 40%; text-align: center; }
.intro-title { font: 46px/1 VT323, "Courier New", monospace; letter-spacing: .18em; color: #f2f2f2; text-shadow: 0 0 14px rgba(255,255,255,.35); animation: i-flick 2.5s steps(1) 1; margin-bottom: 34px; }
@keyframes i-flick { 0%, 8%, 14%, 40% { opacity: 1; } 4%, 11%, 37% { opacity: .2; } }
.intro-start, .intro-go { background: none; border: 1px solid #8a8578; color: #e8e4da; font: 18px VT323, "Courier New", monospace; letter-spacing: .14em; padding: 12px 22px; cursor: pointer; }
.intro-start { width: 100%; position: relative; bottom: 22vh; padding: 18px; line-height: 1.5; }
.intro-start span { font-size: 14px; color: #8a8578; letter-spacing: .06em; }
.intro-go { margin-top: 18px; }
.intro-skip { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 2; background: rgba(0,0,0,.35); border: 1px solid #444; color: #9a968c; font: 14px "Courier New", monospace; padding: 6px 12px; }
.intro-replay { background: none; border: 0; color: #5d6878; font-size: 12px; text-decoration: underline; margin-top: 10px; cursor: pointer; }
.a3-outro-btn { display: block; margin: 18px auto 0; background: none; border: 1px solid #555; color: #bbb; font: 16px VT323, "Courier New", monospace; letter-spacing: .1em; padding: 10px 18px; }

.tint-green .intro-img { filter: sepia(.35) hue-rotate(55deg) saturate(.55) brightness(.62) contrast(1.15); }
.pos-left .intro-img { background-position: 8% 50%; transform-origin: 30% 50%; }
.pos-right .intro-img { background-position: 66% 50%; transform-origin: 62% 50%; }

/* l'ultima pagina di Luisa: la penna scivola via */
.diary-cut { display: inline-block; width: 3.2em; height: .9em; vertical-align: -.25em; margin-left: .1em;
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 18'%3E%3Cpath d='M1 6 C10 5 16 8 24 9 S40 12 48 14 S58 17 63 17' fill='none' stroke='%231f2c4a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.diary-stop { font: italic 13px Georgia, serif; color: #8a7a5a; text-align: center; margin: 4px 0 6px; letter-spacing: .04em; }

/* scena dopo i titoli: il sole che esplode, VOX solo, la trasmissione intercettata */
.intro.nova .intro-stage { animation: i-nova 2.6s ease-in forwards; }
@keyframes i-nova { 0% { filter: brightness(1); } 35% { filter: brightness(1.6) saturate(.6); } 60% { filter: brightness(6) saturate(0); } 100% { filter: brightness(10) saturate(0); opacity: 0; } }
.intro.nova { background: #fff; transition: background 2s; }
.intro-cap.vox-alone { bottom: auto; top: 38%; text-align: center; font: 22px/1.5 "Courier New", monospace; color: #eaeaea; }
.intro-cap.intercept { bottom: auto; top: 26%; font: 15px/1.6 "Courier New", monospace; color: #9fe6b0; }
.intro-cap.intercept p:first-child { color: #ff6a5a; letter-spacing: .08em; }
.intro-chapter { margin-top: 28px; font: 26px/1.2 VT323, "Courier New", monospace; letter-spacing: .14em; color: #f2f2f2; text-align: center; }
.intro-chapter span { display: block; font-size: 16px; color: #8a8578; letter-spacing: .2em; margin-top: 6px; }
.outro .intro-go { display: block; margin: 22px auto 0; }

.a3-credits .thanks { display: block; margin-top: 14px; font-size: 13px; opacity: .75; line-height: 1.5; }
.overlay.solid { background: rgba(0,0,0,.95); }
.a3-who { display: flex; justify-content: center; gap: 18px; margin-top: 10px; font: 16px VT323, "Courier New", monospace; color: #7a5450; letter-spacing: .06em; }
.a3-who span.on { color: #ff9a8f; text-shadow: 0 0 8px rgba(255,90,79,.6); }

/* registro dei turni: la firma di fine gioco */
.a3-sign-btn { display: block; margin: 22px auto 0; background: var(--phosphor); color: #021a0a; border: 0; font: 20px VT323, "Courier New", monospace; letter-spacing: .1em; padding: 11px 20px; box-shadow: 0 0 18px var(--phosphor-glow); }
.overlay.a3-sign { background: #000; overflow-y: auto; }
.a3-sign-box { max-width: 420px; width: 100%; text-align: left; }
.a3-sign-t { font: 18px VT323, "Courier New", monospace; letter-spacing: .12em; color: var(--amber); }
.a3-sign-meta { margin: 8px 0 14px; font: 18px/1.35 VT323, "Courier New", monospace; color: #cfcbc0; letter-spacing: .04em; }
.a3-sign-meta b { color: var(--phosphor); font-weight: normal; }
.a3-stars { display: flex; gap: 6px; margin-bottom: 12px; }
.a3-stars button { background: none; border: 0; font-size: 34px; line-height: 1; color: #3a3f38; padding: 2px; cursor: pointer; }
.a3-stars button.on { color: var(--amber); text-shadow: 0 0 10px rgba(255,207,106,.5); }
.a3-sign textarea { width: 100%; background: #050807; color: #e8e4da; border: 1px solid #2b3a30; font: 16px/1.4 Georgia, serif; padding: 10px; resize: vertical; }
.a3-sign-count { text-align: right; font: 14px VT323, monospace; color: #6d7a70; }
.a3-sign-note { font-size: 13px; color: #8f8b80; margin: 6px 0; }
.a3-sign-msg { min-height: 1.4em; font: 17px VT323, "Courier New", monospace; color: var(--phosphor); letter-spacing: .04em; margin: 6px 0; }
.a3-sign-row { display: flex; gap: 10px; flex-wrap: wrap; }