/* Layout: one 16:9 letterboxed stage; the HUD floats over the scene and scales with --u (stage width / 1280). Single dark look on purpose: night-time harbour. */
:root{
  --ink:#0d0a0e;        /* letterbox */
  --parch:#ecd9ad;      /* parchment UI */
  --parch-dk:#b8955a;
  --tar:#2a1a14;        /* text on parchment */
  --gold:#e3b34c;       /* accent: Poydower's braid */
  --teal:#23808a;       /* Poydower's coat */
  --cream:#fff6e0;
  --display:"IM Fell English SC", "Iowan Old Style", Georgia, serif;
  --serif:"IM Fell English", "Iowan Old Style", Georgia, serif;
  --body:"Alegreya Sans", "Avenir Next", "Trebuchet MS", sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0}
[hidden]{display:none!important}
body{background:var(--ink);color:var(--cream);font-family:var(--body);overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#app{position:fixed;inset:0;display:grid;place-items:center;
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));
  padding-block:env(safe-area-inset-top,0px) env(safe-area-inset-bottom,0px)}
#stage{position:relative;overflow:hidden;background:#000;--u:.5;--b:max(40px, calc(66px * var(--u)));
  border-radius:calc(10px * var(--u));box-shadow:0 0 0 1px rgba(255,240,200,.07),0 24px 70px rgba(0,0,0,.7)}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
#scene [data-hs]{cursor:pointer}
.hud{position:absolute;inset:0;pointer-events:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* speech */
#speech{position:absolute;max-width:46%;text-align:center;transform:translate(-50%,-100%);
  font:800 max(14px, calc(29px * var(--u)))/1.18 var(--body);letter-spacing:.01em;
  text-shadow:0 2px 0 #000,0 -2px 0 #000,2px 0 0 #000,-2px 0 0 #000,2px 2px 0 #000,-2px 2px 0 #000,2px -2px 0 #000,-2px -2px 0 #000,0 4px 10px rgba(0,0,0,.6)}
#label{position:absolute;transform:translate(-50%,-140%);white-space:nowrap;
  font:700 max(13px, calc(24px * var(--u)))/1 var(--body);color:var(--cream);
  background:rgba(13,10,14,.78);border:1px solid rgba(227,179,76,.45);padding:.35em .6em .4em;border-radius:.4em}
#label b{color:var(--gold);font-weight:800}

/* top buttons */
.iconbtn{position:absolute;pointer-events:auto;width:var(--b);height:var(--b);border-radius:50%;
  display:grid;place-items:center;background:rgba(20,13,12,.72);border:1.5px solid rgba(227,179,76,.55);
  box-shadow:0 3px 10px rgba(0,0,0,.45);transition:transform .15s, background .15s}
.iconbtn:hover{background:rgba(48,30,22,.9)}
.iconbtn:active{transform:scale(.93)}
.iconbtn svg{width:58%;height:58%}
#btnMenu{left:calc(18px * var(--u));top:calc(18px * var(--u))}
#btnLens{right:calc(18px * var(--u));top:calc(18px * var(--u))}
#btnSound{right:calc(18px * var(--u) + var(--b) + 12px);top:calc(18px * var(--u))}
#btnBag{right:calc(18px * var(--u));bottom:calc(18px * var(--u));width:calc(var(--b) * 1.2);height:calc(var(--b) * 1.2)}
#btnBag.pulse{animation:pulse .9s ease 2}
@keyframes pulse{50%{transform:scale(1.18);background:rgba(227,179,76,.5)}}
#bagCount{position:absolute;right:-4%;top:-4%;min-width:1.5em;height:1.5em;border-radius:1em;background:var(--gold);color:var(--tar);
  font:800 max(11px, calc(18px * var(--u)))/1.5em var(--body);text-align:center}

