/* DexHacks sandbox UI — progress bar, edge-to-edge, separated emulator layout */

.dh-progress-host {
    display: block;
    margin: 10px 0 12px;
    width: 100%;
}

.dh-progress-track {
    height: 6px;
    background: #27272a;
    border-radius: 999px;
    overflow: hidden;
}

.dh-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #059669, #34d399);
    border-radius: 999px;
    transition: width 0.35s ease;
}

.dh-progress-host.is-error .dh-progress-bar {
    background: linear-gradient(90deg, #b91c1c, #f87171);
}

.dh-progress-host.is-done .dh-progress-bar {
    background: #34d399;
}

.dh-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.3;
}

.dh-progress-label {
    color: #a1a1aa;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dh-progress-eta {
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dh-progress-host.is-error .dh-progress-label { color: #fca5a5; }
.dh-progress-host.is-done .dh-progress-label { color: #34d399; }

/* Sandbox layout */
.sandbox-terminal {
    border-color: #10b981 !important;
    margin-bottom: 16px;
    padding: 16px !important;
}

.sandbox-terminal .card-title {
    color: #10b981;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 8px;
    gap: 8px;
    font-size: 15px;
}

.sandbox-emu-first { order: -1; margin: 0 0 12px !important; border-radius: 8px; }
.sandbox-controls { display: flex; flex-direction: column; gap: 12px; }

.sandbox-method-2 {
    border: 1px dashed #27272a;
    border-radius: 8px;
    padding: 0;
    background: #131316;
}

.sandbox-method-2 > summary {
    cursor: pointer;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #cbd5e1;
    list-style: none;
    user-select: none;
}

.sandbox-method-2 > summary::-webkit-details-marker { display: none; }
.sandbox-method-2 > summary::before { content: "▸ "; color: #94a3b8; }
.sandbox-method-2[open] > summary::before { content: "▾ "; }
.sandbox-method-2-body { padding: 0 14px 14px; border-top: 1px dashed #27272a; }

#cloud-stream-btn, .hero-stream-btn { width: 100%; }

body.dh-game-active { overscroll-behavior: auto; }

body.dh-mobile-sandbox.dh-game-active.dh-ui-locked {
    overflow: hidden !important;
    width: 100%;
}

body.dh-mobile-sandbox.dh-game-active.dh-ui-unlocked {
    overflow-y: auto !important;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

/* ── Separated console: viewport (top) + touch dock (bottom) ── */
.dh-emu-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.dh-emu-shell.dh-layout-split {
    border-radius: 0;
}

.dh-emu-viewport .ejs_settings_parent,
.dh-emu-viewport .ejs_menu_bar,
.dh-emu-viewport .ejs_virtualGamepad_open,
.dh-emu-viewport .ejs_context_menu {
    display: none !important;
    pointer-events: none !important;
}

/* When the custom-pad Menu button is active, unhide the native EJS menu /
   settings layer so the user can access Save/Load/Controls/Cheats/Settings.
   Higher specificity + !important beats the hide rules above. */
body.dh-menu-open .ejs_menu_bar,
body.dh-menu-open .ejs_settings_parent,
body.dh-menu-open .ejs_context_menu,
body.dh-menu-open .ejs_popup_container {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    z-index: 60;
}
body.dh-menu-open .dh-tap-start {
    z-index: 40 !important;
}

/* Viewport: fixed 4:3 box so canvas always has real pixels */
#emulator-container.dh-emu-viewport,
.dh-emu-viewport {
    width: 100% !important;
    aspect-ratio: 4 / 3;
    max-height: 40vh;
    min-height: 220px;
    position: relative !important;
    background: #000;
    overflow: hidden;
    flex: 0 0 auto;
}

#emulator-container #game-container,
.dh-emu-viewport #game-container,
.dh-emu-viewport > #home-emulator-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

#game-container .ejs_parent,
#game-container .ejs_canvas_parent,
#home-emulator-container .ejs_parent,
#home-emulator-container .ejs_canvas_parent {
    width: 100% !important;
    height: 100% !important;
    background: #000 !important;
}

/* iOS: the official loader renders the game + native pad + ads INSIDE a
   cross-origin iframe (https://www.emulatorjs.com/embed/content.html).
   The parent page cannot style the iframe's internal layout (cross-origin),
   but it CAN size the iframe tag itself. Clamp the iframe height to roughly
   the game-canvas region so the native pad below it is visually clipped;
   our custom pad (driven via emu.simulateInput, which IS reachable across
   origins via the home-window EJS_emulator handle) covers input instead.

   The iframe sits inside .dh-emu-viewport (#home-emulator-container) which
   is already a 4:3 box; we make the iframe fill the box and rely on
   overflow:hidden to clip the loader's lower-everything (pad + ad). */
.dh-mobile-sandbox.dh-game-active iframe#ejs-content-frame,
.dh-emu-viewport iframe#ejs-content-frame,
#home-emulator-container iframe#ejs-content-frame,
#game-container iframe#ejs-content-frame {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border: 0 !important;
    display: block !important;
}

/* The viewport box clips the iframe's overflow so the in-iframe native pad
   below the canvas is cut off rather than overlapping the page. */
body.dh-mobile-sandbox.dh-game-active .dh-emu-viewport,
#home-emulator-container.dh-emu-viewport {
    overflow: hidden !important;
}

/* Do NOT force width/height on canvas — breaks WebGL framebuffer sizing */
#game-container canvas.ejs_canvas,
#home-emulator-container canvas.ejs_canvas {
    image-rendering: pixelated;
    display: block !important;
    margin: 0 auto !important;
    max-width: 100%;
    max-height: 100%;
}

body.dh-mobile-sandbox.dh-game-active .ejs_menu_bar,
body.dh-mobile-sandbox.dh-game-active .ejs_start_button {
    display: none !important;
}

/* Mobile player mode (body.dh-mobile-player): canvas-first layout.
   The DexHacks custom touch dock is disabled because the official loader's
   virtual gamepad lives inside a cross-origin iframe we cannot reach from the
   parent page — any parent-side pad is dead weight. Instead, let the iframe
   fill the first viewport so the game canvas is fully visible and users
   interact via the in-iframe EJS touch controls. The touch dock stays hidden. */
body.dh-mobile-player .dh-touch-dock,
body.dh-mobile-player .emulator-touch-controls {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
}

body.dh-mobile-player.dh-game-active .dh-emu-shell,
body.dh-mobile-player.dh-game-active .dh-emu-viewport,
body.dh-mobile-player.dh-game-active #emulator-container.dh-emu-viewport,
body.dh-mobile-player.dh-game-active #home-emulator-container.dh-emu-viewport {
    width: 100% !important;
    max-height: 78vh !important;
    min-height: 60vh !important;
    aspect-ratio: auto !important;
    flex: 1 1 auto;
}

body.dh-mobile-player.dh-game-active iframe#ejs-content-frame,
body.dh-mobile-player iframe#ejs-content-frame {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
}

