/* =========================================================
   Móvil en vertical (teléfono): botones y letras grandes, sin espacios vacíos.
   Solo vale con <html class="movil"> (escala.js) y la pantalla en vertical.
   Medidas en «px de teléfono»: si Safari muestra una ventana virtual más ancha, escala.js amplía los
   contenedores con zoom (--escala) y --alto es el alto visible ya dividido por esa escala.
   ========================================================= */
@media (orientation: portrait) {

html.movil { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---------- Menú principal ---------- */
html.movil #mode-selection-modal { padding: 10px 12px 12px; justify-content: space-between; justify-content: safe center; gap: 10px; }
html.movil #teacher-bar { position: static; margin: 0; flex: 0 0 auto; justify-content: center; max-width: none; }
html.movil #teacher-bar .chip-button { min-height: 52px; font-size: 1.15em; padding: 10px 20px; }
html.movil #teacher-bar .settings-gear { min-width: 52px; padding: 10px 14px; font-size: 1.3em; }
html.movil #logo-container { flex: 1 1 0; min-height: 80px; max-height: 190px; width: 100%; margin: 0; padding: 8px 0; overflow: visible; display: flex; align-items: center; justify-content: center; }
html.movil #game-logo { width: auto; max-width: 84%; height: auto; max-height: 100%; object-fit: contain; animation-name: pulsando-movil; }
@keyframes pulsando-movil { 0%, 100% { transform: scale(1.06); opacity: 1; } 50% { transform: scale(0.98); opacity: 0.6; } }
html.movil #mode-selection-area { flex: 0 0 auto; max-width: none; margin: 0; padding: 18px 16px 8px; }
html.movil #mode-selection-area h2 { font-size: 2em; margin: 0 0 4px; }
html.movil #mode-hint { font-size: 1.02em; padding-right: 0; margin: 0 0 14px; }
html.movil #mode-selection-area .mode-button { margin-bottom: 16px; padding: 22px 12px; font-size: 1.8em; border-radius: 20px; }
html.movil #mute-toggle-button-container { flex: 0 0 auto; max-width: none; font-size: 1.15em; margin: 0; }
html.movil #mute-toggle-button { height: 56px; width: 56px; }

/* ---------- Paneles y diálogos ---------- */
html.movil .modal { padding: 10px 12px; }
html.movil #time-selection-area, html.movil #player-name-area, html.movil #ranking-area, html.movil .panel { max-width: none; padding: 18px 14px; }
html.movil #time-selection-area, html.movil #player-name-area, html.movil #ranking-area, html.movil .panel { max-height: calc(var(--alto, 100dvh) - 20px); overflow-y: auto; }
html.movil .modal h2 { font-size: 1.7em; margin: 0 0 4px; }
html.movil #options-area h2 { font-size: 1.5em; margin: 0; }
html.movil .modal .panel-subtitle, html.movil #time-selection-area p { font-size: 1.15em; }
html.movil .modal .mode-button { padding: 16px 14px; font-size: 1.5em; }
html.movil .close-x { width: 52px; height: 52px; font-size: 1.4em; top: 12px; right: 12px; }
html.movil .modal input[type="text"], html.movil .modal input:not([type]) { font-size: 1.4em; padding: 16px; }

/* ---------- Opciones (⚙️) y Más opciones ---------- */
html.movil .settings-list { gap: 10px; margin-top: 10px; }
html.movil .setting-row { padding: 12px 14px; gap: 12px; }
html.movil .setting-text { gap: 4px; }
html.movil .setting-text strong { font-size: 1.15em; line-height: 1.2; }
html.movil .setting-text small { font-size: 1em; line-height: 1.25; }
html.movil .perf-switch { width: 54px; height: 30px; }
html.movil .perf-switch::after { top: 3px; left: 3px; width: 24px; height: 24px; }
html.movil .setting-row[aria-pressed="true"] .perf-switch::after { transform: translateX(24px); }
html.movil #scale-toggle-button { display: none; }
html.movil .deslizador3 button { font-size: 1em; padding: 12px 2px; }
html.movil .op-bloque { margin-top: 10px; }
html.movil .op-bloque h3 { font-size: 1.15em; margin-bottom: 6px; }
html.movil .op-explica { font-size: 1.02em; margin: 6px 2px 0; }
html.movil .segmented button { font-size: 1.1em; padding: 12px 2px; }
html.movil .op-unidades { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
html.movil .op-unidades button { min-width: 0; padding: 10px 0; font-size: 1.1em; }
html.movil .op-cifras select { font-size: 1.1em; }
html.movil .op-extras { display: flex !important; flex-direction: column; gap: 6px; margin-top: 8px; }
html.movil .op-extras .setting-row { flex-direction: row; align-items: center; padding: 6px 12px; }
html.movil .op-extras .setting-text strong { white-space: normal; font-size: 1.1em; }
html.movil .op-extras .setting-text small { font-size: 0.95em; line-height: 1.2; }
html.movil .op-extras .perf-switch { align-self: center; margin-top: 0; }
html.movil .op-ranking { font-size: 0.95em; margin-top: 8px; padding: 6px 12px; }
html.movil .panel-actions { gap: 8px; margin-top: 10px; }
html.movil #options-area .panel-actions { position: sticky; bottom: -18px; margin: 8px -14px -18px; padding: 10px 14px 18px; background: #fff; z-index: 3; }
html.movil #options-area .panel-actions .chip-button, html.movil #options-area .panel-actions .mode-button { min-height: 48px; padding: 8px 10px; font-size: 1.1em; }
html.movil .panel-actions .chip-button { flex: 1 1 0; min-height: 52px; font-size: 1.1em; }
html.movil .panel-actions .mode-button { flex: 1.4 1 0; width: auto; min-width: 0; }
html.movil .panel-actions { flex-wrap: nowrap; }
html.movil .chip-button { min-height: 52px; font-size: 1.15em; padding: 10px 20px; }

/* ---------- Selección de tiempo ---------- */
html.movil #time-selection-area h2 { font-size: 1.85em; }
html.movil #time-selection-area .time-button { padding: 22px 14px; font-size: 1.7em; }
html.movil #time-selection-area .free-start-button { padding: 26px 14px; font-size: 2em; }
html.movil .time-footer .chip-button { min-height: 60px; font-size: 1.25em; }
html.movil .time-variant { font-size: 1.2em; padding: 8px 16px; }

/* ---------- Pantalla de juego ---------- */
html.movil body { padding: 8px; }
html.movil #game-container:not(.game-content-hidden) {
    min-height: calc(var(--alto, 100dvh) - 16px); max-height: calc(var(--alto, 100dvh) - 16px);
    display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 14px 14px 16px; }
html.movil #game-container h1 { font-size: 2em; margin: 0; flex: 0 0 auto; }
html.movil .header-info { flex: 0 0 auto; font-size: 1.15em; margin: 0; }
html.movil #streak-badge:empty { display: none; }
html.movil #question-area { flex: 0 0 auto; min-height: 0; margin: 0; }
html.movil #question-area > p { font-size: 1.2em; margin: 0; }
html.movil #number-to-round { font-size: clamp(3.6em, 20vw, 5.4em); margin: 6px 0; line-height: 1.05; }
html.movil #number-to-round.long-number { font-size: clamp(3em, 15vw, 4.4em); }
html.movil #rounding-unit { font-size: 1.08em; margin: 2px 0; max-width: 100%; text-align: center; }
html.movil #feedback-message { flex: 0 0 auto; min-height: 2.4em; line-height: 1.2; font-size: 1.15em; margin: 0; display: flex; align-items: center; justify-content: center; }
html.movil #options-container { flex: 1 1 0; min-height: 0; margin: 0; gap: 10px; display: flex; flex-direction: column; }
html.movil .option-button { flex: 1 1 0; min-height: 0; padding: 0 16px; font-size: 2.1em; max-height: 110px; display: flex; align-items: center; justify-content: center; }
html.movil #main-menu-button { flex: 0 0 auto; margin: 6px 0 0; padding: 12px; font-size: 1.15em; min-height: 52px; }

/* ---------- Explicación con voz ---------- */
html.movil .ig-overlay { padding: 8px; }
html.movil .ig-box { height: calc(var(--alto, 100dvh) - 16px); max-height: none; padding: 12px 12px 14px; gap: 6px; }
html.movil .ig-cabecera { padding-right: 62px; }
html.movil .ig-pildoras { flex-direction: column; align-items: center; gap: 8px; min-height: 0; }
html.movil .ig-claqueta { font-size: 1.35em; }
html.movil .ig-escenario { min-height: 0; padding: 0; }
html.movil .ig-subtitulo { font-size: 1.1em; line-height: 1.3; min-height: 4.2em; max-width: none; }
html.movil .ig-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 4px; }
html.movil .ig-nav .ig-btn { padding: 12px 8px; font-size: 1.2em; min-width: 0; }
html.movil .ig-nav .ig-txt { display: inline; }
html.movil .ig-nav .ig-ico svg { width: 1.2em; height: 1.2em; }
html.movil .ig-acciones { margin-top: 2px; }
html.movil .ig-ok { min-width: 0; width: 100%; padding: 20px 14px; font-size: 1.6em; }
html.movil button.ig-punto { width: 12px; height: 12px; }
html.movil .ig-puntos { gap: 8px; }

/* ---------- Explicación solo texto ---------- */
html.movil .ex-overlay { padding: 8px; }
html.movil .ex-box { min-height: calc(var(--alto, 100dvh) - 16px); padding: 14px 12px 14px; }
html.movil .ex-titulo { font-size: 1.45em; }
html.movil .ex-cabecera { padding: 10px 56px 10px 12px; }
html.movil .ex-respuestas { flex-wrap: nowrap; gap: 6px; }
html.movil .ex-box .ex-pill { font-size: 0.82em; padding: 5px 9px; white-space: nowrap; }
html.movil .ex-card { font-size: 1.25em; padding: 10px 12px 12px; }
html.movil .ex-transforma { flex-wrap: nowrap; gap: 4px 8px; }
html.movil .ex-num { font-size: 1.3em; }
html.movil .ex-flecha { font-size: 1.2em; }
html.movil .ex-card h4 { font-size: 1.15em; margin-bottom: 8px; }
html.movil .ex-card p, html.movil .ex-pasos li { line-height: 1.35; }
html.movil .ex-pasos li { padding: 5px 0 5px 38px; }
html.movil .ex-box .dialog-actions .ex-alt, html.movil .ex-box .dialog-actions .ex-ok { font-size: 1.2em; padding: 18px 8px; }

/* ---------- Aviso de carga de la voz ---------- */
html.movil .voz-carga { top: auto; bottom: 12px; font-size: 1.1em; min-width: 280px; }

}

@media (orientation: portrait) {
html.movil #options-area .op-bloque:first-of-type h3 { display: none; }
html.movil #options-area .op-bloque { margin-top: 8px; }
html.movil .op-unidades button { padding: 8px 0; }
html.movil .op-extras .setting-row { padding: 5px 12px; }
}

/* pantallas bajas (iPhone SE, Android pequeños): un poco más compacto */
@media (orientation: portrait) {
html.movil.corta #teacher-bar .chip-button { min-height: 44px; font-size: 1.05em; padding: 6px 14px; }
html.movil.corta #teacher-bar .settings-gear { min-width: 44px; }
html.movil.corta #logo-container { min-height: 60px; }
html.movil.corta #mode-selection-area { padding: 14px 14px 4px; }
html.movil.corta #mode-selection-area h2 { font-size: 1.7em; }
html.movil.corta #mode-hint { font-size: 0.85em; margin-bottom: 10px; }
html.movil.corta #mode-selection-area .mode-button { margin-bottom: 10px; padding: 14px 10px; font-size: 1.55em; }
html.movil.corta #mute-toggle-button { height: 46px; width: 46px; }
html.movil.corta #mute-toggle-button-container { font-size: 1em; }
html.movil.corta #game-container:not(.game-content-hidden) { padding: 10px 12px 12px; gap: 4px; }
html.movil.corta #game-container h1 { font-size: 1.6em; }
html.movil.corta .header-info { font-size: 1em; }
html.movil.corta #number-to-round { font-size: clamp(3em, 17vw, 4.4em); margin: 2px 0; }
html.movil.corta .option-button { font-size: 1.8em; }
html.movil.corta #options-container { gap: 8px; }
html.movil.corta #main-menu-button { padding: 10px; font-size: 1.1em; }
html.movil.corta .ig-subtitulo { font-size: 1em; min-height: 4em; }
html.movil.corta .ig-nav .ig-btn { padding: 8px 6px; font-size: 1.05em; }
html.movil.corta .ig-ok { padding: 14px; font-size: 1.35em; }
html.movil.corta .setting-text small { font-size: 0.9em; }
html.movil.corta .ex-card { font-size: 1.1em; }
html.movil.corta .ex-box .dialog-actions .ex-alt, html.movil.corta .ex-box .dialog-actions .ex-ok { padding: 12px 6px; font-size: 1.05em; }
html.movil.corta #time-selection-area .free-start-button { padding: 18px 12px; font-size: 1.7em; }
}

