/* 20 Sided Dies: The Mansion
   Layout concept: a full-bleed 1920x1080 "world" scaled to cover the screen, with a thin
   game HUD (inventory tray, sound, map, hints) floating over it like a theatre program. */
:root {
  --ink: #07060a;
  --ink-2: #120d14;
  --bone: #eadfc6;
  --bone-dim: #b9ab90;
  --blood: #b3121f;
  --blood-deep: #6d0a14;
  --ember: #ffa54a;
  --slime: #45f5a8;
  --moon: #b9c7e6;
  --gold: #c9a45c;
  --paper: #e8d9b5;
  --paper-ink: #2b1a10;
  --f-display: 'Pirata One', 'UnifrakturCook', Georgia, serif;
  --f-body: 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --f-type: 'Special Elite', 'Courier New', monospace;
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font-family: var(--f-body); font-size: 18px; overflow: hidden;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; touch-action: none;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* ---------- buttons ---------- */
.btn-gothic {
  font-family: var(--f-display); font-size: clamp(26px, 4vw, 40px); letter-spacing: 0.04em;
  color: var(--bone); background: linear-gradient(#2a0c10, #12060a);
  border: 1px solid #6d3a2a; border-radius: 3px; padding: 0.25em 1.1em 0.32em;
  box-shadow: 0 0 0 4px rgba(0,0,0,.5), 0 0 30px rgba(179,18,31,.35), inset 0 1px 0 rgba(255,200,150,.15);
  cursor: pointer; transition: transform .15s, box-shadow .2s, color .2s;
}
.btn-gothic:hover { color: #fff; box-shadow: 0 0 0 4px rgba(0,0,0,.5), 0 0 46px rgba(255,80,60,.55), inset 0 1px 0 rgba(255,200,150,.2); transform: translateY(-1px); }
.btn-link { background: none; border: 0; color: var(--bone-dim); font-family: var(--f-body); font-size: 17px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 8px; }
.btn-link:hover { color: var(--bone); }

/* ---------- intro ---------- */
.intro { position: fixed; inset: 0; background: #000; z-index: 50; overflow: hidden; transition: opacity .9s; }
.intro.intro-out { opacity: 0; }
.intro-gl, .intro-gl canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.intro-2d { position: absolute; inset: 0; pointer-events: none; }
.intro-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0,0,0,.75) 100%); }
.logo2d { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; transition: opacity .25s; }
.logo2d .lp { position: absolute; display: block; user-select: none; }
.logo2d .lp-base, .logo2d .lp-text, .logo2d .lp-spider, .logo2d .lp-sword, .logo2d .lp-axe, .logo2d .lp-tentacle { filter: drop-shadow(0 14px 10px rgba(0,0,0,.55)); }
.logo2d .lclip { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
.logo2d .lsvg { position: absolute; left: 0; top: 0; overflow: visible; }
.logo2d .ldrops { position: absolute; left: 0; top: 0; }
.ldrop { position: absolute; width: 9px; height: 12px; margin-left: -4px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #e8ffb0, #9be22b 45%, #4f8e10); box-shadow: 0 2px 3px rgba(0,0,0,.4); }
.ldrop.blue { background: radial-gradient(circle at 35% 30%, #bfe0ff, #1f74e0 45%, #0a3c8a); }
.intro-ui { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 16px max(5vh, 28px); box-sizing: border-box; pointer-events: none; }
.intro-ui > * { pointer-events: auto; }
.intro-start { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.intro-warn { margin: 0; font-style: italic; color: var(--bone-dim); letter-spacing: .04em; }
.btn-roll { font-size: clamp(34px, 6vw, 56px); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(0,0,0,.5), 0 0 60px rgba(255,60,50,.55), inset 0 1px 0 rgba(255,200,150,.2); } }
.intro-skip { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
.intro-menu { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: rise 1.2s cubic-bezier(.2,.8,.2,1) both; text-align: center; }
.intro-presents { margin: 0; font-style: italic; color: var(--bone-dim); font-size: 18px; letter-spacing: .2em; text-transform: lowercase; }
.intro-title { margin: 0 0 12px; font-family: var(--f-display); font-weight: 400; font-size: clamp(44px, 7vw, 84px); line-height: 1; color: var(--bone); text-shadow: 0 0 24px rgba(255,120,60,.35), 0 4px 0 #000; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ======================= GAME STAGE ======================= */
#app { position: fixed; inset: 0; }
.stage { position: absolute; inset: 0; overflow: hidden; background: #000; cursor: default; }
.world { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; will-change: transform; }
.scene, .hot-layer { position: absolute; inset: 0; width: 1920px; height: 1080px; }
.scene { overflow: hidden; }
.layer { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }
.scene svg.layer { overflow: visible; }
.fx-canvas { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }
.grain { position: absolute; inset: -50%; pointer-events: none; opacity: .5; mix-blend-mode: overlay; animation: grain 1s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-8%,4%)} 40%{transform:translate(6%,-6%)} 60%{transform:translate(-4%,8%)} 80%{transform:translate(8%,2%)} }
.fader { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .38s; z-index: 5; }
.fader.on { opacity: 1; pointer-events: auto; }

/* hotspots */
.hs { position: absolute; background: transparent; border: 0; padding: 0; margin: 0; cursor: inherit; border-radius: 6px; }
.stage .hs[data-cursor="look"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M3 17s5-9 14-9 14 9 14 9-5 9-14 9S3 17 3 17z' fill='%23120a08' stroke='%23eadfc6' stroke-width='2'/%3E%3Ccircle cx='17' cy='17' r='5' fill='%23ffa54a'/%3E%3C/svg%3E") 17 17, pointer; }
.stage .hs[data-cursor="take"], .stage .hs[data-cursor="use"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M11 30c-3-3-6-8-6-11 0-2 2-2 3-1l3 3V6a2 2 0 014 0v8-10a2 2 0 014 0v10-8a2 2 0 014 0v9-6a2 2 0 014 0v12c0 5-3 10-7 10z' fill='%23eadfc6' stroke='%23120a08' stroke-width='1.6'/%3E%3C/svg%3E") 12 4, pointer; }
.stage .hs[data-cursor="talk"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M4 6h26v16H14l-7 6v-6H4z' fill='%23120a08' stroke='%23eadfc6' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='11' cy='14' r='2' fill='%23ffa54a'/%3E%3Ccircle cx='17' cy='14' r='2' fill='%23ffa54a'/%3E%3Ccircle cx='23' cy='14' r='2' fill='%23ffa54a'/%3E%3C/svg%3E") 6 6, pointer; }
.stage .hs[data-cursor^="exit"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M9 31V8a8 8 0 0116 0v23z' fill='%23120a08' stroke='%23eadfc6' stroke-width='2'/%3E%3Cpath d='M17 26V12m-5 5l5-5 5 5' stroke='%23ffa54a' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 17 17, pointer; }
.stage.holding .hs { cursor: crosshair !important; }
.hs:focus-visible { outline: 2px dashed var(--ember); outline-offset: 2px; }
.hs.ping::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px rgba(255,190,120,.0); animation: ping .5s ease-out; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255,190,120,.6); } 100% { box-shadow: 0 0 0 30px rgba(255,190,120,0); } }
.hot-layer.reveal .hs { animation: reveal 2.6s ease-in-out; }
@keyframes reveal { 0%,100% { box-shadow: none; background: transparent; } 15%,75% { box-shadow: 0 0 0 3px rgba(255,190,120,.85), 0 0 40px rgba(255,170,80,.5); background: rgba(255,190,120,.08); } }
.hs-label { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; font-family: var(--f-body); font-size: 19px; color: var(--bone); background: rgba(10,6,8,.82); border: 1px solid rgba(201,164,92,.45); padding: 5px 12px 6px; border-radius: 3px; white-space: nowrap; translate: -50% -100%; opacity: 0; transition: opacity .15s; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.hs-label.show { opacity: 1; }
.held-item { position: absolute; left: 0; top: 0; width: 46px; height: 46px; pointer-events: none; z-index: 4; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); }
.held-item svg { width: 100%; height: 100%; }

/* shared painted pieces */
.flame { position: absolute; width: calc(14px * var(--s)); height: calc(30px * var(--s)); margin-left: calc(-7px * var(--s)); margin-top: calc(-30px * var(--s)); pointer-events: none; }
.flame i { position: absolute; inset: 0; border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%; background: radial-gradient(ellipse at 50% 75%, #fffbe6 0%, #ffd27a 30%, #ff8a2a 60%, rgba(255,80,0,0) 75%); animation: flame 0.13s infinite alternate; transform-origin: 50% 90%; }
.flame b { position: absolute; left: -200%; top: -150%; width: 500%; height: 400%; border-radius: 50%; background: radial-gradient(circle, rgba(255,170,80,.35), transparent 65%); animation: flameGlow 2.3s infinite; }
@keyframes flame { from { transform: scale(1,1) rotate(-2deg); } to { transform: scale(.92,1.08) rotate(2deg); } }
@keyframes flameGlow { 0%,100% { opacity: .9 } 30% { opacity: .7 } 55% { opacity: 1 } 80% { opacity: .75 } }
.flame.out i, .flame.out b { display: none; }
.glow { position: absolute; pointer-events: none; border-radius: 50%; will-change: opacity; }
.lightning { position: absolute; inset: 0; background: #c8d6ff; opacity: 0; pointer-events: none; }
.bolt { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; opacity: 0; pointer-events: none; }

/* ======================= GATES ======================= */
.sky { background: linear-gradient(#050913 0%, #0c1630 45%, #1d2a4a 75%, #26304c 100%); }
.moon { position: absolute; left: 1290px; top: 120px; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle at 42% 40%, #fffbe8 0%, #f2e8c6 45%, #d7c79c 75%, #b8a87c 100%); box-shadow: inset -18px -12px 40px rgba(120,100,60,.45); }
.moon::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 60%, rgba(150,130,90,.35) 0 9%, transparent 10%), radial-gradient(circle at 62% 30%, rgba(150,130,90,.3) 0 7%, transparent 8%), radial-gradient(circle at 66% 68%, rgba(150,130,90,.25) 0 12%, transparent 13%); }
.moon-glow { position: absolute; left: 1095px; top: -75px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(230,225,190,.32), rgba(150,170,220,.08) 45%, transparent 70%); }
.stars { position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; }
.gates-wrap { perspective: 1400px; }
.gate { position: absolute; top: 0; width: 510px; height: 1080px; transition: transform 2.4s cubic-bezier(.45,.05,.3,1); }
.gate svg { display: block; }
.gate-l { left: 450px; transform-origin: 0 50%; }
.gate-r { left: 960px; transform-origin: 100% 50%; }
.gates-open .gate-l { transform: rotateY(78deg); }
.gates-open .gate-r { transform: rotateY(-78deg); }
.front-doors { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1.1s; perspective: 1600px; background: #000; }
.front-doors.show { opacity: 1; }
.fd-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.fd-light { position: absolute; left: 600px; top: 260px; width: 720px; height: 820px; background: radial-gradient(ellipse at 50% 60%, #ffe2a8 0%, #ff9b45 40%, #5a1d08 100%); opacity: 0; transition: opacity 1.4s .3s; }
.front-doors.open .fd-light { opacity: 1; }
.fd-door { position: absolute; top: 260px; width: 360px; height: 820px; transition: transform 1.8s cubic-bezier(.5,0,.3,1); }
.fd-door svg { width: 100%; height: 100%; display: block; }
.fd-l { left: 600px; transform-origin: 0 50%; }
.fd-r { left: 960px; transform-origin: 100% 50%; }
.front-doors.open .fd-l { transform: rotateY(82deg); }
.front-doors.open .fd-r { transform: rotateY(-82deg); }
.gates-open ~ .invitation { display: none; }

.invitation { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 0 16px max(26px, env(safe-area-inset-bottom)); z-index: 8; pointer-events: none; opacity: 0; transform: translateY(30px); transition: opacity .9s, transform .9s cubic-bezier(.2,.8,.2,1); }
.invitation.show { opacity: 1; transform: none; }
.inv-card { pointer-events: auto; position: relative; max-width: 460px; width: 100%; text-align: center; padding: 22px 26px 24px; color: var(--paper-ink);
  background: radial-gradient(ellipse at 30% 20%, #f3e6c4, #dcc89a 60%, #bfa673); border-radius: 2px;
  box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 0 40px rgba(110,70,20,.35); clip-path: polygon(0 3%, 4% 0, 30% 2%, 60% 0, 96% 1%, 100% 5%, 99% 40%, 100% 75%, 98% 100%, 60% 98%, 25% 100%, 2% 98%, 0 70%, 1% 35%); }
.inv-small { margin: 0; font-style: italic; font-size: 17px; }
.inv-title { margin: 2px 0 6px; font-family: var(--f-display); font-weight: 400; font-size: 52px; line-height: 1; color: #3a0a0e; }
.inv-body { margin: 0 auto 16px; max-width: 34ch; font-size: 16px; line-height: 1.4; }
.inv-enter { font-size: 30px; }
.inv-skip { display: block; margin: 8px auto 0; color: #5a3a1a; }
.inv-seal { position: absolute; right: 18px; top: 14px; margin: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-size: 22px; color: #f3d0b0; background: radial-gradient(circle at 40% 35%, #c0303a, #6d0a14); box-shadow: 0 2px 4px rgba(0,0,0,.4); transform: rotate(-12deg); }

/* ======================= HUD ======================= */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.hud > * { pointer-events: auto; }
.hud-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.hud-logo { background: none; border: 0; padding: 0; cursor: pointer; width: 74px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.7)); transition: transform .2s; }
.hud-logo:hover { transform: rotate(-4deg) scale(1.05); }
.hud-logo img { width: 100%; display: block; }
.hud-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hud-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 52px; padding: 7px 0 4px; background: rgba(12,8,10,.72); border: 1px solid rgba(201,164,92,.35); border-radius: 4px; cursor: pointer; color: var(--bone); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-family: var(--f-body); }
.hud-btn svg { width: 22px; height: 22px; }
.hud-btn:hover { border-color: var(--ember); color: #fff; }
.hud .mute { display: none; }
.hud.muted .mute { display: inline; }
.hud.muted .wave { display: none; }
.ks-pill { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 30px; text-decoration: none; color: #fff; background: linear-gradient(#0a7a4a, #05502f); border: 1px solid #3ee39a; font-size: 15px; box-shadow: 0 0 20px rgba(62,227,154,.25); white-space: nowrap; }
.ks-pill b { font-weight: 400; color: #b9ffd9; }
.ks-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ee39a; box-shadow: 0 0 8px #3ee39a; animation: pulse2 1.6s infinite; }
@keyframes pulse2 { 50% { opacity: .3; } }
.stage[data-scene="gates"] ~ .hud .tray { display: none; }
.tray { position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 28px); box-sizing: border-box; padding: 6px 12px 6px 6px; background: rgba(12,8,10,.8); border: 1px solid rgba(201,164,92,.35); border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.tray.flash { animation: trayflash 1s; }
@keyframes trayflash { 30% { box-shadow: 0 0 0 2px var(--ember), 0 0 40px rgba(255,165,74,.6); } }
.tray-toggle { position: relative; width: 46px; height: 46px; border-radius: 4px; border: 0; background: #2a1810; color: var(--bone); cursor: pointer; display: grid; place-items: center; flex: none; }
.tray-toggle svg { width: 26px; height: 26px; }
.inv-count { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--blood); color: #fff; font-size: 12px; line-height: 18px; text-align: center; font-family: var(--f-body); }
.tray.collapsed .inv-items, .tray.collapsed .inv-empty { display: none; }
.inv-items { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.inv-items li { position: relative; display: flex; flex-direction: column; align-items: center; }
.inv-slot { width: 58px; height: 58px; padding: 6px; border-radius: 4px; background: radial-gradient(circle at 50% 40%, #3a2618, #160d08); border: 1px solid rgba(201,164,92,.35); cursor: pointer; transition: transform .15s; }
.inv-slot svg { width: 100%; height: 100%; display: block; }
.inv-slot:hover { transform: translateY(-2px); border-color: var(--ember); }
.inv-slot.selected { border-color: var(--ember); box-shadow: 0 0 0 2px var(--ember), 0 0 20px rgba(255,165,74,.6); }
.inv-slot.new { animation: newItem 1.2s; }
@keyframes newItem { 0% { transform: scale(.2) rotate(-30deg); } 60% { transform: scale(1.2); } }
.inv-look { font-size: 11px; background: none; border: 0; color: var(--bone-dim); cursor: pointer; padding: 1px 4px; text-decoration: underline; font-family: var(--f-body); }
.inv-empty { margin: 0; font-size: 14px; color: var(--bone-dim); font-style: italic; max-width: 30ch; }
.toasts { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(640px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 6px; align-items: center; z-index: 7; pointer-events: none; }
.toast { background: rgba(10,6,8,.88); border-left: 3px solid var(--ember); padding: 9px 14px; font-size: 17px; line-height: 1.35; color: var(--bone); box-shadow: 0 8px 24px rgba(0,0,0,.5); animation: toastIn .3s; border-radius: 2px; }
.toast.out { opacity: 0; transform: translateY(6px); transition: .5s; }
.toast-item svg { width: 26px; height: 26px; vertical-align: middle; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

/* dialogue */
.dialogue { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; transition: opacity .22s, transform .22s; width: min(860px, calc(100% - 24px)); display: flex; gap: 14px; align-items: flex-end; z-index: 9; }
.dialogue.open { opacity: 1; transform: translate(-50%, 0); }
.dlg-portrait { flex: none; width: 128px; height: 128px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); background: #111; box-shadow: 0 0 30px rgba(0,0,0,.8); }
.dlg-portrait img, .dlg-portrait svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.dlg-body { position: relative; flex: 1; min-width: 0; background: linear-gradient(rgba(18,11,14,.95), rgba(10,6,8,.97)); border: 1px solid rgba(201,164,92,.5); border-radius: 4px; padding: 14px 20px 18px; box-shadow: 0 16px 40px rgba(0,0,0,.7); }
.dlg-name { font-family: var(--f-display); font-size: 26px; color: var(--ember); line-height: 1; margin-bottom: 6px; }
.dlg-text { font-size: 21px; line-height: 1.45; min-height: 3em; color: var(--bone); }
.dialogue[data-who="whisper"] .dlg-text { font-style: italic; color: #cfd8f0; }
.dialogue[data-who="whisper"] .dlg-name { color: #9fb2e0; }
.dlg-next { position: absolute; right: 10px; bottom: 6px; background: none; border: 0; color: var(--ember); font-size: 22px; cursor: pointer; animation: bob 1s infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }
.dlg-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dlg-choice { background: #2a1810; border: 1px solid rgba(201,164,92,.5); color: var(--bone); padding: 8px 14px; border-radius: 3px; cursor: pointer; font-size: 18px; font-family: var(--f-body); text-align: left; }
.dlg-choice:hover, .dlg-choice:focus-visible { border-color: var(--ember); background: #3a2216; }

/* close-ups */
.closeup-layer { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,0); transition: background .25s; overflow-y: auto; }
.closeup-layer.open { background: rgba(0,0,0,.72); }
.closeup { position: relative; width: min(620px, 100%); max-height: calc(100% - 20px); overflow-y: auto; background: linear-gradient(#1c1216, #0e090b); border: 1px solid rgba(201,164,92,.5); border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,.8); transform: scale(.94); opacity: 0; transition: transform .25s, opacity .25s; }
.closeup.wide { width: min(1000px, 100%); }
.closeup-layer.open .closeup { transform: none; opacity: 1; }
.closeup-body { padding: 22px 26px 26px; }
.closeup-title { margin: 0 40px 12px 0; font-family: var(--f-display); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--bone); text-wrap: balance; }
.closeup p { line-height: 1.5; font-size: 18px; }
.closeup-x { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; background: none; border: 0; color: var(--bone-dim); font-size: 30px; cursor: pointer; z-index: 2; }
.closeup-x:hover { color: #fff; }
.btn-plain { background: #2a1810; border: 1px solid rgba(201,164,92,.5); color: var(--bone); padding: 10px 16px; border-radius: 3px; cursor: pointer; font-size: 17px; font-family: var(--f-body); text-align: left; }
.btn-plain:hover { border-color: var(--ember); background: #3a2216; }
.btn-plain.danger { border-color: rgba(220,80,80,.5); }
.btn-plain.primary { background: linear-gradient(#7a1420, #4d0a12); border-color: #c0404a; color: #fff; }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.menu-actions { display: flex; flex-direction: column; gap: 8px; }
.menu-who { margin-top: 0; }
.menu-fine { font-size: 13px !important; color: var(--bone-dim); margin-bottom: 0; }
.tag { font-size: 12px; background: #333; padding: 2px 6px; border-radius: 3px; color: #ccc; }
.item-inspect { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.item-big { width: 160px; height: 160px; flex: none; background: radial-gradient(circle, #3a2618, #120a06 70%); border-radius: 50%; padding: 20px; box-sizing: border-box; }
.item-big svg { width: 100%; height: 100%; }
.item-desc { flex: 1; min-width: 200px; font-size: 18px; line-height: 1.5; }
.map-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.map-floor { margin: 0; background: #e5d4ad; border-radius: 3px; padding: 10px; box-shadow: inset 0 0 30px rgba(90,60,20,.4); }
.map-floor figcaption { font-family: var(--f-display); color: #3a1a0e; font-size: 22px; }
.map-floor svg { width: 100%; height: auto; }
.map-floor .links line { stroke: #6b4a2a; stroke-width: 4; stroke-dasharray: 2 8; stroke-linecap: round; }
.map-floor .room rect { fill: #f2e6c8; stroke: #3a1a0e; stroke-width: 2.5; }
.map-floor .room text { font-family: var(--f-body); font-size: 15px; fill: #2b1a10; text-anchor: middle; }
.map-floor .room.unknown rect { fill: none; stroke-dasharray: 6 5; }
.map-floor .room.here rect { fill: #ffd9a0; stroke: #8b1a10; stroke-width: 4; }
.map-floor .room circle { fill: #b3121f; animation: pulse2 1s infinite; }
.map-key { font-size: 15px !important; color: var(--bone-dim); }
.ks-logo { width: 100%; max-width: 380px; display: block; margin: 0 auto 6px; }
.ok { color: #7ef0b2; }

@media (max-width: 640px) {
  .hud-btn { width: 44px; } .hud-btn span { display: none; } .hud-btn { padding: 9px 0; }
  .ks-pill { height: 36px; font-size: 13px; padding: 0 10px; }
  .ks-long { display: none; }
  .hud-btn { width: 40px; }
  .hud-right { gap: 4px; flex-wrap: nowrap; }
  .hud-logo { width: 54px; }
  .dlg-portrait { width: 72px; height: 72px; }
  .dlg-text { font-size: 18px; }
  .dlg-name { font-size: 22px; }
  .inv-slot { width: 48px; height: 48px; }
  .toasts { bottom: 86px; }
  .toast { font-size: 15px; }
  .inv-empty { display: none; }
  .closeup-body { padding: 18px; }
  .closeup-title { font-size: 28px; }
}

/* ======================= GUESTBOOK ======================= */
.gb-panel.closeup { width: min(1060px, 100%); background: #1a0e08; }
.gb-panel .closeup-title { color: var(--bone); }
.book { display: grid; grid-template-columns: 1fr 1.25fr; gap: 0; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 6px #4a0e14, 0 0 0 9px #2a0608, 0 20px 40px rgba(0,0,0,.6); }
.book-page { background: radial-gradient(ellipse at 30% 20%, #f4e8c8, #e2cfa2 70%, #cdb582); color: var(--paper-ink); padding: 22px 24px; min-width: 0; }
.book-left { border-right: 2px solid #b39a68; box-shadow: inset -20px 0 30px rgba(90,60,20,.25); }
.book-right { box-shadow: inset 20px 0 30px rgba(90,60,20,.25); }
.book-head { font-family: var(--f-display); font-size: 28px; margin: 0 0 12px; color: #3a0a0e; text-align: center; }
.past { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 10px 0; border-bottom: 1px solid rgba(90,60,30,.35); }
.past-name { font-family: var(--f-display); font-size: 22px; color: #2a1408; }
.past-year { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--f-type); font-size: 14px; color: #6a4a2a; }
.past-note { font-style: italic; font-size: 15px; color: #4a3220; }
.past.fresh .past-note { color: #8a6a40; }
.gb-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.gb-tab { background: transparent; border: 1px solid #8a6a40; color: #3a2010; padding: 6px 12px; border-radius: 3px; cursor: pointer; font-family: var(--f-body); font-size: 16px; }
.gb-tab[aria-selected="true"] { background: #3a0a0e; color: #f4e8c8; border-color: #3a0a0e; }
.gb-form { display: flex; flex-direction: column; gap: 10px; }
.gb-form[hidden], .gb-rest[hidden], .gb-under[hidden] { display: none !important; }
.gb-rest { display: flex; flex-direction: column; gap: 10px; }
.gb-mode { margin: 0; font-size: 14px !important; background: rgba(58,10,14,.1); border-left: 3px solid #7a1420; padding: 6px 10px; color: #3a0a0e; }
.gb-field { display: flex; flex-direction: column; gap: 3px; font-size: 15px; color: #3a2010; }
.gb-field i { color: #6a4a2a; }
.gb-field input { font-family: var(--f-type); font-size: 18px; padding: 8px 10px; border: 0; border-bottom: 2px solid #6a4a2a; background: rgba(255,255,255,.35); color: #1a0c04; border-radius: 2px 2px 0 0; }
.gb-field input:focus { outline: none; background: rgba(255,255,255,.6); border-bottom-color: #7a1420; }
.gb-age { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 16px; color: #3a2010; }
.gb-age legend { font-size: 15px; padding: 0; margin-bottom: 3px; width: 100%; }
.gb-check { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 14px; line-height: 1.4; color: #3a2010; }
.gb-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #7a1420; }
.gb-check input:disabled + span { opacity: .5; }
.gb-check.req span { font-size: 15px; }
.linkish { background: none; border: 0; padding: 0; color: #7a1420; text-decoration: underline; cursor: pointer; font: inherit; }
.gb-error { margin: 0; color: #fff; background: #8a1420; padding: 8px 10px; font-size: 15px !important; border-radius: 2px; }
.gb-submit { font-size: 26px; align-self: flex-start; }
.gb-under p { color: #3a2010; }
.gb-done h3 { font-family: var(--f-display); font-weight: 400; font-size: 30px; margin: 0 0 6px; color: #3a0a0e; }
.gb-done p { color: #3a2010; }
.gb-sig { font-family: var(--f-display); font-size: 44px !important; color: #6d0a14 !important; margin: 4px 0 !important; transform: rotate(-3deg); }
.gb-google { background: #fff; color: #222; border: 1px solid #999; border-radius: 3px; padding: 9px 14px; font-size: 16px; cursor: pointer; font-family: var(--f-body); }
.gb-or { margin: 0; text-align: center; font-size: 14px !important; color: #6a4a2a; }
.gb-prefs .gb-field, .gb-prefs .gb-check { color: var(--bone); }
.gb-prefs .gb-field input { color: var(--bone); background: rgba(255,255,255,.06); border-bottom-color: var(--gold); }
.gb-delete { margin-top: 16px; color: var(--bone-dim); }
.gb-delete summary { cursor: pointer; }
.legal h3 { font-family: var(--f-display); font-weight: 400; font-size: 24px; margin: 18px 0 4px; color: var(--ember); }
.legal p { margin: 0; font-size: 16px !important; max-width: 70ch; }
.legal .fine { color: var(--bone-dim); font-size: 13px !important; }
.legal-pop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.75); }
.paper-note { font-family: var(--f-type); background: #efe2c0; color: #2a1a10; padding: 16px 18px; line-height: 1.6; transform: rotate(-1deg); box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.paper-note .sig { display: block; text-align: right; margin-top: 8px; }
@media (max-width: 760px) { .book { grid-template-columns: 1fr; } .book-left { display: none; } }

.fog-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fog-wrap i { position: absolute; border-radius: 50%; animation: fogDrift linear infinite; will-change: transform; }
@keyframes fogDrift { from { transform: translateX(0); } to { transform: translateX(3000px); } }
.rain-sheet { position: absolute; left: -200px; top: -1080px; width: 2400px; height: 2160px; background-size: 480px 540px; animation: rainFall .45s linear infinite; will-change: transform; pointer-events: none; }
@keyframes rainFall { from { transform: translate(0,0); } to { transform: translate(97px,540px); } }

.still .fog-wrap i, .still .rain-sheet, .still .grain, .still .flame i, .still .flame b, .still .ks-dot { animation-play-state: paused !important; }

/* ======================= ROOMS ======================= */
.passage-mouth { opacity: 0; transition: opacity 1.2s; }
.passage-mouth.open { opacity: 1; }
.flame.purple i { background: radial-gradient(ellipse at 50% 75%, #fff 0%, #e4c8ff 30%, #a060ff 60%, rgba(120,40,255,0) 75%); }
.flame.purple b { background: radial-gradient(circle, rgba(170,110,255,.35), transparent 65%); }
.sm-host { position: absolute; left: 650px; top: 90px; width: 620px; height: 620px; pointer-events: none; }
.sm-host img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(circle at 52% 46%, #000 30%, transparent 62%); mask-image: radial-gradient(circle at 52% 46%, #000 30%, transparent 62%); animation: hover 5s ease-in-out infinite; }
.sm-host.talking img { animation: hover 5s ease-in-out infinite, talk .22s ease-in-out infinite alternate; }
@keyframes hover { 50% { transform: translateY(-10px); } }
@keyframes talk { to { filter: brightness(1.18); scale: 1.012; } }
.posters img { position: absolute; width: 220px; height: 300px; object-fit: cover; filter: brightness(.8) saturate(.9); box-shadow: inset 0 0 40px #000; }
.tv-screen { position: absolute; left: 712px; top: 330px; width: 380px; height: 300px; border-radius: 40px; overflow: hidden; background: #000; box-shadow: inset 0 0 40px rgba(0,0,0,.9); }
.tv-screen img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.1) contrast(1.1) blur(.4px); animation: tvflick 3s infinite; }
.tv-screen .scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.7)); }
@keyframes tvflick { 0%,100% { opacity: 1 } 47% { opacity: .92 } 50% { opacity: .75 } 53% { opacity: .95 } }
.slasher-card { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 18px; align-items: start; }
.slasher-card img { width: 100%; border-radius: 3px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.slasher-card .haunt { color: var(--ember); font-style: italic; }
.fine { font-size: 14px !important; color: var(--bone-dim); }
@media (max-width: 560px) { .slasher-card { grid-template-columns: 1fr; } }
.showcase .sc-logo { width: min(100%, 520px); display: block; margin: 0 auto 4px; }
.sc-tag { text-align: center; font-size: 20px !important; max-width: 52ch; margin: 0 auto 12px; }
.sc-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; list-style: none; padding: 0; margin: 0 0 16px; font-size: 17px; }
.sc-facts b { color: var(--ember); font-weight: 400; margin-right: 4px; font-family: var(--f-display); font-size: 20px; }
.sc-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.sc-gallery figure { margin: 0; }
.sc-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; display: block; }
.sc-gallery figcaption { font-size: 14px; color: var(--bone-dim); margin-top: 4px; }
.trailer { width: 100%; max-height: 70vh; background: #000; display: block; border-radius: 3px; }

.pan-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 88px; border: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), transparent); color: var(--bone); font-size: 44px; line-height: 1; cursor: pointer; animation: nudge 1.6s ease-in-out infinite; }
.pan-l { left: env(safe-area-inset-left, 0px); }
.pan-r { right: env(safe-area-inset-right, 0px); background: linear-gradient(-90deg, rgba(0,0,0,.55), transparent); }
@keyframes nudge { 50% { opacity: .55; } }
@media (hover: hover) and (pointer: fine) { .pan-arrow { display: none; } }

.ks-short { display: none; }
@media (max-width: 640px) { .ks-short { display: inline; } }

/* ================================================================= v2: rooms, navigation, puzzles */
/* dialogue never blocks the world: only the box itself catches clicks */
.dialogue { pointer-events: none; }
.dialogue .dlg-body { pointer-events: auto; }
.dlg-close { position: absolute; right: 6px; top: 4px; background: none; border: 0; color: var(--bone-dim); font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.dlg-close:hover { color: #fff; }
.dlg-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dlg-choice { text-align: left; background: rgba(60,30,20,.55); border: 1px solid rgba(201,164,92,.4); color: var(--bone); font: inherit; font-size: 18px; padding: 8px 12px; border-radius: 3px; cursor: pointer; }
.dlg-choice:hover, .dlg-choice:focus-visible { border-color: var(--ember); background: rgba(90,40,20,.7); }

/* Back button */
.back-btn { position: absolute; left: 14px; top: 78px; display: flex; align-items: center; gap: 6px; background: rgba(12,8,10,.8); color: var(--bone); border: 1px solid rgba(201,164,92,.5); border-radius: 22px; padding: 8px 16px 8px 10px; font: 17px var(--f-body); cursor: pointer; z-index: 6; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.back-btn svg { width: 20px; height: 20px; }
.back-btn:hover { border-color: var(--ember); color: #fff; }

/* exit arrows painted in the world */
.exit-mark { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; opacity: .55; filter: drop-shadow(0 0 6px rgba(0,0,0,.9)); animation: exitPulse 2.4s ease-in-out infinite; }
.exit-mark svg { width: 100%; height: 100%; fill: var(--bone); }
.exit-mark.dir-down svg { transform: rotate(180deg); } .exit-mark.dir-left svg { transform: rotate(-90deg); } .exit-mark.dir-right svg { transform: rotate(90deg); }
@keyframes exitPulse { 50% { opacity: .9; transform: scale(1.12); } }
.hot-layer.reveal .hs { outline: 3px dashed rgba(255,200,120,.75); outline-offset: -3px; background: rgba(255,180,90,.08); }

/* Skeleton Man corner pop-ups (never block anything) */
.skel-pop { position: absolute; right: 14px; top: 84px; display: flex; gap: 10px; align-items: center; max-width: min(380px, calc(100% - 28px)); background: rgba(16,8,24,.93); border: 1px solid #7a3cc8; border-radius: 10px; padding: 10px 14px 10px 10px; z-index: 8; pointer-events: none; box-shadow: 0 0 30px rgba(122,60,200,.35); transform: translateX(120%); }
.skel-pop.in { animation: skelIn .5s cubic-bezier(.2,1.3,.4,1) forwards; }
.skel-pop.out { animation: skelOut .45s ease-in forwards; }
.skel-pop img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid #9a6bd0; flex: none; }
.skel-pop b { font-family: var(--f-display); color: #c79bff; font-size: 20px; font-weight: normal; }
.skel-pop p { margin: 2px 0 0; font-size: 16px; line-height: 1.35; color: var(--bone); }
@keyframes skelIn { from { transform: translateX(120%) rotate(6deg); } to { transform: none; } }
@keyframes skelOut { to { transform: translateX(120%); opacity: 0; } }

.hud-btn.pulse { animation: hudPulse 1s 3; }
@keyframes hudPulse { 50% { border-color: var(--ember); box-shadow: 0 0 16px var(--ember); } }
.toast-badge { color: var(--ember); margin-right: 4px; }
.vol { display: flex; align-items: center; gap: 10px; color: var(--bone); font-size: 17px; }
.vol input { flex: 1; accent-color: var(--blood); }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.fine { font-size: 14px !important; color: var(--bone-dim); }
.ok { color: var(--slime); }
.paper-note { background: var(--paper); color: var(--paper-ink); padding: 18px 22px; font-family: var(--f-type); font-size: 17px; line-height: 1.55; box-shadow: 0 6px 20px rgba(0,0,0,.6); transform: rotate(-.6deg); }

/* characters breathe */
.char.floaty, .kit-mid .floaty { animation: floaty 4s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-14px); } }
.char.figure .fig-body { animation: breathe 3.4s ease-in-out infinite; transform-origin: 0 0; transform-box: fill-box; }
@keyframes breathe { 50% { transform: scaleY(1.012); } }
.fernando .fern-head { animation: chomp 3s ease-in-out infinite; transform-origin: 0 -170px; }
@keyframes chomp { 0%, 80%, 100% { transform: none; } 88% { transform: rotate(-3deg) translateY(-6px); } }
.neon { animation: neon 3s infinite; filter: drop-shadow(0 0 8px currentColor); }
@keyframes neon { 0%, 18%, 22%, 100% { opacity: 1; } 20% { opacity: .4; } }
.rack-tape { position: absolute; width: 104px; height: 140px; object-fit: cover; box-shadow: 0 6px 14px rgba(0,0,0,.7); border-radius: 2px; }
.rack-tape.missing { filter: grayscale(1) brightness(.25); }
.theater-screen { position: absolute; left: 490px; top: 160px; width: 940px; height: 460px; overflow: hidden; opacity: .9; }
.theater-screen img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.2) brightness(1.1); animation: flick .12s steps(2) infinite; }
@keyframes flick { 50% { opacity: .92; } }
.ghost-head { position: absolute; width: 90px; height: 110px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 35%, rgba(230,240,255,.75), rgba(200,215,255,.15) 70%); animation: floaty 3.6s ease-in-out infinite; }

/* map + journal */
.map-panel.closeup, .journal.closeup { width: min(980px, 100%); }
.map-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.map-floor { margin: 0; background: #e8d9b5; border-radius: 3px; padding: 8px; color: var(--paper-ink); }
.map-floor figcaption { font-family: var(--f-display); font-size: 22px; text-align: center; }
.map-floor svg { width: 100%; height: auto; display: block; }
.map-floor .links line { stroke: #8a6a3a; stroke-width: 4; stroke-dasharray: 6 4; }
.map-floor .room rect { fill: #f4ead0; stroke: #5a3a1a; stroke-width: 2; }
.map-floor .room.unknown rect { fill: #d8c8a0; stroke-dasharray: 5 4; }
.map-floor .room.here rect { fill: #ffd9a0; stroke: #b3121f; stroke-width: 3; }
.map-floor .room text { font: 13px Georgia, serif; text-anchor: middle; fill: #2b1a10; }
.map-floor .room circle { fill: #b3121f; }
.map-key { font-size: 15px !important; color: var(--bone-dim); }
.j-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.j-tabs button { flex: 1; background: #2a1810; color: var(--bone); border: 1px solid rgba(201,164,92,.4); padding: 9px; font: 18px var(--f-body); cursor: pointer; }
.j-tabs button[aria-selected="true"] { background: #5a1a14; border-color: var(--ember); }
.myst-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.myst { background: rgba(255,255,255,.04); border: 1px solid rgba(201,164,92,.25); padding: 10px 14px; border-radius: 3px; }
.myst b { font-family: var(--f-display); font-weight: normal; font-size: 22px; color: var(--bone); }
.myst .prog { float: right; color: var(--ember); font-size: 15px; }
.myst.solved b { color: var(--slime); }
.myst.locked { opacity: .55; }
.myst.locked span { display: block; }
.myst ul { margin: 6px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.45; }
.myst .more { list-style: none; color: var(--bone-dim); }
.coll h3 { font-family: var(--f-display); font-weight: normal; font-size: 22px; margin: 14px 0 4px; }
.coll .prog { color: var(--ember); font-size: 16px; }
.coll-grid { list-style: none; padding: 0; margin: 6px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.coll-grid li { min-height: 40px; display: grid; place-items: center; border: 1px solid rgba(201,164,92,.25); border-radius: 3px; font-size: 14px; }
.coll-grid li.missing { color: #554; }
.coll-grid li button { width: 100%; height: 100%; background: rgba(90,40,20,.4); color: var(--bone); border: 0; font: 14px var(--f-body); cursor: pointer; padding: 6px; }

/* item inspect */
.item-inspect { display: flex; gap: 18px; align-items: center; }
.item-big svg { width: 120px; height: 120px; }
.portrait-view { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: 18px; align-items: center; }
.portrait-view svg { width: 100%; height: auto; }
@media (max-width: 600px) { .portrait-view, .item-inspect { grid-template-columns: 1fr; flex-direction: column; } }

/* ------- puzzles */
.pz-intro { color: var(--bone-dim); }
.pz-msg { min-height: 1.5em; color: var(--ember); text-align: center; }
.pz.pz-ok .pz-msg { color: var(--slime); }
.closeup.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.combo-body { display: flex; justify-content: center; gap: 12px; }
.wheel { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wheel button { background: #2a1810; color: var(--gold); border: 1px solid rgba(201,164,92,.5); width: 54px; height: 38px; cursor: pointer; font-size: 16px; }
.wheel-face { width: 64px; height: 76px; display: grid; place-items: center; background: linear-gradient(#3a2a14, #1a1208 50%, #3a2a14); border: 2px solid var(--gold); border-radius: 6px; font: 42px var(--f-type); color: #f2d79a; }
.seq-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.seq-btn { background: #1e140e; border: 1px solid rgba(201,164,92,.4); border-radius: 4px; padding: 8px; color: var(--bone); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 15px var(--f-body); min-width: 70px; }
.seq-btn.lit { border-color: var(--slime); box-shadow: 0 0 12px rgba(69,245,168,.5); }
.seq-btn.pressed { animation: press .25s; }
@keyframes press { 50% { transform: translateY(4px) scale(.96); } }
.clock-wrap { display: grid; place-items: center; }
.clockface { width: min(260px, 70vw); }
.clock-ctrl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; margin-top: 8px; }
.clock-ctrl button { background: #2a1810; color: var(--bone); border: 1px solid rgba(201,164,92,.5); width: 44px; height: 40px; font-size: 20px; cursor: pointer; }
.piano-keys { display: flex; justify-content: center; gap: 3px; padding: 14px; background: #120a06; border-radius: 6px; }
.pkey { width: 46px; height: 170px; background: linear-gradient(#fffaf0, #e8dcc0); border: 1px solid #000; border-radius: 0 0 6px 6px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font: 16px Georgia; color: #5a4020; cursor: pointer; }
.pkey.down { animation: pkey .3s; }
@keyframes pkey { 30% { background: #ffd9a0; transform: translateY(3px); } }
.gauges { display: flex; justify-content: center; gap: 10px; }
.gauge { width: 140px; }
.valve-row { display: flex; justify-content: center; gap: 24px; margin-top: 10px; flex-wrap: wrap; }
.valve-row button { background: #2a1810; color: var(--bone); border: 1px solid rgba(201,164,92,.5); padding: 6px 12px; cursor: pointer; font-size: 18px; }
.wire-board { width: 100%; max-width: 600px; display: block; margin: 0 auto; background: #1e2a22; border-radius: 6px; }
.wire-board .term { cursor: pointer; }
.wire-board .term.picked circle { stroke: #fff; stroke-width: 4; }
.rot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.rot { background: #1e140e; border: 1px solid rgba(201,164,92,.4); color: var(--bone); padding: 10px; cursor: pointer; font: 15px var(--f-body); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rot-inner { width: 110px; height: 120px; transition: transform .4s; }
.rot-inner svg { width: 100%; height: 100%; }
.mosaic { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.mosaic figure { margin: 0; text-align: center; }
.mosaic svg { width: 100%; max-width: 160px; }
.mosaic figcaption { font-size: 15px; color: var(--bone-dim); }
.maze-wrap { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.maze { width: min(460px, 82vw); border-radius: 6px; }
.maze-pad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); gap: 4px; }
.maze-pad button { background: #2a1810; color: var(--bone); border: 1px solid rgba(201,164,92,.5); font-size: 20px; cursor: pointer; }
.maze-pad [data-m="0,-1"] { grid-column: 2; grid-row: 1; } .maze-pad [data-m="-1,0"] { grid-column: 1; grid-row: 2; } .maze-pad [data-m="1,0"] { grid-column: 3; grid-row: 2; } .maze-pad [data-m="0,1"] { grid-column: 2; grid-row: 3; }
.scope-wrap { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.scope-view { width: min(360px, 80vw); border-radius: 50%; }
.scope-read { font-family: var(--f-type); color: var(--moon); }
.arc-screen { background: #05020a; border: 6px solid #3a0a5a; border-radius: 8px; padding: 10px; font-family: var(--f-type); color: #3af2ff; }
.arc-hud { display: flex; justify-content: space-between; margin-bottom: 8px; }
.arc-field { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grave { position: relative; height: 100px; background: linear-gradient(#1a2a14 60%, #2a1a10 60%); border-radius: 6px; overflow: hidden; cursor: pointer; touch-action: manipulation; }
.grave::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 60px; height: 70px; margin-left: -30px; border-radius: 30px 30px 0 0; background: #555c66; }
.grave.up.zombie::before, .grave.up.ghost::before { content: ''; position: absolute; left: 50%; top: 8px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; z-index: 1; animation: popup .2s; }
.grave.up.zombie::before { background: radial-gradient(circle at 35% 40%, #111 4px, transparent 5px), radial-gradient(circle at 65% 40%, #111 4px, transparent 5px), #6aaa4a; }
.grave.up.ghost::before { background: radial-gradient(circle at 35% 40%, #222 4px, transparent 5px), radial-gradient(circle at 65% 40%, #222 4px, transparent 5px), #eef; }
.grave.hit::before { filter: brightness(2); transform: scale(.7); }
@keyframes popup { from { transform: translateY(40px); } }
.mbox { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mbox-dancer.spin { animation: spin 3s linear; }
@keyframes spin { to { transform: rotate(360deg); } }
.mbox-pins { display: flex; gap: 8px; }
.mbox-pins span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; font-family: var(--f-type); }
.mbox-pins span.on { background: var(--gold); color: #000; }

/* ------- VHS cases */
.vhs-panel.closeup { width: min(1040px, 100%); display: block; }
.vhs-panel .closeup-body { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.vhs-panel .closeup-title { grid-column: 1 / -1; }
.vhs-stage { display: flex; flex-direction: column; align-items: center; }
.vhs-scene { width: 280px; height: 450px; perspective: 1100px; cursor: grab; touch-action: none; margin: 10px auto 20px; outline: none; }
.vhs-scene:active { cursor: grabbing; }
.vhs-box { --w: 280px; --h: 450px; --d: 75px; position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; }
.vf { position: absolute; left: 0; top: 0; backface-visibility: hidden; overflow: hidden; background: #111; }
.vf img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; }
.vf-front, .vf-back { width: var(--w); height: var(--h); }
.vf-front { transform: translateZ(calc(var(--d) / 2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.vf-back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.vf-spine, .vf-spine2 { width: var(--d); height: var(--h); left: calc((var(--w) - var(--d)) / 2); }
.vf-spine { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.vf-spine2 { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.vf-spine2 img { transform: rotate(180deg); }
.vf-top, .vf-bottom { width: var(--w); height: var(--d); top: calc((var(--h) - var(--d)) / 2); }
.vf-top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.vf-bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: #0c0c0e; }
.vhs-ctrl { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.vhs-info h3 { font-family: var(--f-display); font-size: 38px; font-weight: normal; margin: 0 0 8px; color: var(--ember); }
.vhs-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: 13px !important; color: var(--bone-dim); margin: 0; }
.vhs-info ul { padding-left: 20px; font-size: 18px; line-height: 1.5; }
.vhs-zoom { position: absolute; inset: 0; background: rgba(0,0,0,.92); display: grid; place-items: center; z-index: 5; padding: 12px; cursor: zoom-out; overflow: auto; }
.vhs-zoom img { max-width: 100%; max-height: 100%; }
@media (max-width: 720px) { .vhs-panel .closeup-body { grid-template-columns: 1fr; } .vhs-scene { width: 220px; height: 354px; } .vhs-box { --w: 220px; --h: 354px; --d: 59px; } }
.vhs-shelf.closeup { width: min(980px, 100%); }
.shelf-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; background: linear-gradient(#2a1a0e, #140a04); padding: 14px; border-radius: 4px; }
.shelf-tape { background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--bone-dim); font: 13px var(--f-body); width: 92px; }
.shelf-tape img { height: 260px; width: auto; box-shadow: 0 6px 14px #000; transition: transform .2s; }
.shelf-tape:hover img, .shelf-tape:focus-visible img { transform: translateY(-10px); }
.card-panel.closeup { width: min(780px, 100%); text-align: center; }
.char-card { width: 100%; max-height: 70vh; object-fit: contain; }
.chan-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.elmwood-view svg.elm { width: 100%; border-radius: 4px; }

/* guestbook v2 */
.gb-google-big { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px; font: bold 18px/1 system-ui, sans-serif; letter-spacing: .04em; background: #fff; color: #1f1f1f; border: 0; border-radius: 6px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); margin: 6px 0 4px; }
.gb-google-big:hover { background: #f1f3f4; }
.gb-age legend { font-weight: bold; }

.dlg-text.dlg-in { animation: dlgIn .18s ease-out; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(3px); } }

/* the satchel lives in the top bar, between the logo and the buttons */
.hud-top .tray { position: relative; left: auto; top: auto; bottom: auto; transform: none; flex: 1 1 auto; min-width: 0; max-width: none; margin: 0 6px; align-self: center; }
.hud-top .inv-items { flex: 1 1 auto; min-width: 0; scrollbar-width: thin; }
.hud-top .inv-empty { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
.hud-right { flex: none; }
@media (max-width: 760px) {
  .hud-top { flex-wrap: wrap; }
  .hud-top .tray { order: 3; flex-basis: 100%; margin: 6px 0 0; }
  .back-btn { top: 128px; }
}
.mini-orb { position: relative; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: block; box-shadow: 0 0 10px rgba(150,90,255,.8), inset 0 0 6px rgba(255,255,255,.4); border: 1px solid rgba(200,170,255,.7); }
.mini-orb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.3) hue-rotate(-10deg); opacity: .9; }
.mini-orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.7), transparent 30%), radial-gradient(circle, transparent 50%, rgba(80,30,160,.6)); }
.hud-orb { animation: orbGlow 3s ease-in-out infinite; }
@keyframes orbGlow { 50% { box-shadow: 0 0 14px rgba(150,90,255,.6); } }
.orb-panel.closeup { text-align: center; width: min(520px, 100%); }
.orb { position: relative; width: 220px; height: 250px; margin: 0 auto 6px; }
.orb-glass { position: absolute; left: 10px; top: 0; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 40px rgba(150,90,255,.7), inset 0 0 40px rgba(20,0,40,.9); }
.orb-glass img { width: 100%; height: 100%; object-fit: cover; animation: orbFloat 4s ease-in-out infinite; opacity: .92; }
.orb-glass::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 22%), radial-gradient(circle, transparent 45%, rgba(60,20,120,.75)); }
.orb-swirl { position: absolute; inset: -20%; background: conic-gradient(from 0deg, transparent, rgba(170,120,255,.35), transparent 30%, rgba(120,200,255,.25), transparent 60%); animation: spin 6s linear infinite; mix-blend-mode: screen; }
.orb-base { position: absolute; left: 50px; bottom: 0; width: 120px; height: 56px; background: linear-gradient(#5a3a1e, #2a1a0e); clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); border-radius: 6px; }
@keyframes orbFloat { 50% { transform: scale(1.06) translateY(-4px); filter: hue-rotate(20deg); } }
.orb-text { font-size: 20px !important; line-height: 1.5; color: #e8dcff; font-style: italic; }

/* close-ups */
.cu-wrap { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
.cu-wrap .layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.cu-img { position: absolute; inset: 0; width: 1920px; height: 1080px; object-fit: cover; }
.cu-live, .cu-top { pointer-events: none; }
.cu-flame { animation: cuFlick .18s infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes cuFlick { to { transform: scale(.9, 1.08) skewX(3deg); } }
.stage.subview .hs:hover { box-shadow: inset 0 0 0 3px rgba(255,210,140,.35); border-radius: 10px; }
/* card viewer */
.cardview.closeup { width: min(900px, 100%); text-align: center; }
.cv-frame { max-height: 68vh; overflow: hidden; border-radius: 8px; background: #000; display: grid; place-items: center; }
.cv-img { max-height: 66vh; max-width: 100%; display: block; margin: 0 auto; cursor: zoom-in; user-select: none; }
.cv-frame.zoomed { overflow: auto; display: block; cursor: grab; }
.cv-frame.zoomed .cv-img { max-height: none; max-width: none; height: 170vh; cursor: zoom-out; }
.meet h4 { font-family: var(--f-display); font-weight: normal; font-size: 26px; margin: 12px 0 6px; color: var(--ember); }
.meet-row { display: flex; gap: 12px; }
.meet-card { background: none; border: 0; padding: 0; cursor: pointer; color: var(--bone); font: 15px var(--f-body); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.meet-card img { width: 110px; border-radius: 6px; box-shadow: 0 6px 14px #000; transition: transform .2s; }
.meet-card:hover img, .meet-card:focus-visible img { transform: translateY(-6px) rotate(-2deg); }
.orb-glass { clip-path: circle(50%); }
.orb-glass img { object-position: 50% 30%; }
.mini-orb { clip-path: circle(50%); }
.vols { display: grid; gap: 6px; padding: 8px 0; } .vols .vol { display: grid; grid-template-columns: 90px 1fr; }
/* journal v3 */
.j-total { display: flex; gap: 16px; align-items: center; background: rgba(255,255,255,.04); border: 1px solid rgba(201,164,92,.3); border-radius: 6px; padding: 10px 14px; margin-bottom: 10px; }
.j-pct { font-family: var(--f-display); font-size: 48px; color: var(--ember); line-height: 1; min-width: 2.6em; text-align: center; }
.jbar { display: inline-block; width: 120px; height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; vertical-align: middle; margin: 0 8px; }
.jbar i { display: block; height: 100%; background: linear-gradient(90deg, #b3121f, #ffa54a); }
.sec-list, .ach-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.sec-list li, .ach-list li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 12px; border: 1px solid rgba(201,164,92,.22); border-radius: 4px; font-size: 16px; }
.sec-list li b, .ach-list li b { font-weight: normal; font-family: var(--f-display); font-size: 20px; color: var(--bone); }
.sec-list li span { grid-column: 1 / -1; color: var(--bone-dim); }
.sec-list li.missing b { color: #776; } .sec-list li.missing span { font-style: italic; }
.ach-list li { grid-template-columns: 34px 1fr; }
.ach-list li span:last-child { grid-column: 2; color: var(--bone-dim); }
.ach-icon { grid-row: span 2; font-size: 26px; align-self: center; }
.ach-list li.missing { opacity: .7; }
.ach-list li.got b { color: #ffd23a; }
/* 100% ceremony */
.ceremony.closeup { width: min(760px, 100%); text-align: center; overflow: hidden; }
.cer-stage { position: relative; height: 300px; background: radial-gradient(ellipse at 50% 100%, #3a0a2a, #05030a 70%); border-radius: 8px; overflow: hidden; }
.cer-spot { position: absolute; top: -40px; width: 200px; height: 400px; background: linear-gradient(rgba(255,240,200,.35), transparent); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); opacity: 0; transition: opacity .6s; }
.cer-spot.l { left: 18%; transform: rotate(-18deg); } .cer-spot.r { right: 18%; transform: rotate(18deg); }
.cer-trophy { position: absolute; left: 50%; bottom: 20px; width: 70px; margin-left: -35px; transform: scale(.6); transition: transform 1s cubic-bezier(.2,1.6,.4,1); filter: drop-shadow(0 0 0 #ffd23a); }
.cer-host { position: absolute; left: 6%; bottom: 0; height: 240px; opacity: .95; }
.cer-confetti i { position: absolute; top: -20px; width: 8px; height: 14px; opacity: 0; }
.ceremony.cer-reveal .cer-spot { opacity: 1; }
.ceremony.cer-reveal .cer-trophy { transform: scale(1.5) translateY(-30px); filter: drop-shadow(0 0 18px #ffd23a); }
.ceremony.cer-reveal .cer-confetti i { animation: confetti 2.6s linear infinite; opacity: 1; }
@keyframes confetti { from { transform: translateY(0) rotate(0); } to { transform: translateY(340px) rotate(720deg); } }
.cer-text { min-height: 5em; font-size: 19px; line-height: 1.5; margin-top: 12px; }
.cer-text.in { animation: dlgIn .3s; }

/* ===================================================== top bar v3: logo menu + centred satchel */
.hud-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; }
.hud-corner { position: relative; justify-self: start; }
.hud-spacer { justify-self: end; }
.hud-logo { position: relative; width: 92px; display: block; }
.hud-chev { position: absolute; left: 50%; bottom: -9px; width: 22px; height: 14px; margin-left: -11px; border-radius: 0 0 8px 8px; background: rgba(12,8,10,.85); border: 1px solid rgba(201,164,92,.5); border-top: 0; }
.hud-chev::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 6px; border-right: 2px solid var(--bone); border-bottom: 2px solid var(--bone); transform: rotate(45deg); transition: transform .2s, top .2s; }
.drop-open .hud-chev::after { transform: rotate(-135deg); top: 6px; }
.hud-badge { position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px var(--ember); }
.hud-logo.pulse { animation: hudPulse 1s 3; }
.hud-drop { position: absolute; left: 0; top: calc(100% + 14px); z-index: 30; min-width: 270px; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: rgba(14,9,12,.96); border: 1px solid rgba(201,164,92,.45); border-radius: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.7); animation: dropIn .18s ease-out; }
.hud-drop[hidden] { display: none; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } }
.drop-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 8px 12px; box-sizing: border-box; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--bone); font-family: var(--f-body); font-size: 17px; text-align: left; cursor: pointer; text-decoration: none; }
.drop-btn:hover, .drop-btn:focus-visible { background: rgba(201,164,92,.12); border-color: rgba(201,164,92,.4); color: #fff; outline: none; }
.drop-btn svg { width: 24px; height: 24px; flex: none; }
.drop-btn .mini-orb { width: 28px; height: 28px; flex: none; }
.drop-btn.pulse { animation: hudPulse 1s 3; }
.hud-drop .ks-pill { height: auto; min-height: 46px; border-radius: 4px; font-size: 15px; white-space: normal; margin-top: 4px; }
.hud-drop .ks-dot { flex: none; margin: 0 8px 0 9px; }
.hud-orb { animation: none; }
.hud-drop .hud-orb .mini-orb { animation: orbGlow2 3s ease-in-out infinite; }
@keyframes orbGlow2 { 50% { box-shadow: 0 0 16px rgba(170,110,255,.9); } }
/* the satchel, centred where the banner used to be */
.hud-top .tray { grid-column: 2; position: relative; left: auto; top: auto; bottom: auto; transform: none; margin: 0; max-width: min(64vw, 760px); min-width: 0; align-self: start; padding: 6px 8px; gap: 8px; }
.hud-top .inv-items { overflow-x: auto; }
.hud-top .inv-empty { font-size: 14px; }
.tray-archive { position: relative; width: 40px; height: 40px; flex: none; border-radius: 4px; border: 1px solid rgba(201,164,92,.35); background: rgba(42,24,16,.7); color: var(--bone-dim); cursor: pointer; display: grid; place-items: center; }
.tray-archive svg { width: 22px; height: 22px; }
.tray-archive:hover { color: #fff; border-color: var(--ember); }
.arc-count { position: absolute; right: -5px; top: -5px; min-width: 16px; height: 16px; border-radius: 8px; background: #4a3a2a; color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.arc-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.arc-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid rgba(201,164,92,.25); border-radius: 4px; background: rgba(255,255,255,.03); }
.arc-icon { width: 46px; height: 46px; flex: none; }
.arc-icon svg { width: 100%; height: 100%; }
.arc-name { flex: 1; display: flex; flex-direction: column; }
.arc-name small { color: var(--bone-dim); font-size: 13px; }
.back-btn { top: 100px; }
.drop-open ~ .back-btn, .hud.drop-open .back-btn { z-index: 1; }
@media (max-width: 760px) {
  .hud-top { flex-wrap: nowrap; grid-template-columns: auto 1fr; }
  .hud-spacer { display: none; }
  .hud-top .tray { order: 0; flex-basis: auto; margin: 0; justify-self: center; max-width: 100%; }
  .back-btn { top: 82px; }
  .hud-logo { width: 58px; }
}
@media (max-width: 640px) {
  .hud-top .tray .inv-empty { display: none; }
  .hud-top .inv-slot { width: 44px; height: 44px; }
  .hud-drop { min-width: 250px; }
}
.drop-restart { margin-top: 4px; border-top: 1px solid rgba(201,164,92,.2); border-radius: 0 0 4px 4px; color: #e8a0a0; }
.drop-restart:hover, .drop-restart:focus-visible { color: #ffb8b8; background: rgba(179,18,31,.18); border-color: rgba(179,18,31,.5); }

/* ===================================================== painted scenes */
.paint-bg { pointer-events: none; user-select: none; }
.painted-gates .gate { transition: transform 2.4s cubic-bezier(.45,.05,.3,1); }
.lamp-glow { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255,200,110,.55), rgba(255,160,60,0) 70%); mix-blend-mode: screen; animation: pglow 2.6s ease-in-out infinite alternate; pointer-events: none; }
.pglow { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,190,100,.28), rgba(255,140,40,0) 70%); mix-blend-mode: screen; animation: pglow 3s ease-in-out infinite alternate; pointer-events: none; }
.pglow:nth-child(2n) { animation-duration: 2.3s; animation-delay: -.8s; }
.pglow:nth-child(3n) { animation-duration: 3.7s; animation-delay: -1.6s; }
@keyframes pglow { 0% { opacity: .65; transform: scale(.96); } 40% { opacity: 1; } 55% { opacity: .8; } 100% { opacity: 1; transform: scale(1.04); } }
.plaques .plaque { position: absolute; padding: 3px 12px; font-family: 'IM Fell English', Georgia, serif; font-size: 18px; color: #2a1a0c; background: linear-gradient(#d8b46a, #9a7434); border: 2px solid #4a3216; border-radius: 3px; box-shadow: 0 3px 8px rgba(0,0,0,.6); white-space: nowrap; pointer-events: none; }
/* painted brass plate (assets/ui/plaque.webp, G2), nine-sliced so the screws and bevel keep their shape at any label length */
.plaques .plaque { padding: 1px 6px; border: 13px solid transparent; border-radius: 0; background: none; border-image: url(../assets/ui/plaque.webp) 60 fill / 13px stretch; box-shadow: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,.7)); color: #f4e0b0; text-shadow: 0 1px 1px #000, 0 0 4px rgba(0,0,0,.9), 0 0 2px #000; }
.rope-sign { position: absolute; left: 606px; top: 712px; width: 170px; padding: 6px 4px; text-align: center; font-family: 'IM Fell English', Georgia, serif; font-size: 16px; line-height: 1.1; color: #2a1a0c; background: #eadcb8; border: 2px solid #4a3216; box-shadow: 0 4px 10px rgba(0,0,0,.6); transform: rotate(-3deg); pointer-events: none; }
.rope-sign small { font-size: 12px; }
.mortimer { pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); will-change: transform; }
.dlg-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plight-dark { mix-blend-mode: multiply; }
.plight-glow { mix-blend-mode: color-dodge; }
.plick { position: absolute; width: 64px; height: 112px; margin: 0; pointer-events: none; transform-origin: 50% 93%; mix-blend-mode: screen; }
.gates-open .plight-dark, .gates-open .plight-glow, .gates-open .plick { opacity: 0; transition: opacity 1.2s; }
.fp-wrap { will-change: transform; }
.sm-host.painted { left: 700px; top: 110px; width: 520px; height: 520px; }
.cushion, .cs-special, .passage-mouth, .fire-light, .pendulum { position: absolute; width: 1px; height: 1px; pointer-events: none; }
.skull-door { position: absolute; perspective: 1400px; clip-path: polygon(0 100%, 0 42%, 4% 30%, 12% 18%, 26% 8%, 50% 0, 74% 8%, 88% 18%, 96% 30%, 100% 42%, 100% 100%); }
.skull-door div { position: absolute; top: 0; width: 50%; height: 100%; background-repeat: no-repeat; transition: transform 2.2s cubic-bezier(.5,0,.3,1); }
.skull-door .door-l { left: 0; transform-origin: 0 50%; } .skull-door .door-r { right: 0; transform-origin: 100% 50%; }
.skull-door.open .door-l { transform: rotateY(80deg); } .skull-door.open .door-r { transform: rotateY(-80deg); }
.eyes { position: absolute; display: flex; gap: 14px; pointer-events: none; animation: eyesBlink 5s infinite; }
.eyes i { width: 12px; height: 8px; border-radius: 50%; background: #ffd23a; box-shadow: 0 0 10px #ffb000; }
@keyframes eyesBlink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
.pinner { position: absolute; object-fit: cover; pointer-events: none; filter: sepia(.15) contrast(1.05); }
.pframe { position: absolute; padding: 7px; background: linear-gradient(135deg, #f3dc9a, #9a7434 50%, #d8b870); box-shadow: 0 6px 14px rgba(0,0,0,.6), inset 0 0 0 2px #4a3216; pointer-events: none; }
.pframe img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-glow { position: absolute; left: 936px; top: 247px; width: 394px; height: 295px; border-radius: 30px / 40px; background: radial-gradient(ellipse, rgba(140,210,255,.22), rgba(60,120,200,.08) 70%); mix-blend-mode: screen; animation: tvflick .16s steps(2) infinite; pointer-events: none; }
@keyframes tvflick { 50% { opacity: .75; } }
.vhs-case { filter: drop-shadow(0 10px 18px rgba(0,0,0,.7)); }
.neon-title { position: absolute; left: 538px; top: 176px; width: 470px; text-align: center; font: 34px 'Pirata One', Georgia, serif; letter-spacing: .08em; color: #ffd6f6; text-shadow: 0 0 6px #ff4ad2, 0 0 16px #ff4ad2; pointer-events: none; }
.pghost { pointer-events: none; opacity: .9; filter: drop-shadow(0 0 14px rgba(170,220,255,.55)); animation: ghostFloat 5s ease-in-out infinite; }
.pchar { opacity: 1; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); animation: charBreath 4.5s ease-in-out infinite; }
@keyframes ghostFloat { 50% { transform: translateY(-10px); } }
@keyframes charBreath { 50% { transform: translateY(-3px); } }
.layer-free { position: absolute; pointer-events: none; }
.secret-shelf { position: absolute; background: url(../assets/scenes/secret-bookcase.webp) center top / 100% auto repeat-y; box-shadow: 0 0 0 6px #2a160a, 0 10px 24px rgba(0,0,0,.7); pointer-events: none; }
.pmirror { position: absolute; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
.still .pghost, .still .pchar { animation: none; }
.gclock-hands { position: absolute; left: 961px; top: 277px; width: 0; height: 0; pointer-events: none; }
.gclock-hands i { position: absolute; left: -5px; bottom: 0; width: 10px; background: #0c0806; clip-path: polygon(50% 0, 100% 22%, 62% 30%, 62% 100%, 38% 100%, 38% 30%, 0 22%); transform-origin: 50% 100%; }
.gclock-hands::after { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #0c0806; }
.gclock-hands .hh { height: 52px; transform: rotate(-30deg); }
.gclock-hands .mh { height: 78px; width: 8px; left: -4px; }
@keyframes clockMin { to { transform: rotate(360deg); } }
.spin-gear { display: none; }
.mirror-door-glow { position: absolute; background: radial-gradient(ellipse, rgba(200,170,255,.45), rgba(120,80,255,.1) 60%, transparent 75%); mix-blend-mode: screen; animation: pglow 3s ease-in-out infinite alternate; pointer-events: none; }
.intro-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; mix-blend-mode: screen; }
/* VHS cases: a touch more contrast (+5%) */
.vf img, .rack-tape, .shelf-tape img, .meet-card img[src*="vhs"] { filter: contrast(1.05); }
.rack-tape.missing { filter: grayscale(1) brightness(.25) contrast(1.05); }
.meet-hero-h { text-align: center; }
.meet-row.meet-hero { justify-content: center; }
/* cut-outs whose source art stops above the feet fade into the floor shadow */
.pghost.pfade { -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 97%); mask-image: linear-gradient(to bottom, #000 74%, transparent 97%); }
.pghost.fern-sway { transform-origin: 50% 92%; animation: fernSway 3.2s ease-in-out infinite alternate; }
@keyframes fernSway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg) translateY(-3px); } }
/* intro: the eye is the way in */
.intro-eye { position: absolute; z-index: 5; border: 0; padding: 0; margin: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.intro-eye:focus-visible { outline: 2px solid rgba(60,255,160,.7); outline-offset: 4px; }
.intro-eye:hover { box-shadow: 0 0 40px 6px rgba(60,255,160,.25); }
/* ---------------- the zombie-hand cursor */
html.zc-on, html.zc-on * { cursor: none !important; }
.zc { position: fixed; left: 0; top: 0; width: 74px; height: 87px; z-index: 2147483600; pointer-events: none; opacity: 0; transition: opacity .15s; will-change: transform; }
.zc.show { opacity: 1; }
.zc-float { position: absolute; inset: 0; transform-origin: 68.1px 1px; animation: zcFloat 2.6s ease-in-out infinite; filter: drop-shadow(2px 4px 3px rgba(0,0,0,.6)); }
.zc-float img { position: absolute; left: 0; top: 0; width: 74px; height: 87px; }
.zc-finger { transform-origin: 53.1px 18.6px; transition: transform .07s ease-out; }
.zc.press .zc-finger { transform: rotate(17deg) scale(.93); }
.zc.press .zc-float { animation-play-state: paused; }
.zc.press .zc-base { transform: translate(1px, 2px); transition: transform .07s; }
.zc-base { transition: transform .12s; }
.zc-badge { position: absolute; left: 76px; top: 22px; width: 30px; height: 30px; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.zc-badge.on { opacity: 1; transform: none; }
.zc-badge svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
@keyframes zcFloat { 0% { transform: rotate(-3deg) translate(0, 0); } 50% { transform: rotate(2.5deg) translate(-1px, 2px); } 100% { transform: rotate(-3deg) translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .zc-float { animation: none; } }
/* the cut-out gates swing, then settle into the gates painted standing open */
.painted-gates .gate { transition: transform 2.2s cubic-bezier(.45,.05,.3,1), opacity .7s ease 1.7s; }
.gates-open .painted-gates .gate { opacity: 0; }
/* painted item and menu icons */
.item-art { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.inv-slot { padding: 3px; }
.toast-item .item-art { width: 34px; height: 34px; display: inline-block; vertical-align: middle; }
.item-big .item-art { width: min(260px, 60vw); height: auto; margin: 0 auto; }
.arc-icon .item-art { width: 40px; height: 40px; }
.ui-ico { width: 28px; height: 28px; object-fit: contain; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.tray-toggle .ui-ico { width: 38px; height: 38px; }
/* the tape shelf rolls aside to reveal the doorway to Midnight Video */
.vhs-case { transition: transform 1.6s cubic-bezier(.5,0,.3,1), filter 1.6s; }
.vhs-case.moved { transform: translateX(340px); filter: brightness(.6); }
/* painted front doors */
.painted-fd .pfd-bg { position: absolute; inset: 0; }
.painted-fd .fd-door { box-shadow: inset 0 0 30px rgba(0,0,0,.6); }
.painted-fd .fd-light { background: radial-gradient(ellipse at 50% 60%, #ffe2a8 0%, #ff9b45 45%, #5a1d08 100%); }
.gates-open > .plick, .gates-open > .xsvg { opacity: 0 !important; transition: opacity 1s; }
.front-doors { z-index: 5; }
/* the parlour TV plays the trailer */
.tv-screen { position: absolute; overflow: hidden; border-radius: 34px / 26px; background: #000; box-shadow: inset 0 0 40px rgba(0,0,0,.9); }
.tv-screen video { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) contrast(1.05); }
.tv-screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55)); box-shadow: inset 0 0 22px rgba(120,220,255,.25); pointer-events: none; }
.meet h4 { text-align: center; }
.meet-row { justify-content: center; }
.meet-card > span { display: none; }

/* gallery: portraits painted into the frames, Lord Ambrose's dark canvas with watching eyes, a see-through butler */
.galp { position: absolute; pointer-events: none; object-fit: fill !important; }
.gal-eyes { position: absolute; width: 60px; height: 20px; pointer-events: none; animation: galEyes 7s ease-in-out infinite; }
.gal-eyes i { position: absolute; top: 4px; width: 9px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #fff6c8 0 25%, #ffb020 45%, rgba(255,120,0,0) 75%); box-shadow: 0 0 10px 3px rgba(255,170,40,.55); animation: galBlink 7s steps(1) infinite; }
.gal-eyes i:first-child { left: 8px; } .gal-eyes i:last-child { left: 40px; top: 8px; }
@keyframes galEyes { 0%, 100% { transform: translateX(0); opacity: .9 } 30% { transform: translateX(-4px) } 55% { transform: translateX(5px); opacity: 1 } 80% { opacity: .55 } }
@keyframes galBlink { 0%, 61%, 63%, 100% { transform: scaleY(1) } 62% { transform: scaleY(.1) } }
#pallsworth.butler-ghost { opacity: .6; filter: drop-shadow(0 0 14px rgba(150,215,255,.7)); -webkit-mask-image: linear-gradient(to bottom, #000 50%, rgba(0,0,0,.4) 80%, transparent 98%); mask-image: linear-gradient(to bottom, #000 50%, rgba(0,0,0,.4) 80%, transparent 98%); animation: butlerFloat 6s ease-in-out infinite; }
@keyframes butlerFloat { 0%, 100% { transform: translateY(0); opacity: .6 } 50% { transform: translateY(-14px); opacity: .48 } }
@media (prefers-reduced-motion: reduce) { .gal-eyes, .gal-eyes i { animation: none; } }
/* the character who is speaking moves: a talking bob and a little lean (stacks with any idle float) */
.is-talking { animation-name: talkBob !important; animation-duration: .42s !important; animation-iteration-count: infinite !important; animation-timing-function: ease-in-out !important; transform-origin: 50% 90%; }
@keyframes talkBob { 0%, 100% { scale: 1 1; rotate: -1.2deg; translate: 0 0; } 50% { scale: 1.015 .985; rotate: 1.2deg; translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .is-talking { animation: none !important; } }

/* Midnight Video: empty slots, tapes sliding home, the PLAY button and the back-counter TV */
.rack-tape.missing { opacity: 0 !important; }
.rack-glow { position: absolute; width: 82px; height: 128px; pointer-events: none; border-radius: 4px; box-shadow: 0 0 30px 10px rgba(255,80,220,.75), inset 0 0 20px rgba(255,200,255,.8); animation: rackGlow 1.6s ease-out forwards; }
@keyframes rackGlow { from { opacity: 1; } to { opacity: 0; } }
.vhs-play { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 34px 12px; border-radius: 10px; border: 2px solid #1a0306; cursor: pointer;
  font: 400 34px/1 var(--f-display); letter-spacing: .12em; color: #fff; background: linear-gradient(#e0262f, #8a0d16); box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 8px 0 #2a0306, 0 0 40px rgba(255,40,60,.6); animation: playPulse 1.4s ease-in-out infinite; }
.vhs-play small { font: 600 13px var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: #ffd6da; }
.vhs-play .tri { width: 0; height: 0; border-left: 22px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-bottom: 6px; filter: drop-shadow(0 0 6px #fff); }
.vhs-play:hover { filter: brightness(1.15); }
@keyframes playPulse { 50% { box-shadow: 0 0 0 3px rgba(255,255,255,.2), 0 8px 0 #2a0306, 0 0 70px rgba(255,40,60,.95); } }
.peek-panel.closeup { width: min(1280px, 100%); }
.peek-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: radial-gradient(ellipse at 50% 40%, #2a0a30, #07020a 75%); }
.peek-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.peek-crt { position: absolute; left: 50%; top: 46%; width: 62%; aspect-ratio: 4 / 3.35; transform: translate(-50%, -50%); border-radius: 26px; padding: 3.2% 9% 9% 3.2%;
  background: linear-gradient(135deg, #6a4422, #3a2210 40%, #24140a); box-shadow: inset 0 0 0 6px #1a0e06, inset 0 0 30px rgba(0,0,0,.8), 0 30px 60px rgba(0,0,0,.8), 0 0 80px rgba(120,200,255,.15); }
.peek-crt::after { content: ''; position: absolute; right: 2.4%; top: 12%; width: 5%; height: 60%; border-radius: 6px; background: repeating-linear-gradient(#1a0e06 0 6px, #3a2210 6px 10px); }
.peek-crt .peek-screen { position: relative; width: 100%; height: 100%; }
.peek-screen { position: absolute; overflow: hidden; border-radius: 18px / 22px; background: #0a0f12; box-shadow: inset 0 0 40px rgba(0,0,0,.9); }
.peek-vid { opacity: 0; transition: opacity .25s; } .peek-vid.on { opacity: 1; }
.peek-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) contrast(1.08); }
.peek-static { position: absolute; inset: 0; z-index: 2; opacity: 0; background: repeating-radial-gradient(circle at 17% 32%, #fff 0 1px, #000 1px 2px), repeating-radial-gradient(circle at 63% 71%, #ccc 0 1px, #111 1px 3px); background-size: 180px 180px, 130px 130px; animation: peekStatic .12s steps(3) infinite; }
.peek-static.on { opacity: .85; } .peek-static.fade { opacity: 0; transition: opacity .5s; }
@keyframes peekStatic { 33% { background-position: 40px 70px, -30px 20px; } 66% { background-position: -60px 10px, 50px -40px; } }
.peek-scan { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 2px, rgba(0,0,0,0) 2px 4px), radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.06), rgba(0,0,0,.55) 90%); }
.peek-osd { position: absolute; left: 6%; top: 7%; z-index: 4; display: flex; gap: 16px; font: 28px var(--f-type); color: #6dff6d; text-shadow: 0 0 8px #3f3; opacity: 0; }
.peek-osd.on { opacity: 1; }
.peek-vcr { position: absolute; left: 50%; bottom: 3%; width: 50%; height: 11%; transform: translateX(-50%); border-radius: 6px; background: linear-gradient(#c8ccd2, #8a9098); box-shadow: 0 10px 30px rgba(0,0,0,.8); }
.peek-vcr .slot { position: absolute; left: 25%; top: 30%; width: 40%; height: 26%; background: #111; border-radius: 3px; }
.peek-vcr .led { position: absolute; right: 8%; top: 38%; width: 10px; height: 10px; border-radius: 50%; background: #3f3; box-shadow: 0 0 10px #3f3; }
.peek-vcr span { position: absolute; left: 6%; top: 30%; font: 700 14px var(--f-body); color: #333; }
.peek-tape { position: absolute; left: 50%; bottom: 0; width: 13%; transform: translate(-50%, 40%); z-index: 6; box-shadow: 0 10px 30px rgba(0,0,0,.8); pointer-events: none; }
.peek-cap { margin-top: 12px; text-align: center; color: var(--bone-dim); }
.vhs-panel .vhs-stage { position: relative; }
.vhs-panel .vhs-play { bottom: auto; top: 54%; }
/* guestbook pages: painted paper (cropped from the painted guestbook, assets/closeups/guestbook-*.webp) */
.book-left { background: linear-gradient(90deg, rgba(244,232,200,.18), rgba(90,60,20,0) 70%), url(../assets/closeups/guestbook-left.webp) center / cover no-repeat, #e6d3a8; }
.book-right { background: linear-gradient(90deg, rgba(90,60,20,.12), rgba(244,232,200,.22) 30%, rgba(244,232,200,.22)), url(../assets/closeups/guestbook-right.webp) center / cover no-repeat, #e6d3a8; }
/* the painted MIDNIGHT VIDEO neon (assets/scenes/neon-midnight.webp, the tubes keyed out of the painted sign) */
.neon-title.neon-img { left: 560px; top: 171px; width: 408px; height: auto; filter: saturate(1.4) drop-shadow(0 0 1.5px rgba(50,0,40,.95)) drop-shadow(0 0 4px #ff4ae0) drop-shadow(0 0 12px #ff1ac8) drop-shadow(0 0 26px rgba(255,30,190,.6)); animation: neonBuzz 7s infinite steps(1, end); }
@keyframes neonBuzz { 0%, 61%, 63.5%, 66%, 100% { opacity: 1; } 62% { opacity: .35; } 64.5% { opacity: .55; } 65.2% { opacity: .9; } 88% { opacity: .82; } 88.6% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .neon-title.neon-img { animation: none; } }

/* intro start screen (one click so the browser allows sound) */
.intro-gate { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; border: 0; margin: 0; padding: 16px; width: 100%; background: radial-gradient(ellipse at 50% 45%, rgba(40,6,10,.55), rgba(0,0,0,.92) 70%); color: #e9dfc8; cursor: pointer; opacity: 0; transition: opacity .6s ease; font: inherit; }
.intro-gate.in { opacity: 1; }
.intro-gate.out { opacity: 0; pointer-events: none; }
.intro-gate .ig-title { font-family: var(--f-display); font-size: clamp(44px, 8vw, 100px); color: #c8141e; letter-spacing: .04em; text-shadow: 0 0 18px rgba(200,20,30,.45), 0 4px 0 #000; line-height: 1; text-align: center; }
.intro-gate .ig-go { font-family: var(--f-body); font-size: clamp(18px, 2.6vw, 26px); letter-spacing: .3em; text-transform: uppercase; animation: igPulse 2.2s ease-in-out infinite; }
.intro-gate .ig-note { font-size: 13px; letter-spacing: .25em; text-transform: uppercase; opacity: .55; }
.intro-gate:focus-visible { outline: none; }
.intro-gate:focus-visible .ig-go { outline: 2px solid rgba(200,20,30,.7); outline-offset: 8px; }
@keyframes igPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .intro-gate .ig-go { animation: none; } }

/* ===== Character separation (grading pass 2) =====
   Painted cut-out characters sit on painted rooms of similar colour (Fernando on the greenhouse
   greens, Pallsworth on the gallery wallpaper), so they get a shared, subtle lift:
   - a slight contrast/saturation boost (no hue change, so they are not recoloured)
   - a 1px warm-white rim light from the upper left, like a key light catching the ink edge
   - a soft dark ink halo that separates the silhouette from the background
   - a dark contact shadow below
   Ghosts keep their cold glow; they get the contrast lift and the ink halo only. */
.pchar, img.mortimer {
  filter: contrast(1.07) saturate(1.12)
    drop-shadow(-1px -1px 0 rgba(255,238,205,.42))
    drop-shadow(0 0 5px rgba(0,0,0,.62))
    drop-shadow(0 12px 12px rgba(0,0,0,.5));
}
.pghost:not(.pchar) {
  filter: contrast(1.05) saturate(1.08)
    drop-shadow(0 0 3px rgba(0,0,0,.5))
    drop-shadow(0 0 14px rgba(170,220,255,.5));
}

/* "Used X" floating up from the click point */
.used-float { position: fixed; z-index: 2147483000; pointer-events: none; display: flex; align-items: center; gap: 8px; transform: translate(-50%, -100%);
  padding: 6px 14px 7px 8px; background: rgba(12,6,8,.88); border: 1px solid rgba(201,164,92,.6); border-radius: 999px; color: var(--bone, #eadfc6);
  font-family: var(--f-body, Georgia, serif); font-size: 18px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 18px rgba(255,170,80,.25);
  animation: usedFloat 1.9s cubic-bezier(.2,.7,.3,1) forwards; }
.used-float b { color: #ffcf7a; font-weight: 600; }
.used-float .uf-icon { width: 30px; height: 30px; display: inline-flex; }
.used-float .uf-icon img, .used-float .uf-icon svg { width: 100%; height: 100%; object-fit: contain; }
@keyframes usedFloat { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.85); } 12% { opacity: 1; transform: translate(-50%, -110%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .used-float { animation: usedFade 1.9s linear forwards; } @keyframes usedFade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } } }