/* Somente a área /jogar/: não altera o portal nem o aplicativo Electron. */
html { -webkit-text-size-adjust: 100%; }
body.web-game { position:fixed; inset:0; width:100vw; height:100dvh; overflow:hidden; overscroll-behavior:none; }
.web-game #stage { top: calc((var(--web-view-height, 100dvh) - var(--web-bar-space, 42px)) / 2); }
#webGameBar { position: fixed; z-index: 9000; left: 0; right: 0; bottom: 0; height: calc(42px + env(safe-area-inset-bottom)); padding: 3px max(8px,env(safe-area-inset-right)) calc(3px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); display:flex; align-items:center; justify-content:center; gap:12px; background:#090205; border-top:1px solid #725826; font:13px Arial,sans-serif; }
#webGameBar button,#webGameBar a { min-height:36px; border:1px solid #765c2c; border-radius:5px; color:#ffe2a2; background:#20130e; padding:6px 13px; text-decoration:none; font:inherit; cursor:pointer; touch-action:manipulation; }
#webGameBar [hidden] { display:none!important; }
#webGameBar[hidden] { display:none; }
#webMenuToggle { position:fixed; z-index:9001; bottom:calc(8px + var(--web-bar-space,0px) + env(safe-area-inset-bottom)); right:max(8px,env(safe-area-inset-right)); width:44px; height:44px; border:1px solid #a6813c; border-radius:8px; background:#130c08ee; color:#ffe2a2; font:24px Arial,sans-serif; cursor:pointer; touch-action:manipulation; }
#webMenuToggle[hidden] { display:none; }
#webMenuToggle.has-update::after { content:''; position:absolute; top:3px; right:3px; width:9px; height:9px; border-radius:50%; background:#ffd76a; border:1px solid #130c08; }
.web-dialog { z-index:10000; width:min(94vw,620px); max-height:calc(100dvh - 55px); padding:20px; border:1px solid #d4af37; border-radius:12px; background:#100809; color:#f4efe6; overflow:auto; font:17px/1.5 Arial,sans-serif; }
.web-dialog::backdrop { background:#000c; }
.web-dialog h2 { margin:0 0 12px; font-size:21px; color:#ffd76a; }
.web-dialog button,#webPortrait button { min-height:44px; margin-top:14px; padding:8px 22px; border:1px solid #d4af37; border-radius:6px; background:#8a0818; color:white; font:17px Arial,sans-serif; touch-action:manipulation; }
.web-dialog .tip-title { font-size:21px; }.web-dialog .tip-stats { font-size:16px; }.web-dialog section { user-select:text; -webkit-user-select:text; }
#webPortrait { position:fixed; z-index:8900; inset:0 0 var(--web-bar-space,42px); display:grid; place-items:center; background:#090205ef; padding:24px; text-align:center; font:20px/1.5 Arial,sans-serif; }
#webPortrait[hidden] { display:none; }#webPortrait b { font-size:70px; color:#ffd76a; }
.web-touch button,.web-touch a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.web-touch .title-auth:not(.welcome) { top:50%; left:50%; transform-origin:0 0; transform:scale(var(--web-inverse-scale,1)) translate(-50%,-50%); width:min(440px,92vw); max-height:calc(var(--web-view-height,100dvh) - var(--web-bar-space,42px) - 20px); overflow:auto; overscroll-behavior:contain; }
.web-touch .au-panel,.web-touch .au-panel.wide { width:100%; padding:14px 20px; box-sizing:border-box; }
.web-touch .au-panel h3 { font-size:18px; }.web-touch .au-panel label { font-size:12px; }
.web-touch .au-panel label input:not([type=checkbox]) { height:44px; font-size:16px; }
.web-touch .au-panel .au-main,.web-touch .au-panel .au-steam { min-height:44px; font-size:18px; }
.web-touch .au-link { min-height:44px; font-size:14px; }
.web-touch .au-check,.web-touch .au-tip { font-size:14px; }.web-touch .au-check input { width:22px;height:22px; }
.web-touch .hud-sq { min-width:58px; min-height:58px; }
/* Bounded mobile surfaces prevent full-world filters/layers exhausting GPU memory. */
/* (v4.0.6) os cortes de efeito abaixo valem só no "Gráficos: Leve" (web-lite); o celular normal tem todos os efeitos. */
.web-map-surface { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.web-map-ready .world-img,.web-map-ready .map-route { display:none; }
.web-map-ready .world-layer { will-change:auto; z-index:1; pointer-events:none; }
.web-map-ready .world-layer .map-mk { pointer-events:auto; }
.web-map-ready .map-tools,.web-map-ready .map-mini { z-index:3; }
.web-map-ready .map-fx { z-index:2; }
.web-lite #stage * { backdrop-filter:none; -webkit-backdrop-filter:none; }
.web-lite .mk-bracket.green,.web-lite .map-mk.next::before,.web-lite .map-mk.next::after { animation:none; }
.web-lite.web-modal-open .map-fx { visibility:hidden; }
.web-lite .side-btn::before,.web-lite .side-btn::after,.web-lite .side-btn .nav-ico,
.web-lite .ol-spot,.web-lite .ol-motes i,.web-lite .ol-mech,
.web-lite .ol-pad::before,.web-lite .ol-pad i::before,.web-lite .ol-go-wrap::before { animation:none; }
.web-lite .ol-spot,.web-lite .ol-go-wrap::before { filter:none; }
.web-lite .hud.active::after,.web-lite .hud::before,.web-lite .hud-hp-fill::after,
.web-lite .hud::after,.web-lite .hud .hud-scan,.web-lite .rail i { animation:none; }
/* Keep the illustrated frames; stop continuous gradient/shadow repaints on phones. */
.web-lite .panel,.web-lite .panel-title,.web-lite .panel::before,.web-lite .dialog::after,
.web-lite .side-btn.active,.web-lite .side-btn.green,.web-lite .sidebar::after,
.web-lite .topbar::after,.web-lite .tb-xp-fill::after,.web-lite .sm-btn::after,
.web-lite .map-mk.boss:not(.done) .mk-emblem.boss,.web-lite .mk-mech,
.web-lite .map-missions-toggle.has-ready,.web-lite .side-btn .act-badge,
.web-lite .hud-hp-sheen::before,.web-lite .ol-go,.web-lite .ol-go::after,
.web-lite .ol-top::after,.web-lite .ol-banner::before,.web-lite .on-dot,
.web-lite .ol-mode::before,.web-lite .ol-mode svg,.web-lite .ol-season .nx-rank,
.web-lite .hub-live { animation:none; }
@media(max-width:600px) { #webGameBar { gap:6px; font-size:12px; }#webGameBar button,#webGameBar a { padding:6px 9px; } }

/* Lite: avisos continuam coloridos e legíveis, sem filtros oscilando sobre o canvas. */
.web-lite .hud.low .hud-avatar,.web-lite .hud.low .hud-hp-fill,
.web-lite .hud-meter.low .mbar,.web-lite .hud-meter.hot .mbar,.web-lite .hud-meter.hot .mi,
.web-lite .m-hea.over .mfill,.web-lite .heat-banner.over { animation:none; }
/* (v4.0.20, celulares simples) hangar parado no Leve: sem os brilhos que pulsam sem parar com sombra borrada ou mistura
   de cores — cada pulso obrigava a redesenhar a área a cada quadro. A peça escolhida e os avisos continuam marcados (brilho fixo). */
.web-lite .ws-editor::before,.web-lite .inv-tab.active,.web-lite .slot.selected,.web-lite .item-tile.sel,
.web-lite .upg-slot.glow,.web-lite .ammo-chip.low,.web-lite .ammo-stat.warn { animation:none; }

/* Buffer menor, mesmas proporções e posições dos painéis/controles. */
.web-touch #phaserArena canvas { width:var(--arena-w,1200px) !important; height:600px !important; }
/* (v4.0.4) app Android: nada de selecionar texto, menu de copiar ou destaque azul ao tocar (é um jogo, não uma página) */
.in-app,.in-app *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.in-app input,.in-app textarea{-webkit-user-select:text;user-select:text}
/* (v4.0.7) imagens protegidas no jogo do navegador: sem o menu "salvar imagem" ao segurar no celular e sem selecionar */
.web-game img,.web-game canvas{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
.web-game img:not([draggable="true"]){-webkit-user-drag:none;}
/* ================= (v4.0.7) Celular: luta no estilo do Super Mechs do celular =================
   Só no celular (.web-touch). O app de PC não carrega este arquivo; no navegador do PC nada disto se aplica. */
/* barra de ações: sem o quadro de dica do mouse (segurar o dedo abre a ficha), sem as letras dos atalhos de teclado,
   e a barra usa a largura toda (as armas ficam direto nela: js/battle.js) */
.web-touch #screen-battle .action-tip{display:none}
.web-touch #screen-battle .action-row{right:10px;justify-content:center}
.web-touch #screen-battle .act .hotkey{display:none}
/* painel de vida, relógio e losangos maiores: crescem até onde a largura da tela deixa (--touch-k, calculado no pwa.js) */
.web-touch #screen-battle .hud{transform:scale(var(--touch-k,1))}
.web-touch #screen-battle .hud-player{transform-origin:0 0}
.web-touch #screen-battle .hud-enemy{transform-origin:100% 0}
.web-touch #screen-battle .hud.hit{animation-name:hudHitTouch}
@keyframes hudHitTouch{20%{transform:translateX(-5px) scale(var(--touch-k,1))}45%{transform:translateX(4px) scale(var(--touch-k,1))}70%{transform:translateX(-2px) scale(var(--touch-k,1))}}
.web-touch #screen-battle .hud-center{left:50%;transform:translateX(-50%) scale(var(--touch-k,1));transform-origin:50% 0}
.web-touch #screen-battle .turn-dots{top:calc(var(--battle-hud-height) * var(--touch-k,1));transform:scale(var(--touch-k,1))}
.web-touch #screen-battle .turn-dots.left{transform-origin:0 0}
.web-touch #screen-battle .turn-dots.right{transform-origin:100% 0}
.web-touch #screen-battle .act-round-badge{top:calc(104px * var(--touch-k,1))}
/* letras que ficavam com 5–6 px no celular */
.web-touch #screen-battle .res-chip em{font-size:11px}
.web-touch #screen-battle .res-chip .rdrop{font-size:11px;line-height:13px}
.web-touch #screen-battle .mbar .mtag{font-size:12px}
.web-touch #screen-battle .mchip{font-size:14px}
.web-touch #screen-battle .lcd-label{font-size:13px}
.web-touch #screen-battle .act .uses{font-size:20px}
/* botões do centro (engrenagem, lupa, desistir, velocidade) um pouco mais altos para o dedo */
.web-touch #screen-battle .hud-sq,.web-touch #screen-battle .hud-power,.web-touch #screen-battle .hud-speed{height:46px}
/* ================= (v4.0.7) Celular: hangar usa a largura toda (o palco do celular deitado passa de 1200) ========== */
.web-touch #sec-workshop .ws-inventory{width:auto;right:96px}
.web-touch #sec-workshop .inv-tabs{left:auto;right:0}
.web-touch #sec-workshop .inv-grid{grid-template-columns:repeat(auto-fill,80px)}
/* ================= (v4.0.7) Celular, Fase 3: barra de cima e menu lateral =================
   No celular deitado o palco fica com ~57% do tamanho: as letras do menu (11px) viravam 6px. */
.web-touch .side-btn .nav-lbl{font-size:15px;line-height:17px;letter-spacing:0;max-width:98px}
.web-touch .side-btn .nav-ico{width:52px;height:52px}
.web-touch .topbar .tb-plus{width:46px;height:46px;position:relative}
.web-touch .topbar .tb-plus::after{content:'';position:absolute;inset:-6px -3px}
.web-touch .topbar .tb-level-label{font-size:18px}
.web-touch .topbar .tb-xp span{font-size:19px}
.web-touch .topbar .tb-exit{font-size:19px}
/* dica de "passar o mouse" escondida no celular: no toque ela ficava parada e cobria botões (ex.: COMPRAR da loja).
   A ficha abre segurando o dedo (pwa.js lê a mesma dica e mostra num quadro). */
.web-touch #itemTip{display:none!important}
/* ================= (v4.0.7) Celular, Fase 4: hangar, loja, evoluir e caixas ================= */
/* no celular deitado o palco passa de 1200: a loja e o evoluir usam a largura toda (como o hangar) */
.web-touch #sec-shop .shop-grid{width:auto;right:374px;grid-template-columns:repeat(auto-fill,80px)}
.web-touch #sec-shop .shop-detail{left:calc(100% - 366px)}   /* .panel deixa a ficha em position:relative: o deslocamento é a partir da esquerda */
.web-touch #sec-upgrade .upg-inv{width:auto;right:0}
.web-touch #sec-upgrade .upg-grid{grid-template-columns:repeat(auto-fill,80px)}
.web-touch .upg-filters .inv-chip.free{font-size:13px}
.web-touch .side-btn.back .nav-ico{width:42px;height:42px}
/* letras que ficavam com 6–7 px */
.web-touch #sec-shop .shop-cat{font-size:16px;line-height:1.1}
.web-touch .shop-detail .sd-sub,.web-touch .shop-detail .sd-note{font-size:15px}
.web-touch .shop-detail .sd-stats{font-size:16px}
.web-touch .item-tile .lvl-badge{font-size:16px}
.web-touch .item-tile .lock-btn{font-size:16px}
.web-touch .eq-badge{font-size:13px}
.web-touch .inv-chip{font-size:14px;height:32px}
.web-touch .inv-chip.dot{width:34px}
.web-touch .upg-head em{font-size:14px}
.web-touch .ws-mechname{font-size:17px}
.web-touch #sec-boxes .box-odds{font-size:15px}
.web-touch #sec-boxes .box-owned{font-size:16px}
/* ================= (v4.0.7) Celular, Fase 5: atividades, arena online, comunidade, ranking, fase e ajustes =================
   As letras de 11–13px (6–7px na tela do celular deitado) sobem ~3px onde cabe. Só no celular. */
/* mapa: número das fases */
.web-touch .mk-num{font-size:21px}
.web-touch .mk-num.next{font-size:23px}
/* atividades (diário, fantasmas, desafio, raid, torneio, conquistas) */
.web-touch .act-panel .st-tab span{font-size:15px}
.web-touch .act-panel .of-tile b{font-size:14px}
.web-touch .act-task-txt b,.web-touch .act-freebox b,.web-touch .act-gift b{font-size:16px}
.web-touch .act-task-txt small,.web-touch .act-freebox small,.web-touch .act-gift small,.web-touch .act-day small{font-size:14px}
.web-touch .act-bar span{font-size:14px;line-height:18px}
.web-touch .act-body h3 + small,.web-touch .act-body header small{font-size:14px}
.web-touch .act-sub{font-size:15px}
.web-touch .act-sub.sm,.web-touch .act-stats,.web-touch .act-league,.web-touch .act-oppname small{font-size:14px}
.web-touch .act-prize small,.web-touch .act-rw2 small,.web-touch .act-places small,.web-touch .act-nextfight small,.web-touch .act-leagues,.web-touch .act-top li small{font-size:13px}
.web-touch .act-flame small{font-size:12px}
.web-touch .act-top li{font-size:15px}
/* arena online (saguão) */
.web-touch .ol-pill,.web-touch .op-status{font-size:14px}
.web-touch .ol-name small,.web-touch .op-wl,.web-touch .ol-queue,.web-touch .op-note{font-size:14px}
.web-touch .ol-prev h4,.web-touch .ol-rw{font-size:15px}
.web-touch .ol-rw b{font-size:13px;width:auto;min-width:72px;margin-right:4px}
.web-touch .ol-season span{font-size:15px}
.web-touch .rk-chip b,.web-touch .rk-chip i{font-size:15px}
/* telas da arena: ranking, loja da arena, replays, amigos, clãs */
.web-touch .ah-title span,.web-touch .ah-only,.web-touch .ah-myrank,.web-touch .ah-rrow small,.web-touch .ah-who small,.web-touch .ah-inv-who small{font-size:14px}
.web-touch .ah-tabs button{font-size:15px;height:44px}
.web-touch .ah-table table{font-size:15px}
.web-touch .ah-table th{font-size:14px}
.web-touch .ah-clock,.web-touch .ah-busy{font-size:13px}
.web-touch .ah-status{font-size:11px}
.web-touch .as-info small,.web-touch .as-wallet small{font-size:14px}
.web-touch .as-side p{font-size:15px}
.web-touch .cp-intro,.web-touch .cb-empty{font-size:15px}
/* comunidade (saguão andável) e chat */
.web-touch .hub-title span{font-size:13px}
.web-touch .hub-rooms button b{font-size:15px}
.web-touch .hub-rooms button small{font-size:12px}
.web-touch .hub-me b{font-size:15px}
.web-touch .hub-me small{font-size:11px}
.web-touch .hub-btn,.web-touch .hub-act,.web-touch .hub-btn i{font-size:14px}
.web-touch .hub-inv{font-size:13px}
.web-touch .hub-chat .cb-tabs button{font-size:13px;padding:7px 16px}
.web-touch .cb-tabs button{font-size:15px}
.web-touch .cb-send{font-size:14px;height:40px}
.web-touch .hub-mini-head{font-size:13px}
.web-touch .hub-mini-head span{font-size:12px}
.web-touch .hub-card small,.web-touch .hub-card span{font-size:13px}
.web-touch .hub-card em{font-size:12px}
.web-touch .hub-emote-pop button b{font-size:11px}
.web-touch .hub-safety{font-size:13px}
.web-touch .hub-photo-exit{font-size:14px}
/* a dica de teclado (WASD, Enter, 1–8) não serve no celular */
.web-touch .hub-hint{display:none}
/* painel da fase */
.web-touch .lp-region,.web-touch .lp-estat,.web-touch .lp-estimate,.web-touch .lp-note{font-size:15px}
.web-touch .lp-eel,.web-touch .lp-hint{font-size:14px}
/* ajustes e ajuda */
.web-touch .set-dim{font-size:14px}
.web-touch .help-body{font-size:16px}
/* "COMPLETO" não cabia no botão de 56px dos Gráficos (a linha só aparece no celular) */
.web-touch #setGfx button{width:auto;min-width:56px;padding:0 10px}
/* ================= (v4.0.8) Celular: o que ainda estava pequeno ================= */
.web-touch .mk-num{font-size:24px}
.web-touch .mk-num.next{font-size:26px}
.web-touch .eq-badge{font-size:15px}
.web-touch .hub-me small{font-size:13px}
.web-touch .act-chips{font-size:15px}
.web-touch .act-tierrow > small{font-size:14px}
.web-touch .act-tierrow .act-tiles .of-tile b{font-size:13px}
.web-touch .act-flame small{font-size:13px;max-width:110px}
/* ranking: o nome do piloto (abre a ficha) ganha altura para o dedo */
.web-touch .ah-table td{padding-top:9px;padding-bottom:9px}
.web-touch .ah-pilot-link{display:inline-block;padding:6px 0}
/* Ajustes: o texto da linha "Gráficos" alinhado à esquerda como as outras linhas */
.web-touch .setting-row > span{text-align:left}
.web-touch .act-tierrow{grid-template-columns:30px 76px 1fr 22px}
/* (v4.0.13) painéis da luta encostados no do meio: no celular os três crescem (--touch-k), então a conta desconta o aumento */
.web-touch #screen-battle .hud{width:max(470px,calc(50% / var(--touch-k,1) - 114px))}
/* (v4.0.17, pedido do autor: o jogo do celular estava "muito simples") cara de jogo de celular: tela VS na entrada da luta
   (os dois mechs, nomes e nível enquanto a arena carrega), telas do menu que entram deslizando e botões que afundam ao
   tocar. No modo Leve: sem animação (a tela VS aparece parada). O PC não carrega este arquivo.
   (v4.0.22) a tela VS passou para o style.css: agora vale também no PC. */
.web-touch:not(.web-lite) #screen-menu .content.sec-enter{animation:secEnter .26s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes secEnter{from{opacity:0;transform:translateY(14px)}}
.web-touch .sm-btn:active:not(:disabled),.web-touch .side-btn:active{transform:translateY(2px) scale(.96);filter:brightness(1.18)}