/* Controles táctiles. Semitransparentes para no tapar el juego. */
.tctl { position: fixed; z-index: 5; touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }

/* Palanca: aparece donde se apoya el dedo (left/top los pone el script). */
#tStick { width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 3px solid rgba(255, 255, 255, .55); pointer-events: none; }
#tStick i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 3px rgba(27, 23, 64, .35); }

.tbtn { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: rgba(27, 23, 64, .5); border: 3px solid rgba(255, 255, 255, .7); color: #fff; font-weight: 900; text-shadow: 0 2px 0 rgba(27, 23, 64, .8); }
.tbtn b { position: relative; pointer-events: none; padding: 0; font-size: 12px; line-height: 1.1; text-align: center; text-transform: uppercase; white-space: nowrap; }
.tbtn s { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0, 0, 0, .6); pointer-events: none; }
.tbtn.down { transform: scale(1.08); background: rgba(255, 255, 255, .5); }

/* Saltar en el rincón, donde cae el pulgar; usar, arriba. Los otros botones de la pieza no se usan en este juego. */
#tDash { width: 96px; height: 96px; right: 22px; bottom: 22px; background: rgba(79, 195, 255, .6); }
#tDash b { font-size: 14px; }
#tUse { width: 72px; height: 72px; right: 34px; bottom: 132px; background: rgba(77, 255, 136, .6); border-color: #d6ffe2; }
#tAttack, #tSkill, #tReady { display: none !important; }
/* Las opciones se abren con el engranaje de arriba: el botón de pausa de la pieza no se usa. */
#tPause { display: none !important; }

/* La pantalla pensada para PC, acomodada para dedos. El HUD y los paneles están medidos enteros contra el tamaño de su
   letra: alcanza con achicarla. Sin letras de teclas, y sin la lista de quién entra y sale. */
body.tactil #hud { font-size: clamp(8.5px, 2.45vh, 15px); }
body.tactil #hud kbd { display: none; }
body.tactil #feed { display: none; }
body.tactil #side { top: 30%; transform: none; gap: 1.5em; }
body.tactil #mision { width: 14.5em; }
body.tactil #speed { bottom: 0.7em; }
body.tactil #lvl.riel { width: 30em; height: 2.6em; }
body.tactil #banner { margin-top: 13vh; }
body.tactil #prompt.accion, body.tactil #btSkip { bottom: 10.4em; }
body.tactil #chase { bottom: 9.3em; }
body.tactil #toasts { top: 30vh; }
/* La tabla, en el celular, va al centro y con las dos listas lado a lado: a la derecha están los botones de saltar y usar. */
body.tactil #rank { position: fixed; left: 50%; top: 5.2em; width: 30em; margin-left: -15em; flex-direction: row; gap: 0.7em; }
body.tactil #rank section { flex: 1; }
/* Con la tabla abierta, los avisos bajan para no escribirse encima. */
body.tactil #hud:has(#rank:not([hidden])) #toasts { top: 42vh; }

/* Los paneles, en el celular: la letra más chica, la tienda con cuatro fichas por fila y las opciones en dos columnas. */
body.tactil #overlay { font-size: clamp(7.5px, 3.05vh, 14px); padding: 0.7em 0.8em 1.2em; }
body.tactil #card.shop { width: min(47em, 47vw); }
/* Las pestañas, sin nombre: solo el dibujo. Así el panel no tapa al muñeco. */
body.tactil .tabs { top: 4.6em; gap: 0.4em; }
body.tactil .tabs button, body.tactil .tabs button.on { width: 4em; padding: 0.3em 0 0.35em 0.15em; }
body.tactil .tabs button b { display: none; }
body.tactil .tabs button i { width: 3em; height: 3em; }
body.tactil .list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9em 0.7em; }
body.tactil .item .sw { height: 6em; }
body.tactil .item .chapa { font-size: 1.05em; }
body.tactil .info { margin-top: 0.5em; }
body.tactil #card.options { width: min(58em, 96vw); }
body.tactil #card.options .body { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'yo ajustes' 'numeros ajustes' 'seguir seguir'; column-gap: 1.4em; align-content: start; }
body.tactil #card.options .me { grid-area: yo; } body.tactil #card.options .stats { grid-area: numeros; grid-template-columns: 1fr 1fr; }
body.tactil #card.options .ajustes { grid-area: ajustes; } body.tactil #card.options .btn.big { grid-area: seguir; }

@media (orientation: portrait) {
  body.tactil #hud { font-size: clamp(8.5px, 1.5vh, 15px); }
  body.tactil #speed { bottom: 132px; }
  body.tactil #lvl.riel { width: 26em; }
  body.tactil #rank { top: 12em; width: 16em; margin-left: -8em; flex-direction: column; }
  body.tactil #hud:has(#rank:not([hidden])) #toasts { top: 56vh; }
  /* Las vidas, arriba de la velocidad: al costado se salen de la pantalla. */
  body.tactil #lives { right: auto; left: 50%; top: auto; bottom: 100%; margin: 0 0 0.3em; transform: translateX(-50%); }
  /* De pie no hay lugar al costado: la tienda va abajo, a lo ancho, y las pestañas pasan arriba del panel, en fila. */
  body.tactil #overlay { font-size: clamp(8.5px, 1.6vh, 15px); align-items: flex-end; justify-content: center; }
  body.tactil #card.shop { width: 96vw; height: 62%; }
  body.tactil #card.options { width: 94vw; }
  body.tactil #card.options .body { display: flex; }
  body.tactil #card.options .stats { grid-template-columns: repeat(3, 1fr); }
  body.tactil .list { grid-template-columns: repeat(3, 1fr); }
  body.tactil .tabs { right: auto; left: 0.6em; top: auto; bottom: calc(100% + 0.3em); flex-direction: row; align-items: flex-end; gap: 0.4em; }
  body.tactil .tabs button { width: 6em; border-radius: 1.1em 1.1em 0 0; border: 0.26em solid var(--ink); border-bottom: 0; transform-origin: center bottom; box-shadow: inset 0 0.22em 0 #ffffff66; }
  body.tactil .tabs button.on { width: 6.4em; }
  body.tactil .tabs button b { display: block; }
  body.tactil #prompt.accion, body.tactil #btSkip { bottom: 240px; }
}