/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* Height reserved for the touch controller. Scaled down on narrow screens
     below. Used by both #touch-controller and the canvas container so the
     two stay in sync. */
  --touch-h: clamp(150px, 30vh, 200px);
}
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #000;
  color: #f2f2f2;
  overflow: hidden;
}
canvas { touch-action: none; }
button { font-family: inherit; }
[hidden] { display: none !important; }

/* ===== App Layout ===== */
#app {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000;
}

/* ===== Header / Toolbar ===== */
#toolbar {
  flex-shrink: 0;
  height: 44px;
  background: #111;
  border-bottom: 1px solid #222;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 6px;
  z-index: 10;
}
.logo { font-weight: 900; font-size: 16px; letter-spacing: -0.5px; margin-right: 4px; white-space: nowrap; }
.logo-nes { color: #e53e3e; }
.logo-play { color: #fff; }
#rom-label {
  font-size: 11px;
  color: #888;
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.spacer { flex: 1; }

/* Header buttons */
.hdr-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #ccc;
  font-size: 16px;
  cursor: pointer;
  padding: 3px 6px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}
.hdr-btn:hover { border-color: #555; }
.hdr-btn.active { background: #c53030; border-color: #c53030; color: #fff; }
.hdr-btn.active:hover { border-color: #c53030; }

#volume-slider {
  width: 72px;
  accent-color: #e53e3e;
  cursor: pointer;
}

/* ===== Main Area ===== */
#main-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #000;
}

/* ===== Drop Zone ===== */
#dropzone {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.dropzone-inner {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer;
  user-select: none;
  border: 2px dashed #4b5563;
  border-radius: 12px;
  padding: 48px;
  min-height: 280px;
  background: rgba(17, 24, 39, 0.6);
  transition: all 0.2s;
}
.dropzone-inner:hover {
  border-color: #b91c1c;
  background: rgba(31, 41, 55, 0.6);
}
.dropzone-inner.dragging {
  border-color: #ef4444;
  background: rgba(69, 10, 10, 0.3);
  transform: scale(1.02);
}
.dropzone-icon { font-size: 60px; user-select: none; }
.dropzone-text { text-align: center; }
.dropzone-title { font-size: 20px; font-weight: 700; color: #fff; }
.dropzone-subtitle { font-size: 14px; color: #9ca3af; margin-top: 4px; }
.dropzone-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
}
.dropzone-ext {
  padding: 4px 8px;
  border-radius: 4px;
  background: #1f2937;
  font-family: monospace;
}

/* ===== Canvas ===== */
#canvas-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#nes-canvas {
  width: 100%;
  height: 100%;
  /* contain keeps the 256:240 NES aspect ratio regardless of container shape.
     Without this, a portrait viewport stretches the picture vertically. */
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}

/* Portrait: pin the screen to the top and reserve the bottom band for the
   gamepad. The reserved space is always present in portrait so the layout
   does not jump when the touch controller is toggled. */
@media (orientation: portrait) {
  #canvas-container {
    bottom: var(--touch-h);
    align-items: flex-start;
  }
  #nes-canvas {
    object-position: center top;
  }
  /* Keep the drop zone above the gamepad band so the touch controls don't overlap it. */
  #dropzone {
    bottom: var(--touch-h);
  }
  #pause-overlay {
    bottom: var(--touch-h);
  }
}

/* Pause overlay */
#pause-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  cursor: pointer;
}
.pause-btn {
  padding: 12px 28px;
  background: #c53030;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1px;
  pointer-events: none;
}

/* ===== Auto-hide top bar + reveal strip (play mode) =====
   Once a ROM is loaded the app enters "auto-hide" mode: the top bar is hidden so
   the canvas uses the full height, and a thin top-edge strip becomes the trigger
   to reveal the bar. Revealing the bar adds .bar-revealed, which shows the
   toolbar again and hides the strip. Revealing is coupled to pausing in app.js. */

