/* Piel de la version de Android: mando en pantalla y HUD recolocado para un
   movil apaisado. Todo cuelga de `body.tactil`, que solo se pone cuando el
   juego corre en un aparato tactil, asi que la hoja original sigue mandando en
   el PC. */

/* Nada de rebotes, lupas ni seleccion de texto al arrastrar el pulgar. */
body.tactil {
  overscroll-behavior: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body.tactil #game { cursor: none; touch-action: none; }

/* ------------------------------------------------------------ capa tactil */
#tactil {
  position: fixed;
  inset: 0;
  z-index: 12;
  touch-action: none;
  /* Los huecos entre botones dejan pasar el dedo a la palanca */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Con mando conectado se apagan los botones, pero la capa sigue puesta para
   cazar el toque que los devuelve.

   Van los tres: `opacity` para que se vaya con suavidad, `visibility` para que
   desaparezca de verdad aunque la transicion no llegue a correr, y
   `pointer-events` para que no se pulse nada por error mientras se desvanece. */
#tactil.conpad > * {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s;
}

/* --- palanca flotante ---------------------------------------------------- */
#tpalanca {
  position: absolute;
  width: 132px; height: 132px;
  margin: -66px 0 0 -66px;
  border-radius: 50%;
  border: 2px solid rgba(255, 179, 71, .3);
  background: radial-gradient(circle, rgba(255, 179, 71, .08), rgba(6, 6, 12, .42) 72%);
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;
}
#tpalanca.on { opacity: 1; }
#tpalanca i {
  position: absolute; left: 50%; top: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  border: 2px solid rgba(255, 179, 71, .6);
  background: radial-gradient(circle at 40% 34%, rgba(255, 200, 130, .5), rgba(120, 60, 16, .55));
  box-shadow: 0 0 16px rgba(255, 150, 50, .35);
}

/* --- botones ------------------------------------------------------------- */
.tbtn {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  border-radius: 50%;
  border: 2px solid rgba(255, 179, 71, .34);
  background: radial-gradient(circle at 42% 34%, rgba(46, 34, 20, .82), rgba(8, 9, 16, .84));
  color: #f0e0c0;
  font-family: inherit;
  letter-spacing: 1px;
  padding: 0;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .07s, filter .12s, border-color .12s;
}
.tbtn b { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; }
.tbtn.on { transform: scale(.9); filter: brightness(1.5); border-color: var(--gold); }
.tbtn.frio { opacity: .38; }

.tbtn.grande { width: 92px; height: 92px; }
.tbtn.grande b { font-size: 11px; }
.tbtn.medio { width: 70px; height: 70px; }
.tbtn.chico { width: 58px; height: 58px; }
.tbtn.chico b { font-size: 9px; }

/* El ataque es el boton que mas se pulsa: el mas grande, el mas encendido y
   pegado al rincon, donde cae el pulgar sin estirarse. */
.tbtn.ataque {
  border-color: rgba(255, 90, 70, .6);
  background: radial-gradient(circle at 42% 34%, rgba(112, 30, 26, .9), rgba(16, 7, 9, .88));
  box-shadow: 0 0 22px -4px rgba(255, 80, 60, .6);
}
.tbtn.dash {
  border-color: rgba(255, 140, 60, .55);
  background: radial-gradient(circle at 42% 34%, rgba(96, 46, 14, .9), rgba(14, 8, 10, .88));
  box-shadow: 0 0 18px -4px rgba(255, 120, 40, .55);
}
.tbtn.usar { border-color: rgba(160, 190, 255, .3); }
/* Se enciende sola cuando hay un cofre o la puerta delante */
.tbtn.usar.listo {
  border-color: #ffd77a;
  box-shadow: 0 0 20px -2px rgba(255, 200, 110, .7);
  animation: tlate 1.1s ease-in-out infinite;
}
@keyframes tlate { 50% { filter: brightness(1.3); } }
.tbtn.escudo { border-color: rgba(150, 210, 255, .38); }

/* --- racimo de la mano derecha ------------------------------------------- */
/* Rombo clasico de accion: el ataque en el vertice de dentro, y alrededor lo
   que se pulsa suelto. Las medidas estan calculadas para que los circulos no
   lleguen a tocarse, que es lo que hace que no se pulse uno por otro. */
