/* ════════════════════════════════════════════════════════════════════
 *  Console-Authentic Mobile Gamepads
 * ════════════════════════════════════════════════════════════════════
 *  Each console gets a layout that matches its real-world controller:
 *    • NES        — A/B side-by-side, red rectangular buttons
 *    • SNES       — diamond ABXY in canonical Nintendo colors
 *    • N64        — single yellow C cluster + green A + blue B + Z trigger
 *    • GB / GBC   — A/B angled side-by-side
 *    • GBA        — A/B angled + L/R shoulders
 *    • Genesis    — A/B/C row with 6-button bottom row (X/Y/Z)
 *    • PS1 / PSP  — diamond with the iconic shapes △ ○ × □
 *    • NDS        — diamond ABXY on the right, two-shoulders
 *    • Arcade /   — covered by /assets/css/arcade-mobile-pad.css
 *      Neo Geo
 *
 *  This file overrides /emulator.html's inline rules so the mobile pad
 *  finally feels like a real controller. It's loaded AFTER the inline
 *  styles so its specificity wins.
 *
 *  Loaded by: emulator.html, /pages/console/play.html
 * ──────────────────────────────────────────────────────────────────── */

/* ── Generic polish: rounder, gameier base ──────────────────────────── */
.mobile-gamepad {
    background: linear-gradient(180deg, rgba(8,8,16,0.92), rgba(0,0,0,0.96)) !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
    box-sizing: border-box !important;
}
.mobile-gamepad *,
.mobile-gamepad *::before,
.mobile-gamepad *::after {
    box-sizing: border-box !important;
}

/* ── Base layout (used on play.html where emulator.html's inline
       CSS isn't present). Mirrors the emulator.html rules so the same
       markup renders identically on both pages. ──────────────────── */
