/* ═══════════════════════════════════════════════════════════════════════════
   ZONA-0 — Mobile-First CSS Layer
   "Un terminal portátil clandestino cubano de 1993 que sobrevivió al internet."

   Carga DESPUÉS de style.css y chat.css.
   Solo aplica ajustes específicos de mobile — preserva la estética CRT.

   Puntos de quiebre:
     (hover:none) and (pointer:coarse)  ← dispositivo táctil
     max-width: 720px                   ← teléfonos
     max-width: 480px                   ← teléfonos pequeños
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Custom Properties globales ─────────────────────────────────────────────
   Inicializadas con valores de fallback; JS las actualiza en tiempo real.   */
:root {
    --keyboard-h:   0px;   /* altura del teclado virtual — actualizado por mobile.js */
    --safe-top:     env(safe-area-inset-top,    0px);
    --safe-bot:     env(safe-area-inset-bottom, 0px);
    --safe-left:    env(safe-area-inset-left,   0px);
    --safe-right:   env(safe-area-inset-right,  0px);
    --mob-bar-h:    52px;  /* altura de la barra de comando rápido */
    --touch-min:    44px;  /* mínimo touch target Apple/Google */
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. OPTIMIZACIÓN CRT — móvil
   El CRT completo consume GPU innecesariamente en teléfonos.
   Reducimos la carga sin eliminar la estética.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {

    /* ── Ruido analógico: desactivar animación constante → imagen estática
       La textura SVG sigue visible; sólo para de moverse (ahorra ~15% GPU) */
    #crt-noise {
        animation: none !important;
        background-position: 30% 60%;
        opacity: 0.025;
    }

    /* ── Scanlines: simplificar al máximo
       El gradiente sigue siendo visible; quitamos el haz de barrido y la
       aberración cromática (::before / ::after) que repintan constantemente */
    #crt-scanlines {
        animation: none !important;
        background: repeating-linear-gradient(
            to bottom,
            rgba(0,255,100,0.018) 0px,
            rgba(0,255,100,0.018) 1px,
            transparent          1px,
            transparent          3px
        );
        /* mix-blend-mode: screen → normal en móvil.
           El blend mode fuerza un stacking context que el GPU tiene que
           compositar en cada frame aunque la animación esté desactivada.
           Normal es suficiente para preservar la estética de scanlines. */
        mix-blend-mode: normal;
        /* filter pesados desactivados en mobile */
        filter: none !important;
    }
    #crt-scanlines::before { animation: none !important; display: none; }
    #crt-scanlines::after  {
        animation: none !important;
        /* Aberración mínima: solo una capa, sin gradientes dobles */
        background: radial-gradient(
            ellipse 130% 130% at 0% 50%,
            rgba(255,0,0,0.008) 0%, transparent 52%
        );
    }

    /* ── Viñeta: sin box-shadow (muy caro en repaint) */
    #crt-vignette {
        box-shadow: none;
        background: radial-gradient(
            ellipse 90% 85% at 50% 50%,
            transparent 30%, rgba(0,0,0,0.65) 100%
        );
    }

    /* ── bg-canvas: oculto en mobile (artefactos de señal) — ahorra RAF continuo */
    #bg-canvas { display: none; }

    /* ── Live events: sin filter costosos en mobile */
    body[class*="live-event-"] #crt-scanlines { filter: none !important; }

    /* ── Glitch animations: reducidas en móvil (preserva sensación, reduce costo) */
    .vsync     { animation-duration: 0.18s !important; }
    .shake     { animation-duration: 0.30s !important; }
    .room-glitch { animation-duration: 0.15s !important; }

    /* ── backdrop-filter: off (muy lento en Android bajo) */
    #chat-overlay { backdrop-filter: none; }

    /* ── Reducir todos los text-shadow iterativos */
    .msg-danger  { animation: danger-flash 0.35s ease-out; }
    .msg-victory { animation: victory-in 0.25s ease-out; }
}