#tracimo {
  position: absolute;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: 180px; height: 236px;
}
#tracimo .ataque { position: absolute; right: 4px; bottom: 40px; }
#tracimo .dash { position: absolute; right: 88px; bottom: 4px; }
#tracimo .usar { position: absolute; right: 104px; bottom: 88px; }
#tracimo .escudo { position: absolute; right: 20px; bottom: 140px; }
/* El farol cierra el rombo por arriba, pegado al escudo: son los dos que no
   pegan a nadie, asi que van juntos y lejos del pulgar del ataque. */
#tracimo .luz { position: absolute; right: 90px; bottom: 172px; }
/* La pocima cierra la diagonal por arriba, encima de LUZ. Va MAS ALTA de lo
   que pedia el dibujo (196 y no 166) por un motivo medido en un movil de 375:
   a 166 quedaban seis pixeles entre ella y la columna de armas, y seis
   pixeles no separan nada cuando lo que llega es un pulgar. A 196 hay treinta
   y seis, que es la distancia a la que ya no se pulsa una por otra. */
#tracimo .pocima { position: absolute; right: 156px; bottom: 196px; }

/* En la barra de abajo, el numero de pocimas SOBRA cuando hay botones de
   pantalla: ya va escrito en la chapa del boton, que es donde va a mirar el
   pulgar. Y sobra ademas por sitio — en un movil la caja de vitales es
   estrecha y una quinta etiqueta la descuadraba. */
body.tactil #pocimaLabel { display: none; }

/* Verde de frasco, para que no se confunda con el ambar del farol ni con el
   azul del escudo estando los tres en la misma esquina. El numero va en una
   chapa arriba a la derecha, como los contadores de siempre. */
.tbtn.pocima {
  border-color: rgba(110, 224, 160, .45);
  box-shadow: 0 0 14px -4px rgba(110, 224, 160, .55);
}
.tbtn.pocima b { color: #bff0d4; }
.tbtn.pocima em {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; line-height: 18px;
  padding: 0 3px;
  border-radius: 9px;
  background: #1d3a2a;
  border: 1px solid rgba(110, 224, 160, .7);
  color: #d8f7e6;
  font: 700 10px/18px system-ui, sans-serif;
  font-style: normal;
  text-align: center;
}

/* Encendido: aro calido, para que se vea de un vistazo si llevas el farol
   puesto sin tener que mirar el suelo. Apagado se queda gris y hundido. */
.tbtn.luz { border-color: rgba(255, 200, 120, .3); opacity: .5; }
.tbtn.luz.encendida {
  opacity: 1;
  border-color: #ffcf7a;
  box-shadow: 0 0 16px -2px rgba(255, 200, 110, .75);
  background: radial-gradient(circle at 42% 34%, rgba(96, 70, 26, .9), rgba(14, 10, 8, .88));
}

/* --- armas de la clase --------------------------------------------------- */
#tarmas {
  position: absolute;
  right: calc(196px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column-reverse; gap: 9px;
}
.tbtn.arma {
  width: 56px; height: 56px;
  opacity: .55;
}
.tbtn.arma.activa {
  opacity: 1;
  border-color: var(--gold);
  box-shadow: 0 0 14px -3px rgba(255, 179, 71, .8);
}
.tbtn.arma.cura.activa { border-color: #6fe0a0; box-shadow: 0 0 14px -3px rgba(110, 224, 160, .8); }
.tbtn.arma .ico {
  display: block;
  transform: scale(1.7);
  transform-origin: center;
  margin-bottom: 6px;
  image-rendering: pixelated;
}
.tbtn.arma .tnom {
  position: absolute; bottom: 4px; left: 0; right: 0;
  font-size: 7.5px; letter-spacing: .3px;
  color: #cbb694;
  text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tbtn.arma.activa .tnom { color: #f5e2bd; }

/* --- reloj de espera ------------------------------------------------------
   Una porcion que se vacia dando la vuelta al boton, como un reloj. Existe
   porque sin ella un arma lenta no daba NINGUNA señal: el Aura sagrada del
   Curador tarda 6,5 s, asi que apretabas ataque, no pasaba nada visible y
   parecia que el personaje no lanzaba sus poderes. `--frio` va de 1 (recien
   lanzada) a 0 (lista) y lo escribe touch.js en cada fotograma. */
.tbtn.reloj::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    rgba(4, 6, 12, .68) calc(var(--frio, 0) * 360deg),
    transparent 0);
}
/* Lista otra vez: un destello corto para que se note sin mirar el boton */
.tbtn.listaya { animation: tlista .28s ease-out; }
@keyframes tlista {
  from { box-shadow: 0 0 0 0 rgba(255, 220, 150, .55); }
  to   { box-shadow: 0 0 0 12px rgba(255, 220, 150, 0); }
}

/* --- botonera de sistema ------------------------------------------------- */
#tsistema {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  display: flex; gap: 7px;
}
.tbtn.mini {
  width: 40px; height: 40px;
  border-radius: 8px;
  font-size: 16px; line-height: 1;
  color: #d8c39c;
  border-color: rgba(255, 179, 71, .22);
}
/* El zoom lleva numero en vez de simbolo, y destaca del resto de la fila
   porque es el unico que se toca jugando: por eso tambien es mas ancho, que
   los otros cuatro solo se pulsan con la partida parada. */
.tbtn.mini.zoom {
  width: 50px; height: 44px;
  border-color: rgba(255, 179, 71, .42);
}
.tbtn.mini.zoom b { font-size: 13px; letter-spacing: 0; color: var(--gold); }

/* ------------------------------------------------------- HUD recolocado */
/* El minimapa baja para dejarle el rincon a la botonera de sistema. */
body.tactil #minimap {
  width: 104px; height: 104px;
  top: calc(56px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
}

body.tactil #topbar { font-size: 10px; padding: 4px 10px; top: calc(8px + env(safe-area-inset-top)); }

/* Vitales al rincon de la izquierda: el centro de abajo es zona de pulgar */
body.tactil #vitals {
  left: calc(10px + env(safe-area-inset-left));
  transform: none;
  width: 200px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  padding: 5px 8px 6px;
}
body.tactil #vitals .vrow { font-size: 9px; margin-bottom: 3px; }
body.tactil #hpwrap { height: 12px; }
body.tactil #hpText { line-height: 12px; font-size: 9px; }
body.tactil #stats { font-size: 9px; }