.mobile-gamepad {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 6000;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
@media (pointer: coarse), (max-width: 900px) {
    .mobile-gamepad { display: block; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
    .mobile-gamepad { display: none !important; }
}
.mobile-gamepad .gpad-shoulders {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}
.mobile-gamepad .gpad-shoulder-left,
.mobile-gamepad .gpad-shoulder-right {
    display: flex;
    gap: 6px;
}
.mobile-gamepad .gpad-shoulder {
    padding: 7px 22px;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.05s, transform 0.05s;
}
.mobile-gamepad .gpad-shoulder.is-active {
    background: var(--gpad-accent, #e00050) !important;
    color: #fff !important;
    transform: scale(0.92);
}
.mobile-gamepad .gpad-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.mobile-gamepad .gpad-dpad {
    position: relative;
    flex-shrink: 0;
}
.mobile-gamepad .gpad-dpad .gpad-up    { top: 0;    left: 50%; transform: translateX(-50%); position: absolute; }
.mobile-gamepad .gpad-dpad .gpad-down  { bottom: 0; left: 50%; transform: translateX(-50%); position: absolute; }
.mobile-gamepad .gpad-dpad .gpad-left  { left: 0;   top: 50%;  transform: translateY(-50%); position: absolute; }
.mobile-gamepad .gpad-dpad .gpad-right { right: 0;  top: 50%;  transform: translateY(-50%); position: absolute; }
.mobile-gamepad .gpad-dpad .gpad-up.is-active    { transform: translateX(-50%) scale(0.9); }
.mobile-gamepad .gpad-dpad .gpad-down.is-active  { transform: translateX(-50%) scale(0.9); }
.mobile-gamepad .gpad-dpad .gpad-left.is-active  { transform: translateY(-50%) scale(0.9); }
.mobile-gamepad .gpad-dpad .gpad-right.is-active { transform: translateY(-50%) scale(0.9); }
.mobile-gamepad .gpad-dir {
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.05s, transform 0.05s;
}
.mobile-gamepad .gpad-dir.is-active {
    background: var(--gpad-accent, #e00050) !important;
}
.mobile-gamepad .gpad-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.mobile-gamepad .gpad-menu-btn {
    padding: 7px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    color: rgba(255,255,255,0.7);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.05s;
}
.mobile-gamepad .gpad-menu-btn.is-active {
    background: rgba(255,255,255,0.22);
    color: #fff;
}
.mobile-gamepad .gpad-abxy {
    position: relative;
    flex-shrink: 0;
}
.mobile-gamepad .gpad-action {
    position: absolute;
    border-radius: 50%;
    border: 3px solid;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: filter 0.05s, transform 0.05s;
}
.mobile-gamepad .gpad-abxy .gpad-x { top: 0;     left: 50%; transform: translateX(-50%); }
.mobile-gamepad .gpad-abxy .gpad-b { bottom: 0;  left: 50%; transform: translateX(-50%); }
.mobile-gamepad .gpad-abxy .gpad-y { left: 0;    top: 50%;  transform: translateY(-50%); }
.mobile-gamepad .gpad-abxy .gpad-a { right: 0;   top: 50%;  transform: translateY(-50%); }
.mobile-gamepad .gpad-action.is-active { filter: brightness(1.5); }
.mobile-gamepad .gpad-abxy .gpad-x.is-active { transform: translateX(-50%) scale(0.9); }
.mobile-gamepad .gpad-abxy .gpad-b.is-active { transform: translateX(-50%) scale(0.9); }
.mobile-gamepad .gpad-abxy .gpad-y.is-active { transform: translateY(-50%) scale(0.9); }
.mobile-gamepad .gpad-abxy .gpad-a.is-active { transform: translateY(-50%) scale(0.9); }
.mobile-gamepad .gpad-c[hidden] { display: none !important; }

/* Console accent colors used by the highlight effect on the d-pad */
.mobile-gamepad[data-console="nes"]      { --gpad-accent: #e4000f; }
.mobile-gamepad[data-console="snes"]     { --gpad-accent: #7b40c0; }
.mobile-gamepad[data-console="n64"]      { --gpad-accent: #009e42; }
.mobile-gamepad[data-console="gba"]      { --gpad-accent: #4b0082; }
.mobile-gamepad[data-console="gb"]       { --gpad-accent: #5e3270; }
.mobile-gamepad[data-console="gbc"]      { --gpad-accent: #b452d4; }
.mobile-gamepad[data-console="genesis"]  { --gpad-accent: #1a1a1a; }
.mobile-gamepad[data-console="psx"]      { --gpad-accent: #003087; }
.mobile-gamepad[data-console="ps1"]      { --gpad-accent: #003087; }
.mobile-gamepad[data-console="psp"]      { --gpad-accent: #003087; }
.mobile-gamepad[data-console="nds"]      { --gpad-accent: #c0c0c0; }
.mobile-gamepad[data-console="arcade"]   { --gpad-accent: #ff2020; }
.mobile-gamepad[data-console="neogeo"]   { --gpad-accent: #ffd700; }
.mobile-gamepad[data-console="segaMS"],
.mobile-gamepad[data-console="segaGG"],
.mobile-gamepad[data-console="gamegear"] { --gpad-accent: #0066b3; }
.mobile-gamepad .gpad-dpad,
.mobile-gamepad .gpad-abxy {
    width: 138px;
    height: 138px;
}
.mobile-gamepad .gpad-dir,
.mobile-gamepad .gpad-action {
    width: 50px;
    height: 50px;
    min-width: 0 !important;
    min-height: 0 !important;
}
.mobile-gamepad .gpad-dir {
    background: linear-gradient(180deg, #2c2c34, #1a1a22);
    border: 2px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85);
    font-size: 20px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 2px 4px rgba(0,0,0,0.5);
}
.mobile-gamepad .gpad-dir:active {
    background: linear-gradient(180deg, var(--gpad-accent, #e00050), #6a002c);
    color: #fff;
}
.mobile-gamepad .gpad-action {
    text-shadow: 0 2px 3px rgba(0,0,0,0.65);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 3px 6px rgba(0,0,0,0.55);
    border-width: 2px;
}

/* ════════════════════════════════════════════════════════════════════
 *  NES — two red rectangular buttons (B left, A right)
 * ════════════════════════════════════════════════════════════════════ */
.mobile-gamepad[data-console="nes"] .gpad-shoulders { display: none !important; }
.mobile-gamepad[data-console="nes"] .gpad-abxy {
    width: 150px !important;
    height: 70px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
}
.mobile-gamepad[data-console="nes"] .gpad-x,
.mobile-gamepad[data-console="nes"] .gpad-y { display: none !important; }
.mobile-gamepad[data-console="nes"] .gpad-b,
.mobile-gamepad[data-console="nes"] .gpad-a {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 64px !important;
    height: 56px !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, #d33, #911) !important;
    border: 2px solid #ffb0b8 !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 0 4px 0 #4a0010, 0 6px 10px rgba(0,0,0,0.55) !important;
}
.mobile-gamepad[data-console="nes"] .gpad-b { order: 1 !important; }
.mobile-gamepad[data-console="nes"] .gpad-a { order: 2 !important; }
.mobile-gamepad[data-console="nes"] .gpad-b:active,
.mobile-gamepad[data-console="nes"] .gpad-a:active {
    transform: translateY(2px) !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 0 2px 0 #4a0010, 0 3px 6px rgba(0,0,0,0.55) !important;
}

/* ════════════════════════════════════════════════════════════════════
 *  SNES — diamond ABXY in Nintendo Y/X/B/A colors
 * ════════════════════════════════════════════════════════════════════ */
.mobile-gamepad[data-console="snes"] .gpad-abxy {
    width: 150px !important;
    height: 150px !important;
    display: block !important;
    margin-right: 8px !important;
}
.mobile-gamepad[data-console="snes"] .gpad-action {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border-width: 2px !important;
    font-weight: 900 !important;
}
/* Real SNES color mapping:
     A = red (right), B = yellow (bottom), X = blue (top), Y = green (left) */
.mobile-gamepad[data-console="snes"] .gpad-x {
    top: 0 !important; left: 50% !important; bottom: auto !important;
    transform: translateX(-50%) !important;
    background: radial-gradient(circle at 35% 30%, #6cb0ff, #1f5fc9 70%) !important;
    border-color: #87caff !important;
    color: #fff !important;
}
.mobile-gamepad[data-console="snes"] .gpad-y {
    left: 8px !important; top: 50% !important; right: auto !important;
    transform: translateY(-50%) !important;
    background: radial-gradient(circle at 35% 30%, #7be090, #1f8d3b 70%) !important;
    border-color: #9af0a8 !important;
    color: #fff !important;
}
.mobile-gamepad[data-console="snes"] .gpad-a {
    right: 8px !important; top: 50% !important; left: auto !important;
    transform: translateY(-50%) !important;
    background: radial-gradient(circle at 35% 30%, #ff8080, #c01919 70%) !important;
    border-color: #ffaaaa !important;
    color: #fff !important;
}
.mobile-gamepad[data-console="snes"] .gpad-b {
    bottom: 0 !important; left: 50% !important; top: auto !important;
    transform: translateX(-50%) !important;
    background: radial-gradient(circle at 35% 30%, #ffe070, #c79900 70%) !important;
    border-color: #ffe89c !important;
    color: #4a3a00 !important;
}

/* ════════════════════════════════════════════════════════════════════
 *  N64 — green A (right), blue B (bottom), Z trigger styled L1
 *         C-buttons cluster on top in yellow
 * ════════════════════════════════════════════════════════════════════ */
.mobile-gamepad[data-console="n64"] .gpad-abxy {
    width: 150px !important;
    height: 140px !important;
    display: block !important;
    margin-right: 4px !important;
}
.mobile-gamepad[data-console="n64"] .gpad-a {
    right: 0 !important;
    top: 106px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    background: radial-gradient(circle at 35% 30%, #5be58d, #138a3e 70%) !important;
    border-color: #88ffaf !important;
    color: #fff !important;
    font-weight: 900 !important;
    width: 44px !important;
    height: 44px !important;
}
.mobile-gamepad[data-console="n64"] .gpad-b {
    right: 50px !important;
    top: 106px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    background: radial-gradient(circle at 35% 30%, #62a3ff, #1f4cb6 70%) !important;
    border-color: #8fc1ff !important;
    color: #fff !important;
    width: 44px !important;
    height: 44px !important;
}
.mobile-gamepad[data-console="n64"] .gpad-c {
    display: flex !important;
    width: 34px !important;
    height: 34px !important;
    background: radial-gradient(circle at 35% 30%, #ffd96b, #b07700 70%) !important;
    border-color: #ffe9a4 !important;
    color: #3a2900 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}
.mobile-gamepad[data-console="n64"] .gpad-c-up {
    top: 0 !important;
    right: 40px !important;
    left: auto !important;
    transform: none !important;
}
.mobile-gamepad[data-console="n64"] .gpad-c-left {
    top: 34px !important;
    right: 74px !important;
    left: auto !important;
    transform: none !important;
}
.mobile-gamepad[data-console="n64"] .gpad-c-right {
    top: 34px !important;
    right: 6px !important;
    left: auto !important;
    transform: none !important;
}
.mobile-gamepad[data-console="n64"] .gpad-c-down {
    top: 68px !important;
    right: 40px !important;
    left: auto !important;
    transform: none !important;
}
.mobile-gamepad[data-console="n64"] .gpad-c:active,
.mobile-gamepad[data-console="n64"] .gpad-c.is-active {
    filter: brightness(1.35) !important;
    transform: scale(0.9) !important;
}
.mobile-gamepad[data-console="n64"] .gpad-a:active,
.mobile-gamepad[data-console="n64"] .gpad-b:active,
.mobile-gamepad[data-console="n64"] .gpad-a.is-active,
.mobile-gamepad[data-console="n64"] .gpad-b.is-active {
    filter: brightness(1.35) !important;
    transform: scale(0.92) !important;
}
/* Fallback if older markup still maps X/Y to the C cluster. */
.mobile-gamepad[data-console="n64"] .gpad-x,
.mobile-gamepad[data-console="n64"] .gpad-y {
    background: radial-gradient(circle at 35% 30%, #ffd96b, #b07700 70%) !important;
    border-color: #ffe9a4 !important;
    color: #3a2900 !important;
    font-weight: 900 !important;
}
/* Show shoulder Z labels */
.mobile-gamepad[data-console="n64"] .gpad-l1::after { content: ' Z'; opacity: 0.7; }

/* ════════════════════════════════════════════════════════════════════
 *  GB / GBC — A/B angled, GameBoy purple/green tint, no shoulders
 * ════════════════════════════════════════════════════════════════════ */
.mobile-gamepad[data-console="gb"] .gpad-shoulders,
.mobile-gamepad[data-console="gbc"] .gpad-shoulders { display: none !important; }
.mobile-gamepad[data-console="gb"] .gpad-abxy,
.mobile-gamepad[data-console="gbc"] .gpad-abxy {
    width: 156px !important;
    height: 70px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    transform: none !important;
}
.mobile-gamepad[data-console="gb"] .gpad-x,
.mobile-gamepad[data-console="gb"] .gpad-y,
.mobile-gamepad[data-console="gbc"] .gpad-x,
.mobile-gamepad[data-console="gbc"] .gpad-y { display: none !important; }
.mobile-gamepad[data-console="gb"] .gpad-b,
.mobile-gamepad[data-console="gb"] .gpad-a,
.mobile-gamepad[data-console="gbc"] .gpad-b,
.mobile-gamepad[data-console="gbc"] .gpad-a {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border-width: 2px !important;
    font-size: 19px !important;
    font-weight: 900 !important;
}
.mobile-gamepad[data-console="gb"] .gpad-b,
.mobile-gamepad[data-console="gbc"] .gpad-b { order: 1 !important; }
.mobile-gamepad[data-console="gb"] .gpad-a,
.mobile-gamepad[data-console="gbc"] .gpad-a { order: 2 !important; }
.mobile-gamepad[data-console="gb"] .gpad-b,
.mobile-gamepad[data-console="gb"] .gpad-a {
    background: radial-gradient(circle at 35% 30%, #5e3270, #2f1840 70%) !important;
    border-color: #b07ad8 !important;
    color: #f5e0ff !important;
}
.mobile-gamepad[data-console="gbc"] .gpad-b,
.mobile-gamepad[data-console="gbc"] .gpad-a {
    background: radial-gradient(circle at 35% 30%, #b452d4, #5a1670 70%) !important;
    border-color: #f0a8ff !important;
    color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════════
 *  GBA — A/B angled + L/R shoulders, indigo theme
 * ════════════════════════════════════════════════════════════════════ */
.mobile-gamepad[data-console="gba"] .gpad-abxy {
    width: 156px !important;
    height: 70px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    transform: none !important;
}
.mobile-gamepad[data-console="gba"] .gpad-x,
.mobile-gamepad[data-console="gba"] .gpad-y { display: none !important; }
.mobile-gamepad[data-console="gba"] .gpad-b,
.mobile-gamepad[data-console="gba"] .gpad-a {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border-width: 2px !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    background: radial-gradient(circle at 35% 30%, #836bcf, #2b1d68 70%) !important;
    border-color: #b1a3f0 !important;
    color: #fff !important;
}
.mobile-gamepad[data-console="gba"] .gpad-b { order: 1 !important; }
.mobile-gamepad[data-console="gba"] .gpad-a { order: 2 !important; }
.mobile-gamepad[data-console="gba"] .gpad-l1,
.mobile-gamepad[data-console="gba"] .gpad-r1 {
    background: linear-gradient(180deg, #4338ca, #1e1b6e) !important;
    border-color: #8a82e8 !important;
    color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════════
 *  Genesis / Mega Drive — six buttons (A B C / X Y Z) in two rows
 * ════════════════════════════════════════════════════════════════════ */
.mobile-gamepad[data-console="genesis"] .gpad-shoulders {
    display: none !important;     /* Genesis controllers have no shoulders */
}
.mobile-gamepad[data-console="genesis"] .gpad-abxy {
    width: 168px !important;
    height: 110px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 50px) !important;
    grid-template-rows: repeat(2, 50px) !important;
    gap: 6px !important;
    align-content: center !important;
    justify-content: center !important;
}
.mobile-gamepad[data-console="genesis"] .gpad-action {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border-width: 2px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    background: radial-gradient(circle at 35% 30%, #4a4a52, #1a1a22 70%) !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: #fff !important;
}
/* Order on real Genesis: top row X Y Z, bottom row A B C  */
/* Our HTML order is X(top), Y(left), B(bottom), A(right). We reflow. */
.mobile-gamepad[data-console="genesis"] .gpad-x { grid-column: 1 / 2; grid-row: 1 / 2; }   /* X top-left */
.mobile-gamepad[data-console="genesis"] .gpad-y { grid-column: 2 / 3; grid-row: 1 / 2; }   /* Y top-mid */
.mobile-gamepad[data-console="genesis"] .gpad-a { grid-column: 1 / 2; grid-row: 2 / 3; }   /* A bottom-left */
.mobile-gamepad[data-console="genesis"] .gpad-b { grid-column: 2 / 3; grid-row: 2 / 3; }   /* B bottom-mid */
/* For 6th button (C and Z) we need the libretro mappings — fall back to L1/R1 */
.mobile-gamepad[data-console="genesis"] .gpad-l1 {
    grid-column: 3 / 4; grid-row: 2 / 3;
    /* Visually place inside the grid by injecting via .gpad-shoulders being hidden */
    display: none !important;
}
.mobile-gamepad[data-console="genesis"] .gpad-r1 {
    grid-column: 3 / 4; grid-row: 1 / 2;
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
 *  PS1 / PSP — diamond with iconic shapes, dark blue theme
 * ════════════════════════════════════════════════════════════════════ */
.mobile-gamepad[data-console="psx"] .gpad-abxy,
.mobile-gamepad[data-console="ps1"] .gpad-abxy,
.mobile-gamepad[data-console="psp"] .gpad-abxy {
    width: 144px !important;
    height: 144px !important;
    margin-right: 8px !important;
}
.mobile-gamepad[data-console="psx"] .gpad-action,
.mobile-gamepad[data-console="ps1"] .gpad-action,
.mobile-gamepad[data-console="psp"] .gpad-action {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    border-width: 2px !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    background: radial-gradient(circle at 35% 30%, #2a2a36, #0d0d18 70%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 4px 8px rgba(0,0,0,0.6) !important;
}
/* Iconic Sony shape colors */
.mobile-gamepad[data-console="psx"] .gpad-x,
.mobile-gamepad[data-console="ps1"] .gpad-x,
.mobile-gamepad[data-console="psp"] .gpad-x {
    border-color: #2dc4d6 !important;
    color: #2dc4d6 !important;
}
.mobile-gamepad[data-console="psx"] .gpad-y,
.mobile-gamepad[data-console="ps1"] .gpad-y,
.mobile-gamepad[data-console="psp"] .gpad-y {
    border-color: #ff70d8 !important;
    color: #ff70d8 !important;
}
.mobile-gamepad[data-console="psx"] .gpad-a,
.mobile-gamepad[data-console="ps1"] .gpad-a,
.mobile-gamepad[data-console="psp"] .gpad-a {
    border-color: #ff5566 !important;
    color: #ff5566 !important;
}
.mobile-gamepad[data-console="psx"] .gpad-b,
.mobile-gamepad[data-console="ps1"] .gpad-b,
.mobile-gamepad[data-console="psp"] .gpad-b {
    border-color: #5be09a !important;
    color: #5be09a !important;
}
/* Override the printed letters with the iconic shapes */
.mobile-gamepad[data-console="psx"] .gpad-x::before,
.mobile-gamepad[data-console="ps1"] .gpad-x::before,
.mobile-gamepad[data-console="psp"] .gpad-x::before { content: '△'; }
.mobile-gamepad[data-console="psx"] .gpad-y::before,
.mobile-gamepad[data-console="ps1"] .gpad-y::before,
.mobile-gamepad[data-console="psp"] .gpad-y::before { content: '□'; }
.mobile-gamepad[data-console="psx"] .gpad-a::before,
.mobile-gamepad[data-console="ps1"] .gpad-a::before,
.mobile-gamepad[data-console="psp"] .gpad-a::before { content: '○'; }
.mobile-gamepad[data-console="psx"] .gpad-b::before,
.mobile-gamepad[data-console="ps1"] .gpad-b::before,
.mobile-gamepad[data-console="psp"] .gpad-b::before { content: '✕'; }
.mobile-gamepad[data-console="psx"] .gpad-action,
.mobile-gamepad[data-console="ps1"] .gpad-action,
.mobile-gamepad[data-console="psp"] .gpad-action { font-size: 0 !important; }
.mobile-gamepad[data-console="psx"] .gpad-action::before,
.mobile-gamepad[data-console="ps1"] .gpad-action::before,
.mobile-gamepad[data-console="psp"] .gpad-action::before {
    font-size: 24px;
    line-height: 1;
}
.mobile-gamepad[data-console="psx"] .gpad-y,
.mobile-gamepad[data-console="ps1"] .gpad-y,
.mobile-gamepad[data-console="psp"] .gpad-y { left: 8px !important; }
.mobile-gamepad[data-console="psx"] .gpad-a,
.mobile-gamepad[data-console="ps1"] .gpad-a,
.mobile-gamepad[data-console="psp"] .gpad-a { right: 8px !important; }
/* Show L2/R2 for PS1/PSP */
.mobile-gamepad[data-console="psx"] .gpad-l2,
.mobile-gamepad[data-console="psx"] .gpad-r2,
.mobile-gamepad[data-console="ps1"] .gpad-l2,
.mobile-gamepad[data-console="ps1"] .gpad-r2,
.mobile-gamepad[data-console="psp"] .gpad-l2,
.mobile-gamepad[data-console="psp"] .gpad-r2 {
    display: inline-flex !important;
}

/* ════════════════════════════════════════════════════════════════════
 *  NDS — diamond ABXY (right), shoulders, no second screen sim
 * ════════════════════════════════════════════════════════════════════ */
.mobile-gamepad[data-console="nds"] .gpad-abxy {
    width: 150px !important;
    height: 150px !important;
    margin-right: 8px !important;
}
.mobile-gamepad[data-console="nds"] .gpad-action {
    background: radial-gradient(circle at 35% 30%, #d8d8e6, #6a6a7a 70%) !important;
    border-color: #fff !important;
    color: #1a1a22 !important;
    font-weight: 900 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        0 3px 6px rgba(0,0,0,0.55) !important;
}
.mobile-gamepad[data-console="nds"] .gpad-y { left: 8px !important; }
.mobile-gamepad[data-console="nds"] .gpad-a { right: 8px !important; }

/* ════════════════════════════════════════════════════════════════════
 *  Sega Master System / Game Gear — two buttons, no shoulders
 * ════════════════════════════════════════════════════════════════════ */
.mobile-gamepad[data-console="segaMS"] .gpad-shoulders,
.mobile-gamepad[data-console="segaGG"] .gpad-shoulders,
.mobile-gamepad[data-console="gamegear"] .gpad-shoulders { display: none !important; }
.mobile-gamepad[data-console="segaMS"] .gpad-x,
.mobile-gamepad[data-console="segaMS"] .gpad-y,
.mobile-gamepad[data-console="segaGG"] .gpad-x,
.mobile-gamepad[data-console="segaGG"] .gpad-y,
.mobile-gamepad[data-console="gamegear"] .gpad-x,
.mobile-gamepad[data-console="gamegear"] .gpad-y { display: none !important; }
.mobile-gamepad[data-console="segaMS"] .gpad-abxy,
.mobile-gamepad[data-console="segaGG"] .gpad-abxy,
.mobile-gamepad[data-console="gamegear"] .gpad-abxy {
    width: 150px !important;
    height: 70px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
}
.mobile-gamepad[data-console="segaMS"] .gpad-b,
.mobile-gamepad[data-console="segaMS"] .gpad-a,
.mobile-gamepad[data-console="segaGG"] .gpad-b,
.mobile-gamepad[data-console="segaGG"] .gpad-a,
.mobile-gamepad[data-console="gamegear"] .gpad-b,
.mobile-gamepad[data-console="gamegear"] .gpad-a {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border-width: 2px !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    background: radial-gradient(circle at 35% 30%, #44e0ff, #0066b3 70%) !important;
    border-color: #6deaff !important;
    color: #fff !important;
}
.mobile-gamepad[data-console="segaMS"] .gpad-b,
.mobile-gamepad[data-console="segaGG"] .gpad-b,
.mobile-gamepad[data-console="gamegear"] .gpad-b { order: 1 !important; }
.mobile-gamepad[data-console="segaMS"] .gpad-a,
.mobile-gamepad[data-console="segaGG"] .gpad-a,
.mobile-gamepad[data-console="gamegear"] .gpad-a { order: 2 !important; }

/* ════════════════════════════════════════════════════════════════════
 *  D-PAD — Authentic plus-shape with center hub
 * ════════════════════════════════════════════════════════════════════
 *  Real D-pads are a single rocker carved from one piece of plastic,
 *  not 4 isolated buttons floating in a circle. We rebuild the look
 *  here with:
 *    1. A solid plus-shaped backplate (drawn with two CSS bars)
 *    2. Each direction button shaped like a rectangle with rounded
 *       outer edge, sitting flush with the next button
 *    3. A raised center hub so the cross looks 3D
 *    4. Diagonal hit zones so the user can press up+right etc.
 *  ──────────────────────────────────────────────────────────────── */
.mobile-gamepad .gpad-dpad {
    width: 144px !important;
    height: 144px !important;
    position: relative;
    flex-shrink: 0;
    /* Subtle bevel under the cross */
    background:
        radial-gradient(circle at 50% 50%, rgba(0,0,0,0.45) 0%, transparent 50%);
}

/* Plus-shape backplate (horizontal + vertical bars) */
.mobile-gamepad .gpad-dpad::before,
.mobile-gamepad .gpad-dpad::after {
    content: '';
    position: absolute;
    background: linear-gradient(180deg, #2c2c36, #15151c 70%, #08080c);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.18),
        inset 0 -2px 4px rgba(0,0,0,0.55),
        0 4px 8px rgba(0,0,0,0.6);
    border-radius: 14px;
    pointer-events: none;
    z-index: 0;
}
/* Horizontal bar (left ↔ right) */
.mobile-gamepad .gpad-dpad::before {
    top: 50%;
    left: 6px;
    right: 6px;
    height: 48px;
    transform: translateY(-50%);
}
/* Vertical bar (up ↕ down) */
.mobile-gamepad .gpad-dpad::after {
    left: 50%;
    top: 6px;
    bottom: 6px;
    width: 48px;
    transform: translateX(-50%);
}

/* Center hub — the round bump in the middle of the cross */
.mobile-gamepad .gpad-dpad-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), transparent 65%),
        linear-gradient(180deg, #353540, #1a1a22 80%);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.18),
        0 1px 2px rgba(0,0,0,0.6);
    pointer-events: none;
    z-index: 2;
}

/* Each direction button — rectangular, fits inside its bar arm */
.mobile-gamepad .gpad-dpad .gpad-dir {
    width: 48px !important;
    height: 48px !important;
    border-radius: 0 !important;        /* shape comes from the parent bar */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(255,255,255,0.92);
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
    /* Slightly bigger touch target than the visual */
}

/* Position each direction inside the cross — they sit flush with the
   center hub so the cross looks like one piece. */
.mobile-gamepad .gpad-dpad .gpad-up {
    top: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
}
.mobile-gamepad .gpad-dpad .gpad-down {
    bottom: 6px !important;
    left: 50% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
}
.mobile-gamepad .gpad-dpad .gpad-left {
    left: 6px !important;
    top: 50% !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    border-top-left-radius: 14px !important;
    border-bottom-left-radius: 14px !important;
}
.mobile-gamepad .gpad-dpad .gpad-right {
    right: 6px !important;
    top: 50% !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    border-top-right-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
}

/* Pressed state — actual button glow inside the bar */
.mobile-gamepad .gpad-dpad .gpad-dir.is-active,
.mobile-gamepad .gpad-dpad .gpad-dir:active {
    background: linear-gradient(180deg, var(--gpad-accent, #e00050), rgba(0,0,0,0.4)) !important;
    color: #fff !important;
    box-shadow:
        inset 0 0 18px rgba(0,0,0,0.55),
        0 0 16px var(--gpad-accent, #e00050) !important;
}
.mobile-gamepad .gpad-dpad .gpad-up.is-active,
.mobile-gamepad .gpad-dpad .gpad-up:active     { transform: translateX(-50%) translateY(2px) !important; }
.mobile-gamepad .gpad-dpad .gpad-down.is-active,
.mobile-gamepad .gpad-dpad .gpad-down:active   { transform: translateX(-50%) translateY(-2px) !important; }
.mobile-gamepad .gpad-dpad .gpad-left.is-active,
.mobile-gamepad .gpad-dpad .gpad-left:active   { transform: translateY(-50%) translateX(2px) !important; }
.mobile-gamepad .gpad-dpad .gpad-right.is-active,
.mobile-gamepad .gpad-dpad .gpad-right:active  { transform: translateY(-50%) translateX(-2px) !important; }

/* ════════════════════════════════════════════════════════════════════
 *  Landscape adjustments — keep authenticity but rebalance sizes
 * ════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape),
       (max-width: 950px) and (orientation: landscape) {
    body[data-orientation="landscape"] #mobileControls.mobile-gamepad:not(.og-pad-owned) {
        top: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 0 !important;
    }
    body[data-orientation="landscape"] #mobileControls.mobile-gamepad:not(.og-pad-owned) .gpad-main {
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
    }
    body[data-orientation="landscape"] .mobile-gamepad .gpad-dpad,
    body[data-orientation="landscape"] .mobile-gamepad .gpad-abxy {
        width: 132px !important;
        height: 132px !important;
        opacity: 0.85;
        top: auto !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
    body[data-orientation="landscape"] .mobile-gamepad .gpad-action,
    body[data-orientation="landscape"] .mobile-gamepad .gpad-dir {
        width: 48px !important;
        height: 48px !important;
    }
    /* GB / GBC / GBA / NES / SMS need the angled / row layout to stay
       readable in landscape — keep but slightly smaller. */
    body[data-orientation="landscape"] .mobile-gamepad[data-console="nes"] .gpad-abxy,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="gb"] .gpad-abxy,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="gbc"] .gpad-abxy,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="gba"] .gpad-abxy,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="segaMS"] .gpad-abxy,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="segaGG"] .gpad-abxy,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="gamegear"] .gpad-abxy {
        width: 140px !important;
        height: 60px !important;
        gap: 10px !important;
    }
    body[data-orientation="landscape"] .mobile-gamepad[data-console="nes"] .gpad-b,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="nes"] .gpad-a,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="gb"] .gpad-b,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="gb"] .gpad-a,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="gbc"] .gpad-b,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="gbc"] .gpad-a,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="gba"] .gpad-b,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="gba"] .gpad-a,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="segaMS"] .gpad-b,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="segaMS"] .gpad-a,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="segaGG"] .gpad-b,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="segaGG"] .gpad-a,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="gamegear"] .gpad-b,
    body[data-orientation="landscape"] .mobile-gamepad[data-console="gamegear"] .gpad-a {
        width: 52px !important;
        height: 52px !important;
        font-size: 16px !important;
    }
    /* Genesis 6-button stays 3×2 grid but smaller */
    body[data-orientation="landscape"] .mobile-gamepad[data-console="genesis"] .gpad-abxy {
        width: 152px !important;
        height: 96px !important;
        grid-template-columns: repeat(3, 44px) !important;
        grid-template-rows: repeat(2, 44px) !important;
    }
    body[data-orientation="landscape"] .mobile-gamepad[data-console="genesis"] .gpad-action {
        width: 44px !important;
        height: 44px !important;
        font-size: 12px !important;
    }
}

/* ────────────────────────────────────────────────────────────────────
 *  Very small phones (≤360px wide) — keep buttons reachable
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
    .mobile-gamepad .gpad-dpad,
    .mobile-gamepad .gpad-abxy {
        width: 124px !important;
        height: 124px !important;
    }
    .mobile-gamepad .gpad-dir,
    .mobile-gamepad .gpad-action {
        width: 44px !important;
        height: 44px !important;
        font-size: 16px !important;
    }
    .mobile-gamepad[data-console="snes"] .gpad-action,
    .mobile-gamepad[data-console="psx"] .gpad-action,
    .mobile-gamepad[data-console="ps1"] .gpad-action,
    .mobile-gamepad[data-console="psp"] .gpad-action,
    .mobile-gamepad[data-console="n64"] .gpad-action,
    .mobile-gamepad[data-console="nds"] .gpad-action {
        width: 44px !important;
        height: 44px !important;
    }
}

/* Mobile portrait fit: keep every visible console button inside 390px
   phones while preserving the per-console shape. */
@media (max-width: 430px) and (min-width: 361px) {
    .mobile-gamepad[data-console="nes"] .gpad-abxy,
    .mobile-gamepad[data-console="segaMS"] .gpad-abxy,
    .mobile-gamepad[data-console="segaGG"] .gpad-abxy,
    .mobile-gamepad[data-console="gamegear"] .gpad-abxy {
        width: 140px !important;
        gap: 10px !important;
    }
    .mobile-gamepad[data-console="nes"] .gpad-a,
    .mobile-gamepad[data-console="nes"] .gpad-b {
        width: 58px !important;
        height: 54px !important;
    }
    .mobile-gamepad[data-console="gb"] .gpad-abxy,
    .mobile-gamepad[data-console="gbc"] .gpad-abxy,
    .mobile-gamepad[data-console="gba"] .gpad-abxy {
        width: 144px !important;
        gap: 10px !important;
    }
    .mobile-gamepad[data-console="gb"] .gpad-a,
    .mobile-gamepad[data-console="gb"] .gpad-b,
    .mobile-gamepad[data-console="gbc"] .gpad-a,
    .mobile-gamepad[data-console="gbc"] .gpad-b,
    .mobile-gamepad[data-console="gba"] .gpad-a,
    .mobile-gamepad[data-console="gba"] .gpad-b,
    .mobile-gamepad[data-console="segaMS"] .gpad-a,
    .mobile-gamepad[data-console="segaMS"] .gpad-b,
    .mobile-gamepad[data-console="segaGG"] .gpad-a,
    .mobile-gamepad[data-console="segaGG"] .gpad-b,
    .mobile-gamepad[data-console="gamegear"] .gpad-a,
    .mobile-gamepad[data-console="gamegear"] .gpad-b {
        width: 56px !important;
        height: 56px !important;
    }
    .mobile-gamepad[data-console="psx"] .gpad-abxy,
    .mobile-gamepad[data-console="ps1"] .gpad-abxy,
    .mobile-gamepad[data-console="psp"] .gpad-abxy {
        width: 150px !important;
        height: 150px !important;
    }
    .mobile-gamepad[data-console="psx"] .gpad-action,
    .mobile-gamepad[data-console="ps1"] .gpad-action,
    .mobile-gamepad[data-console="psp"] .gpad-action {
        width: 50px !important;
        height: 50px !important;
    }
}

@media (max-width: 360px) {
    .mobile-gamepad[data-console="snes"] .gpad-abxy,
    .mobile-gamepad[data-console="psx"] .gpad-abxy,
    .mobile-gamepad[data-console="ps1"] .gpad-abxy,
    .mobile-gamepad[data-console="psp"] .gpad-abxy,
    .mobile-gamepad[data-console="nds"] .gpad-abxy {
        width: 132px !important;
        height: 132px !important;
    }
    .mobile-gamepad[data-console="snes"] .gpad-action,
    .mobile-gamepad[data-console="psx"] .gpad-action,
    .mobile-gamepad[data-console="ps1"] .gpad-action,
    .mobile-gamepad[data-console="psp"] .gpad-action,
    .mobile-gamepad[data-console="nds"] .gpad-action {
        width: 42px !important;
        height: 42px !important;
    }
    .mobile-gamepad[data-console="n64"] .gpad-abxy {
        width: 140px !important;
        height: 132px !important;
    }
    .mobile-gamepad[data-console="n64"] .gpad-a,
    .mobile-gamepad[data-console="n64"] .gpad-b {
        width: 42px !important;
        height: 42px !important;
    }
    .mobile-gamepad[data-console="n64"] .gpad-c {
        width: 40px !important;
        height: 40px !important;
        font-size: 12px !important;
    }
    .mobile-gamepad[data-console="nes"] .gpad-abxy,
    .mobile-gamepad[data-console="gb"] .gpad-abxy,
    .mobile-gamepad[data-console="gbc"] .gpad-abxy,
    .mobile-gamepad[data-console="gba"] .gpad-abxy,
    .mobile-gamepad[data-console="segaMS"] .gpad-abxy,
    .mobile-gamepad[data-console="segaGG"] .gpad-abxy,
    .mobile-gamepad[data-console="gamegear"] .gpad-abxy {
        width: 132px !important;
        height: 64px !important;
        gap: 8px !important;
    }
    .mobile-gamepad[data-console="nes"] .gpad-a,
    .mobile-gamepad[data-console="nes"] .gpad-b,
    .mobile-gamepad[data-console="gb"] .gpad-a,
    .mobile-gamepad[data-console="gb"] .gpad-b,
    .mobile-gamepad[data-console="gbc"] .gpad-a,
    .mobile-gamepad[data-console="gbc"] .gpad-b,
    .mobile-gamepad[data-console="gba"] .gpad-a,
    .mobile-gamepad[data-console="gba"] .gpad-b,
    .mobile-gamepad[data-console="segaMS"] .gpad-a,
    .mobile-gamepad[data-console="segaMS"] .gpad-b,
    .mobile-gamepad[data-console="segaGG"] .gpad-a,
    .mobile-gamepad[data-console="segaGG"] .gpad-b,
    .mobile-gamepad[data-console="gamegear"] .gpad-a,
    .mobile-gamepad[data-console="gamegear"] .gpad-b {
        width: 52px !important;
        height: 52px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════
 *  Defensive: kill ALL EmulatorJS native virtual-gamepad overlays
 * ════════════════════════════════════════════════════════════════════
 *  Our v4 mobile pad replaces them. Without this rule users on touch
 *  devices saw both pads stacked: the EJS native overlay and our new
 *  per-console pad on top of it.
 */
.ejs_virtualGamepad_parent,
.ejs_virtualGamepad_top,
.ejs_virtualGamepad_bottom,
.ejs_virtualGamepad_left,
.ejs_virtualGamepad_right,
.ejs_virtualGamepad_button,
.ejs_virtualGamepad_open,
html.og-native-virtual-pad-off .ejs_virtualGamepad_parent,
html.og-native-virtual-pad-off .ejs_virtualGamepad_top,
html.og-native-virtual-pad-off .ejs_virtualGamepad_bottom,
html.og-native-virtual-pad-off .ejs_virtualGamepad_left,
html.og-native-virtual-pad-off .ejs_virtualGamepad_right,
html.og-native-virtual-pad-off .ejs_virtualGamepad_button,
html.og-native-virtual-pad-off .ejs_virtualGamepad_open,
html.og-native-virtual-pad-off .ejs_dpad_main,
html.og-native-virtual-pad-off .ejs_dpad_horizontal,
html.og-native-virtual-pad-off .ejs_dpad_vertical,
html.og-native-virtual-pad-off .ejs_dpad_bar,
html.og-native-virtual-pad-off .ejs_virtualGamepad_parent .nipple,
html.og-native-virtual-pad-off .ejs_virtualGamepad_parent .back,
html.og-native-virtual-pad-off .ejs_virtualGamepad_parent .front,
html.og-native-virtual-pad-off #game [class*="ejs_virtualGamepad"],
html.og-native-virtual-pad-off #game [class*="ejs_dpad"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    overflow: hidden !important;
}