@font-face{font-family:"Silkscreen";src:url("../fonts/silkscreen-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Silkscreen";src:url("../fonts/silkscreen-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"VT323";src:url("../fonts/vt323-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
/* Layout: full-bleed pixel canvas; DOM overlays for menu, HUD and modals. Single dark look by design. */
:root{
  --ink:#08070b; --ink2:#141118; --bone:#e9e2cf; --dim:#9a927f;
  --amber:#e0a64a; --blood:#a3302a; --line:#3a3340;
  --f-title:"Silkscreen","Courier New",monospace;
  --f-body:"VT323","Courier New",monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;background:var(--ink);color:var(--bone);font-family:var(--f-body);font-size:22px;}
#view{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block;background:#000;cursor:crosshair}
.layer{position:fixed;inset:0;pointer-events:none}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));}
button,.btn{font-family:var(--f-title);font-size:15px;letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--bone);border:2px solid var(--line);padding:10px 16px;cursor:pointer;text-align:left;pointer-events:auto}
button:hover,.btn:hover,button:focus-visible,.btn:focus-visible{border-color:var(--amber);color:var(--amber);outline:none;background:rgba(224,166,74,.06)}
button.small{font-size:12px;padding:6px 10px}
h1,h2{font-family:var(--f-title);font-weight:700;margin:0;text-wrap:balance}
#grain{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:.12;mix-blend-mode:screen;pointer-events:none}
#vig{background:radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(0,0,0,.75) 100%)}
#danger{background:radial-gradient(ellipse at center,rgba(0,0,0,0) 35%,rgba(140,10,10,.9) 100%);opacity:0}

/* gate */
#gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:var(--ink);cursor:pointer;text-align:center;z-index:30}
#gate .knob{width:54px;height:54px;border:3px solid var(--amber);border-radius:50%;position:relative;animation:turn 3s steps(8) infinite}
#gate .knob:after{content:"";position:absolute;left:50%;top:4px;width:4px;height:16px;background:var(--amber);transform:translateX(-50%)}
@keyframes turn{to{transform:rotate(360deg)}}
#gate p{margin:0;color:var(--dim);font-size:24px}
#gate h2{font-size:18px;color:var(--amber);letter-spacing:.12em}

/* menu */
#menu{position:fixed;inset:0;display:flex;align-items:center;z-index:10;pointer-events:none}
#menu .col{display:flex;flex-direction:column;gap:12px;max-width:420px;padding-block:24px;pointer-events:auto}
#menu h1{font-size:clamp(34px,7vw,64px);line-height:.95;color:var(--bone);text-shadow:4px 4px 0 var(--blood)}
#menu .sub{color:var(--dim);font-size:24px;margin:0 0 10px;max-width:34ch}
#menu .np{font-size:20px;color:var(--amber);margin-top:14px}
#menu .np b{font-family:var(--f-title);font-size:12px;font-weight:400;color:var(--dim);letter-spacing:.1em;display:block}
#menu .warn{font-size:19px;color:var(--dim)}