/* La barra de accion del PC sobra: las armas ya son botones de verdad */
body.tactil #actionbar { display: none; }

body.tactil #chatbox {
  left: calc(10px + env(safe-area-inset-left));
  bottom: calc(76px + env(safe-area-inset-bottom));
  width: 220px;
}
body.tactil #chatlog { max-height: 84px; }
body.tactil #chatlog div { font-size: 11px; }

/* El aviso de "usar" se sube: abajo en el centro estorbaria a los dedos */
body.tactil #prompt {
  bottom: auto; top: calc(46px + env(safe-area-inset-top));
  font-size: 11px;
}
body.tactil #toast { top: calc(76px + env(safe-area-inset-top)); }
body.tactil .toast-item { font-size: 11px; padding: 4px 10px; }

/* --- encargo del Errante ---------------------------------------------------
   Va A LA IZQUIERDA del minimapa y A SU MISMA ALTURA, o sea por DEBAJO de la
   fila de botones de sistema.

   Antes estaba arriba del todo y no se veia: esa franja la ocupa entera la
   botonera de sistema, que son cinco botones y se come casi 250 px desde el
   borde derecho, justo por donde caia el rastreador. Quedaba tapado.

   Debajo del minimapa tampoco puede ir: ahi empieza el racimo de la mano
   derecha y quedaria bajo el pulgar. El hueco bueno es este. */
body.tactil #questbox {
  top: calc(56px + env(safe-area-inset-top));        /* a la altura del minimapa */
  right: calc(124px + env(safe-area-inset-right));   /* 104 de minimapa + aire */
  width: 132px;
  padding: 4px 7px 5px;
  /* Sobre el juego y no sobre un panel: un fondo mas opaco para que se lea */
  background: rgba(10, 12, 8, .82);
}
body.tactil #questbox .qhead { font-size: 8px; letter-spacing: 2px; }
body.tactil #questbox .qname { font-size: 10px; }
body.tactil #questbox .qgoal { font-size: 9.5px; }
body.tactil #questbox .qhint { font-size: 9px; }
body.tactil #questbox .qwrap { margin: 4px 0 3px; }

/* Con el rastreador ahi arriba, lo que se centraba en la franja de arriba ya no
   cabe centrado. Las barras de jefe dejan de ir al medio y pasan a estirarse
   entre dos margenes fijos: uno que salva las fichas del grupo y otro que salva
   el rastreador. Es la unica forma de que cuadre en cualquier ancho de movil,
   de un movil estrecho de 640 a una tablet. */
