/* A UNIDADE DE ALTURA deste arquivo.
 *
 * `vh` mede a viewport GRANDE — a que existiria com as barras do navegador retraidas. No
 * Chrome do Android as barras costumam estar la, e entao `100vh` e uns 15% MAIOR que o
 * espaco que a pagina realmente tem: tudo o que e dimensionado em vh nasce grande demais e
 * as telas estouram. `dvh` mede o espaco de verdade, e muda junto quando a barra some.
 *
 * Fica numa variavel, e nao escrito em cada regra, porque sao dezenas de medidas: com
 * `@supports` o aparelho sem `dvh` (nenhum que nos interesse hoje, mas o custo e uma
 * linha) continua no `vh` de antes em vez de perder a regra inteira.
 */
html { --u: 1vh; }
@supports (height: 1dvh) { html { --u: 1dvh; } }

/* Estilo do MOBILE, num arquivo só.
 *
 * Tudo aqui está atrás de `body.mobile` — a classe que o `ui/mobile.js` põe quando o
 * ponteiro é GROSSO e não há hover, ou seja quando não existe cursor nenhum. Não há um
 * único seletor neste arquivo que case fora do celular, e é assim que "adaptar o mobile"
 * não vira "mexer no que já funciona".
 *
 * Arquivo separado do `style.css` de propósito: o desktop é a maior parte do CSS e não
 * ganha nada com 300 linhas de celular no meio dele. Aqui o critério de tudo é o mesmo —
 * um celular deitado tem ~390px de ALTURA, então o gargalo não é a largura, é a vertical.
 *
 * Duas medidas atravessam o arquivo:
 *   --sa*  as áreas seguras do notch (`env(safe-area-inset-*)`), que só existem por causa
 *          do `viewport-fit=cover` do index.html. Sem elas o stick nasce debaixo da barra
 *          de gestos do iOS e a barra de sistema entra no recorte da câmera.
 *   --tsc  a escala dos controles (o slider "tamanho dos botões"). Ela multiplica tamanho
 *          E posição, senão aumentar os botões os empilharia uns nos outros.
 */

/* O único seletor do arquivo que casa NO DESKTOP, e casa para ESCONDER: a página de Toque
   das opções (e a aba que ela gera no modal in-game) seriam cinco sliders que não regulam
   nada num PC. Fica aqui, e não no style.css, porque é uma regra sobre o celular — só que
   escrita pelo avesso. */
body:not(.mobile) .mobonly { display: none !important; }
/* e o par dela: o que só faz sentido com teclado e mouse */
body.mobile .pconly { display: none !important; }

body.mobile {
  --sal: env(safe-area-inset-left, 0px);  --sar: env(safe-area-inset-right, 0px);
  --sat: env(safe-area-inset-top, 0px);   --sab: env(safe-area-inset-bottom, 0px);
  /* o toque não tem cursor para esconder, e o `cursor:none` global some com o ponteiro do
     modo forçado por `?mobile=1` — que é como esta interface se testa num PC */
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: none;
}
body.mobile input, body.mobile textarea { touch-action: auto; user-select: text; }

/* ---------------------------------------------------------- gire o aparelho
   A trava de orientação (`screen.orientation.lock`) não existe no iOS e pode ser recusada
   em aba comum. Este aviso é o que segura o jogo em paisagem quando ela falha — e ele
   BLOQUEIA de verdade: jogar em retrato não é uma versão pior do jogo, é um HUD que não
   cabe na tela. */
.trotate { position: fixed; inset: 0; z-index: 90; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: var(--bg-sunken); text-align: center; padding: 24px; }
.trotate.on { display: flex; }
.trotate b { font-family: var(--font-display); font-size: 20px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--neon-500); }
.trotate span { font-size: 12px; letter-spacing: 1.5px; color: var(--muted); }
.trotate .ph { width: 96px; height: 58px; border: 3px solid var(--border-strong);
  border-radius: 8px; position: relative; animation: trot 2.2s ease-in-out infinite; }
.trotate .ph::after { content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(57, 255, 20, .3); }
@keyframes trot { 0%, 40% { transform: rotate(90deg) } 60%, 100% { transform: rotate(0) } }
/* em retrato o jogo não recebe toque nenhum: um dedo esquecido no stick continuaria
   empurrando o boneco atrás do aviso */
body.mobile.retrato #touch, body.mobile.retrato #overlay { pointer-events: none; }

/* ---------------------------------------------------------- controles de toque */
.tcontrols { position: fixed; inset: 0; z-index: 8; pointer-events: none;
  --tsc: 1; --top: .85;
  /* As medidas do cluster, todas derivadas da ALTURA da tela. Os `max` são os números do
     "Strike2D Mobile HUD"; os `min` são o menor alvo que um polegar ainda acerta. Sem
     isto, num iPhone deitado com as barras do Safari (~280px de viewport) o botão de tiro
     de 96px ocupava um terço da altura e o cluster comia o canto do mapa. */
  --gb: clamp(64px, calc(var(--u) * 24), 96px);      /* botão grande (tiro) */
  --mb: clamp(42px, calc(var(--u) * 15.5), 60px);    /* médios (recarga, granada) */
  --sb: clamp(36px, calc(var(--u) * 13), 50px);      /* pequenos (devagar, luneta, ping, trocar) */
  --stk: clamp(84px, calc(var(--u) * 32), 124px);    /* o stick de movimento */
  --wsh: clamp(24px, calc(var(--u) * 8.5), 32px);    /* altura de um slot da fita */
  --gap: clamp(6px, calc(var(--u) * 2.2), 14px);
  --r0: calc(var(--gap) + var(--sar));
  --l0: calc(var(--gap) + var(--sal));
  --b0: calc(var(--gap) + var(--sab));
  touch-action: none; user-select: none; -webkit-user-select: none; }
.tcontrols.off { display: none; }
.tcontrols > * { pointer-events: auto; }

/* as duas metades de arraste. Ficam ANTES dos botões no DOM: um toque em cima de um botão
   é do botão, e o resto da metade é do stick. */
.tzone { position: absolute; top: 0; bottom: 0; width: 50%; }
.tzone-move { left: 0; }
.tzone-aim { right: 0; }
.tcontrols.canhoto .tzone-move { left: auto; right: 0; }
.tcontrols.canhoto .tzone-aim { right: auto; left: 0; }

/* o stick de movimento: desenho só — o gesto é do `.tzone-move`. Ele NASCE onde o dedo
   toca (stick flutuante), porque procurar um controle fixo no escuro custa meio segundo
   por vez, e meio segundo é o tempo de morrer. */
.tstick { position: absolute; left: -999px; top: -999px;
  width: var(--stk); height: var(--stk); margin: calc(var(--stk) / -2) 0 0 calc(var(--stk) / -2);
  border-radius: 50%; opacity: 0;
  background: rgba(6, 10, 7, .34); border: 1.5px solid rgba(57, 255, 20, .26);
  transition: opacity .14s, border-color .14s; pointer-events: none;
  transform: scale(var(--tsc)); }
.tstick.act { opacity: var(--top); border-color: rgba(57, 255, 20, .55); }
.tstick .ring { position: absolute; inset: 14%; border-radius: 50%;
  border: 1px dashed rgba(57, 255, 20, .16); }
.tstick .nub { position: absolute; left: 50%; top: 50%;
  width: 42%; height: 42%; margin: -21% 0 0 -21%;
  border-radius: 50%; background: rgba(57, 255, 20, .18);
  border: 1.5px solid rgba(57, 255, 20, .6); box-shadow: 0 0 14px rgba(57, 255, 20, .2); }