body.dh-mobile-sandbox .ejs_popup_container,
body.dh-mobile-sandbox .dh-emu-viewport .ejs_popup_container {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.dh-layout-split #emulator-container .ejs_virtualGamepad_parent,
.dh-layout-split #game-container .ejs_virtualGamepad_parent,
.dh-layout-split #home-emulator-container .ejs_virtualGamepad_parent {
    display: none !important;
}

.dh-tap-start .dh-tap-sub {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

.dh-white-hint {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 40;
    max-width: 92%;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(16, 185, 129, 0.45);
    color: #d4d4d8;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
}

/* Tap-to-start overlay (fallback if audio still locked) */
.dh-tap-start {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.88);
    color: #fff;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    padding: 24px;
    -webkit-tap-highlight-color: transparent;
}

.dh-tap-start strong {
    font-size: 22px;
    color: #34d399;
}

.dh-tap-start span {
    font-size: 13px;
    color: #a1a1aa;
}

.dh-tap-note,
.dh-tap-timer {
    color: #f4f4f5 !important;
}

.dh-tap-timer {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dh-tap-start-ios {
    z-index: 80 !important;
    background: rgba(0, 0, 0, 0.92);
    border: 2px solid rgba(52, 211, 153, 0.55);
}

.dh-tap-start-waiting {
    pointer-events: none !important;
    cursor: wait;
    opacity: 0.88;
}

.dh-tap-start-blocking {
    pointer-events: auto !important;
    cursor: wait;
}

.dh-tap-start-waiting strong {
    color: #a1a1aa;
    animation: none;
}

.dh-tap-start-ready {
    pointer-events: auto !important;
    cursor: pointer;
}

.dh-tap-start-ready strong {
    color: #34d399;
    animation: dh-tap-pulse 1.4s ease-in-out infinite;
}

@keyframes dh-tap-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.03); }
}

