:root{--bg:#0b0b0b;--red:#c1272d;--amber:#ff8c00;--metal:#2a2623;--txt:#e9d8c0}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top,#2a0a0a,#0b0b0b 60%),var(--bg);color:var(--txt);font-family:'VT323',monospace;font-size:19px;min-height:100vh}
header{text-align:center;padding:18px 10px 6px}
h1{font-family:'Press Start 2P';font-size:clamp(26px,6vw,54px);margin:0;background:linear-gradient(180deg,var(--amber),var(--red));-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #400)}
#stage{color:var(--amber);margin-top:8px}
main{max-width:1200px;margin:auto;padding:10px}
.screens{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.screen{background:var(--metal);padding:8px;border:3px solid #4a3f37;box-shadow:inset 0 0 0 2px #120f0d,0 0 30px #c1272d33;position:relative}
.screen::before,.screen::after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;background:#776;top:3px;left:3px;box-shadow:calc(100% + 0px) 0 #776}
.label{font-family:'Press Start 2P';font-size:10px;color:var(--amber);margin:2px 0 6px}
.label span{color:#988;font-family:'VT323';font-size:15px}
canvas#real,canvas#dream{width:min(512px,92vw);aspect-ratio:4/3;image-rendering:pixelated;display:block;background:#000}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:16px}
.panel{background:linear-gradient(#2a2623,#1a1715);border:3px solid #4a3f37;padding:12px;border-radius:4px}
h2{font-family:'Press Start 2P';font-size:12px;color:var(--red);margin:0 0 10px}
label{display:block;margin:6px 0}
label.chk{display:inline-block}
input[type=range]{width:100%;accent-color:var(--red)}
.row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0;align-items:center}
button{font-family:'Press Start 2P';font-size:10px;background:#3b2f28;color:var(--txt);border:2px solid #6b5444;padding:8px 10px;cursor:pointer;transition:.15s}
button:hover{box-shadow:0 0 12px var(--amber);border-color:var(--amber)}
button.hot{background:var(--red);border-color:#ff6040}
.stat{margin:4px 0}.stat b{color:var(--amber)}
.tiny{font-size:15px;color:#988}
#hist{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:6px 0;font-size:14px}
#hist div{background:#120f0d;padding:2px 4px;position:relative;overflow:hidden}
#hist i{position:absolute;left:0;bottom:0;height:3px;background:var(--red)}
#film,#lossChart{width:100%;image-rendering:pixelated;background:#000;border:1px solid #4a3f37}
.actlbl{font-family:'Press Start 2P';font-size:11px;background:#400;padding:2px 6px}
.sanity{height:12px;background:#120f0d;border:1px solid #4a3f37;margin-top:6px}
#sanityBar{height:100%;width:100%;background:linear-gradient(90deg,var(--red),var(--amber),#7f7);transition:width .3s}
#pad{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px 0;touch-action:none;user-select:none}
#pad button{font-size:16px;padding:14px 18px;min-width:60px}
footer{text-align:center;padding:20px;color:#988}
footer a{color:var(--amber)}