:root{--bg:#0a0a12;--g:#39ff14;--m:#ff2bd6;--d:#14142a}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 50% 0,#1a1030,var(--bg) 60%);color:var(--g);font-family:'VT323',monospace;font-size:20px;min-height:100vh;
background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),radial-gradient(circle at 50% 0,#1a1030,var(--bg) 60%)}
header{text-align:center;padding:18px 10px 6px}
h1{font-family:'Press Start 2P';font-size:clamp(22px,5vw,44px);margin:0;color:var(--g);text-shadow:0 0 8px var(--g),3px 0 var(--m)}
.flicker{animation:fl 3s infinite}
@keyframes fl{0%,92%,100%{opacity:1}93%{opacity:.5}95%{opacity:.9}97%{opacity:.6}}
#subtitle{color:var(--m);margin:6px 0 10px}
.cart{display:inline-flex;border:2px solid var(--g);border-radius:6px;overflow:hidden}
.cart button{border:0;border-radius:0;margin:0}
.cart button.on{background:var(--g);color:var(--bg)}
.badge{display:inline-block;font-size:15px;border:1px solid var(--m);color:var(--m);padding:1px 6px;border-radius:4px}
#backend{margin-left:8px}
#auth-status{font-size:15px;margin-top:6px;color:#8a8}
#auth-status a{color:var(--m)}
main{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:14px;max-width:1300px;margin:0 auto}
@media(max-width:960px){main{grid-template-columns:1fr}}
.monitor{background:var(--d);border:3px solid #2a2a4a;border-radius:18px;padding:12px;box-shadow:inset 0 0 30px rgba(57,255,20,.12),0 0 20px rgba(0,0,0,.6)}
.mhead{display:flex;justify-content:space-between;font-family:'Press Start 2P';font-size:11px;margin-bottom:8px;align-items:center}
canvas#real,canvas#dreamc{width:100%;aspect-ratio:1;image-rendering:pixelated;background:#000;border-radius:10px;display:block}
.dreamwrap{position:relative}
.dreamwrap::after{content:'';position:absolute;inset:0;border-radius:10px;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,43,214,.12) 0 2px,transparent 2px 4px);mix-blend-mode:screen}
#dreamc{filter:drop-shadow(2px 0 0 rgba(255,43,214,.6)) drop-shadow(-2px 0 0 rgba(57,255,20,.5))}
button{font-family:'Press Start 2P';font-size:10px;background:transparent;color:var(--g);border:2px solid var(--g);padding:9px 10px;border-radius:6px;cursor:pointer;margin:3px}
button:hover{background:rgba(57,255,20,.15)}
button:disabled{opacity:.35;cursor:wait}
button.mini{font-size:8px;padding:6px}
.row{display:flex;flex-wrap:wrap;justify-content:center;margin-top:8px}
.acts{display:flex;justify-content:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.acts span{border:1px solid #335;padding:2px 8px;border-radius:4px;color:#557}
.acts span.lit{color:var(--bg);background:var(--m);border-color:var(--m);box-shadow:0 0 10px var(--m)}
.meter,.bar{height:10px;border:1px solid var(--g);border-radius:5px;margin-top:8px;overflow:hidden}
#meterFill,#dataFill{height:100%;width:0;background:linear-gradient(90deg,var(--m),var(--g));transition:width .2s}
.stats{margin-top:6px;text-align:center}
label{display:block;margin-top:6px;font-size:18px}
label input[type=range]{width:100%;accent-color:var(--m)}
.tog{display:flex;gap:6px;align-items:center}
#loss{width:100%;background:#000;border-radius:6px;margin-top:8px}
.board{font-size:16px;margin-top:8px;color:#bbb}
#pad{display:none;justify-content:center;gap:8px;padding:8px}
#pad button{font-size:14px;padding:16px 18px;touch-action:none}
@media(hover:none){#pad{display:flex}}
.ticker{overflow:hidden;white-space:nowrap;border-top:1px solid #224;border-bottom:1px solid #224;background:#06060c;color:var(--m)}
#tick{display:inline-block;padding:6px 0;animation:mq 18s linear infinite;padding-left:100%}
@keyframes mq{to{transform:translateX(-100%)}}
footer{text-align:center;padding:16px;color:#7a7;font-size:17px}
footer a{color:var(--m)}