/* botões redondos do cluster (porte do `.btn` do Strike2D Mobile HUD).
 *
 * Os tamanhos e as distâncias saem de `clamp(min, Nvh, max)` — as mesmas variáveis
 * declaradas em `.tcontrols` — e não de px fixo. A razão é a mesma das telas: um botão de
 * 96px é um terço da altura de um iPhone deitado com as barras do Safari (~280px), e o
 * cluster inteiro comia o canto do mapa que ele existe para deixar jogar. Nas alturas
 * grandes o `max` devolve exatamente os números do documento.
 *
 * As POSIÇÕES derivam dos tamanhos (`--gb`, `--mb`, `--sb`, `--gap`), nunca de números
 * soltos: com os tamanhos variando e as distâncias fixas, encolher a tela empilhava os
 * botões uns por cima dos outros. */
.tbtn { position: absolute; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; padding: 0;
  background: rgba(6, 10, 7, .5); border: 1.5px solid rgba(57, 255, 20, .3);
  color: var(--neon-500); opacity: var(--top); backdrop-filter: blur(3px);
  transform: scale(var(--tsc)); transform-origin: center;
  transition: background .1s, border-color .1s, opacity .1s; }
.tbtn svg { width: 42%; height: 42%; }
.tbtn .lb { font-size: 7px; letter-spacing: 1px; color: var(--muted); }
.tbtn.on { background: rgba(57, 255, 20, .26); border-color: var(--neon-500); }
.tbtn.travado { background: rgba(57, 255, 20, .18); border-color: rgba(57, 255, 20, .7); }
/* ação que AGORA não faz nada não fica apagada: some. Apagada o jogador aperta assim
   mesmo e não tem como saber se o jogo travou ou se aquilo nunca existiu. */
.tbtn.some { display: none; }
.tbtn.big { width: var(--gb); height: var(--gb); right: var(--r0); bottom: var(--b0); }
.tbtn.big svg { width: 42%; height: 42%; stroke-width: 2; }
.tbtn.md { width: var(--mb); height: var(--mb); }
.tbtn.sm { width: var(--sb); height: var(--sb); }
#t-reload { right: calc(var(--r0) + var(--gb) + var(--gap));
            bottom: calc(var(--b0) + var(--gb) * .16); }
#t-nade   { right: calc(var(--r0) + var(--gb) * .16);
            bottom: calc(var(--b0) + var(--gb) + var(--gap)); }
#t-walk   { right: calc(var(--r0) + var(--gb) + var(--gap));
            bottom: calc(var(--b0) + var(--gb) * .16 + var(--mb) + var(--gap)); }
#t-scope  { right: calc(var(--r0) + var(--gb) + var(--mb) + var(--gap) * 2);
            bottom: calc(var(--b0) + var(--gb) * .38); }
#t-ping   { right: calc(var(--r0) + var(--gb) + var(--mb) + var(--gap) * 2);
            bottom: calc(var(--b0) + var(--gb) * .38 + var(--sb) + var(--gap)); }
#t-swap   { left: 50%; margin-left: calc(var(--sb) / -2);
            bottom: calc(var(--b0) + var(--wsh) + var(--gap) * 2); }
.tcontrols.canhoto .tbtn:not(#t-swap) { right: auto; }
.tcontrols.canhoto .tbtn.big { left: var(--l0); }
.tcontrols.canhoto #t-reload { left: calc(var(--l0) + var(--gb) + var(--gap)); }
.tcontrols.canhoto #t-nade   { left: calc(var(--l0) + var(--gb) * .16); }
.tcontrols.canhoto #t-walk   { left: calc(var(--l0) + var(--gb) + var(--gap)); }
.tcontrols.canhoto #t-scope  { left: calc(var(--l0) + var(--gb) + var(--mb) + var(--gap) * 2); }
.tcontrols.canhoto #t-ping   { left: calc(var(--l0) + var(--gb) + var(--mb) + var(--gap) * 2); }

/* fita de slots: a mesma leitura do Weapon Select, com o dedo no lugar das teclas 1..5 */
.twsel { position: absolute; left: 50%; transform: translateX(-50%) scale(var(--tsc));
  bottom: calc(var(--gap) + var(--sab)); display: flex; gap: 5px; opacity: var(--top); }
.tws { width: calc(var(--wsh) * 1.35); height: var(--wsh); padding: 0;
  background: rgba(6, 10, 7, .5);
  border: 1.5px solid rgba(255, 255, 255, .12); color: var(--muted);
  font-family: var(--font-mono); font-size: clamp(10px, calc(var(--u) * 3.4), 13px); font-weight: 700;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px),
                     calc(100% - 6px) 100%, 0 100%, 0 6px); }
.tws.on { border-color: var(--neon-500); color: var(--neon-500);
  background: rgba(57, 255, 20, .16); }
.tws.vazio { opacity: .3; }

/* barra de sistema: chat, placar e pausa. Canto SUPERIOR direito, longe dos polegares —
   apertar "pausa" sem querer no meio de uma troca de tiro é o pior toque acidental que
   este jogo tem. */
.tsys { position: absolute; top: calc(6px + var(--sat)); right: calc(6px + var(--sar));
  display: flex; gap: 6px; opacity: var(--top); }
.tbtn.sys { position: static; width: 34px; height: 34px; border-radius: 4px;
  border-color: rgba(57, 255, 20, .22); transform: none; }
.tbtn.sys svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------- HUD DOM em partida */
/* A barra de chat sai do rodapé e vai para o TOPO: o teclado virtual cobre a metade de
   baixo da tela, e no rodapé ela ficava ATRÁS dele — digitava-se às cegas. */
body.mobile #chatbar { left: calc(8px + var(--sal)); right: calc(8px + var(--sar));
  width: auto; bottom: auto; top: calc(46px + var(--sat)); }
body.mobile #chatbar input { font-size: 16px; }   /* abaixo de 16px o iOS dá zoom no foco */
body.mobile #item-tip { width: 210px; font-size: 11px; }
body.mobile #medal { transform: scale(.82); transform-origin: top center; }

/* tela de morte: aqui o toque é o botão, e a dica da tecla Espaço não vale */
body.mobile #dlg-death { padding: 10px; }
/* ESPECTADOR no celular: a faixa vai para o TOPO. Os dois cantos de baixo são o stick e o
   botão de tiro — no rodapé ela cairia debaixo do polegar, e o toque que troca de jogador
   disputaria com o toque que anda. */
body.mobile #dlg-death.spec { padding: 40px 10px 10px; justify-content: flex-start; }
body.mobile #dlg-death .dbig { font-size: 30px; }
body.mobile #dlg-death .dkiller { transform: scale(.82); }

/* ---------------------------------------------------------- telas (menu e diálogos)
   Aqui o tamanho é escrito em `clamp(min, Nvh, max)`, e não em px fixo, porque a ALTURA
   útil de um celular varia demais para um número só: um iPhone deitado com as barras do
   Safari tem ~280px de viewport, o MESMO aparelho instalado na tela inicial tem ~390, e um
   tablet passa de 700. Com px fixo, ou o texto estoura a tela pequena ou fica minúsculo na
   grande — e foi o que aconteceu na primeira versão: a tela de entrada não cabia no Safari
   do iPhone e o botão de convidado ficava fora do rodapé.

   O `max` de cada clamp é o valor do desktop, então nada aqui encolhe o que já cabia; o
   `min` é o menor tamanho ainda legível. Entre os dois, quem decide é a tela. */
