body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Trebuchet MS', 'Helvetica', 'Arial', 'Verdana', 'sans-serif';
  font-size: 80%;
  background: linear-gradient(135deg, #d4d4d8 0%, #a1a1aa 100%);
  color: #1f2937;
}

#content {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.infoPanel {
  flex: 0 0 20%; /* Don't grow/shrink, fixed at 20% */
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1; /* Take up remaining space */
  height: 100vh;
}

.wrapper canvas {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

#hamburgerDropdown {
  overflow-y: auto;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  #content {
    display: block !important; /* Override grid layout on mobile */
    height: 100vh;
    width: 100vw;
  }

  .wrapper {
    width: 100% !important;
    height: calc(100vh - 200px) !important; /* Account for title and mobile controller */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important; /* Center vertically */
    padding: 20px 10px 120px 10px;
    margin: 0 !important;
    overflow: hidden;
  }

  .wrapper canvas {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 200px) !important; /* Account for title and controller */
    height: auto !important;
    width: auto !important;
    display: block;
    margin: 0 auto;
    object-fit: contain; /* Ensure canvas fits within bounds */
  }

  body {
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  html,
  body {
    height: 100%;
    overflow-x: hidden;
  }

  #content {
    overflow: hidden !important;
    max-height: 100vh !important;
  }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
  html,
  body {
    overflow: hidden !important; /* Prevent all scrolling in landscape */
    height: 100vh !important;
    max-height: 100vh !important;
  }

  .wrapper {
    height: calc(100vh - 120px) !important; /* Account for mobile controller */
    padding: 0 10px !important; /* Remove top/bottom padding */
    align-items: center !important; /* Ensure vertical centering */
    overflow: hidden !important;
  }

  .wrapper canvas {
    max-height: calc(100vh - 140px); /* Leave room for controller + margin */
    max-width: calc(100vw - 20px);
    transform: scale(2); /* Make canvas 2x bigger in landscape */
    transform-origin: center;
  }

  /* Hide mobile title in landscape for more space */
  .md\:hidden h1,
  .md\:hidden p {
    display: none;
  }
}

/* Mobile controller styling */
#mobileController {
  z-index: 1000;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Prevent mobile controller from causing overflow in landscape */
@media (orientation: landscape) {
  #mobileController {
    padding: 2rem;
  }
}

@media (orientation: portrait) {
  #mobileController .relative {
    width: 200px;
    height: 200px;
  }
}

#mobileController button {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  outline: none;
  border: none;
}

#mobileController button:active,
#mobileController button.active {
  transform: scale(0.95);
  filter: brightness(0.8);
}

/* NES Controller Button Hover Effects */
#mobileController button:hover {
  filter: brightness(1.1);
}

/* D-Pad button specific styling */
#dpad-up:active,
#dpad-down:active,
#dpad-left:active,
#dpad-right:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Action button specific styling */
#a-btn:active,
#b-btn:active {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* SELECT/START button specific styling */
#select-btn:active,
#start-btn:active {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* NES-themed menu buttons */
#hamburgerDropdown .controlBarButton {
  color: #000000;
  transition: all 0.2s ease;
}

#hamburgerDropdown .controlBarButton:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#hamburgerDropdown .border-gray-200 {
  border-color: #000000 !important;
}

#hamburgerDropdown kbd {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #000000 !important;
  border: 1px solid #000000;
}

/* D-Pad specific styling */
#mobileController .relative:first-child {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

/* Action buttons styling */
#a-btn,
#b-btn {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
  font-size: 14px;
  font-weight: bold;
}

/* Center control buttons */
#select-btn,
#start-btn {
  font-size: 10px;
  font-weight: bold;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.wrapper canvas {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  border: 4px solid #000000;
  border-radius: 8px;
}

.ui-menu {
  position: absolute;
  width: 150px;
}

.controlBarSlider .ui-dialog-titlebar {
  display: none;
}
.controlBarSliderContents {
  margin-top: 4px;
  margin-left: 4px;
}

.debugWindow {
  position: absolute;
  right: 2%;
}

#loadStateDialog {
  display: none;
}

.controlBar {
  display: none; /* Hide the old control bar completely */
}

.controlBarSeperator {
  width: 15px;
  display: inline-block;
}

.controlBarButton {
  cursor: pointer;
}

.controlBarMenuButton {
  text-decoration: none !important;
  font-weight: normal !important;
}

.infoPanel {
  position: absolute;
  right: auto;
  bottom: auto;
  display: block;
  width: 20%;
  height: 50%;
  padding: 1rem;
  background: rgba(212, 212, 216, 0.95);
  border: 3px solid #000000;
  border-radius: 0.5rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  color: #000000;
}

/* Hide info panel on mobile devices (including landscape) */
@media (max-width: 1024px) and (max-height: 768px) {
  #infoPanel {
    display: none !important;
  }
}

/* Also hide on portrait mobile */
@media (max-width: 767px) {
  #infoPanel {
    display: none !important;
  }
}

.socialMediaPanel {
  position: absolute;
  left: 10px;
  right: auto;
  top: auto;
  bottom: 10px;
  display: block;
  width: auto;
  height: auto;
}

.gameGenieDialog {
  display: none;
  position: absolute;
}

.loadSaveDiv {
  display: inline-block;
}

.hideJQueryTitleBar .ui-dialog-titlebar {
  display: none;
}

/* Control bar buttons - removed icon styles since we're using inline icons now */

/* Top controls positioning adjustment for mobile */
@media (max-width: 768px) {
  .fixed.top-5.right-5 {
    top: 1rem;
    right: 1rem;
    z-index: 1001; /* Above mobile controller */
  }

  /* Make hamburger dropdown scrollable on mobile */
  #hamburgerDropdown {
    max-height: calc(100vh - 120px); /* Leave space for mobile controller and top margin */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: thin; /* Firefox */
  }

  /* Custom scrollbar for webkit browsers */
  #hamburgerDropdown::-webkit-scrollbar {
    width: 4px;
  }

  #hamburgerDropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
  }

  #hamburgerDropdown::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
  }

  #hamburgerDropdown::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
  }

  /* Ensure dropdown content has proper padding for scrolling */
  #hamburgerDropdown .p-3 {
    padding-bottom: 1rem;
  }

  /* Make menu buttons more touch-friendly on mobile */
  #hamburgerDropdown .controlBarButton {
    min-height: 44px; /* iOS recommended touch target size */
    padding: 12px 16px;
  }

  /* Increase tap target for kbd elements */
  #hamburgerDropdown kbd {
    padding: 4px 8px;
    min-width: 32px;
    text-align: center;
  }
}

/* Hamburger Menu Animation - Custom CSS for the hamburger lines */
.hamburger-button.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-button.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-button.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}