/* =============================================================================
   MÓVIL — aviso "girá el teléfono" y ajustes de pantallas táctiles
   (la clase html.tg-tactil la pone js/sistemas/pantalla_movil.js)
   ============================================================================= */

#aviso-girar { display: none; }

@media (orientation: portrait) and (pointer: coarse) {
    #aviso-girar {
        position: fixed; inset: 0; z-index: 2147483000;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
        background: radial-gradient(circle at 50% 40%, #3a2a14 0%, #0d0905 75%);
        color: #fff4c2; text-align: center; padding: 24px;
        font-family: 'Arial Black', Impact, sans-serif;
    }
    #aviso-girar p { font-size: 26px; text-transform: uppercase; letter-spacing: 1px; text-shadow: 3px 3px 0 #000; }
    #aviso-girar small { font-family: Arial, sans-serif; font-size: 15px; color: #d9c79a; }
    /* Teléfono dibujado en CSS que gira de parado a acostado */
    .aviso-girar-telefono {
        width: 64px; height: 112px; border: 6px solid #fff4c2; border-radius: 14px; position: relative;
        box-shadow: 4px 4px 0 #000; animation: tgGirarTelefono 2.2s ease-in-out infinite;
    }
    .aviso-girar-telefono::after {
        content: ''; position: absolute; left: 50%; bottom: 6px; width: 12px; height: 12px; margin-left: -6px;
        border-radius: 50%; background: #fff4c2;
    }
    @keyframes tgGirarTelefono {
        0%, 25% { transform: rotate(0deg); }
        55%, 85% { transform: rotate(-90deg); }
        100% { transform: rotate(0deg); }
    }
}

/* -----------------------------------------------------------------------------
   MODO TÁCTIL (celular / tablet). La pantalla del teléfono muestra el juego
   achicado (≈ 0,4 en un celular), así que los controles se agrandan para el
   dedo. La mesa, las cartas y los personajes NO cambian: solo la interfaz.
   ----------------------------------------------------------------------------- */
/* Botonera (TRUCO, ENVIDO, MAZO…) y órdenes al Ciruja: todo sale de --tg-u */
html.tg-tactil #mesa-juego-screen { --tg-u: 15px; }
html.tg-tactil #panel-acciones-truco { min-width: 0; }

/* Marcador: más grande para leerlo de un vistazo */
html.tg-tactil #marcador-fosforos-lateral { scale: 1.5; transform-origin: 0 0; }

/* En pantallas táctiles no hay "hover": que nada quede inflado al tocar */
@media (hover: none) {
    html.tg-tactil #panel-acciones-truco .btn-accion-arcade:hover { transform: none; }
}

/* Tutorial: el cartel del Ciruja y sus botones, legibles en el teléfono */
html.tg-tactil .tg-tuto-cartel { width: min(780px, calc(100cqw - 32px)); padding: 18px 24px 16px; }
html.tg-tactil .tg-tuto-quien { font-size: 24px; }
html.tg-tactil .tg-tuto-paso { font-size: 18px; }
html.tg-tactil .tg-tuto-texto { font-size: 33px; }
html.tg-tactil .tg-tuto-pie button { font-size: 22px; padding: 10px 18px !important; }
html.tg-tactil .tg-tuto-omitir { font-size: 24px; padding: 12px 22px; }

/* Textos que cambian según PC (click) o teléfono (tocar) */
.solo-tactil { display: none; }
html.tg-tactil .solo-tactil { display: inline; }
html.tg-tactil .solo-pc { display: none; }

/* Botones de saltar / omitir: blancos de dedo */
html.tg-tactil #btn-saltar-video { scale: 1.8; transform-origin: 100% 100%; }
/* (los botones de la historieta se agrandan abajo, con su letra) */