/* Hide the toolbar during play (bar auto-hidden, not currently revealed). */
#app.bar-autohide:not(.bar-revealed) #toolbar {
  display: none;
}

/* Thin top-edge trigger strip: hidden by default; shown only during play. */
#reveal-strip {
  display: none;
}
#app.bar-autohide:not(.bar-revealed) #reveal-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;               /* slim, to avoid accidental triggering */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
  /* Above the canvas and the touch gamepad (z 50); below side panels (1100)
     and the gear menu (1200) so those stay reachable when the bar is revealed. */
  z-index: 60;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0));
  -webkit-tap-highlight-color: transparent;
}
/* Subtle pull-down handle / hint centered on the strip. */
.reveal-handle {
  width: 46px;
  height: 5px;
  margin-top: 3px;
  border-radius: 0 0 4px 4px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: background 0.15s;
}
#app.bar-autohide:not(.bar-revealed) #reveal-strip:hover .reveal-handle {
  background: rgba(255, 255, 255, 0.85);
}

/* ===== Side Panel ===== */
#panel-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  pointer-events: none;
  /* Must sit above the touch gamepad (#touch-controller, z-index 50) and every
     other gamepad layer (rearrange banner 100, dpad-mode menu 500, rearrange
     drag handles 1000) so any open menu is the top-most overlay. #main-area
     doesn't create a stacking context, so this competes at the root level. */
  z-index: 1100;
}
#panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  pointer-events: auto;
}
#panel-box {
  position: relative;
  pointer-events: auto;
  width: 340px;
  max-width: 90vw;
  max-height: calc(100% - 16px);
  margin: 8px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 16px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
#panel-title { color: #fff; font-weight: 700; font-size: 14px; }
#panel-close {
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

