/* ===================================
   CSS Variables - Monochrome Theme (Default)
   =================================== */
:root {
  /* Monochrome Palette (Default) */
  --bg-primary: #000000;      /* Pure black */
  --bg-secondary: #1a1a1a;    /* Dark gray */
  --bg-tertiary: #2a2a2a;     /* Medium dark gray */
  --text-primary: #ffffff;    /* White */
  --text-secondary: #cccccc;  /* Light gray */
  --accent: #666666;          /* Mid gray */
  --highlight: #333333;       /* Dark highlight */
  --border: #444444;          /* Border gray */
  
  /* Typography - MOBILE: viewport relative */
  --font-primary: 'Press Start 2P', monospace;
  --font-size-xs: clamp(6px, 2vw, 10px);
  --font-size-sm: clamp(7px, 2.5vw, 12px);
  --font-size-base: clamp(8px, 3vw, 14px);
  --font-size-lg: clamp(9px, 3.5vw, 16px);
  --font-size-xl: clamp(10px, 4vw, 20px);
  
  /* Spacing - MOBILE: viewport relative */
  --spacing-xs: 1vmin;
  --spacing-sm: 2vmin;
  --spacing-md: 3vmin;
  --spacing-lg: 4vmin;
  --spacing-xl: 5vmin;
  
  /* Layout - MOBILE: viewport constrained (fills screen) - uses dynamic vh */
  --status-bar-height: 6vh;
  --status-bar-height: calc(var(--vh, 1vh) * 6);
  --status-bar-height: 6dvh; /* Modern browsers: dynamic viewport height */
  --screen-height: 54vh;
  --screen-height: calc(var(--vh, 1vh) * 54);
  --screen-height: 54dvh;
  --controller-height: 40vh;
  --controller-height: calc(var(--vh, 1vh) * 40);
  --controller-height: 40dvh;
  
  /* Content constraints */
  --content-width: 80%;
  
  /* Box art - MOBILE: viewport relative */
  --box-art-width: 30vw;
  --box-art-height: 40vw;
  
  /* D-pad and buttons - MOBILE: viewport relative */
  --dpad-size: 30vw;
  --dpad-btn-size: 9vw;
  --dpad-platform-size: 32vw;
  --dpad-center-size: 7vw;
  --action-btn-container-w: 42vw;
  --action-btn-container-h: 36vw;
  --action-btn-divot-w: 43vw;
  --action-btn-divot-h: 37vw;
  --action-btn-size: 22vw; /* Increased from 20vw for better mobile tap targets */
  --select-btn-w: 10vw;
  --select-btn-h: 2.5vw;
  --theme-toggle-size: 7vw;
  --vent-line-width: 10vw;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
}

/* ===================================
   Color Scheme Themes
   =================================== */

/* Game Boy Green Theme */
body.theme-gameboy {
  --bg-primary: #0f380f;
  --bg-secondary: #306230;
  --bg-tertiary: #1a4a1a;
  --text-primary: #9bbc0f;
  --text-secondary: #8bac0f;
  --accent: #8bac0f;
  --highlight: #306230;
  --border: #8bac0f;
}

/* Crimson Red Theme */
body.theme-red {
  --bg-primary: #1a0a0a;
  --bg-secondary: #2a1515;
  --bg-tertiary: #3a2020;
  --text-primary: #ff6b6b;
  --text-secondary: #cc5555;
  --accent: #cc5555;
  --highlight: #3a2020;
  --border: #ff6b6b;
}

/* Ocean Blue Theme */
body.theme-blue {
  --bg-primary: #0a0a1a;
  --bg-secondary: #151525;
  --bg-tertiary: #20203a;
  --text-primary: #6b9fff;
  --text-secondary: #5580cc;
  --accent: #5580cc;
  --highlight: #20203a;
  --border: #6b9fff;
}

