/* Controles táctiles de Camo Sniper (celular acostado). Los dibuja touch.js dentro de #tactil.
   Mismo aspecto que la pantalla: redondo, borde de tinta, sombra dura abajo. --u se achica con la altura de la pantalla. */
#tactil { --u: min(1vh, 5px); position: fixed; inset: 0; z-index: 5; pointer-events: none; touch-action: none; }
.tctl { position: absolute; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tctl[hidden] { display: none !important; }

/* La palanca: base fija abajo a la izquierda; la perilla se corre hacia donde apunta el pulgar. */
#tPalanca { left: max(calc(var(--u) * 5), env(safe-area-inset-left)); bottom: calc(var(--u) * 5); width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
#tPalanca i { position: absolute; border-radius: 50%; border: calc(var(--u) * 0.8) solid #231B2E; }
#tPalanca .base { inset: 0; background: rgba(255, 246, 227, 0.38); box-shadow: 0 calc(var(--u) * 1) 0 #231B2E, inset 0 0 0 calc(var(--u) * 2.2) rgba(255, 246, 227, 0.25); }
#tPalanca .perilla { left: 50%; top: 50%; width: calc(var(--u) * 15); height: calc(var(--u) * 15); margin: calc(var(--u) * -7.5); background: #FFF6E3; box-shadow: 0 calc(var(--u) * 0.9) 0 #231B2E; }
#tPalanca.down .base { background: rgba(255, 246, 227, 0.55); }
#tPalanca.down .perilla { background: #FFC93C; }

/* Los botones redondos. */
.tctl.boton { display: flex; align-items: center; justify-content: center; border-radius: 50%; border: calc(var(--u) * 0.8) solid #231B2E; box-shadow: 0 calc(var(--u) * 1.1) 0 #231B2E; background: #FFF6E3; transition: transform 0.06s; }
.tctl.boton svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); display: block; overflow: visible; pointer-events: none; }
.tctl.boton.down { transform: translateY(calc(var(--u) * 0.9)); box-shadow: 0 calc(var(--u) * 0.2) 0 #231B2E; filter: brightness(0.92); }
.tctl.boton.no { background: #B9B2C6; opacity: 0.7; }

/* Disparo: el más grande, abajo a la derecha, donde cae el pulgar. */
#tFuego { right: max(calc(var(--u) * 4), env(safe-area-inset-right)); bottom: calc(var(--u) * 5); width: calc(var(--u) * 23); height: calc(var(--u) * 23); background: #FF5468; }
#tFuego svg { width: calc(var(--u) * 8); height: calc(var(--u) * 14); }
#tMira svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
/* La mira: a su izquierda, un poco más chica. */
#tMira { right: calc(max(calc(var(--u) * 4), env(safe-area-inset-right)) + var(--u) * 26); bottom: calc(var(--u) * 6); width: calc(var(--u) * 17); height: calc(var(--u) * 17); background: #3BA7FF; }
/* Aguantar la respiración: arriba del disparo, para el mismo pulgar. */
#tAire { right: calc(max(calc(var(--u) * 4), env(safe-area-inset-right)) + var(--u) * 3); bottom: calc(var(--u) * 33); width: calc(var(--u) * 15); height: calc(var(--u) * 15); background: #7DE3FF; }
/* Zoom: columna en el borde izquierdo, encima de las flechas de ventana. */
#tMas, #tMenos { left: max(calc(var(--u) * 4), env(safe-area-inset-left)); width: calc(var(--u) * 14); height: calc(var(--u) * 14); background: #FFC93C; }
#tMas { top: calc(var(--u) * 27); }
#tMenos { top: calc(var(--u) * 44); }
/* Dron: subir y bajar, a la derecha (el arma no se ve con el dron). */
#tSube, #tBaja { right: max(calc(var(--u) * 6), env(safe-area-inset-right)); width: calc(var(--u) * 17); height: calc(var(--u) * 17); background: #35C46F; }
#tBaja { bottom: calc(var(--u) * 6); }
#tSube { bottom: calc(var(--u) * 26); }

/* ── los botones que ya tiene la pantalla, acomodados para el dedo (solo con controles táctiles) */
body.tactil kbd { display: none !important; }
/* Más grandes: un pulgar no acierta a 28 px. */
body.tactil .redondo { width: 3.6em; height: 3.6em; padding: 0.6em; }
body.tactil .flecha { width: 3.7em; height: 3.7em; padding: 0.4em; }
body.tactil #paradas i { width: 1.6em; height: 2.1em; }
body.tactil #ventanas { gap: 0.25em; }
body.tactil .cuadro { width: 4.8em; height: 4.8em; }
/* La tarjeta del arma deja el rincón del disparo: pasa arriba a la derecha, debajo de las monedas. */
body.tactil #arma { right: max(1em, env(safe-area-inset-right)); bottom: auto; top: 6.2em; min-width: 11.5em; padding: 0.4em 0.65em 0.5em; gap: 0.3em; }
body.tactil #balas { max-width: 12em; }
body.tactil #balas i { height: 1.7em; }
/* Con el dron, el botón del dron sube para dejarle el rincón a la palanca. */
body.tactil .en-dron #acciones { bottom: calc(min(1vh, 5px) * 41); }