/* V493 — Celular. O aviso de girar o aparelho fica acima de qualquer janela
   (antes a Loja, o Siege e a BAG abriam por cima dele). Em aparelho que aceita
   tela cheia, o aviso tambem diz que um toque ja deita o jogo em tela cheia. */
#mobileRotateGateV249{z-index:2147483600}
.mobileRotateCardV249 .mobileRotateTapV493{display:none;margin-top:12px;color:#e2c46c;font:800 11px var(--font-ui,sans-serif);letter-spacing:.12em}
.canFullscreenV493 .mobileRotateCardV249 .mobileRotateTapV493{display:block}
#mobileMenuPanelV283>#mobileFullscreenV493{display:none}
.canFullscreenV493 #mobileMenuPanelV283>#mobileFullscreenV493{display:grid}
#mobileMenuPanelV283>#mobileInstallV493{display:none}
.canInstallV493 #mobileMenuPanelV283>#mobileInstallV493{display:grid}

/* V497 — ajustes do celular deitado, relato do dono no Android. */
@media (pointer:coarse) and (orientation:landscape) and (max-height:520px){
  /* Market: o detalhe do item passava da tela e o BUY ficava escondido.
     Agora a caixa inteira aparece e o fundo rola ate o botao. */
  /* V502: sem rolagem — a caixa tem exatamente a altura da tela: arte a
     esquerda, dados e o BUY a direita, texto 28% menor so no detalhe. */
  #marketplaceOverlayV210 .marketDetailV210{--tharkira-text-scale:.72;overflow:hidden!important;place-items:center!important;padding:6px!important}
  #marketplaceOverlayV210 .mkDetailV479{width:calc(100vw - 12px)!important;height:calc(100dvh - 12px)!important;max-height:none!important;grid-template-columns:minmax(170px,32%) minmax(0,1fr)!important;overflow:hidden!important}
  #marketplaceOverlayV210 .mkDetailArtV479{padding:8px!important;gap:6px!important;min-height:0}
  #marketplaceOverlayV210 .mkStageV479{min-height:0!important;padding:6% 8%!important}
  #marketplaceOverlayV210 .mkFactsV479>div{padding:4px 6px!important}
  #marketplaceOverlayV210 .mkHashV479,#marketplaceOverlayV210 .mkBlurbV479{display:none!important}
  #marketplaceOverlayV210 .mkDetailInfoV479{min-height:0}
  #marketplaceOverlayV210 .mkDetailScrollV479{overflow:hidden!important;padding:8px 10px 6px!important;gap:6px!important}
  #marketplaceOverlayV210 .mkStripV479>div{padding:4px 6px!important}
  #marketplaceOverlayV210 .mkFooterV479{padding:6px 10px!important}
  /* PvP: o cabecalho ficava parado e sobrava pouco espaco. A janela inteira
     rola, cabecalho junto. (A luta do PvP e outra janela e nao muda.) */
  #pvpOverlayV296 .pvpPanelV296{overflow-y:auto!important;grid-template-rows:auto auto auto auto!important;overscroll-behavior:contain}
  #pvpOverlayV296 .pvpBodyV296{overflow:visible!important;min-height:0}
  /* MAP: 10 pontos num mapa pequeno se amontoavam. Mapa mais largo, pontos
     menores e o rotulo "STAGE n" so no ponto escolhido (o numero fica no ponto). */
  #portalOverlay .portalContentGridV229{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)!important}
  /* V502: MAP em tela inteira, sem zoom (o zoom deixava metade da janela vazia
     e cortava a coluna de informacao). Mapa e informacao com a altura toda. */
  #portalOverlay{--tharkira-text-scale:.8}
  #portalOverlay .portalWindow{display:flex!important;flex-direction:column!important;height:calc(100dvh - 8px)!important;overflow:hidden!important}
  #portalOverlay .portalContentGridV229{flex:1 1 auto;min-height:0;align-items:stretch}
  #portalOverlay .portalMapColumnV229{min-height:0;height:100%;max-width:none}
  #portalOverlay .portalMapWrap{height:100%!important}
  #portalOverlay .portalInfoColumnV229{height:100%!important}
  #portalOverlay .portalStageNode{width:28px!important;height:28px!important;border-width:3px!important}
  #portalOverlay .portalStageNode.boss{width:34px!important;height:34px!important}
  #portalOverlay .portalStageNode span{display:none!important}
  #portalOverlay .portalStageNode.selected span{display:block!important}
  /* HEROES (Mao Tatica): layout proprio, sem zoom. A caixa ocupa a tela, o
     texto da janela fica 22% menor (a camada V431 usa --tharkira-text-scale),
     cabecalho e rodape baixos e as cartas ficam com o resto da altura. */
  #gameModal.tacticalHandMode{--tharkira-text-scale:.78}
  #gameModal.tacticalHandMode .gameModalCard{width:calc(100vw - 12px)!important;height:calc(100dvh - 10px)!important;padding:5px!important}
  #gameModal.tacticalHandMode #closeGameModal{top:8px;right:8px;width:32px;height:30px}
  #gameModal.tacticalHandMode .tacticalHandShell{grid-template-rows:36px minmax(0,.9fr) 16px minmax(0,1.1fr) 38px;grid-template-columns:minmax(0,1fr);gap:4px;padding:5px;min-width:0}
  #gameModal.tacticalHandMode .tacticalHeader{padding:2px 46px 2px 10px;min-width:0}
  #gameModal.tacticalHandMode .tacticalPausedBadge{padding:4px 8px;white-space:nowrap}
  #gameModal.tacticalHandMode .tacticalZone{padding:0 6px}
  #gameModal.tacticalHandMode .tacticalZoneTitle{height:16px}
  #gameModal.tacticalHandMode .tacticalCardGrid{height:calc(100% - 16px);gap:6px}
  #gameModal.tacticalHandMode .reserveHand .tacticalCardGrid{padding:0 4px}
  #gameModal.tacticalHandMode .reserveHand .heroCatalogGrid{grid-template-columns:repeat(5,minmax(150px,1fr))}
  #gameModal.tacticalHandMode .tacticalHeroCard{grid-template-columns:56px 1fr;padding:3px;column-gap:5px}
  #gameModal.tacticalHandMode .tacticalPortrait{margin-top:20px}
  #gameModal.tacticalHandMode .tacticalIdentity{padding-top:20px}
  #gameModal.tacticalHandMode .tacticalVitals{gap:2px;margin-top:3px}
  #gameModal.tacticalHandMode .tacticalVital{height:12px}
  #gameModal.tacticalHandMode .tacticalCooldowns,#gameModal.tacticalHandMode .tacticalEffects,#gameModal.tacticalHandMode .tacticalFreezeRule{display:none}
  #gameModal.tacticalHandMode .tacticalFooter{grid-template-columns:minmax(0,1fr) 90px 160px;grid-template-rows:34px;padding:2px 6px 0}

  /* V499 — coluna da direita no Stage (tempo + RE-RUN, buffs, ordens do
     treinador): a camada V432 sobe o texto para 14-16 px; no celular as caixas
     viravam paineis gigantes, cobrindo a luta e os botoes ATTACK/AUTO/HAND.
     Aqui: 11 px, caixas estreitas (a pilha e do js/104) e a lista de ordens
     com altura limitada, rolando. */
  html #portalSurvivalTimer{padding:4px 6px!important;gap:6px!important}
  html #portalSurvivalTimer .pstLabel{font-size:11px!important;letter-spacing:.04em!important}
  html #portalSurvivalTimer .pstStage{font-size:11px!important;margin-top:0!important}
  html #portalSurvivalTimer .pstClock{font-size:15px!important;margin-top:1px!important}
  html #portalSurvivalTimer #stageRerunToggle{min-width:56px!important;max-width:62px;padding:3px 4px!important}
  html #portalSurvivalTimer #stageRerunToggle b{font-size:11px!important}
  html #portalSurvivalTimer #stageRerunToggle small{display:none!important}
  html #starterGraceHudV232{padding:4px 7px!important;font-size:11px!important}
  html #starterGraceHudV232 strong{font-size:11px!important;margin-bottom:2px!important}
  html #starterGraceHudV232 span,html #starterGraceHudV232 em{font-size:11px!important;padding:2px 0!important}
  html .trainerQuestTrackerToggleV292{flex-basis:24px!important;width:24px!important;height:34px!important;margin-top:6px!important;font-size:13px!important}
  html .trainerQuestTrackerV292.collapsed{width:24px!important}
  html .trainerQuestTrackerPanelV292 header{padding:4px 7px!important}
  html .trainerQuestTrackerPanelV292 header small{font-size:11px!important}
  html .trainerQuestTrackerPanelV292 header strong{font-size:11px!important}
  html .trainerQuestTrackerGoalsV292{gap:3px!important;padding:4px!important;max-height:96px;overflow-y:auto}
  html .trainerQuestTrackerRowV292{padding:3px 5px!important}
  html .trainerQuestTrackerRowV292>div,html .trainerQuestTrackerRowV292 b{font-size:11px!important}
  html .trainerQuestTrackerRewardV292{padding:3px 5px!important;font-size:11px!important}
  /* No Stage as setas de andar ficam no canto onde moram Discord e chat. */
  html body:not(.tavernHub) #socialChatDockV198{display:none!important}
  /* Siege: a barra de onda/estatua/tempo ocupava 500 px no alto e cobria a
     coluna das ordens. Compacta e centrada entre a party e a coluna. */
  html #gauntletHud{left:50%!important;right:auto!important;top:46px!important;transform:translateX(-50%);padding:3px!important;gap:3px!important;border-width:2px!important;overflow:visible!important;max-width:calc(100vw - 400px)}
  html #gauntletHud>div,html #gauntletHud>button{min-width:50px!important;padding:3px 5px!important}
  html #gauntletHud .gauntletStatueHud{min-width:84px!important}
  html #gauntletHud small,html #gauntletHud b{font-size:11px!important;margin-top:1px!important}
  html #gauntletRerunToggle{min-width:64px!important}
  html #gauntletRerunToggle small{display:none!important}
  /* V500 — conversa com NPC: no computador a caixa fica no pe da tela, 92 px
     acima (livre a barra de acoes). No celular o palco tem ~300 px: a mesma
     margem e a caixa de 174 px a jogavam para o meio, cobrindo a cena, o
     proprio NPC e o painel da party. Aqui ela desce ate logo acima da barra
     de acoes e fica baixa (retrato, texto e botoes compactos). */
  html #npcDialogOverlay{padding:0 10px 56px!important}
  html .npcDialogBox{width:min(700px,90vw)!important;grid-template-columns:84px minmax(0,1fr)!important;gap:10px!important;padding:8px 10px!important;max-height:calc(100% - 60px);overflow-y:auto}
  html .npcDialogPortrait{height:84px!important;clip-path:inset(-40px 0 0 0)!important}
  html .npcDialogPortrait img{width:120px!important;bottom:-18px!important}
  html #npcDialogOverlay[data-npc="trainer"] .npcDialogPortrait img{width:124px!important;bottom:-20px!important}
  html #npcDialogOverlay[data-npc="innkeeper"] .npcDialogPortrait img{width:118px!important;bottom:-18px!important}
  html #npcDialogOverlay[data-npc="alchemist"] .npcDialogPortrait img{width:122px!important;bottom:-19px!important}
  html #npcDialogOverlay[data-npc="fire"] .npcDialogPortrait{clip-path:inset(-50px 0 0 0)!important}
  html #npcDialogOverlay[data-npc="fire"] .npcDialogPortrait img{width:140px!important;bottom:-30px!important}
  html #npcDialogOverlay[data-npc="wellspring"] .npcDialogPortrait{clip-path:inset(-70px 0 0 0)!important}
  html #npcDialogOverlay[data-npc="wellspring"] .npcDialogPortrait img{width:100px!important;bottom:-20px!important}
  html .npcDialogName{font-size:13px!important;margin-bottom:3px!important}
  html .npcDialogText{min-height:0!important;font-size:12px!important;line-height:1.4!important;padding:5px 0!important;margin-bottom:6px!important}
  html .npcDialogActions{gap:6px!important}
  html .npcDialogBtn{min-width:88px!important;height:30px!important;font-size:11px!important}
  /* V502: sem a barra de baixo no celular (pedido do dono: mais tela). Todos
     os botoes dela estao no MENU do alto. A barra de skills desce ao pe. */
  html .bottom{display:none!important}
  html #app{grid-template-rows:42px minmax(0,1fr) 0!important}
  html #sixSkillBar{bottom:calc(4px + var(--mobile-safe-bottom))!important}
  html #mobileMenuPanelV283{max-height:calc(100dvh - 8px);overflow-y:auto;overscroll-behavior:contain}
  /* Buffs e ordens ~25% menores que na V499 (coluna de 166 px, js/104). */
  html #portalSurvivalTimer{min-width:0!important}
  html #portalSurvivalTimer .portalSurvivalInfo{min-width:0!important}
  html #portalSurvivalTimer .pstLabel{white-space:nowrap;letter-spacing:0!important}
  html #portalSurvivalTimer .pstStage{display:none!important}
  /* Objetivo do tutorial: faixa no alto, mais estreita, sem cobrir a cena. */
  #tavernTutorialObjective{top:17%;width:min(420px,60vw);padding:5px 12px}
}

/* V501 — celular deitado baixo (ate 380 px: Android com a barra do navegador
   fica entre 300 e 360). A moldura do jogo (barra de cima 42 px, menu 44 px,
   painel da party de 127 px, botoes e chat) comia um terco da tela e deixava
   ~244 px para o jogo. Aqui ela fica mais baixa e mais enxuta. */
@media (pointer:coarse) and (orientation:landscape) and (max-height:380px){
  html #app{grid-template-rows:34px minmax(0,1fr) 0!important}
  html .top{padding:2px calc(6px + var(--mobile-safe-right)) 2px calc(6px + var(--mobile-safe-left))!important}
  html .topBrandBlock{height:28px!important;width:100px!important}
  html .topBrandBlock .brand{font-size:12px!important}
  html .resourceDock .currency{height:28px!important;min-width:58px!important}
  html .top .currencyPlusV469{width:20px!important;height:20px!important}
  html .top #shopBtnV469{height:28px!important;min-height:0!important}
  html #mobileMenuToggleV283{height:28px!important;min-width:50px!important}
  html .bottom{min-height:36px!important;padding:2px calc(6px + var(--mobile-safe-right)) calc(2px + var(--mobile-safe-bottom)) calc(6px + var(--mobile-safe-left))!important}
  html .bottom .navbtn{height:30px!important;min-height:0!important;min-width:58px!important}
  html .partyStatusSidebar{zoom:.82}
  html #socialChatDockV198{zoom:.8}
  html #sixSkillBar{bottom:calc(3px + var(--mobile-safe-bottom))!important}
  html #mobileMenuPanelV283>button{min-height:44px!important}
  html #sixSkillBar .heroSkill,html #sixSkillBar #autoSkillsBtn,html #potionQuickbarV234 button{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;flex-basis:34px!important}
  html #mobileTouchControlsV249 button{min-width:42px!important;min-height:36px!important;padding:4px 7px!important}
  html .trainerQuestTrackerGoalsV292{max-height:62px}
  html #npcDialogOverlay{padding-bottom:46px!important}
  html .npcDialogPortrait{height:72px!important}
  html .npcDialogText{padding:3px 0!important;margin-bottom:4px!important}
  html .npcDialogBtn{height:28px!important}
  /* Mao Tatica: sem o aviso de pausa e com cartas um pouco mais baixas. */
  #gameModal.tacticalHandMode .tacticalPausedBadge{display:none}
  #gameModal.tacticalHandMode .tacticalHandShell{grid-template-rows:30px minmax(0,.85fr) 14px minmax(0,1.15fr) 34px}
  #gameModal.tacticalHandMode .tacticalFooter{grid-template-rows:30px}
}

/* V705: botao INSTALAR APP sempre no celular sem o app; ajuda com o passo a passo. */
.notInstalledV705 #mobileMenuPanelV283>#mobileInstallV493{display:grid}
#installHelpV705{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:16px;background:rgba(3,6,10,.78)}
.installHelpCardV705{display:grid;gap:10px;width:min(420px,100%);padding:18px;border:1px solid #F4C84A;background:#101A22;color:#F4F1E8;font:600 15px/1.45 var(--font-ui,system-ui)}
.installHelpCardV705>b{color:#F4C84A;font:900 17px var(--font-ui,system-ui);letter-spacing:.08em}
.installHelpCardV705 ol{margin:0;padding-left:20px;display:grid;gap:6px}
.installHelpCardV705 button{min-height:44px;border:1px solid #F4C84A;background:linear-gradient(#FFD36B,#FFB21C 55%,#E08A00);color:#2A1600;font:900 14px var(--font-ui,system-ui);letter-spacing:.06em;cursor:pointer}
.installHelpCardV705 .installHelpCloseV705{background:#0b1117;color:#9BA9B5;border-color:#1e2c38}