/* inventory tray */
#tray{position:absolute;right:calc(18px * var(--u) + var(--b) * 1.2 + 12px);bottom:calc(18px * var(--u));pointer-events:auto;
  display:flex;gap:calc(10px * var(--u));padding:calc(10px * var(--u));border-radius:calc(14px * var(--u));
  background:linear-gradient(#f1e0b6,#dcc28a);border:2px solid #7b5a30;box-shadow:0 8px 24px rgba(0,0,0,.55)}
#tray .slot{width:calc(var(--b) * 1.35);height:calc(var(--b) * 1.35);border-radius:calc(10px * var(--u));
  background:rgba(90,60,30,.12);border:1.5px solid rgba(90,60,30,.35);display:grid;place-items:center;position:relative}
#tray .slot svg{width:80%;height:80%}
#tray .slot:hover{background:rgba(90,60,30,.25)}
#tray .empty{color:#6b4d2a;font:italic max(13px, calc(22px * var(--u)))/1.2 var(--serif);padding:0 .6em;align-self:center}

/* held item chip */
#held{position:absolute;left:calc(18px * var(--u));bottom:calc(18px * var(--u));pointer-events:auto;display:flex;align-items:center;gap:.5em;
  background:rgba(20,13,12,.85);border:1.5px solid var(--gold);border-radius:999px;padding:.25em .35em .25em .25em;
  font:700 max(13px, calc(22px * var(--u)))/1 var(--body)}
#held .ic{width:2.2em;height:2.2em;border-radius:50%;background:#e8d3a2;display:grid;place-items:center}
#held .ic svg{width:80%;height:80%}
#held button{padding:.45em .7em;border-radius:999px;background:rgba(255,255,255,.08)}
#held button:hover{background:rgba(255,255,255,.18)}

/* verb ring */
#ring{position:absolute;width:0;height:0;pointer-events:none}
#ring .ringname{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font:800 max(12px, calc(21px * var(--u)))/1 var(--body);
  color:var(--gold);text-shadow:0 2px 0 #000,0 0 6px #000;top:calc(-1 * var(--b) * 1.75)}
#ring .verb{position:absolute;pointer-events:auto;transform:translate(-50%,-50%) scale(.4);opacity:0;
  width:calc(var(--b) * 1.15);height:calc(var(--b) * 1.15);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f6e6bf,#d4b276);border:2px solid #6e4b25;box-shadow:0 4px 12px rgba(0,0,0,.6);
  display:grid;place-items:center;transition:transform .16s ease-out, opacity .16s}
#ring.open .verb{transform:translate(-50%,-50%) scale(1);opacity:1}
#ring .verb svg{width:56%;height:56%}
#ring .verb span{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;white-space:nowrap;
  font:800 max(11px, calc(18px * var(--u)))/1 var(--body);color:var(--cream);text-shadow:0 1px 0 #000,0 0 5px #000}
#ring .verb.def{border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,179,76,.45),0 4px 12px rgba(0,0,0,.6)}

/* dialogue choices */
#choices{position:absolute;left:0;right:0;bottom:0;pointer-events:auto;display:flex;flex-direction:column;gap:calc(4px * var(--u));
  padding:calc(70px * var(--u)) calc(40px * var(--u)) calc(22px * var(--u));
  background:linear-gradient(rgba(10,7,9,0),rgba(10,7,9,.9) 40%)}
#choices button{text-align:left;font:700 max(14px, calc(27px * var(--u)))/1.2 var(--body);color:#e7cf8f;padding:.18em .2em .18em 1.1em;position:relative;
  text-shadow:0 2px 0 #000}
#choices button::before{content:"";position:absolute;left:.25em;top:.55em;width:.42em;height:.42em;border-radius:50%;border:2px solid currentColor;opacity:.6}
#choices button:hover,#choices button:focus-visible{color:#fff}
#choices button:hover::before{background:var(--gold);border-color:var(--gold);opacity:1}