/* Custom mobile GBA pad — flex grid layout (no overlapping) */
.dh-custom-pad.dh-touch-dock,
.emulator-touch-controls.dh-custom-pad {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    background: #111214 !important;
    border-top: 2px solid #10b981;
    box-shadow: 0 -6px 28px rgba(16, 185, 129, 0.18);
    padding: 0 !important;
    margin-top: 0 !important;
    touch-action: manipulation !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box;
    overflow: visible;
    flex: 0 0 auto;
}

.dh-dock-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dh-lock-toggle {
    -webkit-appearance: none;
    appearance: none;
    align-self: center;
    flex: 0 0 auto;
    margin: 0 auto 2px;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.12);
    color: #a7f3d0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    max-width: 96%;
}

.dh-lock-hint {
    margin: 0 0 4px;
    padding: 0 8px;
    text-align: center;
    font-size: 10px;
    line-height: 1.35;
    color: #94a3b8;
}

.dh-pad-expand {
    display: none;
    width: 100%;
    min-height: 48px;
    height: 48px;
    border: none;
    border-top: 2px solid #10b981;
    background: #111214;
    color: #34d399;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    align-items: center;
    justify-content: center;
    padding: 0 12px max(8px, env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.dh-custom-pad.dh-pad-collapsed {
    min-height: 48px !important;
    height: auto !important;
    padding-bottom: 0 !important;
    touch-action: manipulation !important;
    position: sticky;
    bottom: 0;
    z-index: 30;
}

.dh-custom-pad.dh-pad-collapsed .dh-dock-body {
    display: none !important;
}

.dh-custom-pad.dh-pad-collapsed .dh-pad-expand {
    display: flex;
}

.dh-pad-stage {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 256px;
    height: 100%;
    padding: 8px 14px 6px;
    box-sizing: border-box;
    gap: 6px;
}

.dh-pad-shoulders {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    gap: 12px;
}

.dh-pad-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1 1 auto;
    min-height: 130px;
    padding: 0 2px;
    gap: 12px;
}

.dh-pad-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex: 0 0 auto;
    padding-top: 2px;
    padding-bottom: 4px;
}

/* Center menu cluster (Restart / Pause / Menu) between L and R */
.dh-pad-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
}

.dh-menu-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}

