:root{
  --case:#d9c9a3;        /* Atom beige */
  --case-dark:#b8a679;
  --ink:#3a2c14;         /* dark brown */
  --panel:#e9ddc0;
  --phos:#8fff6a;        /* phosphor green */
  --bezel:#211d16;
  --accent:#a8412a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'JetBrains Mono',monospace;
  background:
    radial-gradient(circle at 30% 10%, #c9b98f 0%, transparent 60%),
    repeating-linear-gradient(45deg,#cbbb90 0 12px,#c7b78c 12px 24px),
    var(--case);
  color:var(--ink);
  min-height:100vh;
  padding:16px;
}
#app{max-width:820px;margin:0 auto}

header{text-align:center;margin-bottom:14px}
header h1{
  font-family:'VT323',monospace;
  font-size:2.8rem;line-height:1;margin:0;
  color:var(--ink);
  text-shadow:2px 2px 0 var(--case-dark);
  letter-spacing:1px;
}
header .sub{
  font-size:.8rem;letter-spacing:3px;color:#6b5a34;text-transform:uppercase;
  margin-top:4px;
}

/* ROM panel */
.rompanel{
  background:var(--panel);
  border:2px solid var(--case-dark);
  border-radius:8px;
  padding:12px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
  margin-bottom:16px;
  box-shadow:inset 0 0 0 1px #fff5da;
}
.rom{display:flex;flex-direction:column;gap:5px;font-size:.72rem}
.rom label{font-weight:700}
.rom code{background:var(--ink);color:var(--phos);padding:1px 5px;border-radius:3px}
.rom input[type=file]{font-size:.65rem;width:100%}
.rom .status{color:#7a6a44;font-style:italic}
.rom .status.ok{color:#2a7d1f;font-weight:700;font-style:normal}
.rom.hint{grid-column:1/-1;font-size:.68rem;color:#6b5a34;border-top:1px dashed var(--case-dark);padding-top:8px}

/* CRT */
.crt-wrap{text-align:center;margin-bottom:14px}
.crt-bezel{
  display:inline-block;position:relative;
  background:linear-gradient(145deg,#332c22,#141109);
  padding:22px;border-radius:18px;
  box-shadow:0 8px 30px rgba(0,0,0,.5), inset 0 0 12px rgba(0,0,0,.8);
}
#screen{
  display:block;image-rendering:pixelated;
  width:512px;height:384px;max-width:78vw;height:auto;
  background:#0a1a08;border-radius:6px;
  box-shadow:0 0 30px rgba(143,255,106,.25), inset 0 0 40px rgba(0,0,0,.6);
}
.scanlines{
  position:absolute;inset:22px;border-radius:6px;pointer-events:none;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 3px);
  mix-blend-mode:multiply;
}
.bootmsg{
  margin-top:10px;font-size:.78rem;color:#6b5a34;
  background:var(--panel);display:inline-block;padding:6px 12px;border-radius:6px;
  border:1px solid var(--case-dark);
}
.bootmsg.ready{color:#2a7d1f;font-weight:700}

/* Controls */
.controls{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  margin-bottom:14px;
}
button{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.8rem;
  background:var(--case);color:var(--ink);
  border:2px solid #fff5da;border-right-color:var(--case-dark);border-bottom-color:var(--case-dark);
  padding:8px 14px;border-radius:6px;cursor:pointer;
  box-shadow:0 2px 0 var(--case-dark);
  transition:transform .05s;
}
button:hover{background:#e4d4ab}
button:active{transform:translateY(2px);box-shadow:none}
.speed{display:flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700}
.speed input{accent-color:var(--accent)}
#speedVal{color:var(--accent)}

/* Registers */
.regs{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px;
}
.regbox{
  background:var(--bezel);color:var(--phos);
  border-radius:6px;padding:6px 10px;font-size:.72rem;
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:52px;
  box-shadow:inset 0 0 8px rgba(0,0,0,.6);
}
.regbox span{color:#5f8a4d;font-size:.6rem;letter-spacing:1px}
.regbox b{font-family:'VT323',monospace;font-size:1.2rem;letter-spacing:1px}
.regbox.flags b{font-size:1rem;letter-spacing:2px}

/* Keyboard */
.kbwrap{
  background:var(--panel);border:2px solid var(--case-dark);border-radius:8px;
  padding:12px;box-shadow:inset 0 0 0 1px #fff5da;
}
.kbtitle{font-size:.72rem;font-weight:700;margin-bottom:8px;color:#6b5a34;text-align:center}
.kbrow{display:flex;gap:4px;margin-bottom:4px;align-items:center;flex-wrap:wrap}
.rowlabel{
  font-size:.6rem;font-weight:700;color:var(--accent);
  width:34px;flex:0 0 34px;background:var(--ink);color:var(--phos);
  padding:2px 0;text-align:center;border-radius:3px;
}
.key{
  flex:1 1 0;min-width:34px;font-size:.68rem;padding:8px 2px;
  box-shadow:0 2px 0 var(--case-dark);
}
.key.wide{flex:1.6 1 0}
.key.down{background:var(--accent);color:#fff;transform:translateY(2px);box-shadow:none}

/* Footer */
footer{
  margin-top:18px;text-align:center;font-size:.7rem;color:#6b5a34;
  display:flex;flex-direction:column;gap:6px;
}
footer a{color:var(--accent);font-weight:700;text-decoration:none}
footer a:hover{text-decoration:underline}

@media(max-width:640px){
  .rompanel{grid-template-columns:1fr}
  header h1{font-size:2rem}
  #screen{max-width:92vw}
  .key{font-size:.6rem;padding:10px 1px}
  .rowlabel{flex:0 0 28px;width:28px}
}