/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* Height reserved for the touch controller in portrait. The SNES pad needs
     more room than the NES one: shoulder buttons sit above the D-pad and the
     face-button diamond. Used by both #touch-controller and the canvas
     container so the two stay in sync. */
  --touch-h: clamp(190px, 36vh, 250px);
  --accent: #8b5cf6;
  --accent-strong: #7c3aed;
  --accent-soft: #a78bfa;
  --accent-pale: #c4b5fd;
  /* Super Famicom / PAL face-button colors. */
  --btn-a: #dc2626;
  --btn-b: #eab308;
  --btn-x: #2563eb;
  --btn-y: #16a34a;
}
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;
  height: 100dvh;
  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-snes { color: var(--accent-soft); }
.logo-play { color: #fff; }
#rom-label {
  font-size: 11px;
  color: #888;
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.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: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.hdr-btn.active:hover { border-color: var(--accent-strong); }

#volume-slider {
  width: 72px;
  accent-color: var(--accent);
  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 24px;
  min-height: 280px;
  background: rgba(17, 24, 39, 0.6);
  transition: all 0.2s;
}
.dropzone-inner:hover {
  border-color: var(--accent-strong);
  background: rgba(31, 41, 55, 0.6);
}
.dropzone-inner.dragging {
  border-color: var(--accent);
  background: rgba(46, 16, 101, 0.35);
  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;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}
.dropzone-ext {
  padding: 4px 8px;
  border-radius: 4px;
  background: #1f2937;
  font-family: monospace;
}

/* Loading / error card shown while the core downloads and boots. */
#boot-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 5;
}
.boot-card {
  max-width: 420px;
  text-align: center;
  background: rgba(17, 24, 39, 0.9);
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 24px 28px;
  color: #d1d5db;
  font-size: 14px;
  line-height: 1.6;
}
.boot-card.error { border-color: #7f1d1d; color: #fca5a5; }
.boot-spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 3px solid #374151;
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

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

/* 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;
  }
  #snes-canvas {
    object-position: center top;
  }
  /* Keep the drop zone above the gamepad band so the touch controls don't overlap it. */
  #dropzone,
  #boot-status {
    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;
  z-index: 4;
}
.pause-btn {
  padding: 12px 28px;
  background: var(--accent-strong);
  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. */
  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: 360px;
  max-width: calc(100vw - 16px);
  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; line-height: 1.5; }

.save-input-row, .cheat-input-row { display: flex; gap: 8px; }
.panel-input {
  flex: 1;
  min-width: 0;
  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: var(--accent); }
.panel-input.mono { font-family: monospace; text-transform: uppercase; font-size: 13px; }

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