/* ---------- Ajuste automático: los paneles se miden en em y movil.js reduce su letra hasta que todo cabe sin scroll ---------- */
@media (orientation: portrait) {
html.movil .panel, html.movil #time-selection-area, html.movil #player-name-area, html.movil #ranking-area {
    padding: 1.1em .9em; max-height: calc(var(--alto, 100dvh) - 28px); overflow-y: auto; }
html.movil .settings-list { gap: .6em; margin-top: .6em; }
html.movil .setting-row { padding: .75em .9em; gap: .8em; }
html.movil .perf-switch { width: 3.4em; height: 1.9em; }
html.movil .perf-switch::after { top: .2em; left: .2em; width: 1.5em; height: 1.5em; }
html.movil .setting-row[aria-pressed="true"] .perf-switch::after { transform: translateX(1.5em); }
html.movil .deslizador3 button { padding: .75em .1em; }
html.movil .segmented button { padding: .7em .1em; }
html.movil .op-unidades button { padding: .55em 0; }
html.movil .op-extras { gap: .4em; margin-top: .5em; }
html.movil .op-extras .setting-row { padding: .35em .8em; }
html.movil .op-ranking { padding: .4em .8em; margin-top: .5em; }
html.movil .panel-actions { margin-top: .6em; gap: .5em; }
html.movil #options-area .panel-actions { position: static; margin: .6em 0 0; padding: 0; background: none; }
html.movil #options-area .panel-actions .chip-button, html.movil #options-area .panel-actions .mode-button { min-height: 2.9em; padding: .5em .6em; font-size: 1.1em; }
html.movil .chip-button { min-height: 2.8em; }
html.movil .time-footer { margin-top: .7em; gap: .5em; }
html.movil .time-footer .chip-button { min-height: 2.8em; }
html.movil #time-selection-area .time-button { padding: .55em .5em; margin-bottom: .45em; }
html.movil #time-selection-area .free-start-button { padding: .7em .5em; }
html.movil .modal .mode-button { padding: .6em .5em; }
html.movil .modal h2 { margin: 0 0 .25em; }
html.movil .op-bloque { margin-top: .5em; }
}