/* ── Prefers-reduced-motion: desactivar TODO */
@media (prefers-reduced-motion: reduce) {
    #crt-noise, #crt-scanlines, #crt-vignette,
    #bg-canvas, #fx-canvas { animation: none !important; filter: none !important; }
    #crt-scanlines::before, #crt-scanlines::after { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. VIEWPORT — Solución definitiva a 100vh en iOS Safari
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {

    html, body {
        /* dvh = Dynamic Viewport Height — actualiza al esconder/mostrar chrome */
        height: 100dvh;
        /* Prevent elastic over-scroll en iOS que rompe el layout */
        overscroll-behavior: none;
        /* Sin overflow hidden en body — se maneja por contenedor */
        overflow: hidden;
    }

    /* Screens: todas usan dvh */
    #boot-screen  { height: 100dvh; }
    #menu-screen  { height: 100dvh; min-height: 0; }
    #game-screen  {
        height: 100dvh;
        /* Restar teclado virtual dinámicamente */
        height: calc(100dvh - var(--keyboard-h, 0px));
        /* Safe areas */
        padding-top:    var(--safe-top);
        padding-left:   var(--safe-left);
        padding-right:  var(--safe-right);
        padding-bottom: 0; /* bottom lo maneja el mob-cmdbar */
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. GAME LAYOUT — Columna terminal portátil
   ┌──────────────────┐
   │ #game-header     │ ← flex-shrink: 0
   ├──────────────────┤
   │ #output          │ ← flex: 1, overflow-y: auto
   ├──────────────────┤
   │ #input-row       │ ← flex-shrink: 0
   ├──────────────────┤
   │ #mobile-kb       │ ← flex-shrink: 0
   ├──────────────────┤
   │ #mob-cmdbar      │ ← flex-shrink: 0, NEW
   └──────────────────┘
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {

    /* ── Game header: compacto y con touch targets adecuados */
    #game-header {
        padding: 6px 10px;
        gap: 6px;
        min-height: 44px;
        /* GPU-friendly — no repaint en scroll */
        will-change: auto;
        position: relative;
        z-index: 10;
    }

    #back-btn, #save-btn, #clip-btn, #game-chat-btn, #user-btn {
        min-height: var(--touch-min);
        min-width:  var(--touch-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Quitar tap highlight nativo */
        -webkit-tap-highlight-color: transparent;
    }

    /* ── Output: scroll suave con momentum iOS */
    #output {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding: 10px 12px 4px;
        font-size: 15px;
        line-height: 1.65;
        /* contain evita repaint de padres al hacer scroll */
        contain: layout paint;
    }

    /* ── Mapa: oculto en portrait, visible en landscape con espacio */
    #map-panel { display: none; }

    @media (orientation: landscape) and (min-width: 600px) {
        #map-panel {
            display: flex;
            width: 140px;
        }
    }

    /* ── Input row: siempre visible, fuente 16px anti-zoom */
    #input-row {
        padding: 8px 12px;
        min-height: 48px;
        background: rgba(0,4,0,0.98);
        border-top: 1px solid var(--green-dim);
        /* GPU hint para el scroll debajo */
        contain: layout;
    }

    #cmd-input {
        font-size: 16px !important;  /* CRÍTICO: previene zoom automático iOS */
        padding: 4px 0;
    }

    /* ── Hint bar: oculto en táctil (reemplazado por mob-cmdbar) */
    #hint-bar { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. TECLADO MÓVIL — Compass mejorado
   Botones de 48px mínimo. Sensación táctil con active state.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {

    #mobile-kb {
        display: flex;
        padding: 6px 10px;
        background: rgba(0,3,0,0.98);
        border-top: 1px solid rgba(32,194,14,0.15);
        gap: 8px;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
    }

    /* Compass: 48px × 48px — cumple WCAG touch target */
    #mob-compass {
        grid-template-columns: repeat(3, 48px);
        grid-template-rows:    repeat(3, 44px);
        gap: 2px;
    }

    /* Todos los botones móviles: 48px mínimo */
    .mob-btn {
        min-height: 44px;
        min-width:  44px;
        font-size: 0.72rem;
        /* Feedback táctil rápido */
        transition: background 0.05s, border-color 0.05s;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        /* Prevenir doble-tap zoom */
        user-select: none;
    }

    .mob-btn:active {
        background: rgba(32,194,14,0.28);
        border-color: var(--green);
        transform: scale(0.94);
    }

    /* Botón centro (mirar) */
    .mob-center {
        font-size: 1.1rem;
        min-height: 44px;
    }

    /* Acciones: grid ajustado */
    #mob-actions {
        display: grid;
        grid-template-columns: repeat(3, 52px);
        gap: 3px;
        max-width: unset;
        flex: unset;
    }

    #mob-actions .mob-btn {
        width: 52px;
        height: 44px;
        font-size: 0.64rem;
        letter-spacing: 0.04em;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. BARRA DE COMANDO RÁPIDO (#mob-cmdbar)
   Terminal militar portátil — hotkeys táctiles para la red.

   ┌──────┬──────┬──────┬──────┬──────┬──────┐
   │ SCAN │ INV  │  MRC │FREC. │ BBS  │  ···  │
   └──────┴──────┴──────┴──────┴──────┴──────┘
   ═══════════════════════════════════════════════════════════════════════════ */

#mob-cmdbar {
    display: none; /* mostrado solo en táctil por mobile.js */
    flex-shrink: 0;
    background: rgba(0,2,0,0.99);
    border-top: 1px solid rgba(32,194,14,0.20);
    padding: 0;
    padding-bottom: var(--safe-bot);
    height: calc(var(--mob-bar-h) + var(--safe-bot));
    overflow: hidden;
}

