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

/* ENHANCEMENT: Error Boundary and Logger Styles */
.error-boundary-message,
.safe-mode-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(220, 53, 69, 0.95);
    color: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    max-width: 90vw;
    text-align: center;
}

.error-boundary-message .error-content,
.safe-mode-message .safe-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.error-boundary-message h3,
.safe-mode-message h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.error-boundary-message button,
.safe-mode-message button {
    background: white;
    color: #dc3545;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.error-boundary-message button:hover,
.safe-mode-message button:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
}

.error-go-back-btn {
    background: var(--theme-primary) !important;
    color: white !important;
}

.error-go-back-btn:hover {
    background: var(--theme-primary-dark) !important;
}

/* CSS Custom Properties for Mobile-First Design */
:root {
    /* Screen dimensions - mobile-first */
    --screen-width: min(90vw, 360px);
    --screen-height: min(70vh, 320px);

    /* Desktop screen dimensions - optimized 496x496px square */
    --desktop-container-size: 496px;
    --desktop-screen-size: calc(496px - 80px); /* Account for padding and margins */

    /* Color themes - Kiwi Green (Default) */
    --theme-primary: #8fbc8f;
    --theme-primary-dark: #7aa67a;
    --theme-primary-light: #a5d1a5;
    --theme-primary-rgb: 143, 188, 143;
    --theme-secondary: #4a6b4a;
    --theme-secondary-dark: #3a5a3a;
    --theme-accent: #e8f5e8;
    --theme-accent-dark: #d4e8d4;
    --theme-text: #2d4a2d;
    --theme-text-light: #ffffff;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Premium Tactile Feedback Timing */
    --tactile-press-duration: 0.08s;
    --tactile-release-duration: 0.12s;
    --tactile-hover-duration: 0.2s;
    --tactile-focus-duration: 0.15s;

    /* Premium Easing Curves */
    --ease-press: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-release: cubic-bezier(0.0, 0, 0.2, 1);
    --ease-hover: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Tactile Feedback Scales */
    --scale-press: 0.95;
    --scale-hover: 1.02;
    --scale-focus: 1.01;
    --scale-active: 0.98;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);

    /* Premium Tactile Shadows */
    --shadow-button-rest:
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
    --shadow-button-hover:
        0 6px 12px rgba(0, 0, 0, 0.25),
        0 3px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 3px rgba(255, 255, 255, 0.15),
        0 0 0 1px var(--theme-primary);
    --shadow-button-press:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 -1px 2px rgba(255, 255, 255, 0.05);
    --shadow-button-focus:
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        0 0 0 2px var(--theme-primary),
        0 0 8px rgba(var(--theme-primary-rgb), 0.4);
}

/* Theme Variations */
.theme-kiwi {
    --theme-primary: #8fbc8f;
    --theme-primary-dark: #7aa67a;
    --theme-primary-light: #a5d1a5;
    --theme-primary-rgb: 143, 188, 143;
    --theme-secondary: #4a6b4a;
    --theme-secondary-dark: #3a5a3a;
    --theme-accent: #e8f5e8;
    --theme-accent-dark: #d4e8d4;
    --theme-text: #2d4a2d;
}

.theme-grape {
    --theme-primary: #9370db;
    --theme-primary-dark: #7b5cb8;
    --theme-primary-light: #b19cd9;
    --theme-primary-rgb: 147, 112, 219;
    --theme-secondary: #5d4e75;
    --theme-secondary-dark: #4a3e5f;
    --theme-accent: #f0e8ff;
    --theme-accent-dark: #e0d4f0;
    --theme-text: #3a2a5a;
}

.theme-berry {
    --theme-primary: #dc143c;
    --theme-primary-dark: #c41e3a;
    --theme-primary-light: #e85d7a;
    --theme-primary-rgb: 220, 20, 60;
    --theme-secondary: #8b2635;
    --theme-secondary-dark: #722030;
    --theme-accent: #ffe4e1;
    --theme-accent-dark: #ffd0cc;
    --theme-text: #5a1a1a;
}

.theme-teal {
    --theme-primary: #20b2aa;
    --theme-primary-dark: #1a9b94;
    --theme-primary-light: #4dc5be;
    --theme-primary-rgb: 32, 178, 170;
    --theme-secondary: #2f5f5f;
    --theme-secondary-dark: #254f4f;
    --theme-accent: #e0ffff;
    --theme-accent-dark: #ccf5f5;
    --theme-text: #1a4a4a;
}

.theme-dandelion {
    --theme-primary: #ffd700;
    --theme-primary-dark: #e6c200;
    --theme-primary-light: #ffdf4d;
    --theme-primary-rgb: 255, 215, 0;
    --theme-secondary: #b8860b;
    --theme-secondary-dark: #9a7209;
    --theme-accent: #fffacd;
    --theme-accent-dark: #fff8b8;
    --theme-text: #5a5a00;
}

.theme-atomic {
    --theme-primary: #6a4c93;
    --theme-primary-dark: #5a3c83;
    --theme-primary-light: #8a6cb3;
    --theme-primary-rgb: 106, 76, 147;
    --theme-secondary: #3d2a5c;
    --theme-secondary-dark: #2d1a4c;
    --theme-accent: rgba(224, 208, 240, 0.9);
    --theme-accent-dark: rgba(204, 184, 221, 0.9);
    --theme-text: #1d0a3c;
}

/* Body and Layout */
body {
    font-family: 'JetBrains Mono', monospace;
    background: var(--theme-primary);
    color: var(--theme-text);
    overflow-x: hidden;
    height: 100vh;
    width: 100vw;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Removed safe-area padding to allow gaming container to extend into notch area */
    padding: 0;
    transition: background-color var(--transition-normal);
}

/* Desktop body optimization for centered 496x496 layout */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    body {
        align-items: center;
        padding: 0;
    }
}

/* Mobile Ad Banner */
.mobile-ad-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(0, 0, 0, 0.05);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Hide mobile ad banner on desktop */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .mobile-ad-banner {
        display: none !important;
    }
}

/* Hide mobile ad banner in landscape orientation */
@media (orientation: landscape) {
    .mobile-ad-banner {
        display: none !important;
    }
}

.mobile-ad-banner::before {
    content: "Advertisement Space";
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.7rem;
    text-align: center;
}

/* Gaming Container - Mobile-first with desktop optimization */
.gaming-container {
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        linear-gradient(145deg, var(--theme-primary), var(--theme-primary-dark));
    border-radius: 24px;
    box-shadow:
        0 0 0 8px var(--theme-primary-dark),
        0 12px 32px rgba(0, 0, 0, 0.4),
        inset 0 2px 6px rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 1vh;
    margin-bottom: 60px;
    width: calc(100vw - 20px);
    max-width: 380px;
    height: calc(100vh - 2vh - 60px);
    min-height: 650px;
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
}

/* Keep gaming container and screen size permanent - only adjust button positioning */

/* Desktop gaming container optimization - perfect 496x496 square */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .gaming-container {
        width: 496px !important;
        height: 496px !important;
        max-width: 496px !important;
        min-height: 496px !important;
        margin: 0 auto !important;
        margin-bottom: 0 !important;
        padding: var(--spacing-md) !important;
    }
}

/* Game Screen */
.game-screen {
    width: calc(100% - 40px);
    height: 280px;
    max-width: 320px;
    background-color: var(--theme-secondary);
    border: 12px solid var(--theme-secondary);
    border-radius: 12px;
    margin: 20px auto 20px auto;
    position: relative;
    flex-shrink: 0;
    box-shadow:
        inset 0 0 0 6px var(--theme-secondary-dark),
        inset 0 4px 8px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Advertisement Overlay */
.advertisement-overlay {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    background-color: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1300;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    user-select: none;
    text-align: center;
    font-family: inherit;
}

.advertisement-overlay div {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    padding: 0.5rem;
}

/* Ensure advertisement overlay doesn't conflict with existing game loader */
.game-loader {
    z-index: 1250 !important; /* Below advertisement overlay */
}

/* Hide advertisement overlay when not in loading state */
.game-player-screen:not(.loading) .advertisement-overlay {
    display: none !important;
}

/* Ensure overlay is above all game elements but below critical UI */
.advertisement-overlay {
    /* Ensure proper stacking context */
    isolation: isolate;
}

/* Save/Load State Educational Overlay */
.save-load-state-overlay {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    background-color: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    font-size: 1.0rem;
    font-weight: 500;
    border-radius: 8px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1350;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    pointer-events: auto;
    user-select: none;
    text-align: center;
    font-family: inherit;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
}

/* Button styles removed - using div elements with inline styles for better control */

/* Hide any browser developer tools elements that might appear in the overlay */
.save-load-state-overlay .__web-inspector-hide-shortcut__,
.save-load-state-overlay [class*="web-inspector"],
.save-load-state-overlay [class*="hide-shortcut"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.save-load-state-overlay svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Responsive font scaling for different screen sizes */
@media (max-width: 320px) {
    .advertisement-overlay {
        font-size: 0.9rem !important;
    }

    .save-load-state-overlay {
        font-size: 0.85rem !important;
        padding: 12px !important;
        /* Ensure content fits on very small screens */
        line-height: 1.2 !important;
    }

    .save-load-state-overlay svg {
        width: 32px !important;
        height: 32px !important;
    }
}

@media (min-width: 321px) and (max-width: 480px) {
    .advertisement-overlay {
        font-size: 1.0rem !important;
    }

    .save-load-state-overlay {
        font-size: 0.95rem !important;
        padding: 16px !important;
        line-height: 1.3 !important;
    }

    .save-load-state-overlay svg {
        width: 36px !important;
        height: 36px !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .advertisement-overlay {
        font-size: 1.2rem !important;
    }

    .save-load-state-overlay {
        font-size: 1.1rem !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .advertisement-overlay {
        font-size: 1.4rem !important;
    }

    .save-load-state-overlay {
        font-size: 1.25rem !important;
    }
}

@media (min-width: 1025px) {
    .advertisement-overlay {
        font-size: 1.6rem !important;
    }

    .save-load-state-overlay {
        font-size: 1.4rem !important;
    }
}

.game-screen::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    background-color: var(--theme-accent);
    border-radius: 6px;
    z-index: 1;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Moboretro Integration Styles */
#emulator-container {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    z-index: 2;
    border-radius: 6px;
    overflow: hidden;
}

#emulator-container #game {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

#emulator-container canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    border-radius: 6px;
}

/* UNIFIED CANVAS SIZING FIX: Comprehensive solution for all high-DPI devices */
/* Prevents tiny canvas display and ensures consistent sizing across all devices */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
    #game canvas,
    .ejs_canvas,
    #emulator-container canvas {
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        transform: scale(1) !important; /* Prevent any scaling conflicts */
        image-rendering: auto !important; /* Ensure proper rendering */
    }
}

/* ENHANCED FIX: Additional protection for devices with canvas sizing issues */
/* Applies to any device where JavaScript has detected canvas problems */
#game canvas.tiny-canvas-fix,
.ejs_canvas.tiny-canvas-fix,
#emulator-container canvas.tiny-canvas-fix {
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: scale(1) !important;
    position: relative !important;
    z-index: 1 !important;
}

    /* Only adjust game-screen when canvas issues are detected */
    .game-screen.portrait-canvas-fix {
        max-width: none !important; /* Remove 320px constraint only when needed */
        height: auto !important; /* Remove fixed 280px height only when needed */
        min-height: 280px !important;
        width: calc(100% - 40px) !important;
        margin: 20px auto !important;
    }

    /* Only adjust gaming container when canvas issues are detected */
    .gaming-container.portrait-canvas-fix {
        min-height: 350px !important;
    }

    /* Only adjust emulator container when canvas issues are detected */
    #emulator-container.portrait-canvas-fix {
        min-height: 250px !important;
        height: 100% !important;
    }
}

/* Moboretro Loading Text Improvements for Mobile/Tablet */
#emulator-container .ejs_loading_text {
    font-size: 14px !important;
    white-space: nowrap !important;
    max-width: calc(100% - 20px) !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Responsive loading text sizing */
@media (max-width: 480px) {
    #emulator-container .ejs_loading_text {
        font-size: 11px !important;
        bottom: 15px !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #emulator-container .ejs_loading_text {
        font-size: 13px !important;
        bottom: 18px !important;
    }
}

@media (min-width: 769px) {
    #emulator-container .ejs_loading_text {
        font-size: 15px !important;
        bottom: 25px !important;
    }
}

#emulator-container .ejs_loading_text_glow {
    background-color: rgba(0, 0, 0, 0.85) !important;
    border-radius: 12px !important;
    padding: 4px 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* Moboretro Error Display */
.emulator-error {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme-accent);
    border-radius: 6px;
}

.emulator-error .error-content {
    text-align: center;
    color: var(--text-primary);
    padding: 20px;
}

.emulator-error h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: var(--theme-primary);
}

.emulator-error p {
    margin: 0 0 15px 0;
    font-size: 14px;
    opacity: 0.8;
}

.emulator-error button {
    background: var(--theme-primary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.emulator-error button:hover {
    background: var(--theme-primary-dark);
}

.screen-content {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    background-color: var(--theme-accent);
    border-radius: 6px;
    z-index: 2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Screen Branding */
.screen-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.screen-branding .screen-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--theme-text);
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Main Menu */
.main-menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateX(0);
    transition: all var(--transition-normal);
}

.main-menu.hidden {
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
}

/* Screen States */
.screen-section,
.settings-screen,
.save-screen,
.about-screen,
.games-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(100%);
    transition: all var(--transition-normal);
    overflow: hidden;
}

.screen-section.active,
.settings-screen.active,
.save-screen.active,
.about-screen.active,
.games-screen.active {
    opacity: 1;
    transform: translateX(0);
}

.screen-section.hidden,
.settings-screen.hidden,
.save-screen.hidden,
.about-screen.hidden,
.games-screen.hidden {
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
}

/* Headers removed - using D-pad and ABXY controls for navigation */

.system-info {
    text-align: center;
    font-size: 0.7rem;
    color: var(--theme-text);
    opacity: 0.8;
}



/* Carousel Containers */
.menu-carousel-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* Games Screen Layout - Simplified Structure */
.games-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* Level 1 - Console Categories with Dots and Cards Centered (4% up) */
.games-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    gap: var(--spacing-lg);
    min-height: 0; /* Allow flexbox to work properly */
    transform: translateY(-4%); /* Move category cards 4% up */
}

.games-indicators {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    order: 1; /* Show dots above the card */
}

.game-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--theme-secondary);
    border: 2px solid var(--theme-accent);
    transition: all var(--transition-fast);
    opacity: 0.6;
    cursor: pointer;
}

.game-dot.active {
    background: var(--theme-primary);
    border-color: var(--theme-primary-light);
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(var(--theme-primary-rgb), 0.6);
}

.game-console-display {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2; /* Show card below the dots */
}

/* Game Console Card - Level 1 */
.console-card {
    width: 140px;
    height: 180px;
    background: var(--theme-accent);
    border: 2px solid var(--theme-secondary);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-fast);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* Ensure card is centered within its container */
    margin: 0 auto;
}

.console-card:hover {
    transform: translateY(-2px);
    border-color: var(--theme-primary);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15),
        0 6px 16px rgba(0, 0, 0, 0.4),
        0 0 0 2px var(--theme-primary);
}

.console-card.selected {
    border-color: var(--theme-primary) !important;
    background: var(--theme-accent-dark) !important;
    transform: scale(1.05) !important;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1),
        0 0 0 3px var(--theme-primary),
        0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

.console-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
    position: relative;
    background: var(--theme-secondary);
}

.console-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Console Icon Specific Styles */
.console-thumbnail .console-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--spacing-xs);
    box-sizing: border-box;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: all var(--transition-fast);
}

/* Theme integration for SVG icons */
.console-thumbnail .console-icon {
    /* SVG icons will inherit theme colors through CSS filters */
    filter:
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))
        brightness(1.1)
        contrast(1.1);
}

.console-card:hover .console-icon {
    filter:
        drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3))
        brightness(1.2)
        contrast(1.2)
        saturate(1.1);
    transform: scale(1.05);
}

.console-card.selected .console-icon {
    filter:
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4))
        brightness(1.3)
        contrast(1.3)
        saturate(1.2);
    transform: scale(1.1);
}

/* Console Fallback Styles */
.console-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    color: var(--theme-text);
    background: var(--theme-secondary);
    border-radius: var(--radius-sm);
    opacity: 0.8;
    transition: all var(--transition-fast);
}

.console-card:hover .console-fallback {
    opacity: 1;
    transform: scale(1.05);
}

.console-card.selected .console-fallback {
    opacity: 1;
    transform: scale(1.1);
    color: var(--theme-primary);
}

.console-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--theme-text);
    text-align: center;
    line-height: 1.2;
    margin: 0;
    margin-bottom: var(--spacing-xs);
}

.console-game-count {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--theme-text);
    text-align: center;
    opacity: 0.8;
    margin-bottom: var(--spacing-xs);
}

.console-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.console-card:hover .console-overlay {
    opacity: 1;
}

.play-icon {
    font-size: 2rem;
    color: var(--theme-primary);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* ===== SEARCH CARD STYLES ===== */

/* Search Card - Special console card for search functionality */
.console-card.search-card {
    background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-dark) 100%);
    border: 2px solid var(--theme-primary);
}

.console-card.search-card:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: var(--theme-primary);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15),
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 0 2px var(--theme-primary),
        0 0 20px rgba(var(--theme-primary-rgb), 0.3);
}

/* ===== SEARCH SCREEN STYLES ===== */

.search-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--theme-background);
    box-sizing: border-box;
}

.search-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
}

.search-input-container {
    position: relative;
    max-width: 500px;
    margin: 0 auto 3px auto;
}

.search-input-field {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
    background: var(--theme-accent);
    color: var(--theme-text);
    outline: none;
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.search-input-field:focus {
    background: var(--theme-accent-dark);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.2);
}

.search-input-field::placeholder {
    color: var(--theme-text);
    opacity: 0.6;
}

/* .search-icon removed - no longer used after emoji cleanup */

.search-results-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.search-results-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    background: var(--theme-accent);
    /* Removed border to match game screen inner content area */
}

.search-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--theme-text);
    opacity: 0.6;
}

/* .placeholder-icon removed - no longer used after emoji cleanup */

.placeholder-text {
    font-size: 1rem;
    text-align: center;
}

.search-result-item {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-right: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    background: transparent;
    /* Removed border styling for plain text display */
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--theme-text);
    font-size: 0.9rem;
}

.search-result-item:hover,
.search-result-item:focus {
    background: var(--theme-secondary);
    color: var(--theme-primary);
    transform: translateY(-1px);
    outline: none;
}

.search-result-item.selected {
    background: var(--theme-primary);
    color: var(--theme-background);
}

.search-result-content {
    /* Simplified for horizontal text-only layout */
}

.search-result-name {
    font-size: inherit;
    font-weight: 500;
    color: inherit;
    display: inline;
}

.search-result-console {
    font-size: 0.8em;
    color: inherit;
    opacity: 0.7;
    display: inline;
    margin-left: var(--spacing-xs);
}

.search-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--theme-text);
    opacity: 0.6;
}

/* .search-no-results .placeholder-icon removed - no longer used after emoji cleanup */

.search-no-results .placeholder-text {
    font-size: 0.9rem;
}

/* Search Container */
.search-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Search Input Wrapper */
.search-input-wrapper {
    position: relative;
    width: 90%;
    margin-bottom: var(--spacing-sm);
}

/* Search Input */
.search-input {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--theme-secondary);
    border-radius: var(--radius-sm);
    background: var(--theme-background);
    color: var(--theme-text);
    font-size: 0.8rem;
    font-family: inherit;
    outline: none;
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.search-input:focus {
    border-color: var(--theme-primary);
    background: var(--theme-background-light);
    box-shadow:
        0 0 0 2px rgba(var(--theme-primary-rgb), 0.2),
        0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-input::placeholder {
    color: var(--theme-text-muted);
    opacity: 0.7;
}

/* Search Animation */
.search-animation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--theme-primary-rgb), 0.1) 50%,
        transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease-in-out;
    pointer-events: none;
}

.search-input:focus + .search-animation {
    animation: searchGlow 2s ease-in-out infinite;
}

@keyframes searchGlow {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

/* Search Results Container */
.search-results {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    max-height: 300px;
    background: var(--theme-background);
    border: 2px solid var(--theme-primary);
    border-radius: var(--radius-md);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(var(--theme-primary-rgb), 0.2);
    z-index: 1000;
    overflow: hidden;
    transition: all var(--transition-fast);
}

.search-results.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
}

/* Results List */
.results-list {
    max-height: 300px;
    overflow-y: auto;
    padding: var(--spacing-xs);
}

/* Search Result Item - Dropdown specific styles */
.search-results .search-result-item {
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--theme-secondary);
}

.search-results .search-result-item:last-child {
    border-bottom: none;
}

.search-results .search-result-item:hover,
.search-results .search-result-item:focus,
.search-results .search-result-item.selected {
    background: var(--theme-accent);
    border-color: var(--theme-primary);
    transform: translateX(2px);
    outline: none;
}

.search-results .search-result-item.selected {
    background: var(--theme-primary);
    color: var(--theme-background);
}

/* Result Content - Dropdown specific styles */
.search-results .result-name {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 1.2;
}

.search-results .result-console {
    font-size: 0.7rem;
    opacity: 0.8;
    color: var(--theme-text-muted);
}

.search-results .search-result-item.selected .result-console {
    color: rgba(255, 255, 255, 0.8);
}

/* No Results */
.no-results {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--theme-text-muted);
    font-size: 0.8rem;
}

/* More Results Indicator */
.more-results {
    padding: var(--spacing-sm);
    text-align: center;
    color: var(--theme-text-muted);
    font-size: 0.75rem;
    border-top: 1px solid var(--theme-secondary);
    background: var(--theme-accent);
}

/* Card transition animations */
.games-carousel .game-card.slide-in-left {
    animation: slideInLeft 0.3s ease-out forwards;
}

.games-carousel .game-card.slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

.games-carousel .game-card.slide-out-left {
    animation: slideOutLeft 0.3s ease-in forwards;
}

.games-carousel .game-card.slide-out-right {
    animation: slideOutRight 0.3s ease-in forwards;
}

/* Slide Animation Keyframes */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100px);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

/* Carousel indicators removed - using games-indicators for navigation */

.indicator-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--theme-secondary);
    border: 2px solid var(--theme-accent);
    cursor: pointer;
    transition: all var(--transition-fast);
    opacity: 0.6;
    transform: scale(0.8);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.2);
}

.indicator-dot:hover {
    opacity: 0.8;
    transform: scale(0.9);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.15),
        0 3px 6px rgba(0, 0, 0, 0.25);
}