body.tactil #bossbar,
body.tactil #elitebar {
  left: calc(134px + env(safe-area-inset-left));     /* fichas del grupo */
  right: calc(264px + env(safe-area-inset-right));   /* rastreador + minimapa */
  width: auto;
  transform: none;
}
/* Y el piso/sala/ping se centra en ese mismo hueco, no en la pantalla, y se
   aprieta un poco: en 640 px de ancho la franja da para 276 y no mas. */
body.tactil #topbar {
  left: calc(50% - 65px);
  font-size: 9px;
  padding: 3px 7px;
}

/* Los globos de charla en el movil. Ya no hay que buscarles un rincon libre —
   antes el del Errante se estiraba por la franja de abajo entre los vitales y
   el racimo de botones, y el del Carmesi se metia arriba entre las fichas del
   grupo y el rastreador—: van pegados a quien habla, se mueven con el y se
   apartan solos de los bordes. Lo unico que hace falta aqui es apretar la letra
   y estrecharlos, que una pantalla de movil apaisado es lo que es. */
body.tactil #errante {
  max-width: min(230px, 42vw);
  padding: 6px 10px 7px;
}
body.tactil #errante b { font-size: 9px; letter-spacing: 2px; margin-bottom: 2px; }
body.tactil #errante span { font-size: 11px; }

body.tactil #tale {
  max-width: min(260px, 46vw);
  padding: 7px 11px 6px;
  max-height: 56vh;
  overflow: auto;
}
body.tactil #tale .tquien { font-size: 8.5px; letter-spacing: 3px; }
body.tactil #tale .ttitulo { font-size: 11px; margin-bottom: 4px; }
body.tactil #tale .ttexto { font-size: 10.5px; line-height: 1.4; }
body.tactil #tale .ttexto p { margin-bottom: 5px; }
body.tactil #tale .tfinal { font-size: 10.5px; margin-top: 5px; }

/* La intro: en el movil el SALTAR tiene que ser un boton de dedo, no de raton,
   y los puntos se suben para que no queden debajo de el. */
body.tactil #introImg { height: calc(100% - 74px - env(safe-area-inset-bottom)); }
body.tactil #introSkip {
  bottom: calc(10px + env(safe-area-inset-bottom));
  padding: 11px 34px;
  font-size: 13px;
}
body.tactil #introDots { bottom: calc(62px + env(safe-area-inset-bottom)); }

/* Las ventanas del kit tienen que caber en 360 px de alto */
body.tactil .uiwin { max-height: 94vh; max-width: 96vw; overflow: auto; }
body.tactil #downed h2 { font-size: 22px; }

/* La ficha del heroe: el retrato encoge un poco y los renglones se aprietan,
   que con armadura y unas cuantas mejoras se pasaba de alto en 360 px. */
body.tactil .ficha { width: 262px; }
body.tactil .heroframe { width: 68px; height: 68px; }
body.tactil #invPortrait { width: 60px; height: 60px; }
body.tactil .heroinfo > b { font-size: 12.5px; }
body.tactil #invStats li { font-size: 9.5px; padding: 0; }
body.tactil #invStats li b { font-size: 10.5px; }
body.tactil .equiprow { margin-top: 8px; }
body.tactil .mejoras { margin-top: 8px; padding: 6px 8px; }
body.tactil .mejoras span { font-size: 9.5px; }
/* Los + y − de los atributos, del tamano de un dedo */
body.tactil .atrbtn { width: 26px; height: 26px; font-size: 15px; }
body.tactil .atrfila { padding: 3px 0; }

/* --- la pausa, que no cabe -------------------------------------------------
   El cuadro de pausa ya no lleva los controles ni las reglas: solo los dos
   volumenes, CONTINUAR y SALIR DE LA SALA. Con eso cabe de sobra en cualquier
   movil apaisado y no hace falta arrastrar nada para llegar a los botones, que
   era lo que pasaba cuando las dos listas pedian 560 px de alto. */
body.tactil #pause .uibody { overflow: hidden; }
body.tactil #pause .pausecol { width: 240px; }
body.tactil #pause .setrow { margin-bottom: 10px; }
body.tactil #pause .setlab { min-width: 76px; font-size: 10px; }
body.tactil #pause .setsep { margin: 12px 0; }
body.tactil #pause .uiicon { width: 30px; height: 30px; }
body.tactil #pauseHint { font-size: 9px; line-height: 1.3; display: block; }