/* ---------- Rendimiento: el logo animado con sombra bajo otras ventanas hacía lentos los toques en iPhone ---------- */
html, body, button, .setting-row, .chip-button, .mode-button, .option-button { touch-action: manipulation; }
html.movil #game-logo { filter: none; will-change: transform, opacity; }
body:has(.modal[style*="display: flex"]:not(#mode-selection-modal)) #game-logo { animation-play-state: paused; }

/* «Más opciones»: el sitio de las aclaraciones es siempre el de la más larga, así que nada cambia de tamaño al cambiar de dificultad;
   y el título reserva el sitio del botón de cerrar */
@media (orientation: portrait) {
html.movil .op-explica { min-height: 3.3em; }
html.movil .op-ranking { min-height: 7em; }
html.movil .panel h2, html.movil #options-area h2 { min-height: 2.3em; display: flex; align-items: center; justify-content: center; margin: 0; }
html.movil .close-x { width: 46px; height: 46px; top: 10px; right: 10px; }
}

/* pegatina de racha: dentro de la tarjeta (antes sobresalía por la derecha y se cortaba) */
@media (orientation: portrait) {
html.movil #streak-badge { top: -4px; right: 8px; padding: 3px 10px; font-size: .85em; box-shadow: 0 3px 0 #c2410c, 0 6px 14px rgba(234, 88, 12, 0.4); }
html.movil #game-container:not(.game-content-hidden) { padding-top: 22px; }
}
@media (orientation: portrait) { html.movil .modal input[type="text"], html.movil .modal input:not([type]) { font-size: 1.1em; padding: .7em .8em; } }