#mob-cmdbar-inner {
    display: flex;
    height: var(--mob-bar-h);
    align-items: stretch;
}

@media (hover: none) and (pointer: coarse) {
    #mob-cmdbar { display: block; }
}

.mcmd-btn {
    flex: 1;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(32,194,14,0.10);
    color: var(--green-dim);
    font-family: var(--font);
    font-size: 0.60rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.06s, color 0.06s;
    min-height: var(--touch-min);
    user-select: none;
    position: relative;
}

.mcmd-btn:last-child {
    border-right: none;
}

.mcmd-btn:active {
    background: rgba(32,194,14,0.12);
    color: var(--green);
}

.mcmd-btn .mcmd-icon {
    font-size: 0.9rem;
    line-height: 1;
    color: var(--green-dim);
    transition: color 0.06s;
}

.mcmd-btn:active .mcmd-icon {
    color: var(--green-bright);
    text-shadow: 0 0 6px var(--green-glow2);
}

.mcmd-btn .mcmd-label {
    font-size: 0.52rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
}

/* BBS: badge de no leídos */
.mcmd-btn-bbs { position: relative; }
.mcmd-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--red);
    color: #fff;
    font-size: 0.48rem;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    font-family: var(--font);
    line-height: 1;
    pointer-events: none;
}
.mcmd-badge.hidden { display: none; }

/* Estado activo: frecuencias / radio */
.mcmd-btn.mcmd-active {
    color: var(--amber);
    background: rgba(255,176,0,0.05);
}
.mcmd-btn.mcmd-active .mcmd-icon { color: var(--amber); }

/* Estado conectado: BBS con mensajes */
.mcmd-btn.mcmd-online .mcmd-icon { color: var(--green); }