/* Save state item */
.save-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1f2937;
  border-radius: 4px;
  padding: 8px;
}
.save-thumb {
  width: 64px;
  height: 56px;
  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: Cheats ===== */
.cheat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1f2937;
  border-radius: 4px;
  padding: 8px 12px;
}
.cheat-item input[type="checkbox"] { accent-color: var(--accent); }
.cheat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cheat-code { font-family: monospace; font-size: 14px; overflow-wrap: anywhere; }
.cheat-desc { font-size: 12px; color: #9ca3af; overflow-wrap: anywhere; }
.cheat-code.enabled { color: #fff; }
.cheat-code.disabled { color: #6b7280; text-decoration: line-through; }
.cheat-kind { font-size: 11px; color: #6b7280; white-space: nowrap; }
.cheat-remove {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
}
.cheat-remove:hover { color: #f87171; }
.cheat-list { display: flex; flex-direction: column; gap: 8px; }
.cheat-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 10px;
}
.keymap-label { font-size: 12px; color: #9ca3af; width: 44px; flex-shrink: 0; }
.keymap-btn {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 12px;
  font-family: monospace;
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  border: 1px solid #4b5563;
  background: #374151;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.keymap-btn:hover { border-color: var(--accent); }
.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 {
  align-self: flex-start;
  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; }

/* Turbo toggles, one per button that can auto-fire. */
.turbo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.turbo-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1f2937;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  color: #d1d5db;
  cursor: pointer;
  user-select: none;
}
.turbo-toggle input { accent-color: #fbbf24; }

/* Reserved-key note: Esc can't be remapped (see handleKeymapKeydown). */
.keymap-reserved {
  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 =====
   Laid out like the real pad: D-pad on the left, SELECT/START in the middle,
   the X/Y/A/B diamond on the right, and L/R shoulder buttons above the two
   sides. Every group is independently draggable in rearrange mode. */
#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,
.touch-face-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.9);
  border: 2px solid #374151;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.touch-dpad-bg { border-radius: 16px; }

/* 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;
}

/* 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(167,139,250,0.35);
  border-color: var(--accent-soft);
  color: var(--accent-pale);
}
/* 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(139,92,246,0.2);
  color: #fff;
}
.dpad-mode-option.active {
  background: rgba(139,92,246,0.3);
  color: var(--accent-pale);
  font-weight: 600;
}
.dpad-mode-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.dpad-mode-label { flex: 1; }
/* Joystick zone */
.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: var(--accent-pale); }
/* 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(167,139,250,0.35);
  border-color: var(--accent-soft);
}

/* ----- SELECT / START (independently draggable) ----- */
.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;
  /* The real pad's SELECT/START are slanted pills. */
  transform: rotate(-24deg);
}
.touch-meta-btn:active,
.touch-meta-btn.pressed { background: #4b5563; }

/* ----- L / R shoulder buttons (independently draggable) ----- */
.touch-shoulder-wrap {
  position: absolute;
  pointer-events: auto;
}
#touch-l-wrap { left: 24px;  bottom: 204px; }
#touch-r-wrap { right: 24px; bottom: 204px; }
.shoulder-btn {
  width: 96px;
  height: 34px;
  background: #4b5563;
  border: 2px solid #9ca3af;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  user-select: none;
  cursor: pointer;
  touch-action: none;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.4);
  transition: filter 0.06s, transform 0.06s;
}
/* The shoulder buttons curve over the top corners of the real pad. */
.shoulder-l { border-radius: 26px 12px 8px 8px; }
.shoulder-r { border-radius: 12px 26px 8px 8px; }
.shoulder-btn.pressed {
  filter: brightness(1.35);
  transform: translateY(2px);
}

/* ----- X / Y / A / B diamond ----- */
.touch-face {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 168px;
  height: 168px;
  pointer-events: auto;
  --face-size: 52px;
}
.touch-face-inner {
  position: absolute;
  inset: 0;
}
.face-btn {
  position: absolute;
  width: var(--face-size);
  height: var(--face-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 19px;
  user-select: none;
  cursor: pointer;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  transition: filter 0.06s, transform 0.06s;
  line-height: 1;
  touch-action: none;
}
.face-x { background: var(--btn-x); top: 8px;    left: calc(50% - var(--face-size) / 2); }
.face-b { background: var(--btn-b); bottom: 8px; left: calc(50% - var(--face-size) / 2); color: #1c1917; text-shadow: none; }
.face-y { background: var(--btn-y); left: 8px;   top: calc(50% - var(--face-size) / 2); }
.face-a { background: var(--btn-a); right: 8px;  top: calc(50% - var(--face-size) / 2); }
.face-btn.pressed {
  filter: brightness(1.35);
  transform: scale(0.92);
}
/* Turbo glow (turbo is switched on per button in Key Config). */
.face-btn.turbo,
.shoulder-btn.turbo {
  border-color: #fbbf24;
  animation: turbo-glow-pulse 1.2s infinite ease-in-out;
}
@keyframes turbo-glow-pulse {
  0%, 100% { box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3), 0 0 10px 2px rgba(250,204,21,0.6); }
  50%      { box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3), 0 0 18px 5px rgba(250,204,21,0.9); }
}

@media (max-width: 600px) {
  .touch-dpad,
  .touch-face {
    width: 140px;
    height: 140px;
    bottom: 16px;
  }
  .touch-dpad { left: 16px; }
  .touch-face { right: 16px; --face-size: 46px; }
  .face-btn { font-size: 17px; }
  .face-x { top: 4px; }
  .face-b { bottom: 4px; }
  .face-y { left: 4px; }
  .face-a { right: 4px; }
  #touch-select-wrap { bottom: 20px; }
  #touch-start-wrap  { bottom: 20px; }
  .shoulder-btn { width: 84px; height: 30px; font-size: 14px; }
  #touch-l-wrap { left: 16px;  bottom: 166px; }
  #touch-r-wrap { right: 16px; bottom: 166px; }
}

@media (max-width: 400px) {
  .touch-dpad,
  .touch-face {
    width: 124px;
    height: 124px;
    bottom: 12px;
  }
  .touch-dpad { left: 10px; }
  .touch-face { right: 10px; --face-size: 42px; }
  .face-btn { font-size: 15px; border-width: 2px; }
  .face-x { top: 2px; }
  .face-b { bottom: 2px; }
  .face-y { left: 2px; }
  .face-a { right: 2px; }
  .touch-meta-btn { width: 48px; height: 22px; font-size: 9px; }
  #touch-select-wrap { bottom: 14px; }
  #touch-start-wrap  { bottom: 14px; }
  .shoulder-btn { width: 72px; height: 28px; font-size: 13px; }
  #touch-l-wrap { left: 10px;  bottom: 146px; }
  #touch-r-wrap { right: 10px; bottom: 146px; }
}

@media (max-width: 340px) {
  .touch-dpad,
  .touch-face {
    width: 108px;
    height: 108px;
  }
  .touch-dpad { left: 8px; }
  .touch-face { right: 8px; --face-size: 36px; }
  .face-btn { font-size: 13px; }
  .touch-meta-btn { width: 42px; height: 20px; font-size: 8px; }
  #touch-select-wrap { bottom: 12px; }
  #touch-start-wrap  { bottom: 12px; }
  .shoulder-btn { width: 62px; height: 26px; font-size: 12px; }
  #touch-l-wrap { left: 8px;  bottom: 128px; }
  #touch-r-wrap { right: 8px; bottom: 128px; }
}

/* ===== Gamepad Rearrange / Edit Mode ===== */
.rearrange-only {
  display: none !important;
}
#touch-controller.rearranging .rearrange-only {
  display: flex !important;
}
#touch-controller.rearranging {
  pointer-events: auto;
}
#touch-controller.rearranging .touch-dpad,
#touch-controller.rearranging .touch-meta-wrap,
#touch-controller.rearranging .touch-shoulder-wrap,
#touch-controller.rearranging .touch-face {
  cursor: move;
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
  box-shadow: 0 0 15px rgba(139, 92, 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-shoulder-wrap::after,
#touch-controller.rearranging .touch-face::after {
  content: "✛ Drag";
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-strong);
  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;
  white-space: nowrap;
}
.rearrange-reset-btn,
.rearrange-done-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-done-btn {
  background: rgba(139, 92, 246, 0.25);
  border-color: rgba(139, 92, 246, 0.5);
  color: var(--accent-pale);
}
.rearrange-reset-btn:hover,
.rearrange-done-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  color: #fff;
}
.rearrange-done-btn:hover { background: rgba(139, 92, 246, 0.45); }
@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;
  /* dvh tracks the actually-visible area on phones, where browser chrome makes
     vh report a taller-than-visible height. vh is the fallback. */
  max-height: calc(100vh - 58px);
  max-height: calc(100dvh - 58px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  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. */
.gear-item.disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}
/* Keep the icon visible (just dimmed) on disabled rows: the native disabled
   treatment blanks monochrome glyphs on the dark menu. */
.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;
}

/* ===== Site Menu (hamburger, top-left) =====
   Mirrors the gear menu on the other side. Lives outside #toolbar for the same
   reason: the toolbar is a z-indexed flex item, so anything inside it would be
   stacked under the touch gamepad. The info modal itself is in pages.css. */
#btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  margin-left: -4px;
}
#btn-nav svg {
  width: 20px;
  height: 20px;
  display: block;
}

.nav-menu {
  position: fixed;
  top: 50px;
  left: 8px;
  width: 220px;
  max-width: 92vw;
  max-height: calc(100vh - 58px);
  max-height: calc(100dvh - 58px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  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;
}
.nav-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 6px;
  color: #ddd;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
a.nav-item:hover,
a.nav-item:focus-visible { background: #262626; color: #fff; outline: none; }
/* Not built yet: listed so visitors know it's coming, dimmed like a disabled
   gear item. */
.nav-item.disabled { opacity: 0.45; cursor: default; }
.nav-soon { font-size: 11px; font-weight: 400; }
.nav-divider { height: 1px; margin: 4px 0; background: #2a2a2a; }