:root{
  --gb-shell:#c9c3bf;
  --gb-shell-dark:#b0a9a4;
  --gb-bezel:#5a5350;
  --gb-screen:#8faa2a;
  --ink:#2a2622;
  --panel:#1a1c22;
  --panel-2:#22252d;
  --accent:#9bbc0f;
  --amber:#e0a83a;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'JetBrains Mono',monospace;
  background:radial-gradient(circle at 50% 0%, #2a2d38 0%, #14151b 60%, #0b0c10 100%);
  color:#d8d8d8;
  min-height:100vh;
  padding:16px;
  -webkit-user-select:none;user-select:none;
}
#app{max-width:640px;margin:0 auto;}

header{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px;}
header h1{
  font-family:'VT323',monospace;
  font-size:clamp(28px,7vw,52px);
  letter-spacing:3px;
  margin:0;
  color:var(--accent);
  text-shadow:0 0 12px rgba(155,188,15,.4);
}
.berry{font-size:32px;}
.led{width:12px;height:12px;border-radius:50%;background:#3a3a3a;box-shadow:inset 0 0 3px #000;}
.led.on{background:#e33;box-shadow:0 0 10px #e33;animation:blink 1.2s infinite;}
@keyframes blink{50%{opacity:.4;}}
.subtitle{text-align:center;color:#8a8f9a;font-size:13px;margin:2px 0 20px;}
.subtitle em{color:var(--amber);}

/* Console shell */
.console{
  background:linear-gradient(145deg,var(--gb-shell),var(--gb-shell-dark));
  border-radius:14px 14px 60px 14px;
  padding:22px 22px 30px;
  box-shadow:0 20px 40px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.4), inset 0 -4px 8px rgba(0,0,0,.2);
  position:relative;
}
.brand{
  text-align:center;color:#3a3a5a;font-family:'VT323',monospace;
  font-size:18px;letter-spacing:1px;margin-bottom:10px;font-style:italic;
}
.brand .tm{font-size:9px;vertical-align:top;}
.bezel{
  background:var(--gb-bezel);
  border-radius:10px 10px 34px 10px;
  padding:16px 34px;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.6);
}
.power-line{
  color:#c0203a;font-size:9px;letter-spacing:2px;display:flex;align-items:center;gap:6px;margin-bottom:8px;
}
.pw-dot{width:7px;height:7px;border-radius:50%;background:#5a1520;}
.pw-dot.on{background:#e33;box-shadow:0 0 8px #e33;}
#canvas{
  width:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;
  display:block;background:#8faa2a;border:2px solid #2a2622;
  aspect-ratio:160/144;
}
.lcd-label{text-align:center;color:#cfc9c4;font-size:8px;letter-spacing:1px;margin-top:8px;font-style:italic;}
.tm2{font-size:6px;vertical-align:top;}

/* Controls */
.controls{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding:0 6px;}
.dpad{position:relative;width:96px;height:96px;}
.dbtn{
  position:absolute;background:#2a2622;border:none;color:#555;
  width:32px;height:32px;font-size:12px;cursor:pointer;
  box-shadow:0 3px 0 #14110e;
}
.dbtn.up{top:0;left:32px;border-radius:4px 4px 0 0;}
.dbtn.down{top:64px;left:32px;border-radius:0 0 4px 4px;}
.dbtn.left{top:32px;left:0;border-radius:4px 0 0 4px;}
.dbtn.right{top:32px;left:64px;border-radius:0 4px 4px 0;}
.dbtn.center{top:32px;left:32px;background:#2a2622;box-shadow:none;pointer-events:none;}
.dbtn.pressed{transform:translateY(2px);box-shadow:0 1px 0 #14110e;background:#3a352f;}
.ab{display:flex;gap:16px;transform:rotate(-25deg);}
.rbtn{
  width:44px;height:44px;border-radius:50%;background:#8a1a44;border:none;
  color:#fff;font-family:'VT323',monospace;font-size:22px;cursor:pointer;
  box-shadow:0 4px 0 #4a0d24;
}
.rbtn.pressed{transform:translateY(3px);box-shadow:0 1px 0 #4a0d24;}
.startsel{display:flex;justify-content:center;gap:26px;margin-top:22px;transform:rotate(-25deg);}
.pill{
  width:52px;height:14px;border-radius:8px;background:#6a655f;border:none;
  color:#c9c3bf;font-size:7px;letter-spacing:1px;cursor:pointer;
  box-shadow:0 3px 0 #3a352f;
}
.pill.pressed{transform:translateY(2px);box-shadow:0 1px 0 #3a352f;}
.grille{display:flex;gap:5px;justify-content:flex-end;margin-top:22px;transform:rotate(-25deg);opacity:.4;}
.grille span{width:4px;height:34px;background:#7a746e;border-radius:2px;box-shadow:inset 0 0 2px #000;}

/* Panel */
.panel{
  background:var(--panel);border:1px solid #333842;border-radius:12px;
  margin-top:22px;padding:16px;
}
.loader{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  border:2px dashed #3a4150;border-radius:8px;padding:12px;transition:.2s;}
.loader.drag{border-color:var(--accent);background:rgba(155,188,15,.08);}
.cartinfo{font-size:12px;color:#9aa0ac;margin:12px 0;padding:8px 10px;background:var(--panel-2);border-radius:6px;line-height:1.6;}
.cartinfo b{color:var(--accent);}

button,select{
  font-family:'JetBrains Mono',monospace;font-size:12px;
  background:var(--panel-2);color:#d8d8d8;border:1px solid #3a4150;
  border-radius:6px;padding:8px 12px;cursor:pointer;transition:.15s;
}
button:hover,select:hover{border-color:var(--accent);color:#fff;}
#audioBtn.audio-on{background:var(--accent);color:#14151b;border-color:var(--accent);}
.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px;}
.spd{display:flex;align-items:center;gap:6px;font-size:11px;color:#8a8f9a;}

/* Debug */
.debug{margin-top:16px;border-top:1px solid #333842;padding-top:12px;}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.tab{font-size:11px;padding:6px 10px;}
.tab.active{background:var(--accent);color:#14151b;border-color:var(--accent);}
.dbgpane{
  background:#0d0f14;border:1px solid #2a303a;border-radius:6px;
  padding:12px;font-size:12px;line-height:1.6;color:var(--amber);
  white-space:pre;overflow:auto;margin:0;max-height:280px;
}
.tilesc{width:256px;max-width:100%;image-rendering:pixelated;background:#0d0f14;}

.hidden{display:none !important;}

footer{text-align:center;color:#5a5f6a;font-size:11px;margin-top:24px;line-height:1.8;}
footer a{color:var(--accent);text-decoration:none;}
footer a:hover{text-decoration:underline;}

@media(max-width:480px){
  .dpad{width:84px;height:84px;}
  .dbtn{width:28px;height:28px;}
  .dbtn.up,.dbtn.down{left:28px;}
  .dbtn.left,.dbtn.right{top:28px;}
  .dbtn.up{top:0;} .dbtn.down{top:56px;} .dbtn.left{left:0;} .dbtn.right{left:56px;}
  .dbtn.center{top:28px;left:28px;}
  .bezel{padding:14px 18px;}
}