:root{
  --bg:#000;
  --cyan:#55ffff;
  --magenta:#ff55ff;
  --amber:#ffb000;
  --green:#33ff66;
  --panel:#0a0a12;
  --border:#2a2a44;
}
*{box-sizing:border-box;}
html,body{margin:0;background:#000;}
body{
  font-family:'IBM Plex Mono',monospace;
  color:var(--cyan);
  background:
    radial-gradient(circle at 50% 0%, #101024 0%, #000 70%);
  min-height:100vh;
}
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:999;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0px, rgba(0,0,0,0.25) 1px, transparent 2px, transparent 4px);
  mix-blend-mode:multiply;
}
#app{max-width:1200px;margin:0 auto;padding:16px;}

header{text-align:center;margin-bottom:18px;}
h1{
  font-family:'VT323',monospace;
  font-size:clamp(2.2rem,7vw,4.5rem);
  color:var(--magenta);
  margin:0;letter-spacing:3px;
  text-shadow:0 0 8px var(--magenta),0 0 20px rgba(255,85,255,0.4);
}
.cursor{color:var(--cyan);animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.tag{
  font-family:'VT323',monospace;font-size:1.3rem;color:var(--green);
  margin:2px 0 0;opacity:.85;
}

main{display:grid;grid-template-columns:320px 1fr;gap:18px;}
@media(max-width:820px){ main{grid-template-columns:1fr;} }

/* Dropzone */
.dropzone{
  border:2px dashed var(--cyan);
  border-radius:2px;
  background:rgba(85,255,255,0.03);
  min-height:170px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;overflow:hidden;
  transition:.15s;
}
.dropzone.drag-over{background:rgba(255,85,255,0.12);border-color:var(--magenta);}
.dropzone.has-img{border-style:solid;}
.drop-inner{text-align:center;padding:20px;}
.dropzone.has-img .drop-inner{display:none;}
.drop-icon{font-size:2rem;color:var(--magenta);letter-spacing:4px;margin-bottom:6px;}
.drop-inner strong{color:var(--cyan);letter-spacing:2px;}
.drop-inner .sub{color:#667;font-size:.8rem;margin-top:4px;}
#preview{max-width:100%;max-height:220px;display:block;image-rendering:pixelated;}

/* Panels */
.panel{
  border:1px solid var(--border);
  background:var(--panel);
  margin:12px 0;padding:10px 12px;border-radius:2px;
}
.panel legend{
  font-family:'VT323',monospace;font-size:1.2rem;color:var(--amber);
  padding:0 6px;letter-spacing:2px;
}
.palette-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.pal-btn{
  background:#000;border:1px solid var(--border);color:#889;
  cursor:pointer;padding:6px;border-radius:2px;text-align:left;
  font-family:'IBM Plex Mono',monospace;transition:.12s;
}
.pal-btn:hover{border-color:var(--cyan);}
.pal-btn.active{border-color:var(--magenta);box-shadow:0 0 8px rgba(255,85,255,0.5);}
.pal-btn .sw{display:flex;height:16px;margin-bottom:4px;border:1px solid #333;}
.pal-btn .sw span{flex:1;}
.pal-name{font-size:.7rem;letter-spacing:1px;}
.pal-btn.active .pal-name{color:var(--cyan);}

.chk{display:flex;align-items:center;gap:8px;color:var(--cyan);
  font-size:.85rem;cursor:pointer;margin:6px 0;letter-spacing:1px;}
.chk input{accent-color:var(--magenta);width:16px;height:16px;}

.slider{display:block;color:var(--green);font-size:.8rem;
  letter-spacing:1px;margin:10px 0;}
.slider span{float:right;color:var(--amber);}
.slider input[type=range]{width:100%;margin-top:4px;accent-color:var(--cyan);}

.dos-select{
  width:100%;margin-top:8px;background:#000;color:var(--cyan);
  border:1px solid var(--border);padding:6px;font-family:inherit;
  border-radius:2px;
}

/* Buttons */
.dos-btn{
  width:100%;background:#000;border:1px solid var(--cyan);
  color:var(--cyan);padding:10px;font-family:'VT323',monospace;
  font-size:1.15rem;letter-spacing:2px;cursor:pointer;
  border-radius:2px;transition:.12s;margin-top:8px;
}
.dos-btn:hover{background:var(--cyan);color:#000;}
.dos-btn.alt{border-color:var(--amber);color:var(--amber);}
.dos-btn.alt:hover{background:var(--amber);color:#000;}
.dos-btn.go{border-color:var(--magenta);color:var(--magenta);
  box-shadow:0 0 10px rgba(255,85,255,0.3);}
.dos-btn.go:hover{background:var(--magenta);color:#000;}
.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.btn-grid .dos-btn{margin-top:0;}

/* Output */
#right{min-width:0;}
.output-head{
  font-family:'VT323',monospace;font-size:1.2rem;color:var(--green);
  border-bottom:1px solid var(--border);padding-bottom:6px;
  letter-spacing:1px;min-height:1.8rem;
}
#stats::before{content:"> ";color:var(--amber);}
.render-wrap{
  margin-top:12px;background:#000;border:1px solid var(--border);
  overflow:auto;max-height:52vh;padding:4px;border-radius:2px;
}
#canvas{display:block;image-rendering:pixelated;max-width:100%;height:auto;margin:0 auto;}
.txt-head{
  font-family:'VT323',monospace;color:var(--amber);
  margin-top:14px;letter-spacing:2px;font-size:1.1rem;
}
.txt-out{
  background:#000;border:1px solid var(--border);color:var(--green);
  font-family:'IBM Plex Mono',monospace;font-size:5px;line-height:1;
  padding:8px;overflow:auto;max-height:200px;white-space:pre;
  margin:6px 0 0;border-radius:2px;
}
.action-bar{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;margin-top:12px;}
.action-bar .dos-btn{margin-top:0;}

footer{
  text-align:center;margin-top:24px;padding-top:12px;
  border-top:1px solid var(--border);
  font-family:'VT323',monospace;color:#667;font-size:1.1rem;letter-spacing:1px;
}
footer a{color:var(--cyan);text-decoration:none;}
footer a:hover{color:var(--magenta);text-shadow:0 0 8px var(--magenta);}