/* Layout: console tascabile. Sigilli, HUD, schermo platform, tasti ◀ ▶ SALTA, narrazione. Look unico: villa vittoriana di notte, luce di candela, ferro e inchiostro rosso. */
:root{
  --void:#0b0a0c;--panel:#16131a;--line:#2e2830;--bone:#ddd3c1;--blood:#b0303a;--wound:#e0646d;--candle:#e3a64b;--muted:#8f8489;
  --display:"IM Fell English SC","Times New Roman",serif;--story:"Crimson Pro",Georgia,"Times New Roman",serif;--ui:"IBM Plex Mono",ui-monospace,"Courier New",monospace;--pixel:"Pixelify Sans","Courier New",monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{background:var(--void);color:var(--bone)}
body{font-family:var(--story);font-size:18px;line-height:1.4;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 36px}
.wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.eyebrow{font-family:var(--ui);font-size:12px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
h1{font-family:var(--display);font-weight:400;font-size:30px;margin:0;line-height:1;text-wrap:balance}
h1 span{color:var(--blood)}
.seals{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
.seal{height:32px;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel)}
.seal canvas{width:15px;height:21px;image-rendering:pixelated}
.seal.found{border-color:var(--blood);animation:ink 1.2s ease-out}
@keyframes ink{0%{box-shadow:0 0 0 transparent}60%{box-shadow:0 0 12px var(--blood)}100%{box-shadow:none}}
.hud{display:flex;align-items:center;gap:14px;font-family:var(--ui);font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.hearts{color:var(--wound);letter-spacing:2px;font-size:16px}
.hud .sp{flex:1}
.mute{font-family:var(--ui);font-size:12px;background:none;border:1px solid var(--line);color:var(--bone);padding:4px 8px;cursor:pointer;white-space:nowrap}
.stage{position:relative;border:1px solid var(--line);background:#000;line-height:0}
.stage.shake{animation:shake .12s steps(2) infinite}
@keyframes shake{0%{transform:translate(2px,-1px)}50%{transform:translate(-2px,2px)}100%{transform:translate(1px,1px)}}
canvas#game{width:100%;max-width:100%;aspect-ratio:4/3;image-rendering:pixelated;image-rendering:crisp-edges;display:block;touch-action:none}
.alert{position:absolute;left:50%;top:8px;transform:translateX(-50%);font-family:var(--ui);font-size:13px;line-height:1.2;letter-spacing:.04em;background:rgba(11,10,12,.85);border:1px solid var(--blood);color:var(--bone);padding:6px 10px;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.overlay{position:absolute;inset:0;background:rgba(11,10,12,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px;text-align:center;line-height:1.3;overflow-y:auto}
.overlay h2{font-family:var(--display);font-weight:400;font-size:26px;margin:0;text-wrap:balance}
.overlay p{margin:0;max-width:32ch}
.small{font-family:var(--ui);font-size:13px;color:var(--muted);letter-spacing:.04em}
#bigSeal{width:50px;height:70px;image-rendering:pixelated}
.rcard{border:1px solid var(--blood);background:var(--panel);padding:12px 14px;display:flex;flex-direction:column;gap:8px;line-height:1.3}
.rcard p{margin:0;font-size:18px}
.feed{font-family:var(--ui);font-size:13px;color:var(--wound)}
.feed:empty{display:none}
.hint{font-family:var(--ui);font-size:13px;color:var(--candle);display:flex;flex-direction:column;gap:2px}
.combo{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dial{display:flex;flex-direction:column;align-items:center;gap:3px}
.dial button{width:40px;height:26px;background:var(--panel);border:1px solid var(--line);color:var(--bone);font-size:13px;cursor:pointer}
.digit{width:40px;height:40px;display:grid;place-items:center;background:#07060a;border:1px solid var(--candle);font-family:var(--ui);font-weight:600;font-size:24px;color:var(--candle);font-variant-numeric:tabular-nums}
.btn{font-family:var(--ui);font-size:13px;letter-spacing:.03em;text-transform:uppercase;border:1px solid var(--candle);background:var(--candle);color:var(--void);padding:11px 16px;cursor:pointer;line-height:1}
.btn.ghost{background:transparent;color:var(--bone);border-color:var(--line)}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--candle);outline-offset:2px}
.pad{display:grid;grid-template-columns:64px 64px 1fr 1fr;gap:8px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.pad button{height:64px;border:1px solid var(--line);background:var(--panel);color:var(--bone);font-family:var(--ui);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
.pad .key{font-size:24px}
.pad .jump{font-size:16px;letter-spacing:.12em;text-transform:uppercase;border-color:var(--candle);color:var(--candle)}
.pad button.down{background:var(--line);transform:translateY(1px)}
.riddle{display:flex;gap:8px}
.riddle input{flex:1;min-width:0;font-family:var(--ui);font-size:16px;background:var(--panel);color:var(--bone);border:1px solid var(--blood);padding:11px 12px}
.dialog{background:var(--panel);border:1px solid var(--line);padding:10px 14px 14px;min-height:92px;display:flex;flex-direction:column;gap:4px;cursor:pointer;position:relative;user-select:none}
.speaker{font-family:var(--ui);font-size:12px;letter-spacing:.14em;color:var(--candle);text-transform:uppercase}
.text{min-height:44px}
.text.page{color:#efe6d2}
.more{position:absolute;right:12px;bottom:8px;color:var(--candle);font-family:var(--ui);font-size:12px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.splash{border:1px solid var(--line);background:radial-gradient(circle at 50% 0%,#241a2a,var(--panel) 70%);padding:22px 18px;display:flex;flex-direction:column;gap:12px}
.splash .logo{font-family:var(--display);font-size:46px;line-height:.95;margin:0}
.splash .logo span{color:var(--blood)}
.beta{font-family:var(--ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--candle)}
.splash p{margin:0;max-width:44ch}
.warn{font-family:var(--ui);font-size:13px;color:var(--wound);margin:0}
.row{display:flex;gap:8px;flex-wrap:wrap}
.notebook,.bug{border:1px dashed var(--line);padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.notebook ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.bug textarea{font-family:var(--ui);font-size:15px;background:var(--panel);color:var(--bone);border:1px solid var(--line);padding:8px;min-height:70px;resize:vertical}
.bug .ok{font-family:var(--ui);font-size:13px;color:var(--candle)}
.footer{font-family:var(--ui);font-size:11px;color:var(--muted);letter-spacing:.06em}
.gallery{border:1px dashed var(--blood);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.gbtns{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.gbtns .btn{font-size:12px;padding:9px 6px}
@media (prefers-reduced-motion: reduce){.seal.found,.more{animation:none}}

/* ---------- schermata finale ---------- */
.final{position:fixed;inset:0;z-index:50;background:#0b0a0c;display:flex;align-items:center;justify-content:center;
  padding:max(24px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  transition:background 3s ease}
.final.warm{background:#1d1410}
.final-inner{max-width:420px;width:100%;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.final-msg{font-family:var(--story);font-size:21px;line-height:1.45;min-height:3em;display:flex;flex-direction:column;gap:8px}
.final-media img,.final-media video{max-width:100%;max-height:40vh;border:1px solid var(--line)}
.final-q{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.1;margin:0;color:var(--candle);text-wrap:balance}
.final-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;position:relative;min-height:48px}
#noBtn{transition:transform .15s ease}
.final-after{font-family:var(--ui);color:var(--candle);margin:0}
.fade-in{animation:fadein 1.2s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.hintbtn{font-size:11px;padding:8px 8px;letter-spacing:0}
.clues{margin:0;padding-left:18px;font-size:16px;display:flex;flex-direction:column;gap:4px}
.clues b{font-style:normal;font-family:var(--ui);font-size:12px;color:var(--candle)}
.notebook h3{font-family:var(--ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:6px 0 0}
.digit.wide{width:52px}
.colon{font-family:var(--ui);font-size:24px;color:var(--candle)}
.tclues{background:var(--panel);border:1px solid var(--line);padding:10px 14px 10px 28px;max-height:45vh;overflow-y:auto;margin:0}
.tclues li{line-height:1.35}
.agroup{display:flex;flex-direction:column;gap:4px;width:100%}
.aopts{display:flex;flex-wrap:wrap;gap:6px}
.aopts .btn{font-size:12px;padding:8px 10px;letter-spacing:.02em;text-transform:none}
.aopts .btn.sel{background:var(--candle);color:var(--void);border-color:var(--candle)}
.composed{font-family:var(--display);font-size:26px;letter-spacing:.08em;color:var(--candle);width:100%}
.tiles{display:flex;flex-wrap:wrap;gap:6px}
.tile{display:flex;flex-direction:column;align-items:center;gap:2px;width:38px;padding:5px 0;background:var(--panel);border:1px solid var(--blood);color:var(--bone);font-family:var(--display);font-size:18px;cursor:pointer}
.tile canvas{width:10px;height:14px;image-rendering:pixelated}
.tile:disabled{opacity:.25}
.mapgrid{display:grid;grid-template-columns:auto repeat(4,1fr);gap:4px;width:100%;align-items:center}
.maprow{font-family:var(--ui);font-size:11px;color:var(--muted)}
.mapgrid .cell{font-size:11px;padding:8px 2px;letter-spacing:0;text-transform:none;min-width:0}
.crash{position:absolute;inset:0;background:#000;color:#c8d0d8;font-family:var(--ui);font-size:13px;line-height:1.5;padding:14px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.crash .err{color:#e0646d}
.pad .act{font-size:13px;letter-spacing:.06em;text-transform:uppercase;border-color:var(--line);color:var(--bone)}
.pad .act:not(:disabled){border-color:var(--candle);color:var(--candle)}
.pad .act:disabled{opacity:.35}

/* ---------- prove grafiche ---------- */
.combo{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.combo .row{justify-content:center}
.combo.nope{animation:nope .35s}
@keyframes nope{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.crypt{display:flex;gap:6px;justify-content:center;padding:10px;background:linear-gradient(#5a4520,#8a6a30 50%,#5a4520);border:1px solid #c9a24a;border-radius:6px}
.wheel{display:flex;flex-direction:column;align-items:center;background:#1a1410;border:1px solid #3a2a1a;width:42px}
.wheel .wb{width:100%;height:26px;background:none;border:0;color:#c9a24a;font-size:12px;cursor:pointer}
.wheel span{font-family:var(--display);line-height:1.1}
.wheel .prev,.wheel .next{font-size:14px;color:#6a5a48}
.wheel .cur{font-size:26px;color:var(--bone);border-block:1px solid #c9a24a;width:100%;text-align:center;background:#241c16}
.safewrap{display:flex;justify-content:center}
.safe{width:170px;height:170px}
#dialG{transition:transform .2s ease}
.slots4{display:flex;gap:8px;justify-content:center;font-family:var(--ui);font-size:22px;color:var(--candle)}
.slots4 span{width:34px;height:38px;display:grid;place-items:center;border:1px solid var(--line);background:#07060a}
.diskmsg{margin:0;font-size:15px;line-height:1.4}
.diskmsg b{font-family:var(--ui);font-weight:400;letter-spacing:.06em;color:var(--candle)}
.shelf,.pile{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;padding:8px;background:#2a1c14;border-bottom:4px solid #4a3020;min-height:120px;align-items:flex-end}
.pile{background:transparent;border:1px dashed var(--line);min-height:110px}
.spine,.slot{width:34px;height:104px;border:1px solid #0b0a0c;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.slot{background:#1a1410;border:1px dashed #6b5426;color:#6b5426;font-family:var(--ui)}
.spine span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--story);font-size:12px;color:#e8dcc4;max-height:96px;overflow:hidden}
.spine.sel{outline:2px solid var(--candle);transform:translateY(-6px)}
.lgrid{display:grid;grid-template-columns:auto repeat(4,1fr);gap:4px;align-items:center}
.lh{font-family:var(--ui);font-size:11px;color:var(--muted);text-align:center}
.lc{font-family:var(--ui);font-size:12px;padding:10px 2px;background:#07060a;border:1px solid var(--candle);color:var(--bone);cursor:pointer;min-width:0}
.lc.empty{border-color:var(--line);color:var(--muted)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;max-width:240px;margin:0 auto;padding:6px;background:#0f1612;border:1px solid #2a3a34;position:relative}
.pt{padding:0;border:0;background:none;cursor:pointer;aspect-ratio:1;max-width:100%}
.pt svg{width:100%;height:100%;display:block}
.digital{font-family:var(--ui);font-size:22px;color:var(--candle);text-align:center;font-variant-numeric:tabular-nums}
.clockctr{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.clockctr .btn{font-size:12px;padding:9px 4px;text-transform:none;letter-spacing:0}
.mkeys{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.mk{aspect-ratio:1;max-width:100%;border:1px solid var(--line);background:#07060a;color:var(--c);cursor:pointer;padding:8px;transition:background .1s}
.mk svg{width:100%;height:100%}
.mk.on{background:var(--c);color:#0b0a0c}
.lights{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-width:260px;margin:0 auto;padding:8px;background:#2a1c14;border:1px solid #4a3020}
.lt{aspect-ratio:1;max-width:100%;background:#1a1410;border:1px solid #3a2818;cursor:pointer;display:grid;place-items:center;padding:0}
.lt span{width:30%;height:55%;background:#d9cfbf;position:relative;opacity:.4}
.lt.on{background:#3a2a14;box-shadow:inset 0 0 14px rgba(227,166,75,.55)}
.lt.on span{opacity:1}
.lt.on span::before{content:"";position:absolute;left:25%;top:-45%;width:50%;height:40%;background:var(--candle);border-radius:50% 50% 40% 40%}
.suspects{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sus{text-align:left;display:flex;flex-direction:column;gap:4px;padding:10px;background:#07060a;border:1px solid var(--line);color:var(--bone);font-family:var(--story);font-size:14px;cursor:pointer;line-height:1.3}
.sus b{font-family:var(--ui);font-weight:400;font-size:12px;color:var(--candle);letter-spacing:.04em}
.sus.sel{border-color:var(--blood);box-shadow:0 0 0 1px var(--blood)}
.letterline{margin:0;font-size:18px;line-height:1.5}
.letterline b{font-family:var(--display);font-style:normal;color:var(--candle);letter-spacing:.06em}
@media (max-width:360px){.suspects{grid-template-columns:1fr}}