body.mobile .dialog.card { width: min(520px, 94vw); max-height: calc(var(--u) * 96); overflow-y: auto;
  overscroll-behavior: contain; touch-action: pan-y; }
/* A tela cheia ROLA se o conteúdo não couber, em vez de cortar.
 *
 * É rede de segurança, não layout: com tudo cabendo (o caso normal) esta regra não faz
 * nada. Ela existe porque a altura de um celular não é só a do aparelho — o
 * redimensionamento de texto do sistema, uma fonte que não carregou e caiu num fallback
 * mais alto, ou uma barra de navegador que resolveu ficar, todos empurram o conteúdo para
 * baixo. Cortando, o botão que decide a ação some sem deixar sinal de que existe, e a tela
 * fica "quebrada"; rolando, ela fica apertada — que é ruim, mas é jogável. */
body.mobile .dialog.screen { overflow-y: auto; overflow-x: hidden; touch-action: pan-y; }
body.mobile .top { padding: clamp(3px, calc(var(--u) * 1.2), 10px) calc(12px + var(--sar))
  clamp(3px, calc(var(--u) * 1.2), 10px) calc(12px + var(--sal)); gap: 10px; }
body.mobile .brand .mark { font-size: clamp(12px, calc(var(--u) * 3.6), 20px); }
body.mobile .brand .tag { display: none; }
body.mobile .nav { gap: 2px; margin-left: 4px; }
body.mobile .nav button { font-size: clamp(9px, calc(var(--u) * 2.4), 12px);
  padding: clamp(4px, calc(var(--u) * 1.2), 9px) 8px; letter-spacing: 1px; }
body.mobile .back { padding: clamp(4px, calc(var(--u) * 1.2), 9px) 10px;
  font-size: clamp(9px, calc(var(--u) * 2.4), 12px); }
body.mobile .title h1 { font-size: clamp(12px, calc(var(--u) * 3.4), 18px); }
body.mobile .title .k { font-size: clamp(8px, calc(var(--u) * 2), 10px); }
body.mobile .avatar { width: clamp(26px, calc(var(--u) * 8), 40px); height: clamp(26px, calc(var(--u) * 8), 40px); }
body.mobile .avatar .skin { width: 96px; height: 144px; left: -8px; top: -5px;
  background-size: 96px 144px; }
body.mobile .namewrap input { width: 108px; font-size: 12px; }
body.mobile .namewrap label { display: none; }
body.mobile .wallet { padding: 4px 9px; gap: 8px; }
body.mobile .foot { padding: clamp(3px, calc(var(--u) * 1.2), 10px) 14px; font-size: 10px; }

/* entrada (conta): o card mais alto do jogo, e o primeiro que o jogador vê. Com 280px de
   viewport ele passava do rodapé, e o "entrar como convidado" — que é o caminho de quem
   só quer jogar — ficava fora da tela. */
body.mobile #dlg-auth { width: min(360px, 92vw);
  padding: clamp(8px, calc(var(--u) * 2.4), 34px) clamp(16px, 4vw, 32px) clamp(8px, calc(var(--u) * 2), 28px); }
body.mobile #dlg-auth .brandbig .mark { font-size: clamp(18px, calc(var(--u) * 6), 38px); }
body.mobile #dlg-auth .brandbig .tag2 { margin-top: clamp(2px, calc(var(--u) * 1), 8px);
  font-size: clamp(8px, calc(var(--u) * 1.8), 10px); }
body.mobile .authtabs { margin: clamp(5px, calc(var(--u) * 2.2), 22px) 0 clamp(5px, calc(var(--u) * 1.8), 20px); }
body.mobile #dlg-auth .field { margin-bottom: clamp(4px, calc(var(--u) * 1.6), 14px); }
body.mobile #dlg-auth .guest { margin-top: clamp(5px, calc(var(--u) * 1.8), 16px);
  padding: clamp(5px, calc(var(--u) * 1.6), 12px) 0; }
/* O botão principal tem `padding:14px` INLINE no HTML, e inline vence folha de estilo: só
   `!important` o alcança. São 28px de altura só de respiro, e eles eram a diferença entre
   o "entrar como convidado" caber ou ficar abaixo do rodapé — que é o pior lugar possível
   para o caminho de quem só quer jogar. */
body.mobile #dlg-auth .btn.prim, body.mobile #auth-logout {
  padding: clamp(7px, calc(var(--u) * 2.4), 14px) 12px !important;
  font-size: clamp(13px, calc(var(--u) * 3.4), 15px) !important; }
