:root{
  --bg:#05060d;
  --panel:#0c1020;
  --cyan:#00e5ff;
  --magenta:#ff2fd0;
  --green:#39ff14;
  --amber:#ffd400;
  --line:#1c2440;
  --dim:#5a6488;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 20% 0%, rgba(0,229,255,0.08), transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(255,47,208,0.10), transparent 50%),
    var(--bg);
  color:#cdd6f4;
  font-family:'Space Mono',monospace;
  min-height:100vh;
  overflow-x:hidden;
}
#scanline-global{
  position:fixed;inset:0;pointer-events:none;z-index:999;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,0.12) 2px 4px);
  mix-blend-mode:multiply;opacity:.35;
}

/* Header */
header{text-align:center;padding:28px 16px 6px;}
h1{
  font-family:'VT323',monospace;
  font-size:clamp(2.4rem,7vw,4.5rem);
  margin:0;line-height:.9;letter-spacing:2px;
  color:var(--cyan);
  text-shadow:0 0 8px rgba(0,229,255,.7),0 0 24px rgba(0,229,255,.35),
              2px 2px 0 var(--magenta);
}
.blink{animation:blink 1s steps(2) infinite;color:var(--magenta);}
@keyframes blink{50%{opacity:0;}}
.subtitle{color:var(--dim);font-size:.85rem;margin:6px 0 0;letter-spacing:1px;}

main{max-width:760px;margin:0 auto;padding:16px;}

/* Dropzone */
.dropzone{
  border:2px dashed var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(0,229,255,.03),rgba(255,47,208,.03));
  padding:34px 20px;text-align:center;cursor:pointer;
  transition:.2s;position:relative;margin-bottom:14px;
}
.dropzone:hover{border-color:var(--cyan);}
.dropzone.drag-over{
  border-color:var(--magenta);
  box-shadow:0 0 30px rgba(255,47,208,.4) inset;
  background:rgba(255,47,208,.06);
}
.dz-icon{font-size:2.6rem;color:var(--cyan);margin-bottom:8px;filter:drop-shadow(0 0 8px var(--cyan));}
.dz-text{font-size:1.05rem;color:#e6ebff;}
.dz-text b{color:var(--amber);}
.dz-sub{color:var(--dim);font-size:.8rem;margin-top:6px;}
.dropzone input{display:none;}

.reload-btn{
  display:block;margin:0 auto 14px;
  background:transparent;color:var(--cyan);border:1px solid var(--line);
  padding:8px 16px;border-radius:8px;font-family:'Space Mono';cursor:pointer;
  transition:.2s;
}
.reload-btn:hover{border-color:var(--cyan);box-shadow:0 0 12px rgba(0,229,255,.3);}

.errbox{
  background:rgba(255,47,80,.12);border:1px solid #ff2f50;
  color:#ff8ba0;padding:12px 14px;border-radius:8px;margin-bottom:14px;font-size:.85rem;
}

/* CRT stage */
.stage-wrap{display:flex;justify-content:center;margin:6px 0 18px;}
.crt{
  position:relative;
  padding:18px;border-radius:20px;
  background:linear-gradient(160deg,#20232f,#0a0c14);
  box-shadow:0 0 0 3px #000, 0 20px 50px rgba(0,0,0,.7),
             inset 0 0 40px rgba(0,0,0,.6);
  max-width:100%;
}
#canvas{
  display:block;
  width:512px;max-width:calc(100vw - 72px);
  height:auto;aspect-ratio:256/200;
  /* The canvas backing store is now 4× supersampled (1024×800), so displaying
     it at ~512px is a DOWNSCALE. Let the browser resample smoothly — this is
     what actually kills the hairline seams ("unconnected lines") between
     adjacent polygons. Purists' scanline overlay still keeps the retro feel. */
  image-rendering:auto;
  background:#050510;border-radius:6px;
  box-shadow:0 0 18px rgba(0,229,255,.15);
}
.crt-overlay{
  position:absolute;inset:18px;border-radius:6px;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 3px);
}
.crt-vignette{
  position:absolute;inset:18px;border-radius:6px;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(0,0,0,.7);
}