/* menu */
#menu{position:absolute;left:calc(18px * var(--u));top:calc(18px * var(--u) + var(--b) + 10px);pointer-events:auto;min-width:calc(330px * var(--u));
  background:linear-gradient(#f1e0b6,#dcc28a);color:var(--tar);border:2px solid #7b5a30;border-radius:calc(12px * var(--u));
  box-shadow:0 10px 30px rgba(0,0,0,.6);padding:.4em;display:flex;flex-direction:column;font:700 max(14px, calc(24px * var(--u)))/1.2 var(--body)}
#menu button{text-align:left;padding:.55em .7em;border-radius:.4em}
#menu button:hover{background:rgba(90,60,30,.15)}
#menu .warn{color:#8a2418}
#menu .sep{height:1px;background:rgba(90,60,30,.3);margin:.25em .4em}

/* toast */
#toast{position:absolute;left:50%;top:calc(18px * var(--u));transform:translateX(-50%);max-width:62%;pointer-events:auto;
  background:linear-gradient(#f1e0b6,#dcc28a);color:var(--tar);border:2px solid #7b5a30;border-radius:calc(12px * var(--u));
  padding:.6em .9em;font:600 max(13px, calc(21px * var(--u)))/1.35 var(--body);box-shadow:0 8px 20px rgba(0,0,0,.5)}
#toast b{font-weight:800}
#toast .close{display:block;margin-top:.4em;font-weight:800;color:#7b4a16}