.indicator-dot.active {
    background: var(--theme-primary);
    border-color: var(--theme-primary-light);
    opacity: 1;
    transform: scale(1);
    box-shadow:
        0 0 0 2px var(--theme-primary),
        0 0 12px rgba(var(--theme-primary-rgb), 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

.indicator-dot.active:hover {
    box-shadow:
        0 0 0 2px var(--theme-primary),
        0 0 16px rgba(var(--theme-primary-rgb), 0.8),
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        0 5px 10px rgba(0, 0, 0, 0.35);
}

.menu-carousel {
    /* Grid layout will be applied by JavaScript */
    width: 100%;
    height: 100%;
}

/* Card Styles */
.card {
    width: 80px;
    height: 80px;
    background: var(--theme-accent-dark);
    border: 2px solid var(--theme-secondary);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card.selected {
    transform: scale(1.1);
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px var(--theme-primary), var(--shadow-lg);
    z-index: 10;
}

.card.carousel-left, .card.carousel-right {
    opacity: 0.7;
    transform: scale(0.9);
}

.card.selecting {
    animation: cardSelect 0.2s ease-in-out;
}

@keyframes cardSelect {
    0% { transform: scale(1.1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1.1); }
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: var(--spacing-xs);
}

.card-icon {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xs);
}

.card-title, .card-text {
    font-size: 0.6rem;
    font-weight: 600;
    text-align: center;
    color: var(--theme-text);
    line-height: 1.2;
}

.card-description {
    font-size: 0.5rem;
    color: var(--theme-text);
    opacity: 0.8;
    text-align: center;
    margin-top: var(--spacing-xs);
}

/* Main Card Grid Layout */
.main-card-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    height: 100% !important;
    padding: 8px;
    align-items: stretch !important;
    justify-content: stretch !important;
    box-sizing: border-box;
}

/* Main Card Specific Styles */
.main-card {
    width: 100% !important;
    height: 100% !important;
    min-width: 100px;
    min-height: 100px;
    background: var(--theme-accent);
    border: 2px solid var(--theme-secondary);
    border-radius: 8px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15);
}

.main-card:hover {
    border-color: var(--theme-primary);
    background: linear-gradient(145deg, var(--theme-accent), var(--theme-accent-dark));
}

/* Enhanced main card gaming button feedback */
.main-card.gaming-button:hover {
    background: linear-gradient(145deg, var(--theme-accent), var(--theme-accent-dark));
    border-color: var(--theme-primary);
}

.main-card.gaming-button:active {
    background: linear-gradient(145deg, var(--theme-accent-dark), var(--theme-secondary));
}

.main-card.selected {
    border-color: var(--theme-primary) !important;
    background: var(--theme-accent-dark) !important;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1),
        0 0 0 2px var(--theme-primary),
        0 4px 16px rgba(0, 0, 0, 0.3) !important;
    transform: scale(1.05) !important;
    z-index: 10 !important;
}

/* Ensure non-selected cards don't have selection styles */
.main-card:not(.selected) {
    transform: scale(1) !important;
    z-index: 1 !important;
    border-color: var(--theme-border) !important;
    background: var(--theme-card-bg) !important;
}

.main-card.selecting {
    animation: cardSelect 0.2s ease-out;
}

@keyframes cardSelect {
    0% { transform: scale(1.05); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.05); }
}

.main-card .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px;
    height: 100%;
    width: 100%;
}

.main-card .card-icon {
    font-size: 2.2rem;
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
}

/* Icon container styling */
.main-card .card-icon-container {
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* SVG icon styling */
.main-card .card-icon-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: all var(--transition-fast);
}

/* Inline SVG styling */
.main-card .inline-svg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-card .inline-svg svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Loading indicator */
.icon-loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--theme-primary-light);
    border-top: 2px solid var(--theme-primary);
    border-radius: 50%;
    display: none;
    z-index: 1;
}

.icon-loading-indicator.loading {
    animation: iconSpin 1s linear infinite;
}

@keyframes iconSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Error state styling */
.icon-error-state {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,
        var(--theme-primary-light) 25%,
        transparent 25%,
        transparent 75%,
        var(--theme-primary-light) 75%
    );
    background-size: 4px 4px;
    opacity: 0.3;
    border-radius: 2px;
}

/* Thumbnail loading states */
.thumbnail-loading-state {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    border-radius: inherit;
}

.thumbnail-loading-indicator {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--theme-primary-light);
    border-top: 2px solid var(--theme-primary);
    border-radius: 50%;
    animation: iconSpin 1s linear infinite;
}

.thumbnail-error-state {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,
        var(--theme-primary-light) 25%,
        transparent 25%,
        transparent 75%,
        var(--theme-primary-light) 75%
    );
    background-size: 6px 6px;
    opacity: 0.2;
    border-radius: 2px;
}

/* Enhanced placeholder for game thumbnails */
.game-thumbnail-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        var(--theme-secondary) 0%,
        var(--theme-accent) 50%,
        var(--theme-secondary) 100%);
    background-size: 200% 200%;
    animation: shimmer 2s ease-in-out infinite;
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text);
    opacity: 0.7;
    font-size: 2rem;
    z-index: 0;
}

/* Optimized lazy loading styles for mobile performance */
.lazy-image {
    background: linear-gradient(135deg,
        var(--theme-accent) 0%,
        var(--theme-primary-light) 50%,
        var(--theme-accent) 100%);
    background-size: 200% 200%;
    transition: opacity 0.3s ease-in-out;
}

.lazy-image.loading {
    animation: shimmer 2s ease-in-out infinite;
    opacity: 0.8;
}

.lazy-image.loaded {
    animation: none;
    opacity: 1;
}

.lazy-image.error {
    background: linear-gradient(45deg,
        var(--theme-primary-light) 25%,
        transparent 25%,
        transparent 75%,
        var(--theme-primary-light) 75%);
    background-size: 8px 8px;
    opacity: 0.3;
}

@keyframes shimmer {
    0% { background-position: 200% 200%; }
    50% { background-position: 0% 0%; }
    100% { background-position: 200% 200%; }
}

.game-thumbnail-placeholder.loading {
    animation: shimmer 2s ease-in-out infinite;
}

.game-thumbnail-placeholder.loaded {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* Improved game image loading states */
.game-image-carousel {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.game-image-carousel.loaded {
    opacity: 1;
}

/* Hover effects for both SVG and fallback icons */
.main-card:hover .card-icon-svg,
.main-card:hover .card-icon-fallback {
    transform: scale(1.1);
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
}

/* Selected state effects */
.main-card.selected .card-icon-svg,
.main-card.selected .card-icon-fallback {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

.main-card .card-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--theme-text);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    line-height: 1;
}

/* Grid position classes for visual feedback */
.main-card.top-left {
    grid-area: 1 / 1;
}

.main-card.top-right {
    grid-area: 1 / 2;
}

.main-card.bottom-left {
    grid-area: 2 / 1;
}

.main-card.bottom-right {
    grid-area: 2 / 2;
}

/* Responsive adjustments for main cards */
@media (max-width: 480px) {
    .main-card .card-icon {
        font-size: 1.8rem !important;
    }

    .main-card .card-icon-svg {
        width: 1.8rem !important;
        height: 1.8rem !important;
    }

    .main-card .card-icon-fallback {
        font-size: 1.8rem !important;
    }

    .main-card .card-title {
        font-size: 0.65rem !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .main-card .card-icon {
        font-size: 2rem !important;
    }

    .main-card .card-icon-svg {
        width: 2rem !important;
        height: 2rem !important;
    }

    .main-card .card-icon-fallback {
        font-size: 2rem !important;
    }

    .main-card .card-title {
        font-size: 0.7rem !important;
    }
}

/* Game Card Specific Styles */
.game-card {
    width: 120px;
    height: 140px;
    flex-direction: column;
    background: var(--theme-accent);
    border: 2px solid var(--theme-secondary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15);
}

.game-card:hover {
    transform: translateY(-2px);
    border-color: var(--theme-primary);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 0 0 1px var(--theme-primary);
}

.game-card.selected {
    border-color: var(--theme-primary) !important;
    background: var(--theme-accent-dark) !important;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1),
        0 0 0 2px var(--theme-primary),
        0 4px 16px rgba(0, 0, 0, 0.3) !important;
    transform: scale(1.05) !important;
    z-index: 10 !important;
}

.game-card .card-content {
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure game cards are properly sized and visible */
.games-carousel .game-card.main-card {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.games-carousel .game-card.main-card.active {
    display: flex !important;
}

.card-thumbnail {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    margin-bottom: var(--spacing-sm);
    flex-shrink: 0;
}

.card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.game-card .card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text);
    text-align: center;
    line-height: 1.2;
    margin-top: var(--spacing-sm);
    flex-shrink: 0;
    margin-top: var(--spacing-xs);
}

.thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.thumbnail-placeholder {
    width: 100%;
    height: 100%;
    background: var(--theme-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--theme-text-light);
}

.card-info {
    text-align: center;
    flex: 1;
}

.card-platform {
    font-size: 0.5rem;
    color: var(--theme-text);
    opacity: 0.7;
}

.card-genre {
    font-size: 0.5rem;
    color: var(--theme-text);
    opacity: 0.6;
}

.card-year {
    font-size: 0.5rem;
    color: var(--theme-text);
    opacity: 0.6;
}

.card-rating {
    margin-top: var(--spacing-xs);
}

.rating-stars {
    display: flex;
    justify-content: center;
    gap: 1px;
}

.star {
    font-size: 0.6rem;
    color: #ffd700;
}

.star.empty {
    color: var(--theme-text);
    opacity: 0.3;
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.game-card:hover .card-overlay {
    opacity: 1;
}

.play-button {
    color: var(--theme-text-light);
    font-size: 2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--theme-text);
    opacity: 0.7;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
}

.empty-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.empty-description {
    font-size: 0.8rem;
    text-align: center;
    opacity: 0.8;
}

/* Branding */
.branding-text {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--theme-text-light), var(--theme-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--theme-text-light); /* fallback for browsers that don't support background-clip */
    margin-top: calc(var(--spacing-md) * 0.5); /* Move 5% up by reducing margin */
    letter-spacing: 2px;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(255, 255, 255, 0.1);
    filter: drop-shadow(0 0 6px var(--theme-primary));
    position: relative;
    transform: translateY(-5%); /* Additional 5% upward movement */
    transition: all var(--transition-normal);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.branding-text:hover {
    filter: drop-shadow(0 0 12px var(--theme-primary));
    transform: translateY(-5%) scale(1.02);
}

/* Mobile Controls - Responsive to prevent screen overlay */
.mobile-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: var(--spacing-xl);
    margin-top: auto;
    transform: translateY(-60%); /* Reduced from -80% to prevent overlay */
    transition: transform var(--transition-normal);
    position: relative;
}

/* Mobile Controls Position Classes - Adjusted for smaller screens */
.mobile-controls.position-up {
    transform: translateY(-75%); /* Reduced from -95% */
}

.mobile-controls.position-current {
    transform: translateY(-60%); /* Reduced from -80% */
}

.mobile-controls.position-down {
    transform: translateY(-45%); /* Reduced from -65% */
}

/* Mobile Controls Horizontal Spacing Classes */
.mobile-controls.spacing-close {
    padding-left: calc(var(--spacing-xl) * 1.1); /* Low - closest spacing (same as before) */
    padding-right: calc(var(--spacing-xl) * 1.1);
}

.mobile-controls.spacing-current {
    padding-left: calc(var(--spacing-xl) * 0.8); /* Current - wider spacing (was "High") */
    padding-right: calc(var(--spacing-xl) * 0.8);
}

.mobile-controls.spacing-wide {
    padding-left: calc(var(--spacing-xl) * 0.6); /* High - widest spacing (20% more than old "High") */
    padding-right: calc(var(--spacing-xl) * 0.6);
}

/* Small screen adjustments - only button positioning, keep button sizes permanent */
@media (max-height: 700px) {
    .mobile-controls {
        transform: translateY(-30%) !important;
    }

    .mobile-controls.position-up {
        transform: translateY(-45%) !important;
    }

    .mobile-controls.position-current {
        transform: translateY(-30%) !important;
    }

    .mobile-controls.position-down {
        transform: translateY(-15%) !important;
    }
}

/* Very small screen adjustments - only positioning, maintain button sizes */
@media (max-height: 600px) {
    .mobile-controls {
        transform: translateY(-10%) !important;
    }

    .mobile-controls.position-up {
        transform: translateY(-25%) !important;
    }

    .mobile-controls.position-current {
        transform: translateY(-10%) !important;
    }

    .mobile-controls.position-down {
        transform: translateY(5%) !important;
    }
}

/* Extra small screen adjustments - minimal positioning */
@media (max-height: 500px) {
    .mobile-controls {
        transform: translateY(10%) !important;
    }

    .mobile-controls.position-up {
        transform: translateY(-5%) !important;
    }

    .mobile-controls.position-current {
        transform: translateY(10%) !important;
    }

    .mobile-controls.position-down {
        transform: translateY(25%) !important;
    }
}

/* ===== OPTIMIZED MOBILE VIEWPORT ADJUSTMENTS ===== */
/* Simplified mobile viewport adjustments for better performance */
@media (max-width: 370px) and (min-height: 730px) and (orientation: portrait) {
    .mobile-controls {
        transform: translateY(-30%) !important;
    }

    .mobile-controls.position-up {
        transform: translateY(-45%) !important;
    }

    .mobile-controls.position-down {
        transform: translateY(-15%) !important;
    }

    .shoulder-buttons {
        top: -30px !important;
    }
}

/* Consolidated mobile viewport adjustments */
@media (max-width: 385px) and (min-height: 657px) and (orientation: portrait) {
    .mobile-controls {
        transform: translateY(-30%) !important;
    }

    .mobile-controls.position-up {
        transform: translateY(-45%) !important;
    }

    .mobile-controls.position-down {
        transform: translateY(-15%) !important;
    }

    .shoulder-buttons {
        top: -30px !important;
    }
}

/* ===== NEW MOBILE CONTROLS SYSTEM ===== */





.mode-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    transition: color 0.3s ease;
    min-width: 40px;
    text-align: center;
}

.mode-label.active {
    color: var(--theme-primary);
}







/* Modern mode center dot */
#mobileControlModeToggle.modern-active::after {
    border-radius: 2px;
    transform: scale(0.8);
}

