:root{--red:#d1200f;--org:#ff7a1a;--grn:#46ff6a;--bg:#0a0605;--metal:#3a3330}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top,#2a0b06,var(--bg) 60%);color:#e8d8c8;font-family:'VT323',monospace;font-size:20px;min-height:100vh}
.crt{pointer-events:none;position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);z-index:99}
header{text-align:center;padding:24px 10px 8px}
h1{font-family:'Press Start 2P';color:var(--red);font-size:clamp(28px,7vw,64px);margin:0;text-shadow:3px 3px 0 #500,0 0 20px #f30}
.flicker{animation:fl 4s infinite}@keyframes fl{0%,92%,100%{opacity:1}93%{opacity:.4}95%{opacity:1}97%{opacity:.6}}
.sub{color:var(--org);margin:8px 0}
.steps{display:flex;gap:14px;justify-content:center;font-family:'Press Start 2P';font-size:10px}
.steps span{opacity:.35;padding:6px;border:1px solid #533}.steps span.on{opacity:1;color:var(--grn);border-color:var(--grn)}
main{max-width:1000px;margin:auto;padding:10px}
.panel{border:3px solid #4a2a20;background:rgba(20,10,8,.85);margin:18px 0;padding:14px;box-shadow:inset 0 0 0 2px #000,0 0 30px #300}
h2{font-family:'Press Start 2P';font-size:13px;color:var(--org);margin:0 0 12px}h2 small{font-family:'VT323';font-size:16px;color:#977}
.row{display:flex;flex-wrap:wrap;gap:16px}.row.center{justify-content:center}
.side{flex:1;min-width:260px}
.screenwrap{position:relative;border:4px solid #222;outline:2px solid #533;line-height:0}
canvas{image-rendering:pixelated}
.screenwrap canvas{width:min(512px,90vw);height:auto}
#splitWrap canvas{width:min(384px,90vw)}
.dream canvas{filter:blur(.4px) saturate(1.3) contrast(1.1)}
.tag{position:absolute;left:6px;top:6px;line-height:1;background:#000a;color:var(--grn);padding:3px 6px;font-size:18px}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
button{font-family:'Press Start 2P';font-size:10px;color:#fdd;background:linear-gradient(#5a504c,var(--metal));border:3px outset #776;padding:9px 10px;cursor:pointer}
button:active{border-style:inset}button.hot{color:#000;background:var(--org)}
label{display:block;margin:6px 0}input[type=range]{width:100%;accent-color:var(--red)}
input[type=number]{background:#000;color:var(--grn);border:1px solid #533;font-family:inherit;font-size:18px;width:90px}
.stat{color:var(--grn);margin:4px 0}.msg{color:#fc9;min-height:24px}
#dist,#loss{background:#000;border:1px solid #333;width:100%;max-width:320px}
.film{display:flex;gap:3px;flex-wrap:wrap;margin-top:6px}.film div{font-size:12px;color:#aaa;text-align:center;line-height:1}
.film canvas{width:58px;height:44px;display:block;border:1px solid #333}
.trip{display:flex;gap:8px;flex-wrap:wrap}figure{margin:0;text-align:center}figure canvas{width:128px;border:1px solid #444}figcaption{font-size:15px;color:#c96}
.hud{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:10px;color:var(--grn)}
.meter{display:inline-block;width:120px;height:12px;border:1px solid var(--grn);vertical-align:middle}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--grn),var(--red))}
.help{text-align:center;color:#988}
.pad{display:flex;flex-direction:column;align-items:center;gap:6px}
.pad button{min-width:54px;min-height:44px;font-size:14px}.fire{background:var(--red)!important}
.hell{display:none;position:absolute;inset:0;align-items:center;justify-content:center;text-align:center;font-family:'Press Start 2P';font-size:12px;line-height:1.8;color:#f22;background:#3008}
footer{text-align:center;padding:20px;color:#977}footer a{color:var(--org)}