@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: #0a0a12;
  overflow-x: hidden;
  font-family: 'Press Start 2P', monospace;
}

/* Background noise texture */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Console shell */
.gba-console {
  position: relative;
  width: 640px;
  max-width: 95vw;
  aspect-ratio: 640 / 420;
  background: linear-gradient(165deg, #5b52a0 0%, #463f8a 25%, #3a3478 50%, #2e2966 100%);
  border-radius: 20px 20px 45px 45px;
  box-shadow:
    0 2px 0 #6b62b0 inset,
    0 -2px 0 #1e1a40 inset,
    2px 0 0 #524a96 inset,
    -2px 0 0 #524a96 inset,
    0 8px 32px rgba(0,0,0,0.7),
    0 2px 8px rgba(0,0,0,0.5);
  padding: 12px;
}

/* Screen bezel */
.screen-bezel {
  position: relative;
  width: 62%;
  margin: 0 auto;
  background: #111118;
  border-radius: 8px;
  padding: 10px 10px 18px 10px;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.8) inset,
    0 0 0 2px #1a1a2e;
}

/* LCD screen container */
.lcd-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 240 / 160;
  background: #0d1b0d;
  border: 2px solid #0a0a0a;
  overflow: hidden;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Pixel grid overlay */
.lcd-screen::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(transparent 50%, rgba(0,0,0,0.04) 50%),
    linear-gradient(90deg, transparent 50%, rgba(0,0,0,0.04) 50%);
  background-size: 2px 2px;
  pointer-events: none;
  z-index: 5;
}

/* Screen glow when powered */
.lcd-screen.powered {
  background: #1a2a1a;
  box-shadow:
    0 0 20px rgba(100, 255, 100, 0.08),
    0 0 60px rgba(100, 255, 100, 0.04);
}

.lcd-screen canvas {
  width: 100% !important;
  height: 100% !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Embossed text */
.embossed-text {
  text-shadow: 0 1px 0 rgba(255,255,255,0.1), 0 -1px 0 rgba(0,0,0,0.5);
  color: #7a72c0;
  letter-spacing: 2px;
}

/* Power LED */
.power-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a0a0a;
  box-shadow: 0 0 2px rgba(0,0,0,0.5) inset;
  transition: all 0.5s ease;
}
.power-led.on {
  background: #ff2020;
  box-shadow:
    0 0 4px #ff2020,
    0 0 12px rgba(255, 32, 32, 0.6),
    0 0 2px #ff6060 inset;
}

