:root {
  --ink: #e9e6dc;
  --dim: #8d8a80;
  --blood: #7a0c0c;
  --panel: rgba(8, 9, 8, 0.86);
  --serif: 'IM Fell English SC', 'IM Fell English', Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--ink); font-family: var(--serif); user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font-family: var(--serif); color: var(--ink); background: none; border: 0; cursor: pointer; }
.hidden { display: none !important; }

/* Post FX overlays */
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.55) 80%, rgba(0,0,0,.92) 100%); z-index: 2; }
#grain { position: fixed; inset: -50%; pointer-events: none; z-index: 3; opacity: .09; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain .5s steps(4) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-5%,3%)} 50%{transform:translate(4%,-6%)} 75%{transform:translate(-3%,-2%)} 100%{transform:translate(2%,5%)} }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 40; transition: opacity .8s; }

/* Screens */
.screen { position: fixed; inset: 0; z-index: 20; }
#loading { background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.load-title { font-size: clamp(36px, 8vw, 72px); letter-spacing: .12em; transform: scaleY(1.5); }
.load-bar { width: min(320px, 70vw); height: 4px; background: #222; }
#load-fill { height: 100%; width: 0; background: var(--ink); transition: width .2s; }
#load-text { color: var(--dim); font-size: 14px; }

#menu { display: flex; align-items: center; justify-content: space-between; padding: 0 6vw; padding-left: max(6vw, env(safe-area-inset-left)); }
.menu-buttons { display: flex; flex-direction: column; gap: 2.4vh; }
.menu-buttons button { white-space: nowrap; font-size: clamp(18px, min(3.6vh, 3.4vw), 34px); text-align: left; padding: 6px 14px; background: rgba(0,0,0,.55); text-shadow: 0 0 8px #000; transition: color .2s, transform .2s; }
.menu-buttons button:hover { color: #fff; transform: translateX(6px); }
.menu-title { font-size: clamp(36px, min(13vh, 9vw), 130px); line-height: .9; letter-spacing: .1em; text-align: center; transform: scaleY(1.45); transform-origin: center; text-shadow: 0 0 18px #000, 0 0 2px #000; color: #ddd8cc; }
.menu-foot { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: var(--dim); font-size: 13px; text-shadow: 0 0 6px #000; }

.panel { background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 14px; padding: 20px 16px; overflow-y: auto; }
.panel h2 { font-size: 34px; margin: 0 0 8px; letter-spacing: .08em; }
.panel .list { display: flex; flex-direction: column; gap: 8px; width: min(440px, 100%); }
.panel .list button { font-size: 22px; padding: 10px 14px; text-align: left; border: 1px solid #333; background: rgba(255,255,255,.03); }
.panel .list button:hover { border-color: #888; }
.panel .list button small { display: block; font-family: 'IM Fell English', serif; font-size: 14px; color: var(--dim); }
.panel label { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: min(440px, 100%); font-size: 18px; }
.panel label.check { justify-content: flex-start; }
.panel select, .panel input[type=range] { width: 50%; accent-color: #aaa; background: #111; color: var(--ink); font-family: var(--serif); font-size: 16px; }
.panel .back { font-size: 20px; color: var(--dim); margin-top: 10px; padding: 8px 20px; }
#msg-body { max-width: 520px; text-align: center; font-family: 'IM Fell English', serif; font-size: 18px; line-height: 1.5; color: #cfcabd; }
#msg-body input { font-family: var(--serif); font-size: 32px; letter-spacing: .3em; width: 180px; text-align: center; background: #111; color: var(--ink); border: 1px solid #555; text-transform: uppercase; }

/* HUD */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#hud button { pointer-events: auto; }
.hud-icon { position: absolute; color: rgba(235,230,220,.75); filter: drop-shadow(0 0 3px #000); }
#hud-crouch { top: max(14px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left)); width: 34px; height: 64px; }
#hud-crouch svg { width: 100%; height: 100%; }
#hud-crouch.crouched svg { transform: scaleY(.6); transform-origin: bottom; }
#hud-pause { top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: 44px; height: 44px; padding: 8px; border: 2px solid rgba(235,230,220,.6); border-radius: 6px; }
#hud-pause svg { width: 100%; height: 100%; }
#hud-item { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); text-align: right; }
#hud-item-name { font-size: 20px; text-shadow: 0 0 6px #000, 0 0 2px #000; }
#hud-day { position: absolute; top: max(66px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); color: var(--dim); font-size: 16px; text-shadow: 0 0 4px #000; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: rgba(255,255,255,.55); }
#actions { position: absolute; left: 0; right: 0; bottom: 14vh; display: flex; justify-content: center; gap: 36px; }
#actions button { font-size: clamp(30px, 7vh, 54px); text-shadow: 0 0 10px #000, 0 0 3px #000; padding: 4px 10px; animation: pop .15s ease-out; }
#actions button .key { font-size: .45em; color: var(--dim); vertical-align: middle; margin-left: 8px; }
@keyframes pop { from { transform: scale(.85); opacity: .3 } to { transform: none; opacity: 1 } }
#toast { position: absolute; left: 0; right: 0; top: 22vh; text-align: center; font-size: 22px; text-shadow: 0 0 8px #000; opacity: 0; transition: opacity .4s; font-family: 'IM Fell English', serif; font-style: italic; }
#toast.show { opacity: 1; }

/* mobile controls */
#joy, #mob-buttons { display: none; }
body.touch #joy { display: block; position: absolute; left: max(4vw, env(safe-area-inset-left)); bottom: 6vh; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.1); border: 3px solid rgba(255,255,255,.55); pointer-events: auto; }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; background: rgba(255,255,255,.35); }
body.touch #mob-buttons { display: flex; flex-direction: column; gap: 10px; position: absolute; right: max(3vw, env(safe-area-inset-right)); bottom: 6vh; }
#mob-buttons button { pointer-events: auto; font-size: 17px; width: 76px; height: 46px; border: 2px solid rgba(255,255,255,.45); border-radius: 23px; background: rgba(0,0,0,.35); }
#mob-buttons button.on { background: rgba(255,255,255,.25); }
body:not(.holding) #mob-drop, body:not(.holding) #mob-throw { display: none; }
body.touch #crosshair { opacity: .35; }

#daybanner { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; font-size: clamp(48px, 12vh, 110px); letter-spacing: .2em; color: #ddd; text-shadow: 0 0 20px #000; pointer-events: none; animation: dayfade 3.2s forwards; }
@keyframes dayfade { 0%{opacity:0} 20%{opacity:1} 75%{opacity:1} 100%{opacity:0} }

#paper { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: auto; }
#paper .sheet { width: min(520px, 100%); max-height: 88vh; overflow-y: auto; padding: 28px 30px; background: #d9cfb4; color: #2a2116; font-family: 'IM Fell English', serif; font-size: 19px; line-height: 1.5; box-shadow: 0 0 40px #000; background-image: radial-gradient(circle at 30% 20%, rgba(120,90,40,.25), transparent 40%), radial-gradient(circle at 80% 85%, rgba(90,50,20,.3), transparent 35%); transform: rotate(-1deg); }
#paper .sheet h3 { margin: 0 0 10px; font-family: var(--serif); }
.paper-close { margin-top: 16px; text-align: right; font-size: 14px; color: #6a5c45; }

#scare { position: fixed; inset: 0; z-index: 50; background: radial-gradient(circle, rgba(120,0,0,.0), rgba(80,0,0,.7)); animation: scareflash .12s steps(2) 6; pointer-events: none; }
@keyframes scareflash { 0%{background-color: rgba(255,255,255,.15)} 100%{background-color: rgba(120,0,0,.25)} }

#ending { background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 10px; }
#ending h1 { font-size: clamp(40px, 9vw, 84px); margin: 0; letter-spacing: .1em; transform: scaleY(1.3); }
#ending p { max-width: 600px; font-family: 'IM Fell English', serif; font-size: 20px; color: #bdb6a6; line-height: 1.55; }
#end-btn { font-size: 24px; margin-top: 20px; padding: 10px 24px; border: 1px solid #555; }

/* Close-up puzzle panels */
#closeup { position: fixed; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); padding: 12px; }
.cu-box { background: rgba(14,14,13,.95); border: 1px solid #555; padding: 18px 20px; width: min(460px, 100%); max-height: 96vh; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 0 40px #000; }
.cu-box.shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-8px) } 50% { transform: translateX(8px) } 75% { transform: translateX(-4px) } }
.cu-title { font-size: 24px; letter-spacing: .06em; text-align: center; }
.cu-body { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.cu-display { font-size: 38px; letter-spacing: .25em; background: #0a0d0a; color: #b8e0b0; padding: 6px 18px; border: 1px solid #333; font-family: 'Courier New', monospace; min-width: 180px; text-align: center; }
.cu-keys { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; }
.cu-key { height: 52px; font-size: 22px; border: 1px solid #555; background: #1c1c1a; }
.cu-key:active, .cu-pkey:active, .cu-arrow:active { background: #3a3a36; }
.cu-dials { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cu-dial { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cu-dial-v { font-size: 34px; min-width: 64px; height: 56px; display: flex; align-items: center; justify-content: center; background: #1a1712; border: 1px solid #5a4a30; color: #e2d2a8; font-family: Georgia, serif; }
.cu-arrow { width: 64px; height: 40px; font-size: 18px; border: 1px solid #555; background: #1c1c1a; }
.cu-arrow.wide { width: 120px; font-size: 16px; }
.cu-ok { font-size: 20px; padding: 8px 22px; border: 1px solid #888; background: #23221e; }
.cu-piano { display: flex; gap: 3px; }
.cu-pkey { width: 48px; height: 150px; background: linear-gradient(#e8e2d0, #c9c0a8); color: #3a3020; border-radius: 0 0 5px 5px; font-size: 18px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.cu-hint { color: var(--dim); font-family: 'IM Fell English', serif; font-style: italic; font-size: 15px; text-align: center; }
.cu-msg { min-height: 22px; font-size: 18px; font-family: 'IM Fell English', serif; }
.cu-msg.bad { color: #c86a5a; } .cu-msg.good { color: #9ac890; }
.cu-close { font-size: 18px; color: var(--dim); padding: 6px 18px; }
@media (max-height: 420px) { .cu-pkey { height: 110px; width: 40px; } .cu-key { height: 40px; } .cu-display { font-size: 28px; } .cu-box { padding: 10px; gap: 8px; } }

/* chat + pings (co-op) */
#chat { position: fixed; left: 12px; bottom: 30vh; z-index: 12; width: min(340px, 60vw); pointer-events: none; font-family: 'IM Fell English', serif; font-size: 16px; text-shadow: 0 0 4px #000; }
#chat .line { opacity: .9; margin-top: 3px; }
#chat-input { position: fixed; left: 12px; bottom: 24vh; z-index: 13; width: min(340px, 70vw); font-size: 16px; background: rgba(0,0,0,.7); color: var(--ink); border: 1px solid #666; padding: 6px; font-family: 'IM Fell English', serif; }
#pingwheel { position: fixed; inset: 0; z-index: 14; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#pingwheel .wheel { display: grid; grid-template-columns: repeat(2, 150px); gap: 8px; pointer-events: auto; }
#pingwheel button { font-size: 18px; padding: 12px 6px; border: 1px solid #777; background: rgba(0,0,0,.75); }
.ping-tag, .name-tag { position: fixed; z-index: 9; transform: translate(-50%, -100%); pointer-events: none; font-size: 15px; text-shadow: 0 0 4px #000, 0 0 2px #000; white-space: nowrap; text-align: center; }
.ping-tag { color: #f0e6a0; font-size: 17px; }
.name-tag.down { color: #ff6050; }
#coop-status { position: fixed; top: max(66px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 10; font-size: 15px; color: var(--dim); text-shadow: 0 0 4px #000; pointer-events: none; }
#revive-bar { position: fixed; left: 50%; bottom: 26vh; transform: translateX(-50%); width: 200px; height: 6px; background: #222; z-index: 11; }
#revive-bar div { height: 100%; background: #ddd; width: 0; }
.extras-list { text-align: left; max-width: 560px; width: 100%; }
.extras-list h3 { margin: 14px 0 6px; font-size: 20px; }
.extras-list .entry { border-top: 1px solid #333; padding: 8px 0; font-family: 'IM Fell English', serif; font-size: 16px; color: #cfc9ba; }
.extras-list .locked { color: #555; }
#menu .menu-buttons button.hidden { display: none; }

#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  body.playing #rotate { display: flex; position: fixed; inset: 0; z-index: 100; background: #000; align-items: center; justify-content: center; font-size: 26px; text-align: center; padding: 24px; }
}
body:not(.coop) .coop-only { display: none !important; }
#lobby .cu-display { font-size: 52px; letter-spacing: .35em; }
#lobby label, #joinform label { width: min(440px, 100%); }
#joinform input { width: 55%; font-family: var(--serif); font-size: 20px; background: #111; color: var(--ink); border: 1px solid #555; padding: 4px 8px; }