:root{
  --case:#d9cca7;
  --case-dark:#b9a878;
  --brown:#6b4b2a;
  --key:#eee3c2;
  --key-dark:#c9bb92;
  --screen-bg:#1a1030;
  --accent:#e04a2b;
  --ink:#3a2c17;
  --panel:#2a2118;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:
    radial-gradient(circle at 20% 10%, #33261a 0%, transparent 50%),
    radial-gradient(circle at 80% 90%, #241a12 0%, transparent 50%),
    #171009;
  color:#e8ddc2;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  min-height:100vh;
}

.wrap{
  max-width:760px;
  margin:0 auto;
  padding:18px 14px 40px;
}

header{ text-align:center; margin-bottom:18px; }
header h1{
  font-family:'VT323', monospace;
  font-size:2.6rem;
  margin:0;
  letter-spacing:1px;
  color:var(--case);
  text-shadow:2px 2px 0 #000, 0 0 18px rgba(224,74,43,.3);
}
.subtitle{
  font-family:'VT323', monospace;
  font-size:1.3rem;
  color:var(--accent);
  letter-spacing:3px;
}

.hidden{ display:none !important; }

/* ---- Loader panel ---- */
.panel{
  background:linear-gradient(180deg,var(--case) 0%, var(--case-dark) 100%);
  border:3px solid var(--brown);
  border-radius:14px;
  padding:20px;
  color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.loadhint{ margin-top:0; font-size:.9rem; opacity:.85; }
.romrow{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  align-items:center;
  padding:10px 0;
  border-top:1px dashed rgba(107,75,42,.4);
}
.romlabel{ display:flex; flex-direction:column; }
.romname{ font-weight:700; font-family:'VT323',monospace; font-size:1.25rem; }
.romfile{ font-size:.72rem; opacity:.7; }
.romrow input[type=file]{
  font-size:.75rem;
  max-width:210px;
}
.check{ font-size:1.2rem; width:1.6em; text-align:center; }
.check.ok{ filter:drop-shadow(0 0 4px #3a0); }

.ramrow{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0 4px;
  border-top:1px dashed rgba(107,75,42,.4);
}
.ramlabel{
  font-family:'VT323',monospace;
  font-size:1.25rem;
  font-weight:700;
}
#ramconfig{
  font-family:'JetBrains Mono',monospace;
  font-size:.82rem;
  padding:6px 10px;
  border-radius:8px;
  border:2px solid var(--brown);
  background:var(--key);
  color:var(--ink);
  cursor:pointer;
}
.ramlive{
  display:flex; align-items:center; gap:6px;
  font-family:'VT323',monospace;
  font-size:1.05rem;
  color:var(--accent);
}
.ramlive select{
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;
  padding:4px 8px;
  border-radius:6px;
  border:1px solid var(--brown);
  background:var(--key);
  color:var(--ink);
  cursor:pointer;
}
.loadctl{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }
.loadmsg{ margin-top:12px; font-size:.82rem; min-height:1.2em; color:var(--brown); }

/* ---- Buttons (chunky VIC-20 keys) ---- */
button{
  font-family:'VT323', monospace;
  font-size:1.15rem;
  letter-spacing:1px;
  padding:8px 16px;
  background:linear-gradient(180deg,var(--key) 0%, var(--key-dark) 100%);
  color:var(--ink);
  border:none;
  border-radius:8px;
  cursor:pointer;
  box-shadow:0 4px 0 #8a7748, 0 6px 8px rgba(0,0,0,.4);
  transition:transform .05s, box-shadow .05s;
}
button:active:not(:disabled){ transform:translateY(3px); box-shadow:0 1px 0 #8a7748; }
button:disabled{ opacity:.45; cursor:not-allowed; box-shadow:0 4px 0 #8a7748; }
button.ghost{
  background:transparent;
  color:var(--brown);
  box-shadow:none;
  border:2px solid var(--brown);
  border-radius:8px;
}
#power{
  background:linear-gradient(180deg,#ff6b3d,#c9391a);
  color:#fff;
  box-shadow:0 4px 0 #8a2510, 0 6px 10px rgba(0,0,0,.5);
}

/* ---- Machine / screen ---- */
.machine{
  margin-top:8px;
  animation:powerglow .8s ease-out;
}
@keyframes powerglow{
  0%{ filter:brightness(3) blur(3px); opacity:0; }
  40%{ filter:brightness(1.5); opacity:1; }
  100%{ filter:none; }
}

.bezel{
  position:relative;
  background:linear-gradient(145deg,#3a3a3a,#141414);
  border-radius:22px;
  padding:24px;
  box-shadow:0 14px 40px rgba(0,0,0,.7), inset 0 2px 6px rgba(255,255,255,.08);
}
#screen{
  display:block;
  margin:0 auto;
  width:100%;
  max-width:512px;
  height:auto;
  aspect-ratio:256/280;
  background:var(--screen-bg);
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  border-radius:6px;
  box-shadow:0 0 40px rgba(120,90,255,.25) inset, 0 0 3px #000;
  outline:none;
}
.scanlines{
  position:absolute;
  inset:24px;
  border-radius:6px;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.16) 3px
  );
  mix-blend-mode:multiply;
}

/* ---- Controls ---- */
.controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:16px;
  justify-content:center;
}
.speed{
  font-family:'VT323',monospace;
  font-size:1.1rem;
  color:var(--accent);
  margin-left:auto;
  padding:4px 10px;
}

.prgstrip{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  background:rgba(0,0,0,.22);
  border-radius:8px;
  padding:8px 12px;
}
.prgbtn{
  font-family:'VT323', monospace;
  font-size:1.15rem;
  letter-spacing:1px;
  padding:7px 15px;
  background:linear-gradient(180deg,#7dd47d,#3a9a3a);
  color:#0a1e0a;
  border-radius:8px;
  cursor:pointer;
  box-shadow:0 4px 0 #256425, 0 6px 8px rgba(0,0,0,.4);
  user-select:none;
  transition:transform .05s, box-shadow .05s;
}
.prgbtn:active{ transform:translateY(3px); box-shadow:0 1px 0 #256425; }
.prgauto{
  font-family:'VT323',monospace;
  font-size:1.05rem;
  color:var(--case);
  display:flex; align-items:center; gap:5px;
  cursor:pointer;
}
.prgmsg{
  font-size:.78rem;
  opacity:.85;
  flex:1 1 100%;
  text-align:center;
  color:#9cd49c;
  min-height:1.1em;
}
.bezel.drag-over{
  outline:3px dashed #7dd47d;
  outline-offset:4px;
}
.bezel.drag-over::after{
  content:'DROP .PRG TO LOAD';
  position:absolute;
  inset:24px;
  display:flex; align-items:center; justify-content:center;
  font-family:'VT323',monospace;
  font-size:1.5rem;
  color:#7dd47d;
  background:rgba(0,0,0,.55);
  border-radius:6px;
  pointer-events:none;
  letter-spacing:2px;
}

.kbdhint{
  margin-top:14px;
  font-size:.78rem;
  line-height:1.6;
  opacity:.8;
  text-align:center;
  background:rgba(0,0,0,.25);
  border-radius:8px;
  padding:8px 12px;
}
.kbdhint b{ color:var(--accent); }

/* ---- Debug drawer ---- */
.debug{
  margin-top:14px;
  background:#0a0e08;
  border:1px solid #1c3a1c;
  border-radius:8px;
  padding:12px;
}
#dbgtext{
  margin:0;
  color:#4fdd4f;
  font-family:'JetBrains Mono',monospace;
  font-size:.8rem;
  line-height:1.5;
  text-shadow:0 0 6px rgba(79,221,79,.4);
  white-space:pre-wrap;
}

/* ---- Footer ---- */
footer{
  margin-top:30px;
  text-align:center;
  font-size:.75rem;
  opacity:.6;
  display:flex;
  flex-direction:column;
  gap:6px;
}
footer a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px dotted var(--accent);
}
footer a:hover{ opacity:.8; }

@media (max-width:520px){
  header h1{ font-size:2rem; }
  .romrow{ grid-template-columns:1fr auto; }
  .romrow input[type=file]{ grid-column:1 / -1; max-width:none; }
  .speed{ margin-left:0; width:100%; text-align:center; }
}
</parameter>