:root{
  --carta:#f3f0ea; --inchiostro:#141414; --grigio:#6b6862; --linea:rgba(20,20,20,.14);
  --rosso:#c8102e; --vetro:rgba(243,240,234,.86);
  --molla:cubic-bezier(.34,1.4,.5,1);
  --serif:"Instrument Serif",Georgia,serif; --sans:"Inter Tight",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
body.notte{ --carta:#16161a; --inchiostro:#efece6; --grigio:#9a968e; --linea:rgba(239,236,230,.16); --vetro:rgba(22,22,26,.82) }
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:#cfd3d6;color:var(--inchiostro);font:15px/1.4 var(--sans)}
body.notte{background:#0b0c10}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#scena{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#sovrapposta{position:fixed;left:50%;top:0;height:100%;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .4s}
#segni{position:fixed;inset:0;pointer-events:none}

.segno{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;
  background:var(--carta);color:var(--inchiostro);font:500 12px/26px var(--mono);text-align:center;
  box-shadow:0 0 0 1.5px var(--inchiostro),0 4px 14px rgba(0,0,0,.25);transition:transform .35s var(--molla),opacity .3s}
.segno:hover,.segno.attivo{transform:translate(-50%,-50%) scale(1.25);background:var(--rosso);color:#fff;box-shadow:0 0 0 1.5px var(--rosso)}
.segno.dietro{opacity:.35}

.testa{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 16px;pointer-events:none}
.testa>*{pointer-events:auto}
.marchio{display:flex;flex-direction:column;text-decoration:none;color:var(--inchiostro);background:var(--vetro);backdrop-filter:blur(10px);padding:8px 14px 9px;border-radius:2px}
.marchio b{font:400 30px/1 var(--serif);letter-spacing:-.01em}
.marchio span{font:500 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}
.comandi{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.comandi>button,.interruttore{background:var(--vetro);backdrop-filter:blur(10px);border-radius:2px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.comandi>button{padding:9px 12px}
.comandi small{color:var(--grigio)}
.interruttore{display:flex;padding:3px}
.interruttore button{padding:6px 10px;border-radius:1px}
.interruttore .si{background:var(--inchiostro);color:var(--carta)}

.sala{position:fixed;left:16px;bottom:34px;max-width:min(560px,calc(100vw - 32px));background:var(--vetro);backdrop-filter:blur(10px);padding:12px 14px 12px;border-radius:2px}
.sala-n{margin:0;font:500 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grigio)}
.sala h1{margin:2px 0 8px;font:400 34px/1 var(--serif)}
.opere{list-style:none;margin:0;padding:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.opere li button{display:flex;gap:8px;align-items:baseline;white-space:nowrap;padding:7px 10px;border:1px solid var(--linea);border-radius:2px;font-size:13px;transition:background .2s}
.opere li button i{font:500 11px var(--mono);color:var(--grigio);font-style:normal}
.opere li button:hover,.opere li button.si{background:var(--inchiostro);color:var(--carta)}
.opere li button.si i{color:inherit}

.cartellino{position:fixed;right:16px;bottom:34px;width:min(340px,calc(100vw - 32px));background:var(--carta);color:var(--inchiostro);padding:16px 18px 16px;border-radius:2px;box-shadow:0 10px 40px rgba(0,0,0,.22);animation:su .45s var(--molla)}
@keyframes su{from{transform:translateY(16px);opacity:0}}
.cart-n{margin:0;font:500 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosso)}
.cartellino h2{margin:4px 30px 10px 0;font:italic 400 26px/1.05 var(--serif)}
.cartellino dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0 0 10px;font-size:13px}
.cartellino dt{font:500 10px/1.9 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grigio)}
.cartellino dd{margin:0}
.cart-nota{margin:0;font-size:13.5px;color:var(--inchiostro);border-top:1px solid var(--linea);padding-top:9px}
.chiudi{position:absolute;top:8px;right:10px;font-size:22px;line-height:1;color:var(--grigio)}
.cassetto header .chiudi{position:static}

.cassetto{position:fixed;top:78px;right:16px;bottom:34px;width:min(420px,calc(100vw - 32px));background:var(--carta);border-radius:2px;box-shadow:0 10px 40px rgba(0,0,0,.22);display:flex;flex-direction:column;animation:su .45s var(--molla);z-index:3}
.cassetto header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px}
.cassetto h3{margin:0;font:400 26px/1 var(--serif)}
.griglia{flex:1;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 16px 10px}
.griglia button{position:relative;aspect-ratio:9/16;background:#999 center/cover;border-radius:1px;outline-offset:2px}
.griglia button.si{outline:2px solid var(--rosso)}
.griglia button span{position:absolute;left:4px;top:4px;font:500 10px var(--mono);color:#fff;background:rgba(0,0,0,.45);padding:1px 4px}
.piede{padding:10px 16px 14px;border-top:1px solid var(--linea);font-size:12px;color:var(--grigio);display:flex;flex-direction:column;gap:6px}
.piede label{display:flex;gap:8px;align-items:center;font:500 11px var(--mono)}
.piede input{flex:1;accent-color:var(--rosso)}
#mappa iframe{flex:1;border:0;width:100%;min-height:200px;filter:saturate(.9)}
.coord{margin:10px 16px 4px;font:500 11px/1.5 var(--mono);color:var(--grigio)}
.link{margin:0 16px 14px;display:flex;gap:14px}
.link a{color:var(--inchiostro);font-weight:600}

.aiuto{position:fixed;left:50%;top:76px;transform:translateX(-50%);background:var(--vetro);backdrop-filter:blur(10px);padding:6px 12px;font:500 11px var(--mono);letter-spacing:.04em;border-radius:2px;opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap}
.aiuto.si{opacity:1}

.ingresso{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,rgba(243,240,234,.55),rgba(243,240,234,.92));z-index:5;transition:opacity .9s,visibility .9s;text-align:center;padding:16px}
.ingresso.via{opacity:0;visibility:hidden}
.ingresso h1{margin:6px 0 10px;font:400 clamp(56px,11vw,128px)/.9 var(--serif);letter-spacing:-.02em;color:#141414}
.ingresso .sotto{margin:0 auto 22px;max-width:34ch;color:#3a3833}
.ingresso .sala-n{color:#6b6862}
#entra{background:#141414;color:#f3f0ea;padding:12px 28px;font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;border-radius:2px;transition:transform .3s var(--molla)}
#entra:hover{transform:scale(1.05)}
#entra:disabled{opacity:.4}
.carica{font:500 10px var(--mono);color:#6b6862;letter-spacing:.1em;margin-top:12px;min-height:1em}
.crediti{position:fixed;left:16px;bottom:10px;font:400 10px var(--mono);color:var(--inchiostro);opacity:.6;pointer-events:none}

@media (max-width:700px){
  .marchio b{font-size:24px}
  .comandi>button,.interruttore{font-size:11px}
  .comandi>button{padding:8px 9px}
  .sala{bottom:28px;left:10px;right:10px;max-width:none;padding:10px 12px}
  .sala h1{font-size:26px}
  .cartellino{left:10px;right:10px;width:auto;bottom:auto;top:auto;bottom:150px;max-height:46vh;overflow:auto}
  .cassetto{left:10px;right:10px;width:auto;top:112px;bottom:28px}
  .crediti{left:10px;font-size:9px}
  .testa{padding:10px}
}