:root{
  --phosphor:#e8f4e8;
  --accent:#e0245e;
  --dim:#5a6a5a;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100%;}
body{
  background:radial-gradient(ellipse at 50% -10%, #1b1512 0%, transparent 55%),repeating-linear-gradient(45deg,#0c0c0c 0 6px,#0a0a0a 6px 12px);
  color:var(--phosphor);font-family:'JetBrains Mono',monospace;
  display:flex;flex-direction:column;align-items:center;padding:14px 10px 30px;
  -webkit-user-select:none;user-select:none;
}
#machine{width:100%;max-width:620px;display:flex;flex-direction:column;gap:12px;}
#titlebar{text-align:center;border:2px solid var(--accent);background:linear-gradient(180deg,#151517,#101012);border-radius:12px;padding:10px 8px;}
#titlebar h1{font-family:'VT323',monospace;font-size:2.4rem;font-weight:400;line-height:1;text-shadow:0 0 8px rgba(232,244,232,.35);}
#titlebar h1 .em{color:var(--accent);}
#titlebar .sub{font-size:.68rem;color:var(--dim);letter-spacing:2px;margin-top:4px;text-transform:uppercase;cursor:help;}
.forth{color:var(--accent);}

#bezel{background:linear-gradient(160deg,#28282c,#141416 70%);border-radius:18px;padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.7),inset 0 -3px 8px rgba(0,0,0,.6);border:1px solid #000;}
#bezel.drag{box-shadow:0 0 0 3px var(--accent);}
#screenwrap{position:relative;aspect-ratio:4/3;width:100%;border-radius:10px;overflow:hidden;background:#050805;box-shadow:inset 0 0 0 6px #060906;}
#screenwrap.glow{box-shadow:inset 0 0 0 6px #060906,0 0 22px rgba(120,200,120,.15);}
#canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;}
#scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);}

/* ---- Jupiter Ace case ---- */
#acecase{
  background:linear-gradient(180deg,#f2f2ef,#d8d8d4);border-radius:14px;padding:14px 3% 18px;
  box-shadow:0 12px 30px rgba(0,0,0,.7),inset 0 2px 0 #fff,inset 0 -3px 6px rgba(0,0,0,.15);
  color:#111;overflow-x:auto;
}
.logo{position:relative;height:clamp(60px,15vw,96px);}
.jup{font-family:Helvetica,Arial,sans-serif;font-weight:900;font-style:italic;font-size:clamp(26px,7.5vw,46px);letter-spacing:-1px;line-height:1;}
.ace{font-family:Helvetica,Arial,sans-serif;font-weight:200;font-style:italic;font-size:clamp(18px,5vw,30px);margin-left:18%;line-height:1;}
.stripes i{display:block;height:2px;background:var(--accent);margin-bottom:clamp(4px,1.2vw,7px);}
.s1{position:absolute;left:44%;right:0;top:2px;}
.s1 i:nth-child(n+4){margin-left:-3%;}
.s2{width:20%;margin:6px auto;}
.ridge{height:clamp(10px,3vw,18px);margin:4px -3%;background:linear-gradient(180deg,#b9b9b5,#cfcfcb 60%,#e8e8e5);box-shadow:inset 0 3px 5px rgba(0,0,0,.25);}

#keyboard{display:flex;flex-direction:column;gap:clamp(4px,1.2vw,8px);margin-top:10px;min-width:300px;}
.vkrow{display:flex;gap:clamp(3px,1.1vw,8px);}
.vkrow.r2{padding-left:4%;}
.vkrow.r3{padding-left:7%;}
.lblstrip{display:flex;gap:clamp(3px,1.1vw,8px);background:#fafaf8;margin:-2px -1%;padding:2px 1%;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
.lblstrip span{flex:1 1 0;text-align:center;font-family:Helvetica,Arial,sans-serif;font-size:clamp(5px,1.4vw,8px);line-height:1.1;min-height:1.2em;}
.vk{
  flex:1 1 0;min-width:0;position:relative;aspect-ratio:1/0.95;
  background:linear-gradient(180deg,#2c2c2c,#1c1c1c 60%,#121212);color:#fff;
  border:none;border-radius:5px;cursor:pointer;touch-action:none;
  box-shadow:0 3px 0 #000,0 4px 5px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);
  font-family:Helvetica,Arial,sans-serif;transition:transform .04s;
}
.vk .m{position:absolute;left:18%;top:50%;transform:translateY(-50%);font-weight:700;font-size:clamp(9px,2.6vw,15px);}
.vk .s{position:absolute;right:12%;top:8%;font-size:clamp(7px,1.9vw,11px);}
.vk .g{position:absolute;right:12%;bottom:12%;width:28%;height:26%;border:1px solid #fff;}
.vk.txt{flex:1.25 1 0;aspect-ratio:auto;}
.vk.txt .m{left:0;right:0;text-align:center;font-size:clamp(5px,1.5vw,9px);line-height:1.15;}
.vk.space{flex:2 1 0;aspect-ratio:auto;}
.vk.space .m{left:0;right:0;text-align:center;font-size:clamp(9px,2.4vw,14px);}
.vk.space small{display:block;font-size:.55em;font-weight:400;}
.vk.down{transform:translateY(3px);box-shadow:0 0 0 #000,0 0 10px rgba(224,36,94,.8);background:linear-gradient(180deg,#3a1520,#240a12);}
.vk.sticky{box-shadow:0 3px 0 #000,0 0 0 2px var(--accent);}

#controls{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.ctl{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--phosphor);background:linear-gradient(180deg,#232326,#161618);border:1px solid #000;border-top:1px solid #3a3a3e;border-radius:7px;padding:8px 10px;cursor:pointer;box-shadow:0 2px 0 #000;}
.ctl:active{transform:translateY(2px);box-shadow:none;}
.ctl.active{color:var(--accent);border-color:var(--accent);}
.filebtn{display:inline-flex;align-items:center;}

#keymap{background:#0b0b0d;border:1px solid var(--accent);border-radius:8px;padding:10px;font-size:.68rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:4px 10px;color:#cfe0cf;}
#keymap[hidden]{display:none;}
#keymap b{color:#6cff8a;}

#status{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;font-size:.66rem;color:#6cff8a;background:#050705;border:1px solid #000;border-radius:6px;padding:6px 10px;letter-spacing:1px;}
#stHalt{color:var(--accent);}#stRom{color:#d0a060;}#stKey{color:#fff;}

#footer{margin-top:6px;text-align:center;font-size:.66rem;color:var(--dim);display:flex;flex-direction:column;gap:6px;}
#footer code{color:#6cff8a;background:#0a120a;padding:1px 5px;border-radius:3px;}
#footer a{color:var(--accent);text-decoration:none;font-weight:700;}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);background:#111;border:1px solid var(--accent);color:#fff;padding:10px 14px;border-radius:8px;font-size:.75rem;opacity:0;transition:.3s;max-width:90vw;text-align:center;pointer-events:none;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}