/* ═══════════════════════════════════════════════════════════════════════════
   6. CHAT BBS — Layout keyboard-aware
   En mobile el panel ocupa la pantalla completa y el input SIEMPRE visible.
   La altura real la controla mobile.js via --keyboard-h.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

    /* Panel: pantalla completa real */
    #chat-panel {
        width: 100%;
        /* Altura dinámica: dvh menos el teclado virtual */
        height: 100dvh;
        border: none;
        border-radius: 0;
        /* Transición suave al abrir/cerrar teclado */
        transition: height 0.12s ease-out;
    }

    /* Cuando el teclado está visible, JS añade esta clase */
    #chat-panel.keyboard-open {
        height: calc(100dvh - var(--keyboard-h, 0px));
    }

    /* Header compacto */
    #cp-hdr {
        padding: 8px 12px;
        min-height: 48px;
        flex-shrink: 0;
    }

    #cp-logo { font-size: 14px; }

    #cp-close {
        min-height: var(--touch-min);
        min-width:  var(--touch-min);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: rgba(32,194,14,0.8);
    }

    /* Tabs: touch targets adecuados */
    #cp-tabs { flex-shrink: 0; }

    .cp-tab {
        min-height: 40px;
        font-size: 11px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Log de mensajes: scroll con momentum */
    #cp-log {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding: 8px 10px;
        gap: 4px;
        contain: layout paint;
    }

    /* Mensajes: tamaño cómodo en mobile */
    .cp-msg  { font-size: 15px; line-height: 1.6; }
    .cp-ts   { font-size: 11px; }
    .cp-text { font-size: 15px; }
    .cp-user, .cp-npc-name { font-size: 14px; }

    /* Input row: SIEMPRE en el fondo, visible con teclado */
    #cp-input-row {
        padding: 8px 12px;
        padding-bottom: max(8px, var(--safe-bot));
        gap: 8px;
        flex-shrink: 0;
        background: rgba(0,3,0,0.99);
        border-top: 1px solid rgba(32,194,14,0.25);
        /* Sticky bottom para mantenerse sobre el teclado */
        position: sticky;
        bottom: 0;
        z-index: 10;
    }

    #cp-input {
        font-size: 16px !important; /* Anti-zoom iOS */
        padding: 6px 0;
        min-height: 28px;
    }

    #cp-send {
        min-height: var(--touch-min);
        min-width: 52px;
        font-size: 1.1rem;
        background: rgba(32,194,14,0.12);
        border-color: rgba(32,194,14,0.4);
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Status line: más pequeño */
    #cp-status { font-size: 10px; padding: 3px 12px; }

    /* Footer nav */
    #cp-footer-nav {
        padding: 4px 12px;
        font-size: 11px;
        padding-bottom: max(4px, var(--safe-bot));
    }

    /* Radio bar: botones más táctiles */
    #cp-radio-bar {
        padding: 6px 10px;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cp-radio-btn {
        font-size: 11px;
        padding: 6px 10px;
        min-height: 36px;
        flex-shrink: 0;
        touch-action: manipulation;
    }

    /* Auth form: entradas confortables */
    .cp-auth-input { font-size: 16px !important; min-height: 44px; padding: 10px; }
    #cp-auth-btn   { min-height: 50px; font-size: 15px; }
    #cp-auth-skip  { min-height: 44px; font-size: 13px; }

    /* Context menu de usuario */
    #cp-user-menu button {
        font-size: 14px;
        padding: 12px 14px;
        min-height: var(--touch-min);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. MENÚ PRINCIPAL — Mobile portrait
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) and (hover: none) {

    #menu-screen {
        height: 100dvh;
        padding: max(16px, var(--safe-top)) 14px max(16px, var(--safe-bot));
        gap: 12px;
        justify-content: flex-start;
        padding-top: max(20px, calc(var(--safe-top) + 8px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Logo: legible pero no gigantesco */
    #ascii-logo { font-size: clamp(6px, 1.8vw, 10px); }

    /* Tarjetas: columna, botones grandes */
    #game-cards {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }

    .game-card {
        min-width: unset;
        max-width: unset;
        clip-path: none;
        padding: 14px 16px;
        min-height: 70px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Botones de menú: apilados, touch target adecuado */
    #menu-auth-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: 100%;
        margin-top: 0;
    }

    #menu-user-btn, #menu-lb-btn, #menu-foro-btn,
    #menu-fac-btn, #menu-help-btn, #menu-audio-btn {
        min-height: var(--touch-min);
        font-size: 12px;
        padding: 10px 14px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Banner primer contacto: apilado vertical en mobile */
    #first-contact-banner {
        flex-direction: column;
        gap: .5rem;
        padding: 10px 12px;
    }
    #fcb-glyph { font-size: 1.4rem; flex-shrink: 0; }
    #fcb-body  { width: 100%; }
    #fcb-btn   {
        width: 100%;
        min-height: var(--touch-min);
        font-size: 13px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. SAFE AREAS — Notch, Dynamic Island, Android gesture bars
   ═══════════════════════════════════════════════════════════════════════════ */

/* Game screen */
#game-screen {
    padding-left:  var(--safe-left);
    padding-right: var(--safe-right);
}

/* Bottom bars: respetan el gesture bar de Android y el home indicator de iPhone */
#mob-cmdbar {
    padding-left:  var(--safe-left);
    padding-right: var(--safe-right);
}

/* Chat panel en fullscreen */
@media (max-width: 720px) {
    #chat-panel {
        padding-top: var(--safe-top);
    }
    #cp-input-row {
        padding-left:  max(12px, var(--safe-left));
        padding-right: max(12px, var(--safe-right));
    }
    #cp-footer-nav {
        padding-left:  max(12px, var(--safe-left));
        padding-right: max(12px, var(--safe-right));
    }
}