/* --------------------------------------------------------------- el menu
   Un movil apaisado deja 390 px de alto, y a veces 320. Ahi no cabe el menu del
   PC: lo importante es que CREAR SALA y ENTRAR se vean sin tener que arrastrar
   nada, asi que todo lo demas encoge a su alrededor. */
body.tactil .paso { padding: 6px 10px; gap: 8px; }
/* El rotulo del juego encoge lo justo: es una imagen y en 360 px de alto no
   puede comerse mas de una quinta parte de la pantalla. */
body.tactil #menuLogo { width: min(360px, 58vw); max-height: 17vh; }
body.tactil #cuenta { top: 5px; right: 7px; gap: 5px; }
body.tactil #cuentaEstado { font-size: 9px; max-width: 30vw; }
body.tactil #cuenta button { padding: 5px 9px; font-size: 8.5px; }
body.tactil #volverBtn { top: 5px; left: 7px; font-size: 9px; }
body.tactil #paso2Quien { font-size: 14px; letter-spacing: 2px; }
body.tactil .paso2-inner { gap: 9px; }
body.tactil #elegirBtn { padding: 9px 26px; font-size: 12px; letter-spacing: 3px; }
body.tactil .fields { gap: 7px; }
body.tactil .fields input { width: 132px; padding: 7px 9px; font-size: 12px; }
body.tactil .nethint { font-size: 10px; line-height: 1.35; }

body.tactil #wheel { gap: 2px; }
body.tactil #wheelName { font-size: 15px; }
body.tactil #wheelTrack { height: 88px; }
body.tactil .ccard, body.tactil .ccard canvas { width: 82px; height: 82px; }
/* La descripcion de la clase se va: el nombre y las tres cifras de abajo ya
   dicen lo que hay que saber, y son 24 px que hacen falta para los botones. */
body.tactil #classDesc { display: none; }
body.tactil #wheelStats { font-size: 9px; }
body.tactil #wheelStats b { font-size: 11px; }
/* Flechas grandes: se pulsan con el pulgar, no con un raton */
body.tactil .wheelarrow { width: 42px; height: 56px; font-size: 15px; }

body.tactil .playrow { gap: 9px; }
body.tactil #createBtn, body.tactil #playBtn { padding: 10px 18px; font-size: 12px; letter-spacing: 2px; }
body.tactil #soloBtn { padding: 10px 18px; font-size: 12px; letter-spacing: 2px; }
body.tactil .offbox { gap: 7px; }
body.tactil .offbox input[type=range] { width: 74px; }
body.tactil .servbox summary { font-size: 9px; }
body.tactil #screenBtn { display: none; }       /* siempre a pantalla completa */

/* --- salas con codigo ---------------------------------------------------- */
/* El codigo es lo que hay que leerle a los demas, asi que se lee como un
   codigo: separado, grande y en el color de los titulos. */
body.tactil #roomInput {
  width: 128px;
  text-align: center;
  letter-spacing: 5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
body.tactil #diceBtn {
  display: inline-block;
  background: rgba(12, 14, 24, .9);
  color: var(--dim);
  border: 1px solid rgba(255, 179, 71, .28);
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 9px; letter-spacing: 1.4px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
#createBtn {
  background: linear-gradient(#2f6f3c, #1c4526);
  color: #eafff0;
  border: 1px solid #59b672;
  padding: 11px 26px; font-size: 13px; letter-spacing: 3px; font-weight: 700;
  border-radius: 4px; cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 22px -8px rgba(80, 220, 130, .55);
  transition: .15s;
}
#createBtn:hover { filter: brightness(1.14); }
#createBtn:disabled { opacity: .5; cursor: wait; }