/* o contador de gente online é informação, não ação: numa tela curta ele cede o lugar */
body.mobile #dlg-auth .online { margin-top: clamp(3px, calc(var(--u) * 1.4), 14px); }
@media (max-height: 320px) { body.mobile #dlg-auth .online { display: none; } }

/* launcher: as duas colunas continuam (menu à esquerda, mapa à direita), mas a descrição
   que abre no hover SAI — não há hover no toque, e ela só ocuparia altura */
body.mobile .launch-body { grid-template-columns: minmax(220px, 44%) 1fr; }
body.mobile .left { padding: 0 16px 6px; }
body.mobile .mi { padding: clamp(3px, calc(var(--u) * 1.3), 13px) 10px clamp(3px, calc(var(--u) * 1.3), 13px) 0;
  gap: 10px; grid-template-columns: 22px minmax(0, 1fr) auto; }
body.mobile .mi .t { font-size: clamp(12px, calc(var(--u) * 3.8), 20px); letter-spacing: 1.6px; }
body.mobile .mi .dw { display: none; }
body.mobile .mi .mode { font-size: clamp(7px, calc(var(--u) * 1.8), 10px); }
body.mobile .mi svg { width: clamp(14px, calc(var(--u) * 4), 22px); height: clamp(14px, calc(var(--u) * 4), 22px); }
body.mobile #dlg-main .right { padding: 0 18px 12px; gap: 8px; }
/* o cartão da party divide a direita com o mapa: no celular deitado ele tem de caber
   inteiro, com os três botões alcançáveis sem rolar o menu */
body.mobile .mparty { width: 100%; padding: clamp(6px, calc(var(--u) * 2.4), 14px) 12px;
  gap: clamp(5px, calc(var(--u) * 2), 12px); max-height: calc(var(--u) * 88);
  overflow-y: auto; touch-action: pan-y; }
body.mobile .mparty .mp-h { font-size: 10px; }
body.mobile .mp-list { gap: 4px; }
body.mobile .mp-row { padding: 3px 6px; gap: 7px; }
body.mobile .mp-row .mpn { font-size: 11.5px; }
/* Convidar e Sair dividem uma linha: em 280px de altura os três botões empilhados
   empurravam o "Sair da party" para fora do cartão — e sair é justamente o que se procura
   ali. Jogar (e a nota de quem não é líder) continua ocupando a linha inteira. */
body.mobile .mp-act { grid-template-columns: 1fr 1fr; gap: 5px; }
body.mobile .mp-act #mp-play, body.mobile .mp-note { grid-column: 1 / -1; }
body.mobile .mp-act .btn { padding: clamp(5px, calc(var(--u) * 2), 12px) 10px;
  font-size: clamp(10px, calc(var(--u) * 2.8), 12px); }
body.mobile .mp-note { font-size: 10.5px; }
body.mobile .left .note { display: none; }
body.mobile .mapinfo .kicker { font-size: clamp(8px, calc(var(--u) * 2), 10px); margin-bottom: 4px; }

/* NOVIDADES no celular: o CABEÇALHO é o que não pode sair, porque é ele que leva ao "Ver
   tudo" — a tela cheia é onde a lista se lê deitado. No corpo sobra UM item: em 280px de
   altura a coluna divide o espaço com a party (que tem três botões), e dois itens de três
   linhas cada empurravam o "Sair da party" para fora — o mesmo problema que os botões em
   duas colunas resolveram. Um item já cumpre o que o bloco existe para fazer: dizer que
   mudou algo, e qual foi a última coisa. */
body.mobile .news { width: 100%; padding: clamp(6px, calc(var(--u) * 2.4), 14px) 12px; }
body.mobile .news .nh { margin-bottom: clamp(4px, calc(var(--u) * 1.6), 12px);
  gap: clamp(6px, calc(var(--u) * 2), 12px); }
body.mobile .news .nh .t,
body.mobile .news .nh .v,
body.mobile .news .nh .all { font-size: clamp(8px, calc(var(--u) * 2), 10px); }
/* o "Ver tudo" é o único alvo de TOQUE daqui, e o padding do PC dava 21px de altura —
   metade do que um dedo acerta. Quem garante o alvo é o `min-height`, e não uma fonte maior:
   o texto tem de continuar do tamanho do cabeçalho ao lado. Em 280px de tela o mínimo real
   (44px) seria um sexto da altura, então a medida acompanha a tela como o resto dos botões
   do celular — e nunca desce dos 28px. */
body.mobile .news .nh .all { padding: 0 4px; color: var(--neon-500);
  min-height: clamp(28px, calc(var(--u) * 11), 40px);
  display: inline-flex; align-items: center; }
body.mobile .nlist .ni:nth-child(n+2) { display: none; }
/* A coluna do TIPO tem PISO de 60px, que é o que cabe "CORRIGIDO" — o rótulo mais longo dos
   três. Escalada só por `--u`, ela chegava a 44px numa tela de 280px e a palavra saía POR
   CIMA do título ao lado, as duas no mesmo pixel. Encolher a fonte é o que NÃO resolve: a
   coluna encolhe junto, na mesma proporção.

   E é UMA guarda, não duas: reduzir o tracking da tag também fazia o rótulo caber, e com as
   duas em pé reverter qualquer uma delas não reprovava no teste — foi o que aconteceu na
   primeira versão disto. */
body.mobile .ni { grid-template-columns: clamp(60px, calc(var(--u) * 22), 72px) minmax(0, 1fr);
  gap: clamp(7px, calc(var(--u) * 3), 14px); padding: clamp(4px, calc(var(--u) * 1.6), 9px) 0; }
body.mobile .ni .ar { font-size: clamp(8px, calc(var(--u) * 2), 10px); letter-spacing: 1.6px; }
body.mobile .ni .tx { font-size: clamp(10px, calc(var(--u) * 2.8), 12.5px); line-height: 1.4;
  margin-top: 2px; }

/* a tela cheia do histórico é a que se lê deitado: ela ROLA, e o cartão de cada versão
   ocupa a largura toda (o `max-width` de 720px do PC deixaria metade da tela vazia) */
body.mobile #dlg-news .news-body { padding: clamp(2px, var(--u), 8px) 14px
  clamp(8px, calc(var(--u) * 3), 24px); gap: clamp(10px, calc(var(--u) * 4), 26px);
  touch-action: pan-y; }
body.mobile #dlg-news .rel { max-width: none; }
body.mobile #dlg-news .rh b { font-size: clamp(12px, calc(var(--u) * 3.8), 16px); }

/* PLAY. O passo do MODO é o mais apertado do jogo: três cartões com arte e regras, mais o
   rodapé do tempo e o START — em 280px de altura ele estourava a tela para os dois lados,
   e o botão que começa a partida ficava FORA. Duas medidas resolvem: o passo ROLA (nada de
   cortar o que existe em silêncio) e o cartão perde o que é enfeite — a arte encolhe e a
   descrição sai. Título e regras dizem o modo; a arte é decoração. */
body.mobile .play .step { padding: clamp(4px, calc(var(--u) * 1.6), 14px) 10px clamp(6px, calc(var(--u) * 2), 16px);
  gap: clamp(5px, calc(var(--u) * 2), 16px); overflow-y: auto; justify-content: flex-start;
  touch-action: pan-y; }
body.mobile .play .head .k { font-size: clamp(8px, calc(var(--u) * 2), 10px); margin-bottom: 3px; }
body.mobile .play .head .h { font-size: clamp(15px, calc(var(--u) * 5.4), 30px); letter-spacing: 3px; }
body.mobile .play .head .d { font-size: clamp(9px, calc(var(--u) * 2.4), 12px); margin-top: 3px; }
body.mobile .play .card .d { font-size: clamp(9px, calc(var(--u) * 2.4), 12px); }
body.mobile .play .pair { gap: 10px; }
body.mobile .play .card { padding: clamp(8px, calc(var(--u) * 2.8), 26px) clamp(10px, 2.4vw, 26px)
  clamp(8px, calc(var(--u) * 2.4), 22px); }
body.mobile .play .card .ico { width: clamp(18px, calc(var(--u) * 6), 40px);
  height: clamp(18px, calc(var(--u) * 6), 40px); margin-bottom: clamp(4px, calc(var(--u) * 1.6), 14px); }
body.mobile .play .card .t { font-size: clamp(14px, calc(var(--u) * 4.8), 26px); letter-spacing: 2px; }
body.mobile .play .card .foot { margin-top: clamp(6px, calc(var(--u) * 2), 18px); gap: 6px; }
body.mobile .play .pill { font-size: clamp(8px, calc(var(--u) * 1.8), 10px); padding: 4px 7px; }
body.mobile .play .card .live { top: 10px; right: 10px;
  font-size: clamp(8px, calc(var(--u) * 1.8), 10px); }
body.mobile .play .modes { gap: 8px; }
body.mobile .play .mode .art { height: clamp(28px, calc(var(--u) * 13), 110px); }
body.mobile .play .mode .art .abbr { font-size: clamp(14px, calc(var(--u) * 5), 30px);
  right: 8px; bottom: 4px; }
body.mobile .play .mode .info { padding: clamp(5px, calc(var(--u) * 1.8), 14px) 10px
  clamp(6px, calc(var(--u) * 2), 16px); }
body.mobile .play .mode .t { font-size: clamp(11px, calc(var(--u) * 3.4), 16px); letter-spacing: 1.4px; }
body.mobile .play .mode .d { display: none; }
body.mobile .play .mode .rules { gap: 10px; margin-top: clamp(4px, calc(var(--u) * 1.6), 12px);
  padding-top: clamp(4px, calc(var(--u) * 1.6), 12px); }
body.mobile .play .mode .rules span { font-size: clamp(7px, calc(var(--u) * 1.8), 9px);
  letter-spacing: 1.4px; }
body.mobile .play .mode .rules b { font-size: clamp(10px, calc(var(--u) * 2.6), 13px); }
body.mobile .play .setup { padding-top: clamp(6px, calc(var(--u) * 2), 20px); gap: 12px; }
body.mobile .play .field label { font-size: clamp(7px, calc(var(--u) * 1.8), 9px); }
body.mobile .play .seg button { font-size: clamp(10px, calc(var(--u) * 2.6), 13px);
  padding: clamp(5px, calc(var(--u) * 1.6), 9px) clamp(9px, 2vw, 15px); }
body.mobile .play .go { font-size: clamp(13px, calc(var(--u) * 4.6), 26px); letter-spacing: 3px;
  padding: clamp(7px, calc(var(--u) * 2.2), 16px) clamp(18px, 5vw, 44px); }
