/* --- CORRECCIÓN INTEGRACIÓN (Sin Flex en Body) --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    /* Eliminamos display:flex y min-height:100vh para no bloquear clicks y permitir scroll */
    background-color: var(--color-fondo);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--color-texto);
    padding-top: 0px; 
}

/* Marco Dinámico y Contenedor Principal */
.game-container {
    background-color: #3a3f47;
    border-radius: 15px;
    border: 8px solid #4CAF50;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 900px;
    margin: 20px auto; /* Centrado normal */
    height: auto;
    min-height: 700px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

/* --- TODO TU CSS ORIGINAL MANTENIDO --- */

.game-container.difficulty-facil { border-color: #4CAF50; }
.game-container.difficulty-medio { border-color: #FFC107; }
.game-container.difficulty-dificil { border-color: #D84315; }

.game-header { background-color: #2c313a; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid rgba(0,0,0,0.2); }
.game-main { display: flex; flex: 1; padding: 20px; gap: 20px; overflow: hidden; }
.game-panel-wrapper { flex: 3; display: flex; flex-direction: column; }
#historyLog { flex: 1; background: #212529; border-radius: 8px; padding: 15px; color: #00ff00; font-family: 'Courier New', monospace; overflow-y: auto; border: 1px solid #444; min-width: 250px; }
.game-panel { display: none; flex-direction: column; flex-grow: 1; }
.game-panel.active { display: flex; }

.letters-display { display: flex; justify-content: center; gap: 10px; margin: 20px 0; min-height: 70px; }
.letter-tile { width: 60px; height: 70px; background-color: #4b5363; border: 2px solid #616a7d; border-radius: 8px; font-size: 2rem; font-weight: bold; display: flex; justify-content: center; align-items: center; cursor: pointer; text-transform: uppercase; transition: all 0.2s; }
.letter-tile.disabled { background-color: #2a2e35; color: #555; border-color: #2a2e35; cursor: not-allowed; }

.numbers-initial-display { display: flex; justify-content: center; gap: 10px; margin-bottom: 15px; }
.number-tile { width: 65px; height: 65px; background-color: #2196F3; border: none; border-radius: 8px; font-size: 1.5rem; font-weight: bold; color: white; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: transform 0.1s, opacity 0.2s; }
.number-tile.selected { transform: scale(1.1); box-shadow: 0 0 10px white; background-color: #1976D2; }
.number-tile.disabled { background-color: #555 !important; color: #888 !important; cursor: not-allowed; transform: none; box-shadow: none; }
.target-display { text-align: center; font-size: 1.8rem; font-weight: bold; margin-bottom: 15px; color: #4CAF50; }

.cifras-operations-history { height: 250px; min-height: 250px; max-height: 250px; background-color: rgba(0, 0, 0, 0.2); border-radius: 8px; padding: 10px; margin-bottom: 5px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.operation-preview { min-height: 30px; font-size: 1.3rem; font-family: monospace; color: #FFC107; text-align: center; margin-bottom: 10px; font-style: italic; opacity: 0.9; }
.cifras-operators { display: flex; justify-content: center; gap: 10px; margin-top: 15px; margin-bottom: 15px; }
.cifras-operations-history::-webkit-scrollbar { width: 8px; }
.cifras-operations-history::-webkit-scrollbar-thumb { background-color: #616a7d; border-radius: 4px; }
.operation-row { display: flex; align-items: center; justify-content: space-between; background-color: #2c313a; padding: 8px 15px; border-radius: 6px; }
.operation-expr { font-size: 1.2rem; font-family: monospace; flex-grow: 1;}
.undo-btn { background-color: #D84315; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; margin-left: 15px; }

.operator-btn { width: 50px; height: 50px; font-size: 1.5rem; border-radius: 8px; cursor: pointer; border:none; background-color: #FF9800; color:white; }
.operator-btn.selected { transform: scale(1.1); background-color: #F57C00; box-shadow: 0 0 10px white;}
.buttons-row, .mode-switch-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 15px; flex-wrap: wrap;}
.action-btn { padding: 10px 20px; font-size: 1rem; border-radius: 6px; cursor: pointer; border: none; font-weight: bold;}
.action-btn.success { background-color: #4CAF50; color: white; }
.action-btn.action { background-color: #2196F3; color: white; }
.action-btn.action:disabled { background-color: #555; color: #888; cursor:not-allowed;}
.action-btn.outline { background-color: transparent; border: 2px solid #ccc; color: white; }

input[type="text"], input[type="number"] { padding: 10px; font-size: 1.1rem; border-radius: 6px; border: 1px solid #555; background: #fff; color: #000;}
#wordInput { width: 100%; max-width: 400px; margin: 0 auto 15px; display: block; text-align: center; text-transform: uppercase;}
.mode-btn { padding: 12px 24px; font-size: 1.1rem; border-radius: 6px; cursor: pointer; border: none; }
.mode-btn.primary { background-color: #4CAF50; color: white;}
.timer-container { background: #2c313a; padding: 10px 20px; font-size: 1.5rem; font-weight: bold; border-radius: 8px; color: #FFC107; }

.modal { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.8); justify-content: center; align-items: center; z-index: 100;}
.modal.show { display: flex; }
.modal-content { background: #3a3f47; padding: 25px; border-radius: 10px; max-width: 500px; width: 90%; color: white; position: relative;}
.close-button { position: absolute; right: 15px; top: 10px; font-size: 1.5rem; cursor: pointer; }

/* Integración Final */
.mu-mode-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 9999; padding: 15px; border-radius: 50%; border: none; background: #FFE81A; cursor: pointer; }
body.light-mode { background-color: #FAFAFA; color: #111111; }
body.light-mode .game-container { background-color: #ffffff; border-color: #ccc; }
body.light-mode .game-header { background-color: #f0f0f0; }

/* --- ADAPTACIÓN MÓVIL --- */
@media (max-width: 768px) {
    /* 1. Ajustar el contenedor para que no se salga de la pantalla */
    .game-container {
        width: 95% !important;
        margin-top: 10px !important;
        min-height: auto !important;
        padding: 10px;
    }

    /* 2. Cambiar la disposición de Horizontal a Vertical */
    .game-main {
        flex-direction: column;
        padding: 10px;
    }

    /* 3. Ajustar el historial para que no sea tan alto */
    #historyLog {
        min-height: 150px;
        max-height: 200px;
        margin-top: 15px;
    }

    /* 4. Botones: Hacerlos más grandes para el dedo */
    .action-btn, .mode-btn, .operator-btn {
        padding: 15px !important;
        font-size: 1.1rem !important;
        min-height: 50px;
    }

    /* 5. Inputs: Asegurar que el teclado no los oculte */
    #wordInput {
        font-size: 1rem;
        padding: 12px;
    }
    
    /* 6. Header: Si el texto del header se corta, reducimos el padding */
    .mu-navbar {
        padding: 0 10px;
    }
}