/* Speaker grille */
.speaker-grille {
  display: grid;
  grid-template-columns: repeat(5, 3px);
  gap: 3px;
}
.speaker-hole {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #2a2660;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}

/* D-Pad */
.dpad {
  position: relative;
  width: 72px;
  height: 72px;
}
.dpad-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  background: #2a2a3a;
  border-radius: 50%;
  z-index: 3;
}
.dpad-arm {
  position: absolute;
  background: linear-gradient(145deg, #3a3a4e, #2a2a3a);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.05s ease;
  z-index: 2;
}
.dpad-arm:active, .dpad-arm.pressed {
  filter: brightness(0.7);
  transform-origin: center;
}
.dpad-arm.up    { top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 36px; border-radius: 4px 4px 0 0; }
.dpad-arm.down  { bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 36px; border-radius: 0 0 4px 4px; }
.dpad-arm.left  { left: 0; top: 50%; transform: translateY(-50%); width: 36px; height: 24px; border-radius: 4px 0 0 4px; }
.dpad-arm.right { right: 0; top: 50%; transform: translateY(-50%); width: 36px; height: 24px; border-radius: 0 4px 4px 0; }
.dpad-arm.up:active    { transform: translateX(-50%) scale(0.95); }
.dpad-arm.down:active  { transform: translateX(-50%) scale(0.95); }
.dpad-arm.left:active  { transform: translateY(-50%) scale(0.95); }
.dpad-arm.right:active { transform: translateY(-50%) scale(0.95); }

/* AB buttons */
.btn-ab {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(145deg, #8a2060, #6a1848);
  box-shadow:
    0 3px 0 #4a1030,
    0 4px 6px rgba(0,0,0,0.4),
    0 1px 0 rgba(255,255,255,0.1) inset;
  cursor: pointer;
  transition: all 0.05s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
  font-size: 9px;
  font-family: 'Press Start 2P', monospace;
  user-select: none;
}
.btn-ab:active, .btn-ab.pressed {
  box-shadow:
    0 1px 0 #4a1030,
    0 1px 3px rgba(0,0,0,0.4),
    0 1px 0 rgba(255,255,255,0.1) inset;
  transform: translateY(2px);
}

/* Start/Select buttons */
.btn-ss {
  width: 40px;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(145deg, #4a4a5e, #3a3a4e);
  box-shadow: 0 1px 0 #2a2a3a, 0 -1px 0 rgba(255,255,255,0.05) inset;
  cursor: pointer;
  transition: all 0.05s ease;
}
.btn-ss:active, .btn-ss.pressed {
  transform: translateY(1px);
  box-shadow: none;
  filter: brightness(0.8);
}

/* Shoulder buttons */
.shoulder-btn {
  padding: 6px 28px;
  background: linear-gradient(180deg, #524a96, #3a3478);
  border-radius: 3px 3px 10px 10px;
  box-shadow:
    0 2px 0 #2a2660,
    0 -1px 0 rgba(255,255,255,0.1) inset;
  cursor: pointer;
  transition: all 0.05s ease;
  color: rgba(255,255,255,0.25);
  font-size: 8px;
  font-family: 'Press Start 2P', monospace;
  user-select: none;
}
.shoulder-btn:active, .shoulder-btn.pressed {
  transform: translateY(2px);
  box-shadow: 0 0 0 #2a2660;
}

/* Cartridge slot */
.cartridge-slot {
  position: relative;
  width: 55%;
  height: 14px;
  margin: 0 auto -4px auto;
  background: #1a1630;
  border-radius: 3px 3px 0 0;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.5) inset,
    0 -1px 0 rgba(255,255,255,0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: visible;
  z-index: 10;
}
.cartridge-slot.drag-over {
  background: #1a3020;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.5) inset,
    0 0 12px rgba(80, 255, 120, 0.3),
    0 0 24px rgba(80, 255, 120, 0.15);
}

/* Cartridge */
.cartridge {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  background: linear-gradient(165deg, #5a5a6a, #3a3a4a);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.3);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 11;
}
.cartridge.inserting {
  animation: cartridge-insert 0.6s cubic-bezier(0.34, 1.1, 0.64, 1) forwards;
}
.cartridge.ejecting {
  animation: cartridge-eject 0.4s ease-out forwards;
}

@keyframes cartridge-insert {
  0%   { transform: translateX(-50%) translateY(-30px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(-50%) translateY(0); }
}
@keyframes cartridge-eject {
  0%   { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(-40px); opacity: 0; }
}

.cartridge-label {
  background: linear-gradient(180deg, #f0e8d0, #d8d0b8);
  margin: 4px;
  padding: 4px 6px;
  border-radius: 2px;
  text-align: center;
  overflow: hidden;
}

/* Eject button */
.eject-btn {
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: #3a3478;
  border: 1px solid #524a96;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
  z-index: 12;
}
.eject-btn:hover {
  background: #524a96;
}
.eject-btn:active {
  transform: translateY(-50%) scale(0.9);
}

/* Toolbar */
.toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.tool-btn {
  padding: 6px 10px;
  background: linear-gradient(180deg, #2a2a3e, #1e1e2e);
  border: 1px solid #3a3a52;
  border-radius: 4px;
  color: #8888aa;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.tool-btn:hover {
  background: linear-gradient(180deg, #3a3a52, #2a2a3e);
  color: #aaaacc;
  border-color: #5a5a72;
}
.tool-btn:active {
  transform: translateY(1px);
}
.tool-btn.active {
  background: #463f8a;
  border-color: #6b62b0;
  color: #ccccff;
}

/* Library drawer */
.library-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 280px;
  max-width: 80vw;
  height: 100vh;
  background: linear-gradient(180deg, #14141e, #0e0e16);
  border-left: 2px solid #2a2a3e;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  overflow-y: auto;
  padding: 16px;
}
.library-drawer.open {
  transform: translateX(0);
}

/* Library item */
.lib-item {
  padding: 10px;
  background: #1a1a28;
  border: 1px solid #2a2a3e;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 8px;
}
.lib-item:hover {
  background: #222238;
  border-color: #463f8a;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0e0e16; }
::-webkit-scrollbar-thumb { background: #2a2a3e; border-radius: 3px; }

/* Insert cartridge animation */
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.bob-anim {
  animation: bob 1.5s ease-in-out infinite;
}

/* Volume slider */
input[type="range"] {
  -webkit-appearance: none;
  height: 4px;
  background: #2a2a3e;
  border-radius: 2px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #6b62b0;
  border-radius: 50%;
  cursor: pointer;
}

/* Key hint overlay */
.key-hint {
  position: absolute;
  background: rgba(0,0,0,0.85);
  border: 1px solid #3a3a52;
  border-radius: 4px;
  padding: 12px;
  font-size: 7px;
  color: #8888aa;
  line-height: 2;
  z-index: 50;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 700px) {
  .gba-console {
    border-radius: 14px 14px 30px 30px;
  }
  .screen-bezel {
    width: 75%;
  }
  .shoulder-btn {
    padding: 4px 16px;
    font-size: 6px;
  }
}

/* Footer */
.footer-link {
  color: #4a4a6e;
  text-decoration: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  transition: color 0.2s;
}
.footer-link:hover {
  color: #6b62b0;
}