/* Interruptor de donde se juega: en internet o entre los del mismo wifi. */
.modored { display: flex; justify-content: center; gap: 0; }
.modored button {
  background: rgba(12, 14, 24, .9);
  color: var(--dim);
  border: 1px solid rgba(255, 179, 71, .25);
  padding: 6px 16px;
  font-size: 9px; letter-spacing: 1.6px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.modored button:first-child { border-radius: 4px 0 0 4px; border-right: none; }
.modored button:last-child { border-radius: 0 4px 4px 0; }
.modored button.on {
  background: rgba(46, 34, 20, .95);
  color: var(--gold);
  border-color: var(--gold);
}

/* La direccion del servidor: plegada, que casi nadie la va a tocar. */
.servbox { color: var(--dim); font-size: 11px; }
.servbox summary {
  cursor: pointer; list-style: none;
  letter-spacing: 2px; text-transform: uppercase; font-size: 10px;
  opacity: .75;
}
.servbox summary::-webkit-details-marker { display: none; }
.servbox summary::before { content: '▸ '; }
.servbox[open] summary::before { content: '▾ '; }
.servrow { display: flex; gap: 8px; justify-content: center; margin-top: 7px; }
.servrow input {
  width: 220px;
  background: rgba(10, 11, 20, .9);
  border: 1px solid rgba(255, 179, 71, .25);
  border-radius: 4px;
  color: var(--ink);
  padding: 8px 10px;
  font-family: inherit; font-size: 12px;
}
.servrow button {
  background: rgba(12, 14, 24, .9);
  color: var(--dim);
  border: 1px solid rgba(255, 179, 71, .25);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 9px; letter-spacing: 1.2px;
  font-family: inherit; cursor: pointer;
}
#servHint { margin-top: 6px; font-size: 10px; color: var(--dim); }
#servHint b { color: var(--gold); }
#servHint b.ok { color: #6fe0a0; }
#servHint b.mal { color: #e8836f; }
#servHint i { color: #d8c39c; font-style: normal; }
body.tactil .offbox input[type=range] { width: 110px; height: 26px; }

/* Aviso de girar el movil. El manifiesto ya fuerza el apaisado, asi que esto
   solo se ve un instante durante el giro o en aparatos que lo ignoren. */
#tvertical {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  background: #05050a;
  text-align: center;
  padding: 24px;
}
#tvertical b { font-size: 15px; letter-spacing: 3px; color: var(--gold); }
#tvertical span { font-size: 12px; color: var(--dim); }
#tvertical i {
  width: 42px; height: 68px;
  border: 3px solid var(--gold); border-radius: 7px;
  animation: tgira 1.8s ease-in-out infinite;
}
@keyframes tgira {
  0%, 40% { transform: rotate(0); }
  60%, 100% { transform: rotate(-90deg); }
}
@media (orientation: portrait) {
  body.tactil #tvertical { display: flex; }
}

/* En 320 px de alto (moviles pequenos y algunos con la barra de gestos) hay que
   recortar aun mas el menu para que SIN SERVIDOR siga viendose. Se van los dos
   textos de ayuda: el que quiera leerlos abre el juego en una pantalla mayor, y
   los botones se explican solos. */
@media (max-height: 365px) {
  body.tactil .paso { gap: 5px; padding: 3px 8px; }
  body.tactil #menuLogo { max-height: 13vh; }
  body.tactil .nethint { display: none; }
  body.tactil .controls { display: none; }
  body.tactil #wheelTrack { height: 54px; }
  body.tactil .ccard, body.tactil .ccard canvas { width: 50px; height: 50px; }
  body.tactil .modored button { padding: 4px 12px; }
  body.tactil .wheelarrow { width: 38px; height: 46px; }
  body.tactil #wheelName { font-size: 13px; }
  body.tactil .fields input { padding: 6px 8px; }
  body.tactil #createBtn, body.tactil #playBtn { padding: 8px 14px; font-size: 11px; }
  body.tactil #soloBtn { padding: 8px 14px; font-size: 11px; }
}

/* --------------------------------------------------------- moviles chicos */
/* Un aparato de gama baja apaisado deja 533x320 puntos, y ahi el racimo de la
   mano derecha se comia el minimapa. Todo encoge de golpe, pero ningun boton
   baja de los 48 px que hacen falta para acertarle con el pulgar.
   Va al final del fichero a proposito: estas reglas tienen la misma fuerza que
   las de arriba y solo ganan por llegar despues. */
