:root{--bg:#0b0b1a;--mag:#ff2bd6;--cy:#22f0ff;--dim:#6a6a9a;--ink:#e8e6ff}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% -20%,#2a0b3d 0,transparent 60%),repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 4px),var(--bg);color:var(--ink);font-family:'IBM Plex Mono',monospace;min-height:100vh}
header{text-align:center;padding:18px 10px 6px}
.logo{font-family:VT323,monospace;font-size:64px;margin:0;letter-spacing:6px;color:var(--ink);position:relative;display:inline-block;text-shadow:2px 0 var(--mag),-2px 0 var(--cy)}
.logo:after{content:attr(data-text);position:absolute;left:0;top:0;color:var(--cy);clip-path:inset(0 0 60% 0);animation:gl 2.5s infinite steps(2)}
@keyframes gl{0%,90%{transform:none}92%{transform:translate(4px,-1px)}95%{transform:translate(-3px,1px)}}
.tag{color:var(--dim);font-weight:200;font-size:13px;margin:0 0 12px}
nav{display:inline-flex;border:1px solid var(--dim)}
nav button{border:0;border-right:1px solid var(--dim)}nav button:last-child{border:0}
nav button.on{background:var(--mag);color:#000}
button,.btn,select{background:#14142b;color:var(--ink);border:1px solid #3a3a6a;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer}
button:hover,.btn:hover{border-color:var(--cy)}
.hot{background:var(--cy);color:#000;font-weight:700}
.pill{display:inline-block;margin:10px;padding:3px 10px;border:1px solid var(--cy);color:var(--cy);font-size:12px;border-radius:20px}
#auth-status{font-size:11px;color:var(--dim)}
main{max-width:760px;margin:auto;padding:0 12px}
.screens{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
figure{margin:0;text-align:center}
figcaption{font-family:VT323;font-size:22px;letter-spacing:4px;color:var(--cy)}
#dreamFig figcaption{color:var(--mag)}
canvas{image-rendering:pixelated}
#real,#dream{width:min(320px,86vw);height:min(320px,86vw);border:2px solid #2a2a50;display:block}
.dreamwrap{position:relative}
.dreamwrap:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0004 0 2px,transparent 2px 4px);pointer-events:none}
#dream{filter:drop-shadow(2px 0 #ff2bd655) drop-shadow(-2px 0 #22f0ff55) saturate(1.3);border-color:var(--mag)}
.hidden{display:none!important}
.strip{display:flex;gap:14px;align-items:center;margin:14px 0;flex-wrap:wrap;justify-content:center}
.strip span{font-size:11px;color:var(--dim);display:block}
#diff{width:80px;height:80px;border:1px solid #333}
.readout{width:170px}.meter{height:8px;background:#222;margin:6px 0}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mag),var(--cy))}
#quip{font-family:VT323;font-size:22px;color:var(--mag);flex:1;min-width:200px;margin:0}
.panel{border:1px solid #2a2a50;padding:14px;background:#0e0e22cc;margin-bottom:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px;font-size:13px}
.tog em{color:var(--dim);font-size:11px}
.prog{height:6px;background:#222}.prog i{display:block;height:100%;width:0;background:var(--cy)}
small{color:var(--dim)}
#thumbs{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
#thumbs div{text-align:center;font-size:16px}#thumbs canvas{width:48px;height:48px;display:block}
#loss{width:100%;height:140px;background:#07070f;border:1px solid #222}
#preview{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px;max-width:300px}
#preview canvas{width:100%;aspect-ratio:1}
#board{font-size:13px;color:var(--cy)}
.pad{display:grid;grid-template-columns:repeat(3,60px);grid-template-rows:repeat(3,52px);grid-template-areas:". u ." "l h r" ". d .";gap:6px;justify-content:center;margin:10px auto 16px;user-select:none;-webkit-user-select:none}
.pad button{font-size:22px;touch-action:none;-webkit-tap-highlight-color:transparent}
.pad .u{grid-area:u}.pad .l{grid-area:l}.pad .r{grid-area:r}.pad .d{grid-area:d}
.pad .hub{grid-area:h;display:flex;align-items:center;justify-content:center;border:1px dashed #3a3a6a;font-size:22px;color:var(--cy);font-family:VT323}
.pad button.on{background:var(--mag);color:#000;border-color:var(--mag);box-shadow:0 0 12px var(--mag)}
.pad.dreaming .hub{color:var(--mag);border-color:var(--mag)}
.pad.dreaming .hub:after{content:" DREAM";font-size:11px;margin-left:2px}
footer{text-align:center;color:var(--dim);font-size:12px;padding:20px}
footer a{color:var(--mag)}