/* a tela de busca: o radar de 270px não cabe deitado */
body.mobile .play .radar { width: clamp(110px, calc(var(--u) * 38), 240px);
  height: clamp(110px, calc(var(--u) * 38), 240px); margin: clamp(4px, calc(var(--u) * 1.6), 20px) 0 2px; }
body.mobile .play .radar .ring:nth-child(2) { inset: 13%; }
body.mobile .play .radar .ring:nth-child(3) { inset: 26%; }
body.mobile .play .radar .ring:nth-child(4) { inset: 39%; }
body.mobile .play .radar .core { font-size: clamp(16px, calc(var(--u) * 5), 30px); }
body.mobile .play .qstats { margin-top: clamp(6px, calc(var(--u) * 2), 24px); }
body.mobile .play .qstats div { padding: clamp(5px, calc(var(--u) * 1.6), 12px) clamp(10px, 3vw, 24px); }
body.mobile .play .qstats b { font-size: clamp(12px, calc(var(--u) * 3), 18px); }
body.mobile .play .tips { margin-top: clamp(5px, calc(var(--u) * 1.6), 18px); font-size: 10px; }

/* opções: a navegação lateral vira uma FITA horizontal rolável no topo. Em 280px de
   altura, uma coluna de 220px comeria metade da tela para mostrar cinco palavras. */
body.mobile .opt-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
body.mobile .optnav { flex-direction: row; border-right: none; padding: 0; flex: none;
  border-bottom: 1px solid var(--border); overflow-x: auto; touch-action: pan-x; }
body.mobile .nitem { padding: clamp(5px, calc(var(--u) * 1.8), 12px) 12px;
  font-size: clamp(9px, calc(var(--u) * 2.6), 13px); white-space: nowrap; border-left: none;
  border-bottom: 3px solid transparent; }
body.mobile .nitem.on { border-left-color: transparent;
  border-bottom-color: var(--neon-500); }
body.mobile .nitem svg { width: 14px; height: 14px; }
body.mobile .navfoot { display: none; }
body.mobile .optpanel { padding: clamp(6px, calc(var(--u) * 2), 20px) 14px; touch-action: pan-y; }

/* A linha de ajuste vira DUAS: rótulo e valor lado a lado em cima, o controle largo
   embaixo. As três colunas do desktop (rótulo | controle | valor) espremem o slider em
   ~90px aqui, e slider curto é ajuste impossível com o dedo. As posições são explícitas
   porque a ordem no HTML muda de linha para linha (umas têm um `<div>` vazio de
   espaçador), e sem isso o interruptor caía numa terceira fileira sozinho. */
body.mobile .orow { grid-template-columns: 1fr auto; gap: 4px 10px;
  padding: clamp(5px, calc(var(--u) * 1.6), 11px) 0; align-items: center; }
body.mobile .orow .rl { font-size: clamp(11px, calc(var(--u) * 2.8), 13px); grid-column: 1; grid-row: 1; }
body.mobile .orow .rl small { font-size: 10px; }
body.mobile .orow > .val { grid-column: 2; grid-row: 1; }
body.mobile .orow > .swbox { grid-column: 2; grid-row: 1; justify-self: end; }
body.mobile .orow > .segs, body.mobile .orow > .inline,
body.mobile .orow > input[type="range"], body.mobile .orow > input[type="text"],
body.mobile .orow > input[type="password"] { grid-column: 1 / -1; grid-row: 2; }
body.mobile .orow input[type="range"] { max-width: none; height: 26px; }
/* os espaçadores do layout de três colunas não têm o que fazer aqui, e cada um deles
   ocupava uma célula que empurrava o controle para a linha seguinte */
body.mobile .orow > div:empty, body.mobile .orow > span:empty { display: none; }
body.mobile .chwrap { grid-template-columns: 1fr; }
body.mobile .chprev { width: clamp(120px, calc(var(--u) * 34), 200px); height: clamp(120px, calc(var(--u) * 34), 200px); }
body.mobile .keylist { display: none; }   /* teclado não existe aqui */

/* As telas cheias que são um CORPO em duas colunas (agentes, stats, criar sala): no
   desktop elas cabem em 800px de altura e não precisam rolar. Em 280px nada cabe, e o
   `overflow:hidden` da `.dialog.screen` apenas CORTA — os botões e metade do conteúdo
   somem sem deixar sinal de que existem. A regra aqui é uma só: as colunas rolam por
   conta, e o padding encolhe. */
body.mobile .ag-body, body.mobile .stats-body,
body.mobile .fr-body, body.mobile .create-body { gap: 12px; padding: 0 12px 12px; }
body.mobile .stats-body { grid-template-columns: 260px 1fr; }
body.mobile .ag-body > *, body.mobile .stats-body > *, body.mobile .fr-body > *,
body.mobile .create-body > * { overflow-y: auto; min-height: 0; touch-action: pan-y; }
body.mobile .listwrap { padding: 6px 12px 14px; touch-action: pan-y; }

/* ---------------------------------------------------------------- loadout no CELULAR
   Porte do "Loadout mobile" do design system, e é OUTRO layout — não o do desktop
   encolhido. A tela do desktop inteira (`.ld-tabs` + `.ld-app`) SOME aqui, e entra a
   `.ldm`: três colunas que cabem na tela deitada SEM rolagem — slots à esquerda, encaixes
   em grade no centro, e um painel à direita que muda de contexto.

   O gargalo do celular é a ALTURA, e a versão anterior empilhava cabeçalho, abas, chips e
   grade: sobravam ~100px para o conteúdo, com a fileira de armas cortada ao meio. Aqui
   nada empilha — o que muda é o painel da direita.

   As medidas são `clamp(min, N × --u, max)` pela lição de sempre: breakpoint de altura não
   pega o aparelho cuja viewport CSS cai fora da faixa, e `vw` sem teto vira meia tela num
   celular deitado. */
body.mobile #dlg-loadout .ld-tabs,
body.mobile #dlg-loadout .ld-app { display: none; }
/* o cabeçalho da tela também sai: a `.ldm-top` já tem o voltar, o título e as pílulas —
   dois cabeçalhos empilhados custariam 33px do que é a única coisa escassa aqui */
