:root{
  --beige:#e8dcc0;
  --beige-dark:#cdbf9d;
  --brown:#5a4630;
  --brown-dark:#3a2c1c;
  --cyan:#70d0de;
  --amber:#f0c060;
  --panel:#2a2018;
  --ink:#2a2018;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Space Mono',monospace;
  background:
    radial-gradient(ellipse at top,#3a2c1c 0%,#1a1410 70%,#0d0a07 100%);
  color:var(--beige);
  min-height:100vh;
  padding:16px;
}
#app{max-width:920px;margin:0 auto;}

/* ---- Title bar ---- */
#titlebar{
  background:linear-gradient(180deg,var(--beige) 0%,var(--beige-dark) 100%);
  border:3px solid var(--brown-dark);
  border-radius:10px 10px 4px 4px;
  padding:14px 20px;
  color:var(--ink);
  box-shadow:0 6px 0 var(--brown-dark),0 10px 24px rgba(0,0,0,.6);
}
.logo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.chicken{display:inline-flex;border:2px solid var(--brown-dark);border-radius:4px;overflow:hidden;}
.chicken i{width:9px;height:26px;display:block;}
.title{
  font-family:'VT323',monospace;
  font-size:2.6rem;line-height:1;letter-spacing:1px;font-weight:400;
  color:var(--brown-dark);
}
.title em{color:#b53b2b;font-style:normal;}
.tagline{
  font-family:'VT323',monospace;font-size:1.2rem;color:var(--brown);
  margin-top:4px;letter-spacing:1px;
}

/* ---- ROM panel ---- */
#rompanel{
  margin-top:20px;
  background:var(--panel);
  border:2px solid var(--brown);
  border-radius:8px;
  padding:22px;
}
#rompanel h2{
  font-family:'VT323',monospace;font-weight:400;font-size:1.8rem;
  margin:0 0 6px;color:var(--amber);letter-spacing:1px;
}
#rompanel .hint{margin:0 0 18px;font-size:.8rem;color:#a99;line-height:1.5;}
.romslots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.romslot{
  display:block;cursor:pointer;
  background:#1c1610;border:2px dashed #6a5a40;border-radius:8px;
  padding:14px;transition:all .15s;
}
.romslot:hover{border-color:var(--amber);transform:translateY(-2px);}
.romslot.drag{border-color:var(--cyan);background:#241d14;}
.romslot.loaded{border-style:solid;border-color:#5aa05a;background:#182018;}
.rs-head{display:flex;justify-content:space-between;align-items:baseline;}
.rs-name{font-family:'VT323',monospace;font-size:1.2rem;color:var(--beige);}
.rs-addr{font-size:.75rem;color:var(--cyan);}
.rs-file{font-size:.68rem;color:#8a7a60;margin:6px 0;}
.rs-status{font-size:.8rem;color:#c8b890;font-weight:700;}
.romslot.loaded .rs-status{color:#7ad07a;}
.rompanel-actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;}
.power-btn{
  font-family:'VT323',monospace;font-size:1.5rem;
  background:linear-gradient(180deg,#c53a2a,#8a2418);
  color:#fff;border:none;border-radius:6px;padding:10px 28px;cursor:pointer;
  box-shadow:0 4px 0 #5a1810;letter-spacing:1px;
}
.power-btn:disabled{background:#443b30;color:#776;box-shadow:0 4px 0 #221c14;cursor:not-allowed;}
.power-btn:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #5a1810;}
.ghost-btn{
  background:transparent;color:#a99;border:1px solid #6a5a40;border-radius:6px;
  padding:10px 18px;cursor:pointer;font-family:'Space Mono',monospace;font-size:.8rem;
}
.ghost-btn:hover{color:var(--amber);border-color:var(--amber);}

/* ---- Machine ---- */
#machine{margin-top:20px;}
.crt-bezel{
  background:linear-gradient(160deg,#3a3228,#221c14);
  border:3px solid var(--brown-dark);border-radius:16px;
  padding:22px;box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 8px 24px rgba(0,0,0,.6);
}
#crtWrap{
  position:relative;max-width:640px;margin:0 auto;
  background:#000;border-radius:10px;overflow:hidden;
  box-shadow:0 0 0 8px #1a1610,0 0 30px rgba(112,208,222,.15) inset;
}
#screen{
  display:block;width:100%;height:auto;
  image-rendering:pixelated;image-rendering:crisp-edges;
  background:#70d0de;
}
#scanlines{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0px,rgba(0,0,0,.25) 1px,transparent 2px,transparent 4px);
}
.crt-on #scanlines{opacity:.55;}
.crt-on::after{}
#crtWrap.crt-on{box-shadow:0 0 0 8px #1a1610,0 0 40px rgba(112,208,222,.25) inset;}
#crtWrap.crt-on #screen{filter:saturate(1.15) brightness(1.05);animation:flick 6s infinite;}
@keyframes flick{0%,97%{opacity:1;}98%{opacity:.94;}100%{opacity:1;}}

/* ---- Controls ---- */
#controls{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:14px;background:var(--panel);border:2px solid var(--brown);
  border-radius:8px;padding:12px;
}
.btn{
  font-family:'VT323',monospace;font-size:1.1rem;
  background:linear-gradient(180deg,var(--beige),var(--beige-dark));
  color:var(--ink);border:none;border-radius:5px;padding:6px 14px;cursor:pointer;
  box-shadow:0 3px 0 var(--brown-dark);letter-spacing:.5px;
}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--brown-dark);}
.btn.small{font-size:.95rem;padding:4px 10px;}
.filebtn{display:inline-flex;align-items:center;}
.ctl{display:flex;align-items:center;gap:6px;font-family:'VT323',monospace;font-size:1.1rem;color:var(--amber);}
.ctl select,.ctl input[type=range]{font-family:'Space Mono',monospace;}
.ctl select{background:#1a1610;color:var(--beige);border:1px solid #6a5a40;border-radius:4px;padding:3px;}
.ctl input[type=range]{width:90px;accent-color:var(--cyan);}
.toggle{cursor:pointer;}
.perf{margin-left:auto;font-family:'VT323',monospace;color:var(--cyan);font-size:1.05rem;}

/* ---- On-screen keyboard ---- */
#osk{margin-top:14px;background:var(--panel);border:2px solid var(--brown);border-radius:8px;padding:10px;}
.osk-row{display:flex;gap:5px;justify-content:center;margin-bottom:5px;}
.osk-key{
  flex:1;min-width:0;max-width:52px;
  font-family:'VT323',monospace;font-size:1rem;
  background:linear-gradient(180deg,var(--beige),var(--beige-dark));
  color:var(--ink);border:none;border-radius:5px;padding:8px 0;cursor:pointer;
  box-shadow:0 3px 0 var(--brown-dark);user-select:none;
}
.osk-key.wide{max-width:400px;}
.osk-key.down{transform:translateY(2px);box-shadow:0 1px 0 var(--brown-dark);background:var(--amber);}

/* ---- Debug ---- */
#debug{margin-top:14px;background:#0f0c08;border:2px solid var(--brown);border-radius:8px;padding:14px;}
.dbg-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
#debug h3{font-family:'VT323',monospace;color:var(--amber);margin:0 0 8px;font-size:1.2rem;font-weight:400;}
#debug pre{margin:0;font-family:'Space Mono',monospace;font-size:.72rem;color:#8fd88f;white-space:pre;overflow-x:auto;line-height:1.4;}
#memAddr{font-family:'Space Mono',monospace;background:#1a1610;color:var(--cyan);border:1px solid #6a5a40;border-radius:4px;padding:4px 6px;margin-bottom:6px;width:80px;text-transform:uppercase;}

/* ---- Footer ---- */
footer{
  margin-top:24px;padding:16px 8px;text-align:center;
  font-size:.72rem;color:#8a7a60;line-height:1.7;
}
footer kbd{background:#1a1610;border:1px solid #6a5a40;border-radius:3px;padding:1px 5px;color:var(--cyan);}
footer .sep{margin:0 6px;color:#5a4630;}
footer a{color:var(--amber);text-decoration:none;border-bottom:1px dotted var(--amber);}
footer a:hover{color:var(--cyan);border-color:var(--cyan);}

@media(max-width:560px){
  .title{font-size:1.9rem;}
  .osk-key{font-size:.8rem;padding:10px 0;}
  #controls{gap:6px;}
  .btn{font-size:.95rem;padding:5px 10px;}
}