.dh-menu-restart { border-color: #f59e0b; color: #fcd34d; }
.dh-menu-pause { border-color: #38bdf8; color: #bae6fd; }
.dh-menu-open { border-color: #a78bfa; color: #ddd6fe; }

.dh-face-group {
    position: relative;
    width: 118px;
    height: 108px;
    flex: 0 0 auto;
}

.dh-btn {
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid rgba(16, 185, 129, 0.65);
    background: rgba(255, 255, 255, 0.12);
    color: #f4f4f5;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.35), inset 0 0 8px rgba(16, 185, 129, 0.1);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    transition: box-shadow 0.1s, transform 0.08s, background 0.1s;
}

.dh-btn-active {
    background: rgba(16, 185, 129, 0.35) !important;
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.9) !important;
    transform: scale(0.94);
}

.dh-btn-l,
.dh-btn-r {
    min-width: 72px;
    height: 44px;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 700;
    flex: 0 0 auto;
}

.dh-dpad {
    position: static;
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    gap: 4px;
    flex: 0 0 auto;
    transform: none;
}

.dh-dpad-sp,
.dh-dpad-mid {
    width: 50px;
    height: 50px;
}

.dh-dpad-btn {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
}

.dh-face-a {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 800;
    border-color: #10b981;
}

.dh-face-b {
    position: absolute;
    left: 4px;
    top: 8px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    border-color: #a1a1aa;
}

.dh-btn-select,
.dh-btn-start {
    min-width: 78px;
    height: 40px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    position: static;
}

/* Legacy EJS pad hidden when using custom pad */
.dh-layout-split .ejs_virtualGamepad_parent {
    display: none !important;
}

/* iOS: when the native gamepad is repositioned into our dock host, keep it
   visible (overrides the scoped hide above with higher specificity) and
   constrain it to the dock area so it no longer covers the game canvas.
   This body class is added only AFTER the pad is moved post-start, so the
   boot-phase pad lifecycle is untouched. */
body.dh-ios-native-pad .dh-native-vpad-host {
    width: 100%;
    min-height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
}
body.dh-ios-native-pad .dh-native-vpad-host .ejs_virtualGamepad_parent,
body.dh-ios-native-pad .dh-native-vpad-host .ejs_virtualGamepad {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 60vh !important;
    overflow: visible !important;
}
body.dh-ios-native-pad .dh-native-vpad-host .ejs_virtualGamepad {
    touch-action: manipulation;
}

body.dh-mobile-sandbox.dh-game-active .ejs_virtualGamepad_parent,
body.dh-mobile-sandbox.dh-game-active .ejs_virtualGamepad_open {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* PC desktop — hide DexHacks custom touch dock (mobile-only scaffolding);
   the EmulatorJS native gamepad + its own "Show/Hide gamepad" pill live in
   the cross-origin iframe and are managed by EJS, so leave them alone. */
.dh-emu-shell.dh-desktop-mode .dh-touch-dock,
.dh-emu-shell.dh-desktop-mode .emulator-touch-controls {
    display: none !important;
}

.dh-keyboard-hint {
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    margin: 6px 10px 0;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .dh-keyboard-hint { display: none; }

    body.dh-mobile-sandbox {
        padding: 0 0 16px !important;
        height: auto !important;
        min-height: 100%;
    }

    body.dh-mobile-sandbox.dh-ui-unlocked {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.dh-mobile-sandbox .dh-emu-shell.dh-layout-split .dh-emu-viewport,
    body.dh-mobile-sandbox #emulator-container.dh-emu-viewport {
        max-height: 38vh;
        min-height: 200px;
        width: 100%;
        aspect-ratio: 4 / 3;
    }

    /* Make sure the custom-pad dock has enough room to show ALL GBA buttons on
       iOS — previously only L/R/Up/Start/Restart/Menu were visible, the rest
       (Down/Left/Right/A/B/Select + the rest of the pad) got clipped. */
    body.dh-mobile-sandbox.dh-game-active .dh-custom-pad.dh-touch-dock {
        min-height: 300px !important;
    }

    body.dh-mobile-sandbox .sandbox-controls {
        position: relative;
        z-index: 1;
    }

    body.dh-mobile-sandbox .global-navbar {
        margin: 0 0 8px !important;
        padding: 0 12px !important;
        width: 100% !important;
    }

    body.dh-mobile-sandbox .container,
    body.dh-mobile-sandbox .hub-container {
        max-width: 100% !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }

    body.dh-mobile-sandbox .sandbox-terminal,
    body.dh-mobile-sandbox .hero-sandbox-panel {
        padding: 10px 0 0 !important;
        margin-bottom: 12px !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        border-top: 2px solid #10b981;
        border-bottom: none;
    }

    body.dh-mobile-sandbox .sandbox-terminal .card-title,
    body.dh-mobile-sandbox .hero-sandbox-header {
        padding: 0 10px;
    }

    body.dh-mobile-sandbox .sandbox-controls,
    body.dh-mobile-sandbox .dh-progress-host,
    body.dh-mobile-sandbox .sandbox-method-2 {
        margin-left: 10px;
        margin-right: 10px;
    }

    body.dh-mobile-sandbox .emu-wrapper,
    body.dh-mobile-sandbox .hero-emu-frame,
    body.dh-mobile-sandbox .sandbox-emu-first,
    body.dh-mobile-sandbox .dh-emu-shell {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    body.dh-mobile-sandbox .cta-box,
    body.dh-mobile-sandbox .pseo-container,
    body.dh-mobile-sandbox .legal-note,
    body.dh-mobile-sandbox .site-footer,
    body.dh-mobile-sandbox .hero-sandbox-footnote,
    body.dh-mobile-sandbox h2:first-of-type {
        padding-left: 12px;
        padding-right: 12px;
    }

    body.dh-mobile-sandbox h2.mission-page-title {
        font-size: 18px;
        padding: 8px 12px 0;
        margin: 0;
    }

    .dh-emu-shell.dh-layout-split .dh-touch-dock {
        padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    }
}

@media (min-width: 769px) {
    .dh-emu-shell.dh-layout-split .dh-emu-viewport,
    .dh-emu-shell.dh-layout-split #home-emulator-container.dh-emu-viewport {
        aspect-ratio: 4 / 3;
        max-height: 480px;
        width: 100%;
    }
}