body.mobile #dlg-loadout > header.top { display: none; }
body.mobile .ldm { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* topo: voltar, nome do loadout, as quatro pílulas */
body.mobile .ldm-top { flex: none; display: flex; align-items: center; gap: 7px;
  padding: clamp(4px, calc(var(--u) * 1.6), 9px) calc(10px + var(--sal))
           clamp(4px, calc(var(--u) * 1.6), 9px) calc(10px + var(--sar));
  border-bottom: 1px solid var(--border); background: rgba(9, 13, 10, .9); }
body.mobile .ldm-ib { width: clamp(32px, calc(var(--u) * 11), 42px);
  height: clamp(32px, calc(var(--u) * 11), 42px); flex: none; display: grid;
  place-items: center; border: 1px solid var(--border); background: var(--surface-1);
  color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
body.mobile .ldm-ttl { flex: none; min-width: 0; max-width: clamp(96px, 16vw, 190px); }
body.mobile .ldm-ttl .k { display: block; font-family: var(--font-display); font-size: 7.5px;
  letter-spacing: 2.2px; text-transform: uppercase; color: var(--neon-500); }
body.mobile .ldm-ttl input { width: 100%; background: none; border: none; padding: 0;
  font-family: var(--font-display); font-size: clamp(12px, calc(var(--u) * 4), 17px);
  font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text); }
body.mobile .ldm-ttl input:focus { outline: none; box-shadow: none; color: var(--neon-500); }
body.mobile .ldm-pills { flex: 1; display: flex; gap: 5px; overflow-x: auto;
  scrollbar-width: none; padding: 1px; touch-action: pan-x; }
body.mobile .ldm-pills::-webkit-scrollbar { display: none; }
body.mobile .ldm-pill { flex: none; display: flex; align-items: center; gap: 6px;
  min-height: clamp(30px, calc(var(--u) * 10), 40px);
  padding: clamp(5px, calc(var(--u) * 2), 9px) clamp(8px, 1.2vw, 12px);
  border: 1px solid var(--border); background: var(--surface-1); color: var(--muted-2);
  font-family: var(--font-display); font-size: clamp(8.5px, calc(var(--u) * 2.6), 11px);
  font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; }
body.mobile .ldm-pill .n { font-family: var(--font-mono);
  font-size: clamp(8px, calc(var(--u) * 2.4), 10px); }
body.mobile .ldm-pill .star { color: var(--warning); }
body.mobile .ldm-pill.on { color: var(--neon-500); border-color: var(--neon-500);
  background: rgba(57, 255, 20, .1); }

/* corpo: as três colunas. A do meio é a que estica. */
body.mobile .ldm-body { flex: 1; display: grid;
  grid-template-columns: clamp(112px, 16vw, 168px) minmax(0, 1fr) clamp(168px, 26vw, 268px);
  gap: 7px; padding: 7px calc(10px + var(--sar)) calc(8px + var(--sab)) calc(10px + var(--sal));
  min-height: 0; }
body.mobile .ldm-col { display: flex; flex-direction: column; gap: 6px; min-height: 0; }

/* slots: cada um ocupa um terço da altura — o alvo de toque é a coluna inteira */
body.mobile .ldm-slot { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 8px; padding: 6px 9px; min-height: 42px; text-align: left;
  color: inherit; border: 1px solid var(--border); background: var(--surface-1);
  cursor: pointer; }
body.mobile .ldm-slot .gl { display: grid; place-items: center; }
body.mobile .ldm-slot .gl img { width: clamp(34px, 4.6vw, 54px); height: auto;
  image-rendering: pixelated; }
body.mobile .ldm-slot .k { display: block; font-family: var(--font-display); font-size: 7.5px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted-2); }
body.mobile .ldm-slot .v { display: block; font-family: var(--font-display);
  font-size: clamp(11px, calc(var(--u) * 3.4), 15px); font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile .ldm-slot .c { display: block; font-family: var(--font-mono);
  font-size: clamp(7.5px, calc(var(--u) * 2.2), 9.5px); color: var(--muted-2); margin-top: 1px; }
body.mobile .ldm-slot.on { border-color: var(--neon-500);
  background: linear-gradient(90deg, rgba(57, 255, 20, .13), var(--surface-1) 72%); }
body.mobile .ldm-slot.on .c { color: var(--neon-500); }

/* herói: a arma do slot e o botão que abre a lista no painel */
body.mobile .ldm-hero { flex: none; position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(8px, 1.2vw, 14px); padding: clamp(5px, calc(var(--u) * 1.8), 11px) 11px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(27, 36, 30, .82), rgba(12, 17, 13, .85)); }
body.mobile .ldm-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--neon-500); opacity: .7; }
body.mobile .ldm-hero .art { width: clamp(74px, 10vw, 136px); display: grid;
  place-items: center; }
body.mobile .ldm-hero .art img { width: 100%; height: auto; image-rendering: pixelated;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .5)); }
body.mobile .ldm-hero .art.gold img { filter: sepia(1) saturate(3.4) hue-rotate(-8deg)
  brightness(1.3) contrast(1.05) drop-shadow(0 4px 12px rgba(212, 160, 23, .45)); }
body.mobile .ldm-hero .cat { font-family: var(--font-display); font-size: 8px;
  letter-spacing: 2.2px; text-transform: uppercase; color: var(--neon-500); }
body.mobile .ldm-hero h2 { font-family: var(--font-display);
  font-size: clamp(14px, calc(var(--u) * 5), 24px); font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; line-height: 1; }
body.mobile .ldm-hero h2.gold { color: var(--warning); }
body.mobile .ldm-hero .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
body.mobile .ldm-hero .chip { font-size: clamp(7px, calc(var(--u) * 2.1), 9px);
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); padding: 2px 6px; }
body.mobile .ldm-hero .chip b { font-family: var(--font-mono); color: var(--text); }
body.mobile .ldm-hero .sw { flex: none; display: flex; align-items: center;
  min-height: clamp(34px, calc(var(--u) * 11), 46px);
  padding: clamp(7px, calc(var(--u) * 2.4), 13px) clamp(9px, 1.4vw, 14px);
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  font-family: var(--font-display); font-size: clamp(9px, calc(var(--u) * 2.6), 11px);
  font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; }

body.mobile .ldm-sec { flex: none; display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 8px; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--muted-2); }
body.mobile .ldm-sec em { margin-left: auto; font-style: normal; font-family: var(--font-mono);
  color: var(--neon-500); letter-spacing: 0; }

/* a GRADE de encaixes: oito cartões que dividem a altura que sobra — sem rolagem */
body.mobile .ldm-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr; gap: 6px; min-height: 0; }
body.mobile .ldm-enc { display: flex; flex-direction: column; justify-content: center;
  gap: 2px; padding: 6px 8px; min-height: 40px; overflow: hidden; text-align: left;
  color: inherit; border: 1px solid var(--border); background: var(--surface-1);
  cursor: pointer; }
