:root{
  --bg:#0a0a10; --neon:#33c842; --cyan:#5ddcf5; --plastic:#4a4a52;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(51,200,66,0.06), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(93,220,245,0.06), transparent 45%),
    #0a0a10;
  color:#ddd;
  font-family:'Bricolage Grotesque',sans-serif;
}
#root{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:16px 12px;
}
.title-font{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-1px;
  text-shadow:0 0 12px rgba(51,200,66,0.5);}
.crt-font{font-family:'VT323',monospace;letter-spacing:0.5px;}

.power-led{display:inline-block;width:12px;height:12px;border-radius:50%;margin-left:12px;
  vertical-align:middle;animation:blink 1.4s infinite;}
@keyframes blink{0%,60%{opacity:1;}80%{opacity:0.4;}100%{opacity:1;}}

/* console shell */
.console-shell{
  background:linear-gradient(160deg,#585860,#3a3a42);
  border-radius:18px;padding:22px;box-shadow:0 14px 40px rgba(0,0,0,0.7), inset 0 2px 4px rgba(255,255,255,0.15);
  max-width:100%;
}
.screen-bezel{
  position:relative;background:#141418;border-radius:8px;padding:10px;
  box-shadow:inset 0 0 18px rgba(0,0,0,0.9);
  border:3px solid #22222a;
}
.vdp-canvas{
  display:block;width:768px;height:576px;max-width:calc(100vw - 90px);height:auto;
  aspect-ratio:4/3;
  image-rendering:pixelated;image-rendering:crisp-edges;
  border-radius:4px;background:#000;
}
.scanlines{
  position:absolute;inset:10px;border-radius:4px;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,0.18) 3px,rgba(0,0,0,0.18) 4px);
  mix-blend-mode:multiply;
}
.mode-indicator{
  position:absolute;top:16px;right:16px;background:rgba(0,0,0,0.6);
  color:#33c842;font-size:14px;padding:2px 8px;border-radius:4px;border:1px solid #33c842;
}

/* cart slot */
.cart-slot{
  margin-top:18px;display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:520px;padding:20px;cursor:pointer;
  border:2px dashed #4a5a6a;border-radius:12px;background:rgba(30,40,50,0.4);
  color:#7fd0e5;transition:all 0.15s;text-align:center;
}
.cart-slot:hover{border-color:#5ddcf5;background:rgba(40,55,70,0.5);}
.cart-slot.drag-over{border-color:#33c842;background:rgba(30,60,30,0.5);transform:scale(1.02);color:#8ff5a0;}

/* dpad */
.dpad{position:relative;width:120px;height:120px;}
.dbtn{position:absolute;width:38px;height:38px;background:#2a2a34;color:#ccc;border:none;
  border-radius:6px;font-size:14px;cursor:pointer;box-shadow:0 3px 0 #16161c;user-select:none;}
.dbtn:active,.dbtn.pon{background:#33c842;color:#000;box-shadow:0 0 8px #33c842;transform:translateY(2px);}
.dup{top:0;left:41px;} .ddown{bottom:0;left:41px;} .dleft{left:0;top:41px;} .dright{right:0;top:41px;}
.fire-btn{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c83838,#7a1010);
  color:#fff;font-family:'VT323',monospace;font-size:24px;border:none;cursor:pointer;
  box-shadow:0 4px 0 #4a0808;user-select:none;}
.fire-btn:active,.fire-btn.pon{transform:translateY(3px);box-shadow:0 1px 0 #4a0808,0 0 12px #ff6060;}

/* debug */
.debug-panel{background:#12121a;border:1px solid #2a2a3a;border-radius:0 0 6px 6px;
  padding:12px;color:#9fe0a0;font-size:16px;line-height:1.4;}
.debug-panel b{color:#5ddcf5;}
.flag-dot{font-weight:bold;padding:0 3px;}

/* control buttons (replaces old React btnCls) */
.ctrl-btn{
  padding:8px 16px;border-radius:6px;font-weight:bold;font-size:0.875rem;
  border:none;border-bottom:4px solid;cursor:pointer;user-select:none;
  transition:all 0.1s;
}
.ctrl-btn:active{border-bottom-width:0;transform:translateY(4px);}

.hidden{display:none;}

input[type=range]{accent-color:#33c842;}

@media(max-width:640px){
  .console-shell{padding:12px;border-radius:12px;}
  .screen-bezel{padding:6px;}
  .vdp-canvas{max-width:calc(100vw - 44px);}
  .title-font{font-size:1.6rem;}
}