:root{
  --neon-red:#ff2b2b;
  --paper:#e8dcc0;
  --ink:#2a1f12;
  --amber:#ffb43b;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:#02030a;
  font-family:'VT323',monospace;color:#fff;-webkit-user-select:none;user-select:none;}
#scene-container{position:fixed;inset:0;}
canvas{display:block;}

/* Vignette for tunnel-vision */
#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  box-shadow:inset 0 0 200px 80px rgba(0,0,0,0.92),
             inset 0 0 400px 200px rgba(0,0,0,0.6);}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;}
#clock{position:absolute;top:14px;left:16px;font-size:2.6rem;
  color:#39ff5b;text-shadow:0 0 10px #39ff5b;letter-spacing:2px;
  font-family:'VT323',monospace;}
#battery-box{position:absolute;top:16px;right:16px;text-align:right;font-size:1.4rem;}
#flash-state{display:block;text-shadow:0 0 8px #ffe08a;margin-bottom:4px;}
#battery-bar{width:150px;height:16px;border:2px solid #555;border-radius:4px;
  overflow:hidden;background:#111;box-shadow:0 0 8px rgba(0,0,0,0.6);}
#battery-fill{height:100%;width:100%;background:#4be08a;transition:width 0.1s linear;}
#hint{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);
  font-size:1.6rem;color:#ffdca0;text-shadow:0 0 8px #000;text-align:center;
  max-width:80%;padding:6px 14px;background:rgba(0,0,0,0.4);border-radius:8px;}

/* Mobile controls */
#mobile-controls{position:fixed;inset:0;z-index:12;pointer-events:none;}
#joystick{position:absolute;left:22px;bottom:26px;width:120px;height:120px;
  border-radius:50%;background:rgba(255,255,255,0.08);border:2px solid rgba(255,255,255,0.2);
  pointer-events:auto;touch-action:none;}
#stick{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;
  background:rgba(255,224,138,0.5);border:2px solid rgba(255,224,138,0.8);}
#flash-btn{position:absolute;right:26px;bottom:40px;width:78px;height:78px;
  border-radius:50%;font-size:2rem;background:rgba(255,180,59,0.25);
  border:3px solid var(--amber);color:#fff;pointer-events:auto;}

/* Jumpscare flash */
#scare-flash{position:fixed;inset:0;z-index:50;background:#3a0000;opacity:0;
  transition:opacity 0.08s;pointer-events:none;display:flex;
  align-items:center;justify-content:center;}
.scare-face{font-size:min(60vw,60vh);animation:shake 0.1s infinite;filter:drop-shadow(0 0 30px #f00);}
@keyframes shake{0%{transform:translate(-6px,4px) scale(1.02);}
  50%{transform:translate(6px,-4px) scale(1.08);}100%{transform:translate(-4px,-6px) scale(1);}}

/* Manual / Screens */
#start-screen,#end-screen{position:fixed;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(circle at 50% 30%, #241a0f 0%, #0a0704 80%);}
.hidden{display:none !important;}
.manual{position:relative;max-width:440px;width:100%;
  background:linear-gradient(#efe3c6,#dccba0);
  color:var(--ink);padding:30px 26px 22px;border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,0.8), inset 0 0 40px rgba(120,90,40,0.25);
  border:2px solid #b89a63;text-align:center;
  background-image:
    linear-gradient(rgba(180,150,90,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(180,150,90,0.06) 1px,transparent 1px);
  background-size:100% 24px,24px 100%;}
.stamp{position:absolute;top:12px;right:-6px;transform:rotate(9deg);
  border:3px solid var(--neon-red);color:var(--neon-red);
  padding:2px 10px;font-family:'Bungee';font-size:0.8rem;opacity:0.75;border-radius:4px;}
.manual h1{font-family:'Rye',serif;font-size:2rem;color:#7a1f10;line-height:1;}
.manual h2{font-family:'Bungee',cursive;font-size:1.9rem;color:var(--ink);
  letter-spacing:1px;margin-bottom:8px;line-height:1;}
#end-title{font-family:'Bungee';font-size:1.8rem;color:#7a1f10;margin-bottom:4px;}
.mascot{font-size:4rem;margin:8px 0;}
.tagline{font-family:'Rye';font-size:1.3rem;color:#8a5a1a;margin-bottom:14px;}
.controls-list{font-size:1.35rem;text-align:left;background:rgba(255,255,255,0.35);
  border:1px dashed #a0824c;border-radius:6px;padding:12px 16px;margin-bottom:18px;line-height:1.4;}
.controls-list b{color:#7a1f10;}
.controls-list .warn{color:#a02010;font-family:'Rye';margin-top:8px;font-size:1.1rem;}
#end-quote{font-family:'Rye';font-size:1.4rem;color:#7a1f10;margin:6px 0 10px;}
#end-stats{font-size:1.3rem;margin-bottom:16px;}
button{font-family:'Bungee',cursive;font-size:1.15rem;padding:14px 22px;
  background:linear-gradient(#c23a1a,#8a1f0e);color:#ffe8c0;border:none;
  border-radius:8px;cursor:pointer;box-shadow:0 5px 0 #5a1206,0 8px 14px rgba(0,0,0,0.4);
  transition:transform 0.08s;letter-spacing:1px;}
button:active{transform:translateY(4px);box-shadow:0 1px 0 #5a1206;}
#best-score{margin-top:14px;font-size:1.3rem;color:#8a5a1a;font-family:'Rye';}
.footer{margin-top:14px;font-size:1.2rem;}
.footer a{color:#7a1f10;text-decoration:underline;}

@media(max-width:520px){
  #clock{font-size:1.9rem;}
  #battery-box{font-size:1.1rem;}
  #battery-bar{width:110px;}
  #hint{font-size:1.3rem;}
}
</parameter>
</invoke>