/* lens markers */
.lensDot{animation:lensPulse 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes lensPulse{50%{transform:scale(1.35);opacity:.6}}
.lensTxt{font:800 19px var(--body);paint-order:stroke;stroke:#000;stroke-width:5px;fill:#fff3cf}

/* door anim */
#doorLeaf{transform-box:fill-box;transform-origin:0% 50%;transition:transform .55s cubic-bezier(.5,0,.3,1)}
.gullFly{transition:transform 1.6s cubic-bezier(.4,0,.8,.6), opacity 1.6s}

/* overlays */
#fade{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .45s;pointer-events:none}
.overlay{position:absolute;inset:0;pointer-events:auto}
#title{display:grid;grid-template-columns:1fr auto;align-items:center;gap:calc(40px * var(--u));
  padding:0 calc(80px * var(--u)) 0 calc(90px * var(--u));
  background:radial-gradient(ellipse at 70% 40%, rgba(240,160,90,.35), transparent 55%),
             linear-gradient(#1b2347 0%, #4a3462 45%, #b8645a 78%, #e9a96a 100%)}
#title .bgspiral{position:absolute;inset:0;width:100%;height:100%;opacity:.22;pointer-events:none}
.t-left{position:relative;display:flex;flex-direction:column;gap:calc(18px * var(--u))}
.t-kicker{font:italic max(13px, calc(26px * var(--u)))/1 var(--serif);color:#ffd9a6;letter-spacing:.02em}
.t-logo{font:400 calc(118px * var(--u))/.86 var(--display);color:#fff1d2;text-wrap:balance;margin:0;
  text-shadow:0 calc(5px * var(--u)) 0 #3a1d2a, 0 calc(14px * var(--u)) calc(30px * var(--u)) rgba(0,0,0,.5)}
.t-logo em{display:block;font-style:normal;color:var(--gold);font-size:.62em;letter-spacing:.06em}
.t-chapter{font:700 max(13px, calc(24px * var(--u)))/1.3 var(--body);color:#ffe7c2;max-width:30em;opacity:.92}
.t-actions{display:flex;flex-wrap:wrap;gap:calc(14px * var(--u));margin-top:calc(10px * var(--u))}
.t-actions button{font:800 max(15px, calc(28px * var(--u)))/1 var(--body);padding:.7em 1.2em;border-radius:999px;
  background:var(--gold);color:var(--tar);box-shadow:0 calc(4px * var(--u)) 0 #8a5d17, 0 10px 24px rgba(0,0,0,.35)}
.t-actions button.ghost{background:rgba(255,240,210,.12);color:#fff1d2;box-shadow:inset 0 0 0 2px rgba(255,240,210,.5)}
.t-actions button:active{transform:translateY(2px)}
.poster{position:relative;width:calc(400px * var(--u));height:calc(560px * var(--u));transform:rotate(3deg);
  background:radial-gradient(ellipse at 50% 40%, #f4e4bd, #e2c890 70%, #c9a565);color:#3a1d12;
  box-shadow:0 calc(20px * var(--u)) calc(50px * var(--u)) rgba(0,0,0,.55), inset 0 0 calc(40px * var(--u)) rgba(120,70,20,.35);
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(26px * var(--u)) calc(26px * var(--u));
  clip-path:polygon(0 1%,4% 0,30% 1.2%,52% 0,78% .8%,100% 0,99% 22%,100% 48%,98.6% 75%,100% 100%,70% 99%,40% 100%,12% 98.8%,0 100%,1.2% 70%,0 40%)}
.poster::before{content:"";position:absolute;top:calc(10px * var(--u));left:50%;width:calc(16px * var(--u));height:calc(16px * var(--u));
  transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,#b9b2a6,#5a544c)}
.p-head{font:400 calc(64px * var(--u))/1 var(--display);letter-spacing:.06em;margin-top:calc(14px * var(--u))}
.p-sub{font:italic calc(17px * var(--u))/1.2 var(--serif);margin-top:calc(2px * var(--u))}
.p-portrait{width:calc(210px * var(--u));height:calc(210px * var(--u));margin:calc(10px * var(--u)) 0;
  border:calc(3px * var(--u)) solid #3a1d12;background:#e9d6a8;filter:sepia(.75) contrast(1.15) saturate(.9)}
.p-name{font:400 calc(35px * var(--u))/1 var(--display);letter-spacing:.02em}
.p-alias{font:italic calc(19px * var(--u))/1.3 var(--serif);margin-top:calc(4px * var(--u))}
.p-crimes{font:calc(15px * var(--u))/1.3 var(--serif);margin:calc(10px * var(--u)) 0 0;max-width:22em}
.p-reward{font:400 calc(30px * var(--u))/1 var(--display);margin-top:auto;border-top:calc(2px * var(--u)) solid #3a1d12;padding-top:calc(8px * var(--u));width:100%}
.p-small{font:italic calc(15px * var(--u))/1.2 var(--serif)}

#card,#endcard{display:grid;place-content:center;text-align:center;gap:calc(16px * var(--u));background:rgba(5,4,8,.94);padding:0 10%}
#card h2,#endcard h2{margin:0;font:400 calc(84px * var(--u))/1 var(--display);color:#fff1d2;text-wrap:balance}
#card p,#endcard p{margin:0 auto;max-width:34em;font:italic max(14px, calc(28px * var(--u)))/1.35 var(--serif);color:#e9cf9a}
#endcard .t-actions{justify-content:center}
#rotate{position:absolute;left:50%;top:calc(-1 * max(34px, 8vw));transform:translateX(-50%);white-space:nowrap;font:700 14px var(--body);color:#e9cf9a}
@media (orientation:landscape){#rotate{display:none}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---------- Poydower senza cappello (quando lo perde a carte) ---------- */
.nohat .hat{display:none}

/* ---------- fontana della piazza ---------- */
.water path{stroke-dasharray:6 8;animation:water .6s linear infinite}
@keyframes water{to{stroke-dashoffset:-14}}
.ripple ellipse{animation:ripple 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.ripple ellipse:nth-child(2){animation-delay:.8s}.ripple ellipse:nth-child(3){animation-delay:1.6s}
@keyframes ripple{50%{transform:scale(1.5);opacity:.2}}

/* ---------- barra del volume ---------- */
#volPanel{position:absolute;right:calc(18px * var(--u));top:calc(18px * var(--u) + var(--b) + 10px);pointer-events:auto;
  display:flex;align-items:center;gap:.6em;padding:.55em .8em;border-radius:calc(12px * var(--u));
  background:linear-gradient(#f1e0b6,#dcc28a);color:var(--tar);border:2px solid #7b5a30;box-shadow:0 8px 24px rgba(0,0,0,.55);
  font:700 max(13px, calc(22px * var(--u)))/1 var(--body)}
#volPanel input{width:max(130px, calc(260px * var(--u)));accent-color:#8a5d17;height:28px;cursor:pointer}
#volPct{min-width:3em;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- mini-gioco delle tre carte ---------- */
#cards{background:rgba(10,6,8,.74);transition:opacity .3s;animation:cgIn .3s ease}
#cards.out{opacity:0}
@keyframes cgIn{from{opacity:0}}
.cg-table{position:absolute;left:50%;top:54%;width:calc(760px * var(--u));height:calc(380px * var(--u));transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#a8723f,#7a4a2a 65%,#4a2c18);box-shadow:0 0 0 calc(10px * var(--u)) #3a2416, 0 30px 60px rgba(0,0,0,.6)}
.cg-row{position:absolute;inset:0;perspective:900px}
.cg-card{position:absolute;left:50%;top:54%;width:calc(130px * var(--u));height:calc(182px * var(--u));
  margin-left:calc(-65px * var(--u));margin-top:calc(-91px * var(--u));transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .35s ease}
.cg-card:disabled{cursor:default}
.cg-face,.cg-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:calc(12px * var(--u));box-shadow:0 6px 12px rgba(0,0,0,.45)}
.cg-card:not(:disabled):hover .cg-back{box-shadow:0 0 0 3px rgba(227,179,76,.9),0 0 18px rgba(227,179,76,.8)}
.cg-back{transform:rotateY(180deg)}
.cg-face svg,.cg-back svg{width:100%;height:100%;display:block}
.cg-cap{position:absolute;left:0;right:0;top:calc(52px * var(--u));text-align:center;color:#fff1d2;
  font:400 max(18px, calc(44px * var(--u)))/1.1 var(--display);text-shadow:0 3px 0 #000}
.cg-foot{position:absolute;left:0;right:0;bottom:calc(36px * var(--u));display:flex;justify-content:center}
.cg-accuse{font:800 max(14px, calc(26px * var(--u)))/1 var(--body);padding:.7em 1.2em;border-radius:999px;
  background:var(--gold);color:var(--tar);box-shadow:0 calc(4px * var(--u)) 0 #8a5d17, 0 10px 24px rgba(0,0,0,.35);animation:pulse 1.4s ease infinite}

/* ---------- effetti grafici (PixiJS) ---------- */
.fx{position:absolute;inset:0;width:100%!important;height:100%!important;pointer-events:none}
.fx-light{mix-blend-mode:multiply}
.fx-glow{mix-blend-mode:screen}
.fx-back{z-index:0}
#scene{z-index:1}
.fx-light,.fx-glow{z-index:2}
#closeup{z-index:3}
.hud{z-index:4}
#fade,.overlay:not(#closeup){z-index:5}

/* ---------- vista ravvicinata (manifesto, mappa...) ---------- */
#closeup{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,rgba(30,18,14,.82),rgba(5,3,6,.96));
  opacity:0;transition:opacity .35s;pointer-events:auto}
#closeup.show{opacity:1}
#closeup .cu-stage{transform:scale(.9);transition:transform .45s cubic-bezier(.2,.8,.3,1.1);margin-top:calc(-90px * var(--u))}
#closeup.show .cu-stage{transform:scale(1)}
#closeup .poster{transform:rotate(-1.5deg) scale(.92)}
#closeup .cu-map{width:calc(860px * var(--u));max-width:92%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
#speech.closeup{left:50%!important;top:auto!important;bottom:calc(26px * var(--u));transform:translateX(-50%);max-width:80%;
  font-size:max(15px, calc(32px * var(--u)))}

/* Poydower dipinto: varianti del viso e del cappello */
.nohat-img{display:none}
.nohat .withhat{display:none}
.nohat .nohat-img{display:inline}
.nohat .mouthimg,.nohat .lid{display:none}