/* panels */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(5,4,8,.82);z-index:20;pointer-events:auto}
.panel{background:var(--ink2);border:2px solid var(--line);max-width:640px;width:100%;max-height:86vh;overflow:auto;padding:22px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px}
.panel h2{font-size:20px;color:var(--amber);letter-spacing:.06em}
.panel p{margin:0;line-height:1.15}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.keys{display:grid;grid-template-columns:auto 1fr;gap:4px 18px}
.keys kbd{font-family:var(--f-title);font-size:12px;color:var(--amber);white-space:nowrap}
.slot{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;border-top:1px solid var(--line);padding-top:10px}
.slot .nm{font-family:var(--f-title);font-size:13px}
.slot .src{color:var(--dim);font-size:19px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .act{display:flex;gap:8px;grid-row:span 2}
input[type=range]{width:200px;accent-color:var(--amber);max-width:100%}
label.rng{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.vis{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.credits li{margin:4px 0}
.credits li b{font-family:var(--f-title);font-size:14px;font-weight:400;color:var(--amber);margin-right:8px}
ul{margin:0;padding-left:18px}

/* hud */
#hud{z-index:5}
#hud .tl{position:absolute;top:14px;left:max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:2px;max-width:min(60vw,520px)}
#room{font-family:var(--f-title);font-size:13px;letter-spacing:.12em;color:var(--dim)}
#obj{font-size:22px;text-shadow:2px 2px 0 #000}
#cross{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--bone);opacity:.7}
#prompt{position:absolute;left:50%;top:58%;transform:translateX(-50%);font-size:24px;text-shadow:2px 2px 0 #000;white-space:nowrap}
#prompt kbd{font-family:var(--f-title);font-size:12px;border:2px solid var(--amber);color:var(--amber);padding:1px 6px;margin-right:8px}
#inv{position:absolute;left:max(16px,env(safe-area-inset-left,0px));bottom:16px;display:flex;gap:8px;flex-wrap:wrap;max-width:50vw}
.chip{border:2px solid var(--line);background:rgba(8,7,11,.7);padding:2px 8px;font-size:19px;display:flex;gap:6px;align-items:center}
.chip i{width:10px;height:10px;display:inline-block}
.chip kbd{font-size:13px;padding:0 4px;border:1px solid var(--line)}
#invList{display:flex;flex-direction:column;gap:8px;margin:12px 0 16px}#invList .empty{color:var(--dim)}
#radioHud{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:16px;border:2px solid var(--line);background:rgba(8,7,11,.75);padding:8px 12px;min-width:230px}
#radioHud .t{font-family:var(--f-title);font-size:11px;color:var(--dim);letter-spacing:.12em}
#radioHud .s{font-size:24px;color:var(--amber)}
#radioHud .s.off{color:var(--dim)}
#radioHud .s.forced{color:#ff6b5e;animation:blink .5s steps(2) infinite}
#radioHud .k{font-size:17px;color:var(--dim)}
@keyframes blink{50%{opacity:.4}}
#stam{position:absolute;left:50%;bottom:18px;width:160px;height:4px;margin-left:-80px;background:rgba(255,255,255,.08)}
#stam i{display:block;height:100%;background:var(--bone);width:100%}
#crowHint{position:absolute;left:50%;top:66%;transform:translateX(-50%);font-size:26px;color:#ff6040;text-shadow:2px 2px 0 #000;white-space:nowrap;animation:crowPulse .5s infinite alternate}
#crowHint kbd{font-size:20px;padding:0 6px;border:2px solid #ff6040}
@keyframes crowPulse{from{opacity:.65}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#crowHint{animation:none}}
#toast{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-size:26px;text-shadow:2px 2px 0 #000;text-align:center;max-width:80vw;transition:opacity .4s}
body.nolock #view{cursor:none} /* no pointer lock available: hide the cursor over the game so it feels captured */
#clickhint{position:absolute;left:50%;top:40%;transform:translateX(-50%);font-family:var(--f-title);font-size:13px;color:var(--amber);letter-spacing:.1em}

/* note */
.paper{background:#d9cfb6;color:#2a2018;max-width:520px;width:100%;padding:26px 28px;box-sizing:border-box;font-size:25px;line-height:1.1;box-shadow:8px 8px 0 #000;display:flex;flex-direction:column;gap:12px}
.paper h3{margin:0;font-family:var(--f-title);font-size:14px;letter-spacing:.08em;color:#6b2a20}
.paper p{margin:0;white-space:pre-line}
.paper button{color:#2a2018;border-color:#2a2018;align-self:flex-start}

/* safe */
.keypad{display:grid;grid-template-columns:repeat(3,64px);gap:8px;justify-content:center}
.keypad button{text-align:center;font-size:18px}
#safeScreen{font-family:var(--f-title);font-size:30px;text-align:center;color:var(--amber);background:#000;padding:8px;letter-spacing:.4em;border:2px solid var(--line)}

/* hide */
#hide{background:repeating-linear-gradient(0deg,rgba(0,0,0,.96) 0 22px,rgba(0,0,0,0) 22px 34px);z-index:4}
#hide span{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);font-size:22px;color:var(--dim);background:#000;padding:2px 10px}

/* scare / end */
#scare{z-index:40;background:#000;display:flex;align-items:center;justify-content:center}
#scare canvas{width:min(90vw,90vh);height:min(90vw,90vh);image-rendering:pixelated;animation:shake .06s infinite}
@keyframes shake{0%{transform:translate(6px,-4px) scale(1.05)}50%{transform:translate(-8px,5px) scale(1.12)}100%{transform:translate(3px,7px) scale(1.08)}}
#end .panel{text-align:left}
#end h2{font-size:30px}
.lose h2{color:#ff6b5e!important}
@media (max-width:600px){html,body{font-size:20px}#radioHud{min-width:0}#prompt{font-size:20px}}
@media (prefers-reduced-motion:reduce){#scare canvas{animation:none}#gate .knob{animation:none}}

/* chapters + level card */
.chap{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;border-top:1px solid var(--line);padding-top:10px}
.chap .nm{font-family:var(--f-title);font-size:14px}
.chap .ds{color:var(--dim);font-size:19px;grid-column:1}
.chap button{grid-row:span 2;grid-column:2}
button:disabled{opacity:.35;cursor:not-allowed;border-color:var(--line)!important;color:var(--bone)!important;background:transparent!important}
#levelCard{position:absolute;left:50%;top:34%;transform:translateX(-50%);text-align:center;transition:opacity .8s;opacity:0}
#levelCard .n{font-family:var(--f-title);font-size:14px;letter-spacing:.2em;color:var(--amber)}
#levelCard .t{font-family:var(--f-title);font-size:clamp(26px,5vw,44px);text-shadow:4px 4px 0 var(--blood)}
#menu .quit{margin-top:4px}
#menu{overflow-y:auto;align-items:safe center}
#menu .col{gap:10px}
@media (max-height:700px){#menu h1{font-size:40px}#menu .sub{font-size:20px;margin-bottom:2px}#menu button{padding:7px 14px}#menu .col{gap:7px}}
#levelCard{top:42%}

#coopJoin { margin-top: 1rem; }
#coopJoin label { display: block; color: var(--dim); }
#coopCode {
  width: 13ch;
  color: var(--amber);
  background: #100c0a;
  border: 1px solid var(--dim);
  padding: .45rem;
  font: inherit;
  text-transform: uppercase;
}
#coopRoomCode { letter-spacing: .15em; color: var(--amber); }
#coopStatus { min-height: 1.5em; color: var(--amber); }
#coopHud {
  position: absolute;
  right: 22px;
  top: 22px;
  color: var(--amber);
  font-family: var(--f-title);
  font-size: 10px;
  text-align: right;
}

.journal-title { font: 400 12px var(--f-title); color: var(--amber); }