:root{
  --ink:#f3e6d0;
  --muted:#b7a58f;
  --gold:#e0b25a;
  --gold2:#8a6326;
  --orange:#ff8a1f;
  --purple:#6b3fa0;
  --green:#7dff9a;
  --bg:#0b0612;
  --panel:rgba(18,10,26,.92);
  --serif:"Cormorant Garamond",Georgia,serif;
  --title:"Cinzel",Georgia,serif;
  --creep:"Creepster",cursive;
  --top:52px;
  --inv:96px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--serif);overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img{-webkit-user-drag:none;user-select:none;pointer-events:none}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
.hidden{display:none!important}

/* ---------- SCREENS ---------- */
.screen{container-type:size;position:fixed;left:var(--fx,0px);top:var(--fy,0px);width:var(--fw,100%);height:var(--fh,100%);display:none;opacity:0;transition:opacity .8s ease}
/* cadre commun à tous les écrans */
.stage-blur{position:fixed;inset:-40px;background:url(../img/menu_bg.webp) center/cover no-repeat;filter:blur(24px) brightness(.35) saturate(1.2);display:none}
body.framed .stage-blur{display:block}
body.framed .screen{overflow:hidden;box-shadow:0 0 0 2px var(--gold),0 0 0 5px #120a1a,0 0 0 6px #e0b25a77,0 0 30px 6px #000,0 0 60px #7b2cbf33}
.screen.active{display:block}
.screen.show{opacity:1}

.btn{display:block;min-width:240px;padding:14px 28px;font-family:var(--title);font-size:17px;letter-spacing:.12em;text-transform:uppercase;
  color:#1b0d05;background:linear-gradient(180deg,#ffd27a,#d9902b 55%,#a85e14);border-radius:999px;
  box-shadow:0 0 0 2px #3a1d06,0 0 0 3px #e9b65d55,0 8px 30px rgba(255,120,20,.35),inset 0 2px 0 #fff4;transition:transform .15s,box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.1);box-shadow:0 0 0 2px #3a1d06,0 0 0 3px #ffd27a,0 10px 40px rgba(255,140,30,.6),inset 0 2px 0 #fff6}
.btn:active{transform:scale(.97)}
.btn.ghost{color:var(--ink);background:rgba(30,16,40,.7);box-shadow:0 0 0 1px #e0b25a66,inset 0 0 20px #6b3fa033}
.btn.ghost:hover{box-shadow:0 0 0 1px var(--gold),0 0 30px #6b3fa077}
.btn:disabled{opacity:.35;pointer-events:none}

/* ---------- PRELOADER ---------- */
#preloader{background:radial-gradient(ellipse at 50% 40%,#2a1238 0%,#0b0612 70%);display:block;opacity:1}
.pre-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.pre-pumpkin{position:relative;width:140px;height:140px;filter:drop-shadow(0 0 30px #ff7a1a66)}
.pre-pumpkin img{position:absolute;inset:0;width:140px;height:140px;object-fit:contain}
.pp-base{filter:grayscale(1) brightness(.25)}
.pp-fill{position:absolute;left:0;right:0;bottom:0;height:0%;overflow:hidden;transition:height .25s}
.pp-fill img{top:auto;bottom:0}
.pre-pct{font-family:var(--creep);font-size:64px;color:var(--orange);text-shadow:0 0 20px #ff6a0099,0 4px 0 #3a1406;letter-spacing:.05em}
.pre-bar{width:min(320px,70vw);height:6px;border-radius:6px;background:#ffffff12;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff14}
#preBar{height:100%;width:0;background:linear-gradient(90deg,#7b2cbf,#ff8a1f);box-shadow:0 0 12px #ff8a1f;transition:width .25s}
.pre-label{font-style:italic;color:var(--muted);font-size:18px;min-height:24px}
#preEnter{margin-top:10px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 2px #3a1d06,0 0 0 3px #ffd27a,0 0 50px rgba(255,140,30,.8)}}

/* ---------- SPLASH ---------- */
#splash{background:radial-gradient(ellipse at 50% 45%,#2a1238 0%,#10061a 55%,#030106 100%);overflow:hidden;cursor:pointer}
.sp-glow{position:absolute;left:50%;top:46%;width:120vmin;height:120vmin;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#ff7a1a33,#7b2cbf22 40%,transparent 68%);animation:spGlow 3s ease-in-out infinite alternate}
@keyframes spGlow{to{transform:translate(-50%,-50%) scale(1.12);opacity:.7}}
.sp-moon{position:absolute;right:8%;top:7%;width:16vmin;height:16vmin;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fffbe8,#e9e1c0 60%,#bfb38a);
  box-shadow:0 0 60px 14px #fff3c055,0 0 160px 40px #ffdf8a22;opacity:0;animation:spIn 2s ease-out .3s forwards}
.sp-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vmin}
.sp-frame{position:relative;width:min(80vw,calc(58vh * 1.34),620px);aspect-ratio:791/590;padding:0;border-radius:10px;
  box-shadow:0 0 0 3px #2b1505,0 0 0 9px #c99a4a,0 0 0 11px #5a3b16,0 0 0 14px #1a0c03,0 0 60px 10px #ff7a1a66,0 0 140px 30px #7b2cbf55,0 30px 60px #000;
  opacity:0;transform:scale(1.15);filter:brightness(0);animation:spReveal 2.2s cubic-bezier(.2,.8,.2,1) .9s forwards}
@keyframes spReveal{0%{opacity:0;transform:scale(1.15);filter:brightness(0) blur(8px)}12%{opacity:1;filter:brightness(2.5) blur(2px)}20%{filter:brightness(.3)}30%{filter:brightness(1.8)}100%{opacity:1;transform:none;filter:brightness(1) blur(0)}}
.sp-logo{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px}
.sp-tint{position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,transparent 35%,#1a0628aa 100%),linear-gradient(180deg,#7b2cbf22,transparent 40%,#ff7a1a22);mix-blend-mode:multiply;animation:spFlicker 4s steps(1) infinite 3s}
@keyframes spFlicker{0%,100%{opacity:1}43%{opacity:.6}45%{opacity:1}47%{opacity:.75}}
.sp-corner{position:absolute;width:12%;aspect-ratio:1;pointer-events:none;
  background:conic-gradient(from 180deg at 0 0,transparent 0deg,transparent 360deg);border:0}
.sp-corner::before{content:"";position:absolute;inset:0;
  background:repeating-conic-gradient(from 0deg at 0 0,#ffffffaa 0deg 1deg,transparent 1deg 15deg),radial-gradient(circle at 0 0,transparent 30%,#ffffff55 31%,transparent 33%,transparent 55%,#ffffff44 56%,transparent 58%,transparent 80%,#ffffff33 81%,transparent 83%);
  -webkit-mask:radial-gradient(circle at 0 0,#000 0 92%,transparent 93%);mask:radial-gradient(circle at 0 0,#000 0 92%,transparent 93%);opacity:.75}
.sp-corner.tl{left:0;top:0}
.sp-corner.tr{right:0;top:0;transform:scaleX(-1)}
.sp-corner.bl{left:0;bottom:0;transform:scaleY(-1)}
.sp-corner.br{right:0;bottom:0;transform:scale(-1,-1)}
.sp-present{font-family:var(--creep);font-size:clamp(30px,6vmin,58px);letter-spacing:.12em;color:#ff8a1f;
  text-shadow:0 0 18px #ff5e00aa,0 4px 0 #2b0d02,0 0 50px #7b2cbf;opacity:0;transform:translateY(14px);animation:spText 1.4s ease-out 2.9s forwards}
@keyframes spText{to{opacity:1;transform:none}}
@keyframes spIn{to{opacity:1}}
.sp-pk{position:absolute;bottom:3vmin;width:clamp(70px,15vmin,150px);filter:drop-shadow(0 0 30px #ff7a1a) brightness(1.1);opacity:0;animation:spPk 1.2s ease-out 1.8s forwards,spPkFl 1.4s ease-in-out 3s infinite alternate}
.sp-pk.l{left:4vmin}
.sp-pk.r{right:4vmin;transform:scaleX(-1)}
@keyframes spPk{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@keyframes spPkFl{to{filter:drop-shadow(0 0 50px #ff9a2a) brightness(1.3)}}
.sp-spider{position:absolute;left:18%;top:0;display:flex;flex-direction:column;align-items:center;animation:spDrop 2.6s cubic-bezier(.3,1.4,.5,1) 2.2s both}
.sp-spider i{width:1px;height:22vh;background:linear-gradient(#fff0,#ffffffaa)}
.sp-spider img{width:clamp(36px,7vmin,64px);filter:brightness(.25) drop-shadow(0 0 6px #b98cff);animation:spSwing 2.5s ease-in-out 4.8s infinite alternate;transform-origin:50% -300%}
@keyframes spDrop{from{transform:translateY(-100%)}to{transform:none}}
@keyframes spSwing{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.sp-bats{position:absolute;inset:0;pointer-events:none}
.sp-bats .bat{filter:brightness(0) drop-shadow(0 0 3px #7b2cbf)}
.sp-curtain{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .9s}
#splash.out .sp-curtain{opacity:1}
#splash.flash{animation:spFlash .7s}
@keyframes spFlash{8%{background:#cfd6ff}16%{background:#10061a}24%{background:#8e96c8}}

/* ---------- MENU ---------- */
#menu{background:#05030a}
.menu-bg{position:absolute;inset:-3%;background:url(../img/menu_bg.webp) center/cover;animation:kenburns 40s ease-in-out infinite alternate;filter:saturate(1.1)}
.menu-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,transparent 20%,#05030acc 85%),linear-gradient(transparent 50%,#05030a 100%)}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1%,-1%)}}
.fog{position:absolute;left:-50%;width:200%;height:45%;bottom:-5%;pointer-events:none;opacity:.55;
  background:radial-gradient(ellipse 25% 40% at 20% 60%,#c9b8ff22,transparent 70%),radial-gradient(ellipse 30% 45% at 55% 70%,#ffffff1c,transparent 70%),radial-gradient(ellipse 22% 35% at 85% 55%,#b8c8ff20,transparent 70%);
  animation:fog 38s linear infinite;filter:blur(6px)}
.fog.f2{animation-duration:60s;animation-direction:reverse;bottom:-12%;opacity:.4}
@keyframes fog{from{transform:translateX(0)}to{transform:translateX(25%)}}
.menu-box{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2cqh,14px);padding:20px 20px clamp(82px,14cqh,100px);text-align:center}
.logo{font-family:var(--creep);font-weight:400;font-size:clamp(40px,min(11cqw,13cqh),130px);line-height:.85;color:#ff8a1f;
  text-shadow:0 0 30px #ff5e0080,0 6px 0 #2b0d02,0 0 80px #7b2cbf88;letter-spacing:.04em;animation:logoGlow 4s ease-in-out infinite}
.logo span{display:block;color:#b98cff;text-shadow:0 0 30px #7b2cbfaa,0 6px 0 #1a0630}
.logo.small{font-size:clamp(40px,min(9cqw,12cqh),96px)}
.logo .logo-esc{color:#ff8a1f;font-size:.6em;letter-spacing:.08em;margin-top:.1em;text-shadow:0 0 24px #ff8a1f88,0 5px 0 #2a0f00}
@keyframes logoGlow{50%{filter:brightness(1.2) drop-shadow(0 0 12px #ff8a1f66)}}
.menu-sub{font-family:var(--title);letter-spacing:.3em;text-transform:uppercase;font-size:clamp(10px,1.6cqw,13px);color:var(--muted);margin-bottom:clamp(6px,2.5cqh,18px)}
.menu-btns{display:flex;flex-direction:column;gap:clamp(8px,2cqh,14px);align-items:center}

/* crédits & partenaire */
.credit{position:absolute;left:clamp(10px,2cqmin,24px);bottom:clamp(10px,2cqmin,24px);z-index:3;display:flex;flex-direction:column;line-height:1;
  padding:clamp(6px,1.2cqmin,10px) clamp(10px,2cqmin,18px) clamp(7px,1.4cqmin,12px);border-radius:14px;background:linear-gradient(180deg,#140a1ecc,#0b0612ee);box-shadow:0 0 0 1px #e0b25a55,0 0 24px #7b2cbf44,0 8px 24px #000a}
.cr-dev{font-family:var(--title);font-size:clamp(8px,1.1cqw,12px);letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.cr-name{font-family:var(--creep);font-size:clamp(20px,3cqw,36px);letter-spacing:.06em;margin-top:4px;
  background:linear-gradient(180deg,#ffd27a,#ff8a1f 45%,#c4410f);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px #ff6a0099) drop-shadow(0 3px 0 #2b0d02);animation:crGlow 3s ease-in-out infinite}
@keyframes crGlow{50%{filter:drop-shadow(0 0 18px #ff8a1fcc) drop-shadow(0 0 30px #7b2cbf88) drop-shadow(0 3px 0 #2b0d02)}}
.weg{display:block;transition:transform .25s,filter .25s;filter:drop-shadow(0 0 10px #7b2cbf88) drop-shadow(0 6px 10px #000c)}
.weg img{display:block;width:100%;height:auto;pointer-events:none}
.weg:hover{transform:translateY(-3px) scale(1.04);filter:drop-shadow(0 0 16px #ff8a1fcc) drop-shadow(0 6px 10px #000c)}
/* logo partenaire : taille et ancrage liés au cadre de l'écran, pas à la fenêtre */
.menu-weg{position:absolute;right:clamp(10px,2cqmin,24px);bottom:clamp(10px,2cqmin,24px);z-index:3;width:clamp(100px,15cqw,190px)}
.inv-weg{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:clamp(140px,15vw,230px);max-height:calc(var(--inv) - 8px)}
.inv-weg img{max-height:calc(var(--inv) - 8px);width:auto;max-width:100%;margin-left:auto}
.inv-weg:hover{transform:translateY(-50%) scale(1.05)}
.inventory{padding-right:clamp(155px,16.5vw,250px)!important;padding-left:clamp(155px,16.5vw,250px)!important}
@media (max-width:700px){
  .inventory{padding-left:6px!important;padding-right:112px!important}
  .inv-weg{width:104px;right:4px}
}

/* ---------- STORY ---------- */
#story{background:#000}
.story-bg{position:absolute;inset:0;background:url(../img/menu_bg.webp) center/cover;opacity:.18;filter:blur(2px) grayscale(.4)}
.story-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8vw;text-align:center;
  font-size:clamp(20px,3vw,34px);line-height:1.45;font-style:italic;color:#eadbc4;text-shadow:0 0 20px #000}
.story-text p{opacity:0;transition:opacity 1.4s ease,transform 1.4s ease;transform:translateY(10px);max-width:900px}
.story-text p.in{opacity:1;transform:none}
.story-text b{font-style:normal;color:var(--orange);font-family:var(--title);font-weight:700}
.story-skip{position:absolute;right:20px;bottom:20px;font-family:var(--title);letter-spacing:.15em;color:var(--muted);font-size:14px;padding:10px 16px;border:1px solid #ffffff22;border-radius:999px}
.story-skip:hover{color:var(--ink);border-color:var(--gold)}

/* ---------- GAME LAYOUT ---------- */
#game{background:#000}
.topbar{position:absolute;left:0;right:0;top:0;height:var(--top);display:flex;align-items:center;gap:10px;padding:0 10px;
  background:linear-gradient(180deg,#140a1ef2,#0b0612e0);border-bottom:1px solid #e0b25a33;z-index:20}
.room-name{flex:1;font-family:var(--title);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:15px;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-right{display:flex;align-items:center;gap:8px}
.tb-btn{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:19px;color:var(--ink);
  background:#2a173a;box-shadow:0 0 0 1px #e0b25a55;transition:.2s}
.tb-btn:hover{box-shadow:0 0 0 1px var(--gold),0 0 16px #e0b25a66;color:#fff}
.tb-btn.hint{background:radial-gradient(circle,#ffb347,#c4610f);color:#2b0d02;font-family:var(--title);font-weight:700;box-shadow:0 0 0 1px #ffd27a,0 0 18px #ff8a1f88}
.bars,.bars::before,.bars::after{display:block;width:16px;height:2px;border-radius:2px;background:currentColor;position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0}.bars::before{top:-5px}.bars::after{top:5px}
.tb-btn .dot{position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange)}
.chrono{font-family:var(--title);font-size:14px;color:var(--muted);min-width:58px;text-align:right;letter-spacing:.05em}
.seals{display:flex;gap:3px}
.seals img{width:22px;height:22px;object-fit:contain;filter:grayscale(1) brightness(.35);transition:.5s}
.seals img.on{filter:none}

.stage-wrap{position:absolute;left:0;right:0;top:var(--top);bottom:var(--inv);overflow:hidden;display:flex;align-items:center;justify-content:center;background:#000}
.stage-wrap.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x;scroll-behavior:auto;overflow-y:hidden;justify-content:flex-start;scrollbar-width:none}
.stage-wrap.scroll::-webkit-scrollbar{display:none}
.stage{position:relative;flex:none;overflow:hidden;transform-origin:center}

.stage .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;transition:opacity .5s}
.layer{position:absolute;inset:0}
#fxCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,#000a 100%)}
.dark{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.5s}
.stage.fade .bg,.stage.fade .layer{opacity:0}
.layer{transition:opacity .5s}
.stage.shake{animation:shake .5s}
@keyframes shake{20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(4px,-2px)}}

/* défilement mobile */
.pan{position:absolute;top:calc(var(--top) + (100% - var(--top) - var(--inv)) / 2);transform:translateY(-50%);z-index:15;width:44px;height:72px;
  font-size:40px;line-height:1;color:#ffd27a;background:#0b0612b8;box-shadow:0 0 0 1px #e0b25a77,0 0 18px #000;backdrop-filter:blur(3px);transition:opacity .25s}
.pan.l{left:0;border-radius:0 16px 16px 0}
.pan.r{right:0;border-radius:16px 0 0 16px}
.pan:active{background:#2a173ae0}
.pan.off{opacity:0;pointer-events:none}
.pan-hint{position:absolute;left:50%;top:calc(var(--top) + 12px);transform:translateX(-50%);z-index:16;pointer-events:none;white-space:nowrap;
  padding:8px 16px;border-radius:999px;background:#140a1ef0;box-shadow:0 0 0 1px #e0b25a77;font-family:var(--title);font-size:13px;color:var(--ink);animation:hintFade 5s ease forwards}
@keyframes hintFade{0%,80%{opacity:1}100%{opacity:0}}

/* hotspots & overlays */
.hs{position:absolute;cursor:pointer;border-radius:14px;transition:box-shadow .25s,background .25s}
.hs.round{border-radius:50%}
.ov{position:absolute;pointer-events:none;object-fit:contain;filter:drop-shadow(0 6px 8px #000c)}
.ov.dim{filter:brightness(.62) saturate(.8) drop-shadow(0 6px 6px #000c)}
.ov.click{pointer-events:auto;cursor:pointer}
.ov.glow{filter:drop-shadow(0 4px 6px #000)}
.ov.socket{filter:drop-shadow(0 0 4px #000);animation:sockIn .9s ease-out}
@keyframes sockIn{from{transform:scale(2.2);opacity:0}to{transform:none;opacity:1}}
.ov.float{animation:floaty 3s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-6px)}}
.nav{position:absolute;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;cursor:pointer;font-family:var(--title);font-size:clamp(11px,1.15vw,15px);letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:#0b0612b0;box-shadow:0 0 0 1px #e0b25a77,0 4px 16px #000a;backdrop-filter:blur(3px);transition:.2s;white-space:nowrap;animation:navPulse 3s ease-in-out infinite}
.nav:hover{background:#2a173ae0;box-shadow:0 0 0 1px var(--gold),0 0 18px #e0b25a88}
.nav .ar{font-size:1.4em;line-height:1;color:var(--gold)}
.nav.locked .ar{color:#c55}
@keyframes navPulse{50%{box-shadow:0 0 0 1px #e0b25acc,0 4px 22px #e0b25a44}}
.reveal-text{position:absolute;font-family:var(--creep);color:#9dff7a;text-shadow:0 0 12px #5dff3a,0 0 30px #2fbf18;pointer-events:none;text-align:center;animation:revealIn 2.5s ease-out}
@keyframes revealIn{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}
.glowspot{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;animation:glowp 2.4s ease-in-out infinite alternate}
@keyframes glowp{from{opacity:.55}to{opacity:1}}
.chainlock{position:absolute;pointer-events:none;border-radius:50%;box-shadow:0 0 30px 6px #a35dff99,inset 0 0 20px #a35dff;animation:glowp 1.8s ease-in-out infinite alternate;mix-blend-mode:screen}

/* ---------- INVENTORY ---------- */
.inventory{position:absolute;left:0;right:0;bottom:0;height:var(--inv);display:flex;flex-direction:column;z-index:20;
  background:linear-gradient(0deg,#0b0612,#1a0e24);border-top:1px solid #e0b25a44;box-shadow:0 -10px 30px #000a;padding:4px 10px 6px}
.inv-info{height:22px;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--title);font-size:13px;letter-spacing:.08em;color:var(--gold)}
.mini-btn{font-family:var(--title);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:999px;color:var(--ink);box-shadow:0 0 0 1px #e0b25a77;background:#2a173a}
.mini-btn:hover{box-shadow:0 0 0 1px var(--gold),0 0 10px #e0b25a77}
.inv-row{flex:1;min-height:0;display:flex;align-items:center;gap:4px}
.inv-slots{position:relative;flex:1;min-width:0;height:100%;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;align-items:center;justify-content:flex-start;scrollbar-width:none;padding:0 4px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.inv-slots>.slot:first-child{margin-left:auto}
.inv-slots>.slot:last-child{margin-right:auto}
.inv-arr{flex:none;width:30px;height:56px;border-radius:10px;font-size:30px;line-height:1;color:#ffd27a;background:#2a173a;box-shadow:0 0 0 1px #e0b25a77;transition:opacity .2s}
.inv-arr:active{background:#3d2352}
.inv-arr.off{opacity:.25;pointer-events:none}
.inv-slots::-webkit-scrollbar{display:none}
.slot{flex:none;width:62px;height:62px;border-radius:12px;position:relative;cursor:pointer;
  background:radial-gradient(circle at 50% 40%,#3a2350,#1a0e24 75%);box-shadow:inset 0 0 0 1px #e0b25a40,inset 0 -6px 12px #0008;transition:transform .15s,box-shadow .2s}
.slot.empty{cursor:default;opacity:.45}
.slot img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain;filter:drop-shadow(0 3px 4px #000)}
.slot:not(.empty):hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--gold),0 0 14px #e0b25a55}
.slot.sel{box-shadow:inset 0 0 0 2px #ffd27a,0 0 20px #ff8a1f;transform:translateY(-4px)}
.slot.new{animation:newItem 1.2s ease-out}
@keyframes newItem{0%{transform:scale(.3)}50%{transform:scale(1.25);box-shadow:0 0 30px #ffd27a}100%{transform:none}}

.cursor-item{position:fixed;width:54px;height:54px;pointer-events:none;z-index:60;transform:translate(8px,8px);filter:drop-shadow(0 3px 4px #000)}
.cursor-item img{width:100%;height:100%;object-fit:contain}
@media (hover:none){.cursor-item{display:none!important}}

/* ---------- DIALOG ---------- */
.dialog{position:absolute;left:50%;bottom:calc(var(--inv) + 12px);transform:translateX(-50%);width:min(760px,94vw);z-index:30;
  display:flex;gap:14px;align-items:center;padding:12px 18px 12px 12px;border-radius:18px;cursor:pointer;
  background:linear-gradient(180deg,#1d1030f2,#0e0718f2);box-shadow:0 0 0 1px #e0b25a66,0 10px 40px #000c,0 0 40px #6b3fa055;animation:dlgIn .35s ease-out}
@keyframes dlgIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
.dlg-avatar{flex:none;width:76px;height:76px;border-radius:50%;background:#0b0612 center/cover no-repeat;box-shadow:0 0 0 2px #e0b25a88,0 0 20px #7fd4ff66}
.dlg-avatar.edgar{background-image:url(../img/edgar.webp);background-size:115%;background-position:50% 30%;animation:ghostB 3s ease-in-out infinite}
.dlg-avatar.morgane{background-image:url(../img/morgane.webp);background-size:230%;background-position:50% 8%;box-shadow:0 0 0 2px #9dff7a,0 0 26px #5dff3a99}
.dlg-avatar.narr{background-image:url(../img/candle_lit.webp);background-size:70%;background-color:#1a0e24}
@keyframes ghostB{50%{box-shadow:0 0 0 2px #e0b25a88,0 0 34px #7fd4ffaa}}
.dlg-body{flex:1;min-width:0}
.dlg-name{font-family:var(--title);font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-size:13px;color:var(--gold);margin-bottom:3px}
.dlg-text{font-size:clamp(17px,1.9vw,21px);line-height:1.35;min-height:2.6em}
.dlg-text em{color:#ffcf6b;font-style:normal;font-weight:700}
.dlg-next{position:absolute;right:14px;bottom:6px;font-size:11px;color:var(--gold);animation:bob 1s infinite}
@keyframes bob{50%{transform:translateY(3px)}}

.toast{position:absolute;left:50%;top:calc(var(--top) + 14px);transform:translate(-50%,-20px);opacity:0;z-index:40;pointer-events:none;
  padding:10px 20px;border-radius:999px;background:#140a1ef0;box-shadow:0 0 0 1px #e0b25a77,0 0 30px #ff8a1f44;font-family:var(--title);font-size:14px;letter-spacing:.06em;color:var(--ink);transition:.4s;display:flex;align-items:center;gap:10px;white-space:nowrap}
.toast img{width:34px;height:34px;object-fit:contain}
.toast.show{opacity:1;transform:translate(-50%,0)}
.tip{position:fixed;z-index:45;pointer-events:none;padding:4px 10px;border-radius:8px;background:#0b0612e0;box-shadow:0 0 0 1px #e0b25a55;font-family:var(--title);font-size:12px;letter-spacing:.08em;color:var(--gold);opacity:0;transition:opacity .15s;transform:translate(-50%,-140%)}
.tip.show{opacity:1}
@media (hover:none){.tip{display:none}}

#flash{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:0;background:#e8eeff}
#flash.go{animation:flash .9s ease-out}
@keyframes flash{0%{opacity:0}8%{opacity:.85}16%{opacity:.1}24%{opacity:.6}100%{opacity:0}}
#flash.white{background:#fff}
#flash.green{background:#7dff9a}
#flash.red{background:#ff2a2a}

/* bats */
.bat{position:absolute;width:46px;height:30px;pointer-events:none;z-index:5;filter:brightness(0) drop-shadow(0 0 2px #0008)}
.bat img{width:100%;height:100%;object-fit:contain;animation:flap .18s linear infinite alternate}
@keyframes flap{to{transform:scaleY(.35)}}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#05020acc;backdrop-filter:blur(4px);animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}}
.modal-panel{position:relative;max-width:96vw;max-height:94vh;max-height:94dvh;overflow:auto;padding:18px 18px 20px;border-radius:20px;
  background:linear-gradient(180deg,#1d1030,#0e0718);box-shadow:0 0 0 1px #e0b25a77,0 0 0 6px #0e0718,0 0 0 7px #e0b25a33,0 20px 80px #000;animation:popIn .35s cubic-bezier(.2,1.4,.4,1);scrollbar-width:thin}
.modal-panel.small{min-width:300px;text-align:center}
@keyframes popIn{from{transform:scale(.85);opacity:0}}
.modal-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:#2a173a;box-shadow:0 0 0 1px #e0b25a77;font-size:16px;z-index:5}
.modal-close:hover{box-shadow:0 0 0 1px var(--gold),0 0 14px #e0b25a77}
.modal-title{font-family:var(--title);font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-size:clamp(15px,2vw,20px);color:var(--gold);text-align:center;margin:2px 44px 14px}
.modal-body{display:flex;flex-direction:column;align-items:center;gap:14px}
.cu{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #e0b25a55,0 10px 30px #000;background:#000 center/cover no-repeat;flex:none}
.cu.w169{width:min(86vw,calc(70vh * 1.777),900px);aspect-ratio:16/9}
.cu.w11{width:min(86vw,64vh,600px);aspect-ratio:1}
.cu.w34{width:min(80vw,calc(68vh * .75),480px);aspect-ratio:3/4}
.cu .abs{position:absolute}
.cap{font-size:clamp(16px,1.9vw,20px);text-align:center;max-width:720px;line-height:1.4;color:#e8d8c0}
.cap em{color:#ffcf6b;font-style:normal;font-weight:700}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pbtn{padding:10px 16px;border-radius:12px;font-family:var(--title);font-size:13px;letter-spacing:.08em;background:#2a173a;box-shadow:0 0 0 1px #e0b25a77;transition:.15s}
.pbtn:hover{box-shadow:0 0 0 1px var(--gold),0 0 14px #e0b25a77}
.pbtn:active{transform:scale(.95)}
.solved-glow{animation:solvedGlow 1.2s ease-out}
@keyframes solvedGlow{0%{box-shadow:0 0 0 1px #e0b25a55}40%{box-shadow:0 0 0 3px #ffd27a,0 0 60px #ffcf6b}100%{box-shadow:0 0 0 1px #e0b25a55}}
.wrong{animation:wrongShake .45s}
@keyframes wrongShake{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

/* examine */
.exam-img{width:min(60vw,300px);height:min(60vw,300px);object-fit:contain;filter:drop-shadow(0 10px 20px #000);animation:floaty 3s ease-in-out infinite}

/* parchment */
.parch{position:relative;width:min(88vw,620px);padding:clamp(22px,4vw,44px);border-radius:6px;color:#3a2412;
  background:url(../img/parchment.webp) center/cover;box-shadow:0 10px 40px #000;font-size:clamp(17px,2vw,21px);line-height:1.5}
.parch h3{font-family:var(--title);font-size:clamp(17px,2.2vw,22px);text-align:center;margin-bottom:12px;color:#5a2410}
.parch p{margin-bottom:10px}
.parch .script{font-style:italic}
.parch .syms{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:12px 0}
.parch .syms img{width:clamp(38px,7vw,58px);height:clamp(38px,7vw,58px);object-fit:contain;filter:sepia(1) brightness(.45) contrast(1.4)}
.parch .pg{text-align:center;font-family:var(--title);font-size:13px;margin-top:6px;opacity:.7}
.parch.burn{animation:none}

/* wheels (padlock, codes) */
.wheels{position:absolute;display:flex;gap:2%;justify-content:center;align-items:center;padding:1.2% 2%;border-radius:12px;
  background:linear-gradient(180deg,#5a3b16,#2c1a08);box-shadow:0 0 0 2px #c99a4a,0 0 0 4px #2c1a08,0 10px 30px #000c,inset 0 4px 10px #0008}
.wheel{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.wheel .w-face{width:clamp(44px,8vw,86px);height:clamp(52px,9vw,96px);border-radius:8px;display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(180deg,#1a0e05,#3d2810 30%,#4d3414 50%,#3d2810 70%,#1a0e05);box-shadow:inset 0 0 0 1px #000,inset 0 0 12px #000c;transition:transform .12s}
.wheel .w-face:active{transform:scale(.95)}
.wheel .w-face img{width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 2px 2px #000)}
.wheel .w-face span{font-family:var(--title);font-weight:700;font-size:clamp(26px,5vw,52px);color:#ffd98a;text-shadow:0 2px 0 #000,0 0 10px #ff9a2a77}
.wheel .w-arr{font-size:clamp(14px,2vw,20px);color:#ffd27a;width:100%;text-align:center;padding:2px 0;cursor:pointer;opacity:.8}
.wheel .w-arr:hover{opacity:1;text-shadow:0 0 8px #ffd27a}
.w-face.roll{animation:roll .2s}
@keyframes roll{from{transform:translateY(-14%);filter:blur(2px)}}

/* clock */
.hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:6px;pointer-events:none;transition:transform .25s ease-out}
.hand.h{width:2.4%;height:21%;margin-left:-1.2%;background:linear-gradient(90deg,#1a0e05,#3b2410,#1a0e05);box-shadow:0 0 0 1px #0006,2px 4px 6px #0008}
.hand.m{width:1.6%;height:31%;margin-left:-.8%;background:linear-gradient(90deg,#1a0e05,#4b3010,#1a0e05);box-shadow:0 0 0 1px #0006,2px 4px 6px #0008}
.hand.h::after,.hand.m::after{content:"";position:absolute;left:50%;top:-6%;width:260%;height:16%;transform:translateX(-50%) rotate(45deg);background:inherit}
.pin{position:absolute;left:50%;top:49%;width:4%;height:4%;margin:-2% 0 0 -2%;border-radius:50%;background:radial-gradient(#ffd27a,#7a5520);box-shadow:0 0 6px #000}

/* candles puzzle */
.cdl{position:absolute;width:15%;height:22%;transform:translate(-50%,-80%);cursor:pointer}
.cdl img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .3s}
.cdl .lit{opacity:0}
.cdl.on .lit{opacity:1}
.cdl.on::before{content:"";position:absolute;left:50%;top:5%;width:180%;height:120%;transform:translate(-50%,-30%);border-radius:50%;background:radial-gradient(#ffb34788,transparent 60%);mix-blend-mode:screen;animation:glowp 1.2s infinite alternate}
.penta-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 52%,#ff7a1a00 30%,transparent 60%);transition:1s}
.penta-glow.on{background:radial-gradient(circle at 50% 52%,#ff9a3a66,transparent 60%)}

/* jars / bells / books */
.jars{display:flex;gap:clamp(4px,1vw,12px);justify-content:center;flex-wrap:wrap}
.jar{width:clamp(72px,12vw,110px);display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:6px 4px;border-radius:12px;transition:.15s}
.jar:hover{background:#ffffff0d;transform:translateY(-3px)}
.jar img{width:80%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 4px 6px #000)}
.jar span{font-size:clamp(12px,1.4vw,15px);text-align:center;line-height:1.1;color:#e8d8c0}
.jar.used{opacity:.35;pointer-events:none}
.brew{position:absolute;left:50%;top:48%;width:40%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;mix-blend-mode:screen;opacity:.0;transition:background 1s,opacity 1s}
.bubbles{position:absolute;left:50%;top:48%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;pointer-events:none}
.bubbles i{position:absolute;bottom:12%;width:6%;aspect-ratio:1;border-radius:50%;background:#ffffff55;opacity:0;animation:bub 2.4s ease-in infinite}
@keyframes bub{0%{transform:translateY(0) scale(.4);opacity:0}20%{opacity:.9}100%{transform:translateY(-1000%) scale(1.1);opacity:0}}
.steps{display:flex;gap:8px;justify-content:center}
.steps i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px #e0b25a88;background:#0b0612}
.steps i.on{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.bells{display:flex;gap:clamp(6px,1.5vw,16px);justify-content:center;flex-wrap:wrap}
.bell{width:clamp(56px,10vw,86px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:radial-gradient(circle at 40% 35%,#ffe9a8,#c99a4a 45%,#5a3b16);box-shadow:0 0 0 2px #2c1a08,0 6px 14px #000a;transition:transform .1s}
.bell img{width:62%;height:62%;object-fit:contain;filter:brightness(.35) sepia(1)}
.bell.ringing{animation:bellRing .35s}
@keyframes bellRing{30%{transform:scale(1.15) rotate(-8deg);box-shadow:0 0 0 2px #2c1a08,0 0 30px #ffd27a}70%{transform:rotate(6deg)}}
.ballerina{position:absolute;left:45%;top:28%;width:8%;height:30%;border-radius:40%;pointer-events:none}
.ballerina.spin{animation:spin 1.2s linear infinite;background:radial-gradient(#ffd27a55,transparent 70%)}
@keyframes spin{to{transform:rotateY(360deg)}}
.book{position:absolute;bottom:17%;width:11%;height:36%;cursor:pointer;transition:transform .25s,left .35s,filter .2s}
.book img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px #000)}
.book:hover{transform:translateY(-3%)}
.book.sel{transform:translateY(-9%);filter:drop-shadow(0 0 14px #ffd27a)}

/* symbol overlays on closeups */
.paint{position:absolute;transform:translate(-50%,-50%);object-fit:contain;filter:sepia(1) saturate(2.2) hue-rotate(-20deg) brightness(.55) contrast(1.3);opacity:.8;mix-blend-mode:multiply}
.fog-sym{position:absolute;transform:translate(-50%,-50%) scaleX(-1);object-fit:contain;filter:brightness(0) invert(1) blur(1.2px);opacity:.5;mix-blend-mode:screen}
.fog-txt{position:absolute;transform:translate(-50%,-50%) scaleX(-1);font-family:var(--creep);color:#fff;opacity:.45;filter:blur(1px);letter-spacing:.1em}
.ring{position:absolute;transform:translate(-50%,-50%);border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:radial-gradient(circle,#4a4a52,#26262c 70%);box-shadow:inset 0 0 0 3px #77777f,inset 0 0 20px #000,0 0 0 2px #111;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.ring img{width:62%;height:62%;object-fit:contain;filter:grayscale(1) brightness(1.4) drop-shadow(0 0 6px #7dff9a)}
.ring.ok{box-shadow:inset 0 0 0 3px #7dff9a,inset 0 0 20px #000,0 0 26px #7dff9a}
.mirror-txt{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-4deg);font-family:var(--creep);font-size:clamp(34px,7vw,64px);color:#f4e9ff;letter-spacing:.08em;
  text-shadow:0 0 18px #c9a8ff,0 0 4px #fff;opacity:.85;mix-blend-mode:screen;animation:mirrorIn 3s ease-out}
@keyframes mirrorIn{from{opacity:0;filter:blur(10px)}}
.mirror-ghost{position:absolute;left:50%;top:55%;width:70%;transform:translate(-50%,-50%);opacity:0;mix-blend-mode:screen;animation:scare 2.2s ease-out .3s}
@keyframes scare{10%{opacity:.75;transform:translate(-50%,-50%) scale(1.15)}30%{opacity:.25}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
.mini-clock{position:absolute;border-radius:50%;background:radial-gradient(#fff6df,#d8c49a);box-shadow:0 0 0 3px #6b4a1a,0 0 0 5px #2c1a08,0 4px 8px #000a}
.mini-clock .hand.h{width:5%;height:24%;margin-left:-2.5%}
.mini-clock .hand.m{width:3.5%;height:36%;margin-left:-1.75%}
.mini-clock .tick{position:absolute;left:50%;top:50%;width:2px;height:8%;background:#3b2410;transform-origin:50% 0}
.loupe-view{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 10px #8a6326,0 0 0 13px #2c1a08,0 20px 40px #000c;background:#e9dcc0}

/* ouija */
.ouija{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2%}
.ouija .slots{display:flex;gap:6px;margin-top:2%}
.ouija .slots i{width:clamp(24px,4.2vw,46px);height:clamp(30px,5vw,54px);border-bottom:2px solid #ffd27a;font-family:var(--creep);font-style:normal;font-size:clamp(22px,4vw,44px);display:grid;place-items:center;color:#9dff7a;text-shadow:0 0 10px #5dff3a}
.ouija .letters{display:grid;grid-template-columns:repeat(9,1fr);gap:clamp(2px,.6vw,8px);width:82%}
.ouija .letters b{font-family:var(--creep);font-weight:400;font-size:clamp(20px,3.6vw,40px);text-align:center;cursor:pointer;color:#f2d79a;text-shadow:0 2px 0 #000,0 0 8px #ff9a2a55;border-radius:50%;transition:.15s}
.ouija .letters b:hover{color:#fff;text-shadow:0 0 14px #ffd27a;transform:scale(1.15)}
.ouija .letters b.on{color:#9dff7a;text-shadow:0 0 14px #5dff3a}

/* notes */
.notes{width:min(88vw,640px);display:flex;flex-direction:column;gap:12px}
.note{padding:12px 16px;border-radius:12px;background:#ffffff08;box-shadow:inset 0 0 0 1px #e0b25a33}
.note h4{font-family:var(--title);color:var(--gold);font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.note p{font-size:17px;line-height:1.4}
.note .syms{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;align-items:center}
.note .syms img{width:38px;height:38px;object-fit:contain}
.note .syms.mir img{transform:scaleX(-1)}
.note .syms b{font-family:var(--title);font-size:22px;color:var(--gold)}
.empty-note{opacity:.6;font-style:italic;text-align:center}

/* morgane apparition */
.morgane-ap{position:absolute;left:50%;top:6%;height:90%;transform:translateX(-50%);pointer-events:none;z-index:6;
  filter:drop-shadow(0 0 30px #5dff3a) drop-shadow(0 0 60px #2fbf18);animation:morg 2.5s ease-out,hover 4s ease-in-out 2.5s infinite}
.morgane-ap.gone{animation:morgGone 2s forwards}
@keyframes morg{from{opacity:0;transform:translateX(-50%) scale(.6);filter:blur(20px)}}
@keyframes hover{50%{transform:translateX(-50%) translateY(-12px)}}
@keyframes morgGone{to{opacity:0;transform:translateX(-50%) scale(1.6) rotate(8deg);filter:blur(30px) brightness(3)}}
.door-light{position:absolute;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,#fff6d0,#ffcf6b 30%,transparent 70%);mix-blend-mode:screen;animation:doorLight 3s ease-out forwards}
@keyframes doorLight{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1.3)}}

/* ---------- ENDING ---------- */
#ending{background:#000}
.end-bg{position:absolute;inset:0;background:url(../img/ending_bg.webp) center/cover;animation:kenburns 30s ease-in-out infinite alternate}
.end-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#0004,#000c 90%)}
.end-box{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2.5cqh,18px);text-align:center;padding:24px 24px clamp(82px,14cqh,110px)}
.end-text{max-width:700px;font-size:clamp(15px,min(2.4cqw,3.4cqh),24px);line-height:1.5;font-style:italic;text-shadow:0 2px 10px #000}
.end-stats{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.end-stats div{padding:clamp(6px,1.6cqh,12px) clamp(12px,2.4cqw,22px);border-radius:14px;background:#0b0612cc;box-shadow:0 0 0 1px #e0b25a77;font-family:var(--title)}
.end-stats b{display:block;font-size:clamp(18px,3.6cqh,26px);color:var(--orange)}
.end-stats span{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:700px){
  :root{--top:46px;--inv:84px}
  .room-name{font-size:12px;letter-spacing:.1em}
  .seals{display:none}
  .chrono{font-size:12px;min-width:44px}
  .tb-btn{width:34px;height:34px;font-size:16px}
  .slot{width:52px;height:52px}
  .dlg-avatar{width:54px;height:54px}
  .dialog{padding:10px 14px 10px 10px;gap:10px}
  .btn{min-width:210px;font-size:15px;padding:12px 22px}
  .modal-panel{padding:14px 10px 16px}
}
/* fenêtre basse (jeu intégré sur un site) : barres compactes pour élargir la scène */
@media (max-height:720px) and (min-width:701px){
  :root{--top:42px;--inv:76px}
  .tb-btn{width:32px;height:32px;font-size:16px}
  .slot{width:52px;height:52px}
  .inv-arr{height:48px}
  .inv-info{height:18px;font-size:12px}
}
@media (max-height:500px){
  :root{--top:40px;--inv:74px}
  .slot{width:48px;height:48px}
  .inv-info{height:18px;font-size:11px}
  .dialog{bottom:calc(var(--inv) + 6px)}
  .dlg-avatar{width:48px;height:48px}
  .dlg-text{font-size:15px;min-height:0}
  .menu-sub{margin-bottom:6px}
  .menu-btns{gap:8px}
  .btn{min-width:200px;font-size:14px;padding:9px 20px}
}