:root{--bg:#111;--mag:#ff2e88;--cyan:#2ef2ff;--lime:#b6ff2e;--panel:#1a1a1f;--line:#2c2c36;--txt:#e6e6ee}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 20% 0,#2a0f22 0,transparent 40%),radial-gradient(circle at 90% 30%,#0c2a2e 0,transparent 40%),repeating-linear-gradient(0deg,#111 0 3px,#141418 3px 4px);color:var(--txt);font-family:'IBM Plex Mono',monospace;min-height:100vh;padding-bottom:70px}
header{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 18px;border-bottom:2px solid var(--line)}
.logo{font-family:'Press Start 2P';font-size:15px;color:var(--mag);text-shadow:2px 2px 0 #000,0 0 12px var(--mag)}
.logo span{color:var(--cyan);margin-left:8px;text-shadow:2px 2px 0 #000,0 0 12px var(--cyan)}
.cursor{color:var(--lime);font-style:normal;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tagline{margin:6px 18px;font-size:12px;color:#888}
nav{display:flex;gap:4px;flex:1}
nav button{font-family:'Press Start 2P';font-size:10px;background:none;border:2px solid transparent;color:#999;padding:8px 10px;cursor:pointer}
nav button.active{color:var(--lime);border-color:var(--lime);box-shadow:0 0 10px #b6ff2e55}
.right{display:flex;gap:10px;align-items:center}
#auth-status{font-size:12px}
#auth-status a{color:var(--cyan)}
.btn{font-family:'Press Start 2P';font-size:9px;background:#2a2a33;color:var(--txt);border:none;padding:10px 12px;cursor:pointer;box-shadow:0 4px 0 #000;transition:transform .05s}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 #000}
.btn.mag{background:var(--mag);color:#111}.btn.cyan{background:var(--cyan);color:#111}.btn.lime{background:var(--lime);color:#111}
main{padding:14px 18px;max-width:1200px;margin:auto}
.tab{display:none;animation:in .3s}.tab.active{display:block}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.play-wrap,.paint-wrap,.mem-wrap{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.bezel{position:relative;padding:22px;background:linear-gradient(145deg,#2b2b30,#151518);border-radius:28px;box-shadow:inset 0 0 0 3px #000,0 10px 40px #000}
#screen{display:block;width:min(768px,88vw,calc(100vh - 200px));aspect-ratio:1;image-rendering:pixelated;border-radius:14px;background:#000;box-shadow:0 0 30px #2ef2ff33}
.bezel.scan::after{content:'';position:absolute;inset:22px;border-radius:14px;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.5))}
.stats{font-size:12px;color:var(--lime);margin-top:10px}
.side{display:flex;flex-direction:column;gap:10px;min-width:240px;flex:1;max-width:340px}
.controls{display:flex;flex-wrap:wrap;gap:6px}
.row{display:flex;gap:8px;align-items:center;font-size:12px}
#keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#keypad button{font-family:'Press Start 2P';font-size:14px;aspect-ratio:1;background:#1f1f26;color:var(--cyan);border:2px solid var(--line);cursor:pointer;touch-action:none;user-select:none}
#keypad button.on{background:var(--cyan);color:#111;box-shadow:0 0 14px var(--cyan)}
#keypad small{display:block;font-size:7px;color:#666;margin-top:4px}
.hint{font-size:11px;color:#777;margin:0}
.drop{border:2px dashed #444;padding:16px;text-align:center;font-size:12px;cursor:pointer}
.drop.over{border-color:var(--lime);color:var(--lime)}
.code-bar,.paint-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;align-items:center}
select,input:not([type]),#memAddr{background:#000;color:var(--lime);border:2px solid var(--line);padding:8px;font-family:inherit}
.editor{display:flex;height:55vh;border:2px solid var(--line);background:#0a0a0d}
#gutter{margin:0;padding:10px 8px;color:#555;text-align:right;font-size:13px;line-height:1.5;overflow:hidden;user-select:none;min-width:48px;border-right:1px solid var(--line)}
#src{flex:1;background:none;color:#d8f7ff;border:none;outline:none;resize:none;font:13px/1.5 'IBM Plex Mono',monospace;padding:10px;white-space:pre;overflow:auto}
#console{background:#000;border:2px solid var(--line);padding:10px;font-size:12px;min-height:60px;max-height:160px;overflow:auto;white-space:pre-wrap;color:var(--lime)}
#console.err{color:var(--mag)}
.ref pre{font-size:11px;color:#aaa;overflow:auto}
#tools{display:flex;gap:4px;flex-wrap:wrap}
#tools button.on{background:var(--lime);color:#111}
.paint-scroll{max-width:min(90vw,640px);max-height:70vh;overflow:auto;border:2px solid var(--line);background:#000}
#paint{display:block;image-rendering:pixelated;cursor:crosshair;touch-action:none}
#palette{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
#palette .cube{display:grid;grid-template-columns:repeat(6,1fr)}
#palette i{aspect-ratio:1;cursor:pointer}
#palette i.sel{outline:2px solid #fff;z-index:1}
.cur{font-size:12px;display:flex;gap:8px;align-items:center}
#curSw{width:24px;height:24px;display:inline-block;border:2px solid #fff}
.gen{display:flex;flex-direction:column;gap:6px}
#hex{font-size:12px;background:#000;padding:10px;border:2px solid var(--line);margin:0;color:#cfe;overflow:auto;max-width:100%}
#hex b{color:var(--mag);font-weight:500}
#heat{width:256px;image-rendering:pixelated;border:2px solid var(--line);background:#000}
.gal-head{display:flex;justify-content:space-between;align-items:center}
h2{font-family:'Press Start 2P';font-size:12px;color:var(--cyan)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.card{background:var(--panel);border:2px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:6px}
.card img{width:100%;image-rendering:pixelated;background:#000;aspect-ratio:1}
.card h4{margin:0;font-family:'Press Start 2P';font-size:10px;color:var(--lime)}
.card small{color:#888}
.card .row button{flex:1}
#leader{font-size:13px}
dialog{background:var(--panel);color:var(--txt);border:2px solid var(--mag);padding:20px;display:none;flex-direction:column;gap:10px}
dialog[open]{display:flex}
dialog h3{font-family:'Press Start 2P';font-size:12px;margin:0}
#spGrid{display:grid;grid-template-columns:repeat(8,36px);gap:2px;background:#000;padding:4px;border:2px solid var(--line);width:max-content}
#spGrid i{width:36px;height:36px;cursor:pointer;background-image:linear-gradient(45deg,#222 25%,transparent 25%,transparent 75%,#222 75%),linear-gradient(45deg,#222 25%,#333 25%,#333 75%,#222 75%);background-size:12px 12px;background-position:0 0,6px 6px}
#mkPal{display:grid;grid-template-columns:repeat(18,1fr);width:320px;margin-top:10px}
#mkPal i{aspect-ratio:1;cursor:pointer}
#mkPal i.sel{outline:2px solid #fff;z-index:1}
#spErase.on{background:var(--lime);color:#111}
footer{text-align:center;font-size:12px;color:#777;padding:20px}
footer a{color:var(--cyan)}
@media(max-width:700px){
  nav{position:fixed;bottom:0;left:0;right:0;background:#0b0b0e;border-top:2px solid var(--line);z-index:10;justify-content:space-around;padding:6px}
  nav button{font-size:8px;padding:8px 4px}
  .side{max-width:none}
  .bezel{padding:10px;border-radius:16px}.bezel.scan::after{inset:10px}
}