/**
 * Game Boy Interface - Estilos Responsive
 * Adaptaciones para diferentes tamaños de pantalla
 * v1.1 - Fixed touch device transforms
 */

/* ========================================
   DESKTOP GRANDE (>1200px)
   Controles más pequeños y discretos
   ======================================== */

@media (min-width: 1200px) {
    .gameboy-controller {
        opacity: 0.8;
        transition: opacity 0.3s ease;
    }

    .gameboy-controller:hover {
        opacity: 1;
    }
}

/* ========================================
   TABLET Y DESKTOP PEQUEÑO (768px - 1199px)
   Controles un poco más grandes
   ======================================== */

@media (max-width: 1199px) and (min-width: 768px) {
    .gameboy-controls {
        gap: 50px;
        padding: 18px;
    }

    .gameboy-dpad {
        width: 90px;
        height: 90px;
    }

    .dpad-up,
    .dpad-down {
        width: 28px;
        height: 32px;
    }

    .dpad-left,
    .dpad-right {
        width: 32px;
        height: 28px;
    }

    .dpad-center {
        width: 28px;
        height: 28px;
    }

    .game-btn {
        width: 45px;
        height: 45px;
        font-size: 14px;
    }
}

/* ========================================
   MÓVIL LANDSCAPE (orientación horizontal)
   ======================================== */

@media (max-width: 767px) and (orientation: landscape) {
    .gameboy-controller {
        bottom: 10px;
        right: 10px;
    }

    .gameboy-controls {
        gap: 30px;
        padding: 12px;
        
    }

    .gameboy-dpad {
        width: 70px;
        height: 70px;
    }

    .dpad-up,
    .dpad-down {
        width: 22px;
        height: 26px;
    }

    .dpad-left,
    .dpad-right {
        width: 26px;
        height: 22px;
    }

    .dpad-center {
        width: 22px;
        height: 22px;
    }

    .game-btn {
        width: 35px;
        height: 35px;
        font-size: 12px;
    }

    .gameboy-buttons {
        gap: 10px;
    }
}

/* ========================================
   MÓVIL PORTRAIT (767px y menos)
   Controles centrados en la parte inferior
   ======================================== */

@media (max-width: 767px) and (orientation: portrait) {
    .gameboy-controller {
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .gameboy-controls {
        width: 100%;
        max-width: 500px;
        --c: 15px;
        mask: radial-gradient(55% var(--c) at top, #0000 calc(100% - 1px), #000);
        background: linear-gradient(135deg, #3f3f3f40 0%, #2a2a2a80 100%);
        gap: 40px;
        padding: 20px;
        box-shadow:
            0 -5px 20px var(--gb-shadow),
            inset 0px 0px 20px 10px #00000052;
    }

    .gameboy-dpad {
        width: 100px;
        height: 100px;
    }

    .dpad-up,
    .dpad-down {
        width: 30px;
        height: 35px;
    }

    .dpad-left,
    .dpad-right {
        width: 35px;
        height: 30px;
    }

    .dpad-center {
        width: 30px;
        height: 30px;
    }

    .game-btn {
        width: 55px;
        height: 55px;
        font-size: 18px;
    }

    .gameboy-buttons {
        gap: 15px;
    }
}

/* ========================================
   MÓVILES PEQUEÑOS (<400px)
   Controles aún más compactos
   ======================================== */

@media (max-width: 399px) {
    .gameboy-controls {
        gap: 25px;
        padding: 15px;
    }

    .gameboy-dpad {
        width: 80px;
        height: 80px;
    }

    .dpad-up,
    .dpad-down {
        width: 24px;
        height: 28px;
    }

    .dpad-left,
    .dpad-right {
        width: 28px;
        height: 24px;
    }

    .dpad-center {
        width: 24px;
        height: 24px;
    }

    .dpad-arrow {
        font-size: 12px;
    }

    .game-btn {
        width: 45px;
        height: 45px;
        font-size: 14px;
    }

    .gameboy-buttons {
        gap: 12px;
    }
}

/* ========================================
   AJUSTES PARA TOUCH DEVICES
   Áreas táctiles más grandes
   ======================================== */

@media (hover: none) and (pointer: coarse) {
    /* Aumentar áreas táctiles para mejor UX */
    .dpad-btn,
    .game-btn {
        padding: 8px;
    }

    /* Eliminar hover effects en touch pero preservar posicionamiento */
    .dpad-up:hover,
    .dpad-down:hover {
        transform: translateX(-50%);
        background: var(--gb-dark-gray);
    }

    .dpad-left:hover,
    .dpad-right:hover {
        transform: translateY(-50%);
        background: var(--gb-dark-gray);
    }

    .game-btn:hover {
        transform: none;
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    }

    .btn-a:hover,
    .btn-b:hover {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    }

    /* Feedback más visible en touch - preservar posicionamiento */
    .dpad-up:active,
    .dpad-up.active {
        transform: translateX(-50%) scale(0.92);
    }

    .dpad-down:active,
    .dpad-down.active {
        transform: translateX(-50%) scale(0.92);
    }

    .dpad-left:active,
    .dpad-left.active {
        transform: translateY(-50%) scale(0.92);
    }

    .dpad-right:active,
    .dpad-right.active {
        transform: translateY(-50%) scale(0.92);
    }

    .game-btn:active,
    .game-btn.active {
        transform: scale(0.92);
    }
}

/* ========================================
   MODO REDUCCIÓN DE MOVIMIENTO
   Respetar preferencias de accesibilidad
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .gameboy-controller,
    .gameboy-controls,
    .dpad-btn,
    .game-btn {
        transition: none !important;
        animation: none !important;
    }
}