/*
 * mobile.css — Reglas responsivas comunes para todos los niveles
 * Se complementa con las reglas específicas de cada juego en su propio <style>
 */

/* Evitar desbordamiento horizontal en cualquier pantalla */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, canvas, svg, table {
    max-width: 100%;
}

video {
    max-width: 100%;
    height: auto;
}

.level-shell,
.game-wrapper,
.container {
    max-width: 100%;
}

/* ─── Reglas para pantallas pequeñas (≤ 600px) ───────────────────────── */
@media (max-width: 600px) {

    body {
        padding: 10px !important;
        margin: 0 !important;
    }

    h1 {
        font-size: 1.3em !important;
        margin-top: 10px !important;
    }

    h2 {
        font-size: 1.1em !important;
    }

    /* Botones con zona táctil mínima recomendada (44px) */
    button {
        min-height: 44px !important;
        font-size: 15px !important;
        padding: 10px 18px !important;
        touch-action: manipulation;
    }

    /* font-size: 16px evita el zoom automático en iOS al hacer foco */
    input[type="text"],
    input[type="number"],
    input:not([type="submit"]):not([type="button"]) {
        font-size: 16px !important;
        min-height: 36px;
    }

    select {
        font-size: 16px !important;
        min-height: 44px;
    }

    /* Estrellas (clase .star y .estrella usadas en varios niveles) */
    .star, .estrella {
        font-size: 22px !important;
    }

    /* Temporizador */
    #timer {
        font-size: 18px !important;
    }

    /* Mensajes de retroalimentación */
    #message, #secondary-message {
        font-size: 16px !important;
    }

    /* Contenedores tipo tarjeta */
    .container {
        padding: 15px 12px !important;
        margin: 0 auto !important;
        width: 95% !important;
        max-width: 100% !important;
    }

    .timer-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .timer,
    #timer {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .button,
    .feedback-button {
        width: 100% !important;
    }

    .game-wrapper,
    .level-shell {
        width: 100% !important;
    }

    .feedback-content,
    .warning-message {
        width: min(100%, 94vw) !important;
    }
}

@media (max-width: 480px) {

    body {
        padding: 8px !important;
    }

    h1 {
        font-size: 1.15em !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 1em !important;
        line-height: 1.25 !important;
    }

    .game-wrapper,
    .container {
        width: 100% !important;
        padding: 18px 14px !important;
        border-radius: 20px !important;
    }

    .level-shell {
        width: 100% !important;
    }

    #contenedor {
        width: min(100%, 320px) !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
    }

    #estrellas {
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    .response-container label,
    #prompt,
    #message,
    #secondary-message {
        font-size: 15px !important;
    }

    .feedback-content {
        padding: 24px 18px !important;
        border-radius: 18px !important;
    }

    .warning-message {
        padding: 14px !important;
    }
}