/* Control Mode Containers - Three Mode System */
.control-mode-container {
    display: none;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Mobile-specific instant transitions */
@media (max-width: 480px) {
    .control-mode-container {
        transition: opacity 0.05s ease-out, visibility 0.05s ease-out;
    }
}

/* Tablet and larger screens use normal transitions */
@media (min-width: 481px) {
    .control-mode-container {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

.control-mode-container.active {
    display: flex;
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Mode 1A: D-Pad + ABXY */
.mode1a-controls-container {
    position: relative;
}

.mode1a-controls-container.active {
    position: relative;
}

/* Mode 1B: C-Pad + ABXY */
.mode1b-controls-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.mode1b-controls-container.active {
    position: relative;
}

/* Mode 2: Joystick + ABXY */
.mode2-controls-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.mode2-controls-container.active {
    position: relative;
}

/* Legacy containers (hidden for compatibility) */
.legacy-container {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Modern controls hidden by default (legacy) */
.modern-controls-container {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.modern-controls-container.active {
    display: flex;
    position: relative;
}

/* Classic controls positioning (legacy) */
.classic-controls-container {
    position: relative;
}

.classic-controls-container.active {
    position: relative;
}

/* Smooth mode transitions - MOBILE OPTIMIZED */
.mobile-controls.mode-transitioning {
    pointer-events: none;
}

/* Mobile-specific fast transitions to prevent loading delays */
@media (max-width: 480px) {
    .mobile-controls.mode-transitioning .control-mode-container {
        transition: opacity 0.1s ease-out, visibility 0.1s ease-out;
    }
}

/* Tablet and larger screens use normal transitions */
@media (min-width: 481px) {
    .mobile-controls.mode-transitioning .control-mode-container {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Shoulder Buttons */
.shoulder-buttons {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 120px;
    z-index: 10;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Shoulder buttons hidden state */
.shoulder-buttons.hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.shoulder-buttons[style*="display: none"] {
    display: none !important;
}

.shoulder-btn {
    background: linear-gradient(145deg,
        var(--theme-secondary),
        var(--theme-secondary-dark),
        var(--theme-secondary)
    );
    border: 2px solid var(--theme-primary);
    border-radius: 12px 12px 4px 4px;
    color: var(--theme-text-light);
    font-size: 1rem;
    font-weight: 700;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(var(--theme-primary-rgb), 0.3);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.4),
        0 3px 6px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    width: 60px;
    height: 44px;
    min-width: 60px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* Premium textured appearance with theme color accents */
    background-image:
        linear-gradient(45deg, transparent 25%, rgba(var(--theme-primary-rgb), 0.1) 25%, rgba(var(--theme-primary-rgb), 0.1) 50%, transparent 50%, transparent 75%, rgba(var(--theme-primary-rgb), 0.1) 75%),
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    background-size: 4px 4px, 100% 100%;


}

/* D-Pad Container */
.mobile-dpad-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* C-Pad Container - identical to D-Pad */
.mobile-cpad-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-cpad {
    display: grid;
    grid-template-columns: 36px 36px 36px;
    grid-template-rows: 36px 36px 36px;
    gap: 4px;
    width: 116px;
    height: 116px;
    position: relative;
}

/* C-pad border - identical to D-pad */
.mobile-cpad::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 2px solid var(--theme-primary);
    border-radius: 12px;
    background: linear-gradient(145deg,
        rgba(var(--theme-primary-rgb), 0.1),
        rgba(var(--theme-primary-rgb), 0.05)
    );
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    z-index: -1;
    pointer-events: none;
}

.cpad-btn {
    background: linear-gradient(145deg,
        var(--theme-secondary),
        var(--theme-secondary-dark),
        var(--theme-secondary)
    );
    border: 2px solid var(--theme-primary);
    color: #000000; /* BLACK ARROWS - only difference from D-Pad */
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 0 8px rgba(var(--theme-primary-rgb), 0.3);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* Premium matte finish with subtle texture - identical to D-Pad */
    background-image:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, transparent 25%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%, transparent 50%);
    background-size: 100% 100%, 3px 3px;
}

/* Directional-specific border radius for C-pad - identical to D-Pad */
.cpad-up {
    grid-column: 2;
    grid-row: 1;
    border-radius: 8px 8px 4px 4px;
}

.cpad-left {
    grid-column: 1;
    grid-row: 2;
    border-radius: 8px 4px 4px 8px;
}

.cpad-center {
    grid-column: 2;
    grid-row: 2;
    background: transparent;
    pointer-events: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* C-pad center circle - identical to D-Pad */
.cpad-center::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg,
        var(--theme-primary),
        var(--theme-primary-light),
        var(--theme-primary),
        var(--theme-primary-dark)
    );
    border: 1px solid var(--theme-primary-dark);
    border-radius: 50%;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

.cpad-right {
    grid-column: 3;
    grid-row: 2;
    border-radius: 4px 8px 8px 4px;
}

.cpad-down {
    grid-column: 2;
    grid-row: 3;
    border-radius: 4px 4px 8px 8px;
}

/* Inner dark areas for realistic depth - identical to D-Pad */
.cpad-btn::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: linear-gradient(145deg,
        rgba(var(--theme-primary-rgb), 0.1),
        rgba(0, 0, 0, 0.2)
    );
    border-radius: inherit;
    pointer-events: none;
}

.mobile-dpad {
    display: grid;
    grid-template-columns: 36px 36px 36px;
    grid-template-rows: 36px 36px 36px;
    gap: 4px;
    width: 116px;
    height: 116px;
    position: relative;
}

/* D-pad Corner Button - Diamond design (unique gaming shape) */
.dpad-corner-button {
    background: linear-gradient(145deg,
        var(--theme-secondary),
        var(--theme-secondary-dark),
        var(--theme-secondary)
    );
    border: 2px solid var(--theme-primary);
    border-radius: 6px; /* Diamond-like gaming shape - not circular, not square */
    color: var(--theme-text-light);
    font-size: 0.91rem; /* 35% reduction from 1.4rem */
    font-weight: 700;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(var(--theme-primary-rgb), 0.3);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    width: 23px; /* 64% of 36px D-pad button for mobile-first */
    height: 23px; /* 64% of 36px D-pad button for mobile-first */
    min-width: 23px; /* 64% of 36px D-pad button for mobile-first */
    min-height: 23px; /* 64% of 36px D-pad button for mobile-first */
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: start; /* Align to left edge of grid cell for closer positioning */
    align-self: end; /* Align to bottom edge of grid cell for closer positioning */
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    grid-column: 1; /* Bottom-left position */
    grid-row: 3;

    /* CRITICAL: Highest z-index to ensure visibility in ALL modes */
    z-index: 9999 !important;

    /* CSS Protection Rules - Make corner button immune to layout changes */
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    /* Prevent mode transitions from affecting the button */
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Corner button icon styling */
.corner-button-icon {
    position: relative;
    z-index: 2;
    pointer-events: none;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inner depth effect for corner button */
.dpad-corner-button::before {
    content: '';
    position: absolute;
    top: 2px; /* Reduced from 3px to scale with smaller button */
    left: 2px; /* Reduced from 3px to scale with smaller button */
    right: 2px; /* Reduced from 3px to scale with smaller button */
    bottom: 2px; /* Reduced from 3px to scale with smaller button */
    background: linear-gradient(145deg,
        rgba(var(--theme-primary-rgb), 0.1),
        rgba(0, 0, 0, 0.2)
    );
    border-radius: inherit;
    pointer-events: none;
}

/* Corner Button in Mode 2 (Joystick Mode) - Special positioning */
.mode2-controls-container .analog-joystick-container .dpad-corner-button {
    /* Position to match D-pad grid layout: bottom-left corner between left and down positions */
    position: absolute !important;
    bottom: 4px;  /* Closer to container edge for better visual integration */
    left: 4px;    /* Closer to container edge for better visual integration */
    grid-column: unset;
    grid-row: unset;

    /* Ensure it stays visible and clickable */
    z-index: 9999 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* D-pad border - positioned to match button layout */
.mobile-dpad::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 2px solid var(--theme-primary);
    border-radius: 12px;
    background: linear-gradient(145deg,
        rgba(var(--theme-primary-rgb), 0.1),
        rgba(var(--theme-primary-rgb), 0.05)
    );
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    z-index: -1;
    pointer-events: none;
}

.mobile-dpad-btn {
    background: linear-gradient(145deg,
        var(--theme-secondary),
        var(--theme-secondary-dark),
        var(--theme-secondary)
    );
    border: 2px solid var(--theme-primary);
    color: var(--theme-text-light);
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 0 8px rgba(var(--theme-primary-rgb), 0.3);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* Premium matte finish with subtle texture */
    background-image:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, transparent 25%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%, transparent 50%);
    background-size: 100% 100%, 3px 3px;


}

/* Directional-specific border radius for D-pad */
.mobile-dpad-up {
    grid-column: 2;
    grid-row: 1;
    border-radius: 8px 8px 4px 4px;
}

.mobile-dpad-left {
    grid-column: 1;
    grid-row: 2;
    border-radius: 8px 4px 4px 8px;
}

.mobile-dpad-center {
    grid-column: 2;
    grid-row: 2;
    background: transparent;
    pointer-events: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-dpad-right {
    grid-column: 3;
    grid-row: 2;
    border-radius: 4px 8px 8px 4px;
}

.mobile-dpad-down {
    grid-column: 2;
    grid-row: 3;
    border-radius: 4px 4px 8px 8px;
}

/* ===== NEW MODE SWITCH BUTTONS ===== */

/* Base mode switch button styling */
.mode-switch-button {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 36px;
    min-height: 36px;
    background: linear-gradient(145deg,
        var(--theme-secondary),
        var(--theme-secondary-dark)
    );
    border: 2px solid var(--theme-primary);
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    outline: none;
    z-index: 15 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.mode-switch-button:hover {
    transform: scale(1.05);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.mode-switch-button:active,
.mode-switch-button.pressed {
    transform: scale(0.95);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.6),
        inset 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Mode indicator - shows current mode */
.mode-indicator {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--theme-primary);
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

/* Classic mode indicator (square) */
.mode-switch-button[data-mode="classic"] .mode-indicator {
    border-radius: 4px;
    background: var(--theme-primary);
}

/* Modern mode indicator (circle) */
.mode-switch-button[data-mode="modern"] .mode-indicator {
    border-radius: 50%;
    background: var(--theme-primary-dark);
    transform: scale(0.9);
}

/* Controller Configuration Mode Indicators */
.mode-indicator.mode1a {
    border-radius: 4px;
    background: var(--theme-primary);
    transform: scale(1.0);
}

.mode-indicator.mode1b {
    border-radius: 6px;
    background: var(--theme-primary-dark);
    transform: scale(1.1);
}

.mode-indicator.mode2 {
    border-radius: 50%;
    background: var(--theme-accent);
    border: 2px solid var(--theme-primary);
    transform: scale(1.2);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 0 8px rgba(var(--theme-primary-rgb), 0.5);
}

/* Corner button active mode indicator */
.dpad-corner-button.active-mode {
    background: linear-gradient(145deg,
        var(--theme-primary-light),
        var(--theme-primary)
    );
    border-color: var(--theme-primary-light);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1),
        0 0 12px rgba(var(--theme-primary-rgb), 0.4);
}

.dpad-corner-button.active-mode .corner-button-icon {
    color: var(--theme-text-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* CRITICAL: Corner Button Protection Rules - Immune to ALL layout changes */
.dpad-corner-button,
.dpad-corner-button.active-mode,
#dpadCornerButton,
#cpadCornerButton,
#joystickCornerButton {
    /* Force visibility in all scenarios */
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9999 !important;

    /* CRITICAL: Position immunity - only allow safe visual transitions */
    transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;

    /* ABSOLUTE POSITION IMMUNITY: Prevent ANY transform from affecting position */
    transform: none !important;
}

/* Mobile-specific position immunity enforcement */
@media (max-width: 480px) {
    .dpad-corner-button,
    .dpad-corner-button.active-mode,
    .dpad-corner-button.gaming-button,
    .dpad-corner-button.gaming-button.pressing,
    .dpad-corner-button.gaming-button:active,
    .dpad-corner-button.gaming-button:hover,
    .dpad-corner-button.gaming-button:focus,
    #dpadCornerButton,
    #cpadCornerButton,
    #joystickCornerButton {
        /* IMMUTABLE POSITIONING: No visual state can alter position */
        position: absolute !important;
        bottom: 4px !important;
        left: 4px !important;
        transform: none !important;
        margin: 0 !important;
        grid-column: unset !important;
        grid-row: unset !important;
    }
}

/* Prevent mode transitions from hiding corner buttons */
.control-mode-container .dpad-corner-button,
.mode1a-controls-container .dpad-corner-button,
.mode1b-controls-container .dpad-corner-button,
.mode2-controls-container .dpad-corner-button {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
}

/* Override any display:none rules that might affect corner buttons */
.control-mode-container:not(.active) .dpad-corner-button {
    display: none !important;
}

.control-mode-container.active .dpad-corner-button {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Loading ring animation - DISABLED for immediate click behavior */
.loading-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    transform: translate(-50%, -50%);
    border: 3px solid transparent;
    border-radius: 50%;
    opacity: 0 !important; /* Force hidden - no loading animation needed */
    transition: opacity 0.2s ease;
    pointer-events: none;
}

/* Disabled loading ring animation for immediate click behavior */
.mode-switch-button.loading .loading-ring {
    opacity: 0 !important; /* Force hidden - immediate switching doesn't need loading animation */
    border-top-color: transparent;
    animation: none; /* Disable animation */
}

@keyframes loadingProgress {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
        border-top-color: var(--theme-primary);
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    25% {
        transform: translate(-50%, -50%) rotate(90deg);
        border-right-color: var(--theme-primary);
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg);
        border-bottom-color: var(--theme-primary);
    }
    75% {
        transform: translate(-50%, -50%) rotate(270deg);
        border-left-color: var(--theme-primary);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
        border-color: var(--theme-primary);
    }
}

/* Temporary debugging - make buttons more visible */
.mode-switch-button {
    background: linear-gradient(145deg,
        var(--theme-primary),
        var(--theme-primary-dark)
    ) !important;
    border: 3px solid var(--theme-secondary) !important;
}

.mobile-dpad-right {
    grid-column: 3;
    grid-row: 2;
    border-radius: 4px 8px 8px 4px;
}

.mobile-dpad-down {
    grid-column: 2;
    grid-row: 3;
    border-radius: 4px 4px 8px 8px;
}

/* Action Buttons Container */
.mobile-action-buttons-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Analog Joystick Container */
.analog-joystick-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.analog-joystick {
    position: relative;
    width: 116px;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Analog joystick border - square design with rounded corners (like D-pad/ABXY) */
.analog-joystick::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 2px solid var(--theme-primary);
    border-radius: 12px;
    background: linear-gradient(145deg,
        rgba(var(--theme-primary-rgb), 0.1),
        rgba(var(--theme-primary-rgb), 0.05)
    );
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    z-index: -1;
    pointer-events: none;
}

.joystick-boundary {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 2px solid var(--theme-secondary-dark);
    border-radius: 50%;
    background: linear-gradient(145deg,
        var(--theme-secondary),
        var(--theme-secondary-dark)
    );
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 -2px 4px rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.joystick-stick {
    position: absolute;
    width: 32px;
    height: 32px;
    cursor: grab;
    z-index: 3;
    transition: transform 0.1s ease-out;
    transform-origin: center;
}

.joystick-stick.dragging {
    cursor: grabbing;
    transition: none;
}

.joystick-knob {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg,
        var(--theme-primary),
        var(--theme-primary-dark)
    );
    border: 2px solid var(--theme-primary-dark);
    border-radius: 50%;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);

    /* Glossy finish with texture */
    background-image:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
        linear-gradient(45deg, transparent 25%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.1) 75%);
    background-size: 100% 100%, 3px 3px;

    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.joystick-knob::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: var(--theme-primary-dark);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Joystick interaction states */
.joystick-stick:hover .joystick-knob {
    transform: scale(1.05);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.25),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}

.joystick-stick.dragging .joystick-knob {
    transform: scale(0.95);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 3px 6px rgba(0, 0, 0, 0.3);
    background: linear-gradient(145deg,
        var(--theme-primary-dark),
        var(--theme-primary)
    );
}

.mobile-action-buttons {
    display: grid;
    grid-template-columns: 36px 36px 36px;
    grid-template-rows: 36px 36px 36px;
    gap: 4px;
    width: 116px;
    height: 116px;
    position: relative;
}

/* ABXY buttons border - square positioned to match button layout (like D-pad) */
.mobile-action-buttons::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 2px solid var(--theme-primary);
    border-radius: 12px;
    background: linear-gradient(145deg,
        rgba(var(--theme-primary-rgb), 0.1),
        rgba(var(--theme-primary-rgb), 0.05)
    );
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    z-index: -1;
    pointer-events: none;
}

.mobile-action-btn {
    background: linear-gradient(145deg,
        var(--theme-secondary),
        var(--theme-secondary-dark),
        var(--theme-secondary)
    );
    border: 2px solid var(--theme-primary);
    border-radius: 50%;
    color: var(--theme-text-light);
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(var(--theme-primary-rgb), 0.4);
    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.4),
        0 3px 6px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* Premium glossy finish with enhanced shine effect */
    background-image:
        radial-gradient(ellipse at 25% 25%, rgba(255, 255, 255, 0.4) 0%, transparent 60%),
        radial-gradient(circle at center, rgba(var(--theme-primary-rgb), 0.1) 0%, transparent 70%);


}

/* Diamond Layout - Y, X, A, B */
.mobile-action-y { grid-column: 2; grid-row: 1; }
.mobile-action-x { grid-column: 1; grid-row: 2; }
.mobile-action-center {
    grid-column: 2;
    grid-row: 2;
    background: transparent;
    pointer-events: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-action-a { grid-column: 3; grid-row: 2; }
.mobile-action-b { grid-column: 2; grid-row: 3; }

/* ABXY center square */
.mobile-action-center::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg,
        var(--theme-primary),
        var(--theme-primary-light),
        var(--theme-primary),
        var(--theme-primary-dark)
    );
    border: 1px solid var(--theme-primary-dark);
    border-radius: 2px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ABXY Corner Button - Exact copy of dpad corner button design */
.abxy-corner-button {
    background: linear-gradient(145deg,
        var(--theme-secondary),
        var(--theme-secondary-dark),
        var(--theme-secondary)
    );
    border: 2px solid var(--theme-primary);
    border-radius: 6px; /* Diamond-like gaming shape - not circular, not square - EXACT MATCH */
    color: var(--theme-text-light);
    font-size: 0.91rem; /* 35% reduction from 1.4rem - EXACT MATCH */
    font-weight: 700;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(var(--theme-primary-rgb), 0.3);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    width: 23px; /* 64% of 36px D-pad button for mobile-first - EXACT MATCH */
    height: 23px; /* 64% of 36px D-pad button for mobile-first - EXACT MATCH */
    min-width: 23px; /* 64% of 36px D-pad button for mobile-first - EXACT MATCH */
    min-height: 23px; /* 64% of 36px D-pad button for mobile-first - EXACT MATCH */
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: end; /* Align to RIGHT edge of grid cell for bottom-RIGHT positioning */
    align-self: end; /* Align to bottom edge of grid cell for bottom-right positioning */
    position: absolute; /* EXACT MATCH with dpad corner button positioning */
    bottom: 4px !important; /* EXACT MATCH with dpad corner button */
    right: 4px !important; /* RIGHT side instead of left for bottom-right positioning */
    cursor: pointer;
    user-select: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    grid-column: 3; /* Bottom-RIGHT position (opposite of dpad which is column 1) */
    grid-row: 3;

    /* CRITICAL: Touch handling for mobile devices */
    touch-action: none !important;
    -webkit-tap-highlight-color: transparent;

    /* CRITICAL: Highest z-index to ensure visibility in ALL modes */
    z-index: 9999 !important;

    /* CSS Protection Rules - Make corner button immune to layout changes */
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    /* Prevent mode transitions from affecting the button - EXACT MATCH */
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Inner depth effect for corner button - EXACT MATCH */
.abxy-corner-button::before {
    content: '';
    position: absolute;
    top: 2px; /* Reduced from 3px to scale with smaller button - EXACT MATCH */
    left: 2px; /* Reduced from 3px to scale with smaller button - EXACT MATCH */
    right: 2px; /* Reduced from 3px to scale with smaller button - EXACT MATCH */
    bottom: 2px; /* Reduced from 3px to scale with smaller button - EXACT MATCH */
    background: linear-gradient(145deg,
        rgba(var(--theme-primary-rgb), 0.1),
        rgba(0, 0, 0, 0.2)
    );
    border-radius: inherit;
    pointer-events: none;
}

/* ABXY Corner Button Disabled State (when emulator not running) */
.abxy-corner-button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(50%);
}

.abxy-corner-button.disabled:hover {
    transform: none;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    filter: grayscale(50%);
}

/* Square Toggle Button for ABXY cluster */
.square-toggle-button {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 36px;
    min-height: 36px;
    background: linear-gradient(145deg,
        var(--theme-secondary),
        var(--theme-secondary-dark)
    );
    border: 2px solid var(--theme-primary);
    border-radius: 8px; /* Square with rounded corners */
    cursor: pointer;
    user-select: none;
    outline: none;
    z-index: 15 !important;
    pointer-events: auto !important;
    /* Critical: Use touch-action: none for precise touch control */
    touch-action: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.square-toggle-button:hover {
    transform: scale(1.05);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.square-toggle-button:active,
.square-toggle-button.pressed {
    transform: scale(0.95);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.6),
        inset 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Mobile-specific touch feedback enhancements */
@media (max-width: 768px) {
    .square-toggle-button.pressed {
        transform: scale(0.9) !important;
        transition: transform 0.1s ease-out !important;
        background: linear-gradient(145deg,
            var(--theme-secondary-dark),
            var(--theme-secondary)) !important;
    }

    /* Ensure touch feedback is immediate on mobile */
    .square-toggle-button {
        transition: all 0.1s ease-out !important;
    }
}

/* Square mode indicator - shows current mode */
.square-mode-indicator {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--theme-primary);
    border-radius: 2px; /* Square indicator */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

/* Mode indicators and loading animations removed - square toggle simplified */









/* Responsive sizing for mode switch buttons */
@media (max-width: 480px) {
    .mode-switch-button {
        min-width: 32px;
        min-height: 32px;
    }

    .mode-indicator {
        width: 10px;
        height: 10px;
    }

    .loading-ring {
        border-width: 2px;
        width: calc(100% + 6px);
        height: calc(100% + 6px);
    }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 767px) {
    .mode-switch-button {
        min-width: 34px;
        min-height: 34px;
    }

    .mode-indicator {
        width: 12px;
        height: 12px;
    }

    .loading-ring {
        border-width: 2.5px;
        width: calc(100% + 7px);
        height: calc(100% + 7px);
    }
}

/* Tablet sizing */
@media (min-width: 768px) and (max-width: 1023px) {
    .mode-switch-button {
        min-width: 44px;
        min-height: 44px;
    }

    .mode-indicator {
        width: 16px;
        height: 16px;
    }

    .loading-ring {
        border-width: 4px;
        width: calc(100% + 10px);
        height: calc(100% + 10px);
    }
}

/* Inner dark areas for realistic depth */
.shoulder-btn::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: linear-gradient(145deg,
        rgba(var(--theme-primary-rgb), 0.1),
        rgba(0, 0, 0, 0.2)
    );
    border-radius: 9px 9px 2px 2px;
    pointer-events: none;
}

.mobile-dpad-btn::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: linear-gradient(145deg,
        rgba(var(--theme-primary-rgb), 0.1),
        rgba(0, 0, 0, 0.2)
    );
    border-radius: inherit;
    pointer-events: none;
}

.mobile-action-btn::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: linear-gradient(145deg,
        rgba(var(--theme-primary-rgb), 0.15),
        rgba(0, 0, 0, 0.25)
    );
    border-radius: 50%;
    pointer-events: none;
}



/* ===== INTERACTIVE EFFECTS FOR NEW MOBILE CONTROLS ===== */

/* Hover Effects - Desktop only */
@media (hover: hover) and (pointer: fine) {
    .shoulder-btn.gaming-button:hover,
    .mobile-dpad-btn.gaming-button:hover,
    .mobile-action-btn.gaming-button:hover,
    .cpad-btn.gaming-button:hover {
        background: linear-gradient(145deg,
            var(--theme-primary),
            var(--theme-primary-dark),
            var(--theme-primary)
        );
        border-color: var(--theme-primary-light);
        transform: translateY(-2px) scale(1.02);
        box-shadow:
            0 8px 16px rgba(0, 0, 0, 0.4),
            0 4px 8px rgba(0, 0, 0, 0.3),
            0 0 0 3px rgba(var(--theme-primary-rgb), 0.4),
            inset 0 2px 4px rgba(255, 255, 255, 0.3);

        /* Enhanced glow on hover */
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.8),
            0 0 15px rgba(var(--theme-primary-rgb), 0.8);
    }

    /* Corner button hover - POSITION IMMUNITY: No transform changes allowed */
    .dpad-corner-button.gaming-button:hover {
        background: linear-gradient(145deg,
            var(--theme-primary),
            var(--theme-primary-dark),
            var(--theme-primary)
        );
        border-color: var(--theme-primary-light);
        /* CRITICAL: No transform property - position must remain immutable */
        box-shadow:
            0 8px 16px rgba(0, 0, 0, 0.4),
            0 4px 8px rgba(0, 0, 0, 0.3),
            0 0 0 3px rgba(var(--theme-primary-rgb), 0.4),
            inset 0 2px 4px rgba(255, 255, 255, 0.3);

        /* Enhanced glow on hover */
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.8),
            0 0 15px rgba(var(--theme-primary-rgb), 0.8);
    }

    /* C-Pad hover keeps black arrows */
    .cpad-btn.gaming-button:hover {
        color: #000000;
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.9),
            0 0 8px rgba(0, 0, 0, 0.5);
    }
}

/* Button Press States */
.shoulder-btn.gaming-button.pressing,
.mobile-dpad-btn.gaming-button.pressing,
.mobile-action-btn.gaming-button.pressing,
.cpad-btn.gaming-button.pressing {
    transform: scale(0.95) translateY(1px);
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Corner button press state - POSITION IMMUNITY: No transform changes allowed */
.dpad-corner-button.gaming-button.pressing {
    /* CRITICAL: No transform property - position must remain immutable */
    transition: background 0.1s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.shoulder-btn.gaming-button.pressed,
.mobile-dpad-btn.gaming-button.pressed,
.mobile-action-btn.gaming-button.pressed,
.cpad-btn.gaming-button.pressed,
.dpad-corner-button.gaming-button.pressed {
    transform: scale(0.95) translateY(2px);
    background: linear-gradient(145deg,
        var(--theme-secondary-dark),
        var(--theme-primary),
        var(--theme-secondary-dark)
    );
    border-color: var(--theme-primary-light);
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.6),
        inset 0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 -1px 2px rgba(var(--theme-primary-rgb), 0.3);
    transition: all 0.05s cubic-bezier(0.4, 0, 0.2, 1);

    /* Enhanced glow effect when pressed */
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 0 12px rgba(var(--theme-primary-rgb), 0.6);
}

/* ===== SELECT AND START BUTTONS ===== */
.select-start-buttons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: var(--spacing-lg);
    z-index: 1000;
    pointer-events: none;
}

.select-btn, .start-btn {
    width: 60px;
    height: 30px;
    background: linear-gradient(145deg,
        var(--theme-secondary),
        var(--theme-secondary-dark)
    );
    border: 2px solid var(--theme-primary);
    border-radius: 8px;
    color: var(--theme-text);
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    position: relative;
    overflow: hidden;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: all;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

.select-btn:hover, .start-btn:hover {
    background: linear-gradient(145deg,
        var(--theme-accent),
        var(--theme-accent-dark)
    );
    border-color: var(--theme-primary-light);
    transform: translateY(-1px);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.5),
        0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 3px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.select-btn.pressing, .start-btn.pressing {
    transform: scale(0.95) translateY(1px);
    background: linear-gradient(145deg,
        var(--theme-secondary-dark),
        var(--theme-accent-dark)
    );
    border-color: var(--theme-primary);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.6),
        inset 0 2px 6px rgba(0, 0, 0, 0.4);
}

.select-btn.pressed, .start-btn.pressed {
    transform: scale(0.9) translateY(2px);
    background: linear-gradient(145deg,
        var(--theme-accent-dark),
        var(--theme-secondary-dark)
    );
    border-color: var(--theme-primary-dark);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        inset 0 3px 8px rgba(0, 0, 0, 0.5);
}

.select-btn.releasing, .start-btn.releasing {
    transform: scale(1.05) translateY(-2px);
    background: linear-gradient(145deg,
        var(--theme-primary),
        var(--theme-accent)
    );
    border-color: var(--theme-primary-light);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.4);
}

.button-label {
    position: relative;
    z-index: 2;
    pointer-events: none;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
}

/* C-Pad pressed state keeps black arrows */
.cpad-btn.gaming-button.pressed {
    color: #000000;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 0 8px rgba(0, 0, 0, 0.5);
}

.shoulder-btn.gaming-button.releasing,
.mobile-dpad-btn.gaming-button.releasing,
.mobile-action-btn.gaming-button.releasing,
.cpad-btn.gaming-button.releasing {
    transform: scale(1.02) translateY(-1px);
    transition: all 0.2s cubic-bezier(0.0, 0, 0.2, 1);
}

/* Active/Focus States */
.shoulder-btn.gaming-button:active,
.mobile-dpad-btn.gaming-button:active,
.mobile-action-btn.gaming-button:active,
.cpad-btn.gaming-button:active {
    transform: scale(0.95) translateY(2px);
    background: linear-gradient(145deg, var(--theme-secondary-dark), var(--theme-secondary));
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.5),
        inset 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Corner button active state - POSITION IMMUNITY: No transform changes allowed */
.dpad-corner-button.gaming-button:active {
    /* CRITICAL: No transform property - position must remain immutable */
    background: linear-gradient(145deg, var(--theme-secondary-dark), var(--theme-secondary));
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.5),
        inset 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* C-Pad active state keeps black arrows */
.cpad-btn.gaming-button:active {
    color: #000000;
}

/* Focus States for Accessibility */
.shoulder-btn.gaming-button:focus,
.mobile-dpad-btn.gaming-button:focus,
.mobile-action-btn.gaming-button:focus,
.cpad-btn.gaming-button:focus {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
    box-shadow:
        0 0 0 3px rgba(var(--theme-primary-rgb), 0.3),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Disabled States */
.shoulder-btn.gaming-button:disabled,
.mobile-dpad-btn.gaming-button:disabled,
.mobile-action-btn.gaming-button:disabled,
.cpad-btn.gaming-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    pointer-events: none;
}

/* ===== MOBILE NAVIGATION FOCUS STYLES ===== */

