:root{
  --wood1:#6b4423; --wood2:#4a2f18; --wood3:#8a5a30;
  --orange:#ff6b00; --orange2:#e85d04;
  --panel:#1a1512; --panel2:#241d18;
  --chrome:#c9c4bd; --chrome-dk:#8a857e;
  --ink:#e8e2d8; --dim:#9a9184;
  --black:#0a0806;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  background:
    radial-gradient(circle at 30% 0%, #2a211a 0%, #0a0806 70%);
  color:var(--ink);
  font-family:'JetBrains Mono',monospace;
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
#wrap{max-width:560px;margin:0 auto;padding:14px 12px 40px;}

/* header — woodgrain faceplate */
#header{margin-bottom:16px;}
.woodpanel{
  background:
    repeating-linear-gradient(92deg,
      var(--wood1) 0px, var(--wood3) 3px, var(--wood2) 7px, var(--wood1) 12px);
  border:3px solid #2e1c0d;
  border-radius:10px;
  padding:14px 18px;
  box-shadow:inset 0 2px 6px rgba(255,255,255,.15), 0 6px 18px rgba(0,0,0,.6);
  text-align:center;
  position:relative;
}
.woodpanel::after{
  content:"";position:absolute;top:6px;left:6px;right:6px;height:3px;
  background:linear-gradient(90deg,transparent,var(--chrome),transparent);
  opacity:.5;border-radius:2px;
}
h1{
  font-family:'Bungee',cursive;
  font-size:2.4rem;
  color:var(--orange);
  letter-spacing:1px;
  text-shadow:2px 2px 0 #2e1c0d, 0 0 20px rgba(255,107,0,.4);
  line-height:1;
}
.sub{font-size:.72rem;letter-spacing:3px;color:#ffe0c0;margin-top:6px;text-transform:uppercase;}

/* dropzone */
#dropzone{
  border:2px dashed var(--chrome-dk);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  padding:18px;
  margin-bottom:16px;
  transition:.2s;
  text-align:center;
}
#dropzone.drag{border-color:var(--orange);background:rgba(255,107,0,.08);transform:scale(1.01);}
.drop-big{font-family:'Bungee',cursive;font-size:1.1rem;color:var(--ink);}
.drop-sub{font-size:.72rem;color:var(--dim);margin:6px 0 12px;}
#loadBtn{
  font-family:'Bungee',cursive;font-size:.9rem;
  background:linear-gradient(180deg,var(--orange),var(--orange2));
  color:#170d00;border:none;border-radius:8px;
  padding:10px 22px;cursor:pointer;
  box-shadow:0 3px 0 #7a3200, 0 5px 12px rgba(0,0,0,.5);
  transition:.1s;
}
#loadBtn:active{transform:translateY(3px);box-shadow:0 0 0 #7a3200;}
.rominfo{margin-top:12px;font-size:.72rem;color:var(--dim);line-height:1.5;}
.rominfo b{color:var(--orange);}
.tiny{font-size:.65rem;opacity:.7;}

/* screen */
#screenBox{
  position:relative;
  background:#000;
  border:10px solid #17120e;
  border-radius:14px;
  box-shadow:0 0 0 2px var(--chrome-dk), inset 0 0 30px rgba(0,0,0,.9), 0 10px 30px rgba(0,0,0,.7);
  aspect-ratio:5/6;
  overflow:hidden;
  margin-bottom:12px;
}
#screen{
  width:100%;height:100%;display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
.crt{
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.28) 0px, rgba(0,0,0,.28) 1px, transparent 1px, transparent 3px);
  box-shadow:inset 0 0 80px 20px rgba(0,0,0,.6);
}