/* Leaderboard modal */
@media (max-width: 720px) {
    #lb-box {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        border: none;
        padding-bottom: var(--safe-bot);
    }
    #lb-header, #lb-tabs, #lb-content {
        padding-left:  max(14px, var(--safe-left));
        padding-right: max(14px, var(--safe-right));
    }
}

/* Auth modal */
@media (max-width: 720px) {
    #auth-box {
        width: 100%;
        max-height: 100dvh;
        overflow-y: auto;
        border: none;
        padding-bottom: max(20px, var(--safe-bot));
    }
    #auth-overlay {
        align-items: flex-end;
        padding: 0;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. OVERLAYS — Position y z-index consistentes
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

    /* Share overlay */
    #share-overlay { padding: 16px; align-items: flex-end; }
    #share-card {
        max-width: 100%;
        width: 100%;
        padding: 20px 16px;
        padding-bottom: max(20px, var(--safe-bot));
    }
    #share-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    #share-copy-btn, #share-forum-btn, #share-close-btn {
        flex: 1;
        min-height: var(--touch-min);
        min-width: 80px;
        font-size: 12px;
    }

    /* Toast BBS */
    #chat-toast {
        bottom: calc(var(--mob-bar-h) + var(--safe-bot) + 8px);
        right: 12px;
        left: 12px;
        max-width: unset;
        font-size: 13px;
        padding: 10px 12px;
    }

    /* Disconnect overlay */
    #disconnect-overlay {
        padding-bottom: max(20px, var(--safe-bot));
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. TIPOGRAFÍA MOBILE — Legible, terminal, sin zoom
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

    /* Base */
    html { font-size: 15px; }

    /* Mensajes del juego */
    .msg-normal  { font-size: 14px; line-height: 1.65; }
    .msg-room    { font-size: 15px; }
    .msg-npc     { font-size: 14px; }
    .msg-echo    { font-size: 13px; }
    .msg-stats   { font-size: 12px; }
    .msg-success { font-size: 14px; }
    .msg-error   { font-size: 14px; }
    .msg-box     { font-size: 13px; }

    /* NPC: portrait desactivado en mobile (mucho espacio) */
    .msg-npc-portrait { display: none; }
    .msg-npc-body { display: block; }

    /* Inventario */
    .inv-title { font-size: 13px; }
    .inv-item  { font-size: 14px; }
    .inv-bottom{ font-size: 12px; }

    /* Boot */
    #boot-wrap { font-size: clamp(11px, 2.8vw, 13px); }
}