/* Mobile focus indicator for settings, save, and about screens */
.mobile-focused {
    outline: 3px solid var(--theme-primary) !important;
    outline-offset: 2px !important;
    box-shadow:
        0 0 0 5px rgba(var(--theme-primary-rgb), 0.3) !important,
        0 4px 12px rgba(0, 0, 0, 0.3) !important;
    background: linear-gradient(145deg,
        rgba(var(--theme-primary-rgb), 0.1),
        rgba(var(--theme-primary-rgb), 0.05)
    ) !important;
    border-radius: 6px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Enhanced focus for different element types */
input.mobile-focused,
select.mobile-focused {
    border-color: var(--theme-primary) !important;
    background: rgba(var(--theme-primary-rgb), 0.1) !important;
}

button.mobile-focused {
    transform: scale(1.05) !important;
    background: linear-gradient(145deg,
        var(--theme-primary),
        var(--theme-primary-dark)
    ) !important;
    color: var(--theme-text-light) !important;
}

/* Focus animation */
@keyframes mobile-focus-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 5px rgba(var(--theme-primary-rgb), 0.3),
            0 4px 12px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow:
            0 0 0 8px rgba(var(--theme-primary-rgb), 0.5),
            0 6px 16px rgba(0, 0, 0, 0.4);
    }
}

.mobile-focused {
    animation: mobile-focus-pulse 2s ease-in-out infinite;
}







/* ===== DESKTOP CONTROLS HIDING ===== */
/* Primary method: Hide mobile controls ONLY on desktop devices with hover and fine pointer */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .mobile-controls,
    #mobile-controls {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Hide all mobile control elements */
    .mobile-dpad-container,
    .mobile-action-buttons-container,
    .mobile-cpad-container,
    .analog-joystick-container,
    .shoulder-buttons,
    .mobile-dpad,
    .mobile-action-buttons,
    .mobile-cpad,
    .analog-joystick,
    .mobile-dpad-btn,
    .mobile-action-btn,
    .cpad-btn,
    .shoulder-btn,
    .mode-switch-button,
    .mode1a-controls-container,
    .mode1b-controls-container,
    .mode2-controls-container {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Optimize gaming container for desktop - fixed 496x496px square */
    .gaming-container {
        width: 496px !important;
        height: 496px !important;
        max-width: 496px !important;
        min-height: 496px !important;
        margin: 1vh auto !important;
        padding: var(--spacing-md) !important;
    }

    /* Optimize game screen for desktop - maximize space within container */
    .game-screen {
        width: calc(100% - 24px) !important;
        height: calc(100% - 80px) !important;
        max-width: none !important;
        margin: 12px auto 12px auto !important;
    }

    /* Advertisement overlay responsive adjustments for desktop */
    .advertisement-overlay {
        font-size: 1.6rem !important; /* Larger font for desktop */
        z-index: 1300 !important; /* Higher z-index for desktop */
    }

    /* Save/Load State overlay responsive adjustments for desktop */
    .save-load-state-overlay {
        font-size: 1.4rem !important; /* Larger font for desktop */
        z-index: 1350 !important; /* Above advertisement overlay */
    }

    /* Desktop Moboretro optimizations */
    #emulator-container {
        border-radius: 8px;
    }

    #emulator-container #game {
        border-radius: 8px;
    }

    #emulator-container canvas {
        border-radius: 8px;
    }
}

/* CONSERVATIVE: Hide controls only on very large desktop screens - with protection for game mode and transitions */
@media (min-width: 1400px) and (hover: hover) and (pointer: fine) {
    /* Only hide if NOT in game mode and NOT during mode transitions */
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mobile-controls,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) #mobile-controls {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .mobile-dpad-container,
    .mobile-action-buttons-container,
    .mobile-cpad-container,
    .analog-joystick-container,
    .control-mode-toggle-container,
    .shoulder-buttons,
    .mobile-dpad,
    .mobile-action-buttons,
    .mobile-cpad,
    .analog-joystick,
    .mobile-dpad-btn,
    .mobile-action-btn,
    .cpad-btn,
    .shoulder-btn,
    .mode1a-controls-container,
    .mode1b-controls-container,
    .mode2-controls-container {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Extra large desktop - maintain 496x496px square */
    .gaming-container {
        width: 496px !important;
        height: 496px !important;
        max-width: 496px !important;
        min-height: 496px !important;
        margin: 1vh auto !important;
        padding: var(--spacing-md) !important;
    }

    .game-screen {
        width: calc(100% - 24px) !important;
        height: calc(100% - 80px) !important;
        max-width: none !important;
        margin: 12px auto 12px auto !important;
    }
}

/* Additional fallback for desktop browsers - only on very large screens with desktop capabilities */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .mobile-controls,
    #mobile-controls {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Only hide individual control elements if NOT in game mode and NOT during mode transitions */
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mobile-dpad-container,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mobile-action-buttons-container,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mobile-cpad-container,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .analog-joystick-container,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .control-mode-toggle-container,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .shoulder-buttons,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mobile-dpad,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mobile-action-buttons,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mobile-cpad,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .analog-joystick,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mobile-dpad-btn,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mobile-action-btn,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .cpad-btn,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .shoulder-btn,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mode1a-controls-container,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mode1b-controls-container,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mode2-controls-container {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Large desktop - maintain 496x496px square */
    .gaming-container {
        width: 496px !important;
        height: 496px !important;
        max-width: 496px !important;
        min-height: 496px !important;
        margin: 1vh auto !important;
        padding: var(--spacing-md) !important;
    }

    .game-screen {
        width: calc(100% - 24px) !important;
        height: calc(100% - 80px) !important;
        max-width: none !important;
        margin: 12px auto 12px auto !important;
    }
}

/* No-JS fallback: Hide controls on desktop-like environments */
.no-js @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .mobile-controls {
        display: none !important;
    }
}

/* CONSERVATIVE: Hide mobile controls only on very large desktop screens - ONLY on true desktop devices */
/* CRITICAL FIX: Much more conservative breakpoint to prevent hiding during mobile/tablet testing */
@media (min-width: 1200px) and (orientation: landscape) and (hover: hover) and (pointer: fine) {
    /* Simplified selector for better performance */
    .mobile-controls {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Show controls when in game mode or during transitions */
    .game-player-active .mobile-controls,
    .corner-button-active .mobile-controls,
    .mode-switching .mobile-controls {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Only hide containers if NOT in game mode and NOT during mode transitions */
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mobile-dpad-container,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mobile-action-buttons-container,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mobile-cpad-container,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .analog-joystick-container,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .control-mode-toggle-container,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .shoulder-buttons,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mode1a-controls-container,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mode1b-controls-container,
    body:not(.game-player-active):not(.corner-button-active):not(.mode-switching) .mode2-controls-container {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Desktop landscape - maintain 496x496px square */
    .gaming-container {
        width: 496px !important;
        height: 496px !important;
        max-width: 496px !important;
        min-height: 496px !important;
        margin: 1vh auto !important;
        padding: var(--spacing-md) !important;
    }

    .game-screen {
        width: calc(100% - 24px) !important;
        height: calc(100% - 80px) !important;
        max-width: none !important;
        margin: 12px auto 12px auto !important;
    }
}

/* Ultra-wide desktop screens (1600px+) */
@media (min-width: 1600px) and (hover: hover) and (pointer: fine) {
    .mobile-controls,
    #mobile-controls {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .mobile-dpad-container,
    .mobile-action-buttons-container,
    .mobile-cpad-container,
    .analog-joystick-container,
    .control-mode-toggle-container,
    .shoulder-buttons,
    .mobile-dpad,
    .mobile-action-buttons,
    .mobile-cpad,
    .analog-joystick,
    .mobile-dpad-btn,
    .mobile-action-btn,
    .cpad-btn,
    .shoulder-btn {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

        /* Ultra-wide desktop - maintain 496x496px square */
    .gaming-container {
        width: 496px !important;
        height: 496px !important;
        max-width: 496px !important;
        min-height: 496px !important;
        margin: 1vh auto !important;
        padding: var(--spacing-md) !important;
    }

    .game-screen {
        width: calc(100% - 24px) !important;
        height: calc(100% - 80px) !important;
        max-width: none !important;
        margin: 12px auto 12px auto !important;
    }
}

/* ===== TABLET MODE LAYOUT ===== */
/* Tablet mode: Split layout with D-pad left center, ABXY right center */
/* Includes mobile devices rotated to landscape */
/* FIXED: Reduced min-height from 400px to 360px to include Samsung S8+ (360px) and iPhone SE (375px) */
/* This ensures these devices get the optimal 380x365px gaming container instead of problematic fallback styles */
@media (orientation: landscape) and (min-height: 360px) and (max-width: 1023px) {
    /* Change body alignment to allow proper bottom positioning */
    body {
        align-items: stretch !important;
        padding: 2vh 0 !important;
    }

    /* Optimal square gaming container for tablet - positioned with exact bottom margin */
    .gaming-container {
        width: 380px !important; /* Optimal size - not too big, not too small */
        height: calc(100vh - 4vh) !important; /* Full height minus top and bottom margins */
        max-width: 380px !important;
        min-height: 365px !important;
        max-height: calc(100vh - 4vh) !important;
        margin: 0 auto !important;
        padding: var(--spacing-md) !important;
        position: relative !important;
        top: 0 !important;
        /* Ensure game container has higher z-index than controls */
        z-index: 1100 !important;
    }

    .game-screen {
        width: calc(100% - 24px) !important;
        height: calc(100% - 50px) !important;
        max-width: none !important;
        margin: 12px auto !important;
        position: relative !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        /* Ensure game screen is above all control overlays */
        z-index: 1200 !important;
        /* Enable touch events on game screen */
        pointer-events: auto !important;
        touch-action: auto !important;
    }

    /* Advertisement overlay responsive adjustments for landscape mobile */
    .advertisement-overlay {
        z-index: 1200 !important; /* Match game screen z-index in landscape */
        font-size: 1.1rem !important; /* Slightly smaller for landscape */
    }

    /* Save/Load State overlay responsive adjustments for landscape mobile */
    .save-load-state-overlay {
        z-index: 1350 !important; /* Above advertisement overlay */
        font-size: 1.0rem !important; /* Slightly smaller for landscape */
        padding: 16px !important;
        /* Ensure proper containment in landscape mode */
        max-width: calc(100% - 4px) !important;
        max-height: calc(100% - 4px) !important;
        overflow: hidden !important;
        line-height: 1.3 !important;
    }

    .save-load-state-overlay svg {
        width: 40px !important;
        height: 40px !important;
    }

    /* Ensure Moboretro canvas and game elements are touchable in landscape mode */
    .game-screen canvas,
    .game-screen #game,
    .game-screen #emulator-container,
    .game-screen .ejs_game,
    .game-screen .ejs_canvas {
        pointer-events: auto !important;
        touch-action: auto !important;
        z-index: 1250 !important;
        position: relative !important;
    }

    /* Mobile ad banner hidden in landscape orientation - removed to allow global landscape rule to take effect */
    /* .mobile-ad-banner {
        display: flex !important;
        height: 50px !important;
        z-index: 999 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        pointer-events: auto !important;
    } */

    /* Move controls higher up on screen - REDUCED z-index to avoid blocking game screen */
    .mobile-controls {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: fixed !important;
        bottom: 120px !important; /* Move much higher above ad banner */
        left: 0 !important;
        right: 0 !important;
        height: 160px !important; /* Increased height for better spacing */
        background: transparent !important;
        backdrop-filter: none !important;
        border: none !important;
        padding: 0 !important;
        transform: none !important;
        z-index: 900 !important; /* REDUCED from 1000 to avoid blocking game screen */
        box-shadow: none !important;
        /* Ensure controls don't block game screen touch events */
        pointer-events: none !important;
    }

    /* D-pad shifted left 4% and center-aligned vertically */
    .mobile-dpad-container {
        position: absolute !important;
        left: calc(4vw + 20px) !important; /* Shift left 4% from viewport */
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.15),
            rgba(var(--theme-primary-rgb), 0.25)) !important;
        backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(var(--theme-primary-rgb), 0.3) !important;
        border-radius: 20px !important;
        padding: 15px !important;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 1px 4px rgba(255, 255, 255, 0.1) !important;
        /* Enable touch events on control containers */
        pointer-events: auto !important;
        z-index: 950 !important;
    }

    /* Override D-pad border in tablet mode to prevent double borders */
    .mobile-dpad::before {
        display: none !important;
    }

    /* ABXY buttons shifted right 4% and center-aligned vertically */
    .mobile-action-buttons-container {
        position: absolute !important;
        right: calc(4vw + 20px) !important; /* Shift right 4% from viewport */
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.15),
            rgba(var(--theme-primary-rgb), 0.25)) !important;
        backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(var(--theme-primary-rgb), 0.3) !important;
        border-radius: 20px !important;
        padding: 15px !important;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 1px 4px rgba(255, 255, 255, 0.1) !important;
        /* Enable touch events on control containers */
        pointer-events: auto !important;
        z-index: 950 !important;
    }

    /* Override ABXY border in tablet mode to prevent double borders */
    .mobile-action-buttons::before {
        display: none !important;
    }

    /* C-Pad shifted left 4% and center-aligned vertically - IDENTICAL to D-Pad positioning */
    .mobile-cpad-container {
        position: absolute !important;
        left: calc(4vw + 20px) !important; /* Shift left 4% from viewport */
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.15),
            rgba(var(--theme-primary-rgb), 0.25)) !important;
        backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(var(--theme-primary-rgb), 0.3) !important;
        border-radius: 20px !important;
        padding: 15px !important;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 1px 4px rgba(255, 255, 255, 0.1) !important;
        /* Enable touch events on control containers */
        pointer-events: auto !important;
        z-index: 950 !important;
    }

    /* Override C-Pad border in tablet mode to prevent double borders */
    .mobile-cpad::before {
        display: none !important;
    }

    /* Analog Joystick shifted LEFT 4% and center-aligned vertically - IDENTICAL to D-PAD positioning */
    .analog-joystick-container {
        position: absolute !important;
        left: calc(4vw + 20px) !important; /* Shift LEFT 4% from viewport - same as D-pad */
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.15),
            rgba(var(--theme-primary-rgb), 0.25)) !important;
        backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(var(--theme-primary-rgb), 0.3) !important;
        border-radius: 20px !important;
        padding: 15px !important;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 1px 4px rgba(255, 255, 255, 0.1) !important;
        /* Enable touch events on control containers */
        pointer-events: auto !important;
        z-index: 950 !important;
    }

    /* Override Analog Joystick border in tablet mode to prevent double borders */
    .analog-joystick::before {
        display: none !important;
    }

    /* Tablet horizontal spacing adjustments */
    .mobile-controls.spacing-close .mobile-dpad-container {
        left: calc(5vw + 25px) !important; /* Low - closest spacing (same as before) */
    }

    .mobile-controls.spacing-close .mobile-action-buttons-container {
        right: calc(5vw + 25px) !important; /* Low - closest spacing (same as before) */
    }

    .mobile-controls.spacing-current .mobile-dpad-container {
        left: calc(3vw + 15px) !important; /* Current - wider spacing (was "High") */
    }

    .mobile-controls.spacing-current .mobile-action-buttons-container {
        right: calc(3vw + 15px) !important; /* Current - wider spacing (was "High") */
    }

    .mobile-controls.spacing-wide .mobile-dpad-container {
        left: calc(2vw + 10px) !important; /* High - widest spacing (20% more than old "High") */
    }

    .mobile-controls.spacing-wide .mobile-action-buttons-container {
        right: calc(2vw + 10px) !important; /* High - widest spacing (20% more than old "High") */
    }

    /* Classic mode controls spacing adjustments - IDENTICAL to Modern mode */
    .mobile-controls.spacing-close .mobile-cpad-container {
        left: calc(5vw + 25px) !important; /* Low - closest spacing (same as D-Pad) */
    }

    .mobile-controls.spacing-close .analog-joystick-container {
        left: calc(5vw + 25px) !important; /* Low - closest spacing (same as D-PAD) */
    }

    .mobile-controls.spacing-current .mobile-cpad-container {
        left: calc(3vw + 15px) !important; /* Current - wider spacing (same as D-Pad) */
    }

    .mobile-controls.spacing-current .analog-joystick-container {
        left: calc(3vw + 15px) !important; /* Current - wider spacing (same as D-PAD) */
    }

    .mobile-controls.spacing-wide .mobile-cpad-container {
        left: calc(2vw + 10px) !important; /* High - widest spacing (same as D-Pad) */
    }

    .mobile-controls.spacing-wide .analog-joystick-container {
        left: calc(2vw + 10px) !important; /* High - widest spacing (same as D-PAD) */
    }

    /* Shoulder buttons split to left/right corners in tablet mode */
    .shoulder-buttons {
        position: absolute !important;
        top: -120px !important; /* Move much higher */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 0 !important;
        background: none !important;
        backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Individual shoulder button positioning and styling */
    .shoulder-btn.left-shoulder {
        position: absolute !important;
        left: calc(2vw + 10px) !important; /* Left corner with small margin */
        top: 0 !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.15),
            rgba(var(--theme-primary-rgb), 0.25)) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(var(--theme-primary-rgb), 0.3) !important;
        border-radius: 8px !important;
        padding: 10px 18px !important; /* Larger padding for bigger buttons */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    }

    .shoulder-btn.right-shoulder {
        position: absolute !important;
        right: calc(2vw + 10px) !important; /* Right corner with small margin */
        top: 0 !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.15),
            rgba(var(--theme-primary-rgb), 0.25)) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(var(--theme-primary-rgb), 0.3) !important;
        border-radius: 8px !important;
        padding: 10px 18px !important; /* Larger padding for bigger buttons */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    }

    /* Optimized button sizes for tablet */
    .mobile-dpad {
        grid-template-columns: 42px 42px 42px !important;
        grid-template-rows: 42px 42px 42px !important;
        gap: 5px !important;
        width: 136px !important;
        height: 136px !important;
    }

    .mobile-dpad-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        font-size: 1.1rem !important;
    }

    /* Tablet landscape corner button - ALL corner buttons including Mode 2 */
    /* Standardized 64% ratio: 42px D-pad × 0.64 = 27px corner button */
    .dpad-corner-button,
    #dpadCornerButton,
    #cpadCornerButton,
    #joystickCornerButton {
        width: 27px !important; /* 64% of 42px D-pad button */
        height: 27px !important; /* 64% of 42px D-pad button */
        min-width: 27px !important; /* 64% of 42px D-pad button */
        min-height: 27px !important; /* 64% of 42px D-pad button */
        font-size: 0.85rem !important; /* Proportional font scaling */

        /* Ensure visibility on tablets */
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 9999 !important;
    }

    /* ABXY corner button - tablet landscape sizing */
    /* Standardized 64% ratio: 42px ABXY × 0.64 = 27px corner button */
    .abxy-corner-button,
    #abxyCornerButton,
    #abxyCornerButton2,
    #abxyCornerButton3 {
        width: 27px !important; /* 64% of 42px ABXY button */
        height: 27px !important; /* 64% of 42px ABXY button */
        min-width: 27px !important; /* 64% of 42px ABXY button */
        min-height: 27px !important; /* 64% of 42px ABXY button */
        font-size: 0.85rem !important; /* Proportional font scaling */

        /* Ensure visibility on tablets */
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 9999 !important;
    }

    /* Tablet landscape joystick corner button positioning adjustment */
    .mode2-controls-container .analog-joystick-container .dpad-corner-button {
        bottom: 12px !important; /* Closer to container edge for better visual integration */
        left: 12px !important;   /* Closer to container edge for better visual integration */
    }

    /* ===== FIX: JOYSTICK POSITIONING AND Z-INDEX IN LANDSCAPE MODE ===== */
    /* Joystick is now correctly positioned on LEFT side (like D-pad) instead of RIGHT side */
    /* Z-index rules ensure proper layering within the left control area */

    /* Mode 2 (joystick mode) container should have proper z-index when active */
    .mode2-controls-container.active {
        z-index: 1001 !important;
    }

    /* Joystick container positioned on LEFT side with proper z-index - REDUCED to avoid blocking game screen */
    .mode2-controls-container .analog-joystick-container {
        z-index: 970 !important; /* REDUCED from 1002 */
    }

    /* Individual joystick components with proper layering - REDUCED */
    .mode2-controls-container .analog-joystick {
        z-index: 971 !important; /* REDUCED from 1003 */
    }

    .mode2-controls-container .joystick-boundary {
        z-index: 972 !important; /* REDUCED from 1004 */
    }

    .mode2-controls-container .joystick-stick {
        z-index: 975 !important; /* REDUCED from 1005 */
    }

    /* ABXY container remains on RIGHT side with standard z-index - REDUCED */
    .mode2-controls-container .mobile-action-buttons-container {
        z-index: 965 !important; /* REDUCED from 1000 */
    }

    /* Corner button should be above all joystick components - REDUCED */
    .mode2-controls-container .dpad-corner-button {
        z-index: 980 !important; /* REDUCED from 1006 */
    }

    /* Additional z-index rules for joystick interaction states - REDUCED */
    .mode2-controls-container .joystick-stick.dragging {
        z-index: 985 !important; /* REDUCED from 1007 - Highest priority when being dragged */
    }

    /* Ensure joystick knob is properly layered - REDUCED */
    .mode2-controls-container .joystick-knob {
        z-index: 975 !important; /* REDUCED from 1005 */
    }

    /* General control container z-index hierarchy for landscape mode - REDUCED to avoid blocking game screen */
    .control-mode-container {
        z-index: 940 !important; /* REDUCED from 999 */
    }

    .control-mode-container.active {
        z-index: 960 !important; /* REDUCED from 1001 */
    }

    /* Ensure inactive containers don't interfere */
    .control-mode-container:not(.active) {
        z-index: 930 !important; /* REDUCED from 998 */
    }

    .mobile-action-buttons {
        grid-template-columns: 42px 42px 42px !important;
        grid-template-rows: 42px 42px 42px !important;
        gap: 5px !important;
        width: 136px !important;
        height: 136px !important;
    }

    .mobile-action-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        font-size: 1.1rem !important;
    }

    /* Classic mode controls sizing - IDENTICAL to Modern mode */
    .mobile-cpad {
        grid-template-columns: 42px 42px 42px !important;
        grid-template-rows: 42px 42px 42px !important;
        gap: 5px !important;
        width: 136px !important;
        height: 136px !important;
    }

    .cpad-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        font-size: 1.1rem !important;
    }

    .analog-joystick {
        width: 136px !important;
        height: 136px !important;
    }

    .joystick-boundary {
        width: 90px !important;
        height: 90px !important;
    }

    .joystick-stick {
        width: 36px !important;
        height: 36px !important;
    }

    .shoulder-btn {
        width: 70px !important; /* Much wider for easier touch */
        height: 45px !important; /* Taller for console-like feel */
        min-width: 70px !important;
        min-height: 45px !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        color: var(--theme-text-light) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
        letter-spacing: 0.5px !important; /* Better text spacing */
        cursor: pointer !important; /* Ensure pointer cursor */
        user-select: none !important; /* Prevent text selection */
        -webkit-tap-highlight-color: transparent !important; /* Remove tap highlight */
        touch-action: manipulation !important; /* Optimize for touch */
    }

    /* Console-like shoulder button interactions for tablet landscape */
    .shoulder-btn:active {
        transform: translateY(2px) !important; /* Press down effect */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.25),
            rgba(var(--theme-primary-rgb), 0.35)) !important;
    }

    .shoulder-btn:hover {
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.2),
            rgba(var(--theme-primary-rgb), 0.3)) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    }

    /* Move MOBORETRO branding down 7% from top in tablet mode */
    .branding-text {
        position: absolute !important;
        top: 7vh !important; /* 7% down from top */
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-top: 0 !important;
        z-index: 1001 !important;
        font-size: 1rem !important;
    }
}