/* -----------------------------------------------------------------------------
   PLAN B — ZOOM (js/sistemas/pantalla_movil.js pone html.tg-zoom y --tg-zoom)
   Cuando el navegador no aplica el ajuste del celular, o la ventana de PC es
   chica: la pantalla de juego se arma a su tamaño de diseño (1600×900) y la
   página entera se achica con zoom. El body ocupa la ventana real (100vw/zoom)
   y es el contenedor de lo que está fuera de la pantalla de juego (carteles a
   pantalla completa), así sus cqw/cqh también quedan bien.
   ----------------------------------------------------------------------------- */
html.tg-zoom body {
    width: calc(100vw / var(--tg-zoom));
    height: calc(100vh / var(--tg-zoom));
    container-type: size;
}
html.tg-zoom #pantalla-juego {
    width: 1600px; height: 900px;
    max-width: none; max-height: none;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   CARTAS Y MARCADOR EN CELULAR (2026-11-14, pedido del autor: "las cartas son
   las protagonistas"). Solo html.tg-tactil: la PC no cambia.
   Variables para ajustar fácil:
     --tg-mano-celular     tamaño de las cartas de TU mano
     --tg-mesa-celular     tamaño de las pilas de cartas jugadas en la mesa
     --tg-marcador-celular tamaño del marcador
   ----------------------------------------------------------------------------- */
html.tg-tactil {
    --tg-mano-celular: 1.6;
    --tg-mesa-celular: 1.22;
    --tg-marcador-celular: 1.75;
}
/* Tu mano: crece desde el borde de abajo, centrada */
html.tg-tactil #contenedor-mano-jugador {
    transform: translateX(-50%) scale(var(--tg-mano-celular));
    transform-origin: 50% 100%;
    bottom: -7cqh;   /* asoma desde el borde de abajo, como en los juegos de cartas de celular: se ve el número y el palo */
}
/* Cartas jugadas: cada pila crece desde su centro */
html.tg-tactil .casilla-mesa { scale: var(--tg-mesa-celular); }
/* Marcador: más grande, pegado arriba a la izquierda */
html.tg-tactil #marcador-fosforos-lateral { scale: var(--tg-marcador-celular); transform-origin: 0 0; top: 2%; left: 1%; }
/* La pila del Ciruja crece hacia abajo (para no taparle la cara) y la tuya sube un poco (para no quedar debajo de tu mano) */
html.tg-tactil #casilla-compa { transform-origin: 50% 20%; }
html.tg-tactil #casilla-jugador { translate: 0 -3cqh; transform-origin: 50% 70%; }

/* Menús (principal, opciones, niveles, tutorial, créditos): letra más grande en celular.
   css/menu.css multiplica sus tamaños de letra por --tgm-letra (en PC vale 1). */
html.tg-tactil { --tgm-letra: 1.6; }
html.tg-tactil .tgm-opciones { width: min(1500px, 100%); }
/* El logo y el botón grande ya son grandes: quedan como en PC */
html.tg-tactil .tgm-portada, html.tg-tactil .tgm-btn-principal { --tgm-letra: 1; }
html.tg-tactil .tgm-grilla-niveles { --tgm-letra: 1; }   /* las mesas son chicas: con letra más grande el cartel BLOQUEADO pisa el nombre */

/* Pistas del Ciruja ("¡Mirame la cara!..."): más grandes en celular (js/ui/pistas.js las ubica según su tamaño) */
html.tg-tactil .tg-pista { width: min(600px, calc(100cqw - 32px)); }
html.tg-tactil .tg-pista-quien { font-size: 20px; }
html.tg-tactil .tg-pista-texto { font-size: 30px; }
html.tg-tactil .tg-pista-ya { font-size: 19px; padding: 6px 14px; }
/* La ayuda que sale al pasar el mouse por un botón del menú: en celular no hay mouse y se encimaba con SALIR */
html.tg-tactil .tgm-btn-ayuda { display: none; }

/* Historietas (cinemáticas): texto de narración y botones legibles en celular */
html.tg-tactil .tg-cine-texto { max-width: 1400px; }
html.tg-tactil .tg-cine-narrador, html.tg-tactil .tg-cine-globo { font-size: 36px; }
html.tg-tactil .tg-cine-btn { font-size: 30px; padding: 12px 26px; }