@media (max-height: 360px), (max-width: 640px) {
  .tbtn.grande { width: 76px; height: 76px; }
  .tbtn.grande b { font-size: 10px; }
  .tbtn.medio { width: 60px; height: 60px; }
  .tbtn.chico { width: 50px; height: 50px; }
  .tbtn.chico b { font-size: 8px; }
  .tbtn.mini { width: 34px; height: 34px; font-size: 14px; }
  .tbtn.mini.zoom { width: 46px; height: 40px; }
  .tbtn.mini.zoom b { font-size: 12px; }
  .tbtn.arma { width: 48px; height: 48px; }
  .tbtn.arma .ico { transform: scale(1.4); margin-bottom: 5px; }
  .tbtn.arma .tnom { font-size: 6.5px; }

  #tracimo { width: 148px; height: 198px; }
  #tracimo .ataque { right: 2px; bottom: 34px; }
  #tracimo .dash { right: 76px; bottom: 2px; }
  #tracimo .usar { right: 88px; bottom: 76px; }
  #tracimo .escudo { right: 16px; bottom: 118px; }
  #tracimo .luz { right: 76px; bottom: 144px; }
  #tarmas { right: calc(164px + env(safe-area-inset-right)); gap: 7px; }

  #tpalanca { width: 112px; height: 112px; margin: -56px 0 0 -56px; }
  #tpalanca i { width: 46px; height: 46px; margin: -23px 0 0 -23px; }

  body.tactil #minimap { width: 84px; height: 84px; top: calc(54px + env(safe-area-inset-top)); }
  body.tactil #vitals { width: 172px; }
  body.tactil #chatbox { width: 180px; bottom: calc(70px + env(safe-area-inset-bottom)); }
  /* El minimapa encoge y sube un poco, y el rastreador lo sigue para seguir
     pegado a su izquierda. Ademas suelta la cabecera y la barra: en 320 px de
     alto lo que de verdad importa es el rumbo. */
  body.tactil #questbox {
    top: calc(54px + env(safe-area-inset-top));
    right: calc(102px + env(safe-area-inset-right));
    width: 118px;
  }
  body.tactil #questbox .qhead, body.tactil #questbox .qwrap { display: none; }
}

/* ------------------------------------------------- interfaz oculta

   "Ocultar interfaz", en el menu de pausa. La idea es jugar mirando la
   mazmorra y no los rotulos: se van los carteles —compañeros, piso y sala,
   minimapa, encargo, jefes, chat— y se quedan las manos, que son la palanca,
   los botones de la derecha, las armas y la vida de abajo.

   No se va nada que haga falta para reaccionar: los avisos sueltos, el cartel
   de estar caido y lo que pide pulsar USAR siguen saliendo. Y los botones de
   sistema (☰, mapa, chat...) se quedan tambien, o no habria por donde volver a
   abrir el menu para desactivarlo. */
body.sinhud #topbar,
body.sinhud #minimap,
body.sinhud #questbox,
body.sinhud #bossbar,
body.sinhud #elitebar,
body.sinhud #tale,
body.sinhud #errante,
body.sinhud #chatbox { display: none !important; }

/* El codigo de sala, en el menu de pausa: grande y espaciado, que se dicta en
   voz alta o se lee de una captura. */
.salarow { justify-content: space-between; }
.salarow b {
  font-family: monospace;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--gold);
}

/* -------------------------------------------------- tus heroes (a la derecha)

   Columna pegada al borde derecho del menu, con los personajes guardados. Va
   aparte del menu y no dentro, porque el menu es una columna centrada que ya
   iba justa de alto: metiendole nada al lado, CREAR SALA se caia fuera de la
   pantalla en los moviles de 320 px. */
#heroes {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 41;
  width: 150px;
  padding: calc(6px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) 6px 6px;
  display: flex; flex-direction: column; gap: 5px;
  overflow-y: auto;
  background: linear-gradient(90deg, transparent, rgba(6, 6, 12, .82) 22%);
  border-left: 1px solid rgba(255, 179, 71, .14);
  text-align: left;
}
/* Con la columna puesta, la eleccion de personaje se corre a la izquierda para
   no quedar debajo. Sin ella se queda centrada como siempre. Solo afecta al
   paso 1: en el paso 2 la columna no esta. */
body.conheroes #paso1 { padding-right: 162px; }
/* El renglon de la cuenta se aparta tambien: va posicionado contra el borde de
   la pantalla, asi que el relleno de arriba no lo mueve y se quedaba DEBAJO de
   la columna de heroes. */
body.conheroes #cuenta { right: 162px; }

#heroes .hhead { display: flex; flex-direction: column; gap: 4px; }
#heroes #hTitulo {
  font-size: 9px; letter-spacing: 2px; color: #b99a63;
}
#heroes button {
  font-family: inherit;
  font-size: 9px; letter-spacing: .5px;
  padding: 6px 5px;
  color: #e8d6b0;
  background: rgba(255, 179, 71, .1);
  border: 1px solid rgba(255, 179, 71, .3);
  border-radius: 6px;
}
#heroes #hHint { font-size: 8.5px; line-height: 1.35; color: #8a7a5e; margin: 0; }

#hList { display: flex; flex-direction: column; gap: 4px; }