/* ===== TABLET PORTRAIT MODE - ROTATION LAYOUT DESIGN ===== */
/* Tablet portrait mode: Rotation-style layout matching landscape pattern but optimized for portrait */
/* Range: 768px-992px width, portrait orientation - bigger scale version of rotation layout */
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
    /* Optimized gaming container for tablet portrait rotation layout - 15% larger */
    .gaming-container {
        width: 518px !important; /* 15% larger: 450px × 1.15 = 517.5px ≈ 518px */
        height: 575px !important; /* 15% larger: 500px × 1.15 = 575px */
        max-width: min(518px, 95vw) !important; /* Prevent horizontal overflow */
        min-height: 575px !important;
        margin: 1vh auto !important; /* Reduced margin to accommodate larger size */
        margin-bottom: 0 !important;
        padding: var(--spacing-lg) !important;
        position: relative !important;
        top: 0 !important;
        /* Ensure container doesn't exceed viewport bounds */
        max-height: calc(100vh - 200px) !important; /* Reserve space for controls and ads */
    }

    .game-screen {
        width: calc(100% - 37px) !important; /* 15% larger: 32px × 1.15 = 36.8px ≈ 37px */
        height: calc(100% - 138px) !important; /* 15% larger: 120px × 1.15 = 138px */
        max-width: none !important;
        margin: 18px auto !important; /* 15% larger: 16px × 1.15 = 18.4px ≈ 18px */
        position: relative !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* Advertisement overlay responsive adjustments for tablet portrait */
    .advertisement-overlay {
        font-size: 1.4rem !important; /* Larger font for tablet */
    }

    /* Save/Load State overlay responsive adjustments for tablet portrait */
    .save-load-state-overlay {
        font-size: 1.25rem !important; /* Larger font for tablet */
        z-index: 1350 !important; /* Above advertisement overlay */
    }

    /* Keep mobile ad banner visible */
    .mobile-ad-banner {
        display: flex !important;
        height: 50px !important;
        z-index: 999 !important;
    }

    /* Rotation-style controls layout for tablet portrait - adjusted for 15% larger container */
    .mobile-controls {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: fixed !important;
        bottom: 120px !important; /* Adjusted for larger container */
        left: 0 !important;
        right: 0 !important;
        height: 220px !important; /* Increased height for larger portrait controls */
        background: transparent !important;
        backdrop-filter: none !important;
        border: none !important;
        padding: 0 !important;
        transform: none !important;
        z-index: 1000 !important;
        box-shadow: none !important;
    }

    /* D-pad positioned left center - rotation layout style */
    .mobile-dpad-container {
        position: absolute !important;
        left: calc(6vw + 30px) !important; /* Adjusted for portrait spacing */
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.15),
            rgba(var(--theme-primary-rgb), 0.25)) !important;
        backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(var(--theme-primary-rgb), 0.3) !important;
        border-radius: 22px !important;
        padding: 18px !important; /* Larger padding for tablet portrait */
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 1px 4px rgba(255, 255, 255, 0.1) !important;
    }

    /* Override D-pad border in tablet portrait rotation mode */
    .mobile-dpad::before {
        display: none !important;
    }

    /* ABXY buttons positioned right center - rotation layout style */
    .mobile-action-buttons-container {
        position: absolute !important;
        right: calc(6vw + 30px) !important; /* Adjusted for portrait spacing */
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.15),
            rgba(var(--theme-primary-rgb), 0.25)) !important;
        backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(var(--theme-primary-rgb), 0.3) !important;
        border-radius: 22px !important;
        padding: 18px !important; /* Larger padding for tablet portrait */
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 1px 4px rgba(255, 255, 255, 0.1) !important;
    }

    /* Override ABXY border in tablet portrait rotation mode */
    .mobile-action-buttons::before {
        display: none !important;
    }

    /* C-Pad positioned left center - identical to D-Pad for rotation layout */
    .mobile-cpad-container {
        position: absolute !important;
        left: calc(6vw + 30px) !important; /* Same as D-Pad positioning */
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.15),
            rgba(var(--theme-primary-rgb), 0.25)) !important;
        backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(var(--theme-primary-rgb), 0.3) !important;
        border-radius: 22px !important;
        padding: 18px !important;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 1px 4px rgba(255, 255, 255, 0.1) !important;
    }

    /* Override C-Pad border in tablet portrait rotation mode */
    .mobile-cpad::before {
        display: none !important;
    }

    /* Analog Joystick positioned LEFT center - identical to D-PAD for rotation layout */
    .analog-joystick-container {
        position: absolute !important;
        left: calc(6vw + 30px) !important; /* Same as D-PAD positioning */
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.15),
            rgba(var(--theme-primary-rgb), 0.25)) !important;
        backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(var(--theme-primary-rgb), 0.3) !important;
        border-radius: 22px !important;
        padding: 18px !important;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 1px 4px rgba(255, 255, 255, 0.1) !important;
    }

    /* Override Analog Joystick border in tablet portrait rotation mode */
    .analog-joystick::before {
        display: none !important;
    }

    /* Tablet portrait horizontal spacing adjustments - rotation layout style */
    .mobile-controls.spacing-close .mobile-dpad-container {
        left: calc(8vw + 35px) !important; /* Closer spacing */
    }

    .mobile-controls.spacing-close .mobile-action-buttons-container {
        right: calc(8vw + 35px) !important; /* Closer spacing */
    }

    .mobile-controls.spacing-current .mobile-dpad-container {
        left: calc(6vw + 30px) !important; /* Current spacing */
    }

    .mobile-controls.spacing-current .mobile-action-buttons-container {
        right: calc(6vw + 30px) !important; /* Current spacing */
    }

    .mobile-controls.spacing-wide .mobile-dpad-container {
        left: calc(4vw + 25px) !important; /* Wider spacing */
    }

    .mobile-controls.spacing-wide .mobile-action-buttons-container {
        right: calc(4vw + 25px) !important; /* Wider spacing */
    }

    /* Classic mode controls spacing adjustments - identical to Modern mode */
    .mobile-controls.spacing-close .mobile-cpad-container {
        left: calc(8vw + 35px) !important;
    }

    .mobile-controls.spacing-close .analog-joystick-container {
        left: calc(8vw + 35px) !important; /* Same as D-PAD positioning */
    }

    .mobile-controls.spacing-current .mobile-cpad-container {
        left: calc(6vw + 30px) !important;
    }

    .mobile-controls.spacing-current .analog-joystick-container {
        left: calc(6vw + 30px) !important; /* Same as D-PAD positioning */
    }

    .mobile-controls.spacing-wide .mobile-cpad-container {
        left: calc(4vw + 25px) !important;
    }

    .mobile-controls.spacing-wide .analog-joystick-container {
        left: calc(4vw + 25px) !important; /* Same as D-PAD positioning */
    }

    /* Shoulder buttons split to left/right corners - adjusted for 15% larger container */
    .shoulder-buttons {
        position: absolute !important;
        top: -160px !important; /* Higher for larger portrait layout */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 0 !important;
        background: none !important;
        backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Individual shoulder button positioning and styling - rotation layout */
    .shoulder-btn.left-shoulder {
        position: absolute !important;
        left: calc(4vw + 20px) !important; /* Left corner with margin */
        top: 0 !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.15),
            rgba(var(--theme-primary-rgb), 0.25)) !important;
        backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(var(--theme-primary-rgb), 0.3) !important;
        border-radius: 12px !important;
        padding: 14px 22px !important; /* Larger padding for tablet portrait */
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
    }

    .shoulder-btn.right-shoulder {
        position: absolute !important;
        right: calc(4vw + 20px) !important; /* Right corner with margin */
        top: 0 !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.15),
            rgba(var(--theme-primary-rgb), 0.25)) !important;
        backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(var(--theme-primary-rgb), 0.3) !important;
        border-radius: 12px !important;
        padding: 14px 22px !important; /* Larger padding for tablet portrait */
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
    }

    /* Optimized button sizes for tablet portrait rotation layout - bigger scale */
    .mobile-dpad {
        grid-template-columns: 55px 55px 55px !important;
        grid-template-rows: 55px 55px 55px !important;
        gap: 7px !important;
        width: 179px !important;
        height: 179px !important;
    }

    .mobile-dpad-btn {
        width: 55px !important;
        height: 55px !important;
        min-width: 55px !important;
        min-height: 55px !important;
        font-size: 1.4rem !important;
    }

    /* Tablet portrait corner button - ALL corner buttons including Mode 2 */
    /* Standardized 64% ratio: 55px D-pad × 0.64 = 35px corner button */
    .dpad-corner-button,
    #dpadCornerButton,
    #cpadCornerButton,
    #joystickCornerButton {
        width: 35px !important; /* 64% of 55px D-pad button */
        height: 35px !important; /* 64% of 55px D-pad button */
        min-width: 35px !important; /* 64% of 55px D-pad button */
        min-height: 35px !important; /* 64% of 55px D-pad button */
        font-size: 1.02rem !important; /* Proportional font scaling */

        /* Ensure visibility on tablet portrait */
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 9999 !important;
    }

    /* ABXY corner button - tablet portrait sizing */
    /* Standardized 64% ratio: 55px ABXY × 0.64 = 35px corner button */
    .abxy-corner-button,
    #abxyCornerButton,
    #abxyCornerButton2,
    #abxyCornerButton3 {
        width: 35px !important; /* 64% of 55px ABXY button */
        height: 35px !important; /* 64% of 55px ABXY button */
        min-width: 35px !important; /* 64% of 55px ABXY button */
        min-height: 35px !important; /* 64% of 55px ABXY button */
        font-size: 1.02rem !important; /* Proportional font scaling */

        /* Ensure visibility on tablet portrait */
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 9999 !important;
    }

    /* Tablet portrait joystick corner button positioning adjustment */
    .mode2-controls-container .analog-joystick-container .dpad-corner-button {
        bottom: 15px !important; /* Closer to container edge for better visual integration */
        left: 15px !important;   /* Closer to container edge for better visual integration */
    }

    .mobile-action-buttons {
        grid-template-columns: 55px 55px 55px !important;
        grid-template-rows: 55px 55px 55px !important;
        gap: 7px !important;
        width: 179px !important;
        height: 179px !important;
    }

    .mobile-action-btn {
        width: 55px !important;
        height: 55px !important;
        min-width: 55px !important;
        min-height: 55px !important;
        font-size: 1.4rem !important;
    }

    /* Classic mode controls sizing - identical to Modern mode but bigger scale */
    .mobile-cpad {
        grid-template-columns: 55px 55px 55px !important;
        grid-template-rows: 55px 55px 55px !important;
        gap: 7px !important;
        width: 179px !important;
        height: 179px !important;
    }

    .cpad-btn {
        width: 55px !important;
        height: 55px !important;
        min-width: 55px !important;
        min-height: 55px !important;
        font-size: 1.4rem !important;
    }

    .analog-joystick {
        width: 179px !important;
        height: 179px !important;
    }

    .joystick-boundary {
        width: 120px !important;
        height: 120px !important;
    }

    .joystick-stick {
        width: 48px !important;
        height: 48px !important;
    }

    .shoulder-btn {
        width: 90px !important; /* Wider for tablet portrait */
        height: 55px !important; /* Taller for console-like feel */
        min-width: 90px !important;
        min-height: 55px !important;
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        color: var(--theme-text-light) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
        letter-spacing: 0.6px !important; /* Better text spacing */
        cursor: pointer !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    /* Console-like shoulder button interactions for tablet portrait rotation */
    .shoulder-btn:active {
        transform: translateY(3px) !important; /* Press down effect */
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25) !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.25),
            rgba(var(--theme-primary-rgb), 0.35)) !important;
    }

    .shoulder-btn:hover {
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.2),
            rgba(var(--theme-primary-rgb), 0.3)) !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22) !important;
    }

    /* Square toggle button tablet portrait sizing - bigger scale */
    .square-toggle-button {
        min-width: 48px !important;
        min-height: 48px !important;
        border-radius: 12px !important;
    }

    .square-mode-indicator {
        width: 18px !important;
        height: 18px !important;
    }

    .square-loading-ring {
        border-width: 4px !important;
        width: calc(100% + 12px) !important;
        height: calc(100% + 12px) !important;
        border-radius: 12px !important;
    }

    /* Tablet portrait control containers - bigger scale */
    .classic-controls-container,
    .modern-controls-container {
        min-height: 220px !important; /* Larger height for tablet portrait */
    }

    /* Move MOBORETRO branding down for tablet portrait rotation layout */
    .branding-text {
        position: absolute !important;
        top: 8vh !important; /* 8% down from top for portrait */
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-top: 0 !important;
        z-index: 1001 !important;
        font-size: 1.1rem !important; /* Slightly larger for tablet portrait */
    }

    /* ===== 15% CARD SIZE INCREASE FOR TABLET PORTRAIT ===== */
    /* Scale up all card elements by 15% to match gaming container scaling */

    /* Main Menu Cards - 15% larger */
    .main-card {
        min-width: 115px !important; /* 100px × 1.15 = 115px */
        min-height: 115px !important; /* 100px × 1.15 = 115px */
    }

    .main-card .card-icon {
        font-size: 2.3rem !important; /* 2rem × 1.15 = 2.3rem */
    }

    .main-card .card-icon-svg {
        width: 2.3rem !important; /* 2rem × 1.15 = 2.3rem */
        height: 2.3rem !important; /* 2rem × 1.15 = 2.3rem */
    }

    .main-card .card-icon-fallback {
        font-size: 2.3rem !important; /* 2rem × 1.15 = 2.3rem */
    }

    .main-card .card-title {
        font-size: 0.86rem !important; /* 0.75rem × 1.15 = 0.8625rem ≈ 0.86rem */
    }

    .main-card .card-content {
        padding: 5px !important; /* 4px × 1.15 = 4.6px ≈ 5px */
    }

    /* Main Card Grid - 15% larger spacing */
    .main-card-grid {
        gap: 7px !important; /* 6px × 1.15 = 6.9px ≈ 7px */
        padding: 9px !important; /* 8px × 1.15 = 9.2px ≈ 9px */
    }

    /* Console Category Cards - 15% larger */
    .console-card {
        width: 161px !important; /* 140px × 1.15 = 161px */
        height: 207px !important; /* 180px × 1.15 = 207px */
        padding: calc(var(--spacing-sm) * 1.15) !important;
    }

    /* Search Card - Tablet responsive */
    .console-card.search-card .search-results {
        width: 320px !important; /* Larger on tablet */
        max-height: 350px !important;
    }

    .console-card.search-card .search-input {
        font-size: 0.9rem !important;
        padding: 10px 14px !important;
    }

    .console-thumbnail {
        width: 92px !important; /* 80px × 1.15 = 92px */
        height: 92px !important; /* 80px × 1.15 = 92px */
        margin-bottom: calc(var(--spacing-sm) * 1.15) !important;
    }

    .console-name {
        font-size: 0.86rem !important; /* 0.75rem × 1.15 = 0.8625rem ≈ 0.86rem */
    }

    .console-game-count {
        font-size: 0.69rem !important; /* 0.6rem × 1.15 = 0.69rem */
    }

    /* Individual Game Cards - 15% larger */
    .game-card {
        width: 138px !important; /* 120px × 1.15 = 138px */
        height: 161px !important; /* 140px × 1.15 = 161px */
        padding: calc(var(--spacing-sm) * 1.15) !important;
    }

    /* Game Carousel Cards - 15% larger */
    .game-card-carousel {
        width: 184px !important; /* 160px × 1.15 = 184px */
        height: 230px !important; /* 200px × 1.15 = 230px */
        padding: calc(var(--spacing-sm) * 1.15) !important;
    }

    .game-thumbnail-carousel {
        width: 115px !important; /* 100px × 1.15 = 115px */
        height: 115px !important; /* 100px × 1.15 = 115px */
        margin-bottom: calc(var(--spacing-sm) * 1.15) !important;
    }

    .game-name-carousel {
        font-size: 0.86rem !important; /* 0.75rem × 1.15 = 0.8625rem ≈ 0.86rem */
    }

    .game-info-carousel {
        font-size: 0.69rem !important; /* 0.6rem × 1.15 = 0.69rem */
    }

    .play-icon-carousel {
        font-size: 2.88rem !important; /* 2.5rem × 1.15 = 2.875rem ≈ 2.88rem */
    }

    /* Game Dots Indicators - 15% larger */
    .game-dot {
        width: 10px !important; /* 9px × 1.15 = 10.35px ≈ 10px */
        height: 10px !important; /* 9px × 1.15 = 10.35px ≈ 10px */
    }

    .games-indicators {
        gap: 9px !important; /* 8px × 1.15 = 9.2px ≈ 9px */
    }

    /* Games Main Container - Adjust spacing for larger cards */
    .games-main {
        padding: calc(var(--spacing-md) * 1.15) !important;
        gap: calc(var(--spacing-lg) * 1.15) !important;
    }

    /* Generic Card Class - 15% larger */
    .card {
        width: 92px !important; /* 80px × 1.15 = 92px */
        height: 92px !important; /* 80px × 1.15 = 92px */
        border-radius: calc(var(--radius-md) * 1.15) !important;
        padding: calc(var(--spacing-xs) * 1.15) !important;
    }

    .card-icon {
        font-size: 1.73rem !important; /* 1.5rem × 1.15 = 1.725rem ≈ 1.73rem */
        margin-bottom: calc(var(--spacing-xs) * 1.15) !important;
    }

    .card-title, .card-text {
        font-size: 0.69rem !important; /* 0.6rem × 1.15 = 0.69rem */
    }

    .card-description {
        font-size: 0.58rem !important; /* 0.5rem × 1.15 = 0.575rem ≈ 0.58rem */
        margin-top: calc(var(--spacing-xs) * 1.15) !important;
    }

    /* Console Icon and Fallback - 15% larger */
    .console-thumbnail .console-icon {
        padding: 7px !important; /* 6px × 1.15 = 6.9px ≈ 7px */
    }

    .console-fallback {
        font-size: 2.07rem !important; /* 1.8rem × 1.15 = 2.07rem */
    }

    /* Border radius scaling for all card elements */
    .main-card {
        border-radius: 9px !important; /* 8px × 1.15 = 9.2px ≈ 9px */
    }

    .console-card {
        border-radius: calc(var(--radius-md) * 1.15) !important;
    }

    .game-card {
        border-radius: calc(var(--radius-md) * 1.15) !important;
    }

    .game-card-carousel {
        border-radius: calc(var(--radius-md) * 1.15) !important;
    }

    .console-thumbnail {
        border-radius: calc(var(--radius-sm) * 1.15) !important;
    }

    .game-thumbnail-carousel {
        border-radius: calc(var(--radius-sm) * 1.15) !important;
    }
}

