/* ===========================================
   WITTYBLITZ KIDS - GLOBAL FIXES CSS
   Soluciona problemas de scroll horizontal,
   normaliza botones y mejora experiencia móvil
   =========================================== */

/* ============ MOBILE SCROLL FIX ============ */
html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
    -webkit-overflow-scrolling: touch;
}

/* Prevenir scroll horizontal en contenedores */
.game-container,
.game-area,
.main-container,
[class*="container"] {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* ============ TOUCH IMPROVEMENTS ============ */
* {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Prevenir zoom en doble tap */
button,
.boton,
.btn,
[class*="btn"],
[class*="boton"],
input,
select,
textarea {
    touch-action: manipulation;
}

/* ============ NORMALIZED BUTTONS ============ */
.wk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    text-decoration: none;
    color: white;
    min-height: 44px; /* Touch target size */
    min-width: 44px;
}

.wk-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.wk-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.wk-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Button Colors */
.wk-btn-menu,
.wk-btn-purple {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
}

.wk-btn-next,
.wk-btn-green,
.wk-btn-success {
    background: linear-gradient(135deg, #00b894, #55efc4);
}

.wk-btn-repeat,
.wk-btn-pink {
    background: linear-gradient(135deg, #fd79a8, #e84393);
}

.wk-btn-reset,
.wk-btn-red,
.wk-btn-danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.wk-btn-yellow,
.wk-btn-warning {
    background: linear-gradient(135deg, #fdcb6e, #f39c12);
}

.wk-btn-blue,
.wk-btn-primary {
    background: linear-gradient(135deg, #74b9ff, #0984e3);
}

.wk-btn-cyan,
.wk-btn-secondary {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
}

.wk-btn-orange {
    background: linear-gradient(135deg, #ff7675, #d63031);
}

/* Legacy button compatibility - normalizar botones existentes */
.boton,
.btn,
.control-btn,
.mode-btn,
.mission-btn,
.play-again-btn,
button[class*="boton"],
button[class*="btn"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    color: white;
    min-height: 44px;
    min-width: 44px;
}

.boton:hover,
.btn:hover,
.control-btn:hover,
.mode-btn:hover,
.mission-btn:hover,
.play-again-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.boton:active,
.btn:active,
.control-btn:active,
.mode-btn:active,
.mission-btn:active,
.play-again-btn:active {
    transform: translateY(0);
}

/* Common inline button color overrides - estos preservan los colores inline */
.boton[style*="background"],
.btn[style*="background"],
button[style*="background"] {
    /* Ensure inline styles are not overwritten */
}

/* ============ RESPONSIVE FIXES ============ */
@media (max-width: 768px) {
    /* Ensure no horizontal overflow */
    body, html {
        overflow-x: hidden !important;
    }

    /* Fix absolute positioned elements */
    [style*="position: absolute"],
    [style*="position:absolute"] {
        max-width: 100vw;
    }

    /* Prevent elements from causing overflow */
    img, video, iframe, canvas, svg {
        max-width: 100% !important;
        height: auto;
    }

    /* Button controls at bottom */
    .botones-control,
    .controles {
        position: fixed !important;
        bottom: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 20px) !important;
        max-width: 400px !important;
        height: auto !important;
        max-height: 120px !important;
        min-height: unset !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 10px !important;
        background: rgba(255,255,255,0.95) !important;
        border-radius: 20px !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
        z-index: 1000 !important;
    }

    .botones-control .boton,
    .controles .boton {
        flex: 1 1 auto;
        min-width: 80px;
        max-width: 150px;
        padding: 10px 15px;
        font-size: 14px;
    }

    /* Add padding at bottom for fixed controls */
    .game-container {
        padding-bottom: 100px !important;
    }

    /* Witty character positioning */
    .witty {
        position: fixed !important;
        bottom: 90px !important;
        right: 15px !important;
        font-size: 50px !important;
        z-index: 999 !important;
    }

    /* Message positioning */
    .mensaje-witty {
        position: fixed !important;
        top: 65% !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        max-width: 90% !important;
        width: auto !important;
        font-size: 14px !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .botones-control .boton,
    .controles .boton,
    .controls .btn {
        padding: 8px 12px;
        font-size: 12px;
        min-width: 70px;
    }

    .wk-btn {
        padding: 10px 18px;
        font-size: 14px;
    }
}

/* ============ SCROLL FIXES ============ */
/* Ensure proper scrolling on game containers */
.game-container {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Fix game-area height issues on mobile */
@media (max-width: 768px) {
    /* Ensure content can scroll */
    .house-container,
    .theater-stage,
    .park-overview,
    .space-map,
    .scene-container,
    .game-board,
    .activity-area {
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Note: iOS Safari bounce fix removed - was causing layout issues */

/* ============ UTILITY CLASSES ============ */
.no-scroll {
    overflow: hidden !important;
}

.hide-overflow {
    overflow: hidden !important;
}

.scroll-y {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

/* ============ ANIMATION FIXES ============ */
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============ SAFE AREA PADDING ============ */
/* Support for notched devices */
@supports (padding: max(0px)) {
    .game-container {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
        padding-bottom: max(15px, env(safe-area-inset-bottom));
    }

    .botones-control,
    .controles {
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
}