@media (max-width: 480px) {
    html { font-size: 14px; }
    .msg-normal { font-size: 13px; }
    .msg-room   { font-size: 14px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. LANDSCAPE MOBILE — Optimizaciones específicas
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {

    #game-screen {
        /* En landscape el espacio vertical es limitado */
        height: 100dvh;
    }

    #mobile-kb {
        /* Compass más compacto en landscape */
        padding: 3px 8px;
    }

    #mob-compass {
        grid-template-columns: repeat(3, 42px);
        grid-template-rows:    repeat(3, 36px);
    }

    #mob-cmdbar-inner {
        height: 40px;
    }
    --mob-bar-h: 40px;

    /* Map panel visible en landscape */
    #map-panel {
        display: flex;
        width: 140px;
    }

    /* Output: menos padding vertical */
    #output { padding: 6px 10px; }

    /* Input: compacto */
    #input-row { min-height: 40px; padding: 4px 10px; }

    /* Teclado: más pequeño */
    .mob-btn { min-height: 36px; }
    .cp-tab  { min-height: 34px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. SCROLLBAR — Ocultar en móvil (no hay mouse, son molestos)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
    #output::-webkit-scrollbar,
    #cp-log::-webkit-scrollbar,
    .frq-transcript::-webkit-scrollbar,
    .mem-content::-webkit-scrollbar {
        width: 0;
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. AUTOCOMPLETE DE COMANDOS (#mob-autocomplete)
   Aparece sobre el input cuando el usuario escribe /
   ═══════════════════════════════════════════════════════════════════════════ */

#mob-autocomplete {
    display: none;
    position: fixed;
    bottom: calc(var(--mob-bar-h) + var(--safe-bot) + 96px); /* sobre input + kb */
    left: 0;
    right: 0;
    background: rgba(2,8,2,0.97);
    border-top: 1px solid var(--green-dim);
    z-index: 600;
    max-height: 180px;
    overflow-y: auto;
}

#mob-autocomplete.visible { display: block; }

.mob-autocomplete-item {
    padding: 10px 14px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--green-dim);
    border-bottom: 1px solid rgba(32,194,14,0.08);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--touch-min);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mob-autocomplete-item:active,
.mob-autocomplete-item:hover {
    background: rgba(32,194,14,0.08);
    color: var(--green);
}

.mob-autocomplete-cmd {
    color: var(--green-bright);
    min-width: 80px;
    font-size: 13px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. TAP TARGETS — Todos los botones táctiles ≥ 44px (WCAG 2.5.8)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {

    /* Tabs del chat: elevar a 44px */
    .cp-tab { min-height: 44px; }

    /* Radio: elevar a 44px */
    .cp-radio-btn { min-height: 44px; }

    /* Thread panel — botones cerrar y enviar */
    .cp-thr-close,
    .cp-thr-send {
        min-height: 44px;
        min-width:  44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Profile overlay — botones de acción */
    .cp-prf-btn {
        min-height: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Botón de reconexión del disconnect-overlay */
    #dc-manual-btn {
        min-height: 44px;
        touch-action: manipulation;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. OFFLINE INDICATOR — Indicador de estado de red en el menú
   ═══════════════════════════════════════════════════════════════════════════ */

.live-offline {
    color: #ff6b35 !important;   /* naranja — distinto del verde normal y del rojo de error */
    opacity: 0.85;
}

.mob-autocomplete-desc {
    color: #2a5a2a;
    font-size: 11px;
    flex: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. INDICADOR DE RECONEXIÓN
   ═══════════════════════════════════════════════════════════════════════════ */

#mob-reconnect-bar {
    display: none;
    position: fixed;
    top: var(--safe-top);
    left: 0;
    right: 0;
    background: rgba(255,153,0,0.12);
    border-bottom: 1px solid rgba(255,153,0,0.4);
    padding: 8px 16px;
    font-size: 11px;
    color: var(--orange);
    letter-spacing: 0.08em;
    text-align: center;
    z-index: 700;
    animation: mob-reconnect-pulse 2s ease-in-out infinite;
}

#mob-reconnect-bar.visible { display: block; }

@keyframes mob-reconnect-pulse {
    0%, 100% { opacity: 0.7; }
    50%       { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. VISUAL PUZZLES (visuales.html) — Touch y canvas
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

    /* Grid de visuales: columna única en mobile */
    .vf-grid { grid-template-columns: 1fr !important; }

    /* Canvas: no blurry scaling */
    .vf-canvas-wrap canvas {
        image-rendering: pixelated;
        image-rendering: crisp-edges;
        touch-action: none; /* manejamos pinch-zoom manual */
        max-width: 100%;
        height: auto;
    }

    /* Visor: pantalla completa */
    .vf-viewer {
        padding: 0 !important;
        padding-top: var(--safe-top) !important;
        padding-bottom: var(--safe-bot) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. MOROCOTA / WALLET — Estética ledger de campo soviético
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
    /* Las páginas de cartera (cartera.html, packs.html) */
    .wallet-main {
        padding: 12px;
        padding-top: max(12px, var(--safe-top));
        padding-bottom: max(12px, var(--safe-bot));
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. ACCESSIBILITY — Alto contraste y motion
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-contrast: high) {
    :root {
        --green:       #00ff00;
        --green-bright:#39ff14;
        --green-dim:   #336633;
        --white:       #ffffff;
    }
}

/* Focus visible para usuarios que navegan con teclado externo en tablet */
@media (hover: none) {
    :focus-visible {
        outline: 2px solid var(--green);
        outline-offset: 2px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   18. PWA — Standalone mode
   ═══════════════════════════════════════════════════════════════════════════ */

@media (display-mode: standalone) {

    /* En standalone: el status bar del sistema ocupa espacio seguro */
    #game-screen  { padding-top: max(0px, var(--safe-top)); }
    #menu-screen  { padding-top: max(8px, var(--safe-top)); }

    /* Ocultar elementos de "instala la app" si ya está instalada */
    #pwa-install-prompt { display: none; }

    /* Sin barra de browser = más espacio */
    #boot-screen, #menu-screen, #game-screen {
        height: 100dvh;
    }
}