/* ===== EXTENDED TABLET PORTRAIT RANGE - ROTATION LAYOUT ===== */
/* Extended range for larger tablet portrait screens up to 992px - same rotation layout */
@media (min-width: 992px) and (max-width: 992px) and (orientation: portrait) {
    /* Inherit all styles from the main tablet portrait rotation layout */
    /* This ensures the rotation layout extends to the full 768px-992px range */

    /* Slightly larger gaming container for the upper range - 15% increase maintained */
    .gaming-container {
        width: 552px !important; /* 15% larger: 480px × 1.15 = 552px */
        height: 598px !important; /* 15% larger: 520px × 1.15 = 598px */
        max-width: min(552px, 92vw) !important; /* Prevent horizontal overflow on 992px screens */
        min-height: 598px !important;
        /* Ensure container doesn't exceed viewport bounds */
        max-height: calc(100vh - 180px) !important; /* Reserve space for controls and ads */
    }

    /* Adjust control positioning for larger screens */
    .mobile-dpad-container {
        left: calc(8vw + 35px) !important; /* Slightly more spacing for larger screens */
    }

    .mobile-action-buttons-container {
        right: calc(8vw + 35px) !important;
    }

    /* ===== 15% CARD SIZE INCREASE FOR EXTENDED TABLET PORTRAIT ===== */
    /* Inherit all card scaling from main tablet portrait range */

    /* Main Menu Cards - 15% larger */
    .main-card {
        min-width: 115px !important; /* 100px × 1.15 = 115px */
        min-height: 115px !important; /* 100px × 1.15 = 115px */
    }

    .main-card .card-icon {
        font-size: 2.3rem !important; /* 2rem × 1.15 = 2.3rem */
    }

    .main-card .card-icon-svg {
        width: 2.3rem !important; /* 2rem × 1.15 = 2.3rem */
        height: 2.3rem !important; /* 2rem × 1.15 = 2.3rem */
    }

    .main-card .card-icon-fallback {
        font-size: 2.3rem !important; /* 2rem × 1.15 = 2.3rem */
    }

    .main-card .card-title {
        font-size: 0.86rem !important; /* 0.75rem × 1.15 = 0.8625rem ≈ 0.86rem */
    }

    .main-card .card-content {
        padding: 5px !important; /* 4px × 1.15 = 4.6px ≈ 5px */
    }

    /* Main Card Grid - 15% larger spacing */
    .main-card-grid {
        gap: 7px !important; /* 6px × 1.15 = 6.9px ≈ 7px */
        padding: 9px !important; /* 8px × 1.15 = 9.2px ≈ 9px */
    }

    /* Console Category Cards - 15% larger */
    .console-card {
        width: 161px !important; /* 140px × 1.15 = 161px */
        height: 207px !important; /* 180px × 1.15 = 207px */
        padding: calc(var(--spacing-sm) * 1.15) !important;
    }

    /* Search Card - Tablet responsive */
    .console-card.search-card .search-results {
        width: 320px !important; /* Larger on tablet */
        max-height: 350px !important;
    }

    .console-card.search-card .search-input {
        font-size: 0.9rem !important;
        padding: 10px 14px !important;
    }

    .console-thumbnail {
        width: 92px !important; /* 80px × 1.15 = 92px */
        height: 92px !important; /* 80px × 1.15 = 92px */
        margin-bottom: calc(var(--spacing-sm) * 1.15) !important;
    }

    .console-name {
        font-size: 0.86rem !important; /* 0.75rem × 1.15 = 0.8625rem ≈ 0.86rem */
    }

    .console-game-count {
        font-size: 0.69rem !important; /* 0.6rem × 1.15 = 0.69rem */
    }

    /* Individual Game Cards - 15% larger */
    .game-card {
        width: 138px !important; /* 120px × 1.15 = 138px */
        height: 161px !important; /* 140px × 1.15 = 161px */
        padding: calc(var(--spacing-sm) * 1.15) !important;
    }

    /* Game Carousel Cards - 15% larger */
    .game-card-carousel {
        width: 184px !important; /* 160px × 1.15 = 184px */
        height: 230px !important; /* 200px × 1.15 = 230px */
        padding: calc(var(--spacing-sm) * 1.15) !important;
    }

    .game-thumbnail-carousel {
        width: 115px !important; /* 100px × 1.15 = 115px */
        height: 115px !important; /* 100px × 1.15 = 115px */
        margin-bottom: calc(var(--spacing-sm) * 1.15) !important;
    }

    .game-name-carousel {
        font-size: 0.86rem !important; /* 0.75rem × 1.15 = 0.8625rem ≈ 0.86rem */
    }

    .game-info-carousel {
        font-size: 0.69rem !important; /* 0.6rem × 1.15 = 0.69rem */
    }

    .play-icon-carousel {
        font-size: 2.88rem !important; /* 2.5rem × 1.15 = 2.875rem ≈ 2.88rem */
    }

    /* Game Dots Indicators - 15% larger */
    .game-dot {
        width: 10px !important; /* 9px × 1.15 = 10.35px ≈ 10px */
        height: 10px !important; /* 9px × 1.15 = 10.35px ≈ 10px */
    }

    .games-indicators {
        gap: 9px !important; /* 8px × 1.15 = 9.2px ≈ 9px */
    }

    /* Games Main Container - Adjust spacing for larger cards */
    .games-main {
        padding: calc(var(--spacing-md) * 1.15) !important;
        gap: calc(var(--spacing-lg) * 1.15) !important;
    }

    /* Generic Card Class - 15% larger */
    .card {
        width: 92px !important; /* 80px × 1.15 = 92px */
        height: 92px !important; /* 80px × 1.15 = 92px */
        border-radius: calc(var(--radius-md) * 1.15) !important;
        padding: calc(var(--spacing-xs) * 1.15) !important;
    }

    .card-icon {
        font-size: 1.73rem !important; /* 1.5rem × 1.15 = 1.725rem ≈ 1.73rem */
        margin-bottom: calc(var(--spacing-xs) * 1.15) !important;
    }

    .card-title, .card-text {
        font-size: 0.69rem !important; /* 0.6rem × 1.15 = 0.69rem */
    }

    .card-description {
        font-size: 0.58rem !important; /* 0.5rem × 1.15 = 0.575rem ≈ 0.58rem */
        margin-top: calc(var(--spacing-xs) * 1.15) !important;
    }

    /* Console Icon and Fallback - 15% larger */
    .console-thumbnail .console-icon {
        padding: 7px !important; /* 6px × 1.15 = 6.9px ≈ 7px */
    }

    .console-fallback {
        font-size: 2.07rem !important; /* 1.8rem × 1.15 = 2.07rem */
    }

    /* Border radius scaling for all card elements */
    .main-card {
        border-radius: 9px !important; /* 8px × 1.15 = 9.2px ≈ 9px */
    }

    .console-card {
        border-radius: calc(var(--radius-md) * 1.15) !important;
    }

    .game-card {
        border-radius: calc(var(--radius-md) * 1.15) !important;
    }

    .game-card-carousel {
        border-radius: calc(var(--radius-md) * 1.15) !important;
    }

    .console-thumbnail {
        border-radius: calc(var(--radius-sm) * 1.15) !important;
    }

    .game-thumbnail-carousel {
        border-radius: calc(var(--radius-sm) * 1.15) !important;
    }

    .mobile-cpad-container {
        left: calc(8vw + 35px) !important;
    }

    .analog-joystick-container {
        left: calc(8vw + 35px) !important; /* Same as D-PAD positioning */
    }

    /* Shoulder buttons with more spacing */
    .shoulder-btn.left-shoulder {
        left: calc(6vw + 25px) !important;
    }

    .shoulder-btn.right-shoulder {
        right: calc(6vw + 25px) !important;
    }
}

/* ===== Moboretro VIRTUAL CONTROLS OVERRIDE ===== */
/* Hide Moboretro virtual controls on mobile and tablet devices to prevent conflicts with Moboretro controls */
@media (max-width: 1023px) {
    /* Hide all Moboretro virtual gamepad elements - optimized */
    .ejs_virtualGamepad_parent,
    .ejs_virtualGamepad_top,
    .ejs_virtualGamepad_bottom,
    .ejs_virtualGamepad_left,
    .ejs_virtualGamepad_right,
    .ejs_virtualGamepad_button,
    .ejs_virtualGamepad_open,
    .ejs_dpad_main,
    .ejs_dpad_horizontal,
    .ejs_dpad_vertical,
    .ejs_dpad_bar {
        display: none !important;
    }

    /* Hide Moboretro virtual gamepad toggle button in settings */
    .ejs_control_row:has(input#ejs_vp),
    .ejs_control_row:has(label[for="ejs_vp"]) {
        display: none !important;
    }
}

/* Additional override for touch devices specifically - optimized */
@media (pointer: coarse) {
    .ejs_virtualGamepad_parent,
    .ejs_virtualGamepad_top,
    .ejs_virtualGamepad_bottom,
    .ejs_virtualGamepad_left,
    .ejs_virtualGamepad_right,
    .ejs_virtualGamepad_button,
    .ejs_virtualGamepad_open {
        display: none !important;
    }
}

/* ===== RESPONSIVE DESIGN FOR NEW MOBILE CONTROLS ===== */
@media (max-width: 480px) {
    .gaming-container {
        width: calc(100vw - 10px);
        padding: var(--spacing-md);
    }
}

/* Very small mobile devices in landscape - ensure proper game screen sizing */
@media (max-width: 480px) and (orientation: landscape) and (max-height: 400px) {
    body {
        align-items: stretch !important;
        padding: 2vh 0 !important;
    }

    .gaming-container {
        width: min(90vw, 450px) !important;
        max-width: 450px !important;
        min-height: 350px !important;
        height: calc(100vh - 4vh) !important;
        max-height: calc(100vh - 4vh) !important;
        margin: 0 auto !important;
    }

    .game-screen {
        width: calc(100% - 25px) !important;
        height: calc(100% - 90px) !important;
        max-width: none !important;
        margin: 12px auto !important;
        min-height: 200px !important;
    }

    /* Advertisement overlay responsive adjustments for very small mobile landscape */
    .advertisement-overlay {
        font-size: 0.9rem !important; /* Smaller font for very small screens */
        z-index: 1200 !important; /* Match game screen z-index */
    }

    /* Save/Load State overlay responsive adjustments for very small mobile landscape */
    .save-load-state-overlay {
        font-size: 0.85rem !important; /* Smaller font for very small screens */
        z-index: 1350 !important; /* Above advertisement overlay */
        padding: 12px !important;
        /* Critical containment for very small screens */
        max-width: calc(100% - 6px) !important;
        max-height: calc(100% - 6px) !important;
        overflow: hidden !important;
        line-height: 1.2 !important;
    }

    .save-load-state-overlay svg {
        width: 28px !important;
        height: 28px !important;
    }

    /* Smaller shoulder buttons on mobile */
    .shoulder-buttons {
        gap: 200px;
        top: -80px;
    }

    .shoulder-btn {
        width: 50px;
        height: 36px;
        min-width: 50px;
        min-height: 36px;
        font-size: 0.9rem;
        border-radius: 10px 10px 3px 3px;
    }

    /* Smaller D-pad on mobile */
    .mobile-dpad {
        grid-template-columns: 36px 36px 36px;
        grid-template-rows: 36px 36px 36px;
        gap: 4px;
        width: 116px;
        height: 116px;
    }

    /* Mobile corner button - ALL corner buttons including Mode 2 */
    /* Standardized 64% ratio: 36px D-pad × 0.64 = 23px corner button */
    .dpad-corner-button,
    #dpadCornerButton,
    #cpadCornerButton,
    #joystickCornerButton {
        width: 23px !important; /* 64% of 36px D-pad button */
        height: 23px !important; /* 64% of 36px D-pad button */
        min-width: 23px !important; /* 64% of 36px D-pad button */
        min-height: 23px !important; /* 64% of 36px D-pad button */
        font-size: 0.72rem !important; /* Proportional font scaling */

        /* Ensure visibility on mobile */
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 9999 !important;
    }

    /* ABXY corner button - mobile sizing */
    /* Increased to meet 44px minimum touch target guideline for accessibility */
    .abxy-corner-button,
    #abxyCornerButton,
    #abxyCornerButton2,
    #abxyCornerButton3 {
        width: 44px !important; /* Minimum touch target size for mobile accessibility */
        height: 44px !important; /* Minimum touch target size for mobile accessibility */
        min-width: 44px !important; /* Minimum touch target size for mobile accessibility */
        min-height: 44px !important; /* Minimum touch target size for mobile accessibility */
        font-size: 0.9rem !important; /* Adjusted for larger button */

        /* Ensure visibility on mobile */
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 9999 !important;

        /* Adjust positioning for larger size */
        bottom: 2px !important;
        right: 2px !important;
    }

    /* MOBILE CORNER BUTTON POSITIONING - PIXEL-PERFECT CONSISTENCY */
    /* All corner buttons use absolute positioning for identical visual relationships */
    .dpad-corner-button,
    #dpadCornerButton,
    #cpadCornerButton,
    #joystickCornerButton {
        /* Force absolute positioning for all corner buttons */
        position: absolute !important;

        /* Pixel-perfect positioning - identical across all control modes */
        bottom: 4px !important;  /* Exact distance from container bottom edge */
        left: 4px !important;    /* Exact distance from container left edge */

        /* Remove grid positioning properties */
        grid-column: unset !important;
        grid-row: unset !important;

        /* Remove any margins that could affect positioning */
        margin: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 0 !important;

        /* CRITICAL: Position immunity - prevent ANY visual state from affecting position */
        transform: none !important;
    }

    /* Override any existing joystick-specific positioning to ensure consistency */
    .mode2-controls-container .analog-joystick-container .dpad-corner-button {
        /* Use the same positioning as D-pad/C-pad for perfect consistency */
        bottom: 4px !important;  /* Identical to D-pad/C-pad positioning */
        left: 4px !important;    /* Identical to D-pad/C-pad positioning */
        position: absolute !important;
        grid-column: unset !important;
        grid-row: unset !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* Smaller D-pad border on mobile */
    .mobile-dpad::before {
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border-width: 2px;
        border-radius: 12px;
    }

    /* Smaller C-Pad on mobile - identical to D-Pad */
    .mobile-cpad {
        grid-template-columns: 36px 36px 36px;
        grid-template-rows: 36px 36px 36px;
        gap: 4px;
        width: 116px;
        height: 116px;
    }

    .mobile-cpad::before {
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border-width: 2px;
        border-radius: 12px;
    }

    .cpad-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 0.9rem;
    }

    /* C-pad center circle on mobile - match D-Pad */
    .cpad-center::before {
        width: 10px;
        height: 10px;
    }

    /* Smaller Analog Joystick on mobile */
    .analog-joystick {
        width: 116px;
        height: 116px;
    }

    .analog-joystick::before {
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border-width: 2px;
        border-radius: 12px;
    }

    .joystick-boundary {
        width: 80px;
        height: 80px;
    }

    .joystick-stick {
        width: 32px;
        height: 32px;
    }

    .joystick-knob::after {
        width: 4px;
        height: 4px;
    }



    /* Ensure control mode containers don't interfere on mobile */
    .control-mode-container {
        position: relative;
        z-index: 5;
    }

    .control-mode-container.active {
        z-index: 10;
    }





    /* Prevent layout shift during mode transitions on mobile */
    .mobile-controls {
        min-height: 120px; /* Ensure consistent height */
    }

    /* Mobile control containers absolute positioning to prevent shifts */
    .classic-controls-container,
    .modern-controls-container,
    .mode1a-controls-container,
    .mode1b-controls-container,
    .mode2-controls-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        /* MOBILE OPTIMIZED: Instant transitions to prevent loading delays */
        transition: opacity 0.05s ease-out, visibility 0.05s ease-out;
    }

    .classic-controls-container.active,
    .modern-controls-container.active,
    .mode1a-controls-container.active,
    .mode1b-controls-container.active,
    .mode2-controls-container.active {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        position: relative;
    }

    .mobile-dpad-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 1rem;
    }

    /* Smaller action buttons on mobile */
    .mobile-action-buttons {
        grid-template-columns: 36px 36px 36px;
        grid-template-rows: 36px 36px 36px;
        gap: 4px;
        width: 116px;
        height: 116px;
    }

    /* MOBILE OPTIMIZATION: Prevent ABXY button blinking during transitions */
    .mobile-action-buttons-container {
        transition: none !important; /* Remove transitions to prevent blinking */
    }

    .mobile-action-buttons,
    .mobile-action-btn {
        transition: none !important; /* Remove transitions to prevent blinking */
    }

    /* MOBILE OPTIMIZATION: Ensure D-pad mode is immediately visible on page load */
    .mode1a-controls-container {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: all !important;
        display: flex !important;
    }

    /* MOBILE OPTIMIZATION: Ensure other modes start hidden to prevent cycling */
    .mode1b-controls-container,
    .mode2-controls-container {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        display: none !important;
    }

    /* Smaller ABXY border on mobile - square like D-pad */
    .mobile-action-buttons::before {
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border-width: 2px;
        border-radius: 12px;
    }

    .mobile-action-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 1rem;
    }

    /* Smaller center elements on mobile */
    .mobile-action-center::before {
        width: 10px;
        height: 10px;
    }

    /* Square toggle button responsive sizing for mobile - increased for better touch targets */
    .square-toggle-button {
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 8px;
        /* Ensure proper touch target size and precise touch control for mobile devices */
        touch-action: none !important;
        -webkit-tap-highlight-color: transparent;
        /* Ensure highest z-index for touch priority */
        z-index: 20 !important;
    }

    .square-mode-indicator {
        width: 10px;
        height: 10px;
    }

    .square-loading-ring {
        border-width: 2px;
        width: calc(100% + 6px);
        height: calc(100% + 6px);
        border-radius: 6px;
    }



    .dpad {
        grid-template-columns: 36px 36px 36px;
        grid-template-rows: 36px 36px 36px;
        gap: 3px;
        width: 114px;
        height: 114px;
    }

    .action-buttons {
        grid-template-columns: 36px 36px 36px;
        grid-template-rows: 36px 36px 36px;
        gap: 3px;
        width: 114px;
        height: 114px;
    }

    .dpad-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 0.9rem;
        border-radius: 6px;
    }

    .action-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 0.9rem;
    }

    .card {
        width: 60px;
        height: 60px;
    }

    .card-icon {
        font-size: 1.2rem;
    }

    .card-text {
        font-size: 0.5rem;
    }

    /* Smaller padding for content on mobile */
    .settings-content,
    .save-content,
    .about-content {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    /* Smaller font sizes for mobile */
    .settings-section h3,
    .save-section h3 {
        font-size: 0.7rem;
    }

    .setting-item label {
        font-size: 0.6rem;
    }

    .setting-item input[type="range"] {
        width: 60px;
    }

    /* Mobile controls position slider */
    #controlsPosition {
        width: 80px;
    }

    /* Mobile controls spacing slider */
    #controlsSpacing {
        width: 80px;
    }

    .position-labels {
        width: 80px;
        font-size: 0.45rem;
    }

    .volume-value {
        font-size: 0.5rem;
    }

    /* Smaller save slots on mobile */
    .save-slot {
        padding: var(--spacing-xs);
        min-height: 40px;
    }

    .slot-number {
        width: 25px;
        height: 25px;
        font-size: 0.8rem;
    }

    .save-btn, .load-btn {
        font-size: 0.5rem;
        padding: 2px 6px;
        min-width: 35px;
    }

    /* Smaller toggle switches on mobile */
    .toggle-slider {
        width: 36px;
        height: 20px;
    }

    .toggle-knob {
        width: 14px;
        height: 14px;
        top: 1px;
        left: 1px;
    }

    .toggle-switch.active .toggle-knob {
        transform: translateX(16px);
    }

    .toggle-label {
        font-size: 0.6rem;
        min-width: 20px;
    }

    /* Headers and back buttons removed - using gaming controls */

    /* Mobile games screen */
    .games-indicators {
        gap: 6px;
        bottom: -12px;
    }

    .game-dot {
        width: 7px;
        height: 7px;
    }

    .console-card {
        width: 120px;
        height: 140px;
        padding: var(--spacing-xs);
    }

    /* Search Card - Mobile responsive */
    .console-card.search-card .search-results {
        width: 260px !important; /* Smaller on mobile */
        max-height: 250px !important;
    }

    .console-card.search-card .search-input {
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
    }

    .console-card.search-card .result-name {
        font-size: 0.75rem !important;
    }

    .console-card.search-card .result-console {
        font-size: 0.65rem !important;
    }

    .console-thumbnail {
        width: 70px;
        height: 70px;
        margin-bottom: var(--spacing-xs);
    }

    /* Mobile SVG icon adjustments */
    .console-thumbnail .console-icon {
        padding: 4px;
    }

    .console-fallback {
        font-size: 1.5rem;
    }

    .console-name {
        font-size: 0.65rem;
    }

    .games-main {
        padding: var(--spacing-md);
        gap: var(--spacing-md); /* Smaller gap on mobile */
        min-height: 0; /* Allow flexbox to work properly on mobile */
        transform: translateY(-4%); /* Maintain 4% up positioning on mobile */
    }

    .games-indicators {
        gap: 6px;
    }

    /* Level 2 mobile centering */
    .games-main.level-2 {
        padding: var(--spacing-sm);
    }
}

/* DISABLED: This media query was causing canvas overflow issues by conflicting with the main landscape layout */
/* The main landscape query at line 3531 provides the correct 380x365px container dimensions */
/* This query was setting container to 500px height which caused the 719px canvas height issue */
/*
@media (orientation: landscape) and (max-height: 600px) and (max-width: 767px) {
    .gaming-container {
        margin-top: 1vh;
        margin-bottom: 50px;
        min-height: 500px;
        width: min(85vw, 500px) !important;
        max-width: 500px !important;
    }

    .game-screen {
        margin: 15px auto 15px auto;
        height: calc(100% - 100px) !important;
        width: calc(100% - 30px) !important;
        max-width: none !important;
        min-height: 250px !important;
    }
*/