body.mobile .ldm-enc .k { font-family: var(--font-display); font-size: 7.5px;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile .ldm-enc .v { font-size: clamp(10px, calc(var(--u) * 3), 13px); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile .ldm-enc .v.none { color: var(--muted-2); font-weight: 400; }
body.mobile .ldm-enc .fx { display: flex; flex-wrap: wrap; gap: 1px 7px; overflow: hidden;
  max-height: 2.4em; }
body.mobile .ldm-enc .fx span { font-family: var(--font-mono);
  font-size: clamp(7px, calc(var(--u) * 2), 9px); }
body.mobile .ldm-enc .fx .p { color: var(--neon-500); }
body.mobile .ldm-enc .fx .m { color: var(--danger); }
body.mobile .ldm-enc.on { border-color: var(--neon-500);
  background: linear-gradient(180deg, rgba(57, 255, 20, .1), var(--surface-1) 70%); }
body.mobile .ldm-enc.full { border-color: rgba(255, 176, 32, .3); }
body.mobile .ldm-nomelee { grid-column: 1 / -1; display: grid; place-items: center;
  border: 1px dashed var(--border-strong); color: var(--muted-2);
  font-family: var(--font-display); font-size: 10px; letter-spacing: 1.8px;
  text-transform: uppercase; text-align: center; padding: 14px; }

/* o painel da direita: atributos, lista de armas ou as opções de um encaixe */
body.mobile .ldm-side { display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(27, 36, 30, .8), rgba(13, 19, 15, .85)); }
body.mobile .ldm-shd { flex: none; display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid var(--border); }
body.mobile .ldm-shd .bk { width: 30px; height: 30px; flex: none; display: none;
  place-items: center; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
body.mobile .ldm-side.ctx .ldm-shd .bk { display: grid; }
body.mobile .ldm-shd .t { min-width: 0; }
body.mobile .ldm-shd .t span { display: block; font-family: var(--font-display);
  font-size: 7.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--muted-2); }
body.mobile .ldm-shd .t b { display: block; font-family: var(--font-display);
  font-size: clamp(11px, calc(var(--u) * 3.2), 14px); letter-spacing: 1px;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile .ldm-cont { flex: 1; overflow-y: auto; min-height: 0; padding: 8px 9px 10px;
  touch-action: pan-y; }

/* atributos dentro do painel (as mesmas barras do desktop, mais estreitas) */
body.mobile .ldm-cont .ld-srow { grid-template-columns: clamp(48px, 6vw, 68px)
  minmax(0, 1fr) 30px; gap: 7px; margin-bottom: 7px; }
body.mobile .ldm-cont .ld-srow .l { font-size: 7.5px; letter-spacing: 1.3px; }
body.mobile .ldm-cont .ld-srow .n { font-size: 9.5px; }

/* lista de armas no painel */
body.mobile .ldm-cats { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 7px;
  scrollbar-width: none; touch-action: pan-x; }
body.mobile .ldm-cats::-webkit-scrollbar { display: none; }
body.mobile .ldm-cat { flex: none; min-height: 34px; padding: 8px 10px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; cursor: pointer; }
body.mobile .ldm-cat.on { color: var(--ink-1000); background: var(--neon-500);
  border-color: var(--neon-500); }
body.mobile .ldm-wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
body.mobile .ldm-wc { position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 3px; min-height: 62px; padding: 8px 5px 6px;
  border: 1px solid var(--border); background: var(--surface-1); color: inherit;
  cursor: pointer; }
body.mobile .ldm-wc .gl { display: grid; place-items: center; }
body.mobile .ldm-wc img { width: 92%; max-width: 96px; height: auto;
  image-rendering: pixelated; }
body.mobile .ldm-wc .nm { font-family: var(--font-display); font-size: 10.5px;
  font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
body.mobile .ldm-wc .sub { font-family: var(--font-mono); font-size: 8.5px;
  color: var(--muted-2); }
body.mobile .ldm-wc.on { border-color: var(--neon-500);
  background: linear-gradient(180deg, rgba(57, 255, 20, .13), var(--surface-1)); }
body.mobile .ldm-wc.lock { opacity: .45; }
body.mobile .ldm-wc .lk { position: absolute; top: 4px; right: 5px; font-family: var(--font-mono);
  font-size: 8px; color: var(--muted-2); }
body.mobile .ldm-wc .eq { position: absolute; top: -1px; left: -1px;
  font-family: var(--font-display); font-size: 7px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; background: var(--neon-500); color: var(--ink-1000);
  padding: 1px 5px; }

/* opções de um encaixe: linha inteira, com a marca do escolhido */
body.mobile .ldm-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 8px 10px;
  text-align: left; color: inherit; border: 1px solid var(--border);
  background: var(--surface-1); cursor: pointer; }
body.mobile .ldm-opt + .ldm-opt { margin-top: 5px; }
body.mobile .ldm-opt .nm { display: block; font-size: clamp(11px, calc(var(--u) * 3.2), 13px);
  font-weight: 600; }
body.mobile .ldm-opt .fx { display: flex; flex-wrap: wrap; gap: 1px 7px; margin-top: 2px; }
body.mobile .ldm-opt .fx span { font-family: var(--font-mono); font-size: 9px; }
body.mobile .ldm-opt .fx .p { color: var(--neon-500); }
body.mobile .ldm-opt .fx .m { color: var(--danger); }
body.mobile .ldm-opt .lk { display: block; font-family: var(--font-mono); font-size: 8.5px;
  color: var(--muted-2); margin-top: 3px; }
body.mobile .ldm-opt .mk { width: 20px; height: 20px; flex: none; display: grid;
  place-items: center; border: 1px solid var(--border-strong); color: transparent;
  font-size: 12px; }
body.mobile .ldm-opt.on { border-color: var(--neon-500);
  background: linear-gradient(90deg, rgba(57, 255, 20, .11), var(--surface-1) 62%); }
body.mobile .ldm-opt.on .mk { background: var(--neon-500); border-color: var(--neon-500);
  color: var(--ink-1000); }
body.mobile .ldm-opt.lock { opacity: .45; }
body.mobile .ldm-opt.none .nm { color: var(--muted-2); }
body.mobile .ldm-warn { display: flex; align-items: center; gap: 7px; margin-bottom: 7px;
  padding: 7px 9px; border: 1px solid rgba(255, 176, 32, .35);
  background: rgba(255, 176, 32, .08); color: var(--warning); font-size: 9px;
  letter-spacing: 1px; text-transform: uppercase; line-height: 1.35; }

/* ---------------------------------------------------------------- desafios
   As três colunas ficam (as missões são duas listas curtas, e a lateral é a sequência —
   que é justamente o que faz voltar amanhã). O que encolhe é tudo o mais: a lateral vira
   uma faixa estreita, o ícone cai para 32px e as notas de apoio saem quando a tela é uma
   faixa. Cada coluna rola por dentro, como no desktop. */
body.mobile .ch-body { grid-template-columns: 1fr 1fr clamp(132px, 22vw, 200px);
  gap: 10px; padding: 6px 12px 12px; touch-action: pan-y; }
body.mobile .ch-h { padding: clamp(5px, calc(var(--u) * 2), 12px) 10px; gap: 8px; }
body.mobile .ch-h .kind { font-size: 10px; letter-spacing: 2px; }
body.mobile .ch-h .timer { font-size: 9px; letter-spacing: 1px; }
body.mobile .ch-h .timer b { font-size: 10.5px; }
body.mobile .ch-stack { padding: 6px; gap: 6px; }
body.mobile .ch-ms { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px;
  padding: 7px 8px; }
body.mobile .ch-ms .ico { width: 32px; height: 32px; }
body.mobile .ch-ms .ico svg { width: 17px; height: 17px; }
body.mobile .ch-ms .t { font-size: 12px; }
body.mobile .ch-ms .bar { margin-top: 6px; gap: 7px; }
body.mobile .ch-ms .cnt { font-size: 10px; min-width: 40px; }
body.mobile .ch-ms .xpchip { font-size: 11.5px; }
body.mobile .ch-ms .tag { font-size: 7.5px; padding: 2px 5px; }
body.mobile .ch-side { gap: 10px; }
body.mobile .ch-sh { padding: clamp(5px, calc(var(--u) * 2), 12px) 12px; font-size: 9px;
  letter-spacing: 2px; }
body.mobile .ch-streak { padding: 9px 10px; }
body.mobile .ch-streak .days { gap: 3px; }
body.mobile .ch-streak .sq { height: clamp(18px, calc(var(--u) * 7), 28px); }
body.mobile .ch-streak .dl { font-size: 7.5px; letter-spacing: 0; }
body.mobile .ch-stats { padding: 2px 12px 8px; }
body.mobile .ch-stats .srow { padding: 6px 0; }
body.mobile .ch-stats .l { font-size: 9.5px; letter-spacing: 1px; }
body.mobile .ch-stats .v { font-size: 12px; }
body.mobile .ch-f { padding: 7px 10px; font-size: 9px; letter-spacing: 1.2px; }
/* a pílula da sequência no topo compete com o título; a lateral já a mostra inteira */
@media (max-width: 900px) { body.mobile .ch-pill .lb { display: none; } }
@media (max-height: 400px) {
  body.mobile .ch-streak .note { display: none; }
  body.mobile .ch-f { display: none; }
}

/* ---------------------------------------------------------------- ranking
   A lateral "Sua posição" SAI: em 280px de altura ela roubaria a largura da tabela, e a
   informação dela que decide algo — a minha linha — já está na barra fixa do rodapé, que
   aparece justamente quando não estou entre os visíveis. */
body.mobile .rk-body { grid-template-columns: 1fr; gap: 10px; padding: 6px 12px 12px;
  touch-action: pan-y; }
body.mobile .rk-side { display: none; }
body.mobile .rk-podium { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
body.mobile .rk-pod { padding: 9px 10px; gap: 7px; }
body.mobile .rk-pod .nm { font-size: 12.5px; }
body.mobile .rk-pod .xp { font-size: 15px; }
body.mobile .rk-pod .kpis b { font-size: 11px; }
body.mobile .rk-av { width: clamp(24px, calc(var(--u) * 10), 34px);
  height: clamp(24px, calc(var(--u) * 10), 34px); }
body.mobile .rk-av b { font-size: clamp(11px, calc(var(--u) * 4.2), 14px); }
body.mobile .rk-av.big { width: clamp(28px, calc(var(--u) * 12), 46px);
  height: clamp(28px, calc(var(--u) * 12), 46px); }
body.mobile .rk-tools { padding: clamp(5px, calc(var(--u) * 2), 10px) 10px; gap: 8px; }
body.mobile .rk-fb { padding: 7px 10px; letter-spacing: 1.2px; }
body.mobile .rk-head { padding: 7px 14px 7px 10px; }
body.mobile .rk-row { padding: 5px 6px; }
body.mobile .rk-row .nm { font-size: 12px; }
body.mobile .rk-row .n { font-size: 11.5px; }
body.mobile .rk-rows { padding: 2px 4px 6px; }
/* o pódio é o primeiro a sair quando a tela é uma faixa: ele é destaque, e a TABELA é a
   informação — com 280px de altura os três cartões não deixariam ver nem duas linhas */
@media (max-height: 400px) { body.mobile .rk-podium { display: none !important; } }
/* e as duas colunas menos decisivas saem na tela estreita: XP é o ranking, abates e K/D
   são o que se compara. Partidas e vitórias voltam no tablet. */
@media (max-width: 760px) {
  body.mobile .rk-head, body.mobile .rk-row {
    grid-template-columns: 38px minmax(0, 1fr) 66px 58px 82px; }
  body.mobile .rk-head [data-sort="matches"], body.mobile .rk-row .c-matches,
  body.mobile .rk-head [data-sort="wins"], body.mobile .rk-row .c-wins { display: none; }
}
/* a trilha de progressão já rola na horizontal; o que sobra é a altura do cartão */
body.mobile .rail { touch-action: pan-x; }
body.mobile .herotext { font-size: 12px; }

/* o card de pausa e o modal in-game */
body.mobile .dialog.pause { width: min(320px, 92vw); max-height: calc(var(--u) * 96); overflow-y: auto;
  padding: clamp(8px, calc(var(--u) * 2.6), 26px) 16px clamp(6px, calc(var(--u) * 2), 20px); }
body.mobile .pause .pitem { padding: clamp(6px, calc(var(--u) * 1.8), 13px) 12px; }
body.mobile .dialog.modal .mbody { max-height: calc(var(--u) * 78); }

/* votação de fim de partida: duas colunas em vez de quatro */
body.mobile .vote .vgrid { grid-template-columns: repeat(2, 1fr); }

/* ---------------------------------------------------------------- amigos e party
   A tela é a mesma do desktop em duas colunas, só que a altura útil é a de sempre: num
   iPhone deitado no Safari são ~280px, e três slots de party de 54px já comeriam metade.
   Tudo aqui é `clamp(min, Nu, max)` com o MÁXIMO igual ao valor do desktop — nada encolhe
   o que já cabia. */
body.mobile .fr-body { grid-template-columns: clamp(140px, 30vw, 260px) 1fr; }
/* a faixa do topo já é disputada; a frase do líder está escrita no card da party */
body.mobile #dlg-friends .lb { display: none; }
body.mobile .fr-self { padding: 3px 8px 3px 5px; gap: 7px; }
body.mobile .fr-self .sn { font-size: 11px; }
body.mobile .fr-self .ss { font-size: 9px; letter-spacing: 1px; }
body.mobile .fr-card { padding: clamp(7px, calc(var(--u) * 2.6), 16px) 12px; }
body.mobile .fr-ch { font-size: 10px; margin-bottom: clamp(4px, calc(var(--u) * 1.8), 12px); }
body.mobile .fr-slots { gap: 4px; }
body.mobile .fr-slot { min-height: clamp(34px, calc(var(--u) * 13), 54px);
  padding: 5px 8px; gap: 8px; }
body.mobile .fr-slot .sn { font-size: 12px; }
body.mobile .fr-slot .ss { font-size: 10px; }
body.mobile .fav { width: clamp(24px, calc(var(--u) * 10), 36px);
  height: clamp(24px, calc(var(--u) * 10), 36px); }
body.mobile .fav b { font-size: clamp(11px, calc(var(--u) * 4.4), 15px); }
body.mobile .fav.sm { width: clamp(22px, calc(var(--u) * 8.5), 28px);
  height: clamp(22px, calc(var(--u) * 8.5), 28px); }
body.mobile .fr-pact { gap: 6px; margin-top: clamp(6px, calc(var(--u) * 2.2), 12px); }
body.mobile .fr-note { font-size: 11px; }
body.mobile .fr-tab { padding: clamp(6px, calc(var(--u) * 2.4), 13px) 12px;
  font-size: 11px; letter-spacing: 1.2px; gap: 7px; }
body.mobile .fr-tools { padding: clamp(6px, calc(var(--u) * 2), 11px) 12px; }
body.mobile .fr-list { padding: 2px 8px 10px; }
body.mobile .fr-gh { padding: clamp(7px, calc(var(--u) * 2.6), 14px) 6px 4px; }
body.mobile .frow { padding: 6px 4px; gap: 10px; }
body.mobile .frow .fn { font-size: 12.5px; }
/* No toque não existe hover, então as ações que o desktop revela ao passar o mouse aqui
   NUNCA apareceriam: quem tem dedo vê os botões o tempo todo. */
body.mobile .frow .facts { opacity: 1; }
body.mobile .fr-pop { max-height: calc(var(--u) * 70); }
/* Do SEGUNDO slot vazio em diante, some. Dois "+ Convidar" idênticos empilhados custam
   ~90px de uma coluna que tem 300 e não dizem nada que o primeiro já não diga — quantos
   lugares existem está no contador do cabeçalho (que por isso aparece sempre). */
body.mobile .fr-slot.empty ~ .fr-slot.empty { display: none; }
/* Os dois textos de apoio saem quando a tela vira uma faixa, nesta ordem: primeiro a
   ajuda do "adicionar amigo", depois a nota da party. O que eles explicam continua
   visível em forma — o slot vazio já diz que há lugar, e o botão diz o que ele faz. */
@media (max-height: 480px) { body.mobile .fr-hint { display: none; } }
@media (max-height: 430px) { body.mobile .fr-note { display: none; } }

/* alvo de toque: nada abaixo de 34px de altura em botão de tela. Um botão de 22px é um
   erro de meio dedo, e quem erra só descobre porque nada aconteceu. */
body.mobile .btn, body.mobile .seg, body.mobile .tab,
body.mobile .fr-tab, body.mobile .act.sm { min-height: 34px; }
body.mobile input[type="text"], body.mobile input[type="password"],
body.mobile select { font-size: 16px; min-height: 36px; }