/* banner */
.banner{
  background:rgba(255,107,0,.12);
  border:1px solid var(--orange2);
  border-radius:8px;padding:8px 12px;margin-bottom:12px;
  font-size:.72rem;color:#ffdcb0;line-height:1.4;
}
.banner.err{background:rgba(255,50,50,.14);border-color:#ff5555;color:#ffb0b0;}
.hidden{display:none;}

/* console panel */
.console{
  background:
    repeating-linear-gradient(88deg,
      var(--wood2) 0px, var(--wood1) 5px, var(--wood3) 9px, var(--wood2) 14px);
  border:3px solid #2e1c0d;border-radius:12px;
  padding:14px 12px;margin-bottom:14px;
  box-shadow:inset 0 2px 6px rgba(255,255,255,.12), 0 5px 14px rgba(0,0,0,.5);
}
.switch-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:12px;}
.switch-row:last-of-type{margin-bottom:0;}
.switch-group{display:flex;flex-direction:column;align-items:center;gap:5px;}
.switch-group label{font-size:.6rem;letter-spacing:1px;color:#ffe0c0;text-shadow:1px 1px 0 #000;}
.pushbtn{
  width:44px;height:30px;border-radius:5px;
  background:linear-gradient(180deg,var(--chrome),var(--chrome-dk));
  border:1px solid #555;color:#222;font-weight:700;cursor:pointer;
  box-shadow:0 2px 0 #4a463f;
}
.pushbtn.pressed,.pushbtn:active{transform:translateY(2px);box-shadow:none;}
.toggle{
  width:64px;height:30px;border-radius:5px;font-size:.62rem;font-weight:700;
  background:linear-gradient(180deg,#3a352e,#22201c);
  border:1px solid #555;color:var(--dim);cursor:pointer;
  box-shadow:0 2px 0 #100e0b;
}
.toggle.on{
  background:linear-gradient(180deg,var(--chrome),var(--chrome-dk));
  color:#170d00;
}
.ctrl-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:14px;}
.ctrlbtn{
  font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;
  background:var(--panel2);color:var(--ink);
  border:1px solid #3a332b;border-radius:6px;
  padding:7px 10px;cursor:pointer;transition:.12s;
}
.ctrlbtn:hover{border-color:var(--orange2);}
.ctrlbtn.on{background:var(--orange2);color:#170d00;border-color:var(--orange);}

/* touch controls */
.touchpad{display:none;justify-content:space-between;align-items:center;margin-bottom:14px;}
.dpad{position:relative;width:150px;height:150px;}
.dbtn{
  position:absolute;width:50px;height:50px;
  background:linear-gradient(180deg,#3a352e,#1a1712);
  border:1px solid #555;color:var(--ink);font-size:1.1rem;border-radius:8px;cursor:pointer;
  box-shadow:0 2px 0 #000;user-select:none;
}
.dbtn:active{transform:translateY(2px);box-shadow:none;background:var(--orange2);}
.dbtn.up{top:0;left:50px;}
.dbtn.down{bottom:0;left:50px;}
.dbtn.left{left:0;top:50px;}
.dbtn.right{right:0;top:50px;}
.firebtn{
  width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff8a3d,var(--orange2));
  border:3px solid #7a3200;color:#170d00;font-family:'Bungee',cursive;font-size:.9rem;
  cursor:pointer;box-shadow:0 4px 0 #5a2400;user-select:none;
}
.firebtn:active{transform:translateY(4px);box-shadow:none;}
@media(hover:none) and (pointer:coarse){.touchpad{display:flex;}}

.keyhint{font-size:.66rem;color:var(--dim);text-align:center;margin-bottom:14px;line-height:1.6;}
.keyhint b{color:var(--orange);}

/* debug */
.debug{
  background:var(--panel);border:1px solid #322a22;border-radius:10px;
  padding:12px;margin-bottom:14px;font-size:.72rem;
}
.debug-cols{display:flex;gap:14px;flex-wrap:wrap;}
.debug-reg{flex:1;min-width:150px;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;}
.reg{color:var(--dim);}
.reg b{color:var(--orange);}
.reg.flags{grid-column:1/-1;letter-spacing:2px;}
.flag-on{color:#5dff8f;font-weight:700;}
.flag-off{color:#4a453e;}
.debug-dis{
  flex:1;min-width:120px;white-space:pre;font-size:.7rem;
  background:#000;padding:8px;border-radius:6px;color:#7bd67b;border:1px solid #222;
}
.debug-ctrl{display:flex;gap:6px;margin-top:12px;justify-content:center;flex-wrap:wrap;}

/* footer */
footer{text-align:center;font-size:.68rem;color:var(--dim);margin-top:20px;line-height:1.6;}
footer a{color:var(--orange);text-decoration:none;border-bottom:1px dotted var(--orange);}
footer a:hover{color:#ffb060;}
</parameter>