/* REPLACEMENT: Only apply mobile controls adjustments for this range, not container sizing */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 767px) {

    .mobile-controls {
        padding: var(--spacing-md) var(--spacing-lg);
        transform: translateY(-80%);
    }

    /* Landscape position adjustments */
    .mobile-controls.position-up {
        transform: translateY(-95%);
    }

    .mobile-controls.position-current {
        transform: translateY(-80%);
    }

    .mobile-controls.position-down {
        transform: translateY(-65%);
    }

    /* Landscape adjustments for new mobile controls - Split shoulder buttons */
    .shoulder-buttons {
        position: absolute !important;
        top: -60px !important; /* Move higher */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 0 !important;
        background: none !important;
        backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Individual shoulder button positioning for mobile landscape */
    .shoulder-btn.left-shoulder {
        position: absolute !important;
        left: calc(3vw + 8px) !important; /* Left corner with margin */
        top: 0 !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.15),
            rgba(var(--theme-primary-rgb), 0.25)) !important;
        backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(var(--theme-primary-rgb), 0.3) !important;
        border-radius: 7px !important;
        padding: 8px 14px !important; /* Larger padding for mobile landscape */
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15) !important;
    }

    .shoulder-btn.right-shoulder {
        position: absolute !important;
        right: calc(3vw + 8px) !important; /* Right corner with margin */
        top: 0 !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.15),
            rgba(var(--theme-primary-rgb), 0.25)) !important;
        backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(var(--theme-primary-rgb), 0.3) !important;
        border-radius: 7px !important;
        padding: 8px 14px !important; /* Larger padding for mobile landscape */
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15) !important;
    }

    .shoulder-btn {
        width: 60px !important; /* Much wider for mobile landscape */
        height: 38px !important; /* Taller for easier touch */
        min-width: 60px !important;
        min-height: 38px !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        border-radius: 7px !important;
        color: var(--theme-text-light) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
        letter-spacing: 0.6px !important; /* Better text spacing */
    }

    /* Console-like shoulder button interactions for mobile landscape */
    .shoulder-btn:active {
        transform: translateY(2px) !important; /* Press down effect */
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) !important;
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.25),
            rgba(var(--theme-primary-rgb), 0.35)) !important;
    }

    .shoulder-btn:hover {
        background: linear-gradient(145deg,
            rgba(var(--theme-primary-rgb), 0.2),
            rgba(var(--theme-primary-rgb), 0.3)) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    }

    .mobile-dpad {
        grid-template-columns: 38px 38px 38px;
        grid-template-rows: 38px 38px 38px;
        gap: 5px;
        width: 124px;
        height: 124px;
    }

    /* Landscape corner button - ALL corner buttons including Mode 2 */
    /* Standardized 64% ratio: 38px D-pad × 0.64 = 24px corner button */
    .dpad-corner-button,
    #dpadCornerButton,
    #cpadCornerButton,
    #joystickCornerButton {
        width: 24px !important; /* 64% of 38px D-pad button */
        height: 24px !important; /* 64% of 38px D-pad button */
        min-width: 24px !important; /* 64% of 38px D-pad button */
        min-height: 24px !important; /* 64% of 38px D-pad button */
        font-size: 0.77rem !important; /* Proportional font scaling */

        /* Ensure visibility in landscape */
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 9999 !important;
    }

    /* ABXY corner button - landscape sizing */
    /* Increased to meet 44px minimum touch target guideline for accessibility */
    .abxy-corner-button,
    #abxyCornerButton,
    #abxyCornerButton2,
    #abxyCornerButton3 {
        width: 44px !important; /* Minimum touch target size for mobile landscape accessibility */
        height: 44px !important; /* Minimum touch target size for mobile landscape accessibility */
        min-width: 44px !important; /* Minimum touch target size for mobile landscape accessibility */
        min-height: 44px !important; /* Minimum touch target size for mobile landscape accessibility */
        font-size: 0.9rem !important; /* Adjusted for larger button */

        /* Ensure visibility in landscape */
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 9999 !important;

        /* Adjust positioning for larger size */
        bottom: 2px !important;
        right: 2px !important;
    }

    /* Landscape joystick corner button positioning */
    .mode2-controls-container .analog-joystick-container .dpad-corner-button {
        /* Position to match D-pad grid: bottom-left corner between left and down positions */
        /* D-pad grid: 38px buttons + 5px gap = 43px spacing per cell */
        /* Corner button should be at grid position [2,0] (row 3, column 1) */
        bottom: 2px !important;  /* Closer to container edge for better visual integration */
        left: 2px !important;    /* Closer to container edge for better visual integration */
    }

    /* Landscape D-pad border */
    .mobile-dpad::before {
        top: -7px;
        left: -7px;
        right: -7px;
        bottom: -7px;
        border-width: 2px;
        border-radius: 14px;
    }

    /* Landscape C-Pad - identical to D-Pad */
    .mobile-cpad {
        grid-template-columns: 38px 38px 38px;
        grid-template-rows: 38px 38px 38px;
        gap: 5px;
        width: 124px;
        height: 124px;
    }

    .mobile-cpad::before {
        top: -7px;
        left: -7px;
        right: -7px;
        bottom: -7px;
        border-width: 2px;
        border-radius: 14px;
    }

    .cpad-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        font-size: 1.1rem;
    }

    /* Landscape Analog Joystick */
    .analog-joystick {
        width: 124px;
        height: 124px;
    }

    /* Landscape Analog Joystick border - square like D-pad/ABXY */
    .analog-joystick::before {
        top: -7px;
        left: -7px;
        right: -7px;
        bottom: -7px;
        border-width: 2px;
        border-radius: 14px;
    }

    .joystick-boundary {
        width: 85px;
        height: 85px;
    }

    .joystick-stick {
        width: 34px;
        height: 34px;
    }



    .mobile-dpad-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        font-size: 1.1rem;
    }

    .mobile-action-buttons {
        grid-template-columns: 38px 38px 38px;
        grid-template-rows: 38px 38px 38px;
        gap: 5px;
        width: 124px;
        height: 124px;
    }

    /* Landscape ABXY border - square like D-pad */
    .mobile-action-buttons::before {
        top: -7px;
        left: -7px;
        right: -7px;
        bottom: -7px;
        border-width: 2px;
        border-radius: 14px;
    }

    .mobile-action-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        font-size: 1.1rem;
    }

    /* Square toggle button landscape sizing - increased for better touch targets */
    .square-toggle-button {
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 8px;
        /* Ensure proper touch target size and precise touch control for mobile landscape */
        touch-action: none !important;
        -webkit-tap-highlight-color: transparent;
        /* Ensure highest z-index for touch priority */
        z-index: 20 !important;
    }

    .square-mode-indicator {
        width: 12px;
        height: 12px;
    }

    .square-loading-ring {
        border-width: 2.5px;
        width: calc(100% + 7px);
        height: calc(100% + 7px);
        border-radius: 7px;
    }



    /* Landscape center elements sizing */
    .mobile-action-center::before {
        width: 10px;
        height: 10px;
    }



    /* Adjust content for landscape */
    .settings-content,
    .save-content,
    .about-content {
        padding: var(--spacing-xs) var(--spacing-sm);
        height: 100%; /* Full height without header */
    }

    .settings-section,
    .save-section {
        margin-bottom: var(--spacing-md);
    }

    .setting-item {
        margin-bottom: var(--spacing-sm);
        padding: var(--spacing-xs);
    }

    /* Landscape games screen */
    .games-indicators {
        gap: 7px;
        bottom: -10px;
    }

    .game-dot {
        width: 8px;
        height: 8px;
    }

    .console-card {
        width: 130px;
        height: 150px;
        padding: var(--spacing-sm);
    }

    /* Search Card - Mobile landscape responsive */
    .console-card.search-card .search-results {
        width: 280px !important; /* Medium size for landscape */
        max-height: 280px !important;
    }

    .console-card.search-card .search-input {
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
    }

    .console-thumbnail {
        width: 75px;
        height: 75px;
        margin-bottom: var(--spacing-xs);
    }

    /* Landscape SVG icon adjustments */
    .console-thumbnail .console-icon {
        padding: 6px;
    }

    .console-fallback {
        font-size: 1.8rem;
    }

    .console-name {
        font-size: 0.7rem;
    }

    .games-main {
        padding: var(--spacing-md);
        gap: var(--spacing-md); /* Maintain gap in landscape */
        min-height: 0; /* Allow flexbox to work properly in landscape */
        transform: translateY(-4%); /* Maintain 4% up positioning in landscape */
    }

    .games-indicators {
        gap: 7px;
    }

    /* Level 2 landscape centering */
    .games-main.level-2 {
        padding: var(--spacing-sm);
    }
}

/* ===== SAMSUNG S8+ AND IPHONE SE LANDSCAPE FIX ===== */
/* CRITICAL FIX: Override problematic styles for Samsung S8+ (740x360px) and iPhone SE (667x375px) in landscape */
/* These devices were excluded from the main landscape query due to height < 400px constraint */
@media (orientation: landscape) and (min-width: 667px) and (max-width: 740px) and (min-height: 360px) and (max-height: 375px) {
    body {
        align-items: stretch !important;
        padding: 2vh 0 !important;
    }

    /* Apply the GOOD gaming container styles from the main landscape query */
    .gaming-container {
        width: 380px !important; /* Optimal size - not too big, not too small */
        height: calc(100vh - 4vh) !important; /* Full height minus top and bottom margins */
        max-width: 380px !important;
        min-height: 365px !important;
        max-height: calc(100vh - 4vh) !important;
        margin: 0 auto !important;
        padding: var(--spacing-md) !important;
        position: relative !important;
        top: 0 !important;
        /* Ensure game container has higher z-index than controls */
        z-index: 1100 !important;
    }

    /* Apply the GOOD game screen styles from the main landscape query */
    .game-screen {
        width: calc(100% - 24px) !important;
        height: calc(100% - 50px) !important;
        max-width: none !important;
        margin: 12px auto !important;
        position: relative !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        /* Ensure game screen is above all control overlays */
        z-index: 1200 !important;
        /* Enable touch events on game screen */
        pointer-events: auto !important;
        touch-action: auto !important;
    }

    /* Ensure Moboretro canvas and game elements are touchable in landscape mode */
    .game-screen canvas,
    .game-screen #game,
    .game-screen #emulator-container,
    .game-screen .ejs_game,
    .game-screen .ejs_canvas {
        pointer-events: auto !important;
        touch-action: auto !important;
        z-index: 1250 !important;
        position: relative !important;
    }

    /* Mobile controls spacing adjustments for Samsung S8+ and iPhone SE landscape */
    .mobile-controls.spacing-current .mobile-action-buttons-container {
        right: calc(0vw + 0px) !important;
    }

    .mobile-controls.spacing-current .mobile-dpad-container {
        left: calc(0vw + 0px) !important;
    }

    .mobile-controls.spacing-current .analog-joystick-container {
        left: calc(0vw + 0px) !important;
    }

    /* Emulator menu bar adjustments removed to prevent sizing issues */
}

/* ===== ADDITIONAL LANDSCAPE ORIENTATION FIX ===== */
/* Broader fix to ensure any landscape device with reasonable dimensions gets proper layout */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 800px) and (min-height: 350px) and (max-height: 400px) {
    body {
        align-items: stretch !important;
        padding: 2vh 0 !important;
    }

    /* Force proper gaming container dimensions for edge case devices */
    .gaming-container {
        width: min(380px, 90vw) !important;
        height: calc(100vh - 4vh) !important;
        max-width: 380px !important;
        min-height: 300px !important; /* Reduced minimum for very small screens */
        max-height: calc(100vh - 4vh) !important;
        margin: 0 auto !important;
        padding: var(--spacing-md) !important;
        position: relative !important;
        top: 0 !important;
        z-index: 1100 !important;
    }

    /* Responsive game screen for edge case devices */
    .game-screen {
        width: calc(100% - 24px) !important;
        height: calc(100% - 50px) !important;
        max-width: none !important;
        margin: 12px auto !important;
        position: relative !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1200 !important;
        pointer-events: auto !important;
        touch-action: auto !important;
        min-height: 200px !important; /* Ensure minimum playable area */
    }
}

/* ===== NEW MEDIA QUERIES FOR BRANDING-TEXT AND GAME-SCREEN ===== */

/* Branding text positioning for landscape orientation */
@media (orientation: landscape) and (min-height: 350px) and (max-width: 1023px) {
    .branding-text {
        position: absolute !important;
        top: 1vh !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-top: 0 !important;
        z-index: 1001 !important;
        font-size: 1rem !important;
    }
}

/* Game screen optimization for specific device dimensions */
@media (orientation: landscape) and (min-width: 662px) and (max-width: 672px) and (min-height: 370px) and (max-height: 380px) {
    .game-screen {
        width: calc(100% - 20px) !important;
        height: calc(100% - 25px) !important;
        margin: 0px auto !important;
        position: relative !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: contain !important;
    }
}

/* Settings Screen */
.settings-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.settings-content {
    padding: var(--spacing-sm) var(--spacing-md);
    overflow-y: auto;
    flex: 1;
    height: 100%; /* Full height without header */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.settings-section {
    margin-bottom: var(--spacing-lg);
}

/* About Screen */
.about-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.about-content {
    padding: var(--spacing-sm) var(--spacing-md);
    overflow-y: auto;
    flex: 1;
    height: 100%; /* Full height without header */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Save Screen */
.save-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.save-content {
    padding: var(--spacing-sm) var(--spacing-md);
    overflow-y: auto;
    flex: 1;
    height: 100%; /* Full height without header */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.settings-section h3 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--theme-secondary);
    padding-bottom: var(--spacing-xs);
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--theme-accent-dark);
    border-radius: var(--radius-sm);
}

.setting-item label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--theme-text);
    flex: 1;
}

.setting-item input[type="range"] {
    width: 80px;
    margin: 0 var(--spacing-sm);
    accent-color: var(--theme-primary);
    background: var(--theme-accent);
    border-radius: var(--radius-sm);
}

/* Custom styling for controls position slider */
#controlsPosition {
    width: 100px;
    background: linear-gradient(to right,
        var(--theme-primary) 0%,
        var(--theme-primary) 33%,
        var(--theme-secondary) 33%,
        var(--theme-secondary) 66%,
        var(--theme-primary) 66%,
        var(--theme-primary) 100%);
    height: 6px;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

#controlsPosition::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--theme-primary);
    border: 2px solid var(--theme-text-light);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#controlsPosition::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--theme-primary);
    border: 2px solid var(--theme-text-light);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Custom styling for controls spacing slider */
#controlsSpacing {
    width: 100px;
    background: linear-gradient(to right,
        var(--theme-primary) 0%,
        var(--theme-primary) 33%,
        var(--theme-secondary) 33%,
        var(--theme-secondary) 66%,
        var(--theme-primary) 66%,
        var(--theme-primary) 100%);
    height: 6px;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

#controlsSpacing::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--theme-primary);
    border: 2px solid var(--theme-text-light);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#controlsSpacing::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--theme-primary);
    border: 2px solid var(--theme-text-light);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Custom styling for volume sliders */
#masterVolume, #buttonSoundVolume {
    width: 80px;
    background: var(--theme-secondary);
    height: 6px;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

#masterVolume::-webkit-slider-thumb, #buttonSoundVolume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--theme-primary);
    border: 2px solid var(--theme-text-light);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#masterVolume::-moz-range-thumb, #buttonSoundVolume::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--theme-primary);
    border: 2px solid var(--theme-text-light);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: none; /* Remove default border for Firefox */
}

/* Controls position container and labels */
.controls-position-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.position-labels {
    display: flex;
    justify-content: space-between;
    width: 100px;
    font-size: 0.5rem;
    color: var(--theme-text);
    opacity: 0.7;
}

.position-labels span {
    text-align: center;
    flex: 1;
}

.setting-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--theme-primary);
}

.setting-item select {
    padding: var(--spacing-xs);
    border: 1px solid var(--theme-secondary);
    border-radius: var(--radius-sm);
    background: var(--theme-accent);
    color: var(--theme-text);
    font-family: inherit;
    font-size: 0.7rem;
}

.volume-value, .brightness-value {
    font-size: 0.6rem;
    color: var(--theme-text);
    min-width: 30px;
    text-align: right;
}

/* Toggle Switch Styling */
.toggle-switch {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.toggle-switch:hover {
    transform: scale(1.02);
}

.toggle-switch.mobile-focused {
    outline: 3px solid var(--theme-primary) !important;
    outline-offset: 2px !important;
    border-radius: 20px !important;
}

.toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--theme-secondary);
    border-radius: 12px;
    border: 2px solid var(--theme-secondary-dark);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-switch.active .toggle-slider {
    background: var(--theme-primary);
    border-color: var(--theme-primary-dark);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(var(--theme-primary-rgb), 0.3);
}

.toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--theme-text-light);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(0, 0, 0, 0.1);
}

.toggle-switch.active .toggle-knob {
    transform: translateX(20px);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.toggle-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--theme-text);
    min-width: 24px;
    transition: color 0.3s ease;
}

.toggle-switch.active .toggle-label {
    color: var(--theme-primary);
}

/* Gaming button styling for toggle switches */
.toggle-switch.gaming-button {
    border-radius: 20px;
    padding: 4px;
    background: transparent;
    border: none;
    outline: none;
}

.toggle-switch.gaming-button:hover {
    background: rgba(var(--theme-primary-rgb), 0.1);
}

.toggle-switch.gaming-button.pressed {
    transform: scale(0.98);
    background: rgba(var(--theme-primary-rgb), 0.2);
}

/* About Screen Content Styling */
.about-content h3:first-child {
    text-align: center;
    margin-top: 0;
}

.about-content h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-text);
    margin-bottom: var(--spacing-sm);
}

.about-content p {
    font-size: 0.8rem;
    color: var(--theme-text);
    margin-bottom: var(--spacing-sm);
    opacity: 0.8;
}

/* Contact Buttons Styling */
.contact-buttons {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    justify-content: center;
    align-items: flex-start;
}

.contact-button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 200px;
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, var(--theme-secondary), var(--theme-secondary-dark));
    border: 2px solid var(--theme-secondary);
    border-radius: 12px;
    color: var(--theme-text);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    font-size: 0.9rem;
    box-shadow: var(--shadow-button-rest);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    margin-bottom: var(--spacing-sm);
}

@media (hover: hover) and (pointer: fine) {
    .contact-btn:hover {
        background: linear-gradient(145deg, var(--theme-accent), var(--theme-accent-dark)) !important;
        border-color: var(--theme-primary) !important;
        color: var(--theme-text-light);
        box-shadow:
            0 6px 16px rgba(0, 0, 0, 0.3),
            0 0 0 2px var(--theme-primary-light);
        transform: translateY(-2px);
    }
}

.contact-btn:active {
    background: linear-gradient(145deg, var(--theme-accent-dark), var(--theme-secondary)) !important;
    transform: translateY(2px) scale(0.98) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        inset 0 3px 6px rgba(0, 0, 0, 0.2) !important;
}

.contact-description {
    font-size: 0.7rem !important;
    color: var(--theme-text) !important;
    opacity: 0.7 !important;
    text-align: center;
    line-height: 1.3;
    margin-bottom: 0 !important;
    padding: 0 var(--spacing-xs);
}

/* Mobile responsive adjustments for contact buttons */
@media (max-width: 480px) {
    .contact-buttons {
        flex-direction: row;
        gap: var(--spacing-sm);
        align-items: flex-start;
        justify-content: space-between;
        padding: 0 var(--spacing-xs);
    }

    .contact-button-group {
        flex: 1;
        max-width: calc(50% - var(--spacing-xs));
        min-width: 0;
    }

    .contact-btn {
        width: 100%;
        min-width: 70px;
        height: 70px;
        font-size: 0.8rem;
        padding: var(--spacing-xs);
    }

    .contact-description {
        font-size: 0.65rem !important;
        line-height: 1.2;
        text-align: center;
        word-wrap: break-word;
        hyphens: auto;
    }
}

/* Extra small mobile screens */
@media (max-width: 360px) {
    .contact-buttons {
        gap: var(--spacing-xs);
        padding: 0;
    }

    .contact-btn {
        height: 60px;
        font-size: 0.75rem;
        min-width: 60px;
    }

    .contact-description {
        font-size: 0.6rem !important;
        line-height: 1.1;
    }
}

.features {
    margin-top: var(--spacing-lg);
    text-align: left;
}

.features h4 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text);
    margin-bottom: var(--spacing-sm);
}

.features ul {
    list-style: none;
    padding: 0;
}

.features li {
    font-size: 0.7rem;
    color: var(--theme-text);
    margin-bottom: var(--spacing-xs);
    padding-left: var(--spacing-md);
    position: relative;
}

.features li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--theme-primary);
    font-weight: bold;
}

/* Save Screen Content Styling */

.save-section {
    margin-bottom: var(--spacing-lg);
}

.save-section h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-text);
    margin-bottom: var(--spacing-md);
}

.save-slots {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.save-slot {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm);
    background: var(--theme-accent-dark);
    border: 2px solid var(--theme-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    min-height: 50px;
}

.save-slot:hover {
    border-color: var(--theme-primary);
    transform: translateY(-1px);
}

.save-slot.empty {
    opacity: 0.7;
}

.save-slot.occupied {
    border-color: var(--theme-primary);
    background: var(--theme-primary-dark);
}

.slot-number {
    width: 30px;
    height: 30px;
    background: var(--theme-primary);
    color: var(--theme-text-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    margin-right: var(--spacing-sm);
    flex-shrink: 0;
}

.slot-info {
    flex: 1;
    color: var(--theme-text);
    font-size: 0.7rem;
    margin-right: var(--spacing-sm);
}

.slot-info .slot-game {
    font-weight: 600;
    margin-bottom: 2px;
}

.slot-info .slot-date {
    font-size: 0.6rem;
    color: var(--theme-text);
    opacity: 0.7;
}

.slot-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.save-btn, .load-btn, .export-btn, .import-btn, .clear-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--theme-secondary);
    background: var(--theme-accent-dark);
    color: var(--theme-text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.6rem;
    min-width: 40px;
    white-space: nowrap;
}

.save-btn:hover, .load-btn:hover, .export-btn:hover, .import-btn:hover {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
}

.clear-btn:hover {
    background: #dc3545;
    border-color: #dc3545;
}

.save-btn:disabled, .load-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.data-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.data-actions button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.8rem;
}

/* Game Player Screen */
.game-player-screen {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.game-title-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    padding: 4px 8px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
    /* Hide game title display */
    display: none !important;
}

.game-title-overlay.hidden {
    opacity: 0;
}

.current-game-title {
    color: var(--theme-text-light);
    font-size: 0.7rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    display: block;
    text-align: center;
}

