:root{--bg:#0a0a12;--cy:#00fff0;--mg:#ff2bd6;--dim:#5a5a7a;--card:#12121f}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 20% 0%,#1a0b24 0,transparent 50%),radial-gradient(circle at 90% 100%,#03222a 0,transparent 50%),var(--bg);color:#dfe;font-family:'JetBrains Mono',monospace;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.02) 3px 4px)}
header{text-align:center;padding:28px 12px 8px}
h1{font-family:'Press Start 2P';font-size:clamp(20px,5vw,42px);margin:0;color:#fff;text-shadow:3px 0 var(--mg),-3px 0 var(--cy);position:relative;animation:jit 3s infinite}
@keyframes jit{0%,92%,100%{transform:none}94%{transform:translate(2px,-1px) skewX(4deg)}96%{transform:translate(-2px,1px)}}
.sub{color:var(--dim);font-weight:200;margin:10px 0}
.phases{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.pill{font-family:'Press Start 2P';font-size:9px;padding:6px 10px;border:1px solid var(--dim);border-radius:20px;color:var(--dim)}
.pill.on{border-color:var(--cy);color:var(--cy);box-shadow:0 0 12px var(--cy);animation:pulse 1.2s infinite alternate}
@keyframes pulse{to{box-shadow:0 0 2px var(--cy)}}
main{max-width:1200px;margin:0 auto;padding:12px}
.panels{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.cab{background:var(--card);border:2px solid #2a2a44;border-radius:16px;padding:12px;box-shadow:0 0 24px rgba(0,255,240,.08);animation:rise .6s both}
.cab.dream{border-color:var(--mg);box-shadow:0 0 30px rgba(255,43,214,.25);animation-delay:.1s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
.lbl{font-family:'Press Start 2P';font-size:10px;margin-bottom:8px;display:flex;justify-content:space-between;gap:8px}
.lbl small{font-family:'JetBrains Mono';color:var(--dim)}
canvas#canvas,#dreamCanvas,#diffCanvas{width:min(384px,86vw);height:min(384px,86vw);image-rendering:pixelated;display:block;background:#000;border-radius:6px}
.crt{position:relative}
.crt::after{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 40px rgba(255,43,214,.3)}
.ticker{margin:16px auto;max-width:800px;text-align:center;color:var(--mg);font-size:13px;min-height:20px}
#controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card{background:var(--card);border:1px solid #2a2a44;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
h2{font-family:'Press Start 2P';font-size:12px;margin:0;color:var(--cy)}
h2 b{color:var(--mg);margin-right:6px}
label{font-size:12px;color:#aab;display:flex;flex-direction:column;gap:4px}
input[type=number]{background:#000;border:1px solid #333;color:var(--cy);padding:6px;border-radius:6px;font-family:inherit;width:100%}
input[type=range]{accent-color:var(--mg)}
.row{display:flex;gap:8px}.row>*{flex:1}
.tg{flex-direction:row;align-items:center}
button{font-family:'Press Start 2P';font-size:10px;padding:12px;border-radius:10px;border:2px solid var(--cy);background:transparent;color:var(--cy);cursor:pointer;transition:.15s}
button:hover:not(:disabled){background:var(--cy);color:#000;box-shadow:0 0 16px var(--cy)}
button:disabled{opacity:.3;cursor:not-allowed}
button.ghost{border-color:var(--dim);color:#aab}
.pad{display:flex;gap:8px}.pad .act{flex:1;font-size:18px;border-color:var(--mg);color:var(--mg);touch-action:none}
.act.held{background:var(--mg);color:#000}
.bar{height:8px;background:#000;border-radius:4px;overflow:hidden}
#collectBar{height:100%;width:0;background:linear-gradient(90deg,var(--cy),var(--mg))}
.stat{font-size:12px;color:var(--cy)}
.hint{font-size:11px;color:var(--dim);margin:0}
#lossCanvas{width:100%;height:80px;background:#000;border-radius:6px}
footer{text-align:center;color:var(--dim);font-size:12px;padding:30px}
footer a{color:var(--mg)}