/* ============================================================
   BACKROOMS · NIVELES 0-1 — styles.css
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;cursor:none!important}
html,body{width:100%;height:100%;background:#000;overflow:hidden;font-family:'VT323',monospace;
  -webkit-user-select:none;user-select:none}

/* ---------- lienzo principal ---------- */
#view{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}

/* ---------- capas de efecto ---------- */
#scan{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.12;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
#dang{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 110px 40px rgba(110,0,0,.7)}

/* ---------- HUD estilo videocámara ---------- */
#hud{position:fixed;inset:0;z-index:6;pointer-events:none;color:#e9e4cf;
  text-shadow:1px 1px 0 #000,0 0 6px rgba(0,0,0,.9);font-size:26px;letter-spacing:1px}
#rec{position:absolute;top:16px;left:20px;display:flex;align-items:center;gap:10px}
#rec .dot{width:14px;height:14px;border-radius:50%;background:#ff3b30;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
#owner{position:absolute;top:52px;left:20px;font-size:20px;opacity:.75}
#tape{position:absolute;top:16px;right:22px;opacity:.8}
#bottles{position:absolute;bottom:20px;left:20px}
#stam{position:absolute;bottom:20px;right:22px;width:150px;height:10px;border:1px solid rgba(233,228,207,.7)}
#stamFill{height:100%;width:100%;background:#e9e4cf}
#msg{position:absolute;bottom:64px;width:100%;text-align:center;font-size:30px;opacity:0;
  transition:opacity .4s;color:#fff}

/* ---------- minimapa ---------- */
#minimap{position:fixed;right:22px;bottom:52px;z-index:6;border:1px solid rgba(233,228,207,.55);
  background:rgba(8,8,5,.78);display:none}

/* ---------- pantallas superpuestas ---------- */
.ov{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;color:#e9e4cf;background:rgba(3,3,2,.82);padding:20px}
.hidden{display:none !important}

.glitchTitle{font-size:min(13vw,96px);letter-spacing:8px;color:#efe9d0;line-height:.9;
  animation:jitter 3.2s steps(1) infinite}
@keyframes jitter{
  0%,100%{text-shadow:2px 0 rgba(255,40,60,.55),-2px 0 rgba(60,255,220,.45)}
  92%{text-shadow:2px 0 rgba(255,40,60,.55),-2px 0 rgba(60,255,220,.45)}
  94%{text-shadow:-6px 0 rgba(255,40,60,.8),6px 0 rgba(60,255,220,.7);transform:translateX(2px)}
  96%{text-shadow:5px 2px rgba(255,40,60,.8),-5px -2px rgba(60,255,220,.7);transform:translateX(-3px)}
}
.sub{font-size:24px;opacity:.7;margin-top:4px;letter-spacing:4px}
.story{max-width:640px;font-size:22px;line-height:1.35;margin:20px 0 16px;color:#cfc9b2;text-align:center}

/* ---------- portada: entrada de nombre ---------- */
#playerName{
  margin-top:18px;background:rgba(0,0,0,.55);
  border:1px solid rgba(233,228,207,.6);color:#efe9d0;
  font-family:'VT323',monospace;font-size:34px;letter-spacing:4px;
  text-align:center;text-transform:uppercase;
  padding:8px 18px;width:min(360px,86vw);outline:none;
}
#playerName:focus{border-color:#efe9d0;box-shadow:0 0 0 1px #efe9d0}
#playerName::placeholder{color:#6f6a55;letter-spacing:4px}

/* ---------- selector de niveles ---------- */
.lvls{display:flex;gap:14px;margin:4px 0 18px;flex-wrap:wrap;justify-content:center}
.lvl{border:1px solid #55503e;padding:10px 22px;min-width:230px;background:rgba(0,0,0,.35)}
.lvl b{display:block;font-size:30px;letter-spacing:3px;font-weight:normal}
.lvl span{display:block;font-size:18px;opacity:.65;margin-top:2px}
.lvl.sel{border-color:#efe9d0;background:rgba(239,233,208,.09)}
.lvl.sel b{color:#fff}

/* ---------- controles ---------- */
.keys{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:center;font-size:21px;margin-bottom:18px}
.k{border:1px solid rgba(233,228,207,.6);padding:1px 9px;margin-right:6px;background:rgba(0,0,0,.4)}
.press{font-size:28px;color:#fff;animation:blink 1.2s steps(2) infinite;margin-top:2px}
.warn{font-size:18px;color:#8f8870;margin-top:14px;max-width:560px}

/* ---------- estado de carga del sprite ---------- */
#loadState{font-size:21px;margin-top:16px;color:#d8d2b8}
#loadState.ok{color:#9fe6a8}
#loadState.err{color:#ff7b6e}

/* ---------- pantallas finales ---------- */
#dead h1{font-size:76px;color:#c22a20;letter-spacing:6px}
#win h1{font-size:68px;color:#9fe6a8;letter-spacing:6px}
.stats{font-size:23px;opacity:.8;margin:14px 0}
#pause h1{font-size:60px;letter-spacing:6px}

/* ---------- jumpscare ---------- */
#scare{position:fixed;inset:0;z-index:20;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
#scareImg{width:100%;height:100%;object-fit:contain;filter:contrast(1.5) brightness(1.25) saturate(.5);
  animation:scareIn 1.4s steps(14) forwards}
@keyframes scareIn{
  0%{transform:scale(.12) translate(6%,4%)}
  18%{transform:scale(.55) translate(-4%,-3%)}
  36%{transform:scale(1.05) translate(3%,2%)}
  55%{transform:scale(1.35) translate(-2%,1%)}
  75%{transform:scale(1.5) translate(2%,-2%)}
  100%{transform:scale(1.62) translate(0,0)}
}