/* ===== Panel: Saves ===== */
.panel-section { display: flex; flex-direction: column; gap: 12px; }
.panel-section h3 { font-size: 14px; font-weight: 600; color: #d1d5db; }
.panel-hint { font-size: 12px; color: #9ca3af; }

.save-input-row, .genie-input-row { display: flex; gap: 8px; }
.panel-input {
  flex: 1;
  background: #1f2937;
  border: 1px solid #4b5563;
  border-radius: 4px;
  padding: 6px 12px;
  color: #fff;
  font-size: 14px;
  outline: none;
}
.panel-input::placeholder { color: #6b7280; }
.panel-input:focus { border-color: #ef4444; }
.panel-input.mono { font-family: monospace; text-transform: uppercase; font-size: 13px; }

.panel-btn-primary {
  padding: 6px 16px;
  background: #b91c1c;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.panel-btn-primary:hover { background: #dc2626; }

.panel-btn-full {
  width: 100%;
  padding: 8px 0;
  background: #c53030;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.panel-btn-full:hover { background: #dc2626; }

/* Save state item */
.save-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1f2937;
  border-radius: 4px;
  padding: 8px;
}
.save-thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #4b5563;
  image-rendering: pixelated;
}
.save-info { flex: 1; min-width: 0; }
.save-name { font-size: 14px; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-date { font-size: 12px; color: #9ca3af; }
.save-load-btn {
  padding: 4px 8px;
  background: #15803d;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.save-load-btn:hover { background: #16a34a; }
.save-del-btn {
  padding: 4px 8px;
  background: #374151;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.save-del-btn:hover { background: #b91c1c; }

.save-states-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 256px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Battery section */
.battery-section {
  border-top: 1px solid #374151;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.battery-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.battery-btn {
  padding: 6px 12px;
  background: #374151;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.battery-btn:hover { background: #4b5563; }
.battery-import-label {
  padding: 6px 12px;
  background: #374151;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.battery-import-label:hover { background: #4b5563; }

.success-msg {
  font-size: 12px;
  color: #4ade80;
  background: rgba(20, 83, 45, 0.3);
  border-radius: 4px;
  padding: 4px 8px;
}
.error-msg { font-size: 12px; color: #f87171; }

/* ===== Panel: Game Genie ===== */
.genie-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1f2937;
  border-radius: 4px;
  padding: 8px 12px;
}
.genie-item input[type="checkbox"] { accent-color: #ef4444; }
.genie-code { font-family: monospace; font-size: 14px; flex: 1; }
.genie-code.enabled { color: #fff; }
.genie-code.disabled { color: #6b7280; text-decoration: line-through; }
.genie-addr { font-size: 12px; color: #6b7280; }
.genie-remove {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
}
.genie-remove:hover { color: #f87171; }
.genie-list { display: flex; flex-direction: column; gap: 8px; }
.genie-empty { font-size: 12px; color: #6b7280; font-style: italic; }

/* ===== Panel: Keymap ===== */
.keymap-listening {
  background: rgba(113, 63, 18, 0.5);
  border: 1px solid #ca8a04;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12px;
  color: #fde047;
}
.keymap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.keymap-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1f2937;
  border-radius: 4px;
  padding: 8px 12px;
}
.keymap-label { font-size: 12px; color: #9ca3af; width: 56px; }
.keymap-btn {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-family: monospace;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  border: 1px solid #4b5563;
  background: #374151;
  color: #fff;
}
.keymap-btn:hover { border-color: #ef4444; }
.keymap-btn.listening {
  border-color: #eab308;
  background: rgba(113, 63, 18, 0.5);
  color: #fde047;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.keymap-reset {
  font-size: 12px;
  color: #9ca3af;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}
.keymap-reset:hover { color: #fff; }
.keymap-hint { font-size: 12px; color: #6b7280; }
.keymap-hint p { margin: 2px 0; }

/* Reserved-key note: Esc can't be remapped (see handleKeymapKeydown). */
.keymap-reserved {
  margin-top: 12px;
  padding: 8px 12px;
  font-size: 12px;
  color: #9ca3af;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 4px;
  line-height: 1.5;
}
.keymap-reserved-key {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #e5e7eb;
  background: #374151;
  border: 1px solid #4b5563;
  border-bottom-width: 2px;
  border-radius: 4px;
}

/* ===== Touch Controller ===== */
#touch-controller {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--touch-h);
  pointer-events: none;
}
.touch-dpad {
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: 168px;
  height: 168px;
  pointer-events: auto;
}
.touch-dpad-bg {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.9);
  border: 2px solid #374151;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* D-pad mode settings button */
.dpad-mode-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background: rgba(55,65,81,0.9);
  border: 1px solid #4b5563;
  border-radius: 50%;
  color: #9ca3af;
  font-size: 12px;
  cursor: pointer;
  z-index: 200;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: all 0.15s ease;
  line-height: 1;
  padding: 0;
}
.dpad-mode-btn:hover {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

/* AB mode settings button (mirrors dpad-mode-btn) */
.ab-mode-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background: rgba(55,65,81,0.9);
  border: 1px solid #4b5563;
  border-radius: 50%;
  color: #9ca3af;
  font-size: 12px;
  cursor: pointer;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: all 0.15s ease;
  line-height: 1;
  padding: 0;
}
.ab-mode-btn:hover {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

/* AB layout context menu (mirrors dpad-mode-menu) */
.ab-mode-menu {
  position: fixed;
  z-index: 500;
  background: rgba(17,24,39,0.97);
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 148px;
  animation: menuFadeIn 0.15s ease;
  pointer-events: auto;
}
.ab-mode-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #d1d5db;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  font-family: 'Inter', sans-serif;
}
.ab-mode-option:hover {
  background: rgba(59,130,246,0.2);
  color: #fff;
}
.ab-mode-option.active {
  background: rgba(59,130,246,0.3);
  color: #93c5fd;
  font-weight: 600;
}
.ab-mode-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.ab-mode-label { flex: 1; }

/* ===== AB button layout modes ===== */

/* Horizontal: B on the left, A on the right, side-by-side like a real NES
   controller.  Uses margin-top to center vertically (no transform — avoids
   conflicting with the .pressed scale() transform). */
.touch-ab.ab-horizontal .ab-b {
  top: 50%;
  margin-top: -28px;
  left: 0;
}
.touch-ab.ab-horizontal .ab-a {
  top: 50%;
  margin-top: -28px;
  right: 0;
}
.touch-ab.ab-horizontal .rapid-toggle-b {
  top: -7px;
  left: 0;
}
.touch-ab.ab-horizontal .rapid-toggle-a {
  top: -7px;
  right: 0;
}

/* Alt-slant: B bottom-left, A top-right — preserves left-to-right B/A
   order while slanting ↗ (B lower than A). */
.touch-ab.ab-slant-alt .ab-b {
  top: auto;
  bottom: 7px;
  left: 0;
}
.touch-ab.ab-slant-alt .ab-a {
  bottom: auto;
  top: 15px;
  right: 0;
}
.touch-ab.ab-slant-alt .rapid-toggle-b {
  top: 8px;
  left: 0;
}
.touch-ab.ab-slant-alt .rapid-toggle-a {
  top: -14px;
  right: 0;
}

/* 4-button and 8-button dpad layouts */
.dpad-buttons {
  position: absolute;
  inset: 10px;
}
/* 4-button cross layout */
.dpad-4btn .dpad-btn-up    { top: 0;    left: 50%; transform: translateX(-50%); width: 40%; height: 33%; }
.dpad-4btn .dpad-btn-down  { bottom: 0; left: 50%; transform: translateX(-50%); width: 40%; height: 33%; }
.dpad-4btn .dpad-btn-left  { left: 0;   top: 50%;  transform: translateY(-50%); width: 33%; height: 40%; }
.dpad-4btn .dpad-btn-right { right: 0;  top: 50%;  transform: translateY(-50%); width: 33%; height: 40%; }
/* 8-button layout */
.dpad-8btn .dpad-btn-up        { top: 0;    left: 33%; width: 34%; height: 30%; }
.dpad-8btn .dpad-btn-down      { bottom: 0; left: 33%; width: 34%; height: 30%; }
.dpad-8btn .dpad-btn-left      { left: 0;   top: 33%;  width: 30%; height: 34%; }
.dpad-8btn .dpad-btn-right     { right: 0;  top: 33%;  width: 30%; height: 34%; }
.dpad-8btn .dpad-btn-upleft    { top: 0;    left: 0;   width: 30%; height: 30%; }
.dpad-8btn .dpad-btn-upright   { top: 0;    right: 0;  width: 30%; height: 30%; }
.dpad-8btn .dpad-btn-downleft  { bottom: 0; left: 0;   width: 30%; height: 30%; }
.dpad-8btn .dpad-btn-downright { bottom: 0; right: 0;  width: 30%; height: 30%; }
/* Common dpad-btn style */
.dpad-btn {
  position: absolute;
  background: rgba(55,65,81,0.7);
  border: 2px solid #4b5563;
  border-radius: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  transition: background 0.06s, color 0.06s;
}
.dpad-btn:active,
.dpad-btn.pressed {
  background: rgba(96,165,250,0.4);
  border-color: #60a5fa;
  color: #60a5fa;
}
/* Diagonal buttons slightly smaller text */
.dpad-btn-upleft, .dpad-btn-upright,
.dpad-btn-downleft, .dpad-btn-downright {
  font-size: 11px;
}

/* D-pad mode context menu */
.dpad-mode-menu {
  position: fixed;
  z-index: 500;
  background: rgba(17,24,39,0.97);
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 148px;
  animation: menuFadeIn 0.15s ease;
  pointer-events: auto;
}
@keyframes menuFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
.dpad-mode-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #d1d5db;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  font-family: 'Inter', sans-serif;
}
.dpad-mode-option:hover {
  background: rgba(59,130,246,0.2);
  color: #fff;
}
.dpad-mode-option.active {
  background: rgba(59,130,246,0.3);
  color: #93c5fd;
  font-weight: 600;
}
.dpad-mode-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.dpad-mode-label { flex: 1; }
/* Joystick zone — replaces the old 3x3 cross buttons */
.dpad-zone {
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  touch-action: none;
  user-select: none;
  cursor: pointer;
}
/* Arrow labels: positioned at the four compass points */
.dpad-arrow {
  position: absolute;
  font-size: 16px;
  color: rgba(255,255,255,0.45);
  pointer-events: none;
  user-select: none;
  transition: color 0.08s;
}
.dpad-arrow-up    { top: 2px;    left: 50%; transform: translateX(-50%); }
.dpad-arrow-down  { bottom: 2px; left: 50%; transform: translateX(-50%); }
.dpad-arrow-left  { left: 2px;   top: 50%;  transform: translateY(-50%); }
.dpad-arrow-right { right: 2px;  top: 50%;  transform: translateY(-50%); }
/* Arrow highlights when direction is active */
.dpad-arrow.active { color: #60a5fa; }
/* Sliding thumb indicator */
.dpad-thumb {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.3);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.06s ease-out, background 0.08s;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.dpad-thumb.active {
  background: rgba(96,165,250,0.35);
  border-color: #60a5fa;
}

/* Individual SELECT / START wrappers */
.touch-meta-wrap {
  position: absolute;
  pointer-events: auto;
}
#touch-select-wrap {
  left: calc(50% - 62px);
  bottom: 24px;
}
#touch-start-wrap {
  left: calc(50% + 6px);
  bottom: 24px;
}
.touch-meta-btn {
  width: 56px;
  height: 24px;
  background: #374151;
  border-radius: 12px;
  border: 2px solid #6b7280;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
}
.touch-meta-btn:active { background: #4b5563; }

/* Elements that only appear in rearrange mode */
.rearrange-only {
  display: none !important;
}
#touch-controller.rearranging .rearrange-only {
  display: flex !important;
}

.touch-ab {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 168px;
  height: 168px;
  pointer-events: auto;
}
.touch-ab-bg {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.9);
  border: 2px solid #374151;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.touch-ab-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.touch-ab-btns {
  position: relative;
  width: 130px;
  height: 100px;
}
.ab-btn {
  position: absolute;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 20px;
  user-select: none;
  cursor: pointer;
  border-radius: 50%;
  border: 4px solid;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
  transition: filter 0.06s, transform 0.06s;
  flex-direction: column;
  gap: 0;
  line-height: 1;
}
.ab-btn.pressed {
  filter: brightness(1.4);
  transform: scale(0.93);
}
.touch-rapid-btn {
  position: absolute;
  background: #374151;
  border-radius: 10px;
  border: 2px solid #6b7280;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  user-select: none;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: all 0.15s ease;
}
.touch-rapid-btn.rapid-toggle-b {
  left: 0;
  top: -14px;
  width: 56px;
  height: 18px;
}
.touch-rapid-btn.rapid-toggle-a {
  right: 0;
  top: 8px;
  width: 56px;
  height: 18px;
}
.touch-rapid-btn:active {
  background: #4b5563;
}
.touch-rapid-btn.active {
  background: #fbbf24;
  border-color: #fbbf24;
  color: #000;
  animation: rapid-toggle-pulse 1.2s infinite ease-in-out;
}

@keyframes rapid-toggle-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
  }
  50% {
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.9);
  }
}

@keyframes rapid-glow-pulse {
  0%, 100% {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 0 12px 3px rgba(250,204,21,0.7);
  }
  50% {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 0 20px 6px rgba(250,204,21,0.95);
  }
}

/* B: top-left — thumb reaches up naturally */
.ab-b {
  background: #4b5563;
  border-color: #9ca3af;
  left: 0;
  top: 15px;
}
/* A: bottom-right — thumb rests down */
.ab-a {
  background: #b91c1c;
  border-color: #f87171;
  right: 0;
  bottom: 7px;
}
/* Rapid-fire button glow */
.ab-btn.rapid {
  border-color: #fbbf24;
  animation: rapid-glow-pulse 1.2s infinite ease-in-out;
}
.ab-btn.rapid.pressed {
  filter: brightness(1.6);
}

@media (max-width: 600px) {
  .touch-dpad,
  .touch-ab {
    width: 140px;
    height: 140px;
    bottom: 16px;
  }
  .touch-dpad { left: 16px; }
  .touch-ab    { right: 16px; }
  .touch-ab-btns { width: 110px; height: 110px; }
  .ab-btn { width: 48px; height: 48px; font-size: 18px; border-width: 3px; }
  .touch-rapid-btn.rapid-toggle-b {
    left: 0;
    top: -10px;
    width: 48px;
    height: 16px;
    font-size: 7px;
  }
  .touch-rapid-btn.rapid-toggle-a {
    right: 0;
    top: 29px;
    width: 48px;
    height: 16px;
    font-size: 7px;
  }
  #touch-select-wrap { bottom: 20px; }
  #touch-start-wrap  { bottom: 20px; }
  /* Horizontal AB layout: 48px buttons → -24px margin-top; rapid top 4px */
  .touch-ab.ab-horizontal .ab-b,
  .touch-ab.ab-horizontal .ab-a { margin-top: -24px; }
  .touch-ab.ab-horizontal .rapid-toggle-b,
  .touch-ab.ab-horizontal .rapid-toggle-a { top: 4px; }
  /* Alt-slant rapid buttons at this breakpoint */
  .touch-ab.ab-slant-alt .rapid-toggle-b { top: 29px; }
  .touch-ab.ab-slant-alt .rapid-toggle-a { top: -10px; }
}


@media (max-width: 400px) {
  .touch-dpad,
  .touch-ab {
    width: 118px;
    height: 118px;
    bottom: 12px;
  }
  .touch-dpad { left: 10px; }
  .touch-ab    { right: 10px; }
  .touch-ab-btns { width: 92px; height: 92px; }
  .ab-btn { width: 40px; height: 40px; font-size: 15px; border-width: 3px; }
  .touch-rapid-btn.rapid-toggle-b {
    left: 0;
    top: -8px;
    width: 40px;
    height: 14px;
    font-size: 6px;
  }
  .touch-rapid-btn.rapid-toggle-a {
    right: 0;
    top: 22px;
    width: 40px;
    height: 14px;
    font-size: 6px;
  }
  .touch-meta-btn { width: 48px; height: 22px; font-size: 9px; }
  #touch-select-wrap { bottom: 14px; }
  #touch-start-wrap  { bottom: 14px; }
  /* Horizontal AB layout: 40px buttons → -20px margin-top; rapid top 1px */
  .touch-ab.ab-horizontal .ab-b,
  .touch-ab.ab-horizontal .ab-a { margin-top: -20px; }
  .touch-ab.ab-horizontal .rapid-toggle-b,
  .touch-ab.ab-horizontal .rapid-toggle-a { top: 1px; }
  /* Alt-slant rapid buttons at this breakpoint */
  .touch-ab.ab-slant-alt .rapid-toggle-b { top: 22px; }
  .touch-ab.ab-slant-alt .rapid-toggle-a { top: -8px; }
}


@media (max-width: 340px) {
  .touch-dpad,
  .touch-ab {
    width: 102px;
    height: 102px;
  }
  .touch-dpad { left: 8px; }
  .touch-ab    { right: 8px; }
  .touch-ab-btns { width: 80px; height: 80px; }
  .ab-btn { width: 36px; height: 36px; font-size: 13px; }
  .touch-rapid-btn.rapid-toggle-b {
    left: 0;
    top: -6px;
    width: 36px;
    height: 13px;
    font-size: 5px;
    border-radius: 6px;
  }
  .touch-rapid-btn.rapid-toggle-a {
    right: 0;
    top: 19px;
    width: 36px;
    height: 13px;
    font-size: 5px;
    border-radius: 6px;
  }
  .touch-meta-btn { width: 42px; height: 20px; font-size: 8px; }
  #touch-select-wrap { bottom: 12px; }
  #touch-start-wrap  { bottom: 12px; }
  /* Horizontal AB layout: 36px buttons → -18px margin-top; rapid top -2px */
  .touch-ab.ab-horizontal .ab-b,
  .touch-ab.ab-horizontal .ab-a { margin-top: -18px; }
  .touch-ab.ab-horizontal .rapid-toggle-b,
  .touch-ab.ab-horizontal .rapid-toggle-a { top: -2px; }
  /* Alt-slant rapid buttons at this breakpoint */
  .touch-ab.ab-slant-alt .rapid-toggle-b { top: 19px; }
  .touch-ab.ab-slant-alt .rapid-toggle-a { top: -6px; }
}


/* ===== Gamepad Rearrange / Edit Mode ===== */
#touch-controller.rearranging {
  pointer-events: auto;
}
#touch-controller.rearranging .touch-dpad,
#touch-controller.rearranging .touch-meta-wrap,
#touch-controller.rearranging .touch-ab {
  cursor: move;
  outline: 2px dashed #3b82f6;
  outline-offset: 4px;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
  user-select: none;
  touch-action: none;
  z-index: 1000;
}
#touch-controller.rearranging .touch-dpad::after,
#touch-controller.rearranging .touch-meta-wrap::after,
#touch-controller.rearranging .touch-ab::after {
  content: "✛ Drag";
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: #3b82f6;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.rearrange-banner {
  position: fixed;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(17, 24, 39, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: 30px;
  color: #fff;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  animation: slideDown 0.3s ease-out;
  pointer-events: auto;
}
.rearrange-reset-btn {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}
.rearrange-reset-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  color: #fff;
}
@keyframes slideDown {
  from { transform: translate(-50%, -20px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* ===== Gear Menu (consolidated toolbar) ===== */
#btn-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
}
#btn-gear svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Dropdown panel, anchored top-right. Fixed so it is never clipped by the
   toolbar/#app overflow, and z-index sits above the touch gamepad (50) and the
   side-panel overlay (1100) so it is always reachable — including portrait. */
.gear-menu {
  position: fixed;
  top: 50px;
  right: 8px;
  width: 250px;
  max-width: 92vw;
  max-height: calc(100vh - 58px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  z-index: 1200;
}

.gear-group { padding: 4px 0; }
.gear-group + .gear-group { border-top: 1px solid #2a2a2a; }

.gear-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: #ddd;
  user-select: none;
}
.gear-item:hover { background: #262626; }
/* Inapplicable items stay in the list but grayed-out and non-interactive
   (e.g. the ROM/game controls before a ROM is loaded). The button also carries
   the native `disabled` attribute (focus/keyboard), while this blocks pointer
   input on the whole row and dims it. */
.gear-item.disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}
/* Keep the icon visible (just dimmed) on disabled rows. A button carrying the
   native `disabled` attribute is painted with the browser's own disabled
   treatment, which blanks the glyph — especially monochrome ones like ⏸ / ↺ —
   on the dark menu. Strip the native control appearance, force the glyph colour
   back, and desaturate colour emoji (💾 🧪 ⌨️) so every disabled item still
   shows its icon, rendered as muted/inactive rather than gone. */
.gear-item.disabled .hdr-btn {
  -webkit-appearance: none;
  appearance: none;
  color: #cfcfcf;
  -webkit-text-fill-color: #cfcfcf;
  filter: grayscale(1);
}

.gear-item .hdr-btn {
  font-size: 16px;
  padding: 2px 4px;
  min-width: 26px;
  text-align: center;
  flex-shrink: 0;
}
.gear-label {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
/* Audio row: mute button + label + slider filling the remaining width. */
.gear-item.audio #volume-slider {
  flex: 1;
  width: auto;
  margin-left: auto;
}