/* Matrix Green Theme */
body.theme-green {
  --bg-primary: #0a1a0a;
  --bg-secondary: #152515;
  --bg-tertiary: #203a20;
  --text-primary: #6bff6b;
  --text-secondary: #55cc55;
  --accent: #55cc55;
  --highlight: #203a20;
  --border: #6bff6b;
}

/* Amber Theme */
body.theme-amber {
  --bg-primary: #1a1400;
  --bg-secondary: #2a2200;
  --bg-tertiary: #3a3000;
  --text-primary: #ffbf00;
  --text-secondary: #cc9900;
  --accent: #cc9900;
  --highlight: #3a3000;
  --border: #ffbf00;
}

/* Vapor Purple Theme */
body.theme-purple {
  --bg-primary: #1a0a1a;
  --bg-secondary: #251525;
  --bg-tertiary: #3a203a;
  --text-primary: #bf6bff;
  --text-secondary: #9955cc;
  --accent: #9955cc;
  --highlight: #3a203a;
  --border: #bf6bff;
}

/* Cyber Cyan Theme */
body.theme-cyan {
  --bg-primary: #0a1a1a;
  --bg-secondary: #152525;
  --bg-tertiary: #203a3a;
  --text-primary: #6bffff;
  --text-secondary: #55cccc;
  --accent: #55cccc;
  --highlight: #203a3a;
  --border: #6bffff;
}