/* Cada personaje: nombre, clase y nivel. El elegido se enciende. */
.hcard {
  position: relative;
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 20px 5px 7px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  background: rgba(255, 255, 255, .03);
}
.hcard.on {
  border-color: var(--gold);
  background: rgba(255, 179, 71, .13);
}
.hcard .hnom { font-size: 10px; color: #e8d6b0; }
.hcard .hsub { font-size: 8.5px; color: #9c8a68; }
.hcard .hnivel { color: var(--gold); }
/* La equis para borrar: pequeña y apagada, que no se toque sin querer. */
.hcard .hdel {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px; padding: 0;
  font-size: 9px; line-height: 1;
  color: #7a6a52;
  background: transparent; border: 0;
}

/* El codigo de sala, en el titulo del menu de pausa. En dorado y espaciado
   porque se dicta en voz alta o se lee de una captura; cuando no hay sala que
   repartir (partida en solitario) se dice bajito: es un dato de menos, no un fallo. */
#pauseRoom {
  margin-left: 8px;
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gold);
}
#pauseRoom.sinsala {
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 1px;
  color: #7a6a52;
}

/* La ficha cuando pregunta si de verdad se borra: se pone en rojo para que no
   se confunda con las demas, y las dos respuestas van bien separadas —una a
   cada lado— para que no se acierte la mala con el dedo. */
.hcard.preguntando {
  border-color: rgba(255, 90, 70, .55);
  background: rgba(120, 30, 26, .3);
}
.hcard.preguntando .hnom { color: #ffd0c4; }
/* Mas altos y mas separados que el resto de los botones: es la pulsacion que
   no tiene vuelta atras, asi que se pide un dedo puesto a proposito. */
.hsino { display: flex; gap: 9px; margin-top: 5px; }
#heroes .hsino button { flex: 1; padding: 10px 2px; font-size: 9px; }
#heroes .hsino .hsi {
  color: #ffc9bd;
  background: rgba(190, 50, 40, .32);
  border-color: rgba(255, 90, 70, .6);
}

/* ==========================================================================
   TUS HEROES EN EL PC: un cuadro debajo del acceso de Google

   En el movil la lista sigue siendo la columna pegada al borde derecho de mas
   arriba, y no se toca. En un monitor esa columna era un error de bulto: se
   quedaba 150 px de ancho de punta a punta de la pantalla para ensenar tres
   fichas de dos renglones, y encima empujaba la rueda de personajes 162 px a la
   izquierda, con lo que el juego se elegia descentrado y con menos sitio.

   Aqui la lista se recoge en un cuadro que cuelga del renglon de la cuenta, que
   es justo donde uno la busca: al lado de "Google: Fulano" esta lo que se
   guarda en esa cuenta. El resto de la pantalla vuelve a ser del juego.

   Todo cuelga de `body.pc`, que main.js pone cuando no es Android.            */

/* Ya no manda el sitio: ni empuja el paso 1 ni aparta el renglon de la cuenta. */
body.pc.conheroes #paso1 { padding-right: 14px; }
body.pc.conheroes #cuenta { right: 12px; }

body.pc #heroes {
  /* `absolute` y no `fixed`: se cuelga de #paso1, que es quien lleva el
     `position` y quien manda en esta pantalla. */
  position: absolute;
  top: 48px; right: 12px; bottom: auto; left: auto;
  width: 208px;
  /* Que no baje nunca hasta el borde: si hay diez heroes, rueda por dentro. */
  max-height: min(52vh, 420px);
  padding: 9px;
  gap: 7px;
  background: rgba(10, 10, 18, .92);
  border: 1px solid rgba(255, 179, 71, .22);
  border-radius: 8px;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .9);
}
body.pc #heroes #hTitulo { font-size: 8.5px; letter-spacing: 2.5px; }
/* La coletilla de donde se guardan: en un cuadro tan estrecho, con el tamano de
   antes se comia media caja para decir algo que se lee una vez en la vida. */
body.pc #heroes #hHint { font-size: 8px; line-height: 1.3; opacity: .8; }
/* Fichas mas apretadas: aqui se ven de un vistazo, no se leen despacio. */
body.pc .hcard { padding: 4px 18px 4px 6px; }
body.pc .hcard .hnom { font-size: 9.5px; }
body.pc .hcard .hsub { font-size: 8px; }

/* Pantalla estrecha: el cuadro se queda igual de ancho pero mas bajo, para no
   taparle la cara al personaje que estas eligiendo. */
@media (max-height: 620px) {
  body.pc #heroes { max-height: 44vh; }
}