:root{--bg:#0a0605;--red:#e0261b;--orange:#ff8a1f;--dim:#5a2a20;--txt:#f2d6c4;--panel:#160c0a}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top,#2a0b06 0%,var(--bg) 60%) fixed;color:var(--txt);font-family:'VT323',monospace;font-size:20px;min-height:100vh}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
header{text-align:center;padding:18px 10px 6px}
h1{font-family:'Press Start 2P';font-size:clamp(26px,6vw,54px);margin:0;color:var(--orange);text-shadow:4px 4px 0 #600,0 0 22px #f40}
h1 span{color:var(--red)}
.flicker{animation:fl 4s infinite}
@keyframes fl{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.4}94%{opacity:1}96%{opacity:.6}}
.sub{color:#b98;margin-top:6px}
.toprow{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:8px}
.pill{font-family:'Press Start 2P';font-size:10px;padding:6px 10px;border:2px solid var(--red);color:var(--red);background:#200}
#auth-status{font-size:16px}#auth-status a{color:var(--orange)}
nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:10px}
nav button,button,.btn{font-family:'Press Start 2P';font-size:10px;background:#1d0e0b;color:var(--txt);border:2px solid var(--dim);padding:9px 11px;cursor:pointer}
nav button.on{background:var(--red);color:#fff;border-color:var(--orange)}
button:hover,.btn:hover{border-color:var(--orange)}
button.big{background:var(--red);color:#fff;border-color:var(--orange);box-shadow:0 0 14px #f303}
#stage{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;padding:6px}
.screen{display:flex;flex-direction:column;align-items:center}
.label{font-family:'Press Start 2P';font-size:11px;color:var(--orange);margin-bottom:6px}
.label small{font-family:'VT323';font-size:15px;color:#977}
.dreamlbl{color:#ff5ad0}
.crt{position:relative;border:3px solid #3a1510;box-shadow:0 0 30px #a2100055;background:#000}
.crt::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 40px #000}
canvas#real,canvas#dream{display:block;width:min(512px,92vw);aspect-ratio:4/3;image-rendering:pixelated}
#hud{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;padding:4px 8px;font-size:16px;color:#ff5ad0;text-shadow:1px 1px #000;z-index:2}
#vibes{position:absolute;bottom:8px;width:100%;text-align:center;color:#ff5ad0;font-size:18px;z-index:2;text-shadow:1px 1px #000;display:none}
main{max-width:1000px;margin:0 auto;padding:10px}
.panel{background:var(--panel);border:2px solid #3a1510;padding:14px 18px;margin:10px 0;animation:rise .4s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.panel h2{font-family:'Press Start 2P';font-size:14px;color:var(--red);margin:0 0 10px}
.panel h3{font-family:'Press Start 2P';font-size:11px;color:var(--orange)}
.hidden{display:none}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:8px 0}
.muted{color:#977}.quip{color:var(--orange)}
.lbl{font-size:16px;color:#977;margin-top:8px}
select,input[type=number]{background:#000;color:var(--txt);border:1px solid var(--dim);font-family:'VT323';font-size:18px}
input[type=range]{accent-color:var(--red);vertical-align:middle}
#hist,#lossC,#prev,#cmp{max-width:100%;background:#000;border:1px solid #3a1510;image-rendering:pixelated}
#prev{width:100%;max-width:768px}#cmp{width:256px}
#film{display:flex;gap:4px;overflow:hidden;margin:8px 0}
#film div{position:relative}#film canvas{width:72px;height:54px;image-rendering:pixelated;border:1px solid #3a1510}
#film span{position:absolute;bottom:0;right:2px;font-size:16px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#200;border:2px solid var(--red);padding:8px 14px;opacity:0;transition:.3s;z-index:9;max-width:90vw}
#toast.show{opacity:1}
#pad{display:none;justify-content:space-between;padding:10px 20px;user-select:none}
#pad button{font-size:14px;padding:14px 16px;touch-action:none}
.dpad{display:flex;flex-direction:column;align-items:center;gap:4px}.dpad div{display:flex;gap:40px}
.abtn{display:flex;gap:10px;align-items:center}.fire{background:var(--red)!important;color:#fff}
@media (hover:none),(max-width:700px){#pad{display:flex}}
footer{text-align:center;padding:20px;color:#977}footer a{color:var(--orange)}
ol{padding-left:24px}