.emulator-container {
    flex: 1;
    background: #000;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}



/* Utility Classes */
.hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.active {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Device-specific classes - Simplified for better performance */
.device-desktop .mobile-controls,
.immediate-desktop .mobile-controls,
.immediate-desktop #mobile-controls {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Show controls when needed */
.corner-button-active .device-desktop .mobile-controls,
.mode-switching .device-desktop .mobile-controls,
.game-player-active .device-desktop .mobile-controls,
.corner-button-active .immediate-desktop .mobile-controls,
.mode-switching .immediate-desktop .mobile-controls,
.game-player-active .immediate-desktop .mobile-controls {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* CRITICAL FIX: Force controls to remain visible during mode transitions */
.corner-button-active .mobile-controls,
.mode-switching .mobile-controls,
.game-player-active .mobile-controls {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
}

.corner-button-active .mode1a-controls-container,
.corner-button-active .mode1b-controls-container,
.corner-button-active .mode2-controls-container,
.mode-switching .mode1a-controls-container,
.mode-switching .mode1b-controls-container,
.mode-switching .mode2-controls-container {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
}

.device-desktop .mobile-dpad-container,
.device-desktop .mobile-action-buttons-container,
.device-desktop .shoulder-buttons,
.immediate-desktop .mobile-dpad-container,
.immediate-desktop .mobile-action-buttons-container,
.immediate-desktop .shoulder-buttons,
.immediate-desktop .mobile-dpad,
.immediate-desktop .mobile-action-buttons,
.immediate-desktop .mobile-dpad-btn,
.immediate-desktop .mobile-action-btn,
.immediate-desktop .shoulder-btn {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Desktop expansion for device-specific classes - Updated dimensions for better gaming experience */
.device-desktop .gaming-container, .immediate-desktop .gaming-container {
    width: 990px !important;
    height: 88vh !important;
    max-width: 1000px !important;
    min-height: 88vh !important;
}

/* Desktop card sizing - Make category and game cards bigger in desktop mode */
.device-desktop .console-card, .immediate-desktop .console-card {
    width: 180px !important;
    height: 230px !important;
    padding: calc(var(--spacing-sm) * 1.3) !important;
}

.device-desktop .console-thumbnail, .immediate-desktop .console-thumbnail {
    width: 110px !important;
    height: 110px !important;
    margin-bottom: calc(var(--spacing-sm) * 1.3) !important;
}

.device-desktop .console-name, .immediate-desktop .console-name {
    font-size: 1rem !important;
}

.device-desktop .console-game-count, .immediate-desktop .console-game-count {
    font-size: 0.8rem !important;
}

.device-desktop .game-card, .immediate-desktop .game-card {
    width: 160px !important;
    height: 180px !important;
    padding: calc(var(--spacing-sm) * 1.3) !important;
}

.device-desktop .game-card-carousel, .immediate-desktop .game-card-carousel {
    width: 200px !important;
    height: 250px !important;
    padding: calc(var(--spacing-sm) * 1.3) !important;
}

.device-desktop .game-thumbnail-carousel, .immediate-desktop .game-thumbnail-carousel {
    width: 130px !important;
    height: 130px !important;
    margin-bottom: calc(var(--spacing-sm) * 1.3) !important;
}

.device-desktop .game-name-carousel, .immediate-desktop .game-name-carousel {
    font-size: 1rem !important;
}

.device-desktop .card, .immediate-desktop .card {
    width: 100px !important;
    height: 100px !important;
    border-radius: calc(var(--radius-md) * 1.25) !important;
    padding: calc(var(--spacing-xs) * 1.25) !important;
}

.device-desktop .card-icon, .immediate-desktop .card-icon {
    font-size: 2rem !important;
    margin-bottom: calc(var(--spacing-xs) * 1.25) !important;
}

.device-desktop .card-title, .immediate-desktop .card-title,
.device-desktop .card-text, .immediate-desktop .card-text {
    font-size: 0.8rem !important;
}

.device-desktop .main-card, .immediate-desktop .main-card {
    border-radius: 10px !important;
}

/* Override body flexbox alignment for device-specific desktop classes to position container at top */
body.device-desktop,
body.immediate-desktop {
    align-items: flex-start !important;
    padding-top: 0 !important;
}

.device-desktop .game-screen,
.immediate-desktop .game-screen {
    width: calc(100% - 24px) !important;
    height: calc(100% - 80px) !important;
    max-width: none !important;
    margin: 12px auto 12px auto !important;
}

/* Desktop mode indicator removed - no visual indicator needed */

/* Mobile controls hidden state */
.mobile-controls.desktop-hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Desktop ads bottom bar - Override media query hiding */
.device-desktop .mobile-ad-banner,
.immediate-desktop .mobile-ad-banner {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50px !important;
    z-index: 1000 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px) !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Adjust gaming container bottom margin to accommodate ads bar */
.device-desktop .gaming-container,
.immediate-desktop .gaming-container {
    margin-bottom: 50px !important;
}

/* Override: Hide ads bar in landscape orientation even on desktop */
@media (orientation: landscape) {
    .device-desktop .mobile-ad-banner,
    .immediate-desktop .mobile-ad-banner {
        display: none !important;
    }

    /* Remove bottom margin when ads bar is hidden in landscape */
    .device-desktop .gaming-container,
    .immediate-desktop .gaming-container {
        margin-bottom: 0 !important;
    }
}

/* Enhanced navigation states */
.main-card {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.main-card:focus {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

.main-card.selected {
    transform: scale(1.05);
    z-index: 10;
}

/* Screen transition improvements */
.main-menu,
.games-screen,
.settings-screen,
.about-screen,
.save-screen,
.game-player-screen {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.main-menu.active,
.games-screen.active,
.settings-screen.active,
.about-screen.active,
.save-screen.active,
.game-player-screen.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.main-menu.hidden,
.games-screen.hidden,
.settings-screen.hidden,
.about-screen.hidden,
.save-screen.hidden,
.game-player-screen.hidden {
    opacity: 0;
    transform: translateX(-20px);
    pointer-events: none;
}

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

.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Transitions */
.transitioning {
    transition: all var(--transition-normal) ease-in-out;
}

/* ===== ENHANCED GAMING BUTTON SYSTEM ===== */

/* Base Gaming Button */
.gaming-button {
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    will-change: transform, box-shadow;
    border: none;
    outline: none;
}

/* Hover State - Desktop only */
@media (hover: hover) and (pointer: fine) {
    .gaming-button:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.3),
            0 0 0 1px var(--theme-primary-light);
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Focus State - Accessibility */
.gaming-button:focus,
.gaming-button:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
    box-shadow:
        0 0 0 3px rgba(var(--theme-primary-rgb), 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Active/Pressed State */
.gaming-button:active,
.gaming-button.pressed {
    transform: translateY(1px) scale(0.98);
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disabled State */
.gaming-button:disabled,
.gaming-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* Loading State */
.gaming-button.loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}

.gaming-button.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: gaming-spin 1s linear infinite;
}

/* Success/Error States */
.gaming-button.success {
    background: linear-gradient(145deg, #28a745, #1e7e34) !important;
    animation: gaming-success 0.3s ease;
}

.gaming-button.error {
    background: linear-gradient(145deg, #dc3545, #c82333) !important;
    animation: gaming-error 0.3s ease;
}

/* Animations */
@keyframes gaming-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes gaming-success {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes gaming-error {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
    .gaming-button,
    .gaming-button:hover,
    .gaming-button:focus,
    .gaming-button:active,
    .gaming-button.pressed,
    .shoulder-btn,
    .mobile-dpad-btn,
    .mobile-action-btn,
    .shoulder-btn.gaming-button,
    .mobile-dpad-btn.gaming-button,
    .mobile-action-btn.gaming-button,
    .shoulder-btn.gaming-button:hover,
    .mobile-dpad-btn.gaming-button:hover,
    .mobile-action-btn.gaming-button:hover,
    .shoulder-btn.gaming-button.pressing,
    .mobile-dpad-btn.gaming-button.pressing,
    .mobile-action-btn.gaming-button.pressing,
    .shoulder-btn.gaming-button.pressed,
    .mobile-dpad-btn.gaming-button.pressed,
    .mobile-action-btn.gaming-button.pressed,
    .shoulder-btn.gaming-button.releasing,
    .mobile-dpad-btn.gaming-button.releasing,
    .mobile-action-btn.gaming-button.releasing {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    /* Keep only essential focus indicators for accessibility */
    .gaming-button:focus,
    .gaming-button:focus-visible,
    .shoulder-btn.gaming-button:focus,
    .mobile-dpad-btn.gaming-button:focus,
    .mobile-action-btn.gaming-button:focus {
        outline: 2px solid var(--theme-primary) !important;
        outline-offset: 2px !important;
        box-shadow: none !important;
        transform: none !important;
    }
}



/* Reduced motion support for mobile focus */
@media (prefers-reduced-motion: reduce) {
    .mobile-focused {
        animation: none !important;
        transition: none !important;
    }
}



/* ===== ENHANCED SLIDER AND CONTROL STYLING ===== */

/* Enhanced slider styling for mobile navigation */
input[type="range"].mobile-focused {
    background: linear-gradient(145deg,
        rgba(var(--theme-primary-rgb), 0.2),
        rgba(var(--theme-primary-rgb), 0.1)
    ) !important;
    border: 2px solid var(--theme-primary) !important;
    box-shadow:
        0 0 0 3px rgba(var(--theme-primary-rgb), 0.3),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.2) !important;
}

/* Slider thumb enhancement */
input[type="range"].mobile-focused::-webkit-slider-thumb {
    background: linear-gradient(145deg, var(--theme-primary), var(--theme-primary-dark)) !important;
    border: 2px solid var(--theme-primary-light) !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(var(--theme-primary-rgb), 0.5) !important;
    transform: scale(1.2) !important;
}

input[type="range"].mobile-focused::-moz-range-thumb {
    background: linear-gradient(145deg, var(--theme-primary), var(--theme-primary-dark)) !important;
    border: 2px solid var(--theme-primary-light) !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(var(--theme-primary-rgb), 0.5) !important;
    transform: scale(1.2) !important;
}

/* Select dropdown enhancement */
select.mobile-focused {
    background: linear-gradient(145deg,
        rgba(var(--theme-primary-rgb), 0.1),
        rgba(var(--theme-primary-rgb), 0.05)
    ) !important;
    border: 2px solid var(--theme-primary) !important;
    color: var(--theme-text-light) !important;
}

/* Number input enhancement */
input[type="number"].mobile-focused {
    background: rgba(var(--theme-primary-rgb), 0.1) !important;
    border: 2px solid var(--theme-primary) !important;
    color: var(--theme-text-light) !important;
}

/* Checkbox enhancement */
input[type="checkbox"].mobile-focused {
    transform: scale(1.2) !important;
    box-shadow:
        0 0 0 3px rgba(var(--theme-primary-rgb), 0.4),
        0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Radio button enhancement */
input[type="radio"].mobile-focused {
    transform: scale(1.2) !important;
    box-shadow:
        0 0 0 3px rgba(var(--theme-primary-rgb), 0.4),
        0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Text input enhancement */
input[type="text"].mobile-focused {
    background: rgba(var(--theme-primary-rgb), 0.1) !important;
    border: 2px solid var(--theme-primary) !important;
    color: var(--theme-text-light) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Link enhancement */
a.mobile-focused {
    color: var(--theme-primary-light) !important;
    text-decoration: underline !important;
    text-shadow: 0 0 8px rgba(var(--theme-primary-rgb), 0.6) !important;
}

/* Slider adjustment feedback animation */
@keyframes slider-adjust {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

input[type="range"].adjusting {
    animation: slider-adjust 0.2s ease-out;
}





/* ===== LEVEL 2 GAME CAROUSEL STYLES ===== */

/* Level 2 - Individual Games with Dots Hidden (Full Height Centering) */
.games-main.level-2 {
    /* Take full height of the screen content area */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background: transparent;
    flex-direction: row; /* Override column for Level 2 */
    gap: 0; /* Remove gap for Level 2 */
    transform: none; /* Reset transform for Level 2 - keep games perfectly centered */
}

/* Hide dots in Level 2 */
.games-main.level-2 .games-indicators {
    display: none;
}

/* Ensure games-main transitions smoothly between states */
.games-main {
    transition: all var(--transition-fast);
    position: relative;
}

/* Game Card Carousel - Level 2 */
.game-card-carousel {
    width: 160px;
    height: 200px;
    background: var(--theme-accent);
    border: 2px solid var(--theme-secondary);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-fast);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* Ensure card is perfectly centered in full-height container */
    margin: 0 auto;
}

.game-card-carousel:hover {
    transform: translateY(-2px);
    border-color: var(--theme-primary);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15),
        0 6px 16px rgba(0, 0, 0, 0.4),
        0 0 0 2px var(--theme-primary);
}

.game-card-carousel.selected {
    border-color: var(--theme-primary) !important;
    background: var(--theme-accent-dark) !important;
    transform: scale(1.05) !important;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1),
        0 0 0 3px var(--theme-primary),
        0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Game Action Button - Clean Link Architecture */
.game-action-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    color: inherit;
    font-family: inherit;
    outline: none;
}

.game-action-button:focus {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

.game-action-button:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

/* Enhanced accessibility for game info */
.game-info-carousel {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--theme-text);
    text-align: center;
    opacity: 0.8;
    margin-top: var(--spacing-xs);
}

.game-console-carousel {
    font-size: 0.55rem;
    font-weight: 400;
    color: var(--theme-text);
    text-align: center;
    opacity: 0.7;
    margin-top: 2px;
}

/* Game Thumbnail Carousel */
.game-thumbnail-carousel {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
    position: relative;
    background: var(--theme-secondary);
}

.game-thumbnail-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all var(--transition-fast);
}

.game-card-carousel:hover .game-thumbnail-carousel img {
    transform: scale(1.05);
}

.game-card-carousel.selected .game-thumbnail-carousel img {
    transform: scale(1.1);
}

/* Game Image Carousel */
.game-image-carousel {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: all var(--transition-fast);
}

.game-card-carousel:hover .game-image-carousel {
    filter:
        drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3))
        brightness(1.1)
        contrast(1.1);
    transform: scale(1.05);
}

.game-card-carousel.selected .game-image-carousel {
    filter:
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4))
        brightness(1.2)
        contrast(1.2);
    transform: scale(1.1);
}

/* Game Fallback Carousel */
.game-fallback-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2.5rem;
    color: var(--theme-text);
    background: var(--theme-secondary);
    border-radius: var(--radius-sm);
    opacity: 0.8;
    transition: all var(--transition-fast);
}

.game-card-carousel:hover .game-fallback-carousel {
    opacity: 1;
    transform: scale(1.05);
}

.game-card-carousel.selected .game-fallback-carousel {
    opacity: 1;
    transform: scale(1.1);
    color: var(--theme-primary);
}

/* Game Name Carousel */
.game-name-carousel {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text);
    text-align: center;
    line-height: 1.2;
    margin: 0;
    margin-bottom: var(--spacing-xs);
    padding: 0 var(--spacing-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 2.4em;
}

/* Game Info Carousel */
.game-info-carousel {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--theme-text);
    text-align: center;
    opacity: 0.8;
    margin-bottom: var(--spacing-xs);
}

/* Game Overlay Carousel */
.game-overlay-carousel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.game-card-carousel:hover .game-overlay-carousel {
    opacity: 1;
}

/* Play Icon Carousel */
.play-icon-carousel {
    font-size: 2.5rem;
    color: var(--theme-primary);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Responsive adjustments for game carousel */
@media (max-width: 480px) {
    .game-card-carousel {
        width: 140px;
        height: 180px;
    }

    .game-thumbnail-carousel {
        width: 80px;
        height: 80px;
    }

    .game-name-carousel {
        font-size: 0.7rem;
    }

    .game-info-carousel {
        font-size: 0.55rem;
    }

    .play-icon-carousel {
        font-size: 2rem;
    }
}

/* ===== MEDIUM MOBILE SCREENS - FIX OVERLAPPING CONTROLS ===== */
/* Range: 481px-767px - Prevent D-pad and ABXY button overlapping */
/* Portrait orientation - primary fix */
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
    /* Adjust mobile controls container to prevent overlapping */
    .mobile-controls {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        padding: var(--spacing-md) var(--spacing-lg) !important; /* Reduced padding for smaller controls */
        margin-top: auto !important;
        transform: translateY(-50%) !important; /* Adjusted positioning */
        transition: transform var(--transition-normal) !important;
        position: relative !important;
        min-height: 130px !important; /* Reduced height for smaller controls */
    }

    /* Position adjustments for medium screens */
    .mobile-controls.position-up {
        transform: translateY(-65%) !important;
    }

    .mobile-controls.position-current {
        transform: translateY(-50%) !important;
    }

    .mobile-controls.position-down {
        transform: translateY(-35%) !important;
    }

    /* Ensure D-pad container has proper spacing */
    .mobile-dpad-container {
        position: relative !important;
        margin-right: auto !important;
        flex-shrink: 0 !important;
    }

    /* Ensure ABXY container has proper spacing */
    .mobile-action-buttons-container {
        position: relative !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    /* Smaller controls for medium screens to prevent overlapping */
    .mobile-dpad {
        grid-template-columns: 38px 38px 38px !important;
        grid-template-rows: 38px 38px 38px !important;
        gap: 5px !important;
        width: 124px !important;
        height: 124px !important;
    }

    .mobile-dpad-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 1.0rem !important;
    }

    .mobile-action-buttons {
        grid-template-columns: 38px 38px 38px !important;
        grid-template-rows: 38px 38px 38px !important;
        gap: 5px !important;
        width: 124px !important;
        height: 124px !important;
    }

    .mobile-action-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 1.0rem !important;
    }

    /* C-pad controls - matching D-pad sizing */
    .mobile-cpad {
        grid-template-columns: 38px 38px 38px !important;
        grid-template-rows: 38px 38px 38px !important;
        gap: 5px !important;
        width: 124px !important;
        height: 124px !important;
    }

    .cpad-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 1.0rem !important;
    }

    /* Analog joystick - matching overall sizing */
    .analog-joystick {
        width: 124px !important;
        height: 124px !important;
    }

    .joystick-boundary {
        width: 85px !important;
        height: 85px !important;
    }

    .joystick-stick {
        width: 34px !important;
        height: 34px !important;
    }

    /* Adjust borders for medium screens - smaller and consistent */
    .mobile-dpad::before {
        top: -7px !important;
        left: -7px !important;
        right: -7px !important;
        bottom: -7px !important;
        border-width: 2px !important;
        border-radius: 14px !important;
    }

    .mobile-action-buttons::before {
        top: -7px !important;
        left: -7px !important;
        right: -7px !important;
        bottom: -7px !important;
        border-width: 2px !important;
        border-radius: 14px !important;
    }

    /* C-pad border - matching D-pad/ABXY styling */
    .mobile-cpad::before {
        top: -7px !important;
        left: -7px !important;
        right: -7px !important;
        bottom: -7px !important;
        border-width: 2px !important;
        border-radius: 14px !important;
    }

    /* Analog joystick border - matching other controls */
    .analog-joystick::before {
        top: -7px !important;
        left: -7px !important;
        right: -7px !important;
        bottom: -7px !important;
        border-width: 2px !important;
        border-radius: 14px !important;
    }

    /* C-pad center circle - proportional sizing */
    .cpad-center::before {
        width: 11px !important;
        height: 11px !important;
    }

    /* Joystick knob - proportional sizing */
    .joystick-knob::after {
        width: 4px !important;
        height: 4px !important;
    }

    /* Adjust gaming container for medium screens */
    .gaming-container {
        width: min(calc(100vw - 20px), 450px) !important;
        padding: var(--spacing-sm) !important; /* Reduced padding for smaller controls */
    }
}

/* Landscape orientation - complementary fix for 481px-767px range */
@media (min-width: 481px) and (max-width: 767px) and (orientation: landscape) and (min-height: 400px) {
    /* Adjust mobile controls for landscape medium screens */
    .mobile-controls {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        padding: var(--spacing-sm) var(--spacing-md) !important; /* Reduced padding for smaller controls */
        margin-top: auto !important;
        transform: translateY(-60%) !important; /* Slightly different for landscape */
        transition: transform var(--transition-normal) !important;
        position: relative !important;
        min-height: 110px !important; /* Reduced height for smaller controls */
    }

    /* Position adjustments for landscape medium screens */
    .mobile-controls.position-up {
        transform: translateY(-75%) !important;
    }

    .mobile-controls.position-current {
        transform: translateY(-60%) !important;
    }

    .mobile-controls.position-down {
        transform: translateY(-45%) !important;
    }

    /* Ensure proper spacing for landscape */
    .mobile-dpad-container {
        position: relative !important;
        margin-right: auto !important;
        flex-shrink: 0 !important;
    }

    .mobile-action-buttons-container {
        position: relative !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    /* Smaller controls for landscape medium screens - matching portrait */
    .mobile-dpad {
        grid-template-columns: 38px 38px 38px !important;
        grid-template-rows: 38px 38px 38px !important;
        gap: 5px !important;
        width: 124px !important;
        height: 124px !important;
    }

    .mobile-dpad-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 1.0rem !important;
    }

    .mobile-action-buttons {
        grid-template-columns: 38px 38px 38px !important;
        grid-template-rows: 38px 38px 38px !important;
        gap: 5px !important;
        width: 124px !important;
        height: 124px !important;
    }

    .mobile-action-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 1.0rem !important;
    }

    /* C-pad controls - matching D-pad sizing */
    .mobile-cpad {
        grid-template-columns: 38px 38px 38px !important;
        grid-template-rows: 38px 38px 38px !important;
        gap: 5px !important;
        width: 124px !important;
        height: 124px !important;
    }

    .cpad-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 1.0rem !important;
    }

    /* Analog joystick - matching overall sizing */
    .analog-joystick {
        width: 124px !important;
        height: 124px !important;
    }

    .joystick-boundary {
        width: 85px !important;
        height: 85px !important;
    }

    .joystick-stick {
        width: 34px !important;
        height: 34px !important;
    }

    /* Borders for landscape medium screens - consistent with portrait */
    .mobile-dpad::before {
        top: -7px !important;
        left: -7px !important;
        right: -7px !important;
        bottom: -7px !important;
        border-width: 2px !important;
        border-radius: 14px !important;
    }

    .mobile-action-buttons::before {
        top: -7px !important;
        left: -7px !important;
        right: -7px !important;
        bottom: -7px !important;
        border-width: 2px !important;
        border-radius: 14px !important;
    }

    .mobile-cpad::before {
        top: -7px !important;
        left: -7px !important;
        right: -7px !important;
        bottom: -7px !important;
        border-width: 2px !important;
        border-radius: 14px !important;
    }

    .analog-joystick::before {
        top: -7px !important;
        left: -7px !important;
        right: -7px !important;
        bottom: -7px !important;
        border-width: 2px !important;
        border-radius: 14px !important;
    }

    /* Small detail elements - proportional sizing */
    .cpad-center::before {
        width: 11px !important;
        height: 11px !important;
    }

    .joystick-knob::after {
        width: 4px !important;
        height: 4px !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .game-card-carousel {
        width: 150px;
        height: 190px;
    }

    .game-thumbnail-carousel {
        width: 90px;
        height: 90px;
    }

    .game-name-carousel {
        font-size: 0.72rem;
    }
}

/* ===== DEVICE-SPECIFIC OPTIMIZATIONS ===== */

/* Mobile Device Optimizations */
.device-mobile .main-card,
.device-mobile .console-card,
.device-mobile .game-card-carousel {
    /* Larger touch targets for mobile */
    min-height: 110px;
    padding: 12px;
}

.device-mobile .main-card .card-title,
.device-mobile .console-name,
.device-mobile .game-name-carousel {
    /* Better readability on small screens */
    font-size: 0.9rem;
    line-height: 1.3;
}

.device-mobile .game-card-carousel {
    /* Optimized spacing for mobile */
    margin: 8px;
    border-radius: 12px;
}

.device-mobile .search-input {
    /* Prevent zoom on iOS */
    font-size: 16px !important;
    padding: 12px 16px;
    min-height: 44px;
}

/* Tablet Device Optimizations */
.device-tablet .main-card,
.device-tablet .console-card,
.device-tablet .game-card-carousel {
    /* Comfortable touch targets for tablets */
    min-height: 140px;
    padding: 16px;
}

.device-tablet .main-card .card-title,
.device-tablet .console-name {
    font-size: 1.1rem;
}

.device-tablet .game-card-carousel {
    margin: 10px;
    border-radius: 14px;
}

.device-tablet .search-input {
    font-size: 18px;
    padding: 14px 20px;
    min-height: 48px;
}

/* Desktop Device Optimizations */
.device-desktop .main-card:hover,
.device-desktop .console-card:hover,
.device-desktop .game-card-carousel:hover {
    /* Enhanced hover effects for desktop */
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.device-desktop .game-card-carousel {
    /* Precise cursor interactions */
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Touch Device Optimizations */
.touch-device .main-card,
.touch-device .console-card,
.touch-device .game-card-carousel {
    /* Touch-friendly interactions */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.touch-device .main-card:active,
.touch-device .console-card:active,
.touch-device .game-card-carousel:active {
    /* Touch feedback */
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* Non-touch Device Optimizations */
.non-touch-device .main-card:hover,
.non-touch-device .console-card:hover,
.non-touch-device .game-card-carousel:hover {
    /* Hover effects only for non-touch devices */
    transform: translateY(-1px);
}



/* Search Interface Device Optimizations */
.device-mobile .search-results-container {
    padding: 8px;
}

.device-mobile .search-result-item {
    padding: 12px;
    min-height: 60px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.device-tablet .search-results-container {
    padding: 12px;
}

.device-tablet .search-result-item {
    padding: 16px;
    min-height: 70px;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* Advertisement Overlay Device Optimizations */
.device-mobile .advertisement-overlay {
    /* Mobile-friendly ad positioning */
    padding: 16px;
    border-radius: 12px;
}

.device-tablet .advertisement-overlay {
    /* Tablet-optimized ad sizing */
    padding: 20px;
    border-radius: 16px;
}

/* Save/Load State Overlay Device Optimizations */
.device-mobile .save-load-overlay .overlay-button {
    /* Larger touch targets for mobile */
    min-height: 50px;
    padding: 12px 20px;
    font-size: 14px;
}

.device-tablet .save-load-overlay .overlay-button {
    /* Comfortable tablet touch targets */
    min-height: 55px;
    padding: 14px 24px;
    font-size: 16px;
}