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

body {
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
  font-family: 'Press Start 2P', monospace;
  position: fixed;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

canvas {
  display: block;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Mobile Controls - Overlay style (controls float over game) */
.mobile-controls {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  display: none;
  z-index: 100;
  box-sizing: border-box;
  overflow: visible;
  pointer-events: none;
}

.gamepad {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  pointer-events: none;
}

/* Left side container (D-pad + Menu/Pause) */
.left-controls {
  position: absolute;
  left: 10px;
  left: calc(10px + env(safe-area-inset-left, 0px));
  bottom: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 5px;
  pointer-events: auto;
}

/* Center buttons container (Menu/Pause) - stacked vertically with more gap from D-pad */
.center-buttons {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  margin-bottom: 15px;
}

/* Right side container (Action buttons) */
.action-buttons {
  position: absolute;
  right: 10px;
  right: calc(10px + env(safe-area-inset-right, 0px));
  bottom: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 5px;
  pointer-events: auto;
}

/* Container for X and B buttons side by side */
.secondary-buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  pointer-events: auto;
}

/* Y button row - centered above X and B */
.y-button-row {
  display: flex;
  justify-content: center;
  width: 80px; /* Same width as X + B + gap (36 + 8 + 36) */
  pointer-events: auto;
}

/* NES D-Pad */
.dpad {
  position: relative;
  width: 90px;
  height: 90px;
}

.dpad .dpad-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(145deg, #8B8B8B, #5A5A5A);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.35);
  z-index: 0;
}

.dpad::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 28px;
  background: linear-gradient(145deg, #8B8B8B, #5A5A5A);
  border-radius: 4px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.dpad::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 90px;
  background: linear-gradient(145deg, #8B8B8B, #5A5A5A);
  border-radius: 4px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Joystick styles */
.joystick {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  z-index: 20;
  touch-action: none;
}

.joystick-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(58, 58, 58, 0.8);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}

.joystick-stick {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(145deg, #9E9E9E, #6A6A6A);
  border: 2px solid #3A3A3A;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.2);
  touch-action: none;
}

/* Small Menu/Pause buttons */
.small-btn {
  width: 45px;
  height: 22px;
  border-radius: 10px;
  background: linear-gradient(145deg, #4A4A4A, #2A2A2A);
  border: 2px solid #1A1A1A;
  color: #FFF;
  font-family: 'Press Start 2P', monospace;
  font-weight: 400;
  font-size: 5px;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.small-btn:active {
  background: linear-gradient(145deg, #2A2A2A, #1A1A1A);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
}

/* Small Action Buttons (X and B) */
.small-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, #4A4A4A, #2A2A2A);
  border: 2px solid #1A1A1A;
  color: #FFF;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  pointer-events: auto;
}

.small-action-btn:active {
  background: linear-gradient(145deg, #2A2A2A, #1A1A1A);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
}

/* Main A Button */
.action-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(145deg, #228B22, #006400);
  border: 3px solid #004000;
  color: #FFF;
  font-family: 'Press Start 2P', monospace;
  font-weight: 400;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.2), inset 0 -3px 6px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.action-btn:active {
  background: linear-gradient(145deg, #006400, #004000);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: translateY(2px);
}

/* Button Colors */
#backBtn {
  background: linear-gradient(145deg, #DC143C, #8B0000) !important;
  border: 2px solid #5A0000 !important;
}

#backBtn:active {
  background: linear-gradient(145deg, #8B0000, #5A0000) !important;
}

#closeBtn {
  background: linear-gradient(145deg, #4169E1, #0000CD) !important;
  border: 2px solid #000080 !important;
}

#closeBtn:active {
  background: linear-gradient(145deg, #0000CD, #000080) !important;
}

/* Y Button (Yellow - Cheat codes) */
#cheatBtn {
  background: linear-gradient(145deg, #FFD700, #B8860B) !important;
  border: 2px solid #8B6914 !important;
  color: #000 !important;
}

#cheatBtn:active {
  background: linear-gradient(145deg, #B8860B, #8B6914) !important;
}

/* Show controls on mobile/touch devices */
@media (max-width: 768px), (pointer: coarse) {
  .mobile-controls { display: block; }
}