:root{
  --bg:#0a0d0a;
  --panel:#141a14;
  --phos:#39ff9e;
  --phos-dim:#1f7a4c;
  --amber:#ffb347;
  --line:#26332a;
  --text:#c9e8d5;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:
  radial-gradient(circle at 50% 0%, #12201a 0%, #060806 70%);
  color:var(--text);font-family:'Chivo Mono',monospace;min-height:100%;
  -webkit-tap-highlight-color:transparent;}
#app{max-width:760px;margin:0 auto;padding:14px 12px 40px;display:flex;flex-direction:column;align-items:center;}

#topbar{width:100%;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:16px;}
#topbar h1{font-family:'VT323',monospace;font-size:34px;margin:0;letter-spacing:1px;
  color:var(--phos);text-shadow:0 0 10px rgba(57,255,158,.5);font-weight:400;}
#topbar h1 span{color:var(--amber);text-shadow:0 0 10px rgba(255,179,71,.5);}
#status{font-size:12px;color:var(--phos-dim);max-width:45%;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

main{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;}

#screen-wrap{width:100%;display:flex;justify-content:center;}
#bezel{position:relative;background:linear-gradient(160deg,#1c241d,#0c110d);
  border:2px solid #2a3a2e;border-radius:14px;padding:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.5);
  transition:border-color .2s;}
#bezel.drag{border-color:var(--phos);box-shadow:0 0 30px rgba(57,255,158,.4);}
#canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;
  background:#000;border-radius:4px;width:512px;height:384px;
  box-shadow:0 0 16px rgba(0,0,0,.8);}
#crt-overlay{position:absolute;top:14px;left:14px;right:14px;bottom:14px;
  border-radius:4px;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0px,rgba(0,0,0,.16) 1px,transparent 1px,transparent 3px);
  mix-blend-mode:multiply;}
#crt-overlay::after{content:'';position:absolute;inset:0;border-radius:4px;
  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.35) 100%);}
#boot-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:var(--phos);text-align:center;font-family:'VT323',monospace;font-size:22px;
  text-shadow:0 0 8px rgba(57,255,158,.6);pointer-events:none;line-height:1.4;}
#boot-hint small{font-size:14px;color:var(--phos-dim);}

#controls{width:100%;max-width:520px;display:flex;flex-direction:column;gap:10px;}
.ctrl-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;}
.ctrl-row.small{font-size:12px;color:var(--phos-dim);}
button,.file-btn,select{font-family:'Chivo Mono',monospace;cursor:pointer;
  background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:9px 16px;font-size:14px;font-weight:500;
  transition:all .15s;}
button:hover,.file-btn:hover,select:hover{border-color:var(--phos-dim);color:var(--phos);}
button:active{transform:translateY(1px);}
.file-btn{background:var(--phos-dim);color:#04120a;border-color:var(--phos);font-weight:700;
  text-shadow:none;}
.file-btn:hover{background:var(--phos);color:#04120a;}
.file-btn input{display:none;}
.ctrl-row.small label{display:flex;align-items:center;gap:6px;}
.chk{cursor:pointer;}
#dbg{font-family:'VT323',monospace;font-size:16px;color:var(--amber);
  min-width:180px;text-align:center;}
select{padding:6px 8px;}

#pad{width:100%;max-width:520px;display:flex;justify-content:space-between;
  align-items:center;padding:0 6px;}
#dpad{position:relative;width:132px;height:132px;}
#dpad .d{position:absolute;width:44px;height:44px;padding:0;font-size:16px;
  display:flex;align-items:center;justify-content:center;background:#182018;
  color:var(--phos);border-radius:10px;}
#dpad .d:active{background:var(--phos-dim);color:#04120a;}
.d.up{top:0;left:44px;}
.d.left{top:44px;left:0;}
.d.right{top:44px;left:88px;}
.d.down{top:88px;left:44px;}
#face{display:flex;gap:16px;}
.face-btn{width:60px;height:60px;border-radius:50%;font-family:'VT323',monospace;
  font-size:26px;background:#2a1a1a;color:var(--amber);border:2px solid #4a2a2a;
  display:flex;align-items:center;justify-content:center;}
.face-btn:active{background:var(--amber);color:#1a1000;}

#legend{width:100%;max-width:520px;text-align:center;font-size:12px;
  color:var(--phos-dim);border:1px dashed var(--line);border-radius:8px;
  padding:8px;}

footer{margin-top:26px;width:100%;display:flex;flex-direction:column;
  align-items:center;gap:6px;font-size:12px;color:var(--phos-dim);
  border-top:1px solid var(--line);padding-top:14px;text-align:center;}
footer a{color:var(--amber);text-decoration:none;border-bottom:1px dotted var(--amber);}
footer a:hover{color:var(--phos);border-color:var(--phos);}

@media (max-width:560px){
  #topbar h1{font-size:26px;}
  #canvas{width:100%!important;height:auto!important;max-width:calc(100vw - 60px);}
  #status{font-size:10px;}
  #dpad{width:120px;height:120px;}
  #dpad .d{width:40px;height:40px;}
  .d.up,.d.down{left:40px;}
  .d.right{left:80px;}
  .d.left,.d.right{top:40px;}
  .d.down{top:80px;}
  .face-btn{width:52px;height:52px;font-size:22px;}
}
</parameter>