/* ===================================
   Reset & Base Styles
   =================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* MOBILE: Fill entire viewport - use dynamic vh for mobile browser UI */
  width: 100vw;
  height: 100vh; /* Fallback for older browsers */
  height: calc(var(--vh, 1vh) * 100); /* JS-calculated dynamic height */
  height: 100dvh; /* Modern browsers: dynamic viewport height */
  max-width: 100vw;
  max-height: 100vh;
  max-height: calc(var(--vh, 1vh) * 100);
  max-height: 100dvh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  /* Match viewport exactly */
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
  max-width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
  /* Enable pull-to-refresh on supported browsers */
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* ===================================
   DEVICE WRAPPER
   Mobile: invisible (display: contents makes it act like it's not there)
   Desktop: visible container for the "Game Boy" device
   =================================== */
.device-wrapper {
  /* Mobile default: wrapper is invisible, children flow normally */
  display: contents;
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  image-rendering: pixelated;
}

button {
  font-family: var(--font-primary);
  border: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

/* ===================================
   Status Bar (Top) - Fixed 5vh
   =================================== */
.status-bar {
  height: var(--status-bar-height);
  min-height: var(--status-bar-height);
  max-height: var(--status-bar-height);
  background-color: var(--bg-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--spacing-md);
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
  flex-grow: 0;
}

.status-bar__branding {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.status-bar__time {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* Theme Toggle Button (Bottom Right Corner) - Viewport Relative */
.theme-toggle {
  width: 7vw;
  height: 7vw;
  max-width: 32px;
  max-height: 32px;
  border-radius: 50%;
  /* Monochrome gradient by default (white to black shades) */
  background: conic-gradient(
    from 0deg,
    #ffffff 0deg 45deg,
    #cccccc 45deg 90deg,
    #999999 90deg 135deg,
    #666666 135deg 180deg,
    #444444 180deg 225deg,
    #222222 225deg 270deg,
    #111111 270deg 315deg,
    #000000 315deg 360deg
  );
  border: 2px solid var(--text-primary);
  color: transparent;
  font-size: 0;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 3D effect */
  box-shadow: 
    0 3px 0 rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Game Boy Green Theme - shades of green */
body.theme-gameboy .theme-toggle {
  background: conic-gradient(
    from 0deg,
    #9bbc0f 0deg 45deg,
    #8bac0f 45deg 90deg,
    #7a9c0f 90deg 135deg,
    #6a8c0f 135deg 180deg,
    #5a7c0f 180deg 225deg,
    #4a6c0f 225deg 270deg,
    #3a5c0f 270deg 315deg,
    #306230 315deg 360deg
  );
}

/* Crimson Red Theme - shades of red */
body.theme-red .theme-toggle {
  background: conic-gradient(
    from 0deg,
    #ff9999 0deg 45deg,
    #ff7777 45deg 90deg,
    #ff6b6b 90deg 135deg,
    #ee5555 135deg 180deg,
    #dd4444 180deg 225deg,
    #cc3333 225deg 270deg,
    #bb2222 270deg 315deg,
    #aa1111 315deg 360deg
  );
}

/* Ocean Blue Theme - shades of blue */
body.theme-blue .theme-toggle {
  background: conic-gradient(
    from 0deg,
    #99bbff 0deg 45deg,
    #88aaff 45deg 90deg,
    #7799ff 90deg 135deg,
    #6b9fff 135deg 180deg,
    #5588ee 180deg 225deg,
    #4477dd 225deg 270deg,
    #3366cc 270deg 315deg,
    #2255bb 315deg 360deg
  );
}

/* Matrix Green Theme - shades of green */
body.theme-green .theme-toggle {
  background: conic-gradient(
    from 0deg,
    #99ff99 0deg 45deg,
    #88ee88 45deg 90deg,
    #77dd77 90deg 135deg,
    #6bff6b 135deg 180deg,
    #55cc55 180deg 225deg,
    #44bb44 225deg 270deg,
    #33aa33 270deg 315deg,
    #229922 315deg 360deg
  );
}

/* Amber Theme - shades of amber/gold */
body.theme-amber .theme-toggle {
  background: conic-gradient(
    from 0deg,
    #ffdd99 0deg 45deg,
    #ffcc77 45deg 90deg,
    #ffbf00 90deg 135deg,
    #eeaa00 135deg 180deg,
    #dd9900 180deg 225deg,
    #cc8800 225deg 270deg,
    #bb7700 270deg 315deg,
    #aa6600 315deg 360deg
  );
}

/* Vapor Purple Theme - shades of purple */
body.theme-purple .theme-toggle {
  background: conic-gradient(
    from 0deg,
    #dd99ff 0deg 45deg,
    #cc88ee 45deg 90deg,
    #bf6bff 90deg 135deg,
    #aa55dd 135deg 180deg,
    #9944cc 180deg 225deg,
    #8833bb 225deg 270deg,
    #7722aa 270deg 315deg,
    #661199 315deg 360deg
  );
}

/* Cyber Cyan Theme - shades of cyan */
body.theme-cyan .theme-toggle {
  background: conic-gradient(
    from 0deg,
    #99ffff 0deg 45deg,
    #88eeee 45deg 90deg,
    #77dddd 90deg 135deg,
    #6bffff 135deg 180deg,
    #55cccc 180deg 225deg,
    #44bbbb 225deg 270deg,
    #33aaaa 270deg 315deg,
    #229999 315deg 360deg
  );
}

.theme-toggle:hover {
  transform: scale(1.1) rotate(45deg);
}

.theme-toggle:active {
  transform: translateY(2px) scale(1) rotate(45deg);
  box-shadow: 
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.theme-toggle__icon {
  display: block;
  line-height: 1;
}

/* ===================================
   Main Content Area (Screen) - Fixed 55vh
   =================================== */
.content-area {
  height: var(--screen-height);
  min-height: var(--screen-height);
  max-height: var(--screen-height);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-primary);
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
  flex-grow: 0;
  /* Disable touch scrolling on mobile - users should use D-pad buttons */
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}

/* Helper Text (Bottom of Screen Area) */
.helper-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: var(--font-size-xs);
  color: #ffffff;
  text-align: center;
  line-height: 1.6;
  padding: var(--spacing-md) var(--spacing-sm);
  background-color: rgba(0, 0, 0, 0.85);
  transition: opacity var(--transition-normal);
  pointer-events: none;
  z-index: 50;
}

.helper-text.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ===================================
   Scroll Indicator Bars (Fade gradient + arrow)
   =================================== */
.scroll-indicator-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 100;
}

.scroll-indicator-bar--up {
  top: 0;
  background: linear-gradient(to bottom, 
    var(--bg-primary) 0%, 
    var(--bg-primary) 40%,
    transparent 100%
  );
  padding-top: 8px;
  align-items: flex-start;
}

.scroll-indicator-bar--down {
  bottom: 0;
  background: linear-gradient(to top, 
    var(--bg-primary) 0%, 
    var(--bg-primary) 40%,
    transparent 100%
  );
  padding-bottom: 8px;
  align-items: flex-end;
}

/* The arrow triangle inside the bar */
.scroll-indicator-bar__arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.scroll-indicator-bar--up .scroll-indicator-bar__arrow {
  border-bottom: 12px solid var(--text-primary);
}

.scroll-indicator-bar--down .scroll-indicator-bar__arrow {
  border-top: 12px solid var(--text-primary);
}

/* Show indicators when content is scrollable */
.scroll-indicator-bar.visible {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

/* Pulse animation on the arrow only */
.scroll-indicator-bar.visible .scroll-indicator-bar__arrow {
  animation: arrowPulse 1.5s ease-in-out infinite;
}

@keyframes arrowPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Scrolling enabled but scrollbar hidden */
  overflow-y: auto;
  overflow-x: hidden;
  /* Hide scrollbar for all browsers */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  transition: opacity var(--transition-normal);
  /* Center content horizontally with padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm) 10%;  /* 10% padding on each side = 80% content width */
  box-sizing: border-box;
}

/* Hide scrollbar for Chrome/Safari/Opera */
.screen::-webkit-scrollbar {
  display: none;
}

/* Universal content constraint - all content stays within boundary */
.screen > * {
  width: 100%;
  max-width: 100%;
  padding: var(--spacing-xs) 0;
  box-sizing: border-box;
}

.screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.screen-title {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  text-align: center;
  letter-spacing: 1px;
}

/* More padding between main menu title and first menu item */
.screen--menu .screen-title {
  margin-bottom: var(--spacing-lg);
}

/* Menu screen layout - title fixed, list scrolls */
.screen--menu {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent the whole screen from scrolling */
}

.screen--menu .menu-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.screen--menu .menu-list::-webkit-scrollbar {
  display: none;
}

/* ===================================
   Loading Screen
   =================================== */
.screen--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.screen--loading > .loading-animation {
  width: 100%;
  max-width: none;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-logo {
  width: 60vw;
  max-width: 240px;
  height: auto;
  margin-bottom: var(--spacing-lg);
  image-rendering: pixelated;
  animation: pulse 2s ease-in-out 2; /* Only pulse twice, not infinite */
}


.loading-bar {
  width: 60vw;
  max-width: 240px;
  height: 3vh;
  max-height: 20px;
  background-color: var(--bg-secondary);
  border: 2px solid var(--text-primary);
  overflow: hidden;
  margin: 0 auto;
}

.loading-bar__fill {
  height: 100%;
  background-color: var(--text-primary);
  width: 0%;
  animation: loadingProgress 2.2s ease-out forwards;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes loadingProgress {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* ===================================
   Menu List
   =================================== */
.menu-list {
  width: 100%;
}

.menu-item {
  padding: var(--spacing-sm) var(--spacing-md);
  padding-left: calc(var(--spacing-md) + var(--spacing-lg)); /* Extra left padding for arrow */
  margin-bottom: var(--spacing-xs);
  background-color: var(--bg-tertiary);
  border: 2px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  /* Subtle 3D effect */
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  /* Disable pointer events on mobile - only buttons should be tappable */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Re-enable hover on desktop only (devices with fine pointer like mouse) */
@media (pointer: fine) {
  .menu-item {
    pointer-events: auto;
  }
  
  .menu-item:hover {
    border-color: var(--text-primary);
    background-color: var(--bg-secondary);
  }
}

.menu-item.selected {
  background-color: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}

.menu-item.selected::before {
  content: '▶';
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ===================================
   Category Screen
   =================================== */
.category-content {
  position: relative;
  width: 100%;
  min-height: 35vh;
  margin-top: var(--spacing-lg);
}

.category-menu {
  position: relative;
  z-index: 2;
  width: 50%;
  max-width: 50%;
}

/* Category menu items - smaller text, wrap to 2 lines */
.category-menu .menu-item {
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  padding-left: calc(var(--spacing-sm) + var(--spacing-lg)); /* Extra left padding for arrow */
  line-height: 1.3;
  text-align: left;
}

/* Settings menu - full width buttons, no box art */
.settings-full-width {
  width: 100% !important;
  max-width: 100% !important;
}

.settings-menu {
  width: 100% !important;
}

.settings-menu .menu-item {
  /* Override category menu styling to match main menu */
  font-size: var(--font-size-sm) !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  padding-left: calc(var(--spacing-md) + var(--spacing-lg)) !important;
  line-height: 1.6 !important;
}

.settings-item {
  width: 100% !important;
  max-width: none !important;
}

/* Colour scheme picker items */
.colour-scheme-list {
  width: 100%;
}

.colour-scheme-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  /* Match main menu styling */
  font-size: var(--font-size-sm) !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  padding-left: calc(var(--spacing-md) + var(--spacing-lg)) !important;
  line-height: 1.6 !important;
}

.colour-preview {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.category-preview {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.box-art-container {
  width: var(--box-art-width);
  height: var(--box-art-height);
  background-color: var(--bg-primary); /* Match main screen background for seamless game preview */
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Subtle inset effect */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.box-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transition-normal);
}

.box-art.live-preview {
  border: none;
  image-rendering: pixelated;
  /* Slight pixelation effect for retro look */
  filter: contrast(1.1);
}

.box-art.game-preview {
  border: none;
  image-rendering: pixelated;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.box-art.loading {
  opacity: 0;
}

/* ===================================
   Detail Screen
   =================================== */
.detail-content {
  width: 100%;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: 1.8;
  margin-top: var(--spacing-lg); /* Match spacing from other menus */
}

.detail-content h3 {
  font-size: var(--font-size-base);
  margin: var(--spacing-sm) 0 var(--spacing-xs);
  color: var(--text-primary);
}

.detail-content p {
  margin-bottom: var(--spacing-sm);
}

.detail-content a {
  color: var(--text-primary);
  text-decoration: underline;
}

/* ===================================
   Game Screen
   =================================== */
.screen--game {
  padding: var(--spacing-sm);
  background-color: var(--bg-primary);
}

.screen--game > * {
  width: 100%;
  height: 100%;
  padding: 0;
}

.game-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-canvas {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
  object-fit: contain;
}

/* ===================================
   Controller Area (Bottom 40vh - Trimui Brick Style)
   =================================== */
.controller-area {
  height: var(--controller-height);
  min-height: var(--controller-height);
  max-height: var(--controller-height);
  background-color: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 2vh 3vw;
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
  overflow: hidden;
}

/* Made in Cursor Label (Top Left Corner) */
.made-in-label {
  position: absolute;
  top: 1vh;
  left: 2vw;
  font-size: clamp(5px, 1.5vw, 8px);
  color: var(--text-secondary);
  opacity: 0.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font-primary);
  pointer-events: none;
}

.controller-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  padding: 0 3vw; /* Increased from 1vw to 3vw for more spacing from edges */
  margin-top: 3vh; /* Increased from 1.5vh to create more space below Made in Cursor label */
}

.controller-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4vw;
  margin-top: 5.5vh; /* Increased from 4vh to match the shift down (added 1.5vh) */
}

/* Vent Grille (Bottom Left Corner - 45 degree angle) */
.vent-grille {
  position: absolute;
  bottom: 2vh;
  left: 3vw;
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
  opacity: 0.3;
  transform: rotate(-45deg);
}

.vent-grille__line {
  width: 10vw;
  max-width: 45px;
  height: 2px;
  background-color: var(--text-secondary);
  border-radius: 1px;
}

/* Hide old speaker grilles */
.speaker-grille {
  display: none;
}

/* Theme Toggle (Bottom Right Corner) */
.theme-toggle-corner {
  position: absolute;
  bottom: 1.5vh;
  right: 2vw;
}

/* D-Pad (3D Style - Unified Cross - Viewport Relative) */
.dpad {
  position: relative;
  width: var(--dpad-size);
  height: var(--dpad-size);
  max-width: 135px;
  max-height: 135px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* D-Pad unified cross shape */
.dpad::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(to bottom, 
      transparent 0%, transparent 30%,
      var(--bg-tertiary) 30%, var(--bg-tertiary) 70%,
      transparent 70%, transparent 100%
    ),
    linear-gradient(to right,
      transparent 0%, transparent 30%,
      var(--bg-tertiary) 30%, var(--bg-tertiary) 70%,
      transparent 70%, transparent 100%
    );
  border-radius: 8px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* D-Pad base platform with divot */
.dpad::after {
  content: '';
  position: absolute;
  width: var(--dpad-platform-size);
  height: var(--dpad-platform-size);
  max-width: 150px;
  max-height: 150px;
  background: radial-gradient(circle at center, var(--bg-tertiary) 0%, var(--bg-secondary) 70%);
  border-radius: 50%;
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.6);
  z-index: -1;
}

.dpad__btn {
  position: absolute;
  width: var(--dpad-btn-size);
  height: var(--dpad-btn-size);
  max-width: 40px;
  max-height: 40px;
  background: linear-gradient(145deg, var(--text-secondary), var(--accent));
  color: var(--bg-primary);
  font-size: var(--font-size-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  border: none;
  border-radius: 4px;
  /* 3D raised effect */
  box-shadow: 
    0 3px 0 rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 1;
}

.dpad__btn:active {
  transform: translateY(2px);
  box-shadow: 
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dpad__btn--up {
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
}

.dpad__btn--up:active {
  top: 4px;
  transform: translateX(-50%);
}

.dpad__btn--right {
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.dpad__btn--right:active {
  right: 0px;
  transform: translateY(-50%);
}

.dpad__btn--down {
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
}

.dpad__btn--down:active {
  bottom: 0px;
  transform: translateX(-50%);
}

.dpad__btn--left {
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.dpad__btn--left:active {
  left: 0px;
  transform: translateY(-50%);
}

.dpad__center {
  position: absolute;
  width: var(--dpad-center-size);
  height: var(--dpad-center-size);
  max-width: 32px;
  max-height: 32px;
  background-color: var(--bg-secondary);
  border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  z-index: 0;
}

/* Action Buttons (3D Style - Game Boy Layout - Viewport Relative) */
.controller-right {
  position: relative;
  width: 24vw;  /* Increased from 20vw to accommodate larger buttons */
  height: 20vw; /* Increased from 16vw to accommodate larger buttons */
  max-width: 140px;  /* Increased from 120px */
  max-height: 120px; /* Increased from 100px */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Action buttons divot/well - more oval/elongated shape */
.controller-right::before {
  content: '';
  position: absolute;
  width: 25vw;  /* Increased from 21vw */
  height: 21vw; /* Increased from 17vw */
  max-width: 145px;  /* Increased from 125px */
  max-height: 125px; /* Increased from 105px */
  background: radial-gradient(ellipse 60% 50% at center, var(--bg-tertiary) 0%, var(--bg-secondary) 70%);
  border-radius: 45% / 50%;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.6);
  transform: rotate(-25deg);
  z-index: 0;
}

.action-btn {
  position: absolute;
  width: 10vw;  /* Increased from 8vw */
  height: 10vw; /* Increased from 8vw */
  max-width: 60px;  /* Increased from 48px */
  max-height: 60px; /* Increased from 48px */
  border-radius: 50%;
  font-size: var(--font-size-base); /* Increased from sm */
  font-weight: bold;
  transition: all var(--transition-fast);
  border: none;
  /* 3D raised effect */
  background: linear-gradient(145deg, var(--text-secondary), var(--accent));
  box-shadow: 
    0 4px 0 rgba(0, 0, 0, 0.3),
    0 6px 12px rgba(0, 0, 0, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.15);
  color: var(--bg-primary);
  letter-spacing: 1px;
  z-index: 1;
}

.action-btn:active {
  transform: translateY(3px);
  box-shadow: 
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.15);
}

/* Game Boy style offset positioning (diagonal) - more spacing */
.action-btn--b {
  bottom: 1vw;  /* Position B button at bottom-left */
  left: 1vw;
}

.action-btn--a {
  top: 1vw;     /* Position A button at top-right */
  right: 1vw;
}

/* Select/Start Buttons - Minimal style - Viewport Relative */
.select-start-btn {
  width: 8vw;
  height: 2vw;
  max-width: 40px;
  max-height: 10px;
  background: linear-gradient(145deg, var(--accent), var(--bg-tertiary));
  border: none;
  border-radius: 5px;
  font-size: 0;
  color: transparent;
  transition: all var(--transition-fast);
  /* Subtle 3D raised effect */
  box-shadow: 
    0 2px 0 rgba(0, 0, 0, 0.3),
    0 3px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  opacity: 0.7;
}

.select-start-btn:active {
  transform: translateY(1px);
  box-shadow: 
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ===================================
   DESKTOP MODE (screens wider than 480px)
   Fixed pixel dimensions - shows "Game Boy" device
   =================================== */
@media (min-width: 480px) {
  /* Override CSS variables with fixed pixel values */
  :root {
    /* Typography - fixed pixels */
    --font-size-xs: 8px;
    --font-size-sm: 10px;
    --font-size-base: 12px;
    --font-size-lg: 14px;
    --font-size-xl: 18px;
    
    /* Spacing - fixed pixels */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    
    /* Layout - fixed pixel heights for device */
    --status-bar-height: 32px;
    --screen-height: 360px;
    --controller-height: 280px;
    
    /* Box art - fixed pixels */
    --box-art-width: 120px;
    --box-art-height: 160px;
    
    /* D-pad and buttons - fixed pixels */
    --dpad-size: 100px;
    --dpad-btn-size: 28px;
    --dpad-platform-size: 110px;
    --dpad-center-size: 24px;
    --action-btn-container-w: 90px;
    --action-btn-container-h: 75px;
    --action-btn-divot-w: 95px;
    --action-btn-divot-h: 80px;
    --action-btn-size: 40px;
    --select-btn-w: 36px;
    --select-btn-h: 9px;
    --theme-toggle-size: 24px;
    --vent-line-width: 40px;
  }
  
  /* Body becomes a centering container */
  html, body {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #111111; /* Dark background behind device */
  }
  
  body {
    /* Body is now just a centering flex container */
    width: 100%;
    height: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  
  /* Device wrapper becomes visible and constrains the "Game Boy" */
  .device-wrapper {
    display: flex;
    flex-direction: column;
    width: 375px;  /* Fixed device width */
    height: 672px; /* Fixed device height (32 + 360 + 280) */
    max-height: 95vh; /* Don't exceed viewport on shorter screens */
    background-color: var(--bg-secondary);
    border-radius: 20px;
    box-shadow: 
      0 0 0 4px var(--bg-tertiary),
      0 10px 40px rgba(0, 0, 0, 0.5),
      0 0 100px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    flex-shrink: 0;
  }
  
  /* Status bar - fixed height */
  .status-bar {
    height: var(--status-bar-height);
    min-height: var(--status-bar-height);
    max-height: var(--status-bar-height);
    border-radius: 16px 16px 0 0;
  }
  
  /* Screen area - fixed height */
  .content-area {
    height: var(--screen-height);
    min-height: var(--screen-height);
    max-height: var(--screen-height);
  }
  
  /* Controller area - fixed height */
  .controller-area {
    height: var(--controller-height);
    min-height: var(--controller-height);
    max-height: var(--controller-height);
    border-radius: 0 0 16px 16px;
  }
  
  /* D-pad - fixed size */
  .dpad {
    width: var(--dpad-size);
    height: var(--dpad-size);
    max-width: none;
    max-height: none;
  }
  
  .dpad::after {
    width: var(--dpad-platform-size);
    height: var(--dpad-platform-size);
    max-width: none;
    max-height: none;
  }
  
  .dpad__btn {
    width: var(--dpad-btn-size);
    height: var(--dpad-btn-size);
    max-width: none;
    max-height: none;
  }
  
  .dpad__center {
    width: var(--dpad-center-size);
    height: var(--dpad-center-size);
    max-width: none;
    max-height: none;
  }
  
  /* Action buttons - fixed size */
  .controller-right {
    width: var(--action-btn-container-w);
    height: var(--action-btn-container-h);
    max-width: none;
    max-height: none;
  }
  
  .controller-right::before {
    width: var(--action-btn-divot-w);
    height: var(--action-btn-divot-h);
    max-width: none;
    max-height: none;
  }
  
  .action-btn {
    width: var(--action-btn-size);
    height: var(--action-btn-size);
    max-width: none;
    max-height: none;
  }
  
  /* Desktop A/B button spacing - more gap */
  .action-btn--b {
    bottom: 4px;
    left: 4px;
  }
  
  .action-btn--a {
    top: 4px;
    right: 4px;
  }
  
  /* Select/Start buttons - fixed size */
  .select-start-btn {
    width: var(--select-btn-w);
    height: var(--select-btn-h);
    max-width: none;
    max-height: none;
  }
  
  /* Theme toggle - fixed size */
  .theme-toggle {
    width: var(--theme-toggle-size);
    height: var(--theme-toggle-size);
    max-width: none;
    max-height: none;
  }
  
  /* Vent grille - fixed size */
  .vent-grille__line {
    width: var(--vent-line-width);
    max-width: none;
  }
  
  /* Box art container - fixed size */
  .box-art-container {
    width: var(--box-art-width);
    height: var(--box-art-height);
  }
  
  /* Controller layout adjustments for fixed size */
  .controller-main {
    padding: 0 16px;
    margin-top: 24px;
  }
  
  .controller-bottom {
    gap: 16px;
    margin-top: 24px;
  }
  
  /* Made in label - fixed position */
  .made-in-label {
    top: 8px;
    left: 12px;
    font-size: 7px;
  }
  
  /* Vent grille - fixed position */
  .vent-grille {
    bottom: 16px;
    left: 16px;
    gap: 3px;
  }
  
  /* Theme toggle corner - fixed position */
  .theme-toggle-corner {
    bottom: 12px;
    right: 12px;
  }
  
  /* Category content - fixed min-height */
  .category-content {
    min-height: 200px;
  }
  
  /* Scroll indicator bars - fixed size */
  .scroll-indicator-bar {
    height: 36px;
  }
  
  .scroll-indicator-bar--up {
    padding-top: 6px;
  }
  
  .scroll-indicator-bar--down {
    padding-bottom: 6px;
  }
  
  .scroll-indicator-bar__arrow {
    border-left-width: 8px;
    border-right-width: 8px;
  }
  
  .scroll-indicator-bar--up .scroll-indicator-bar__arrow {
    border-bottom-width: 10px;
  }
  
  .scroll-indicator-bar--down .scroll-indicator-bar__arrow {
    border-top-width: 10px;
  }
}

/* ===================================
   Utility Classes
   =================================== */
.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }