/* BACKROOMS: SIGNAL LOST — 3D Edition */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'Courier New',Courier,monospace;overscroll-behavior:none;touch-action:none;}
button{font-family:inherit;cursor:pointer;outline:none;border:none;}
.hidden{display:none!important;}

#rotate-notice{display:none;position:fixed;inset:0;z-index:9999;background:#000;flex-direction:column;align-items:center;justify-content:center;}
@media(orientation:portrait){#rotate-notice{display:flex;}#game-wrap{display:none;}}
@media(orientation:landscape){#rotate-notice{display:none;}#game-wrap{display:block;}}
.rn-inner{text-align:center;}
.rn-icon{font-size:3.5rem;color:#4a3c0a;display:block;margin-bottom:18px;animation:spin 2s linear infinite;}
.rn-title{font-size:clamp(1rem,4.5vw,1.8rem);letter-spacing:.35em;color:#c8a400;text-shadow:0 0 20px #c8a40040;margin-bottom:8px;}
.rn-sub{font-size:clamp(.48rem,2vw,.68rem);letter-spacing:.18em;color:#2e2406;}

#game-wrap{position:fixed;inset:0;}
#loading-screen{position:absolute;inset:0;background:#020100;display:flex;align-items:center;justify-content:center;z-index:500;}
.lw{text-align:center;padding:18px;max-width:380px;width:100%;}
.lw-title{font-size:clamp(1.8rem,7vw,3.2rem);letter-spacing:.45em;color:#c8a400;text-shadow:0 0 16px #c8a40060,0 0 38px #c8a40020;animation:flicker 4s infinite;}
.lw-sub{font-size:clamp(.48rem,2vw,.72rem);letter-spacing:.44em;color:#3a2c06;margin-bottom:3px;}
.lw-line{width:100%;height:1px;background:linear-gradient(90deg,transparent,#3a2c06,transparent);margin:12px 0 16px;}
.lw-status{font-size:clamp(.46rem,1.9vw,.62rem);letter-spacing:.1em;color:#2a1e04;min-height:1.1em;margin-bottom:7px;}
.lw-bar-wrap{width:210px;height:2px;background:#0c0800;border:1px solid #201600;margin:0 auto 22px;}
.lw-bar{height:100%;width:0%;background:linear-gradient(90deg,#4a2800,#c8a400);box-shadow:0 0 4px #c8a40044;transition:width .25s;}
.lw-btn{background:none;border:1px solid #c8a400;color:#c8a400;font-size:clamp(.7rem,2.8vw,.9rem);letter-spacing:.22em;padding:11px 28px;animation:blink .9s step-end infinite;}
.lw-btn:active{background:rgba(200,164,0,.1);}
.lw-warn{margin-top:14px;font-size:clamp(.42rem,1.6vw,.54rem);letter-spacing:.07em;color:#1c1602;line-height:1.5;}

/* WebGL canvas — full screen, 3D renders here */
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
/* 2D overlay canvas — VHS grain etc */
#overlay-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block;z-index:4;}

/* HUD */
#hud-bar{position:absolute;top:8px;left:0;right:0;display:flex;justify-content:center;z-index:20;pointer-events:none;}
#entity-alert{font-size:clamp(.5rem,2.2vw,.65rem);letter-spacing:.18em;color:#8a1a1a;animation:blink .48s step-end infinite;white-space:nowrap;}

#pickup-notif{position:absolute;bottom:17%;left:50%;transform:translateX(-50%);font-size:clamp(.48rem,2vw,.62rem);letter-spacing:.11em;color:#9e7a12;background:rgba(0,0,0,.76);border:1px solid #3a2a06;padding:5px 14px;border-radius:1px;z-index:25;pointer-events:none;opacity:0;transition:opacity .4s;white-space:nowrap;}

/* Tape popup */
#tape-popup{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.92);z-index:200;}
.tp-inner{max-width:300px;width:88%;border:1px solid #241a02;background:#030201;padding:18px;text-align:center;}
.tp-label{font-size:clamp(.52rem,2.2vw,.68rem);letter-spacing:.18em;color:#7a6010;margin-bottom:11px;}
.tp-text{font-size:clamp(.46rem,1.9vw,.6rem);letter-spacing:.05em;color:#2e2408;line-height:1.95;margin-bottom:13px;font-style:italic;}
#tape-close{background:none;border:1px solid #2a1a02;color:#2a1a02;font-size:clamp(.44rem,1.7vw,.56rem);letter-spacing:.13em;padding:7px 14px;}

/* Scanner */
#scanner-wrap{position:absolute;bottom:14%;right:16%;display:flex;align-items:center;gap:9px;z-index:28;pointer-events:none;}
#sc-ring{position:relative;width:min(108px,21vw);height:min(108px,21vw);border:1px solid #090;border-radius:50%;overflow:hidden;background:rgba(0,7,0,.97);box-shadow:0 0 12px rgba(0,130,0,.10),inset 0 0 8px rgba(0,130,0,.03);}
#sc-sweep{position:absolute;top:0;left:50%;width:50%;height:50%;transform-origin:left bottom;background:linear-gradient(90deg,transparent,rgba(0,155,0,.20));animation:radar 2.2s linear infinite;}
#sc-h,#sc-v{position:absolute;background:rgba(0,95,0,.14);}
#sc-h{top:50%;left:0;width:100%;height:1px;transform:translateY(-50%);}
#sc-v{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%);}
#sc-dots{position:absolute;inset:0;width:100%;height:100%;}
#sc-read{font-size:clamp(.34rem,1.4vw,.46rem);letter-spacing:.04em;color:#076;line-height:1.7;text-shadow:0 0 3px #0761;}
#sc-entity{color:#090;}

/* Minimap */
#minimap-canvas{position:absolute;top:9px;right:11px;width:78px;height:78px;border:1px solid #181204;background:rgba(0,0,0,.86);z-index:20;border-radius:1px;image-rendering:pixelated;opacity:.88;}

/* FX */
#prox-vignette{position:absolute;inset:0;pointer-events:none;z-index:30;opacity:0;background:radial-gradient(ellipse at center,transparent 22%,rgba(90,0,0,.10) 55%,rgba(50,0,0,.50) 100%);transition:opacity .3s;}
#static-overlay{position:absolute;inset:0;pointer-events:none;z-index:32;opacity:0;}
.sf{animation:sfAnim .09s steps(2) infinite;}
#hb-flash{position:absolute;inset:0;pointer-events:none;z-index:31;opacity:0;background:rgba(130,0,0,.17);}
#whisper-text{position:absolute;bottom:21%;left:50%;transform:translateX(-50%);font-size:clamp(.46rem,1.9vw,.64rem);letter-spacing:.12em;color:rgba(150,116,40,.66);pointer-events:none;z-index:25;text-align:center;white-space:nowrap;transition:opacity .9s;opacity:0;}

/* Exit hint */
#exit-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(1rem,4vw,1.5rem);letter-spacing:.3em;color:#1aee64;text-shadow:0 0 20px #1aee6480;pointer-events:none;z-index:26;animation:blink .6s step-end infinite;}

/* Jumpscare */
#jumpscare-wrap{position:absolute;inset:0;z-index:900;background:#000;}
#jumpscare-canvas{width:100%;height:100%;display:block;}

/* End screens */
#death-screen,#win-screen{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:910;}
.end-box{text-align:center;padding:18px;max-width:340px;width:90%;}
.end-title{font-size:clamp(1.5rem,6vw,2.4rem);letter-spacing:.22em;color:#c8a400;text-shadow:0 0 18px #c8a40028;animation:flicker 2.5s infinite;margin-bottom:10px;}
.win-t{color:#1e9848;text-shadow:0 0 18px #1e984828;}
.end-sub{font-size:clamp(.5rem,2.1vw,.66rem);letter-spacing:.1em;color:#2a2008;margin-bottom:8px;}
.win-s{color:#0e3018;}
.end-stats{font-size:clamp(.42rem,1.7vw,.56rem);letter-spacing:.08em;color:#1c1806;line-height:2.1;margin-bottom:24px;}
.end-btn{background:none;border:1px solid #c8a400;color:#c8a400;font-size:clamp(.6rem,2.4vw,.78rem);letter-spacing:.15em;padding:10px 22px;}
.end-btn:active{background:rgba(200,164,0,.09);}
.win-btn{border-color:#1e9848;color:#1e9848;}

/* Controls */
#joy-zone{position:absolute;bottom:8px;left:14px;width:128px;height:128px;display:flex;align-items:center;justify-content:center;z-index:50;}
#joy-base{width:94px;height:94px;border-radius:50%;border:1px solid rgba(152,118,18,.18);background:rgba(0,0,0,.46);position:relative;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 16px rgba(0,0,0,.72);}
#joy-knob{position:absolute;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(195,155,42,.84),rgba(125,88,8,.64));border:1px solid rgba(195,155,42,.50);box-shadow:0 2px 8px rgba(0,0,0,.62);pointer-events:none;}
#look-zone{position:absolute;right:0;top:0;width:55%;height:100%;z-index:49;}
#action-zone{position:absolute;bottom:12px;right:16px;display:flex;gap:9px;z-index:50;}
.cbtn{background:rgba(0,0,0,.74);border:1px solid rgba(168,148,56,.16);color:#524a14;font-size:clamp(.52rem,2vw,.66rem);letter-spacing:.09em;padding:11px 17px;border-radius:2px;min-width:68px;text-align:center;}
.cbtn:active{background:rgba(148,112,8,.14);color:#c8a400;}
.cbtn.active{background:rgba(0,60,0,.52);border-color:rgba(0,170,60,.36);color:#18a84a;}

@keyframes flicker{0%,81%,100%{opacity:1;}82%{opacity:.24;}83%{opacity:1;}84%{opacity:.03;}85%{opacity:.78;}86%{opacity:.12;}87%{opacity:1;}}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
@keyframes radar{from{transform:rotate(0);}to{transform:rotate(360deg);}}
@keyframes spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
@keyframes sfAnim{0%{opacity:.13;}50%{opacity:0;}100%{opacity:.16;}}