/* Controls */
.controls{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px;}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.ctl{
  flex:1;min-width:80px;
  background:#0a0e1c;color:var(--dim);
  border:1px solid var(--line);border-radius:8px;
  padding:10px 8px;font-family:'Space Mono';font-size:.8rem;font-weight:700;
  cursor:pointer;transition:.15s;letter-spacing:.5px;
}
.ctl:hover{color:#fff;border-color:var(--cyan);}
.ctl.active{color:#031;background:var(--cyan);border-color:var(--cyan);text-shadow:none;box-shadow:0 0 14px rgba(0,229,255,.4);}
.ctl.corrupt{color:var(--magenta);border-color:var(--magenta);}
.ctl.corrupt:hover{color:#fff;border-color:var(--magenta);box-shadow:0 0 14px rgba(255,47,208,.5);}
.ctl.corrupt:active{background:var(--magenta);color:#fff;}
@keyframes glitchflash{0%{filter:none;}20%{filter:hue-rotate(90deg) saturate(3);}40%{filter:invert(0.3);}100%{filter:none;}}
.crt.glitching{animation:glitchflash .3s steps(3);}
.scrub-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.scrub-row:last-child{margin-bottom:0;}
.lbl{color:var(--dim);font-size:.72rem;letter-spacing:1px;min-width:48px;}
.mono{font-family:'VT323';font-size:1.3rem;color:var(--green);min-width:70px;text-align:right;}
.fps-input{
  width:88px;flex:0 0 auto;
  background:#0a0e1c;color:var(--green);
  border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;font-family:'VT323';font-size:1.5rem;
  text-align:center;outline:none;transition:.15s;
  -moz-appearance:textfield;
}
.fps-input::-webkit-outer-spin-button,
.fps-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.fps-input:focus{border-color:var(--cyan);box-shadow:0 0 12px rgba(0,229,255,.35);}
.fps-max{
  flex:0 0 auto;background:#0a0e1c;color:var(--magenta);
  border:1px solid var(--magenta);border-radius:8px;
  padding:8px 14px;font-family:'Space Mono';font-size:.8rem;font-weight:700;
  cursor:pointer;transition:.15s;letter-spacing:.5px;
}
.fps-max:hover{color:#fff;box-shadow:0 0 14px rgba(255,47,208,.5);}
.fps-max.active{background:var(--magenta);color:#fff;box-shadow:0 0 16px rgba(255,47,208,.6);}

input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--cyan);cursor:pointer;box-shadow:0 0 8px var(--cyan);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--cyan);cursor:pointer;
}

/* Stats */
.stats{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;
}
.stat{display:flex;align-items:center;gap:8px;font-size:.78rem;}
.stat .k{color:var(--dim);letter-spacing:1px;min-width:64px;}
.stat .v{color:var(--cyan);font-weight:700;font-family:'VT323';font-size:1.2rem;}
.stat .v.ok{color:var(--green);}
.stat .v.warn{color:var(--amber);}
.stat .v.err{color:#ff5f7a;}
.stat.flags{grid-column:1 / -1;}
.stat.palette{grid-column:1 / -1;align-items:flex-start;}
.flag{
  padding:3px 8px;border-radius:5px;font-size:.68rem;font-weight:700;letter-spacing:1px;
  background:#0a0e1c;color:var(--dim);border:1px solid var(--line);
}
.flag.on{background:var(--magenta);color:#fff;border-color:var(--magenta);box-shadow:0 0 10px rgba(255,47,208,.5);}
.chips{display:flex;flex-wrap:wrap;gap:4px;}
.chip{width:20px;height:20px;border-radius:4px;border:1px solid rgba(255,255,255,.15);}

/* Footer */
footer{
  text-align:center;padding:26px 16px 40px;color:var(--dim);font-size:.78rem;
  display:flex;flex-direction:column;gap:8px;align-items:center;
}
footer a{color:var(--magenta);text-decoration:none;border-bottom:1px dotted var(--magenta);}
footer a:hover{color:var(--cyan);border-color:var(--cyan);}

.hidden{display:none !important;}

@media(max-width:520px){
  .stats{grid-template-columns:1fr;}
  .mono{font-size:1.1rem;min-width:56px;}
}