/* ============================================================
   ESTILOS DO CLIENTE
   Todo o visual do "cliente estilo Tibia": janela do jogo,
   HUD (vida/mana/xp), barra de magias, painel de equipamento,
   modal de mochila e tela inicial. Nenhuma lógica de jogo aqui.

   ESTILO-ALVO (referência: screenshot do cliente clássico de
   Tibia/OT que o usuário mandou): nada de dourado brilhante,
   sombra suave ou gradiente decorativo — o cliente real é
   utilitário, com painéis em relevo estilo Windows 95/98 (borda
   clara num lado + escura no outro, simulando talhe físico) numa
   paleta neutra caqui/cinza-acastanhado, áreas de texto pretas
   com letra pequena cor de areia, e cantos sempre retos (já era
   assim aqui, mantido). Ver os comentários "RELEVO" abaixo pra
   entender o padrão de borda reusado em quase tudo.

   TEXTURA (--hud-texture): imagem de granito cinza-escuro neutro
   (sem cor própria forte) hospedada no Storage do próprio projeto,
   igual sprites/outfits já fazem — aplicada com
   background-blend-mode:multiply sobre a cor "chrome"/"well" de
   cada elemento. Multiply escurece a cor base seguindo o relevo da
   pedra SEM mudar o matiz, então a textura muda de cor junto com o
   tema customizável (ui/theme.js) sem precisar de nenhuma imagem
   por cor — é só matemática de multiplicação de pixel, o mesmo
   truque usado em qualquer engine pra "tingir" uma textura neutra.
   ============================================================ */
:root{
  --hud-texture: url("https://firebasestorage.googleapis.com/v0/b/twobia-600f6.firebasestorage.app/o/client%2Fhud.webp?alt=media&token=545baab5-1bfd-4645-82d2-3b8f8a5c70c7");

  /* --- paleta "caixa de Windows 98" do cliente real: face cinza
     NEUTRA de verdade (R=G=B — a versão anterior, #8a867c, ainda
     puxava um pouco pra marrom/amarelado), bisel quase branco num
     lado + quase preto no outro — ver lighten()/darken() em
     ui/theme.js, que deriva esses tons por MISTURA com branco/preto
     (não soma fixa), então a borda de destaque fica sempre perto do
     branco não importa a cor de face escolhida, igual o Win95/Tibia
     de verdade. --- */
  --chrome:#848484;
  --chrome-light:#e0e0e0;
  --chrome-dark:#494949;
  --chrome-darker:#373737;
  --well-bg:#0d0d0d;         /* fundo "afundado" (slots vazios, trilhos de barra) */
  --well-bg-black:#141414;   /* log/chat/inputs — recalculado por ui/theme.js junto com o resto.
    Não é preto puro de propósito: a textura (--hud-texture) é aplicada por
    cima com blend-mode multiply, que com uma base perto de #000 vira
    invisível (multiplicar por quase-zero dá quase-zero) — ficava tudo
    "chapado" preto sem textura nenhuma aparecendo (log, chat, campos de
    texto). Esse tom ainda lê como "o mais escuro/afundado da UI", só que
    escuro o bastante pra sobrar contraste real pra textura E pra bordas
    pretas (1px solid #000) não somem mais dentro dele. */

  --parchment:#e8e8e4;       /* texto principal quase branco (era cor de areia) */
  --parchment-dim:#b0b0a8;
  --gold:#c7a542;            /* usado só como ACENTO pontual (selecionado/foco), não decoração */
  --gold-bright:#e8cf7a;
  --hp:#a02020;
  --hp-dark:#4c1010;
  --mp:#2050a0;
  --mp-dark:#102850;
  /* nomes antigos mantidos como ALIAS pras variáveis novas de cima —
     dezenas de modais (character.js, ui/shop.js, ui/loot.js, ui/vip.js,
     ui/party.js, ui/spellbar.js, ui/outfitModal.js, account.js...)
     montam HTML inline no JS usando var(--panel-border) etc.; em vez
     de reescrever cada um, os nomes continuam existindo apontando pro
     novo esquema "chrome", inclusive reagindo ao tema customizável
     (ver ui/theme.js) automaticamente, sem precisar setar os dois lá. */
  --panel-bg:var(--chrome);
  --panel-bg-soft:var(--chrome-dark);
  --panel-border:var(--chrome-darker);
  --panel-border-lo:var(--chrome-darker);
  --fill-mid:var(--chrome);
  --fill-dark:var(--chrome-dark);
  --fill-darker:var(--chrome-darker);
  /* var(--well-bg-black), não mais var(--well-bg) — dezenas de slots/
     campos de texto montados em JS (ver comentário acima) usam isso como
     fundo SEM nenhuma textura em cima (só um flat color, diferente dos
     painéis que somam --hud-texture com blend multiply); --well-bg-black
     já foi calibrado (ver comentário dele acima) pra não ficar preto
     chapado nem nesse uso sem textura. */
  --slot-bg:var(--well-bg-black);
  --slot-bg-filled:var(--chrome-dark);

  /* Verdana pro corpo TODO — já era a fonte usada antes daqui, mantida
     de propósito: é a que mais se aproxima da fonte real do cliente
     de Tibia SEM cair numa fonte pixel art minúscula (Press Start 2P,
     VT323, Pixelify Sans já foram tentadas antes e ficaram difíceis de
     ler — ver decisão registrada). O que muda agora pra chegar mais
     perto do estilo do screenshot é o RELEVO/textura/paleta dos
     painéis, não a fonte. */
  --font-body:'Verdana', 'Geneva', sans-serif;
  --font-heading:'Verdana', 'Geneva', sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;padding:0;width:100%;height:100%;
  background:#000;
  overflow:hidden;
  /* ticket #87: o Safari do iPhone ignora user-scalable=no do viewport — dois toques rápidos (ex.: numa hotkey) davam
     zoom na tela. manipulation desliga o zoom de toque duplo sem atrapalhar toque, arrastar ou rolar. */
  touch-action:manipulation;
  font-family:var(--font-body, 'Verdana', sans-serif);
  color:var(--parchment);
  -webkit-user-select:none;user-select:none;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
#stage{
  position:relative;
  width:100vw;height:100vh;
  height:100dvh;
  display:flex;align-items:center;justify-content:center;
  /* fundo neutro escuro atrás da janela — o cliente real fica sobre a
     área de trabalho, aqui só um cinza bem escuro faz esse papel */
  background:#1a1712;
}

/* ============================================================
   ESTRUTURA DO CLIENTE
   ============================================================ */
#tibiaClient{
  width:min(1440px, 97vw);
  height:min(900px, 95vh);
  display:flex;flex-direction:column;
  background-color:var(--chrome);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  /* RELEVO "raised" (janela em relevo, saltada pra fora): claro em
     cima/esquerda, escuro embaixo/direita — o padrão de bisel do
     Windows clássico que o cliente real usa em toda moldura. */
  border-style:solid;border-width:2px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  border-radius:0;
  box-shadow:0 0 0 1px #000;
  padding:6px;
  gap:6px;
  overflow:hidden;
}
#clientMain{
  flex:1;min-height:0;
  position:relative;
  display:flex;flex-direction:row;gap:6px;
}

/* -------- COLUNA ESQUERDA: tela do jogo + console redimensionável -------- */
#leftCol{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
}
#gameFrame{
  flex:1;min-height:180px;position:relative;
  background:#000;
  /* RELEVO "sunken" (afundado, como a viewport do jogo real): escuro
     em cima/esquerda, claro embaixo/direita — o oposto do raised. */
  border-style:solid;border-width:2px;
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  border-radius:0;
  display:flex;flex-direction:column;
  overflow:hidden;
}
#viewportArea{
  flex:1;min-height:0;position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
canvas#game{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  background:#000;
  cursor:crosshair;
  display:block;
  touch-action:none; /* evita scroll/zoom ao tocar/arrastar no canvas */
}
/* Painel de transição de mapa — mesmo relevo "caixa de Windows 98" do
   resto do jogo (ver comentário grande no topo do :root) em vez de um
   fundo preto liso com texto cru: aro dourado, spinner girando, texto
   dinâmico com o nome do mapa de destino (ver loadMap em map.js). */
/* Classes (não mais só IDs) — mesmo visual reutilizado em qualquer tela
   que precise de loading (ver js/ui/loadingOverlay.js), não só a troca
   de cenário/hunt que este componente nasceu pra fazer. */
.sceneLoadingOverlay{
  position:absolute; inset:0; z-index:3;
  background:#000;
  display:none; align-items:center; justify-content:center;
}
.sceneLoadingOverlay.show{ display:flex; }
/* showLoadingOverlay (js/ui/loadingOverlay.js) usa isso sobre a tela de
   login/criação de personagem (#startOverlay), que já tem a imagem de
   fundo — sem transparente aqui, o preto sólido acima escondia ela
   inteira atrás da caixa de "Entrando.../Criando personagem...". A
   troca de CENÁRIO/hunt (não usa essa classe extra) continua com o
   preto sólido de propósito — ali cobre a cena antiga incompleta
   enquanto a nova carrega. */
.genericLoadingOverlay{ background:transparent; }
.sceneLoadingBox{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:26px 36px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:3px;
  /* padrão = mesma cor do texto (--parchment, ver .sceneLoadingText
     abaixo), não mais dourado — --gold é só pra ACENTO pontual de
     seleção/foco no resto do jogo (ver comentário em :root), esse
     dourado fixo aqui destoava dessa regra. */
  border-color:var(--parchment) var(--chrome-darker) var(--chrome-darker) var(--parchment);
  box-shadow:0 6px 18px rgba(0,0,0,0.6);
}
.sceneLoadingSpinner{
  width:32px; height:32px;
  border:4px solid var(--chrome-darker);
  border-top-color:var(--gold-bright);
  border-radius:50%;
  animation:sceneLoadingSpin 0.9s linear infinite;
}
@keyframes sceneLoadingSpin{ to{ transform:rotate(360deg); } }
.sceneLoadingText{
  font-family:var(--font-heading); font-size:12px; color:var(--parchment);
  text-align:center; letter-spacing:0.5px; padding:0 10px;
}
/* horário + localização num bloco só (ver conversa: antes eram 2 caixas
   separadas com top fixo, cortavam uma em cima da outra em telas mais
   estreitas) — uma caixa, um cantinho de tela, divisor fino entre as
   linhas em vez de gap entre 2 elementos soltos: lê como uma coisa só,
   igual um HUD de jogo de verdade, não dois avisos empilhados. */
/* HP/MP fixas na borda superior da área de jogo — ver comentário grande
   no index.html. UMA faixa só cobrindo a largura INTEIRA da tela de
   jogo, dividida ao meio (flex:1 nos dois lados) — não duas caixinhas
   soltas cada uma no seu canto com um vão vazio no meio (primeira
   tentativa, rejeitada: "ficou apenas na parte preta cada um... é pra
   dividir a largura toda em 2"). pointer-events:none no container (o
   jogo continua clicável por baixo). */
#topStatBars{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:5;
  display:flex;
  pointer-events:none;
}
.topBar{
  flex:1;
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(12,12,18,0.82);
  padding:5px 12px;
}
.topBar:first-child{ border-right:1px solid rgba(255,255,255,0.15); }
.topBar .barTrack{ height:14px; }
/* full-width, ao contrário de .topBar normal (flex:1 dentro de
   #topStatBars, cada um só metade da tela) — pedido explícito: "a
   largura toda da tela, não metade igual as outras". Aqui #topXpBar É
   um .topBar (mesmo fundo/padding "chip"), só que sozinho, fora de
   #topStatBars, esticado full-width por conta própria.
   position:absolute pelo mesmo motivo de #topStatBars: fica por CIMA do
   canvas do jogo, não empurra layout nenhum — ver repositionTopHud em
   ui/hud.js, que empurra #hudInfoWidget/#mobileTopBar pra baixo dela
   também. */
#topXpBar{
  position:absolute; top:var(--topStatBarsH, 0px); left:0; right:0;
  z-index:5; pointer-events:none;
  border-top:1px solid rgba(255,255,255,0.1);
}
#topXpBar .barTrack{ height:14px; }
.topXpLabel{
  flex:0 0 auto;
  font-family:var(--font-heading); font-size:10px; font-weight:bold;
  color:#bfe8a6; letter-spacing:0.5px;
}
.topXpLevel{
  flex:0 0 auto;
  font-family:var(--font-heading); font-size:11px; font-weight:bold;
  color:var(--parchment); min-width:1.5em; text-align:center;
}
.fillXp{ height:100%; width:0%; background:#3a9a3a; transition:width .3s; }
#hudInfoWidget{
  /* top é só um valor inicial de fallback — repositionTopHud() em
     ui/hud.js mede a altura de verdade de #topStatBars e ajusta esse
     valor via JS, porque um número fixo aqui já causou a caixa de baixo
     (nome da hunt) ficar por trás das barras de hp/mp em telas onde
     #topStatBars renderiza mais alto que o previsto (ver comentário
     grande em hud.js). */
  position:absolute;
  top:44px;
  left:8px;
  display:flex;
  flex-direction:column;
  background:rgba(12,12,18,0.82);
  border:2px solid rgba(255,255,255,0.12);
  border-radius:0;
  box-shadow:0 0 0 1px rgba(255,255,255,0.06);
  z-index:5;
  overflow:hidden;
}
#locationRow{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:5px 10px;
  background:rgba(255,255,255,0.03);
}

/* botão da loja de Twobia Coins — mesmo painel chapado/escuro do resto
   do HUD (ver #hudInfoWidget acima), só com um acento dourado sutil
   (borda + ícone da moeda) pra ainda se diferenciar sem destoar do
   estilo do jogo (revisado: a versão brilhante/pulsante anterior não
   combinava — pedido explícito do dono do projeto). Canto ESQUERDO
   (não mais direito) — pedido explícito: "estava escondido atrás do
   botão de visualizar/esconder HUD" no canto direito no mobile; agora
   fica empilhado entre a barra de XP e #hudInfoWidget (mesmo lado),
   `top` calculado em JS por repositionTopHud() (ui/hud.js). */
#twobiaCoinsWidget{
  position:absolute;
  top:44px;
  left:8px;
  z-index:6;
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  cursor:pointer;
  background:rgba(12,12,18,0.82);
  border:2px solid #7a5613;
  border-radius:0;
  box-shadow:0 0 0 1px rgba(255,255,255,0.06);
}
#twobiaCoinsWidget:hover{ background:rgba(22,19,12,0.88); border-color:var(--gold-bright); }
/* arte real da moeda (ver COIN_ICON_URL em ui/twobiaStore.js) — antes era
   um círculo CSS genérico, agora é o ícone de verdade do jogo. */
.twobiaCoinIcon{
  width:14px; height:14px; flex-shrink:0;
  background-image:url('https://firebasestorage.googleapis.com/v0/b/twobia-600f6.firebasestorage.app/o/client%2Fstore%2Ftwobiacoin.webp?alt=media&token=b79bf513-0db8-4f61-8d54-1c1e0c2664cf');
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
#twobiaCoinsVal{
  font-family:var(--font-heading);
  font-size:11px;
  font-weight:bold;
  color:var(--gold-bright);
}
#locationLabel{
  font-family:var(--font-heading);
  font-size:11px;
  color:var(--parchment-dim, #b8ac94);
  white-space:nowrap;
}
/* qual sala/instância da hunt o jogador está agora ("Sala N", mesma
   numeração do modal de escolha — ver ui/huntRoomPicker.js) — pedido
   explícito: aparecer embaixo do nome da hunt, pra ele saber. Fica vazio
   (sem ocupar linha visualmente) fora de uma hunt, ver updateLocationDisplay
   em ui/hud.js. */
#huntRoomLabel{
  font-family:var(--font-heading);
  font-size:9px;
  color:var(--gold-bright);
  white-space:nowrap;
}
#huntRoomLabel:empty{ display:none; }
/* ping até o servidor de hunt (18/10), do lado do "Sala N": bolinha + ms na cor da qualidade */
#huntRoomLabel .pingHud{ white-space:nowrap; }
#huntRoomLabel .pingHud + .salaHud{ margin-left:10px; }
#huntRoomLabel .pingHud::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:4px; vertical-align:1px; }
#huntRoomLabel .pingBom{ color:#7fdc6a; }
#huntRoomLabel .pingMedio{ color:#f4d06f; }
#huntRoomLabel .pingRuim{ color:#ff9a3d; }
#huntRoomLabel .pingPessimo{ color:#ff5a4a; }
#resizeHandle{
  flex:0 0 auto;height:9px;cursor:ns-resize;
  display:flex;align-items:center;justify-content:center;
  background-color:var(--chrome);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-left:2px solid var(--chrome-darker);border-right:2px solid var(--chrome-darker);
  border-top:1px solid var(--chrome-light);
  touch-action:none;
}
#resizeHandle::before{
  content:'';width:34px;height:2px;border-radius:0;
  background:var(--chrome-darker);transition:background .12s;
}
#resizeHandle:hover::before,#resizeHandle.dragging::before{background:var(--gold-bright);}
#spellbar{
  flex:0 0 auto;position:relative;
  display:flex;gap:5px;justify-content:center;align-items:center;
  background-color:var(--chrome);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-top:2px solid var(--chrome-darker);
  padding:7px;z-index:3;
}
/* estado de toque/clique do atalho (visual de botão criado em
   spellbar.js) — mesmo bisel invertido usado em qualquer botão do jogo
   ao ser pressionado (.iconBtn:active etc), pra não ficar "morto" ao
   toque como estava antes (caixa lisa sem nenhuma reação). */
/* ícone dentro do atalho de magia/item não é arrastável e não pega o clique (bug relatado #56: no PC, clicar no meio do
   ícone mexendo o mouse 2-3px virava "arrastar a imagem" e o clique sumia — só funcionava clicando no pé do botão). */
.hotkeySlot img{ -webkit-user-drag:none; user-drag:none; pointer-events:none; }
/* troca de página das hotkeys (ticket #303, ver paginaBtn em js/ui/spellbar.js) */
#hotkeyPageBtn{
  width:22px; height:42px; flex-shrink:0; box-sizing:border-box;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family:var(--font-heading); color:var(--gold-bright); cursor:pointer; user-select:none; line-height:1;
}
#hotkeyPageBtn .hkPgSeta{ font-size:8px; color:var(--parchment-dim); }
#hotkeyPageBtn .hkPgNum{ font-size:12px; }
#hotkeyPageBtn .hkPgTot{ font-size:8px; color:var(--parchment-dim); }
#hotkeyPageBtn:hover{ border-color:var(--gold-bright) var(--chrome-darker) var(--chrome-darker) var(--gold-bright); }
#hotkeyPageBtn:active{ border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
.hotkeySlot:hover{ border-color:var(--gold-bright) var(--chrome-darker) var(--chrome-darker) var(--gold-bright); }
.hotkeySlot:active{
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4);
}
.slot{
  width:48px;height:48px;border-radius:0;
  background-color:var(--well-bg);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  /* RELEVO sunken — slot vazio "encaixa" o item, igual inventário real */
  border-style:solid;border-width:2px;
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  position:relative;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .12s, transform .08s;
}
.slot .info{
  position:absolute;top:1px;right:2px;
  width:12px;height:12px;border-radius:50%;
  background:rgba(0,0,0,0.7);border:1px solid var(--gold);
  color:var(--gold-bright);font-family:var(--font-heading);font-size:8px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;line-height:1;
}
.slot .info:hover{background:var(--gold);color:#1c140a;}
.slot:hover{border-color:var(--gold-bright) var(--chrome-darker) var(--chrome-darker) var(--gold-bright);}
.slot .key{
  position:absolute;top:1px;left:3px;font-family:var(--font-heading);font-size:9px;color:var(--gold-bright);
}
.slot .icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;}
.slot .cd{
  position:absolute;inset:0;border-radius:0;
  background:rgba(0,0,0,0.72);
  height:0%;top:auto;bottom:0;
  transition:height .08s linear;
}
.slot .mana{
  position:absolute;bottom:2px;left:0;right:0;text-align:center;
  font-size:11px;color:#8fc7ff;
}
.slot.disabled{filter:grayscale(0.6) brightness(.6);}
.tooltip{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(100% + 8px);
  background-color:var(--well-bg-black);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  border-radius:0;
  padding:6px 10px;width:190px;font-size:12px;line-height:1.25;
  opacity:0;pointer-events:none;transition:opacity .12s;z-index:5;
}
.tooltip.show{opacity:1;}
.tooltip h3{margin:0 0 4px;font-family:var(--font-heading);font-size:11px;color:var(--gold-bright);}
.tooltip .meta{color:#9fd0ff;font-size:11px;margin-bottom:3px;}

#consolePanel{
  flex:0 0 auto;height:170px;min-height:90px;
  display:flex;flex-direction:column;
  background-color:var(--chrome);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;border-top:none;
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  border-radius:0;
  overflow:hidden;
}
#consoleTabs{
  flex:0 0 auto;display:flex;gap:2px;padding:5px 6px 0;
}
.consoleTab{
  font-family:var(--font-heading);font-size:10px;color:var(--parchment);
  background-color:var(--chrome-light);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  padding:5px 10px;border-radius:0;
  border-style:solid;border-width:1px;
  border-color:var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light);
}
.consoleTab.active{
  color:var(--parchment);
  background-color:var(--well-bg-black);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-color:var(--chrome-darker) var(--chrome-dark) var(--chrome-darker) var(--chrome-darker);
  /* "grudada" na caixa de mensagens logo abaixo (efeito aba de pasta) —
     puxa a aba pra baixo por cima da borda superior do log, igual o
     cliente real do Tibia. */
  position:relative;z-index:1;margin-bottom:-2px;padding-bottom:7px;
}
#log{
  flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;
  padding:8px 12px;font-size:15px;
  background-color:var(--well-bg-black);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  margin:0 6px 6px;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  touch-action:pan-y; /* permite rolar o log mesmo com touch-action:none global */
}
#log div{ color:var(--parchment); }
#log::-webkit-scrollbar{width:8px;}
#log::-webkit-scrollbar-thumb{background:var(--chrome-dark);border-radius:0;}

/* -------- abas de conversa (Chat/Party/Sussurro/Mercado) -------- */
#chatLog, #partyChatLog, #whisperLog, #marketLog, #eventLog, #castChatLog{
  flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;
  padding:8px 12px;font-size:15px;
  background-color:var(--well-bg-black);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  margin:0 6px 6px;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  touch-action:pan-y;
}
#chatLog::-webkit-scrollbar, #partyChatLog::-webkit-scrollbar, #whisperLog::-webkit-scrollbar, #marketLog::-webkit-scrollbar, #eventLog::-webkit-scrollbar, #castChatLog::-webkit-scrollbar{width:8px;}
#chatLog::-webkit-scrollbar-thumb, #partyChatLog::-webkit-scrollbar-thumb, #whisperLog::-webkit-scrollbar-thumb, #marketLog::-webkit-scrollbar-thumb, #eventLog::-webkit-scrollbar-thumb, #castChatLog::-webkit-scrollbar-thumb{
  background:var(--chrome-dark);border-radius:0;
}
/* linha fina de contagem de espectadores, só na aba Cast (ver
   castViewerCountEl em js/ui/chat.js) — mesma largura/margem do log
   logo abaixo, "grudada" nele por cima (sem borda/gap entre os dois). */
#castViewerCount{
  flex:0 0 auto; margin:0 6px; padding:4px 12px;
  font-family:var(--font-body); font-size:11px; color:var(--parchment-dim);
  background-color:var(--chrome-darker);
  border-style:solid; border-width:2px 2px 0 2px;
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-darker) var(--chrome-darker);
}
/* única variação de cor permitida no chat: amarelo pra mensagem
   recebida, branco pra mensagem que EU enviei — o resto da UI é
   sempre branco (ver --parchment em :root).

   Cabeçalho (hora/level/nome) e texto na mesma linha (ver .chatHeader/.chatBody em ui/chat.js). margin-top separa GRUPOS de mensagem
   (folga confortável pra escanear); .chatLineGrouped (mensagem seguida
   do MESMO remetente, ver sameGroupAsAuthor em ui/chat.js) quase gruda
   nela, sem cabeçalho repetido — mesma ideia visual de Discord/WhatsApp.
   O tipo de linha (própria/recebida/sistema/GM) já dá pra notar de
   relance só pela cor do nome/texto — a barra lateral colorida que
   existia aqui foi removida (pedido explícito do dono do projeto: "tem
   uma característica muito forte de coisas feitas por IA", mesmo motivo
   do risco vermelho removido de community.html). */
/* Pedido explícito (24/09): nome e texto na MESMA linha, pra economizar espaço — "hora Lvl Nome: texto", e o texto
   continua quebrando embaixo quando é longo. */
.chatLine{
  display:block; margin-top:4px; line-height:1.35; overflow-wrap:break-word; font-size:14px;
}
.chatLine.chatLineGrouped{ margin-top:1px; }
.chatLine.chatLineOwn{ color:var(--parchment); }
.chatLine.chatLineOther{ color:var(--gold-bright); }
/* aviso de sistema (ver message.system em ui/chat.js — invasão de
   chefe etc) chegando pelo canal global de verdade: mesma cor/itálico
   de .chatSystemLine (avisos locais), só que estruturado como uma
   chatLine normal pra entrar na ordem cronológica certa com o resto. */
.chatLine.chatLineSystem{ color:#d08080; font-style:italic; }
.chatLine.chatLineSystem .chatAuthor{ color:#d08080; cursor:default; }
.chatLine.chatLineSystem .chatAuthor:hover{ text-decoration:none; }
.chatLine .chatHeader{ display:inline; }
.chatLine .chatHeader > span{ margin-right:5px; }
.chatLine .chatTime{
  flex:0 0 auto; color:var(--parchment-dim); font-size:10px; opacity:.75;
}
.chatLine .chatLevel{
  flex:0 0 auto; color:var(--parchment-dim); font-size:10px; opacity:.75;
}
/* mundo de quem mandou no chat global único (05/10): [7.4] / [8.6] */
.chatLine .chatWorld{
  flex:0 0 auto; font-size:10px; font-weight:bold; padding:0 3px; border:1px solid currentColor; border-radius:2px; line-height:13px;
}
.chatLine .chatWorld74{ color:#c9b27a; }
.chatLine .chatWorldTag{ color:#7fb8e0; }
.chatLine .chatAuthor{
  cursor:pointer; font-weight:600;
}
.chatLine .chatAuthor::after{ content:':'; }
.chatLine.chatLineOwn .chatAuthor{ color:var(--parchment); }
.chatLine.chatLineOther .chatAuthor{ color:var(--gold-bright); }
/* GM (nome começa com "GM ", ver appendLine em ui/chat.js) — nome roxo
   sutil (discreto de propósito, pedido explícito: "sem ser
   extravagante", não é um efeito animado como o brilho no mundo, ver
   drawGMWithSweep em js/nameStyle.js) — pra notar equipe numa lida
   rápida sem precisar de barra lateral colorida. */
.chatLine.chatLineGM .chatAuthor{ color:#c9a3ff; font-weight:600; }
.chatLine .chatAuthor:hover{ text-decoration:underline; }
.chatLine .chatBody{ display:inline; }
.chatLine .chatText{ font-size:14px; }
.chatLine .chatReportBtn{
  float:right; margin:3px 0 0 6px; opacity:.45; cursor:pointer; font-size:13px;
}
.chatLine .chatReportBtn:hover{ opacity:1; }
.chatSystemLine{ color:#d08080; font-style:italic; margin-top:7px; }
/* chat global (19/10): no topo da lista, busca 50 mensagens mais antigas (ver carregarMensagensAnteriores em js/chat.js) */
.chatAnteriores{ display:block; margin:2px auto 6px; padding:3px 10px; font-family:var(--font-body); font-size:11px; color:var(--parchment-dim); background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); cursor:pointer; }
.chatAnteriores:hover:not(:disabled){ color:var(--parchment); border-color:rgba(255,255,255,.25); }

/* -------- abas dinâmicas de sussurro (uma por conversa aberta) + botão "+" -------- */
#whisperTabsContainer{ display:inline-flex; gap:2px; }
.consoleTab .tabClose{
  margin-left:6px; opacity:.55; font-size:10px;
}
.consoleTab .tabClose:hover{ opacity:1; }
#addWhisperTabBtn{ cursor:pointer; font-weight:bold; }

/* aba "piscando" — chegou mensagem nova (chat/party/sussurro) enquanto
   não era a aba ativa; para de piscar sozinha assim que ela é aberta. */
.consoleTab.hasUnread{ animation:tabBlink 1s step-start infinite; }
@keyframes tabBlink{
  50%{ background:#a02020; color:var(--parchment); }
}
@media (prefers-reduced-motion: reduce){
  .consoleTab.hasUnread{ animation:none; background:#a02020; color:var(--parchment); }
}

#addWhisperRow{
  flex:0 0 auto; display:flex; gap:6px; padding:6px;
}
#addWhisperInput{
  flex:1; min-width:0; font-family:var(--font-body); font-size:15px;
  background-color:var(--well-bg-black);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  color:var(--parchment); padding:5px 8px; border-radius:0;
}
#addWhisperInput:focus{ outline:none; border-color:var(--gold-bright) var(--chrome-light) var(--chrome-light) var(--gold-bright); }
#addWhisperBtn{
  font-family:var(--font-heading); font-size:10px;
  background-color:var(--chrome); color:var(--parchment);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  border-radius:0; padding:0 14px; cursor:pointer;
}
#addWhisperBtn:hover{ filter:brightness(1.08); }
#addWhisperBtn:active{ border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }

#chatInputRow{
  flex:0 0 auto; display:flex; gap:6px; padding:6px;
}
#chatInput{
  flex:1; min-width:0; font-family:var(--font-body); font-size:15px;
  background-color:var(--well-bg-black);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  color:var(--parchment); padding:5px 8px; border-radius:0;
}
#chatInput:focus{ outline:none; border-color:var(--gold-bright) var(--chrome-light) var(--chrome-light) var(--gold-bright); }
#chatSendBtn{
  font-family:var(--font-heading); font-size:10px;
  background-color:var(--chrome); color:var(--parchment);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  border-radius:0; padding:0 14px; cursor:pointer;
}
#chatSendBtn:hover{ filter:brightness(1.08); }
#chatSendBtn:active{ border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }

/* -------- COLUNA DIREITA: personagem / equipamento / ações -------- */
#rightCol{
  flex:0 0 260px;width:260px;
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
/* painéis da direita em ABAS (Personagem/Equipamento/Skills/Party/VIP) —
   igual em qualquer tamanho de tela agora (era só mobile antes; pedido
   explícito: "no mobile fica melhor pra mostrar o conteúdo todo do que
   quer ver... ajuste pra ficar igual" no desktop também). Só o painel da
   aba ATIVA fica visível, ocupando a coluna inteira — ver
   js/ui/rightTabs.js pra troca de aba (a lógica já era genérica, só o
   CSS restringia o efeito visual ao mobile). */
#rightTabs{
  display:flex; gap:2px; flex:0 0 auto;
  margin:-10px -10px 8px; padding:6px 8px 0;
  background-color:var(--chrome-dark);
}
.rightTab{
  flex:1;
  font-size:18px; text-align:center;
  padding:6px 0 8px;
  background-color:var(--chrome-light);
  background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:1px;
  border-color:var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light);
  cursor:pointer;
  position:relative;
}
/* amigos da VIP online (aba Social, ver ui/rightTabs.js) */
.rightTab .tabBadge{
  position:absolute; top:3px; right:6px; min-width:14px; height:14px; padding:0 3px; box-sizing:border-box;
  font-family:var(--font-body); font-size:10px; font-weight:bold; line-height:14px; text-align:center;
  color:#0d1a0d; background:#5bd75b; border:1px solid #1b3a1b; border-radius:7px; pointer-events:none;
}
.rightTab.active{
  background-color:var(--well-bg-black);
  background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-color:var(--chrome-darker) var(--chrome-dark) var(--chrome-darker) var(--chrome-darker);
}
#rightPanels{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:0;
  padding-right:2px;
}
#rightPanels::-webkit-scrollbar{width:6px;}
#rightPanels::-webkit-scrollbar-thumb{background:var(--chrome-dark);}
/* painel fora da aba ativa some inteiro (ver toggle em rightTabs.js); o
   ativo ocupa a coluna toda, sem os limites de altura pensados pro
   empilhamento antigo (min-height/max-height). */
.panel{ display:none; }
.panel.activeRightPanel{
  background-color:var(--chrome);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  border-radius:0;
  display:flex; flex-direction:column;
  flex:1 1 auto; max-height:none; min-height:0;
}
.panel.activeRightPanel .panelBody{ flex:1; }
/* 07/10 (menos abas): aba Personagem = nome/vocação + boneco de equipamento + CAP/Soul/tasks. Vida, mana e XP já
   aparecem nas barras do topo — as daqui (repetidas) ficam escondidas. Aba Social = Party em cima (só o tamanho do
   conteúdo) e VIP embaixo com o resto. */
#charPanel .barRow, #charPanel #levelBox, #charPanel #xpTrack{ display:none; }
#charPanel #doll{ margin:2px auto 8px; }
/* tela baixa (720p/768p): quadrados menores pra caber boneco + CAP/Soul sem rolar (mesmo tamanho do celular) */
@media (max-height: 820px) and (min-width: 901px) and (pointer: fine){
  #charPanel #doll{ grid-template-columns:42px 42px 42px; grid-template-rows:42px 42px 42px 42px; gap:4px; margin-bottom:4px; }
  #charPanel .eqSlot{ width:42px; height:42px; font-size:15px; }
  #charPanel .eqSlot .lbl{ font-size:8px; }
  #charPanel #charVocationRow{ margin-bottom:4px !important; }
  #charPanel .panelBody{ padding:6px 10px; }
}
/* 11/10: party grande (convite/aviso de XP) esmagava o VIP — party encolhe e rola por dentro, VIP guarda um mínimo */
/* criatura do dia (18/10): sempre do tamanho do conteúdo — antes encolhia até sumir, esmagada pela Party/VIP */
#diaPanelBox.activeRightPanel{ flex:0 0 auto; }
#diaPanelBox.activeRightPanel + #partyPanelBox.activeRightPanel{ margin-top:6px; }
#partyPanelBox.activeRightPanel{ flex:0 1 auto; min-height:120px; }
#vipPanelBox.activeRightPanel{ min-height:130px; }
#partyPanelBox.activeRightPanel + #vipPanelBox.activeRightPanel{ margin-top:6px; }
/* a aba já troca de painel — o triângulo de colapsar (do empilhamento
   antigo) fica sem função, some pra não sugerir um segundo mecanismo
   fazendo a mesma coisa. */
.panelCollapseBtn{ display:none; }
.panelHeader{
  font-family:var(--font-heading);font-size:11px;color:var(--parchment);
  background-color:var(--chrome-light);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  padding:6px 10px;
  border-bottom:1px solid var(--chrome-dark);
  display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.panelHeader span{flex:1;}
.panelBody{padding:10px;overflow:auto;}
.panelBody::-webkit-scrollbar{width:6px;}
.panelBody::-webkit-scrollbar-thumb{background:var(--chrome-dark);}
.panel.collapsed .panelBody{display:none;}
.panel.collapsed .panelHeader{border-bottom:none;padding:4px 8px;}
.panel.collapsed{min-height:24px;height:auto;}
#charPanel:not(.collapsed), #equipPanel:not(.collapsed), #skillsPanelBox:not(.collapsed) { flex: 0 0 auto; min-height: 110px; }
.panelCollapseBtn{
  font-family:var(--font-heading);font-size:10px;color:var(--parchment);
  background-color:var(--chrome);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:1px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  padding:2px 6px;cursor:pointer;
}

.barRow{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.barLabel{
  font-family:var(--font-heading);font-size:10px;width:22px;color:var(--parchment);
  display:flex;align-items:center;justify-content:center;
}
/* ícones do HP/MP: coração vermelho e raio azul, do jeito que o
   cliente real do Tibia mostra antes das barras (sem texto "HP"/"MP") —
   SVG embutido via data URI, não precisa de arquivo de imagem à parte. */
.barIcon{
  width:15px;height:15px;flex:0 0 auto;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.7));
}
.iconHeart{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23d81f1f' stroke='%23600' stroke-width='0.5' d='M8 13.5C8 13.5 2 9.6 2 5.9C2 3.7 3.8 2 5.9 2C7.1 2 7.7 2.6 8 3.3C8.3 2.6 8.9 2 10.1 2C12.2 2 14 3.7 14 5.9C14 9.6 8 13.5 8 13.5Z'/%3E%3C/svg%3E");
}
.iconBolt{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%232f7fe0' stroke='%2314458a' stroke-width='0.5' d='M9 1L3 9H7L6 15L13 6H9L10 1Z'/%3E%3C/svg%3E");
}
.barTrack{
  flex:1;height:14px;
  background-color:var(--well-bg-black);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  border-radius:0;position:relative;overflow:hidden;
}
.barFill{height:100%;width:100%;transition:width .18s ease-out;position:relative;}
/* reflexo/brilho: destaque claro no topo esmaecendo pra uma leve sombra
   embaixo — a barra acompanha o próprio elemento que já anima a largura,
   então o brilho nunca fica "descolado" do preenchimento real. */
.barFill::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.5) 0%, rgba(255,255,255,.14) 40%, rgba(255,255,255,0) 60%, rgba(0,0,0,.22) 100%);
}
.fillHp{background:var(--hp);}
.fillMp{background:var(--mp);}
.barText{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#fff;text-shadow:1px 1px 0 #000;
}
#levelBox{
  font-family:var(--font-heading);font-size:11px;color:var(--parchment);
  display:flex;justify-content:space-between;margin-top:2px;
}
/* barra de XP ("level"): fundo simples (sem chrome/textura), preenchimento
   verde sólido. Igual às barras de skill em ui/hud.js. Fundo var(--well-bg)
   + borda var(--chrome-darker), não mais transparente/#000 puro — contra o
   painel escuro de hoje, uma trilha transparente com contorno preto ficava
   invisível de propósito quando a barra estava vazia (0%). */
#xpTrack{
  height:6px;
  background-color:var(--well-bg);
  border:1px solid var(--chrome-darker);
  border-radius:0;overflow:hidden;margin-top:4px;
}
#xpFill{height:100%;background:#3a9a3a;width:0%;transition:width .3s;}
#capRow{
  margin-top:8px;padding-top:6px;border-top:1px solid var(--chrome-dark);
  font-size:13px;color:#fff;
}
/* Soul Points (ver js/soul.js) — logo abaixo da CAP, mesmo tamanho */
/* quadradinho: soul atual/máximo em cima, tempo de regeneração que falta embaixo (pedido 26/09). Mesmas cores do
   resto do painel (pedido: sem roxo, padrão do jogo). */
/* Soul (esquerda, ocupa o resto) + botão quadrado da recompensa diária (direita) */
#soulLine{ display:flex; gap:6px; align-items:stretch; margin-top:6px; }
#soulLine #soulRow{ flex:1; min-width:0; margin-top:0; }
#dailyBtn{
  flex:0 0 auto; aspect-ratio:1/1; min-width:38px; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
#dailyBtn:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:1px; }
#dailyBtn .dailyGift{
  width:22px; height:22px; opacity:.55;
  /* game-icons.net, delapouite/present (CC BY 3.0) — mesma fonte dos outros ícones do HUD */
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23d9b45a%22%20d%3D%22M149.518%2078.38c-6.55.117-12.45%201.736-17.35%204.91-7.465%204.84-11.765%2012.904-13.063%2021.34-2.595%2016.874%204.747%2036.355%2019.862%2052.31C154.08%20172.893%20177.643%20185%20208%20185h2.438l-9.118-18.234c-22.194-1.554-38.46-10.777-49.287-22.205-11.885-12.545-16.543-28.064-15.138-37.19.702-4.564%202.402-7.25%205.062-8.974%202.66-1.724%207.113-2.875%2014.756-1.326%2013.078%202.65%2034.233%2013.948%2062.205%2039.284L220.27%20135h23.408c-35.31-34.8-62.215-51.278-83.39-55.57a52.157%2052.157%200%200%200-7.925-1.006c-.96-.045-1.91-.06-2.845-.043zm212.964%200c-.935-.016-1.885%200-2.845.044-2.562.12-5.21.455-7.924%201.006-21.176%204.292-48.082%2020.77-83.39%2055.57h23.406l1.352%201.354c27.972-25.336%2049.127-36.633%2062.205-39.284%207.643-1.55%2012.096-.398%2014.756%201.326%202.66%201.725%204.36%204.41%205.062%208.973%201.405%209.126-3.253%2024.645-15.138%2037.19-10.827%2011.43-27.093%2020.652-49.287%2022.206L301.562%20185H304c30.357%200%2053.92-12.106%2069.033-28.06%2015.115-15.955%2022.457-35.436%2019.862-52.31-1.298-8.436-5.598-16.5-13.063-21.34-4.9-3.174-10.8-4.793-17.35-4.91zM227.73%20153l-8.78%208.777L229.564%20183h52.875l10.61-21.223-8.777-8.777h-56.54zM73%20201v46h142v-46H73zm160%200v270h46V201h-46zm64%200v46h142v-46H297zm-192%2064v206h110V265H105zm192%200v206h110V265H297z%22%2F%3E%3C%2Fsvg%3E");
}
/* prêmio de hoje disponível: ícone aceso e borda dourada pulsando */
#dailyBtn.on .dailyGift{ opacity:1; }
#dailyBtn.on{ animation:dailyPulse 1.6s ease-in-out infinite; }
@keyframes dailyPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(244,208,111,0); } 50%{ box-shadow:0 0 0 2px rgba(244,208,111,.75); } }
@media (prefers-reduced-motion: reduce){ #dailyBtn.on{ animation:none; box-shadow:0 0 0 2px rgba(244,208,111,.75); } }
#soulRow{
  margin-top:6px;padding:4px 7px;font-size:13px;color:var(--parchment);
  background:rgba(0,0,0,0.22);border:1px solid var(--chrome-dark);
}
#soulTop{display:flex;justify-content:space-between;align-items:baseline;gap:6px;}
#soulValue{font-variant-numeric:tabular-nums;color:#fff;}
#soulMax{color:var(--parchment-dim);font-size:11px;}
#soulTimer{margin-top:1px;font-size:11px;color:var(--parchment);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* branco, padrão do jogo (pedido 27/09 — era verde/vermelho) */
#soulTimer.on, #soulTimer.off{color:var(--parchment);}
#atkDefRow{
  display:flex;justify-content:space-between;font-size:13px;color:var(--parchment);margin-top:6px;
  padding-top:6px;border-top:1px solid var(--chrome-dark);
}
#goldRow{font-size:13px;color:var(--gold-bright);margin-top:4px;}

/* Inbox (ver js/ui/inbox.js) — pedido explícito: virou um slot quadrado
   dentro de #doll (ver .g-inbox abaixo), igual aos outros slots de
   equipamento (ícone + label "Inbox" embaixo, via .eqSlot/.eqSlot .lbl
   já existentes), em vez da linha de texto solta que tinha antes — não
   ficava óbvio pro jogador que dava pra clicar. Só o badge de contagem
   precisa de estilo próprio aqui, como selo no canto do slot. */
#inboxBadge{
  position:absolute; top:-6px; right:-6px;
  font-family:var(--font-heading); font-size:10px; color:#1c0f04;
  background:var(--gold-bright); border-radius:0; padding:1px 6px;
  border-style:solid; border-width:1px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}

/* postura de combate (ver ui/fightMode.js) — mesmo chrome dos .iconBtn,
   só menor pra caber os 3 numa fileira dentro do charPanel. */
#fightModeLabel{
  margin-top:8px;padding-top:6px;border-top:1px solid var(--chrome-dark);
  font-family:var(--font-heading);font-size:10px;color:var(--parchment-dim);
  text-transform:uppercase;letter-spacing:.03em;
}
#fightModeRow{
  display:flex;gap:4px;margin-top:4px;
}
.fightModeBtn{
  flex:1;text-align:center;padding:6px 0;cursor:pointer;font-size:15px;
  background-color:var(--chrome);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  color:var(--parchment);
}
.fightModeBtn:hover{border-color:var(--gold-bright) var(--chrome-darker) var(--chrome-darker) var(--gold-bright);}
/* sem brilho dourado inventado aqui — o destaque de "selecionado" é o
   próprio ícone ficando verde (BattleModeXxxOn.gif real, ver
   syncFightModeUI em ui/fightMode.js); só um fundo mais afundado pra
   dar uma pista extra de "pressionado", sem competir com o verde. */
.fightModeBtn.active{
  background-color:var(--well-bg-black);
  border-color:var(--chrome-darker) var(--chrome-dark) var(--chrome-darker) var(--chrome-darker);
}
.fightModeBtn .iconLbl{display:block;font-family:var(--font-heading);font-size:8px;color:var(--parchment);margin-top:2px;}
/* ícone real do Tibia (BattleModeXxxOff/On.gif, ver conversa) — troca de
   src no próprio <img> em vez de csS puro pra usar o destaque VERDE
   autêntico do asset original quando ativo, não um brilho dourado
   inventado (ver syncFightModeUI em ui/fightMode.js). */
.fightModeBtn img{width:22px;height:22px;image-rendering:pixelated;display:block;margin:0 auto;}
/* Seguir/Parado (ver #chaseModeRow em index.html) — mesma caixa dos botões de postura, só que o ícone é SVG
   desenhado na hora: apagado quando não é o escolhido e verde quando é, o MESMO verde que o ícone real do Tibia
   usa nas posturas acima, pra os dois pares lerem como a mesma família de botão. */
#chaseModeRow{display:flex;gap:4px;margin-top:4px;}
.chaseModeBtn svg{
  width:22px;height:22px;display:block;margin:0 auto;
  fill:none;stroke:var(--parchment-dim);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.chaseModeBtn svg circle{fill:var(--parchment-dim);stroke:none;}
.chaseModeBtn.active svg{stroke:#5bd75b;}
.chaseModeBtn.active svg circle{fill:#5bd75b;}
#fightModeDesc{
  margin-top:4px;font-family:var(--font-body);font-size:12px;color:var(--parchment-dim);
  text-align:center;min-height:14px;
}

#doll{
  display:grid;grid-template-columns:56px 56px 56px;grid-template-rows:56px 56px 56px 56px;
  gap:8px;justify-content:center;margin:0 auto 8px;
}
.eqSlot{
  width:56px;height:56px;border-radius:0;
  background-color:var(--well-bg);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:dashed;border-width:2px;border-color:var(--chrome-dark);
  display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;font-size:22px;
}
.eqSlot.filled{
  border-style:solid;
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
}
.eqSlot:hover{border-color:var(--gold-bright);}
.eqSlot .lbl{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);text-align:center;font-size:9px;line-height:1.1;color:var(--parchment-dim);pointer-events:none;white-space:nowrap;}
/* layout pedido explícito (ver conversa sobre anel/amuleto — corrige o
   layout "igual Tibia real" anterior, que não era o que fora pedido):
   Amuleto Elmo    Mochila
   Arma    Armadura Escudo
   Anel    Calça   Munição
           Bota
*/
.g-amulet{grid-column:1;grid-row:1;}
.g-helmet{grid-column:2;grid-row:1;}
.g-bag{grid-column:3;grid-row:1;}
.g-weapon{grid-column:1;grid-row:2;}
.g-armor{grid-column:2;grid-row:2;}
.g-shield{grid-column:3;grid-row:2;}
.g-ring{grid-column:1;grid-row:3;}
.g-legs{grid-column:2;grid-row:3;}
.g-ammo{grid-column:3;grid-row:3;}
.g-boots{grid-column:2;grid-row:4;}
/* Inbox (pedido explícito) — embaixo da Munição, ao lado direito da
   Bota: única célula livre da grade 3x4. */
.g-inbox{grid-column:3;grid-row:4;}
.g-bless{grid-column:1;grid-row:4;}
#blessBtn.eqSlot{ padding:0; font:inherit; color:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; }
#blessBtn.eqSlot img{ width:26px; height:26px; image-rendering:pixelated; }
#skillsPanel{
  padding:8px;
  background-color:var(--well-bg-black);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:1px;
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  margin-top:10px;
}
#skillsPanel::-webkit-scrollbar{width:6px;}
#skillsPanel::-webkit-scrollbar-thumb{background:var(--chrome-dark);}

/* pedido explícito: "esta tudo espremido" — com CONFIG/SAIR fixos + outfit/
   automação/cast/flog/debug entrando dinamicamente (ver insertBefore nos
   respectivos arquivos), a fileira única (display:flex, cada botão
   flex:1) ia espremendo TODOS pra caber numa linha só, ficando cada vez
   mais estreitos conforme mais botões eram adicionados. Grid de 3
   colunas em vez de 1 fileira só: distribui em 2+ linhas sozinho
   (grid quebra linha automaticamente), sem precisar contar botão nem
   travar um número fixo de linhas — cada botão sempre com o mesmo
   tamanho generoso, não vai mais encolhendo. */
/* 4 por linha e mais baixos (pedido 03/10: os botões grandes escondiam parte do equipamento) */
#iconRow{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:4px;flex:0 0 auto;margin-top:6px;padding-top:5px;border-top:1px solid var(--chrome-dark);}
.iconBtn{
  text-align:center;padding:5px 0;cursor:pointer;font-size:15px;
  background-color:var(--chrome);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  border-radius:0;
}
.iconBtn:hover{border-color:var(--gold-bright) var(--chrome-darker) var(--chrome-darker) var(--gold-bright);}
.iconBtn:active{border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);}
.iconBtn{color:var(--parchment);}
.iconBtn .gameIcon{width:16px !important;height:16px !important;}
.iconBtn .iconLbl{display:block;font-family:var(--font-heading);font-size:8px;color:var(--parchment);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;}

/* ====== ícones reais (SVG, game-icons.net CC BY 3.0) em vez de emoji ======
   Pedido explícito: trocar os emojis do HUD/formulários por ícones de
   verdade (config, sair, abas do painel, outfit, treino, campos de
   login etc) — emoji renderiza diferente (às vezes feio) dependendo do
   SO/navegador, ícone SVG fica sempre consistente e combina com o resto
   da UI. Mesma técnica já usada em .iconHeart/.iconBolt (data-URI
   embutido, sem arquivo externo), só que agora com uma biblioteca de
   verdade em vez de desenhar à mão: game-icons.net, +4000 ícones SVG
   gratuitos feitos pra jogo/RPG, licença CC BY 3.0 (precisa creditar os
   autores em algum lugar do jogo/site — ver créditos).
   .gameIcon é a base (tamanho/posição); cada .iconXxx só troca a
   imagem. Cor fixa em --parchment (bate com o texto ao redor) —
   diferente de --gold-bright, que é só pra ACENTO de seleção/foco. */
.gameIcon{
  display:inline-block;
  width:20px;height:20px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  vertical-align:middle;
  flex:0 0 auto;
}
.iconConfig{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M234.875%2018.78c-26.087%202.367-51.557%208.56-74.875%2018.782%2015.37%2032.763%2014.222%2066.706-6.72%2082.407-20.835%2015.617-54.055%207.965-81.124-15.69-16.246%2019.452-29.336%2041.36-38.875%2065.626%2033.83%2012.333%2056.635%2037.665%2052.94%2063.5-3.698%2025.835-32.697%2043.74-68.626%2046.094%202.338%2025.796%208.91%2050.778%2018.937%2073.875%2017.81-8.182%2035.793-11.09%2051.095-8.938%2013.032%201.87%2023.927%207.015%2031.156%2016.657%2015.817%2021.097%207.603%2054.713-16.78%2081.97%2019.516%2016.35%2042.216%2029.444%2066.594%2039.03%2012.33-33.828%2037.655-56.634%2063.5-52.938%2025.844%203.697%2043.74%2032.696%2046.094%2068.625%2026.087-2.365%2051.557-8.555%2074.875-18.78-15.766-32.997-14.26-67.588%206.843-83.406%209.64-7.23%2022.568-9.022%2035.594-7.125%2015.112%202.16%2031.19%2010.25%2045.563%2022.78%2016.088-19.345%2029.4-41.51%2038.875-65.594-33.83-12.332-56.635-37.653-52.938-63.5%203.697-25.846%2032.665-43.772%2068.594-46.125-2.36-25.944-8.774-50.663-18.906-73.874-32.612%2015.117-66.66%2013.145-82.282-7.687-15.696-20.944-7.252-53.86%2016.688-81-19.52-16.352-42.248-29.447-66.625-39.032-12.332%2033.828-37.657%2056.66-63.5%2052.968-25.846-3.693-43.744-32.696-46.095-68.625zm21.656%2095.126c79.626%200%20144.376%2064.752%20144.376%20144.375%200%2079.626-64.75%20144.376-144.375%20144.376-79.624%200-144.374-64.75-144.374-144.375%200-79.624%2064.75-144.374%20144.375-144.374zm0%2018.688c-69.524%200-125.686%2056.162-125.686%20125.687%200%2069.526%2056.162%20125.69%20125.687%20125.69%2069.526%200%20125.69-56.164%20125.69-125.69%200-69.522-56.164-125.686-125.69-125.686zm.033%2015.125c61.094%200%20110.625%2049.53%20110.625%20110.624%200%2061.095-49.53%20110.625-110.625%20110.625s-110.625-49.53-110.625-110.626c0-61.095%2049.53-110.625%20110.625-110.625z%22%2F%3E%3C%2Fsvg%3E"); }
.iconExitDoor{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M217%2028.098v455.804l142-42.597V70.697zm159.938%2026.88.062%202.327V87h16V55zM119%2055v117.27h18V73h62V55zm258%2050v16h16v-16zm0%2034v236h16V139zm-240%2058.727V233H41v46h96v35.273L195.273%20256zM244%20232c6.627%200%2012%2010.745%2012%2024s-5.373%2024-12%2024-12-10.745-12-24%205.373-24%2012-24zM137%20339.73h-18V448h18zM377%20393v14h16v-14zm0%2032v23h16v-23zM32%20471v18h167v-18zm290.652%200-60%2018H480v-18z%22%2F%3E%3C%2Fsvg%3E"); }
.iconCharacter{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M50%2096c-9.972%200-18%208.028-18%2018v300c0%209.972%208.028%2018%2018%2018h412c9.972%200%2018-8.028%2018-18V114c0-9.972-8.028-18-18-18H50zm5%2023h402v18H55v-18zm0%2032h210v258H55V151zm18%2018v222h7.03c.47-24.342%2018.315-74.172%2047.093-97.889C136.331%20300.56%20147.615%20305%20160%20305c12.385%200%2023.669-4.44%2032.877-11.889C221.655%20316.828%20239.5%20366.658%20239.97%20391H247V169H73zm222%2014h146v18H295v-18zm-135%2010c20.835%200%2039%2020.241%2039%2047s-18.165%2047-39%2047-39-20.241-39-47%2018.165-47%2039-47zm135%2022h114v18H295v-18zm0%2032h50v18h-50v-18zm80%200h66v18h-66v-18zm-16%2096h98v18h-98v-18zm-32%2032h130v18H327v-18z%22%2F%3E%3C%2Fsvg%3E"); }
.iconBackpack{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22m186.438%2020.56-13.184%2026.365c6.8-.26%2013.626-.488%2020.47-.686l3.84-7.68h116.874l3.77%207.54c6.838.187%2013.658.408%2020.456.66l-13.102-26.2H186.437zm69.56%2042.742c-45.757.056-91.452%201.566-135.38%204.363-3.24%2050.58-8.4%20100.987-.786%20145.824%2089.297%2012.395%20180.102%2012.985%20272.764-.054%207.055-30.988%205.117-84.68-1.04-145.89-43.974-2.893-89.73-4.3-135.558-4.244zm153.783%205.54c6.42%2064.12%209.113%20119.825-1.135%20155.22l-1.61%205.56-5.726.842c-98.8%2014.528-195.613%2013.81-290.605.002l-6.285-.914-1.246-6.23c-9.89-49.49-4.085-102.785-.664-154.42-4.89.354-9.765.72-14.602%201.107-8.596%2058.568-9.39%20116.957-.05%20175.292%20110.24%2012.088%20222.275%2012.205%20336.203-.01%208.502-57.83%208.29-116.25-.017-175.313-4.725-.4-9.485-.776-14.262-1.14zM255.966%2092.3c32.526-.025%2065.067%202.746%2097.574%208.39l7.46%201.295v7.572c0%2015.554%201.683%2035.105-12.69%2050.25-9.912%2010.444-25.655%2017.337-51.31%2020.585v18.164h-82v-18.452c-23.992-3.37-39.352-10.175-49.363-20.185C150.807%20145.093%20151%20125.56%20151%20109.56v-7.594l7.484-1.278c32.444-5.54%2064.955-8.362%2097.48-8.386zm.012%2017.994c-28.96.022-57.913%202.444-86.858%206.996.265%2012.28%201.635%2022.296%209.243%2029.904%205.914%205.914%2016.952%2011.416%2036.637%2014.582v-29.22h82v29.51c21.367-3.115%2032.66-8.755%2038.254-14.65%207.033-7.41%207.696-17.502%207.73-30.124-29-4.63-58.006-7.02-87.007-6.998zM233%20150.56v30h46v-30h-46zm209.674%2092.42a618.941%20618.941%200%200%201-1.61%2010.87c.214%202.352.42%204.706.63%207.06L471%20290.213v-22.24l-28.326-24.995zm-373.485.12L41%20267.973v22.24l29.318-29.318c.205-2.327.406-4.655.616-6.982a542.428%20542.428%200%200%201-1.745-10.813zm354.634%2020.397a1637.453%201637.453%200%200%201-30.824%202.967v74.095h16v66h-16v80.615c10.318-.633%2020.63-1.313%2030.928-2.082%209.445-74.01%206.478-147.698-.104-221.596zm-335.576.03C81.725%20338.09%2078.58%20412.1%2088.06%20485.1c10.324.79%2020.638%201.504%2030.94%202.145V406.56h-16v-66h16v-74.024a1537.138%201537.138%200%200%201-30.752-3.01zm286.752%204.4c-10.014.76-20.014%201.424-30%201.992v70.64h30v-72.632zm-238%20.085v72.547h30v-70.55a1557.276%201557.276%200%200%201-30-1.997zm190%202.825c-47.65%202.173-94.984%202.19-142%20.078v19.314c23.95-5.165%2047.8-7.652%2071.516-7.59%2023.638.06%2047.145%202.654%2070.484%207.626v-19.43zM68.05%20288.62%2041%20315.67v56.89h23.06c.376-27.987%201.88-55.975%203.99-83.94zm375.948.047c2.12%2027.872%203.61%2055.83%203.957%2083.892H471v-56.89l-27.002-27.003zm-187.52%2011.95c-23.68-.063-47.487%202.577-71.478%208.052v31.89h16v18.443c17.033%205.346%2031.73%208.493%2046%209.426v-2.87h18v2.868c14.27-.932%2028.967-4.08%2046-9.425V340.56h16v-31.866c-23.42-5.267-46.907-8.016-70.523-8.078zM121%20358.558v30h22v-23h18v23h22v-30h-62zm208%200v30h22v-23h18v23h22v-30h-62zM201%20377.8v28.76h-16v15.857c48.528%2010.865%2095.713%2010.664%20142%20.045V406.56h-16V377.8c-16.332%204.747-31.283%207.52-46%208.326v11.433h-18v-11.434c-14.717-.806-29.668-3.58-46-8.326zM41%20390.56v14h23.14c-.09-4.667-.143-9.334-.163-14H41zm407.012%200a934.78%20934.78%200%200%201-.18%2014H471v-14h-22.988zM137%20406.56v19.798c6.137%207.214%2011.222%209.77%2014.934%209.844%203.734.075%208.697-2.122%2015.066-9.79V406.56h-6v7h-18v-7h-6zm208%200v19.798c6.137%207.214%2011.222%209.77%2014.934%209.844%203.734.075%208.697-2.122%2015.066-9.79V406.56h-6v7h-18v-7h-6zm-304%2016v35.154c5.596%205.51%208.677%208.25%2011.846%209.306%202.454.818%207.713%201.15%2015.045%201.317-1.544-15.25-2.586-30.51-3.204-45.778H41zm406.27%200c-.628%2015.224-1.674%2030.483-3.21%2045.78%207.358-.168%2012.635-.5%2015.094-1.32%203.17-1.056%206.25-3.795%2011.846-9.306V422.56h-23.73zM185%20440.842v49.498c47.55%201.51%2094.877%201.446%20142-.074V440.9c-46.316%2010.03-93.74%2010.185-142-.057zm-48%209.123v38.318c10.01.54%2020.01%201.008%2030%201.408v-39.678c-4.86%202.786-10.01%204.293-15.43%204.184-5.192-.104-10.036-1.624-14.57-4.232zm208%200v39.654c10.01-.403%2020.01-.878%2030-1.412v-38.194c-4.86%202.786-10.01%204.293-15.43%204.184-5.192-.104-10.036-1.624-14.57-4.232z%22%2F%3E%3C%2Fsvg%3E"); }
.iconSkills{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M23%2023v466h466v-18H41v-82.184l85.854-57.234%2070.023%2070.022%2065.133-260.536L387.28%20203.7l67.79-107.97%2019.317%2011.858%206.102-71.1-60.644%2037.616%2019.884%2012.207-59.01%2093.99-130.732-65.366-62.865%20251.462-57.98-57.978L41%20367.184V23H23z%22%2F%3E%3C%2Fsvg%3E"); }
.iconParty{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M134.865%20113.46c-7.463.026-15.134%202.977-22.38%208.663-9.658%207.582-18.055%2020.015-22.157%2035.324-4.102%2015.31-3.047%2030.274%201.527%2041.67%204.575%2011.396%2012.238%2018.958%2021.91%2021.55%209.67%202.59%2020.09-.126%2029.75-7.708%209.658-7.583%2018.055-20.016%2022.157-35.325%204.102-15.31%203.047-30.274-1.527-41.67-4.575-11.396-12.24-18.96-21.91-21.55a27.912%2027.912%200%200%200-7.37-.956zm242.27%200a27.94%2027.94%200%200%200-7.37.954c-9.672%202.59-17.337%2010.155-21.91%2021.55-4.576%2011.397-5.63%2026.362-1.527%2041.67%204.102%2015.31%2012.497%2027.743%2022.156%2035.325%209.66%207.58%2020.08%2010.297%2029.75%207.706%209.67-2.59%2017.338-10.153%2021.912-21.55%204.575-11.395%205.626-26.36%201.524-41.67-4.102-15.308-12.495-27.74-22.154-35.323-7.245-5.686-14.918-8.638-22.38-8.664zM88.387%20226.04c-10.146%202.133-18.06%206.477-24.82%2012.648-9.882%209.023-17.314%2022.553-23.03%2039.7-10.6%2031.8-15.044%2075.344-22.062%20120.153H150.97c-.04-44.9-.513-88.924-6.804-121.28-3.203-16.47-7.97-29.787-14.098-38.57-6.872%201.342-13.968%201.24-20.963-.635-8.012-2.147-14.98-6.376-20.718-12.014zm335.226%200c-5.74%205.64-12.705%209.868-20.718%2012.015-6.994%201.874-14.09%201.978-20.96.636-6.127%208.785-10.9%2022.1-14.1%2038.57-6.292%2032.356-6.766%2076.38-6.804%20121.28h132.493c-7.017-44.808-11.462-88.353-22.062-120.153-5.714-17.146-13.145-30.676-23.028-39.7-6.758-6.17-14.672-10.514-24.82-12.646zm-240.615%2069.5v23H201v-23h-18.002zm80.002%200v23h18.002v-23H263zm-94.857%2041c.18%204.613.313%209.292.425%2014h174.864c.112-4.708.248-9.387.427-14H168.142z%22%2F%3E%3C%2Fsvg%3E"); }
.iconVip{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M140.5%2019.156V192.28l21.813%2028.532h15.53V19.156H140.5zm56.03%200v201.656h122.064V19.156H196.53zm140.75%200v201.656h12.345l22.094-28.53V19.155h-34.44zM173.94%20239.5v18.125h164.09V239.5H173.94zm30.78%2036.813%208.032%2010.53c-25.262%2012.014-45.128%2033.46-55.094%2059.813l65.03%2047.47%205.47%203.968-2.094%206.437-17.312%2053.69%2045.656-33.064%205.5-3.97%205.47%203.97%2062.468%2045.22c24.872-19.957%2040.78-50.6%2040.78-85.063%200-6.494-.573-12.854-1.655-19.032l-58.845%2042.94-11-15.095L361.688%20347c-10.683-28.55-32.932-51.392-61.125-62.78l6.125-7.908h-38.813l-25.5%2078-17.75-5.812%2023.594-72.188h-43.5zm-52.374%2089.625a110.094%20110.094%200%200%200-1.72%2019.375c0%2032.163%2013.84%2061.008%2035.907%2080.937l19.69-61.03-53.876-39.283zm107.562%2078.343-51.53%2037.314c15.266%208.124%2032.707%2012.72%2051.25%2012.72%2018.673-.002%2036.218-4.676%2051.562-12.908l-51.282-37.125z%22%2F%3E%3C%2Fsvg%3E"); }
.iconOutfit{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M133.3%2033.41%2077.89%2047.25%2034.6%20148.3l33.29%2022.2%2027.46-54.9%2017.05%204.9-15.07%20150.1H245.2l9.2-87.9.9-8.1h4.5l-5.4-54.1%2017.1-4.9%2027.4%2054.9%2033.3-22.2-43.3-101.05-55.4-13.84c-5.5%203.87-12.2%206.21-19.5%207.95-9.4%202.21-20%203.24-30.6%203.24-10.6%200-21.2-1.03-30.6-3.24-7.3-1.74-14-4.07-19.5-7.95zM271.5%20192.6l-1.5%2014h178.8l-1.5-14zm-3.4%2032-26.7%20254h62.7l46.5-216.9h17.6l46.5%20216.9h62.7l-26.7-254z%22%2F%3E%3C%2Fsvg%3E"); }
.iconDroplet{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M107.156%2017.72c-22.515%20130.852-89.5%20157.227-89.5%20248.968%200%2046.03%2045.485%2079.843%2089.5%2079.843%201.7%200%203.402-.066%205.094-.155.82-6.47%201.875-12.74%203.125-18.844a69.49%2069.49%200%200%201-9.063.595c-38.51%200-69.656-31.488-69.656-70.72%200-39.23%2031.145-70.717%2069.656-70.717.576%200%201.147.017%201.72.03-17.205%209.417-28.876%2028.2-28.876%2049.5%200%2027.927%2020.063%2051.5%2046.344%2055.345%2010.542-29.276%2025.437-55.543%2041.125-83.125a3540.08%203540.08%200%200%200%209.25-16.344c-20.93-44.947-53.572-89.35-68.72-174.375zm296.531%200c-14.905%2086.624-49.318%20127.455-70.875%20171.78%204.337%208.4%208.666%2016.6%2012.907%2024.625.27.514.54%201.018.81%201.53%2012.664-17.583%2033.143-28.968%2056.283-28.968.585%200%201.167.017%201.75.032-17.214%209.413-28.907%2028.192-28.907%2049.5%200%2030.555%2024.045%2055.905%2053.938%2055.905%2016.704%200%2031.57-7.9%2041.437-20.22-6.557%2032.216-34.585%2056.22-68.217%2056.22-3.16%200-6.266-.245-9.313-.656a259.132%20259.132%200%200%201%203.656%2018.78c2.18.163%204.354.28%206.53.28%2045.005%200%2087.752-31.642%2087.752-75.342%200-88.064-64.484-122.863-87.75-253.47zM256.72%2052.47c-18.814%2073.33-47.047%20123.11-71.69%20166.436-29.68%2052.186-53.686%2094.326-53.686%20161.313%200%2031.412%2015.432%2058.706%2039.094%2078.624%2023.66%2019.917%2055.448%2031.906%2086.125%2031.906%2031.66%200%2062.733-11.278%2085.468-29.906%2022.736-18.628%2037.095-44.098%2037.095-73.78%200-64.192-23.26-108.428-52.125-163.064-23.955-45.34-51.36-97.692-70.28-171.53zm-1.5%20212.56c6.448%200%2012.75.62%2018.874%201.75-31.1%208.977-53.844%2038.675-53.844%2073.5%200%2041.822%2032.78%2076.314%2073.47%2076.314%2028.857%200%2053.72-17.368%2065.75-42.375-1.763%2057.015-47.717%20102.374-104.25%20102.374-57.654%200-104.314-47.18-104.314-105.78%200-58.603%2046.66-105.783%20104.313-105.783z%22%2F%3E%3C%2Fsvg%3E"); }
.iconPadlock{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M254.28%2017.313c-81.048%200-146.624%2065.484-146.624%20146.406V236h49.594v-69.094c0-53.658%2043.47-97.187%2097.03-97.187%2053.563%200%2097.032%2044.744%2097.032%2097.186V236h49.594v-72.28c0-78.856-65.717-146.407-146.625-146.407zM85.157%20254.688c-14.61%2022.827-22.844%2049.148-22.844%2076.78%200%2088.358%2084.97%20161.5%20191.97%20161.5%20106.998%200%20191.968-73.142%20191.968-161.5%200-27.635-8.26-53.95-22.875-76.78H85.155zM254%20278.625c22.34%200%2040.875%2017.94%2040.875%2040.28%200%2016.756-10.6%2031.23-25.125%2037.376l32.72%2098.126h-96.376l32.125-98.125c-14.526-6.145-24.532-20.62-24.532-37.374%200-22.338%2017.972-40.28%2040.312-40.28z%22%2F%3E%3C%2Fsvg%3E"); }
.iconEnvelope{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M182.78%2080.125c3.367%2019.498%2010.608%2052.67%2019.126%2084.813%208.126%2030.663%2017.73%2060.122%2025.063%2075.062%2057.968-.962%20148.212-16.707%20252.343-46.344-91.756-70.023-188.486-99.376-296.532-113.53zM164.657%2085c-65.62%2051.243-106.43%20120.106-138.5%20196.25%2054.866-38.51%20111.644-60.42%20169.313-70.906-3.995-12.636-7.88-26.486-11.626-40.625-8.425-31.79-15.554-64.12-19.188-84.72zm322.281%20125.906c-74.123%2021.218-141.43%2035.68-196.25%2042.813%2024.018%2051.794%2036.448%20106.688%2043.688%20160.936%2070.634-58.76%20125.36-118.495%20152.563-203.75zM201.53%20228.28c-56.563%209.917-111.78%2030.946-165.56%2068.907%2089.478%2061.396%20189.91%2097.037%20279.874%20119.844-7.362-55.057-20.104-109.997-44.75-161.03-18.39%201.897-35.134%202.875-49.938%202.875h-5.344l-2.718-4.625c-3.898-6.69-7.77-15.598-11.563-25.97z%22%2F%3E%3C%2Fsvg%3E"); }
.iconQuill{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M496.938%2014.063c-95.14%203.496-172.297%2024.08-231.282%2055.812l-29.47%2049.28-4.967-28.093c-10.535%207.402-20.314%2015.222-29.314%2023.407l-14.687%2045.06-5.032-25.155c-40.65%2045.507-60.41%2099.864-58.938%20155.906%2047.273-93.667%20132.404-172.727%20211.97-221.155l9.717%2015.97c-75.312%2045.838-156.387%20121.202-202.187%20208.25h12.156c19.78-12.02%2039.16-26.858%2058.406-43.44l-30.28%201.595%2054.218-23.094c46.875-43.637%2093.465-94.974%20143.313-138.28l-24.47-5.19%2056.5-21.03c26.853-20.485%2054.8-37.844%2084.344-49.843zM59.53%20312.03v30.408H194V312.03H59.53zm20.376%2049.095L47.25%20389.813%2024.97%20474.78l14.53%2015.876h177.22l14.56-15.875L209%20389.814l-30.906-28.688H79.906z%22%2F%3E%3C%2Fsvg%3E"); }
.iconCrystalBall{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M254.563%2020.75c-42.96%200-85.918%2016.387-118.688%2049.156-65.54%2065.54-65.852%20172.15-.313%20237.688%2065.54%2065.54%20172.15%2065.226%20237.688-.313%2065.54-65.538%2065.54-171.835%200-237.374-32.77-32.77-75.728-49.156-118.688-49.156zm-.157%2018.47a149.284%20149.284%200%200%201%2074.313%2019.968c-13.573-3.984-26.266-2.455-34.22%205.5-14.437%2014.437-7.796%2044.485%2014.813%2067.093%2022.608%2022.61%2052.625%2029.22%2067.062%2014.782%208.523-8.522%209.706-22.468%204.594-37.125%2036.352%2057.684%2029.586%20134.6-20.69%20184.875-29.158%2029.16-67.353%2043.773-105.56%2043.813%209.436-2.3%2017.762-6.732%2024.436-13.406%2028.885-28.886%2015.64-88.954-29.594-134.19-45.234-45.233-105.302-58.51-134.187-29.624-4.052%204.052-7.266%208.723-9.688%2013.875%203.092-33.537%2017.473-66.222%2043.157-91.905%2029.198-29.2%2067.384-43.737%20105.562-43.656zM386.97%20319.28c-.205.206-.39.422-.595.626-72.78%2072.78-191.252%2073.155-264.03.375-.278-.275-.54-.565-.814-.842-11.987%209.483-18.81%2020.384-18.81%2032%200%2036.523%2067.315%2066.125%20151.343%2066.125%2084.027%200%20152.093-29.6%20152.093-66.125%200-11.68-6.97-22.637-19.187-32.157zm39.717%2054.564c-22.225%2032.29-91.192%2055.906-172.625%2055.906-81.172%200-149.954-23.46-172.406-55.594-12.638%2011.3-19.72%2024.052-19.72%2037.563.002%2046.928%2085.546%2085.03%20192.064%2085.03%20106.518%200%20192.97-38.1%20192.97-85.03%200-13.637-7.313-26.498-20.283-37.876z%22%2F%3E%3C%2Fsvg%3E"); }
.iconRuneStone{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M153.568%2020.424%20109.13%2070.79l63.696%20291.11-18.746%201.758L92.266%2081.143%2036.588%20137.73%20110.28%20427.7l41.2-47.26%2013.286%2013.2-43.715%2050.147L322.1%20491.56l53.714-49.52-192.472-50.067%205.084-17.99%20199.982%2052.023%20103.87-195.3-68.82-127.98L153.57%2020.424zm81.912%2051.892c80.62.774%20168.87%2079.368%20155.422%20164.98-28.148-67.998-92.725-132.962-165.6-115.685-63.013%2014.94-5.186%2080.4%2065.82%2097.693C369.54%20238.4%20459.874%20302.575%20400.1%20365.79c-55.167%2058.34-159.148%202.03-150.717-67.73%2017.855%2032.638%2081.77%2085.592%20120.695%2043.436%2054.56-59.084-77.733-93.542-122.27-112.883-45.846-19.903-138.904-86.006-81.083-133.1%2020.11-16.38%2044.074-23.433%2068.753-23.197zm21.893%2061.647c7.13.043%2015.174.844%2023.918%202.453-25.35%2011.378-30.295%2031.156-25.52%2054.936-48.725-35.784-36.897-57.624%201.603-57.39zm140.693%2021.39c38.708%2017.26%2053.486%2066.86%208.854%2096.036%206.68-32.38%206.314-64.494-8.854-96.038zM246.77%20246.485c5.027.003%2010.616%201.487%2015.886%204.53%2012.047%206.955%2017.874%2019.418%2013.014%2027.836-4.86%208.417-18.567%209.603-30.613%202.648-12.047-6.955-17.872-19.418-13.012-27.836%202.734-4.735%208.265-7.18%2014.726-7.178z%22%2F%3E%3C%2Fsvg%3E"); }
.iconPotion{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22m192%2017.65%2016%2034h96l16-34zm-9%2053v51.95h32v22.2c-19.3-9-42.6-8.2-55-8.2-50.5%200-82.1%2021.9-99.5%2048-17.4%2026.1-21.5%2055.5-21.5%2073%200%2052.5%2038.6%2094.4%2083.3%20131C167%20425.1%20219%20457.3%20249.6%20488l6.4%206.3%206.4-6.3c30.6-30.7%2082.6-62.9%20127.3-99.4%2044.7-36.6%2083.3-78.5%2083.3-131%200-17.5-4.1-46.9-21.5-73s-49-48-99.5-48c-12.4%200-35.7-.8-55%208.2v-22.2h32V70.65zm18%2018h110v15.95H201zm32%2033.95h46v60.7l15.4-15.3c11.7-11.8%2041.6-13.4%2057.6-13.4%2045.5%200%2069.9%2018.1%2084.5%2040%2014.6%2021.9%2018.5%2048.5%2018.5%2063%200%2043.5-33.4%2081.7-76.7%20117-40.7%2033.4-89%2063.5-122.3%2094.7-33.3-31.2-81.6-61.3-122.3-94.7-43.3-35.3-76.7-73.5-76.7-117%200-14.5%203.9-41.1%2018.5-63s39-40%2084.5-40c16%200%2045.9%201.6%2057.6%2013.4l15.4%2015.3zm-41%2071c-64%200-80%2048-80%2080%200%2064%2080%2096%20144%20144%2064-48%20144-80%20144-144%200-32-16-80-80-80-32%200-48%200-64%2048-16-48-32-48-64-48zm125.7%2014.6c3.6-.1%205.9.3%205.8.6-16.5%207.3-33.9%2024.4-44.6%2041.7%200%200-3.2-17.7%209.9-31.9%207.4-8.1%2021.1-10.3%2028.9-10.4zM192%20209.6c-24%2021.5-41.3%2058.2-47.2%2090.4%200%200-19.5-23.7-7.7-53.4%209.8-24.5%2050.1-36.5%2054.9-37z%22%2F%3E%3C%2Fsvg%3E"); }
.iconFlag{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M247%2026v163.2c-15%20.8-28.5%203.3-39.4%207.4-6.5%202.4-12.1%205.4-16.5%209.3-4.5%204-8.1%209.5-8.1%2016.1%200%206.6%203.6%2012.1%208.1%2016.1%204.4%203.9%2010%206.9%2016.5%209.3%2013%204.9%2029.8%207.6%2048.4%207.6%2018.6%200%2035.4-2.7%2048.4-7.6%206.5-2.4%2012.1-5.4%2016.5-9.3%204.5-4%208.1-9.5%208.1-16.1%200-6.6-3.6-12.1-8.1-16.1-4.4-3.9-10-6.9-16.5-9.3-10.9-4.1-24.4-6.6-39.4-7.4V26zm38%20.99v70.02L378.4%2062zM247%20207.3v29.4c-13.1-.7-24.8-3-33.1-6.2-5.1-1.9-8.9-4.1-10.9-5.9-2-1.8-2-2.5-2-2.6%200-.1%200-.8%202-2.6s5.8-4%2010.9-5.9c8.3-3.2%2020-5.5%2033.1-6.2zm18%200c13.1.7%2024.8%203%2033.1%206.2%205.1%201.9%208.9%204.1%2010.9%205.9%202%201.8%202%202.5%202%202.6%200%20.1%200%20.8-2%202.6s-5.8%204-10.9%205.9c-8.3%203.2-20%205.5-33.1%206.2zm-9%2070.7L96%20358l128-16-32%20144h128l-32-144%20128%2016z%22%2F%3E%3C%2Fsvg%3E"); }
.iconRotate{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M263.09%2050a205.803%20205.803%200%200%200-35.857%203.13C142.026%2068.156%2075.156%20135.026%2060.13%20220.233%2045.108%20305.44%2085.075%20391.15%20160.005%20434.41c32.782%2018.927%2069.254%2027.996%20105.463%2027.553%2046.555-.57%2092.675-16.865%20129.957-48.15l-30.855-36.768a157.846%20157.846%200%200%201-180.566%2015.797%20157.846%20157.846%200%200%201-76.603-164.274A157.848%20157.848%200%200%201%20235.571%20100.4a157.84%20157.84%200%200%201%20139.17%2043.862L327%20192h128V64l-46.34%2046.342C370.242%2071.962%20317.83%2050.03%20263.09%2050z%22%2F%3E%3C%2Fsvg%3E"); }
/* iconPaw: pegada (game-icons.net, lorc/paw-print, CC BY 3.0) — botão
   do Bestiário (ver ui/bestiary.js). SVG original tem fundo preto +
   pegada branca (ícone "invertido"); recortei só o caminho da pegada
   e apliquei o mesmo fill único (#e8e8e4) dos outros .iconXxx, pra
   ficar transparente e consistente com o resto da barra. */
.iconPaw{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M258.53%2016.727l-7.553%2010.367s-14.79%2020.28-29.64%2044.75c-7.424%2012.236-14.9%2025.517-20.622%2038.108-5.722%2012.588-9.965%2024.188-9.965%2035.076%200%2037.323%2030.458%2067.783%2067.78%2067.783%2037.327%200%2067.784-30.46%2067.784-67.782%200-10.888-4.242-22.488-9.964-35.076-5.723-12.59-13.162-25.872-20.586-38.108-14.85-24.47-29.676-44.75-29.676-44.75l-7.557-10.367zm0%2032.778c4.848%206.853%2010.65%2014.592%2021.245%2032.05%207.185%2011.838%2014.33%2024.617%2019.565%2036.133%205.235%2011.518%208.285%2022.092%208.285%2027.34%200%2014.03-5.816%2026.627-15.172%2035.553%201.712-4.232%202.662-8.853%202.662-13.698%200-20.197-36.57-70.364-36.57-70.364s-36.572%2050.167-36.572%2070.364c0%204.86.955%209.492%202.675%2013.734-9.377-8.928-15.21-21.54-15.21-35.588%200-5.248%203.087-15.822%208.322-27.34%205.234-11.516%2012.38-24.295%2019.564-36.133%2010.594-17.457%2016.36-25.195%2021.207-32.05zM60.66%2079.365l-3.285%2012.374s-6.49%2024.27-11.496%2052.45c-2.503%2014.09-4.652%2029.19-5.44%2042.998-.786%2013.807-.538%2026.13%203.395%2036.28%2013.484%2034.803%2052.873%2052.214%2087.676%2038.73%2034.803-13.486%2052.21-52.913%2038.728-87.713-3.933-10.153-12.09-19.383-21.974-29.055-9.884-9.67-21.653-19.38-32.996-28.105C92.578%2099.875%2071.463%2086.3%2071.463%2086.3l-10.805-6.936zm394.725%200L444.578%2086.3s-21.114%2013.574-43.8%2031.025c-11.344%208.726-23.114%2018.434-33%2028.105-9.883%209.672-18.002%2018.902-21.936%2029.055-13.483%2034.8%203.888%2074.227%2038.69%2087.713%2034.804%2013.484%2074.23-3.927%2087.714-38.73%203.934-10.15%204.145-22.473%203.358-36.28-.787-13.807-2.935-28.907-5.438-42.998-5.006-28.18-11.498-52.45-11.498-52.45l-3.285-12.376zm-11.826%2030.55c2.042%208.137%204.64%2017.446%208.213%2037.56%202.42%2013.636%204.46%2028.142%205.18%2040.772.72%2012.63-.255%2023.576-2.15%2028.47-5.067%2013.076-15.038%2022.716-26.98%2027.66%203.116-3.325%205.666-7.28%207.412-11.788%207.298-18.834-8.68-78.824-8.68-78.824s-52.227%2033.564-59.523%2052.395c-1.75%204.516-2.533%209.164-2.467%2013.725-5.504-11.706-6.38-25.56-1.31-38.648%201.897-4.893%208.553-13.598%2017.595-22.445%209.042-8.85%2020.34-18.203%2031.316-26.647%2016.206-12.465%2024.41-17.6%2031.393-22.23zm-371.035.037c6.997%204.64%2015.17%209.745%2031.355%2022.193%2010.977%208.444%2022.276%2017.798%2031.318%2026.647%209.042%208.847%2015.696%2017.552%2017.592%2022.445%205.068%2013.082%204.197%2026.932-1.3%2038.635.063-4.557-.722-9.2-2.47-13.71-7.295-18.832-59.523-52.396-59.523-52.396s-15.975%2059.99-8.678%2078.823c1.748%204.508%204.298%208.466%207.415%2011.79-11.945-4.942-21.92-14.583-26.988-27.663-1.896-4.894-2.872-15.84-2.152-28.47.72-12.63%202.797-27.137%205.22-40.772%203.568-20.096%206.167-29.375%208.212-37.523zm184.294%20122.39c-43.658%200-79.31%2028.473-87.347%2066.686-22.89%208.593-43.324%2019.73-57.71%2034.275-15.516%2015.688-25.112%2034.84-25.112%2055.518%200%2030.856%2020.97%2057.578%2052.124%2075.997%2031.154%2018.418%2073.17%2029.38%20119.322%2029.38s87.99-10.95%20118.994-29.38c31.004-18.43%2051.832-45.18%2051.832-75.996%200-20.867-9.736-40.188-25.48-55.99-14.613-14.672-35.395-25.875-58.692-34.423-8.38-37.994-44.513-66.066-87.932-66.066zm0%2018.686c37.094%200%2066.64%2024.44%2071.178%2054.936l.838%205.656%205.44%201.832c23.44%207.892%2042.783%2019.37%2055.92%2032.557%2013.136%2013.187%2020.04%2027.7%2020.04%2042.817%200%2014.93-6.83%2029.376-19.52%2042.178%203.65-7.606%205.618-15.66%205.618-24.004%200-25.25-31.607-64.705-89.514-79.745.172-1.57.26-3.162.26-4.774%200-25.574-22.076-46.31-49.308-46.31-27.233%200-49.31%2020.736-49.31%2046.31%200%201.543.085%203.065.24%204.568-58.223%2014.926-89.483%2054.81-89.483%2079.953h-.002c0%208.25%201.937%2016.215%205.533%2023.743-12.622-12.743-19.41-27.096-19.41-41.916%200-14.955%206.777-29.303%2019.71-42.38C137.982%20333.37%20157.032%20321.95%20180.09%20314l5.402-1.868.805-5.694c4.324-30.847%2033.236-55.41%2070.52-55.41z%22%2F%3E%3C%2Fsvg%3E"); }
/* iconCamera: game-icons.net não tem um ícone de câmera que combine com
   o resto (ver comentário em ui/flog.js) — desenhado à mão no mesmo
   estilo dos outros (silhueta cheia, fill único), mesma técnica de
   iconHeart/iconBolt acima, só que pra trocar o emoji 📸 do botão do
   Flog por um ícone real que combine com a barra de ícones. */
.iconCamera{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20fill-rule%3D%22evenodd%22%20d%3D%22M192%20104L320%20104L320%20160L448%20160L448%20416L64%20416L64%20160L192%20160ZM176%20288A80%2080%200%201%200%20336%20288A80%2080%200%201%200%20176%20288Z%22%2F%3E%3C%2Fsvg%3E"); }
/* iconChatBubble: balão de fala desenhado à mão (mesma técnica do
   iconCamera acima — game-icons.net não tem um balão que combine com o
   resto, e usar o logo de verdade do Discord quebraria o estilo único
   do HUD, ver .gameIcon) — botão de Discord (ui/socialLinks.js). */
.iconChatBubble{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M80%2064H432A32%2032%200%200%201%20464%2096V336A32%2032%200%200%201%20432%20368H176L120%20432L128%20368H80A32%2032%200%200%201%2048%20336V96A32%2032%200%200%201%2080%2064Z%22%2F%3E%3C%2Fsvg%3E"); }
.iconScroll{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M196.73%2035.23c-8.132.878-16.3%201.936-24.515%203.172C192.968%2050.21%20212.045%2066.795%20224%2096c-24.896-22.512-44.232-39.5-75.795-53.512a686.283%20686.283%200%200%200-26.656%205.64c22.69%2010.745%2049.026%2026.094%2075.114%2051.306-57.456-25.454-81.792-31.066-120.23-39.4A965.564%20965.564%200%200%200%2039.5%2071.743c54.813%203.532%20103.127%2019.644%20187.346%2047.717l2.015.673%201.503%201.504c5.794%205.793%2015.356%209.254%2025.203%209.353-2.725-39.43-18.787-67.802-58.836-95.76zm118.54%200c-40.05%2027.958-56.11%2056.33-58.836%2095.76%209.847-.1%2019.41-3.56%2025.203-9.353l1.502-1.504%202.014-.672C369.374%2091.39%20417.687%2075.277%20472.5%2071.745a966.86%20966.86%200%200%200-36.934-11.71c-38.438%208.334-62.774%2013.946-120.23%2039.4%2026.088-25.212%2052.424-40.56%2075.115-51.307a689.186%20689.186%200%200%200-26.655-5.64c-31.563%2014.014-50.9%2031-75.795%2053.513%2011.954-29.205%2031.032-45.79%2051.785-57.598a591.705%20591.705%200%200%200-24.515-3.172zM25%2089.287v301.758c44.68.19%20106.01%2016.813%20190%2044.498v-301.04C128.034%20105.534%2081.67%2090.71%2025%2089.288zm462%200c-56.67%201.423-103.034%2016.246-190%2045.217v301.05c84.317-27.698%20143.413-42.5%20190-44.2V89.287zm-254%2055.195v200.325c15.47%203.1%2030.71%203.292%2046%20.097V144.482c-7.227%203.058-15.14%204.518-23%204.518-7.86%200-15.773-1.46-23-4.518zm0%20218.627v13.933c15.296%203.488%2030.512%203.284%2046-.1V363.22c-15.37%202.728-30.764%202.543-46-.11zm46%2032.185c-15.226%202.856-30.633%203.058-46%20.125v48.838c3.222%203.24%205.775%205.876%208.365%207.56%203.283%202.136%206.77%203.49%2014.274%203.19l.18-.008h.18c11.61%200%2015.954-4.04%2023-10.836v-48.87z%22%2F%3E%3C%2Fsvg%3E"); }
/* Mana Trainer OU Auto Loot ligado (ver ui/automationPanel.js) — pulsa
   em azul pra ficar óbvio de longe que alguma automação está rodando
   sozinha, fácil de achar pra desativar. */
@keyframes automationPulse{
  0%,100%{border-color:#4fa8ff #244a6b #244a6b #4fa8ff; box-shadow:0 0 4px rgba(79,168,255,0.4);}
  50%{border-color:#8fd0ff #244a6b #244a6b #8fd0ff; box-shadow:0 0 10px rgba(79,168,255,0.85);}
}
.iconBtn.automationActive{animation:automationPulse 1.4s ease-in-out infinite;}

/* texto "Processando..." do modal de transação da loja de NPC (ver
   showTxProcessing em ui/shop.js) — só um pulso de opacidade simples,
   deixa claro que tem algo rodando enquanto espera a Cloud Function. */
@keyframes shopTxPulse{ 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.shopTxPulse{ animation:shopTxPulse 1.1s ease-in-out infinite; }

#centerMsg{
  position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--font-heading);font-size:20px;color:var(--gold-bright);
  text-shadow:2px 2px 0 #000;
  opacity:0;pointer-events:none;
  text-align:center;z-index:4;
  width:max-content;max-width:min(92%, 360px);
}
/* BANNER dos avisos da hunt (20/10, ver js/ui/bannerAviso.js): moldura Kenney (CC0) pintada na cor + ícone de item.
   Mesma regra do #centerMsg: só aparece e some devagar, parado. */
#bannerAviso{ position:absolute; left:0; right:0; top:20%; display:flex; justify-content:center; pointer-events:none; z-index:5; }
#bannerAviso .banAviso{ position:relative; width:min(84%, 360px); display:flex; align-items:center; gap:10px; padding:10px 14px 8px 10px;
  background:rgba(20,14,8,.92) padding-box; border:16px solid transparent; border-image-slice:32; border-image-width:16px; border-image-repeat:stretch;
  image-rendering:pixelated; filter:drop-shadow(0 5px 8px rgba(0,0,0,.7)); opacity:0; animation:popMsg var(--dur, 4s) linear forwards; }
#bannerAviso .banFaixa{ position:absolute; top:-26px; left:50%; transform:translateX(-50%); white-space:nowrap; color:#1a1209;
  font:bold 9px var(--font-heading); letter-spacing:1.4px; padding:2px 10px; border:7px solid transparent; border-image-slice:16 fill; border-image-width:7px; image-rendering:pixelated; }
#bannerAviso .banFaixa span{ position:relative; top:-2px; }
#bannerAviso .banIcone{ width:36px; height:36px; flex-shrink:0; display:grid; place-items:center; }
#bannerAviso .banIcone img{ width:32px; height:32px; image-rendering:pixelated; filter:drop-shadow(0 2px 2px rgba(0,0,0,.8)); }
#bannerAviso .banTexto{ min-width:0; }
#bannerAviso .banTitulo{ font:bold 14px var(--font-heading); text-shadow:2px 2px 0 #000; line-height:1.2; }
#bannerAviso .banSub{ font:11px var(--font-body); color:var(--parchment); margin-top:2px; text-shadow:1px 1px 0 #000; }
/* área do jogo estreita (celular em pé): ainda menor */
#bannerAviso.banPequeno .banAviso{ width:min(90%, 300px); padding:7px 9px 6px 7px; border-width:12px; border-image-width:12px; gap:7px; }
#bannerAviso.banPequeno .banFaixa{ top:-21px; font-size:8px; padding:2px 8px; border-width:6px; border-image-width:6px; }
#bannerAviso.banPequeno .banIcone{ width:26px; height:26px; } #bannerAviso.banPequeno .banIcone img{ width:24px; height:24px; }
#bannerAviso.banPequeno .banTitulo{ font-size:12px; } #bannerAviso.banPequeno .banSub{ font-size:9px; }
/* 07/10 (Lucas: "expande pras laterais, pisca, é rápido"): só aparece e some devagar, parado, sem zoom nem pulo */
#centerMsg.show{animation:popMsg 3.5s linear forwards;}
@keyframes popMsg{
  0%{opacity:0;}
  8%{opacity:1;}
  85%{opacity:1;}
  100%{opacity:0;}
}

/* Tela de fundo do "cliente" (login/lista/criação de personagem) — igual
   Tibia de verdade: a imagem de cenário ORIGINAL, sem nenhum véu escuro
   por cima (pedido explícito) — o painel (#startPanel) já tem fundo
   opaco próprio (chrome+textura), não depende de a imagem atrás estar
   escurecida pra continuar legível. */
#legalFooter{
  position:absolute; left:0; right:0; bottom:6px;
  display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--font-heading); font-size:10px; color:rgba(232,216,168,0.55);
  padding:0 12px; text-align:center; pointer-events:none;
}
#legalFooter a{ color:rgba(159,208,255,0.75); text-decoration:none; pointer-events:auto; }
#legalFooter a:hover{ color:#9fd0ff; text-decoration:underline; }
#startOverlay{
  position:absolute;inset:0;
  background-image:url("https://firebasestorage.googleapis.com/v0/b/twobia-600f6.firebasestorage.app/o/client%2Flogin.webp?alt=media&token=4ca51e02-9c52-4398-a8da-f00b526976ea");
  background-size:cover;background-position:center;background-repeat:no-repeat;
  display:flex;flex-direction:column;
  /* "safe center" (não só "center") — BUG REAL corrigido aqui (relatado:
     "está muito deslocado pra cima" numa janela baixa/estreita): com
     align-items:center puro, quando o conteúdo é mais ALTO que a janela
     (overflow-y:auto entra em ação), o navegador centraliza pelo cálculo
     teórico e deixa a METADE DE CIMA fora de alcance de rolagem — dava
     pra rolar pra baixo mas nunca pra ver o topo/logo. "safe center" cai
     pra alinhamento no topo sozinho exatamente nesse caso (quando
     centralizar de verdade cortaria conteúdo), sem precisar medir altura
     nenhuma nem duplicar regra pra tela baixa. */
  align-items:safe center;justify-content:center;
  text-align:center;z-index:20;gap:14px;
  overflow-y:auto;
  /* BUG REAL corrigido aqui (relatado: "surgindo barra de rolagem
     horizontal, não quero isso"): overflow-y:auto sozinho, sem
     overflow-x explícito, faz o navegador aplicar overflow-x:auto
     sozinho (regra da spec — mesmo motivo já documentado em #startPanel
     mais abaixo). Numa janela baixa E estreita ao mesmo tempo (ex: painel
     lateral do editor), a barra de rolagem VERTICAL que aparece toma uns
     pixels de largura, e esses poucos pixels a menos já bastavam pra
     content encostar na borda e essa regra automática abrir uma barra
     HORIZONTAL também, numa reação em cadeia. explícito aqui embaixo,
     igual já era feito em #startPanel, fecha a brecha de vez.
     */
  overflow-x:hidden;
  padding:16px;
}
#startPanel{
  /* semi-transparente de propósito (pedido explícito) — deixa a imagem
     de fundo do #startOverlay (ver ali embaixo) aparecer um pouco atrás
     do painel, em vez do --chrome 100% opaco que os outros painéis do
     jogo usam. Mesma cor base do --chrome (só com alpha), pra continuar
     com a MESMA textura/tom, só que "vazada". */
  background-color:rgba(132,132,132,0.55);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  border-radius:0;
  padding:22px 30px;display:flex;flex-direction:column;align-items:center;gap:14px;
  /* TAMANHO PRÓPRIO DE CADA TELA (login/criar conta/lista de personagens/
     criar personagem) — pedido explícito depois de reverter a decisão
     anterior ("fica toda hora mudando de tamanho... não profissional" já
     tinha virado um painel ÚNICO fixo em 820x680 pra tudo, mas isso deixava
     um espaço vazio enorme embaixo nas telas mais simples, tipo Login —
     "modais enormes sem necessidade").
     A largura é setada EXPLICITAMENTE por cada tela em JS (startPanel.style.
     width — ver showEntryChoiceScreen/showLoginScreen/showServerFullScreen/
     showCharacterListScreen em account.js, showCharacterCreationScreen em
     character.js), não deixada "auto" aqui no CSS. BUG REAL encontrado
     tentando isso sem width explícito (relatado: "lista de personagens e
     criação de personagem estão muito grandes horizontalmente"): mesmo com
     os filhos usando `min(760px,100%)`, texto sem quebra dentro deles (ex:
     o nome da conta no cabeçalho, white-space:nowrap pra caber com
     reticências) conta pela largura MÁXIMA sem cortar no cálculo do
     navegador de "largura intrínseca" do painel (que decide o tamanho do
     #startPanel quando ele não tem width próprio) — o painel inteiro
     acabava bem mais largo que os 760px pretendidos. Cada tela setar a
     própria largura de propósito evita isso de vez (e evita também uma
     tela "herdar" a largura da tela anterior, já que é o MESMO elemento
     #startPanel reaproveitado, só o innerHTML muda).
     max-width/max-height seguram telas pequenas (mobile usa outro valor,
     ver media query abaixo). overflow-y:auto continua como rede de
     segurança pro raro caso de um conteúdo maior que a tela (ver comentário
     antigo: tela de criação já cortou botão fora da janela sem isso).
     overflow-x:hidden explícito — sem isso o navegador aplica
     overflow-x:auto sozinho (regra da spec: overflow-y diferente de
     visible força overflow-x a virar auto também), e conteúdo largo demais
     (ver seletor de outfit) ganhava barra de rolagem HORIZONTAL no painel
     inteiro em vez de se ajustar — BUG REAL relatado ("está cortando...
     head/primary/etc saindo fora do container"). */
  max-width:98vw;
  max-height:94dvh;overflow-y:auto;overflow-x:hidden;
  transition:width .16s ease, height .16s ease;
}
/* só a tela de entrada (JOGAR/CONVIDADO/site) — pedido explícito: "remova
   esse fundo cinza de apenas os logos, botões, info... porque é a
   inicial", pra deixar a arte de fundo (dungeon) aparecer mais em vez de
   ficar atrás de uma caixa cinza. Os filhos (#entryPrimaryBtn, os
   .entrySecondaryBtn, o painel de estatísticas) continuam com o PRÓPRIO
   fundo — só o retângulo do
   #startPanel em si (a "moldura" ao redor de tudo) some. Classe
   alternada por JS (nunca fica "vazada" pras outras telas — login/lista/
   criação continuam com a moldura normal, ver showEntryChoiceScreen/
   demais telas em account.js e character.js). */
#startPanel.startPanelBare{
  background:none;
  border:none;
}
#startOverlay h1{
  font-family:var(--font-heading);font-size:24px;color:var(--gold-bright);
  text-shadow:2px 2px 0 #000;letter-spacing:1px;margin:0;
}
#startOverlay h2{
  font-family:var(--font-heading);font-size:11px;color:#9fd0ff;margin:0;
}
#startOverlay p{max-width:560px;font-size:17px;color:var(--parchment);line-height:1.4;margin:0;}
#startPanel input:focus{outline:none;}
/* borda DOURADA (não o bisel chrome padrão) — mesma linguagem de "isto é
   a ação principal desta tela" que #entryPrimaryBtn/.loginActionTile.primary
   já usam na tela de entrada/login (ver redesenho pedido: "as telas de
   login, criar conta, criar personagem, tem ideia também?"). #startBtn é
   sempre O botão principal de onde aparece (Criar Personagem, Retry de
   servidor cheio) — nunca dividia atenção com outro botão do mesmo peso
   ao lado, só um "Cancelar" secundário quando existe. */
#startBtn{
  font-family:var(--font-heading);font-size:13px;
  background-color:var(--chrome);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  color:var(--parchment);
  border-style:solid;border-width:3px;
  border-color:var(--gold-bright) var(--chrome-darker) var(--chrome-darker) var(--gold-bright);
  border-radius:0;
  padding:14px 26px;cursor:pointer;
  transition:filter .12s, transform .12s;
}
#startBtn:hover{filter:brightness(1.08); transform:translateY(-1px);}
#startBtn:active{transform:translateY(0);}
#startBtn:disabled{
  opacity:0.5;cursor:not-allowed;filter:grayscale(0.5);box-shadow:none;
}
#loadStartBtn{
  font-family:var(--font-heading);font-size:10px;
  background-color:var(--chrome);color:var(--parchment);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  border-radius:0;
  padding:8px 14px;cursor:pointer;
}
#loadStartBtn:hover{filter:brightness(1.06);}

/* ---------- TELA DE CONTA / SELEÇÃO DE PERSONAGEM (ver account.js) ---------- */
.acctField label{
  font-family:var(--font-heading);font-size:11px;color:var(--parchment);
  letter-spacing:.5px;
}
.acctField input{
  font-family:var(--font-body);font-size:18px;padding:10px 12px;
  background-color:var(--well-bg-black);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  color:var(--parchment);border-radius:0;
}
.acctField input:focus{outline:none;border-color:var(--gold-bright) var(--chrome-light) var(--chrome-light) var(--gold-bright);}
.charRow{
  transition:border-color .12s, transform .08s;
}
/* borda dourada no hover — mesma linguagem de "isto é clicável/convida a
   ação" usada em #entryPrimaryBtn/.entrySecondaryBtn/.loginActionTile
   (ver redesenho da tela inicial/login); antes só levantava (translateY)
   sem mudar de cor. */
.charRow:hover{ transform:translateY(-1px); border-color:var(--gold-bright) var(--chrome-darker) var(--chrome-darker) var(--gold-bright); }
.charRow:active{transform:translateY(0);}
.charCreateRow{transition:border-color .12s, background .12s;}
.charCreateRow:hover{ background:rgba(199,165,66,0.15); border-color:var(--gold-bright); }
.acctLinkBtn{
  font-family:var(--font-heading);font-size:11px;
  background-color:var(--chrome);color:var(--parchment);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  padding:8px 16px;cursor:pointer;transition:filter .12s;
}
.acctLinkBtn:hover{filter:brightness(1.08);}
.acctLinkBtn:active{border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);}

/* ---------- tela de entrada: redesenho (ver showEntryChoiceScreen em
   account.js) — pedido explícito: "crie você essa página inicial da
   forma que você acha que ficaria melhor, mantendo o mesmo estilo de
   cor/textura". Hierarquia de verdade em vez de 3 ladrilhos IGUAIS
   competindo pela mesma atenção: JOGAR é a ação PRINCIPAL (botão largo,
   aceso a dourado, é o que 90% de quem abre o jogo vai clicar) —
   Convidado/Acessar o site viram ações SECUNDÁRIAS, menores, uma
   fileira abaixo. Mesma família visual do resto do jogo (chrome+
   hud-texture+bisel, --gold-bright só como acento, nunca decoração à
   toa) — só a COMPOSIÇÃO é nova. */
#entryDivider{
  width:min(260px, 70%); height:1px; flex:0 0 auto;
  background:linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  opacity:.55;
}
#entryPrimaryBtn{
  width:100%; max-width:480px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:16px 22px;
  background-color:var(--chrome);
  background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:3px;
  /* borda DOURADA (não o bisel chrome padrão) — é o único elemento da
     tela com isso, de propósito, pra puxar o olho primeiro. */
  border-color:var(--gold-bright) var(--chrome-darker) var(--chrome-darker) var(--gold-bright);
  cursor:pointer; text-decoration:none; color:var(--parchment);
  transition:filter .12s, transform .12s;
}
#entryPrimaryBtn:hover{ filter:brightness(1.1); transform:translateY(-2px); }
#entryPrimaryBtn:active{ transform:translateY(0); }
#entryPrimaryBtn .epIconBox{
  width:46px; height:46px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background-color:var(--well-bg-black);
  border-style:solid; border-width:2px;
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55);
}
#entryPrimaryBtn .epText{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
#entryPrimaryBtn .epLabel{
  font-family:var(--font-heading); font-size:19px; color:var(--gold-bright);
  text-shadow:1px 1px 0 #000; letter-spacing:.5px;
}
#entryPrimaryBtn .epDesc{ font-family:var(--font-body); font-size:11.5px; color:var(--parchment-dim); }

#entrySecondaryRow{ display:flex; gap:12px; width:100%; max-width:480px; justify-content:center; }
.entrySecondaryBtn{
  flex:1 1 0; min-width:0; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 10px;
  background-color:var(--chrome-dark);
  background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  cursor:pointer; text-decoration:none; color:var(--parchment-dim);
  transition:filter .12s, transform .1s, color .12s;
}
/* tela estreita (celular em pé): com o "Baixar app" (08/10) os 3 não cabem numa linha e alargavam a página — quebra
   em 2 + 1 (o terceiro ocupa a linha de baixo inteira) */
@media (max-width: 520px){
  #entrySecondaryRow{ flex-wrap:wrap; }
  .entrySecondaryBtn{ flex:1 1 130px; }
}
.entrySecondaryBtn:hover{ filter:brightness(1.15); transform:translateY(-1px); color:var(--parchment); }
.entrySecondaryBtn:active{ transform:translateY(0); }
.entrySecondaryBtn .esIconBox{
  width:22px; height:22px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
}
.entrySecondaryBtn .esLabel{
  font-family:var(--font-heading); font-size:11px; letter-spacing:.4px; white-space:nowrap;
}
/* convidado — mesmo motivo do triângulo de play: "?" é sinal de
   interface universal (identidade desconhecida/genérica), não emoji. */
.guestMark{
  font-family:var(--font-heading); font-weight:bold; color:var(--gold-bright);
  line-height:1; text-shadow:1px 1px 0 #000;
  font-size:26px; /* tamanho "grande" (botão primário); .esIconBox sobrescreve menor, ver JS */
}
/* triângulo de "play" universal — sem ícone dedicado na biblioteca SVG
   (game-icons.net) pra "jogar"; um triângulo é sinal de interface
   universal, não emoji decorativo, então não conflita com a limpeza de
   emoji pedida pro resto da página. */
.playTriangle{
  width:0; height:0;
  border-top:13px solid transparent; border-bottom:13px solid transparent;
  border-left:20px solid var(--gold-bright);
  margin-left:5px; /* peso visual do triângulo puxa pra esquerda — compensa pra ficar ótico-centralizado na caixa */
}

/* ---------- tela de entrada (refeita 04/10: "deixe mais clean") — ver ui/landingInfo.js ----------
   Logo, frase, botões; logo abaixo uma linha pequena de quantos estão online; e uma faixa discreta com os dois modos
   (arte pequena + uma frase). Sem cartões, sem brilho: só um fundo escuro translúcido e um fio separando os dois. */
#startPanel.startPanelBare{ max-height:none; overflow:visible; }
/* leitura (05/10: "a imagem de fundo é colorida e fica ruim ler os textos"): só na tela inicial, um degradê escuro por
   cima da arte — bem escuro no meio, onde ficam os textos, e clareando pras bordas, onde a arte continua aparecendo */
#startOverlay:has(.lvFaixa){
  background-image:
    radial-gradient(ellipse 60% 75% at 50% 50%, rgba(8,6,4,.62) 0%, rgba(8,6,4,.45) 45%, rgba(8,6,4,.12) 85%, rgba(8,6,4,0) 100%),
    url("https://firebasestorage.googleapis.com/v0/b/twobia-600f6.firebasestorage.app/o/client%2Flogin.webp?alt=media&token=4ca51e02-9c52-4398-a8da-f00b526976ea");
}
#entryTagline{ display:flex; flex-direction:column; align-items:center; gap:6px; max-width:540px; margin-top:-6px; text-wrap:balance; }
#entryTagline .etChamada{
  font-family:var(--font-heading); font-size:20px; line-height:1.25; color:var(--gold-bright);
  text-shadow:2px 2px 0 #000; letter-spacing:.3px;
}
#entryTagline .etSub{ font-family:var(--font-body); font-size:14.5px; line-height:1.45; color:var(--parchment); text-shadow:1px 1px 2px #000; }
#entryCenter{ display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:440px; }
.loLinha{ display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:12px; color:var(--parchment-dim); text-shadow:1px 1px 2px #000; font-variant-numeric:tabular-nums; }
.loPonto{ width:7px; height:7px; border-radius:50%; background:#5fbf5a; box-shadow:0 0 6px rgba(95,191,90,.7); }
.loSep{ opacity:.6; }
/* 13/10: as 4 vocações (arma de cada uma + o que ela faz) no lugar da faixa do modo — ver buildVocacoes */
/* "87 jogadores nas últimas 24h" (19/10, ver buildJogadores24h em ui/landingInfo.js) */
.j24Linha{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:2px; padding:5px 14px; background:rgba(10,8,6,.62); border:1px solid rgba(255,255,255,.1); }
.j24Num{ font-family:var(--font-heading); font-size:14px; color:var(--gold-bright, #f4d06f); text-shadow:1px 1px 0 #000; font-variant-numeric:tabular-nums; }
.j24Txt{ font-size:12px; color:var(--parchment); text-shadow:1px 1px 0 #000; }
.lvFaixa{ width:100%; max-width:460px; margin-top:4px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.lvTit{ font-family:var(--font-heading); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--parchment-dim); text-shadow:1px 1px 0 #000; }
.lvLinha{ width:100%; display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.lvVoc{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px 8px; background:rgba(10,8,6,.72); border:1px solid rgba(255,255,255,.1); min-width:0; }
.lvPoco{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.08); }
.lvPoco img{ image-rendering:pixelated; }
.lvNome{ font-family:var(--font-heading); font-size:10px; color:var(--gold-bright); text-shadow:1px 1px 0 #000; }
.lvPapel{ font-family:var(--font-body); font-size:11.5px; color:var(--parchment); text-align:center; line-height:1.25; }
/* tela inicial: o rodapé legal fica SEMPRE colado embaixo (pedido 04/10: não pular de lugar enquanto carrega) e sem barra
   de rolagem — se a janela for baixa demais ainda dá pra rolar com a roda/dedo, só a barra que não aparece */
#startOverlay:has(.lvFaixa){ scrollbar-width:none; padding-bottom:34px; }
#startOverlay:has(.lvFaixa)::-webkit-scrollbar{ display:none; }
/* junção dos mundos (12/10): um cartão só, centralizado (antes eram dois, 7.4 e 8.6, lado a lado) */
@media (max-width:640px){
  .lvLinha{ gap:5px; }
  .lvVoc{ padding:7px 2px 6px; }
  .lvPapel{ font-size:10.5px; }
  #entryTagline .etChamada{ font-size:16px; }
  #entryTagline .etSub{ font-size:13px; }
  #startOverlay:has(.lvFaixa){ background-image:linear-gradient(rgba(8,6,4,.5), rgba(8,6,4,.5)), url("https://firebasestorage.googleapis.com/v0/b/twobia-600f6.firebasestorage.app/o/client%2Flogin.webp?alt=media&token=4ca51e02-9c52-4398-a8da-f00b526976ea"); }
}

/* ---------- LOGIN: ações lado a lado (Voltar / Entrar / Criar) ----------
   ladrilho pequeno (ícone em cima, rótulo curto embaixo) — 3 botõezinhos
   padronizados no lugar dos links soltos de antes. Independente da tela
   de entrada (ver #entryPrimaryBtn/.entrySecondaryBtn acima). */
#loginActionRow{ display:flex; gap:10px; width:100%; justify-content:center; }
.loginActionTile{
  flex:1 1 0; max-width:110px; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:9px 8px 7px;
  background-color:var(--chrome);
  background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  cursor:pointer; text-decoration:none; color:var(--parchment);
  transition:filter .12s, transform .1s, border-color .08s;
}
.loginActionTile:hover{ filter:brightness(1.1); transform:translateY(-2px); border-color:var(--gold-bright) var(--chrome-darker) var(--chrome-darker) var(--gold-bright); }
.loginActionTile:active{ transform:translateY(0); border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
/* borda dourada SEMPRE acesa (não só no hover, ver .loginActionTile:hover
   acima) — mesma linguagem de "ação principal" do resto do redesenho
   (ver #entryPrimaryBtn/#startBtn). Voltar/Criar-conta (as OUTRAS 2)
   ficam no bisel chrome padrão, só acendendo dourado ao passar o mouse
   como sempre foi — a diferença de peso agora é visível mesmo parado,
   não só ao interagir. */
.loginActionTile.primary{
  border-width:3px;
  border-color:var(--gold-bright) var(--chrome-darker) var(--chrome-darker) var(--gold-bright);
}
.loginActionTile .laIconBox{
  width:30px; height:30px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background-color:var(--well-bg-black);
  border-style:solid; border-width:2px;
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55);
}
.loginActionTile .laLabel{
  font-family:var(--font-heading); font-size:10px; color:var(--gold-bright);
  text-shadow:1px 1px 0 #000; letter-spacing:.4px; white-space:nowrap;
}
.loginActionTile .laPlus{ font-family:var(--font-heading); font-size:18px; line-height:1; color:var(--gold-bright); text-shadow:1px 1px 0 #000; }
.loginActionTile .laTriRight{
  width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent;
  border-left:14px solid var(--gold-bright); margin-left:3px;
}
.loginActionTile .laTriLeft{
  width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent;
  border-right:14px solid var(--gold-bright); margin-right:3px;
}
.loginActionTile .laIconBox .gameIcon{ width:17px; height:17px; }
.loginActionTile:disabled{ opacity:.5; cursor:default; transform:none; }
@media (max-width: 420px){
  #loginActionRow{ gap:7px; }
  .loginActionTile{ max-width:none; padding:8px 4px 6px; }
  .loginActionTile .laLabel{ font-size:9px; }
}

/* ---------- MODAL DE MOCHILA ---------- */
#invOverlay{
  position:absolute;inset:0;background:rgba(10,8,5,0.55);
  display:none;align-items:center;justify-content:center;z-index:30;
}
#invOverlay.show{display:flex;}
#invModal{
  width:min(460px,92vw);max-height:80vh;overflow:hidden;
  background-color:var(--chrome);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  border-radius:0;
  display:flex;flex-direction:column;
}
#invHeader{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px;border-bottom:1px solid var(--chrome-dark);
  font-family:var(--font-heading);font-size:12px;color:var(--parchment);
  background-color:var(--chrome-light);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
}
#invClose{
  cursor:pointer;background-color:var(--chrome);color:var(--parchment);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  border-radius:0;padding:6px 10px;font-family:var(--font-heading);font-size:10px;
}
#invClose:hover{filter:brightness(1.08);}
#invClose:active{border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);}
#invBody{padding:14px;overflow-y:auto;}
#invList{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto;padding-right:4px;}
.invRow{
  display:flex;align-items:center;gap:10px;
  background-color:var(--well-bg-black);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:1px;
  border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  border-radius:0;padding:6px 10px;cursor:pointer;
}
.invRow:hover{border-color:var(--gold-bright) var(--chrome-light) var(--chrome-light) var(--gold-bright);}
.invRow .ic{font-size:22px;width:28px;text-align:center;}
.invRow .nm{flex:1;font-size:16px;color:var(--parchment);}
.invRow .qt{color:var(--gold-bright);font-size:14px;}
.invRow .act{font-size:12px;color:#9fd0ff;}
#invEmpty{color:var(--parchment);font-size:15px;text-align:center;padding:20px;}

/* ============================================================
   ELEMENTOS EXCLUSIVOS DO MOBILE
   Ficam sempre "display:none" em telas grandes; a media query no
   final do arquivo é quem decide quando exibi-los. Definir isso
   aqui (fora da media query) evita qualquer flash/salto de layout
   no desktop enquanto o CSS carrega.
   ============================================================ */
#mobileTopBar{ display:none; }
#touchControls{ display:none; }
#rightColBackdrop{ display:none; }
#consolePanelBackdrop{ display:none; }

/* ---------- aviso "gire o aparelho" ---------- */
#rotateOverlay{
  display:none;
  position:fixed; inset:0; z-index:9999;
  background:#000;
  flex-direction:column; align-items:center; justify-content:center; gap:16px;
  text-align:center; padding:24px; box-sizing:border-box;
  font-family:var(--font-heading); font-size:14px; color:var(--parchment);
}
#rotateIcon{
  font-size:48px;
  animation:rotateHint 1.6s ease-in-out infinite;
}
@keyframes rotateHint{
  0%,100%{ transform:rotate(0deg); }
  50%{ transform:rotate(90deg); }
}
/* #rotateOverlay não aparece mais sozinho: celular em pé virou um jeito de jogar (ver "CELULAR EM PÉ" no fim do
   arquivo). O elemento continua no HTML, sem uso. */

/* #fullscreenResumeOverlay: MESMO tratamento visual do #rotateOverlay
   acima, mas mostrado/escondido via classe (ver js/ui/orientation.js),
   nunca por media query — perder fullscreen não é um estado que dê pra
   detectar só com CSS de orientação/largura. */
#fullscreenResumeOverlay{
  display:none;
  position:fixed; inset:0; z-index:9999;
  background:#000;
  flex-direction:column; align-items:center; justify-content:center; gap:16px;
  text-align:center; padding:24px; box-sizing:border-box;
  font-family:var(--font-heading); font-size:14px; color:var(--parchment);
}
#fullscreenResumeOverlay.visible{ display:flex; }
#fullscreenResumeIcon{ font-size:48px; }

/* ============================================================
   MEDIA QUERY MOBILE
   Dispara em telas estreitas OU em qualquer dispositivo cujo
   ponteiro principal seja "grosso" (dedo), então um tablet
   Android com 900px de largura entra no modo mobile mesmo em
   paisagem, mas um notebook com trackpad (ponteiro fino) não.
   ============================================================ */
@media (max-width: 900px), (pointer: coarse){

  #stage{ padding:0; }
  #tibiaClient{
    width:100vw; height:100vh; height:100dvh;
    border:none; border-radius:0; box-shadow:none;
    padding:4px; gap:4px;
  }

  /* ---------- coluna do jogo ocupa a tela inteira ---------- */
  #leftCol{ width:100%; }
  #gameFrame{ min-height:0; border-radius:0; }

  /* ---------- barra de magias: NÃO é mais barra nenhuma no mobile (ver
     conversa) — as 10 hotkeys saem da faixa horizontal no rodapé e viram
     um círculo ancorado no polegar direito (ver #hotkeyRow mais abaixo,
     perto de #touchActions/#touchJump). #spellbar em si só continua
     existindo pra hospedar o #tooltip (não usado de verdade no touch,
     mas sem custo nenhum deixar) — sem ocupar espaço na tela. ---------- */
  #spellbar{
    position:static; width:0; height:0; padding:0; margin:0;
    border:none; overflow:visible;
  }
  .slot{ width:46px; height:46px; }
  .slot .icon{ width:24px; height:24px; font-size:14px; }

  /* ---------- barra superior flutuante (menu / log) ---------- */
  #mobileTopBar{
    display:flex; gap:8px;
    position:absolute; top:calc(32px + env(safe-area-inset-top, 0px)); right:8px; z-index:6;
  }
  /* Suporte já entrou como ícone dentro de #mobileTopBar acima (ver
     index.html) — o botão flutuante de desktop (ui/support.js) some
     aqui pra não duplicar o atalho nem competir por espaço no canto.
     BUG REAL corrigido aqui (relatado: "no mobile o botão de suporte
     ficou duplicado, um em cima de onde era o botão de mover a posição
     do D-pad/hotkeys") — display:none sozinho NUNCA vence o display:flex
     que ui/support.js seta como estilo INLINE no próprio elemento (ver
     ensureFloatingHelpButton, js/ui/support.js) — estilo inline sempre
     ganha de regra externa, não importa a especificidade, só !important
     vence. Sem isso o botão de desktop continuava visível E sobreposto
     ao grupo de botões do #mobileTopBar. */
  #supportHelpBtn{ display:none !important; }
  /* #topStatBars agora aparece no mobile também (pedido explícito) —
     abre espaço pra respeitar o notch/status bar (env safe-area) e
     empurra #mobileTopBar/#hudInfoWidget pra baixo dela, senão ficava
     tudo empilhado bem em cima uma coisa da outra. */
  #topStatBars{ padding-top:env(safe-area-inset-top, 0px); }
  /* fallback inicial só — ver repositionTopHud() em ui/hud.js, que
     recalcula os dois na hora certa. #twobiaCoinsWidget agora fica NO
     LUGAR onde #hudInfoWidget ficava (canto esquerdo, logo abaixo da
     barra de XP); #hudInfoWidget desce pra abrir espaço pra ele. */
  #twobiaCoinsWidget{ top:calc(32px + env(safe-area-inset-top, 0px)); }
  #hudInfoWidget{ top:calc(32px + 40px + env(safe-area-inset-top, 0px)); }
  .mobileIconBtn{
    width:38px;height:38px;border-radius:0;
    background-color:var(--chrome);
    background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
    border-style:solid;border-width:2px;
    border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
    display:flex;align-items:center;justify-content:center;
    font-size:17px;cursor:pointer;touch-action:manipulation;
  }
  .mobileIconBtn:active{ border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }

  /* ---------- controles touch: D-pad (esquerda) ---------- */
  /* #touchControls não posiciona mais nada por si (ver #touchDpad logo
     abaixo, virou position:fixed independente, tirado do fluxo normal),
     mas o display:none base (regra global, fora de media query, pro
     desktop) precisa ser desligado aqui — display:none no pai esconde
     os filhos mesmo eles sendo position:fixed (fixed só tira do fluxo
     normal, não escapa de um ancestral display:none). display:contents
     faz o wrapper não gerar caixa própria nenhuma (sem afetar o
     position:fixed dos filhos) e ainda deixa os filhos renderizando. */
  #touchControls{ display:contents; }

  /* position:fixed com left/bottom PRÓPRIOS (não mais dependente do pai)
     — precisa ser assim pra js/ui/touchLayout.js conseguir arrastar e
     salvar a posição livremente (ver conversa: "arrastar pra posição que
     ele quiser, salvo no storage"), igual o grupo pulo+hotkeys já é. */
  #touchDpad{
    position:fixed; left:14px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    z-index:5; pointer-events:auto;
    touch-action:none;
  }
  /* contorno tracejado indicando "isso aqui arrasta agora" (ver
     js/ui/touchLayout.js — liga junto com .touchLayoutEdit em <body>). */
  body.touchLayoutEdit #touchDpad{
    outline:2px dashed var(--gold-bright); outline-offset:4px;
  }
  /* joystick de verdade (ver conversa: "clica e arrasta na direção que
     quer igual de jogo, ao invés de clicar/desclicar direção do botão")
     — base fixa + nub que segue o dedo (ver bindJoystick em js/input.js).
     Raio da base = metade de 108px = 54px; o nub anda no máximo até esse
     raio menos a própria metade, ver JOY_MAX_DRAG no JS (precisa bater
     com esse valor aqui). */
  /* pedido explícito: "muito simples e feio" — joystick/hotkeys/pular
     agora usam o MESMO relevo "chrome entalhado" (textura + bisel claro/
     escuro) de todo o resto do HUD (botões, painéis, slots), em vez de
     circulozinhos/caixas lisas soltas do resto do visual do jogo. */
  #joystickBase{
    position:relative;
    width:108px; height:108px;
    border-radius:50%;
    background-color:#221c15;
    background-image:radial-gradient(circle at 38% 32%, rgba(255,255,255,0.05), transparent 60%), var(--hud-texture);
    background-repeat:no-repeat, repeat;
    background-blend-mode:normal, multiply;
    border-style:solid; border-width:3px;
    border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
    box-shadow:inset 0 3px 10px rgba(0,0,0,.65), 0 0 0 2px rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.5);
    touch-action:none;
  }
  /* durante o arrasto de REPOSICIONAR o grupo inteiro (ver guard em
     bindJoystick, js/input.js) — pointer-events:none aqui é só reforço
     visual/de UX (o toque "atravessa" pro pai #touchDpad, que é quem
     escuta o arrasto), a trava de verdade já é o guard no JS. */
  body.touchLayoutEdit #joystickBase{ pointer-events:none; opacity:0.6; }
  #joystickNub{
    position:absolute;
    top:50%; left:50%;
    width:50px; height:50px;
    margin:-25px 0 0 -25px;
    border-radius:50%;
    background-color:var(--chrome-light);
    background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
    border-style:solid;border-width:2px;
    border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
    box-shadow:0 3px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25);
    pointer-events:none;
    /* só anima a VOLTA ao centro no soltar (ver releaseNub no JS, que
       liga essa classe); durante o arrasto em si tem que seguir o dedo
       1:1 sem atraso nenhum, por isso a transição fica condicionada à
       classe, não sempre ligada. */
  }
  #joystickNub.snapBack{ transition:transform .12s ease-out; }
  #joystickBase.active #joystickNub{
    background-color:var(--gold-bright);
    box-shadow:0 3px 8px rgba(0,0,0,.5), 0 0 10px rgba(232,207,122,.6), inset 0 1px 0 rgba(255,255,255,.35);
  }

  /* ---------- polegar direito: pulo no canto inferior direito + 8
     hotkeys em LEQUE num quarto de círculo acima/à esquerda dele (não
     mais um círculo INTEIRO ao redor — ver conversa: o círculo cheio de
     10 precisava de raio+inset grandes demais, sobrando MUITO espaço
     vazio embaixo/à direita do botão de pulo que nunca era usado de
     verdade, e em tela curta (celular deitado) isso não cabia direito,
     cortava.

     Formato pedido (P=pulo, canto inferior direito; 1-4=anel EXTERNO,
     5-8=anel INTERNO, mesmos 4 ângulos nos dois anéis):
           4  8
         3  7
       2  6
     1  5   P
     Varre só 90° (de "esquerda" até "cima" do botão), os 2 anéis cobrem
     as mesmas 4 direções em 2 distâncias — o polegar alcança qualquer
     um dos 8 só girando/esticando um pouco, sem precisar cobrir 360°
     (as direções pra baixo/direita do botão nunca seriam alcançáveis
     mesmo, ficavam de enfeite no design antigo).

     JUMP_INSET/RING_INNER/RING_OUTER aqui precisam bater com os valores
     usados nas 8 regras `#hotkeyRow .hotkeySlot:nth-child(N)` logo
     abaixo — se mudar um, muda o outro junto. ---------- */
  #touchActions{
    position:fixed !important;
    right:40px; bottom:calc(40px + env(safe-area-inset-bottom, 0px));
    width:0 !important; height:0 !important;
    z-index:5; pointer-events:none;
  }
  #touchJump{
    position:absolute !important;
    top:0 !important; left:0 !important;
    width:72px !important; height:72px !important;
    margin:-36px 0 0 -36px !important;
    border-radius:50%;
    background-color:var(--gold-bright);
    background-image:radial-gradient(circle at 38% 32%, rgba(255,255,255,0.35), transparent 60%), var(--hud-texture);
    background-repeat:no-repeat, repeat;
    background-blend-mode:normal, multiply;
    border-style:solid; border-width:3px;
    border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
    box-shadow:0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    font-family:var(--font-heading); font-size:9px; color:#2a2018;
    text-align:center; line-height:1; padding:2px; box-sizing:border-box;
    touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
    pointer-events:auto;
    transition:transform .08s ease;
  }
  #touchJump .iconAttack{ width:26px; height:26px; }
  #touchJump .touchJumpLbl{ letter-spacing:.3px; }
  #touchJump:active{
    transform:scale(0.93);
    border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
    box-shadow:0 1px 3px rgba(0,0,0,.5), inset 0 2px 4px rgba(0,0,0,.3);
  }
  /* contorno tracejado indicando "isso aqui arrasta agora" (ver
     js/ui/touchLayout.js), mesmo tratamento visual do D-pad. */
  body.touchLayoutEdit #touchJump{
    outline:2px dashed var(--gold-bright); outline-offset:4px;
  }

  /* botão de esconder/mostrar controles — fixo (não arrasta, ao contrário
     do D-pad/pulo). Pedido explícito: quando uma criatura morre em cima
     desses botões perto da borda do mapa, esconder dá acesso ao corpo pra
     pegar o loot.

     right:80px (era 40px) — BUG REAL corrigido aqui (relatado, testado no
     celular de verdade: "o botão de full screen e de ocultar/exibir os
     slots hotkey está um pouco em cima do slot mais alto das hotkeys").
     O leque de hotkeys cresceu de 36px/raio145 pra 40px/raio180 (ver
     .hotkeySlot acima) — a folga que existia com o botão antigo (36px)
     não sobrou pro maior. Medido de verdade (Playwright, viewport
     paisagem real): a hotkey mais alta chegava a se sobrepor ao olho em
     até 20x10px com right:40px; com right:80px sobra ~20px de folga real
     sem tocar em nenhuma hotkey. */
  #touchVisibilityToggle{
    position:fixed !important;
    /* 28/09: 80 -> 150 (pedido: olho e lápis ficavam um pouco em cima das hotkeys no celular) */
    right:150px; bottom:calc(230px + env(safe-area-inset-bottom, 0px));
    width:40px; height:40px; border-radius:50%;
    background-color:var(--chrome);
    background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
    border-style:solid;border-width:2px;
    border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
    display:flex;align-items:center;justify-content:center;
    z-index:6; touch-action:manipulation; cursor:pointer;
    pointer-events:auto;
  }
  #touchVisibilityToggle .gameIcon{ width:22px; height:22px; }
  #touchVisibilityToggle:active{
    border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  }
  /* mesmo botão redondo, do LADO ESQUERDO do olho (mesma faixa/altura,
     não empilhado em cima — ficava colidindo/passando por cima de outros
     botões, relatado direto) — reengatilha fullscreen manualmente (ver
     comentário grande em index.html: trocar de app sempre tira o
     navegador do fullscreen sozinho, sem jeito de evitar isso, só de
     pedir de novo). right = right do olho (80, ver comentário grande
     acima) + largura do olho (40) + 10 de respiro entre os dois. */
  /* 28/09: agora é o LÁPIS (editar hotkeys, ticket #146); tela cheia voltou num botão próprio ao lado (#touchFullscreenBtn) */
  #touchFullscreenToggle, #touchFullscreenBtn{
    position:fixed !important;
    right:200px; bottom:calc(230px + env(safe-area-inset-bottom, 0px));
    width:40px; height:40px; border-radius:50%;
    background-color:var(--chrome);
    background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
    border-style:solid;border-width:2px;
    border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
    display:flex;align-items:center;justify-content:center;
    z-index:6; touch-action:manipulation; cursor:pointer;
    pointer-events:auto;
  }
  #touchFullscreenBtn{ right:250px; }
  #touchFullscreenToggle .gameIcon, #touchFullscreenBtn .gameIcon{ width:20px; height:20px; }
  #touchFullscreenToggle:active, #touchFullscreenBtn:active{
    border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  }
  /* esconde os 3 grupos de controle de toque — o botão de olho em si
     continua visível (senão não daria pra tocar de novo pra mostrar),
     mas fullscreen SOME junto (pedido explícito) — fica bem perto da
     área de jogo, mesmo motivo de esconder os outros. */
  body.touchControlsHidden #touchDpad,
  body.touchControlsHidden #touchActions,
  body.touchControlsHidden #spellbar,
  body.touchControlsHidden #touchFullscreenToggle,
  body.touchControlsHidden #touchFullscreenBtn{
    display:none !important;
  }

  /* mesmo pivô de #touchActions acima (right/bottom idênticos) — cada
     .hotkeySlot parte desse ponto (0x0, sem tamanho próprio) e usa
     rotate+translate+rotate (técnica padrão de menu radial em CSS) pra
     se posicionar num ponto do leque, com margin negativa recentrando
     a própria caixa 42x42 nesse ponto antes da rotação. */
  #hotkeyRow{
    display:block !important;
    position:fixed !important;
    right:40px; bottom:calc(40px + env(safe-area-inset-bottom, 0px));
    width:0 !important; height:0 !important;
    padding:0 !important; margin:0 !important;
    z-index:5; pointer-events:none;
  }
  /* 40px (era 36px — pedido real: "acho que ainda está pequeno") só no
     mobile — celular deitado tem pouquíssima altura de sobra (ver
     conversa: testado numa viewport real de ~264px de altura útil), e o
     alcance do leque (raio + metade do botão) precisa caber nisso sem
     cortar no topo da tela.

     TENTATIVA DESCARTADA (registrado pra não repetir o erro): subir só o
     BOTÃO pra 40/42px mantendo os MESMOS raios de anel (145/100) parecia
     seguro só olhando "45px de raio entre anéis menos Npx de botão =
     folga positiva" — conta que vale pra botão REDONDO, não pro quadrado
     sem rotação que é o .hotkeySlot de verdade. Num ângulo diagonal
     (210°/240°, não 180°/270°) a distância entre anéis se reparte nos
     eixos X e Y ao mesmo tempo, puxando a folga de cada eixo bem pra
     baixo do que a conta redonda sugere — 40px encostava de verdade
     (pego só rodando teste automatizado com hasTouch/viewport real, não
     visualmente/à mão). Desta vez os RAIOS dos 2 anéis (não só o botão)
     foram recalculados JUNTO, testados num script que confere as 28
     combinações de par de botão (bounding box contra bounding box, não
     "distância entre centros") — folga mínima real de 6px entre
     quaisquer dois botões, com folga de sobra (~13px) no orçamento de
     altura. Qualquer mudança futura aqui precisa passar pelo mesmo tipo
     de checagem, não só pela conta no papel. */
  .hotkeySlot{
    position:absolute !important;
    top:0 !important; left:0 !important;
    width:40px !important; height:40px !important;
    margin:-20px 0 0 -20px !important;
    pointer-events:auto;
    /* sem gesto do navegador (zoom de 2 dedos) — com o joystick segurado, o toque aqui é um 2º dedo (ver
       attachLongPressEdit em js/ui/spellbar.js) */
    touch-action:none; -webkit-touch-callout:none;
  }
  /* o ✎ de editar (canto do slot, ver .hkEdit em js/ui/spellbar.js) some
     como ALVO DE TOQUE aqui — fica só decorativo (pointer-events:none
     deixa o toque atravessar pro .hotkeySlot por baixo). Bug relatado:
     "às vezes clico e cai no editar" — no mouse o ponteiro é preciso
     (1px), no dedo não, e o ✎ é um botão de 14px SOBREPOSTO ao canto do
     slot — fácil de acertar por engano tentando usar a hotkey. Editar no
     touch passa a ser por toque-e-segure no slot inteiro (ver
     attachLongPressEdit em spellbar.js), que tem os 40px inteiros de
     alvo, não 14px. */
  /* 28/09 (ticket #146): no celular o lápis de cada slot some — editar é só pelo botão de lápis (lista das hotkeys) */
  .hotkeySlot .hkEdit{ display:none !important; /* inline do spellbar.js tem display:flex */ }
  /* página das hotkeys (ticket #303): fora do leque, botão redondo na mesma linha do olho/lápis/tela cheia */
  #hotkeyRow #hotkeyPageBtn{
    position:fixed !important; right:300px; bottom:calc(230px + env(safe-area-inset-bottom, 0px));
    width:40px !important; height:40px !important; border-radius:50%; flex-direction:row; gap:1px;
    pointer-events:auto; touch-action:manipulation;
  }
  #hotkeyRow #hotkeyPageBtn .hkPgSeta{ display:none; }
  body.touchControlsHidden #hotkeyPageBtn{ display:none !important; }
  /* 2 anéis — externo 180px (1-4), interno 126px (5-8) — mesmos 4 ângulos
     nos dois — 180°/210°/240°/270°, ou seja "esquerda" até "cima" do
     botão de pulo, 30° entre cada (varrendo só o quarto de círculo que o
     polegar alcança de verdade a partir do canto inferior direito, ver
     comentário grande acima de #touchActions). Raios recalculados JUNTO
     com o botão de 40px (ver comentário grande em .hotkeySlot acima) —
     checado por script (bounding box das 28 combinações de par, não
     "distância entre centros", que engana pra caixa quadrada num ângulo
     diagonal): folga mínima real de 6px entre quaisquer dois botões.
     Alcance máximo (raio externo + metade do botão = 180+20=200px) cabe
     dentro do inset de 50px numa tela de ~213px de altura útil pra cima
     do pivô — testado numa viewport real de ~264px, ~13px de margem
     ainda sobrando (era 50px com o botão de 36px — a margem encolheu de
     propósito pra caber o botão maior, mas continua positiva). */
  #hotkeyRow .hotkeySlot:nth-child(1){ transform:rotate(180deg) translate(180px) rotate(-180deg) !important; }
  #hotkeyRow .hotkeySlot:nth-child(2){ transform:rotate(210deg) translate(180px) rotate(-210deg) !important; }
  #hotkeyRow .hotkeySlot:nth-child(3){ transform:rotate(240deg) translate(180px) rotate(-240deg) !important; }
  #hotkeyRow .hotkeySlot:nth-child(4){ transform:rotate(270deg) translate(180px) rotate(-270deg) !important; }
  #hotkeyRow .hotkeySlot:nth-child(5){ transform:rotate(180deg) translate(126px) rotate(-180deg) !important; }
  #hotkeyRow .hotkeySlot:nth-child(6){ transform:rotate(210deg) translate(126px) rotate(-210deg) !important; }
  #hotkeyRow .hotkeySlot:nth-child(7){ transform:rotate(240deg) translate(126px) rotate(-240deg) !important; }
  #hotkeyRow .hotkeySlot:nth-child(8){ transform:rotate(270deg) translate(126px) rotate(-270deg) !important; }

  /* durante o arrasto, tocar numa hotkey não pode ativar a magia/poção
     dela por engano (ver click listener em js/ui/spellbar.js) — o toque
     "atravessa" (não tem nada recebendo embaixo, tudo bem ficar inerte). */
  body.touchLayoutEdit .hotkeySlot{ pointer-events:none; opacity:0.6; }

  /* botão de "mover controles" (ver js/ui/touchLayout.js) aceso enquanto
     o modo estiver ligado — mesmo padrão visual de "ativo" já usado no
     :active de .mobileIconBtn, só que persistente em vez de só no toque. */
  .mobileIconBtn.active{
    border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
    background-color:var(--gold-bright);
  }
  /* botão de restaurar padrão: só existe enquanto o modo de arrastar
     estiver ligado (ver js/ui/touchLayout.js) — sem isso, sempre visível
     ocuparia espaço na barra superior sem fazer sentido nenhum fora do
     modo de edição. */
  #mobileResetLayoutBtn{ display:none; }
  body.touchLayoutEdit #mobileResetLayoutBtn{ display:flex; }

  /* ---------- alça de redimensionar não existe no mobile: o
     console vira gaveta de altura fixa controlada por classe ---------- */
  #resizeHandle{ display:none; }

  #consolePanel{
    position:fixed; left:0; right:0; bottom:0; z-index:15;
    height:48vh !important; min-height:48vh;
    border-radius:0;
    border-style:solid;border-width:2px;
    border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
    transform:translateY(100%);
    transition:transform .22s ease;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  #consolePanel.open{ transform:translateY(0); }

  /* ---------- coluna de personagem/equipamento vira gaveta ---------- */
  #rightCol{
    position:fixed; top:0; right:0; bottom:0; z-index:20;
    width:min(280px, 82vw); flex:none;
    background-color:var(--chrome);
    background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
    border-left:2px solid var(--chrome-darker);
    padding:10px; padding-top:calc(10px + env(safe-area-inset-top, 0px));
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .22s ease;
  }
  #rightCol.open{ transform:translateX(0); }

  /* as abas dos painéis (Personagem/Equipamento/Skills/Party/VIP) já
     funcionam em QUALQUER tamanho de tela agora (ver regra geral perto
     de #rightPanels/.panel, fora de media query) — aqui no mobile só
     resta a gaveta deslizante em si (#rightCol/#rightColBackdrop). */

  #rightColBackdrop{
    display:block;
    position:fixed; inset:0; z-index:19;
    background:rgba(0,0,0,0);
    pointer-events:none;
    transition:background .22s ease;
  }
  #rightColBackdrop.show{
    background:rgba(0,0,0,0.5);
    pointer-events:auto;
  }
  /* mesmo tratamento, atrás do console/chat (z-index 15) em vez da gaveta
     de personagem (z-index 20) — ver #consolePanel acima. */
  #consolePanelBackdrop{
    display:block;
    position:fixed; inset:0; z-index:14;
    background:rgba(0,0,0,0);
    pointer-events:none;
    transition:background .22s ease;
  }
  #consolePanelBackdrop.show{
    background:rgba(0,0,0,0.5);
    pointer-events:auto;
  }

  /* ---------- alvos de toque maiores em telas pequenas ---------- */
  .eqSlot{ width:60px; height:60px; }
  .invRow{ padding:10px 12px; }
  .invRow .ic{ font-size:26px; }
  .iconBtn{ padding:8px 0; }

  /* ---------- tela inicial cabe em telas pequenas ---------- */
  /* max-width IGUAL ao desktop agora (era 600px) — BUG REAL corrigido
     aqui (relatado repetidas vezes, mesmo já tendo aumentado a largura
     dos filhos: "ainda está cortando", "aumenta a largura da tela pra
     acomodar"): esta faixa (max-width:900px OU pointer:coarse) também
     vale pra notebook/desktop com TELA DE TOQUE numa janela BEM larga —
     o `mobile` aqui não significa "tela pequena", só "tem toque ou é
     estreita". Um 600px fixo espremia esse caso sem necessidade nenhuma
     (o problema nunca era largura de tela disponível, era esse teto). O
     próprio width:98vw já protege telefone de verdade (98vw de uma tela
     de 400px continua só 392px, o max-width nem chega a valer) — o
     max-width só existia pra não ficar gigante numa tela LARGA, então
     pode ser o mesmo teto do desktop sem problema nenhum. */
  #startPanel{ padding:8px 14px; max-width:min(98vw, 820px); max-height:92dvh; }
  #startOverlay h1{ font-size:18px; }
  #startBtn{ padding:4px 14px; font-size:10px; }
  #mapImportRow{ flex-wrap:wrap; justify-content:center; }

  /* ---------- tela de entrada redesenhada, versão mobile — mesma meta de
     sempre (nunca precisar de rolagem numa janela baixa/estreita, ver
     histórico: "tem barra de rolagem... botões enormes... deslocado pra
     cima"), agora aplicada à nova hierarquia (botão primário + fileira
     secundária) em vez dos 3 ladrilhos antigos. */
  #entryPrimaryBtn{ padding:11px 16px; gap:10px; }
  #entryPrimaryBtn .epIconBox{ width:34px; height:34px; }
  #entryPrimaryBtn .epLabel{ font-size:15px; }
  #entryPrimaryBtn .epDesc{ display:none; }
  #entrySecondaryRow{ gap:8px; }
  .entrySecondaryBtn{ padding:8px 8px; }
}

/* telas mobile de ALTURA baixa (pedido explícito: "quando a altura da
   tela é pequena, os botões... ficam muito grandes" — não dá pra ver o
   equipamento/skills inteiros sem rolar) — encolhe barra de ícones (4 por
   linha em vez de 3, pra gastar menos linhas), slots de equipamento e
   linhas de skill, tudo junto, pra caber tudo sem precisar de barra de
   rolagem vertical no painel de personagem. Só telas de toque (pointer:
   coarse, mesmo critério do bloco de largura acima) — uma janela de
   desktop baixa não precisa desse tratamento. Vem DEPOIS do bloco de
   largura acima de propósito: mesma especificidade CSS, quem vem por
   último no arquivo vence — sem isso as regras de toque maior (.eqSlot
   60px, .iconBtn padding:12px) ficariam por cima destas. */
@media (max-height: 780px) and (pointer: coarse){
  #iconRow{ grid-template-columns:repeat(4, 1fr); gap:4px; }
  .iconBtn{ padding:6px 0; font-size:15px; }
  .iconBtn .iconLbl{ font-size:8px; margin-top:1px; }

  #doll{ grid-template-columns:44px 44px 44px; grid-template-rows:44px 44px 44px 44px; gap:5px; }
  .eqSlot{ width:44px; height:44px; font-size:16px; }
  .eqSlot .lbl{ font-size:7px; bottom:2px; }

  #skillsPanel{ padding:6px; }
  /* linhas de skill são estilo INLINE (ver updateHud em ui/hud.js) —
     precisa de !important pra vencer o cssText já aplicado no elemento. */
  .skillRow{ margin-bottom:4px !important; gap:2px !important; }
  .skillLabelRow{ font-size:11px !important; }
  .skillBar{ height:6px !important; }

  /* aba PERSONAGEM (nome/vocação/HP-MP/level/CAP/postura de combate) —
     mesmo tratamento. #charNameRow/#charVocationRow são estilo INLINE no
     HTML (index.html), por isso !important. .barRow/.barTrack/.barText
     são reaproveitados pela barra de HUD do topo também (#topHpFill etc,
     ver index.html linhas ~89-116) — escopadas com "#charPanel " na
     frente de propósito, pra não encolher a barra do topo junto. */
  #charPanel .panelBody{ padding:6px; }
  #charNameRow{ font-size:11px !important; margin-bottom:1px !important; }
  #charVocationRow{ font-size:9px !important; margin-bottom:4px !important; }
  #charPanel .barRow{ gap:6px; margin-bottom:3px; }
  #charPanel .barTrack{ height:11px; }
  #charPanel .barText{ font-size:9px; }
  #levelBox{ font-size:9px; margin-top:1px; }
  #xpTrack{ height:4px; margin-top:2px; }
  #capRow{ margin-top:4px; padding-top:3px; font-size:11px; }
  #soulRow{ margin-top:4px; padding:2px 5px; font-size:11px; }
  #soulTimer{ font-size:9.5px; }
  #fightModeLabel{ margin-top:4px; padding-top:3px; font-size:9px; }
  #fightModeRow{ gap:3px; margin-top:2px; }
  .fightModeBtn{ padding:3px 0; }
  .fightModeBtn img{ width:18px; height:18px; }
  .fightModeBtn .iconLbl{ font-size:7px; margin-top:1px; }
  #fightModeDesc{ margin-top:2px; font-size:10px; min-height:0; }
}

/* telas muito baixas (celular em paisagem) — reduz ainda mais a
   altura reservada à gaveta do console para não engolir o jogo */
@media (max-height: 420px) and (pointer: coarse){
  #consolePanel{ height:60vh !important; }
}

/* faixa "Running in emulator mode..." — o próprio SDK do Firebase injeta
   ela sozinha (ver connectAuthEmulator em js/firebase.js) sempre que
   conecta no emulador local; a gente não escreve esse elemento, só
   esconde. Pedido explícito pra tirar de vez (antes só reposicionava pro
   topo, pra não cobrir o chat). !important necessário: o SDK aplica
   estilo inline no próprio elemento, que tem prioridade maior que uma
   regra normal daqui. Nunca aparece fora do ambiente local (só existe
   quando conectado no emulador), então isso não tem efeito nenhum em
   produção. */
#firebase-emulator-warning, .firebase-emulator-warning {
  display: none !important;
}
.iconMove{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22m256%2034.47-90.51%2090.51h67.883v108.393H124.98V165.49L34.47%20256l90.51%2090.51v-67.883h108.393V387.02H165.49L256%20477.53l90.51-90.51h-67.883V278.627H387.02v67.883L477.53%20256l-90.51-90.51v67.883H278.627V124.98h67.883L256%2034.47z%22%2F%3E%3C%2Fsvg%3E"); }
/* olho aberto/fechado (esconder controles touch) — desenho por CONTORNO
   (stroke), não preenchimento sólido como o resto do set: um olho cheio
   vira só uma mancha ilegível num ícone pequeno, contorno é o jeito
   universal de desenhar isso (mesmo em sets tipo Feather/Lucide). Fechado
   = mesmo olho + risco diagonal por cima, ícone padrão de "ocultar". */
.iconEyeOpen{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23e8e8e4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M1%2012s4-8%2011-8%2011%208%2011%208-4%208-11%208-11-8-11-8z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20fill%3D%22%23e8e8e4%22%2F%3E%3C%2Fsvg%3E"); }
.iconEyeClosed{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23e8e8e4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M1%2012s4-8%2011-8%2011%208%2011%208-4%208-11%208-11-8-11-8z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20fill%3D%22%23e8e8e4%22%2F%3E%3Cline%20x1%3D%222%22%20y1%3D%222%22%20x2%3D%2222%22%20y2%3D%2222%22%20stroke%3D%22%23e8e8e4%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
/* 4 cantos abrindo — ícone universal de "tela cheia", mesmo desenho por
   contorno dos dois de olho acima (consistência de traço). */
.iconFullscreen{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23e8e8e4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M3%209V4h5M21%209V4h-5M3%2015v5h5M21%2015v5h-5%22%2F%3E%3C%2Fsvg%3E"); }
/* telefone — ícone de Suporte (pedido explícito: a boia de salvamento
   "não tem nada a ver com suporte"; antes daquela era "?" num círculo, e
   antes DAQUELE reusava .iconEnvelope, mas essa já é a cara do Inbox, ver
   account.js). Mesmo estilo de contorno dos ícones acima. */
.iconHelp{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23e8e8e4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.127.96.361%201.903.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.907.339%201.85.573%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E"); }
/* pisca o botão de Suporte quando tem resposta/status novo do admin pro
   ticket do jogador (ver watchMyTicketsForBadge, js/ui/support.js). */
@keyframes supportBtnBlink{ 0%,100%{ box-shadow:0 0 0 0 rgba(224,138,62,0.9);} 50%{ box-shadow:0 0 0 7px rgba(224,138,62,0);} }
.supportBtnBlink{ animation:supportBtnBlink 1.1s ease-out infinite; }
/* seta pra cima (ganhou) / pra baixo (gastou) — pedido explícito no
   Extrato: "muito ícone de gold repetido, coloque seta em vez disso, sem
   emoji". Mesma cor de sempre que o jogo já usa pra ganho/dano (ver
   floatText de cura/dano, js/creatures.js), só que como ícone real em
   vez de emoji. */
.iconArrowUp{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%2219%22%20x2%3D%2212%22%20y2%3D%225%22%20stroke%3D%22%238fe06a%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpolyline%20points%3D%225%2012%2012%205%2019%2012%22%20fill%3D%22none%22%20stroke%3D%22%238fe06a%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.iconArrowDown{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%225%22%20x2%3D%2212%22%20y2%3D%2219%22%20stroke%3D%22%23ff8a8a%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpolyline%20points%3D%225%2012%2012%2019%2019%2012%22%20fill%3D%22none%22%20stroke%3D%22%23ff8a8a%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
/* engrenagem simples (círculo + raios) — botão do painel de debug/teste,
   mesmo estilo de contorno dos ícones acima. */
.iconGear{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20fill%3D%22none%22%20stroke%3D%22%23e8e8e4%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23e8e8e4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20d%3D%22M12%202v3M12%2019v3M4.2%204.2l2.1%202.1M17.7%2017.7l2.1%202.1M2%2012h3M19%2012h3M4.2%2019.8l2.1-2.1M17.7%206.3l2.1-2.1%22%2F%3E%3C%2Fsvg%3E"); }
/* sinal de transmissão (pontinho + 2 arcos, tipo wifi) — botão do painel
   de "Transmitir/Assistir" (ver ui/castPanel.js), mesmo estilo de
   contorno dos ícones acima. */
.iconBroadcast{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2219%22%20r%3D%221.6%22%20fill%3D%22%23e8e8e4%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23e8e8e4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20d%3D%22M8.2%2015.2a5%205%200%200%201%207.6%200M4.6%2011.6a10.2%2010.2%200%200%201%2014.8%200%22%2F%3E%3C%2Fsvg%3E"); }
.iconGlobe{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M256%2032A224%20224%200%200%200%2032%20256a224%20224%200%200%200%20224%20224%20224%20224%200%200%200%20223.672-217.45c-15.468%204.148-.306.22-16.467%204.51-9.1-2.965-28.42%2010.264-29.197%2010.264-1.756%200-14.65-49.66-14.65-49.66L381.08%20208H368l-1.316%206.32%2030.2%2028.444-47.76%2020.718-35.466-49.162-5.24%202.328%2011.21%2036.3%2042.84%2023.177-42.84%2050.568%201.403%2035.82-31.276%2067.182-52.168-6.716-16-88.843-3.094-33.43-71.517-3.838-9.258-60.77%2032.314-35.827%2054.782-6.32%2040.034%2021.772%2036.93-9.72c-1.112-18.374.05-12.54-1.112-18.374l-19.666-.7-1.053-10.184-5.97-2.107-2.81%2012.64-9.48-.526-11.94-26.514-8.43%202.81%2010.185%2022.475-9.13%203.16-13.694-20.718-8.428-1.406-21.773%202.81-18.26%2023.177-18.613%201.406-1.405-34.064%2024.23-1.757%202.108-10.184-5.795-5.618-.174-3.69%2016.182-7.94%2011.56-2.944%2019.665-6.848%206.32-7.375%203.512%207.375%2022.474%202.81%208.78-9.13%205.97-24.582-6.673-2.81-11.238%2016.857-8.43-9.834-11.586%2014.75-14.4%202.458-.7-10.184%2011.236-23.88%2031.606-13.694%2043.894-3.16%203.864%2013.344s-4.916%2013.344-5.97%2013.695c-.138.045.428%201.754%201.464%204.565h31.195l14.047-11.59%2029.484-9.138A224%20224%200%200%200%20256%2032zM145.098%2069.465l6.144%201.053s1.756%208.076.352%2010.007c-1.405%201.932-10.885%207.903-10.885%207.903l-6.148-12.115%2010.536-6.848zm41.086%2011.588%208.252%2019.49%203.337%2016.68s-11.588%205.793-12.466%206.496c-.878.7-6.147-8.077-6.147-8.077l-1.93-17.91%202.81-15.1%206.144-1.58zm-12.116%2022.474v16.155l-10.007%203.86-2.107-7.724%2012.115-12.29zm189.104%20238.618-7.365%2061.798-16.164%203.166s4.868-50.492%207.326-53.3l16.202-11.665z%22%2F%3E%3C%2Fsvg%3E"); }
/* espadas cruzadas ("Crossed Swords", game-icons.net, por Lorc, CC BY
   3.0 — https://game-icons.net/1x1/lorc/crossed-swords.html) — botão de
   ataque/mirar do mobile (ver #touchJump em index.html, pedido explícito
   pra virar o botão de atacar: mesma função de Espaço no desktop, ver
   cycleNearestTarget em js/input.js). Mesma técnica de sempre (SVG real
   do site, nunca emoji, path colado direto). */
.iconAttack{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%232a2018%22%20d%3D%22M19.75%2014.438c59.538%20112.29%20142.51%20202.35%20232.28%20292.718l3.626%203.75.063-.062c21.827%2021.93%2044.04%2043.923%2066.405%2066.25-18.856%2014.813-38.974%2028.2-59.938%2040.312l28.532%2028.53%2068.717-68.717c42.337%2027.636%2076.286%2063.646%20104.094%20105.81l28.064-28.06c-42.47-27.493-79.74-60.206-106.03-103.876l68.936-68.938-28.53-28.53c-11.115%2021.853-24.413%2042.015-39.47%2060.593-43.852-43.8-86.462-85.842-130.125-125.47-.224-.203-.432-.422-.656-.625C183.624%20122.75%20108.515%2063.91%2019.75%2014.437zm471.875%200c-83.038%2046.28-154.122%20100.78-221.97%20161.156l22.814%2021.562%2056.81-56.812%2013.22%2013.187-56.438%2056.44%2024.594%2023.186c61.802-66.92%20117.6-136.92%20160.97-218.72zm-329.53%20125.906%20200.56%20200.53a402.965%20402.965%200%200%201-13.405%2013.032L148.875%20153.53l13.22-13.186zm-76.69%20113.28-28.5%2028.532%2068.907%2068.906c-26.29%2043.673-63.53%2076.414-106%20103.907l28.063%2028.06c27.807-42.164%2061.758-78.174%20104.094-105.81l68.718%2068.717%2028.53-28.53c-20.962-12.113-41.08-25.5-59.937-40.313%2017.865-17.83%2035.61-35.433%2053.157-52.97l-24.843-25.655-55.47%2055.467c-4.565-4.238-9.014-8.62-13.374-13.062l55.844-55.844-24.53-25.374c-18.28%2017.856-36.602%2036.06-55.158%2054.594-15.068-18.587-28.38-38.758-39.5-60.625z%22%2F%3E%3C%2Fsvg%3E"); }
/* versao clara (14/10): categoria EQUIPAMENTO no menu de hotkeys, igual os outros icones brancos */
.iconAttackClaro{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23e8e8e4%22%20d%3D%22M19.75%2014.438c59.538%20112.29%20142.51%20202.35%20232.28%20292.718l3.626%203.75.063-.062c21.827%2021.93%2044.04%2043.923%2066.405%2066.25-18.856%2014.813-38.974%2028.2-59.938%2040.312l28.532%2028.53%2068.717-68.717c42.337%2027.636%2076.286%2063.646%20104.094%20105.81l28.064-28.06c-42.47-27.493-79.74-60.206-106.03-103.876l68.936-68.938-28.53-28.53c-11.115%2021.853-24.413%2042.015-39.47%2060.593-43.852-43.8-86.462-85.842-130.125-125.47-.224-.203-.432-.422-.656-.625C183.624%20122.75%20108.515%2063.91%2019.75%2014.437zm471.875%200c-83.038%2046.28-154.122%20100.78-221.97%20161.156l22.814%2021.562%2056.81-56.812%2013.22%2013.187-56.438%2056.44%2024.594%2023.186c61.802-66.92%20117.6-136.92%20160.97-218.72zm-329.53%20125.906%20200.56%20200.53a402.965%20402.965%200%200%201-13.405%2013.032L148.875%20153.53l13.22-13.186zm-76.69%20113.28-28.5%2028.532%2068.907%2068.906c-26.29%2043.673-63.53%2076.414-106%20103.907l28.063%2028.06c27.807-42.164%2061.758-78.174%20104.094-105.81l68.718%2068.717%2028.53-28.53c-20.962-12.113-41.08-25.5-59.937-40.313%2017.865-17.83%2035.61-35.433%2053.157-52.97l-24.843-25.655-55.47%2055.467c-4.565-4.238-9.014-8.62-13.374-13.062l55.844-55.844-24.53-25.374c-18.28%2017.856-36.602%2036.06-55.158%2054.594-15.068-18.587-28.38-38.758-39.5-60.625z%22%2F%3E%3C%2Fsvg%3E"); }

/* ============================================================
   HUNT ANALYSER (ver js/huntAnalyser.js) — painel logo abaixo de
   #hudInfoWidget (nome da hunt/floor), `top` medido em JS. Mesmo acabamento
   dos modais do jogo: textura de granito (--hud-texture) sobre --chrome com
   borda em relevo, e "poços" escuros afundados pra cada bloco de números
   (mesma borda invertida dos cartões do Banker, ver sectionBox em
   ui/bank.js).
   ============================================================ */
/* PRIMEIROS PASSOS (ver js/ui/firstSteps.js) — PC: painel da coluna da direita, acima do BATTLE, mesma moldura e
   cabeçalho (.panelHeader) dele. Celular: a mesma caixa, pequena, abaixo das barras do topo. */
#firstStepsPanel{
  display:flex; flex-direction:column; flex:0 0 auto; margin-top:6px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  font-family:var(--font-body); color:var(--parchment); user-select:none;
}
#firstStepsPanel .panelHeader{ cursor:pointer; }
#firstStepsPanel .fsBody{ display:flex; flex-direction:column; gap:4px; padding:6px 8px; }
#firstStepsPanel .fsTask{ font-size:12px; line-height:1.3; }
#firstStepsPanel .fsProg{ color:var(--gold-bright); font-weight:bold; font-variant-numeric:tabular-nums; }
#firstStepsPanel .fsNote{ font-size:11px; color:var(--parchment-dim); }
#firstStepsPanel.fsMobile{
  position:absolute; left:50%; transform:translateX(-50%); z-index:6; width:min(300px, 92%); margin:0;
  box-shadow:0 4px 14px rgba(0,0,0,0.55); pointer-events:auto;
}
#firstStepsPanel.fsMobile .panelHeader{ padding:3px 8px; font-size:9px; }
#firstStepsPanel.fsMobile .fsBody{ padding:4px 6px; }
#firstStepsPanel.fsMobile .fsTask{ font-size:11px; }
#firstStepsPanel.fsMobile .fsNote{ font-size:10px; }
/* fechado: uma linha só — "MISSÃO 3/7  Mate 10 criaturas 6/10  XP x8 ▸" */
#firstStepsPanel .fsMiniHead{ display:flex; align-items:center; gap:8px; }
#firstStepsPanel .fsMiniHead .fsMiniTitle{ flex:0 0 auto; }
#firstStepsPanel .fsMiniHead .fsMinTask{ flex:1 1 0; min-width:0; font-family:var(--font-body); font-size:11px; color:var(--parchment); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#firstStepsPanel .fsMiniHead .fsMiniXp{ flex:0 0 auto; font-family:var(--font-body); font-size:11px; font-weight:bold; color:var(--gold-bright); }
#firstStepsPanel .fsMiniHead .panelCollapseBtn{ flex-shrink:0; margin-left:0; }
/* meta até o level 8 (19/10): barra fina com o texto por cima, também com o painel fechado */
#firstStepsPanel .fsMeta{ position:relative; height:16px; margin:2px 6px 5px; background:var(--well-bg-black, #111); border:1px solid var(--chrome-darker, #2a2a2a); overflow:hidden; }
#firstStepsPanel .fsMetaFill{ position:absolute; left:0; top:0; bottom:0; background:linear-gradient(#e0b84a, #a87a1c); }
#firstStepsPanel .fsMeta span{ position:relative; display:block; text-align:center; font-family:var(--font-body); font-size:10px; line-height:16px; color:#fff; text-shadow:0 1px 2px #000, 0 0 2px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 4px; }

#huntAnalyser{
  position:absolute; left:8px; top:120px; z-index:5;
  width:232px;
  display:flex; flex-direction:column; gap:5px;
  padding:6px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  box-shadow:0 4px 14px rgba(0,0,0,0.55);
  font-family:var(--font-body); color:var(--parchment);
  pointer-events:auto; user-select:none;
  /* max-height vem do JS no celular (pra não cobrir o joystick) — o resto rola por dentro */
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
  touch-action:pan-y; /* rola com o dedo no celular (ticket #321) — mover controles continua none (abaixo) */
}
#huntAnalyser > *{ flex-shrink:0; }
/* modo "mover controles" (celular, ver js/ui/touchLayout.js): o painel arrasta junto com joystick/hotkeys */
body.touchLayoutEdit #huntAnalyser{ outline:2px dashed var(--gold-bright); outline-offset:4px; touch-action:none; cursor:move; }
body.touchLayoutEdit #huntAnalyser *{ pointer-events:none; }
#huntAnalyser.haMin{ width:auto; padding:4px 8px; cursor:pointer; }
#huntAnalyser .haHead{ display:flex; align-items:center; gap:6px; }
#huntAnalyser .haTitle{ font-family:var(--font-heading); font-size:9px; font-weight:bold; letter-spacing:1px; color:var(--gold-bright); text-shadow:0 1px 0 #000; }
#huntAnalyser .haBadge{ font-family:var(--font-heading); font-size:8px; letter-spacing:0.5px; color:#1a1408; background:var(--gold); padding:1px 4px; }
#huntAnalyser .haBtns{ margin-left:auto; display:flex; gap:3px; }
#huntAnalyser .haBtn{
  width:18px; height:18px; padding:0; line-height:14px; font-size:11px; cursor:pointer;
  color:var(--parchment);
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
#huntAnalyser .haBtn:hover{ color:var(--gold-bright); }
#huntAnalyser .haBtn:active{ border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
#huntAnalyser .haBtn:focus-visible{ outline:1px solid var(--gold-bright); outline-offset:1px; }
#huntAnalyser .haWell{
  background:var(--well-bg-black);
  border-style:solid; border-width:2px; border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
  padding:4px 6px; display:flex; flex-direction:column; gap:2px;
}
#huntAnalyser .haRow{ display:flex; justify-content:space-between; align-items:baseline; gap:6px; font-size:10px; line-height:1.4; min-width:0; }
/* números em 2 colunas (Tempo|XP, XP/h|Mortes, Gold|Loot, Gasto|Saldo) — altura fixa, sem rolagem */
#huntAnalyser .haStats{ display:grid; grid-template-columns:1fr 1fr; column-gap:12px; row-gap:1px; }
#huntAnalyser .haStats .haDivider{ grid-column:1 / -1; }
#huntAnalyser .haKey{ color:var(--parchment-dim); white-space:nowrap; }
#huntAnalyser .haVal{ font-weight:bold; font-variant-numeric:tabular-nums; white-space:nowrap; }
#huntAnalyser .haGold{ color:var(--gold-bright); }
#huntAnalyser .haPos{ color:#8fd97a; }
#huntAnalyser .haNeg{ color:#e88a7a; }
#huntAnalyser .haDim{ color:var(--parchment-dim); font-weight:normal; font-style:italic; }
#huntAnalyser .haDivider{ height:1px; margin:2px 0; background:var(--chrome-darker); box-shadow:0 1px 0 rgba(255,255,255,0.06); }
#huntAnalyser .haSub{ font-family:var(--font-heading); font-size:8px; letter-spacing:0.8px; color:var(--parchment-dim); text-transform:uppercase; margin-bottom:2px; }
/* largura do painel comporta 6 ícones por linha (5 no celular) — ver perRow em huntAnalyser.js */
#huntAnalyser .haGrid{ display:grid; grid-template-columns:repeat(auto-fill, 28px); gap:3px; }
#huntAnalyser .haSubGap{ margin-top:4px; }
#huntAnalyser .haSlot{
  position:relative; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background:var(--slot-bg-filled); border:1px solid var(--chrome-darker);
}
#huntAnalyser .haQty{
  position:absolute; right:1px; bottom:0;
  font-family:var(--font-heading); font-size:8px; font-weight:bold; color:var(--gold-bright);
  text-shadow:1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
#huntAnalyser .haMore{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--parchment-dim); }
#huntAnalyser .haMore[data-ha]{ cursor:pointer; color:var(--gold-bright); border:1px solid var(--chrome-darker); font-size:10px; }
#huntAnalyser .haEmpty{ grid-column:1 / -1; font-size:10px; }
#huntAnalyser .haCompact{ display:flex; align-items:baseline; gap:5px; font-size:10.5px; white-space:nowrap; }
#huntAnalyser .haSep{ color:var(--parchment-dim); }
@media (max-width: 900px), (pointer: coarse){
  #huntAnalyser{ width:188px; }
}

/* ============================================================
   FALAS RÁPIDAS (ver js/quickCalls.js) — fileira de 8 botões no alto,
   centralizada logo abaixo da barra de XP (`top` vem do JS), e o botão
   redondo que abre/fecha (no PC embaixo do de suporte; no celular dentro
   de #mobileTopBar). Mesmo acabamento em relevo com textura do resto do HUD.
   ============================================================ */
#quickCallBar{
  position:absolute; left:50%; transform:translateX(-50%); top:60px; z-index:6;
  display:none; flex-wrap:wrap; justify-content:center; gap:4px;
  max-width:calc(100% - 24px);
  padding:4px;
  background:rgba(12,12,18,0.78);
  border:2px solid rgba(255,255,255,0.12);
  box-shadow:0 4px 12px rgba(0,0,0,0.5);
  pointer-events:auto;
}
#quickCallBar .qcBtn{
  min-width:34px; height:26px; padding:0 8px;
  font-family:var(--font-heading); font-size:10px; font-weight:bold; letter-spacing:0.3px;
  color:var(--parchment);
  text-shadow:1px 1px 0 #000;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  cursor:pointer; touch-action:manipulation;
}
#quickCallBar .qcBtn:hover{ filter:brightness(1.15); }
#quickCallBar .qcBtn:active{ border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
#quickCallBar .qcBtn:focus-visible{ outline:1px solid var(--gold-bright); outline-offset:1px; }
/* 2s de espera entre uma fala e outra — os botões apagam enquanto isso */
#quickCallBar.qcCooling .qcBtn{ opacity:0.45; cursor:default; }
#quickCallBtn{
  position:absolute; right:8px; top:100px; z-index:6;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
}
#quickCallBtn .gameIcon{ width:16px; height:16px; }
#quickCallBtn.qcActive, #mobileQuickCallBtn.qcActive{ border-color:var(--gold) var(--chrome-darker) var(--chrome-darker) var(--gold); box-shadow:0 0 6px rgba(232,207,122,0.45); }
@media (max-width: 900px), (pointer: coarse){
  #quickCallBtn{ display:none !important; }
  #quickCallBar .qcBtn{ height:30px; font-size:11px; }
}
/* celular: uma linha só, à esquerda da fileira de ícones de cima (posição vem do JS) */
#quickCallBar.qcMobile{ left:auto; transform:none; flex-wrap:nowrap; max-width:none; padding:3px; gap:3px; }
#quickCallBar.qcMobile .qcBtn{ height:38px; padding:0 7px; }

/* ✕ do chat em tela cheia (ver js/ui/chatPortrait.js) — só existe no celular em pé; fora dele fica escondido SEMPRE
   (a regra ficava só dentro do bloco de em pé e o ✕ aparecia solto no canto do chat no PC). */
#consoleCloseBtn{ display:none; }

/* ============================================================
   CELULAR EM PÉ
   Pedido explícito (24/09): "jogar na horizontal atrapalha mexer em outros apps". Mesma condição de
   isPortraitLayout() em js/canvas.js — mantenha as duas iguais. Vem no FIM do arquivo de propósito: mesma
   especificidade das regras de celular acima, quem vem por último vence.

     ┌───────────────────────────┐
     │ HP | MP / XP              │  barras do topo (--topHudH, medido em repositionTopHud, ui/hud.js)
     │     imagem do jogo        │  largura toda, 16:9 (56.25vw) — a MESMA área de mapa de deitado, só menor
     │ Coins/local     [☰][..]  │  fileira abaixo da imagem
     │ chat/sistema (fixo)       │  só em tela alta (≥700px); em tela baixa continua gaveta
     │ joystick      leque+atacar│  controles no rodapé, como sempre
     └───────────────────────────┘
   ============================================================ */
@media (orientation: portrait) and (max-width: 900px), (orientation: portrait) and (pointer: coarse){
  #rotateOverlay{ display:none !important; }
  /* telas de login/lista: #startOverlay tem 16px de margem, a caixa de 98vw passava da borda direita */
  #startPanel{ max-width:100% !important; box-sizing:border-box; }
  /* 07/10: a largura que o JS põe (min(720px, 98vw)) passava das margens de 16px do #startOverlay e o conteúdo da tela
     inicial ficava fora do centro — em pé o painel ocupa só o espaço entre as margens */
  #startPanel{ width:100% !important; }
  #tibiaClient{ padding:0; gap:0; }
  #clientMain{ gap:0; }
  #gameFrame{ flex:0 0 auto; min-height:0; border:none; }
  /* a faixa de cima (padding) é onde ficam as barras — elas saem de cima da imagem do jogo */
  #viewportArea{
    flex:0 0 auto; box-sizing:border-box;
    height:calc(var(--topHudH, 48px) + 56.25vw);
    padding-top:var(--topHudH, 48px);
    align-items:flex-start;
  }
  canvas#game{ width:100vw; height:56.25vw; }

  /* fileira logo abaixo da imagem: Coins + local à esquerda, botões à direita. position:fixed escapa do
     overflow:hidden de #viewportArea (fixed ignora o recorte do pai). !important vence o top inline de
     repositionTopHud (ui/hud.js), feito pro celular deitado. */
  #mobileTopBar{
    position:fixed; right:8px; left:auto;
    top:calc(var(--topHudH, 48px) + 56.25vw + 8px) !important;
  }
  #twobiaCoinsWidget{
    position:fixed; left:8px;
    top:calc(var(--topHudH, 48px) + 56.25vw + 8px) !important;
  }
  #hudInfoWidget{
    position:fixed; left:8px; max-width:calc(100vw - 16px);
    /* 17/10 (Lucas): a cidade/hunt sobe pra dentro da imagem do jogo, logo abaixo da barra de XP — a faixa que ela
       ocupava embaixo dos botões vai pro boneco de equipamento */
    top:calc(var(--topHudH, 48px) + 4px) !important;
    max-width:42vw;
  }
  /* "Primeiros passos" no canto DIREITO (a cidade agora fica no esquerdo, no mesmo alto — antes um cobria o outro) */
  #firstStepsPanel.fsMobile{ left:auto; right:6px; transform:none; width:54vw; top:calc(var(--topHudH, 48px) + 4px) !important; }
  /* sala do boss (Lucas 17/10): só o relógio, no canto de baixo à direita da imagem do jogo (o texto ficava por cima
     da cidade/HUD) */
  body #salaBossTempo{ top:auto !important; bottom:30px; left:auto; right:6px; transform:none; padding:2px 8px; font-size:14px; font-variant-numeric:tabular-nums; }
  body #salaBossTempo .sbTexto{ display:none; }
  /* "Entrando em ...": só sobre a imagem do jogo e embaixo, longe da cidade/missão/relógio que ficam em cima */
  #sceneLoadingOverlay{ top:var(--topHudH, 48px); align-items:flex-end; padding-bottom:12px; box-sizing:border-box; }
  #sceneLoadingOverlay .sceneLoadingBox{ flex-direction:row; gap:10px; padding:10px 16px; }
  #hudInfoWidget #locationLabel{ white-space:normal; } /* nome de hunt comprido quebra linha em vez de cortar */
  /* Hunt Analyser logo abaixo do nome da hunt (top vem do JS) — preso à tela, senão ficava cortado pela área do jogo */
  #huntAnalyser{ position:fixed; z-index:7; }
  /* falas rápidas: logo abaixo da fileira de ícones, largura toda, em até 2 linhas (top vem do JS, quickCalls.js) */
  #quickCallBar.qcPortrait{
    position:fixed; left:8px; right:8px; transform:none; max-width:none; z-index:8;
    flex-wrap:wrap; justify-content:center;
    background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  }
  #quickCallBar.qcPortrait .qcBtn{ height:38px; padding:0 10px; }

  /* CHAT: o painel do meio é só uma PRÉVIA (sem campo de digitar, pra caber mais linhas). Tocar numa aba ou nas
     mensagens abre em tela cheia (ver js/ui/chatPortrait.js). */
  body:not(.consoleExpanded) #chatInputRow, body:not(.consoleExpanded) #addWhisperRow{ display:none !important; }
  #consoleTabs{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  #consoleTabs::-webkit-scrollbar{ display:none; }
  #consoleTabs .consoleTab{ flex-shrink:0; }
  /* setas < > das abas que não cabem (js/ui/tabsSetas.js): presas nas pontas da fileira enquanto ela rola */
  #consoleTabs .tabSeta.on{ display:flex; }
  #consoleTabs .tabSeta{
    display:none; align-items:center; justify-content:center; flex:0 0 auto; position:sticky; z-index:2;
    min-width:30px; padding:0 8px; cursor:pointer;
    font-family:var(--font-heading); font-size:13px; color:var(--gold-bright);
    background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
    border-style:solid; border-width:1px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
    box-shadow:0 0 6px 2px rgba(0,0,0,0.6);
  }
  #consoleTabs .tabSetaEsq{ left:0; }
  #consoleTabs .tabSetaDir{ right:0; margin-left:auto; }
  body.consoleExpanded #consoleTabs .tabSetaDir{ right:52px; } /* não fica embaixo do ✕ da tela cheia */
  #consoleTabs .tabSeta.pisca{ animation:tabBlink 1s step-start infinite; }
  body.consoleExpanded #consolePanel{
    position:fixed; left:0; right:0;
    top:var(--vvTop, 0px) !important; bottom:auto !important;
    height:var(--vvh, 100dvh) !important; min-height:0;
    transform:none !important; transition:none;
    z-index:40;
    padding-top:env(safe-area-inset-top, 0px);
    border-style:solid; border-width:2px;
  }
  body.consoleExpanded #consolePanelBackdrop{ display:none !important; }
  body.consoleExpanded #consoleTabs{ padding-right:52px; }
  /* campo de digitar no TOPO (logo abaixo das abas): o teclado sobe por baixo e nunca cobre o que está sendo escrito
     (ver syncTyping em js/ui/chatPortrait.js) */
  body.consoleExpanded #consolePanel > *{ order:3; }
  body.consoleExpanded #consoleTabs{ order:0; }
  body.consoleExpanded #addWhisperRow{ order:1; }
  body.consoleExpanded #chatInputRow{ order:2; }
  /* 16px: abaixo disso o iPhone dá zoom sozinho no campo ao tocar */
  body.consoleExpanded #chatInput, body.consoleExpanded #addWhisperInput{ font-size:16px; }
  /* digitando: só a parte de cima da tela, a que o teclado não alcança */
  body.consoleExpanded.chatTyping #consolePanel{ height:var(--typingH, 45vh) !important; }
  body.consoleExpanded #consoleCloseBtn{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:calc(4px + env(safe-area-inset-top, 0px)); right:6px; z-index:2;
    width:38px; height:32px; cursor:pointer;
    font-family:var(--font-heading); font-size:15px; color:var(--parchment);
    background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
    border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  }
}

/* tela alta (a maioria dos celulares em pé): o chat/sistema fica FIXO entre a fileira de botões e os controles,
   sempre à vista — não precisa abrir gaveta. 280px de baixo = alcance do leque de magias + botões de olho/tela cheia
   (ver #touchActions/#touchVisibilityToggle acima). */
@media (orientation: portrait) and (min-height: 700px) and (max-width: 900px), (orientation: portrait) and (min-height: 700px) and (pointer: coarse){
  #consolePanel{
    top:calc(var(--topHudH, 48px) + 56.25vw + 46px);
    bottom:calc(280px + env(safe-area-inset-bottom, 0px));
    height:auto !important; min-height:0;
    transform:none !important; transition:none;
    z-index:4;
    border-left:none; border-right:none;
  }
  #consolePanelBackdrop{ display:none !important; }

  /* 17/10 (Lucas): no lugar das mensagens fica o boneco de equipamento (js/ui/mobileEquip.js); do chat sobram só as
     abas, que viram botões (tocar abre o chat em tela cheia) */
  /* aba Equipamentos marcada (body.equipMode): do painel do chat sobram só as abas; outra aba = as mensagens de volta */
  body.equipNoChat.equipMode:not(.consoleExpanded) #consolePanel{ bottom:auto !important; height:auto !important; }
  body.equipNoChat.equipMode:not(.consoleExpanded) #consolePanel > :not(#consoleTabs){ display:none !important; }
  /* aba Equipamentos com cara de aba ativa; a aba do chat que estava ativa fica com cara de normal */
  body.equipNoChat.equipMode #equipTab{ background-color:var(--well-bg-black); border-color:var(--chrome-darker) var(--chrome-dark) var(--chrome-darker) var(--chrome-darker); }
  body.equipNoChat.equipMode #consoleTabs .consoleTab.active:not(#equipTab){ background-color:var(--chrome-light); border-color:var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light); }
  #equipTab{ display:none; }
  body.equipNoChat #equipTab{ display:inline-block; }
  body.equipNoChat:not(.equipMode) #mobileEquipDock{ display:none !important; }
  body.equipNoChat.equipMode #mobileEquipDock{
    display:flex; justify-content:center; align-items:flex-start; gap:6px;
    position:fixed; left:0; right:0; z-index:4; overflow-y:auto; padding:6px 6px 0; box-sizing:border-box;
    top:calc(var(--topHudH, 48px) + 56.25vw + 46px + 34px);
    bottom:calc(280px + env(safe-area-inset-bottom, 0px));
  }
  /* metade esquerda: boneco + coluna (diária, Prey, CAP, Soul); metade direita: skills compactas, sem rolagem */
  #mobileEquipDock #dollRow{ flex:1 1 50%; min-width:0; margin:0; gap:4px; }
  #mobileEquipDock #dollRow .dollSide{ flex:0 0 46px; gap:4px; }
  #mobileEquipDock #dollRow .sideBtn{ width:34px; height:34px; }
  #mobileEquipDock #dollRow .sideBtn img{ max-width:22px; max-height:22px; }
  #mobileEquipDock #doll{ grid-template-columns:40px 40px 40px; grid-template-rows:40px 40px 40px 40px; gap:4px; margin:0; }
  #mobileEquipDock .eqSlot{ width:40px; height:40px; font-size:15px; }
  #mobileEquipDock .eqSlot img{ max-width:34px; max-height:34px; }
  /* menu (⋮) em tela única: o painel do personagem (sem o boneco, que está embaixo do jogo) só do tamanho do conteúdo */
  body.equipNoChat #charPanel.activeRightPanel{ flex:0 0 auto; margin-bottom:6px; }
  #mobileEquipDock #skillsPanel{ flex:1 1 50%; min-width:0; margin:0; padding:4px 6px; box-sizing:border-box; }
  #mobileEquipDock #skillsPanel .skillRow{ gap:1px !important; margin-bottom:3px !important; }
  #mobileEquipDock #skillsPanel .skillLabelRow{ font-size:11px !important; line-height:1.15; }
  #mobileEquipDock #skillsPanel .skillBar{ height:4px !important; }
  #mobileEquipDock .eqSlot .lbl{ font-size:8px; }
  /* última mensagem do chat na borda de baixo da imagem do jogo — some sozinha depois de 8s */
  body.equipNoChat #ultimaMsgChat{
    display:block; position:fixed; left:0; right:0; z-index:6;
    top:calc(var(--topHudH, 48px) + 56.25vw - 24px); height:24px; line-height:20px; box-sizing:border-box;
    padding:2px 10px; background:rgba(0,0,0,0.6); color:var(--parchment); font-family:var(--font-body); font-size:13px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    opacity:0; pointer-events:none; transition:opacity .3s;
  }
  body.equipNoChat #ultimaMsgChat.on{ opacity:1; pointer-events:auto; }
}
#mobileEquipDock, #ultimaMsgChat, #consoleTabs .tabSeta{ display:none; }

/* ===== BATTLE LIST (ver js/ui/battleList.js) ===== */
#battleList{
  display:flex; flex-direction:column; min-height:0;
  background-color:var(--chrome);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  border-style:solid;border-width:2px;
  border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  /* PC: faixa entre os painéis e os botões da coluna direita — cresce com a altura da tela (720p: ~110px, 2-3
     bichos; 1080p: 180px) pra não espremer o painel do personagem em tela baixa */
  /* 07/10 (Lucas: "só dá pra ver 2 linhas"): no mínimo 3 criaturas à vista (cabeçalho + postura + filtro + 3 linhas);
     o resto rola dentro da lista */
  flex:0 0 auto; height:clamp(172px, calc(100vh - 520px), 240px); margin-top:6px;
}
#battleList .blHeader{
  font-family:var(--font-heading);font-size:10px;color:var(--parchment);
  background-color:var(--chrome-light);
  background-image:var(--hud-texture);background-repeat:repeat;background-blend-mode:multiply;
  padding:4px 8px; border-bottom:1px solid var(--chrome-dark);
}
/* postura + seguir/parado no topo da lista (ver battleList.js) — só os ícones, compactos, numa fileira */
#battleList .blModes{ display:flex; align-items:center; gap:3px; padding:3px 4px; border-bottom:1px solid var(--chrome-dark); flex-shrink:0; }
#battleList .blModes #fightModeRow, #battleList .blModes #chaseModeRow{ display:flex; gap:3px; margin:0; }
#battleList .blModes #chaseModeRow{ margin-left:auto; }
#battleList .blModes .fightModeBtn{ flex:0 0 auto; padding:2px 4px; }
#battleList .blModes .fightModeBtn .iconLbl{ display:none; }
#battleList .blModes .fightModeBtn img, #battleList .blModes .chaseModeBtn svg{ width:18px; height:18px; }
#battleList.blMobile .blModes{ padding:2px 3px; gap:2px; }
#battleList.blMobile .blModes .fightModeBtn{ padding:2px 2px; }
#battleList.blMobile.blMin .blModes{ display:none; }
#battleList .blList{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:4px; display:flex; flex-direction:column; gap:3px; }
#battleList .blList::-webkit-scrollbar{width:6px;}
#battleList .blList::-webkit-scrollbar-thumb{background:var(--chrome-dark);}
#battleList .blRow{
  display:flex; flex-direction:column; gap:2px; padding:3px 5px; cursor:pointer;
  background:var(--slot-bg, #1a1310); border:2px solid var(--panel-border);
}
#battleList .blRow.blTarget{ border-color:#d23a3a; }
/* aliados (07/10): alvo de cura com borda verde; filtro Monstros/Aliados */
#battleList .blRow.blHeal{ border-color:#4fbf4f; }
#battleList .blSection{ font-family:var(--font-heading); font-size:8px; letter-spacing:0.8px; color:var(--parchment-dim); text-transform:uppercase; padding:2px 2px 0; }
#battleList .blFilter{ display:flex; gap:3px; padding:0 0 3px; }
#battleList .blFilterBtn{
  flex:1; padding:2px 4px; font-family:var(--font-heading); font-size:9px; cursor:pointer; color:var(--parchment-dim);
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:1px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
/* PC: filtro dentro do título (ver render em battleList.js) */
#battleList:not(.blMobile) .blHeader{ display:flex; align-items:center; gap:8px; padding:3px 4px 3px 8px; }
#battleList:not(.blMobile) .blHeader .blFilter{ margin-left:auto; padding:0; }
#battleList:not(.blMobile) .blHeader .blFilterBtn{ flex:0 0 auto; padding:1px 6px; font-size:8px; }
#battleList .blFilterBtn.on{ color:var(--gold-bright); border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
#battleList .blName{ font-family:var(--font-body); font-size:12px; color:var(--parchment); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#battleList .blBar{ height:4px; background:#111; }
#battleList .blBar > div{ height:100%; }
#battleList .blEmpty{ font-family:var(--font-body); font-size:11px; color:var(--parchment-dim); padding:4px; }

/* celular: igual o Hunt Analyser (ver #huntAnalyser) — abaixo dele, minimizável, arrastável em "mover controles" */
#battleList.blMobile{
  position:absolute; left:8px; top:170px; z-index:5; pointer-events:auto; user-select:none;
  width:150px; height:auto; max-height:40vh; margin:0; flex:none;
  box-shadow:0 4px 14px rgba(0,0,0,0.55);
}
#battleList.blMobile .blHeader{ display:flex; justify-content:space-between; align-items:center; gap:6px; cursor:pointer; }
#battleList.blMobile .blToggle{ color:var(--parchment-dim); }
#battleList.blMobile.blMin{ width:auto; }
#battleList.blMobile .blRow{ padding:2px 5px; }
#battleList.blMobile .blName{ font-size:11px; }
#battleList.blMobile .blHeader{ padding:3px 8px; font-size:9px; }
body.touchLayoutEdit #battleList.blMobile{ outline:2px dashed var(--gold-bright); outline-offset:4px; touch-action:none; cursor:move; }
body.touchLayoutEdit #battleList.blMobile *{ pointer-events:none; }
/* celular em pé: preso à tela, igual o Hunt Analyser */
@media (orientation: portrait) and (max-width: 900px), (orientation: portrait) and (pointer: coarse){
  #battleList.blMobile{ position:fixed; z-index:7; max-height:30vh; }
}

/* ===== PAINEL DA PARTY (ver js/ui/party.js) — mesmo acabamento do resto do jogo: poço escuro afundado, texto na
   fonte do corpo, rótulo pequeno em caixa alta, botões chrome ===== */
#partyPanel{ display:flex; flex-direction:column; gap:6px; }
#partyPanel .ptLabel{ font-family:var(--font-heading); font-size:9px; letter-spacing:1px; color:var(--parchment-dim); text-transform:uppercase; margin-top:4px; }
#partyPanel .ptWell{
  background:var(--slot-bg, #1a1310); padding:6px 8px;
  border-style:solid; border-width:2px; border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
}
#partyPanel .ptList{ display:flex; flex-direction:column; gap:0; padding:2px 8px; }
#partyPanel .ptMember{ display:flex; align-items:center; gap:8px; padding:5px 0; }
#partyPanel .ptMember + .ptMember{ border-top:1px solid var(--chrome-darker); }
#partyPanel .ptMemberMain{ flex:1; min-width:0; }
#partyPanel .ptName{ font-family:var(--font-body); font-size:14px; color:var(--parchment); }
#partyPanel .ptLeader{ font-family:var(--font-body); font-size:11px; color:var(--gold-bright); margin-left:6px; }
#partyPanel .ptSub{ font-family:var(--font-body); font-size:12px; color:var(--parchment-dim); }
#partyPanel .ptShare{ font-family:var(--font-body); font-size:14px; font-weight:bold; }
#partyPanel .ptOk{ color:#8fd97a; }
#partyPanel .ptNo{ color:#e88a7a; }
#partyPanel .ptStatus{ font-family:var(--font-body); font-size:13px; font-weight:bold; margin-bottom:3px; }
#partyPanel .ptText{ font-family:var(--font-body); font-size:13px; color:var(--parchment); line-height:1.35; }
#partyPanel .ptDim{ color:var(--parchment-dim); }
#partyPanel .ptCenter{ text-align:center; }
#partyPanel .ptEmpty{ font-size:14px; }
#partyPanel .ptBtnRow{ display:flex; gap:6px; margin-top:6px; }
#partyPanel .ptBtnRow .ptBtn{ flex:1; }
#partyPanel .ptBtn{
  font-family:var(--font-heading); font-size:10px; color:var(--parchment); cursor:pointer; padding:7px 8px; width:100%;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
#partyPanel .ptBtn:active{ border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
#partyPanel .ptBtn:disabled{ opacity:.6; cursor:default; }
#partyPanel .ptDanger{ color:#e88a7a; margin-top:4px; }
#partyPanel .ptInviteArea{ display:flex; flex-direction:column; gap:4px; margin-top:4px; }
#partyPanel .ptInviteBtn{ text-align:left; }

/* ===== TREINO OFFLINE (ver js/ui/offlineTraining.js) — mesmo acabamento dos modais do jogo ===== */
#offlineTrainingOverlay{ position:absolute; inset:0; z-index:55; display:none; align-items:center; justify-content:center; background:rgba(5,4,3,0.7); padding:16px; }
#offlineTrainingOverlay .otBox{
  width:320px; max-width:100%; max-height:90%; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:16px 18px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
}
#offlineTrainingOverlay .otTitle{ font-family:var(--font-heading); font-size:12px; color:var(--gold-bright); text-align:center; }
#offlineTrainingOverlay .otText{ font-family:var(--font-body); font-size:14px; color:var(--parchment); line-height:1.35; }
#offlineTrainingOverlay .otList{ display:flex; flex-direction:column; gap:6px; }
#offlineTrainingOverlay .otResult{ display:flex; flex-direction:column; gap:4px; font-family:var(--font-body); font-size:14px; color:var(--parchment);
  background:var(--slot-bg, #1a1310); border-style:solid; border-width:2px; border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); padding:8px 10px; }
#offlineTrainingOverlay .otAdvance{ color:var(--gold-bright); }
#offlineTrainingOverlay .otBtn{
  font-family:var(--font-heading); font-size:10px; color:var(--parchment); cursor:pointer; padding:9px 10px; width:100%;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
#offlineTrainingOverlay .otBtn:active{ border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
#offlineTrainingOverlay .otOption{ text-align:left; }
#offlineTrainingOverlay .otCancel{ color:var(--parchment-dim); }
#offlineTrainingOverlay .otHead{ display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:2px solid var(--panel-border); padding-bottom:8px; }
#offlineTrainingOverlay .otHead .otTitle{ text-align:left; }
#offlineTrainingOverlay .otClose{
  cursor:pointer; flex-shrink:0; color:var(--parchment); padding:5px 8px; font-family:var(--font-heading); font-size:9px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
#offlineTrainingOverlay .otWarn{ font-size:13px; color:#e8c872; }
#offlineTrainingOverlay .otOption{ display:flex; align-items:center; gap:10px; padding:6px 10px; }
#offlineTrainingOverlay .otIcons{ display:flex; align-items:center; gap:2px; flex-shrink:0; }
#offlineTrainingOverlay .otPlus{ font-family:var(--font-body); font-size:14px; color:var(--parchment-dim); }
#offlineTrainingOverlay .otLabel{ font-family:var(--font-body); font-size:13px; color:var(--parchment); }
#offlineTrainingOverlay .otPool{ display:flex; flex-direction:column; gap:4px; }
#offlineTrainingOverlay .otPoolLabel{ font-family:var(--font-heading); font-size:9px; letter-spacing:1px; color:var(--parchment-dim); text-transform:uppercase; }
#offlineTrainingOverlay .otPoolTrack{ flex:none; height:18px; }
#offlineTrainingOverlay .otPoolFill{ background:#2f9a3a; }
#offlineTrainingOverlay .otPoolTrack .barText{ font-family:var(--font-body); font-size:12px; }
#offlineTrainingOverlay .otPoolInfo{ font-size:12px; color:var(--parchment-dim); }

/* hotkeys no celular por cima do chat e dos botões (pedido 29/09: ao mover as hotkeys pra cima do chat elas ficavam por
   baixo, enquanto o direcional ficava por cima) — mesma camada dos controles de toque que ficam na frente */
@media (max-width: 900px), (pointer: coarse){
  /* #spellbar é item de flex (dentro de #gameFrame): o z-index:3 dele vale mesmo "static" e prendia as hotkeys (filhas)
     na camada 3, abaixo do chat (4). No celular ele é só um contêiner vazio — solta a camada. */
  #spellbar{ z-index:auto !important; }
  #hotkeyRow{ z-index:16 !important; }
}
/* modo "mover controles": os 3 botões redondos também arrastam (juntos) — ver initRoundButtons em ui/touchLayout.js */
body.touchLayoutEdit #touchVisibilityToggle,
body.touchLayoutEdit #touchFullscreenToggle,
body.touchLayoutEdit #touchFullscreenBtn{ outline:2px dashed var(--gold-bright); outline-offset:3px; touch-action:none; cursor:move; }

/* ===== CAÇADOR (tasks do modo 8.6, ver js/ui/cacador86.js) — mesmo acabamento do treino offline ===== */
/* ===== TÍTULOS (ver js/ui/titulos.js) — 08/10, refeito no padrão das janelas do jogo (Lucas: "aspecto de IA, muitas
   cores, painel mudando de tamanho"): chrome + poço escuro, texto pergaminho, dourado só no que é destaque, TAMANHO
   FIXO (a lista rola por dentro), linhas iguais às do Caçador. A cor da raridade fica só no título desenhado no mapa. */
/* título e Meus Best Hits LADO A LADO (23/10, Lucas: a aba Personagem rolava com uma linha embaixo da outra) */
#charLinhasRow{ display:flex; gap:4px; margin:-4px 0 6px; }
#charLinhasRow > button{ flex:1 1 0; min-width:0; margin:0 !important; }
#charLinhasRow .ctVazio, #charLinhasRow .ctTitulo{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* "Meus Best Hits" (20/10): a mesma linha do título, logo embaixo dela (ver ui/meusBestHits.js) */
#charBestHitsRow{
  display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; margin:-4px 0 8px; padding:3px 6px;
  font-family:var(--font-body); font-size:11px; cursor:pointer; text-align:left;
  background:var(--well-bg-black); border:1px solid var(--chrome-darker); color:var(--parchment-dim);
}
#charBestHitsRow:hover{ border-color:var(--chrome-light); }
#charBestHitsRow:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:1px; }
#charBestHitsRow .ctVazio{ color:var(--parchment-dim); }
#charBestHitsRow .ctSeta{ color:var(--parchment-dim); font-size:14px; line-height:1; }
/* janela "Meus Best Hits": a caixa, o topo e os botões são os da janela de Títulos */
#bestHitsOverlay{ position:absolute; inset:0; z-index:55; display:none; align-items:center; justify-content:center; background:rgba(5,4,3,0.7); padding:12px; }
#bestHitsOverlay .tiBox{
  width:560px; max-width:100%; height:min(540px, 100%); display:flex; flex-direction:column; gap:8px; padding:14px 16px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  box-shadow:0 20px 60px rgba(0,0,0,0.7); box-sizing:border-box;
}
#bestHitsOverlay .tiHead{ flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:2px solid var(--panel-border); padding-bottom:8px; }
#bestHitsOverlay .tiTitle{ font-family:var(--font-heading); font-size:12px; color:var(--gold-bright); }
#bestHitsOverlay .tiHint{ font-family:var(--font-body); font-size:12px; color:var(--parchment-dim); padding:4px 2px; }
#bestHitsOverlay .tiBtn{
  font-family:var(--font-heading); font-size:9px; color:var(--parchment); cursor:pointer; padding:5px 8px; white-space:nowrap;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
#bestHitsOverlay .tiBtn:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:1px; }
#bestHitsOverlay .mbhCorpo{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:6px; padding-right:2px; }
#bestHitsOverlay .mbhGrupo{ font-family:var(--font-heading); font-size:10px; color:var(--gold-bright); margin-top:4px; }
/* lista (20/10): ícone · tipo · o meu · o do mundo — o olho (.mbhOlho) esconde a coluna do mundo (.mbhSemMundo) */
#bestHitsOverlay .mbhLinha{ display:grid; grid-template-columns:40px minmax(0,1fr) auto minmax(0,1.1fr); align-items:center; gap:8px; padding:4px 6px; background:var(--well-bg-black); border:1px solid var(--chrome-darker); }
#bestHitsOverlay .mbhSemMundo .mbhLinha{ grid-template-columns:40px minmax(0,1fr) auto; }
#bestHitsOverlay .mbhSemMundo .mbhMundo{ display:none; }
#bestHitsOverlay .mbhCabeca{ background:none; border:none; padding-top:0; padding-bottom:0; font-family:var(--font-heading); font-size:9px; color:var(--parchment-dim); }
#bestHitsOverlay .mbhCabeca .mbhMeu{ font-size:9px; color:var(--parchment-dim); }
#bestHitsOverlay .mbhPoco{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.08); }
#bestHitsOverlay .mbhPocoVazio{ height:0; background:none; border:none; }
#bestHitsOverlay .mbhPoco img{ image-rendering:pixelated; }
#bestHitsOverlay .mbhNomeCat{ min-width:0; font-family:var(--font-body); font-size:12px; color:var(--parchment); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#bestHitsOverlay .mbhMeu{ font-family:var(--font-heading); font-size:14px; color:var(--gold-bright); font-variant-numeric:tabular-nums; text-align:right; }
#bestHitsOverlay .mbhMundo{ min-width:0; display:flex; flex-direction:column; font-family:var(--font-body); font-size:11px; color:var(--parchment-dim); }
#bestHitsOverlay .mbhMundoV{ font-family:var(--font-heading); font-size:12px; color:var(--parchment); font-variant-numeric:tabular-nums; }
#bestHitsOverlay .mbhMundoQuem{ font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#bestHitsOverlay .mbhMundo.mbhEu{ color:var(--gold-bright); font-family:var(--font-heading); font-size:10px; }
#bestHitsOverlay .mbhOlho{ display:inline-flex; align-items:center; justify-content:center; width:28px; padding:0; margin-left:auto; margin-right:6px; }
#charTitleRow{
  display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; margin:-4px 0 8px; padding:3px 6px;
  font-family:var(--font-body); font-size:11px; cursor:pointer; text-align:left;
  background:var(--well-bg-black); border:1px solid var(--chrome-darker); color:var(--parchment-dim);
}
#charTitleRow:hover{ border-color:var(--chrome-light); }
#charTitleRow:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:1px; }
#charTitleRow .ctTitulo{ font-style:italic; font-weight:bold; color:var(--gold-bright); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#charTitleRow .ctVazio{ color:var(--parchment-dim); }
#charTitleRow .ctSeta{ color:var(--parchment-dim); font-size:14px; line-height:1; }

#titulosOverlay{ position:absolute; inset:0; z-index:55; display:none; align-items:center; justify-content:center; background:rgba(5,4,3,0.7); padding:12px; }
#titulosOverlay .tiBox{
  width:560px; max-width:100%; height:min(540px, 100%); display:flex; flex-direction:column; gap:8px; padding:14px 16px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  box-shadow:0 20px 60px rgba(0,0,0,0.7); box-sizing:border-box;
}
#titulosOverlay .tiHead{ flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:2px solid var(--panel-border); padding-bottom:8px; }
#titulosOverlay .tiTitle{ font-family:var(--font-heading); font-size:12px; color:var(--gold-bright); }
#titulosOverlay .tiHint{ font-family:var(--font-body); font-size:13px; color:var(--parchment-dim); padding:8px 2px; }

/* botões: o mesmo chrome de sempre */
#titulosOverlay .tiBtn{
  font-family:var(--font-heading); font-size:9px; color:var(--parchment); cursor:pointer; padding:6px 10px; white-space:nowrap;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
#titulosOverlay .tiBtn:hover:not(:disabled){ filter:brightness(1.15); }
#titulosOverlay .tiBtn:disabled{ opacity:.5; cursor:default; }
#titulosOverlay .tiBtn:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:1px; }
#titulosOverlay .tiBtn.tiBtnOn{ color:var(--gold-bright); }
#titulosOverlay .tiClose{ padding:5px 8px; }

/* topo: prévia + contagem */
#titulosOverlay .tiTopo{ flex:0 0 auto; display:flex; gap:8px; }
#titulosOverlay .tiPreview, #titulosOverlay .tiLado{
  background:var(--well-bg-black);
  border-style:solid; border-width:2px; border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
}
#titulosOverlay .tiPreview{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:8px; }
#titulosOverlay .tiPrevName{ font-family:Verdana, sans-serif; font-weight:bold; font-size:13px; color:#fff; text-shadow:1px 1px 0 #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
#titulosOverlay .tiPrevTitle{ font-family:Verdana, sans-serif; font-style:italic; font-weight:bold; font-size:11px; color:var(--gold-bright); text-shadow:1px 1px 0 #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
#titulosOverlay .tiPrevTitle.tiPrevVazio{ color:var(--parchment-dim); }
#titulosOverlay .tiLado{ flex:0 0 112px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px; }
#titulosOverlay .tiCount{ font-family:var(--font-heading); font-size:14px; color:var(--gold-bright); font-variant-numeric:tabular-nums; }
#titulosOverlay .tiCountLbl{ font-family:var(--font-body); font-size:10px; color:var(--parchment-dim); text-align:center; }

/* abas: uma linha só (rola de lado no celular, nunca muda a altura) */
#titulosOverlay .tiAbas{ flex:0 0 auto; display:flex; gap:4px; overflow-x:auto; overscroll-behavior:contain; scrollbar-width:none; }
#titulosOverlay .tiAbas::-webkit-scrollbar{ display:none; }
#titulosOverlay .tiAba{ flex:0 0 auto; padding:5px 9px; color:var(--parchment-dim); }
/* PC (não dá pra arrastar de lado com o mouse): as abas quebram em linhas — são sempre as mesmas, a altura não muda */
@media (min-width: 521px){ #titulosOverlay .tiAbas{ flex-wrap:wrap; overflow-x:visible; } }
#titulosOverlay .tiAba.tiAbaOn{ color:var(--gold-bright); border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }

/* lista: ocupa o resto da janela e rola por dentro */
#titulosOverlay .tiLista{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:4px; padding-right:2px; }
#titulosOverlay .tiLista::-webkit-scrollbar{ width:6px; }
#titulosOverlay .tiLista::-webkit-scrollbar-thumb{ background:var(--chrome-dark); }
#titulosOverlay .tiRow{
  flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:7px 8px; background:var(--slot-bg, #1a1310);
  border-style:solid; border-width:2px; border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
}
#titulosOverlay .tiRow.tiRowUso{ border-color:var(--gold); }
#titulosOverlay .tiInfo{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
#titulosOverlay .tiNome{ display:flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:13px; font-weight:bold; color:var(--gold-bright); }
#titulosOverlay .tiRowFalta .tiNome{ color:var(--parchment); }
#titulosOverlay .tiTag{ font-family:var(--font-heading); font-size:7.5px; letter-spacing:.6px; color:var(--gold-bright); border:1px solid var(--gold); padding:1px 4px; font-weight:normal; }
#titulosOverlay .tiMeta{ font-family:var(--font-body); font-size:10.5px; color:var(--parchment-dim); text-transform:uppercase; letter-spacing:.5px; }
#titulosOverlay .tiReq{ font-family:var(--font-body); font-size:12px; color:var(--parchment); line-height:1.3; }
#titulosOverlay .tiDono{ font-family:var(--font-body); font-size:11.5px; color:var(--parchment-dim); }
#titulosOverlay .ccBar{ max-width:240px; }
#titulosOverlay .tiAcoes{ flex:0 0 92px; display:flex; flex-direction:column; align-items:stretch; gap:4px; }
#titulosOverlay .tiAcoes .tiBtn{ text-align:center; }
#titulosOverlay .tiPreco{
  display:flex; align-items:center; justify-content:center; gap:4px; padding:3px 4px;
  font-family:var(--font-body); font-size:12px; color:var(--parchment); font-variant-numeric:tabular-nums;
  background:var(--well-bg-black); border:1px solid var(--chrome-darker);
}
#titulosOverlay .tiLock{ font-family:var(--font-body); font-size:11px; color:var(--parchment-dim); text-align:center; }
/* 13/10 (Lucas: "muito texto, cansativo, barras"): linha mais baixa, sem moldura pesada, título que falta mais apagado,
   seções por categoria, raridade discreta do lado do nome, progresso em número */
#titulosOverlay .tiLista{ gap:2px; }
#titulosOverlay .tiSecao{ flex:0 0 auto; font-family:var(--font-heading); font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:var(--parchment-dim); padding:10px 2px 3px; }
#titulosOverlay .tiSecao:first-child{ padding-top:2px; }
#titulosOverlay .tiRow{ padding:5px 8px; border-width:1px; border-color:rgba(0,0,0,.45); gap:8px; }
#titulosOverlay .tiRow.tiRowUso{ border-color:var(--gold); }
#titulosOverlay .tiRowFalta .tiInfo{ opacity:.6; }
#titulosOverlay .tiInfo{ gap:1px; }
#titulosOverlay .tiNome{ font-size:12.5px; }
#titulosOverlay .tiRar{ font-family:var(--font-body); font-weight:normal; font-size:10px; color:var(--parchment-dim); }
#titulosOverlay .tiReq{ font-size:11.5px; color:var(--parchment-dim); white-space:normal; } /* 18/10: quebra linha em vez de cortar com "…" (textos ficaram curtos) */
#titulosOverlay .tiProg{ color:var(--parchment); font-variant-numeric:tabular-nums; }
#titulosOverlay .tiAcoes{ flex:0 0 auto; min-width:70px; }
#titulosOverlay .tiAcoes .tiBtn, #titulosOverlay .tiPreco{ display:flex; align-items:center; justify-content:center; gap:4px; }
#titulosOverlay .tiPreco{ background:none; border:none; color:var(--parchment-dim); font-size:11px; }
/* botão COMPRAR: texto em cima, gold + valor embaixo em letra normal (numa linha só não cabia no celular) */
#titulosOverlay .tiAcoes .tiBtn.tiBtnComprar{ flex-direction:column; gap:3px; padding:5px 8px; }
#titulosOverlay .tiBtnValor{ display:flex; align-items:center; justify-content:center; gap:3px; font-family:var(--font-body); font-size:11.5px; font-weight:bold; color:var(--parchment); font-variant-numeric:tabular-nums; }
@media (max-width: 520px){
  #titulosOverlay .tiReq{ white-space:normal; }
  #titulosOverlay{ padding:6px; }
  #titulosOverlay .tiBox{ height:100%; padding:10px; }
  #titulosOverlay .tiLado{ flex-basis:86px; }
  #titulosOverlay .tiAcoes{ flex-basis:80px; }
}

#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay{ position:absolute; inset:0; z-index:55; display:none; align-items:center; justify-content:center; background:rgba(5,4,3,0.7); padding:16px; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .ccBox{
  width:400px; max-width:100%; max-height:90%; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:16px 18px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
}
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .ccHead{ display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:2px solid var(--panel-border); padding-bottom:8px; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .ccTitle{ font-family:var(--font-heading); font-size:12px; color:var(--gold-bright); }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .ccClose{
  cursor:pointer; flex-shrink:0; color:var(--parchment); padding:5px 8px; font-family:var(--font-heading); font-size:9px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .ccText{ font-family:var(--font-body); font-size:14px; color:var(--parchment); line-height:1.35; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .ccStatus{ font-family:var(--font-body); font-size:13px; color:var(--gold-bright); }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .ccWarn{ font-family:var(--font-body); font-size:13px; color:#e8c872; }
.ccSection{ font-family:var(--font-heading); font-size:9px; letter-spacing:1px; color:var(--parchment-dim); text-transform:uppercase; margin-top:6px; }
.ccHint{ font-family:var(--font-body); font-size:12px; color:var(--parchment-dim); }
.ccRow{ display:flex; align-items:center; gap:8px; padding:5px 6px; background:var(--slot-bg, #1a1310);
  border-style:solid; border-width:2px; border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
.ccPortrait{ flex-shrink:0; background-repeat:no-repeat; background-position:0 0; image-rendering:pixelated; }
.ccInfo{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ccName{ font-family:var(--font-body); font-size:13px; color:var(--parchment); }
.ccActions{ display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
/* ficha do chefe da task (vida, dano, XP, loot, gold, poções) — etiquetas pequenas no poço escuro */
.ccBossStats{ display:flex; flex-wrap:wrap; gap:3px; }
.ccChip{ font-family:var(--font-body); font-size:11px; line-height:1.2; color:var(--parchment-dim); padding:1px 5px;
  background:var(--well-bg-black); border:1px solid var(--chrome-darker); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ccChip b{ color:var(--parchment); font-weight:bold; }
.ccChip.ccChipHp b{ color:#e88a7a; }
.ccChip.ccChipDmg b{ color:#ffb36b; }
.ccBar{ position:relative; height:14px; background-color:var(--well-bg); border:1px solid var(--chrome-darker); }
.ccBarFill{ height:100%; background:#3a7a9a; }
.ccBarFill.ccBarDone{ background:#3a9a3a; }
.ccBarText{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-size:11px; color:#fff; text-shadow:0 1px 1px #000; font-variant-numeric:tabular-nums; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .ccBtn{
  font-family:var(--font-heading); font-size:9px; color:var(--parchment); cursor:pointer; padding:7px 9px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .ccBtn:active{ border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .ccBtn:disabled{ opacity:0.5; cursor:default; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .ccGood{ color:#8fe06a; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .ccDim{ color:var(--parchment-dim); }
.ccBestiary{ display:flex; flex-direction:column; gap:5px; margin-bottom:6px; }
/* janela da criatura do dia (16/10, ver js/ui/criaturaDoDiaHud.js) — mesma moldura da ficha do chefe de task */
#diaOverlay .diaPortrait{ width:64px; height:64px; }
#diaOverlay .diaNome{ color:var(--gold-bright); font-weight:bold; font-size:15px; }
#diaOverlay .diaChipBonus b{ color:var(--gold-bright); }
#diaOverlay .diaLoot{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:3px; }
#diaOverlay .diaItem{ display:flex; align-items:center; gap:6px; min-width:0; padding:3px 6px; background:var(--well-bg-black); border:1px solid var(--chrome-darker); font-family:var(--font-body); font-size:11.5px; color:var(--parchment); }
#diaOverlay .diaIcone{ flex:0 0 20px; display:flex; align-items:center; justify-content:center; }
#diaOverlay .diaItemNome{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 420px){ #diaOverlay .diaLoot{ grid-template-columns:1fr; } }
/* bosses da alavanca (16-17/10, ver js/alavancaBoss.js): lista, botão do lado do boneco e contagem da sala */
#bossesOverlay .ccBox{ width:430px; }
#bossesOverlay .bossRow .ccBtn{ flex-shrink:0; color:var(--gold-bright); }
#bossesOverlay .bossTrancado .ccPortrait{ filter:grayscale(1) brightness(.7); }
#bossesOverlay .bossTrancado .ccName{ color:var(--parchment-dim); }
/* grade de esperas do botão Bosses (17/10): só imagem + espera/Disponível/Bloqueado */
#bossesOverlay .ccBox{ max-height:92%; overflow-y:auto; }
#bossesOverlay .bossGrade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); gap:6px; padding:4px 2px; }
#bossesOverlay .bossSlot{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 2px; background:var(--well-bg-black); border:2px solid var(--chrome-darker); }
#bossesOverlay .bossSlot.livre{ border-color:#4f8f3f; }
#bossesOverlay .bossSlot.espera{ border-color:#8a6a2a; }
#bossesOverlay .bossSlotImg{ width:48px; height:48px; background-size:96px 96px; background-position:0 0; background-repeat:no-repeat; image-rendering:pixelated; }
#bossesOverlay .bossSlot.trancado .bossSlotImg{ filter:grayscale(1) brightness(.45); }
#bossesOverlay .bossSlotNome{ font-family:var(--font-body); font-size:10px; line-height:1.15; text-align:center; color:var(--parchment); min-height:2.3em; display:flex; align-items:center; }
#bossesOverlay .bossSlot.trancado .bossSlotNome{ color:var(--parchment-dim); }
#bossesOverlay .bossSlotTxt{ font-family:var(--font-body); font-size:10px; line-height:1.1; text-align:center; color:var(--parchment-dim); white-space:nowrap; }
#bossesOverlay .bossSlot.livre .bossSlotTxt{ color:#8fe06a; }
#bossesOverlay .bossSlot.espera .bossSlotTxt{ color:#e0a030; }
#bossesOverlay .bossSlot.bossEscolher{ cursor:pointer; }
#bossesOverlay .bossSlot.bossEscolher:hover{ border-color:#8fe06a; background:#1d2a16; }
#bossesOverlay .bossLivre{ color:#8fe06a; }
#bossBtn{ position:relative; }
#bossBtn .bossBtnIcone{ font-size:20px; line-height:1; color:var(--parchment); text-shadow:0 1px 1px #000; }
#bossBtnBadge{ position:absolute; right:1px; bottom:-1px; line-height:1; font-family:var(--font-body); font-size:10px; color:var(--gold-bright); text-shadow:0 1px 1px #000, 0 0 2px #000; }
#salaBossTempo{ position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:30; pointer-events:none; padding:4px 12px; font-family:var(--font-body); font-size:13px; font-weight:bold; color:var(--gold-bright); background:rgba(10,8,6,.78); border:1px solid var(--chrome-darker); text-shadow:0 1px 1px #000; white-space:nowrap; }
#salaBossTempo.acabando{ color:#ff8a6a; }
/* ===== MENU DE ANDARES (escada de descer dentro da hunt, ver abrirMenuDeAndares em js/citynpc.js) ===== */
#menuAndares{
  position:absolute; left:50%; top:28%; transform:translateX(-50%); z-index:50;
  display:flex; flex-direction:column; gap:4px; min-width:170px; padding:10px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}
#menuAndares .maTitulo{ font-family:var(--font-heading); font-size:10px; letter-spacing:.8px; color:var(--gold-bright); text-align:center; margin-bottom:4px; text-transform:uppercase; }
#menuAndares .maOpcao{
  font-family:var(--font-body); font-size:14px; color:var(--parchment); text-align:left; cursor:pointer; padding:7px 10px;
  background:var(--slot-bg, #1a1310); border:1px solid var(--chrome-darker);
}
#menuAndares .maOpcao:hover, #menuAndares .maOpcao:focus-visible{ border-color:var(--gold-bright); outline:none; }
#menuAndares .maDescer{ color:var(--gold-bright); margin-top:4px; }
/* opção marcada pelo teclado (↑/↓, Enter confirma — ver abrirMenuDeAndares em citynpc.js) */
#menuAndares .maOpcao.maSel{ border-color:var(--gold-bright); background:rgba(224,170,62,0.16); }
#menuAndares .maDica{ font-size:10px; color:var(--parchment-dim); text-align:center; margin-top:4px; }
@media (hover:none){ #menuAndares .maDica{ display:none; } } /* celular: não tem teclado */

/* ===== RECOMPENSA DIÁRIA (09/10, ver js/ui/dailyReward.js) — mesmo chrome da janela de títulos ===== */

/* BÊNÇÃOS (14/10, ver js/ui/bless.js) — mesma moldura da recompensa diária */
#blessOverlay{ position:absolute; inset:0; z-index:56; display:none; align-items:center; justify-content:center; background:rgba(5,4,3,0.7); padding:12px; }
#blessOverlay .blBox{
  width:460px; max-width:100%; max-height:100%; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:8px; padding:14px 16px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  box-shadow:0 20px 60px rgba(0,0,0,0.7); box-sizing:border-box;
}
#blessOverlay .blHead{ display:flex; align-items:center; gap:8px; border-bottom:2px solid var(--panel-border); padding-bottom:8px; }
#blessOverlay .blTitle{ font-family:var(--font-heading); font-size:12px; color:var(--gold-bright); flex:1; }
#blessOverlay .blChip{ font-family:var(--font-heading); font-size:9px; color:var(--parchment); padding:3px 7px; background:var(--well-bg-black); border:1px solid var(--panel-border); }
#blessOverlay .blChipOk{ color:var(--gold-bright); border-color:var(--gold-bright); }
#blessOverlay .blBtn{
  font-family:var(--font-heading); font-size:9px; color:var(--parchment); cursor:pointer; padding:6px 10px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
#blessOverlay .blBtn:hover:not(:disabled){ filter:brightness(1.15); }
#blessOverlay .blBtn:disabled{ opacity:.5; cursor:default; }
#blessOverlay .blBtn:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:1px; }
#blessOverlay .blClose{ padding:5px 8px; }
#blessOverlay .blComprar{ font-size:10px; padding:9px 10px; color:var(--gold-bright); }
#blessOverlay .blLink{ padding:4px 8px; font-size:8px; flex-shrink:0; }
#blessOverlay .blResumo{ font-family:var(--font-body); font-size:12px; color:var(--parchment); line-height:1.4; padding:6px 8px; background:var(--well-bg-black); border:1px solid var(--panel-border); }
#blessOverlay .blResumoNovo{ border-color:#6b8f4a; color:#cfe8b0; }
#blessOverlay .blSec{ font-family:var(--font-heading); font-size:9px; color:var(--gold-bright); margin-top:2px; }
#blessOverlay .blHint{ font-family:var(--font-body); font-size:11.5px; color:var(--parchment-dim); line-height:1.35; }
#blessOverlay .blAviso{ font-family:var(--font-body); font-size:12px; color:#ffb070; }
#blessOverlay .blLista{ display:flex; flex-direction:column; gap:4px; }
#blessOverlay .blRow{ display:flex; align-items:center; gap:10px; padding:6px 8px; background:var(--well-bg-black); border:1px solid var(--panel-border); }
#blessOverlay .blRowOk{ border-color:#6b8f4a; }
#blessOverlay .blIc{ image-rendering:pixelated; flex-shrink:0; }
#blessOverlay .blIcOff{ filter:grayscale(1) brightness(.55); }
#blessOverlay .blMeio{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
#blessOverlay .blNome{ font-family:var(--font-heading); font-size:10px; color:var(--parchment); }
#blessOverlay .blRowOk .blNome, #blessOverlay .blNomeGrande{ color:var(--gold-bright); }
#blessOverlay .blNomeGrande{ font-size:11px; }
#blessOverlay .blOnde{ font-family:var(--font-body); font-size:11.5px; color:var(--parchment-dim); }
#blessOverlay .blStatus{ font-family:var(--font-body); font-size:12px; color:var(--parchment); white-space:nowrap; font-variant-numeric:tabular-nums; }
#blessOverlay .blAtiva{ font-family:var(--font-heading); font-size:9px; color:#8fe06a; }
#blessOverlay .blNpcTopo{ display:flex; align-items:center; gap:12px; }
#blessOverlay .blRodape{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
#dailyOverlay{ position:absolute; inset:0; z-index:56; display:none; align-items:center; justify-content:center; background:rgba(5,4,3,0.7); padding:12px; }
#dailyOverlay .drBox{
  width:520px; max-width:100%; max-height:100%; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:8px; padding:14px 16px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  box-shadow:0 20px 60px rgba(0,0,0,0.7); box-sizing:border-box;
}
#dailyOverlay .drHead{ display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:2px solid var(--panel-border); padding-bottom:8px; }
#dailyOverlay .drTitle{ font-family:var(--font-heading); font-size:12px; color:var(--gold-bright); }
#dailyOverlay .drHint{ font-family:var(--font-body); font-size:12px; color:var(--parchment-dim); line-height:1.35; }
#dailyOverlay .drBtn{
  font-family:var(--font-heading); font-size:9px; color:var(--parchment); cursor:pointer; padding:6px 10px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
#dailyOverlay .drBtn:hover:not(:disabled){ filter:brightness(1.15); }
#dailyOverlay .drBtn:disabled{ opacity:.5; cursor:default; }
#dailyOverlay .drBtn:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:1px; }
#dailyOverlay .drClose{ padding:5px 8px; }
#dailyOverlay .drInfo{ display:flex; gap:6px; flex-wrap:wrap; }
#dailyOverlay .drInfoItem{ flex:1 1 0; min-width:110px; text-align:center; font-family:var(--font-body); font-size:12px; color:var(--parchment); padding:5px 6px;
  background:var(--well-bg-black); border-style:solid; border-width:2px; border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
#dailyOverlay .drPremium{ color:var(--gold-bright); }
#dailyOverlay .drAviso{ font-family:var(--font-body); font-size:12px; color:#ffb070; }
#dailyOverlay .drTrilha{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
#dailyOverlay .drDia{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 2px; background:var(--well-bg-black);
  border-style:solid; border-width:2px; border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
#dailyOverlay .drDiaN{ font-family:var(--font-heading); font-size:7.5px; color:var(--parchment-dim); white-space:nowrap; }
#dailyOverlay .drDiaHoje{ border-color:var(--gold-bright); }
#dailyOverlay .drDiaHoje .drDiaN{ color:var(--gold-bright); }
#dailyOverlay .drDiaIc{ display:flex; align-items:center; gap:2px; font-family:var(--font-body); font-size:11px; color:var(--parchment); font-variant-numeric:tabular-nums; }
#dailyOverlay .drDiaFeito .drDiaIc{ opacity:.45; }
#dailyOverlay .drDiaOk{ position:absolute; right:3px; bottom:1px; color:#8fe06a; font-size:12px; font-weight:bold; }
#dailyOverlay .drSec{ font-family:var(--font-heading); font-size:9px; color:var(--gold-bright); margin-top:2px; }
#dailyOverlay .drOpcoes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:4px; }
#dailyOverlay .drOp{ display:flex; align-items:center; gap:6px; text-align:left; font-family:var(--font-body); font-size:12px; color:var(--parchment); padding:4px 6px; }
#dailyOverlay .drOp span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* opção escolhida bem clara (Lucas 09/10): fundo dourado, borda dourada, ✓ no canto; as outras do mesmo grupo apagam */
#dailyOverlay .drOp{ position:relative; }
#dailyOverlay .drOp.drOpOn{
  color:#fff; background-image:none; background-color:rgba(199,165,66,.45); border-color:var(--gold-bright);
  box-shadow:inset 0 0 0 1px var(--gold-bright), 0 0 8px rgba(244,208,111,.55);
}
#dailyOverlay .drOp.drOpOn::after{
  content:'✓'; position:absolute; top:1px; right:4px; font-size:12px; line-height:1; color:var(--gold-bright); text-shadow:0 1px 0 #000;
}
#dailyOverlay .drOpcoes:has(.drOpOn) .drOp:not(.drOpOn){ opacity:.5; }
#dailyOverlay .drOpcoes:has(.drOpOn) .drOp:not(.drOpOn):hover{ opacity:.85; }
#dailyOverlay .drPegar{ font-size:11px; padding:9px 12px; color:var(--gold-bright); }
#dailyOverlay .drFeito{ font-family:var(--font-body); font-size:13px; color:#8fe06a; text-align:center; padding:6px; }
@media (max-width: 420px){ #dailyOverlay .drTrilha{ grid-template-columns:repeat(4, 1fr); } }

/* ===== TESTE DE PRESENÇA (anti-bot, ver js/ui/antibot.js) — por cima de tudo, mesmo chrome das janelas ===== */
/* 21/10 (Lucas quase morreu: no celular cobria a tela toda): janela pequena no canto de cima, sem escurecer e sem bloquear o
   jogo — dá pra continuar lutando (andar, magia, hotkey) enquanto responde. Só a janela recebe toque. */
#antibotOverlay{ position:absolute; inset:0; z-index:90; display:none; align-items:flex-start; justify-content:flex-end; background:none; padding:8px; pointer-events:none; }
#antibotOverlay .abBox{
  width:230px; max-width:60%; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 8px; box-sizing:border-box; pointer-events:auto;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
}
#antibotOverlay .abTitulo{ font-family:var(--font-heading); font-size:10px; color:var(--gold-bright); }
#antibotOverlay .abPergunta{ font-family:var(--font-body); font-size:11px; color:var(--parchment); text-align:center; }
#antibotOverlay .abCanvas{ width:100%; aspect-ratio:360/250; cursor:pointer; touch-action:manipulation; }
#antibotOverlay .abTrilho{ width:100%; height:6px; background:var(--well-bg-black); border:1px solid var(--chrome-darker); }
#antibotOverlay .abBarra{ height:100%; width:100%; background:var(--gold-bright); transition:width .2s linear; }
#antibotOverlay .abAviso{ font-family:var(--font-body); font-size:9px; color:var(--parchment-dim); text-align:center; line-height:1.35; }

/* ===== PREY (13/10, ver js/ui/prey.js) — mesma janela do Caçador; grade de criaturas e o resumo na aba Personagem ===== */
#preyOverlay .preyGrade{ display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; }
#preyOverlay .preyGradeLonga{ max-height:240px; overflow-y:auto; }
#preyOverlay .preyCriatura{ display:flex; align-items:center; gap:5px; padding:3px 5px; cursor:pointer; text-align:left; background:var(--well-bg-black); border:1px solid var(--chrome-darker); color:var(--parchment); font-family:var(--font-body); font-size:11px; min-width:0; }
#preyOverlay .preyCriatura span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#preyOverlay .preyCriatura:hover:not(:disabled){ border-color:var(--gold-bright); }
#preyOverlay .preyCriatura:disabled{ opacity:.45; cursor:default; }
#preyOverlay .preyAcoes{ flex-direction:row; flex-wrap:wrap; justify-content:flex-start; }
#charPrey{ margin-top:8px; padding:4px 6px; cursor:pointer; background:var(--well-bg-black); border:1px solid var(--chrome-darker); font-family:var(--font-body); font-size:11px; color:var(--parchment-dim); }
#charPrey:hover{ border-color:var(--gold-bright); }
#charPrey .preyResumoTit{ font-family:var(--font-heading); font-size:9px; color:var(--gold-bright); margin-bottom:2px; }
#charPrey .preyResumoLinha{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ===== JANELAS DO CAÇADOR E DO PREY, REFEITAS (13/10, Lucas: "visualmente muito ruim, deixe mais organizado") =====
   Tamanho FIXO (mais larga no PC), abas no topo, só a lista rola por dentro; cartões em grade com a criatura num
   quadrinho escuro, nome, barra e botões sempre alinhados embaixo. No celular deitado: tudo mais compacto. */
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgBox{
  width:min(800px, 100%); height:min(560px, 100%); display:flex; flex-direction:column; gap:8px; padding:12px 14px; box-sizing:border-box;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
}
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgHead{ display:flex; align-items:center; gap:8px; border-bottom:2px solid var(--panel-border); padding-bottom:8px; flex:0 0 auto; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgTitle{ font-family:var(--font-heading); font-size:12px; color:var(--gold-bright); margin-right:4px; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgChip{ font-family:var(--font-body); font-size:11px; color:var(--parchment); padding:2px 7px; background:var(--well-bg-black); border:1px solid var(--chrome-darker); white-space:nowrap; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgChip b{ color:var(--gold-bright); }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgHead .ccClose{ margin-left:auto; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgIntro{ font-family:var(--font-body); font-size:12px; color:var(--parchment-dim); line-height:1.35; flex:0 0 auto; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgTabs{ display:flex; gap:4px; flex:0 0 auto; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgTab{
  font-family:var(--font-heading); font-size:9px; color:var(--parchment-dim); cursor:pointer; padding:7px 12px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgTab.jgOn{ color:var(--gold-bright); background:var(--well-bg-black); border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgBody{ flex:1; min-height:0; overflow-y:auto; padding-right:4px; display:flex; flex-direction:column; gap:8px; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgGrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px; align-items:stretch; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgGridMini{ grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgCard{
  display:flex; flex-direction:column; gap:6px; padding:8px; background:var(--slot-bg, #1a1310); min-width:0;
  border-style:solid; border-width:2px; border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker);
}
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgCardTop{ display:flex; align-items:center; gap:8px; min-width:0; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgWell{ flex:0 0 auto; width:52px; height:52px; display:flex; align-items:center; justify-content:center; background:var(--well-bg-black); border:1px solid var(--chrome-darker); }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgGridMini .jgWell{ width:40px; height:40px; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgInfo{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgName{ font-family:var(--font-body); font-size:13px; color:var(--parchment); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgSub{ font-family:var(--font-body); font-size:11px; color:var(--parchment-dim); }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgBonus{ font-family:var(--font-body); font-size:13px; color:var(--gold-bright); }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgStars{ font-size:12px; letter-spacing:1px; color:#e8c34a; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgStars span{ color:#4a4038; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgLabel{ font-family:var(--font-heading); font-size:8px; letter-spacing:1px; color:var(--parchment-dim); text-transform:uppercase; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgActions{ display:flex; gap:4px; margin-top:auto; flex-wrap:wrap; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgActions .ccBtn{ flex:1 1 auto; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgWarn{ font-family:var(--font-body); font-size:12px; color:#e8c872; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgEmpty{ font-family:var(--font-body); font-size:12px; color:var(--parchment-dim); text-align:center; padding:24px 8px; }
/* Prey: os 2 slots lado a lado; grade 3×3 de criaturas pra escolher */
#preyOverlay .jgSlots{ display:grid; grid-template-columns:1fr 1fr; gap:8px; flex:1; min-height:0; }
#preyOverlay .jgSlots > .jgCard{ min-height:0; overflow-y:auto; }
:is(#preyOverlay, #convOverlay) .jgTiles{ display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; }
:is(#preyOverlay, #convOverlay) .jgTilesLongo{ grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); }
:is(#preyOverlay, #convOverlay) .jgTile{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 2px; cursor:pointer; min-width:0;
  background:var(--well-bg-black); border:1px solid var(--chrome-darker); color:var(--parchment); font-family:var(--font-body); font-size:11px; }
:is(#preyOverlay, #convOverlay) .jgTile span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:is(#preyOverlay, #convOverlay) .jgTile:hover:not(:disabled){ border-color:var(--gold-bright); }
:is(#preyOverlay, #convOverlay) .jgTile:disabled{ opacity:.4; cursor:default; }
#preyOverlay .jgLocked{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; font-family:var(--font-body); font-size:12px; color:var(--parchment-dim); }
#preyOverlay .jgLocked b{ font-size:22px; }
/* celular deitado (tela baixa): mais compacto */
@media (max-height: 520px){
  #cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay{ padding:6px; }
  :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgBox{ height:100%; padding:8px 10px; gap:6px; }
  :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgHead{ padding-bottom:5px; }
  :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgIntro{ font-size:10px; }
  :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgTab{ padding:5px 8px; font-size:8px; }
  :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgChip{ font-size:10px; padding:1px 5px; }
  :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgName{ font-size:11px; }
  :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgSub, :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgWarn{ font-size:10px; }
  :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgBonus{ font-size:11px; }
  :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgWell{ width:40px; height:40px; }
  :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgGrid{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:6px; }
  :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgGridMini{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
  :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgCard{ padding:5px 6px; gap:4px; }
  :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .ccBtn{ font-size:8px; padding:5px 6px; }
  :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .ccChip{ font-size:10px; }
  #preyOverlay .jgTile{ font-size:9px; padding:2px; }
}
/* celular em pé (tela estreita): Prey com um slot embaixo do outro */
@media (max-width: 560px){
  #preyOverlay .jgSlots{ grid-template-columns:1fr; }
}
/* Prey (13/10, Lucas): janela mais alta e os botões (Lista nova / Escolher qualquer) fixos no fim de cada slot; se
   faltar altura, só a grade de criaturas rola, os botões não somem */
#preyOverlay .jgBox{ height:min(680px, 100%); }
#preyOverlay .jgSlots > .jgCard .jgTiles{ flex:0 1 auto; min-height:0; overflow-y:auto; align-content:start; }
#preyOverlay .jgSlots > .jgCard .jgActions{ flex:0 0 auto; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgWell{ overflow:hidden; }
@media (max-height: 520px){ :is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgWell > .ccPortrait{ transform:scale(.85); } }
/* ===== RECOMPENSA DIÁRIA, REFEITA (13/10, Lucas: "muito poluída visualmente") ===== */
#dailyOverlay .drHead{ justify-content:flex-start; }
#dailyOverlay .drHead .drClose{ margin-left:auto; }
#dailyOverlay .drChip{ font-family:var(--font-body); font-size:11px; color:var(--parchment); padding:2px 8px; background:var(--well-bg-black); border:1px solid var(--chrome-darker); white-space:nowrap; cursor:default; }
#dailyOverlay .drTrilha{ gap:3px; }
#dailyOverlay .drDia{ padding:4px 2px 3px; gap:1px; }
#dailyOverlay .drDiaIc{ height:28px; justify-content:center; }
#dailyOverlay .drDiaQ{ font-family:var(--font-body); font-size:10px; color:var(--parchment-dim); font-variant-numeric:tabular-nums; }
#dailyOverlay .drDiaHoje .drDiaQ{ color:var(--gold-bright); }
#dailyOverlay .drEscolhas{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#dailyOverlay .drCol{ display:flex; flex-direction:column; gap:5px; padding:8px; background:var(--slot-bg, #1a1310);
  border-style:solid; border-width:2px; border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
#dailyOverlay .drIcones{ display:flex; flex-wrap:wrap; gap:4px; }
#dailyOverlay .drIcones .drOp{ width:44px; height:44px; padding:0; justify-content:center; position:relative; }
#dailyOverlay .drIcones .drQtd{ position:absolute; right:2px; bottom:1px; font-size:10px; color:#fff; text-shadow:0 1px 1px #000; font-variant-numeric:tabular-nums; overflow:visible; }
#dailyOverlay .drEscolhido{ font-family:var(--font-body); font-size:11px; color:var(--gold-bright); min-height:14px; }
#dailyOverlay .drPegar{ width:100%; }
#dailyOverlay .drRodape{ font-size:10px; text-align:center; }
@media (max-height: 520px){
  #dailyOverlay .drBox{ padding:8px 10px; gap:6px; }
  #dailyOverlay .drIcones .drOp{ width:36px; height:36px; }
  #dailyOverlay .drCol{ padding:5px; }
}
@media (max-width: 480px){ #dailyOverlay .drEscolhas{ grid-template-columns:1fr; } }
/* ícones nas janelas (13/10: no lugar dos emojis) */
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgIcon{ image-rendering:pixelated; vertical-align:middle; flex:0 0 auto; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgChip{ display:inline-flex; align-items:center; gap:4px; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgBonus{ display:flex; align-items:center; gap:5px; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .ccBtn{ display:inline-flex; align-items:center; justify-content:center; gap:4px; }
:is(#cacadorOverlay, #preyOverlay, #convOverlay, #diaOverlay, #bossesOverlay) .jgCusto{ display:inline-flex; align-items:center; gap:2px; margin-left:2px; color:var(--parchment-dim); }
#preyOverlay .jgSub{ display:flex; align-items:center; gap:4px; }
#charPrey .preyResumoTit, #charPrey .preyResumoLinha{ display:flex; align-items:center; gap:4px; }
#charPrey img{ image-rendering:pixelated; }
/* Gold Converter: janela menor; cada monte = "100 Gold Coin → 1 Platinum Coin" */
#convOverlay .jgBoxPequena{ width:min(560px, 100%); height:min(380px, 100%); }
#convOverlay .convMonte{ flex-direction:row; justify-content:center; gap:6px; padding:8px 6px; font-size:11px; }
#convOverlay .convSeta{ color:var(--gold-bright); font-size:14px; }
/* ===== LADOS DO BONECO (13/10, Lucas: CAP/Soul/Prey/recompensa diária escondidos lá embaixo) =====
   esquerda: botões quadrados (recompensa diária, Prey); direita: quadradinhos de CAP e Soul. */
#dollRow{ display:flex; align-items:flex-start; justify-content:center; gap:6px; margin:2px 0 8px; }
#charPanel #dollRow #doll{ margin:0; }
#dollRow .dollSide{ flex:0 0 52px; display:flex; flex-direction:column; gap:6px; }
#dollRow #dollLeft{ align-items:flex-end; }
#dollRow #dollRight{ align-items:flex-start; }
#dollRow .sideBtn, #diaRow .sideBtn{
  width:42px; height:42px; min-width:0; aspect-ratio:auto; padding:0; position:relative; cursor:pointer; display:flex; align-items:center; justify-content:center;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
#dollRow .sideBtn img{ image-rendering:pixelated; }
#preyBtnBadge{ position:absolute; right:1px; bottom:-1px; line-height:1; font-family:var(--font-body); font-size:10px; color:#fff; text-shadow:0 1px 1px #000, 0 0 2px #000; }
#preyBtn.vazio{ animation:dailyPulse 1.6s ease-in-out infinite; }
/* bênçãos (14/10, ver js/ui/bless.js): ícone apagado sem nenhuma, aceso com alguma, moldura dourada com as 5 */
#blessBtn{ position:relative; }
#blessBtn img{ filter:grayscale(1) brightness(.6); }
#blessBtn.blTem img{ filter:none; }
#blessBtn.blTodas{ box-shadow:0 0 0 2px rgba(244,208,111,.85), 0 0 8px rgba(244,208,111,.45); }
#blessBtnBadge{ position:absolute; right:1px; bottom:-1px; line-height:1; font-family:var(--font-body); font-size:9px; color:#fff; text-shadow:0 1px 1px #000, 0 0 2px #000; }
#blessBtn.blTodas #blessBtnBadge{ color:var(--gold-bright); }
/* criatura do dia (16/10, ver js/ui/criaturaDoDiaHud.js): retrato (quadro parado da folha 2x2) com moldura dourada e ✦ no canto */
#diaBtn{ position:relative; overflow:hidden; box-shadow:0 0 0 2px rgba(244,208,111,.85), 0 0 8px rgba(244,208,111,.45); }
#diaBtn .diaRetrato{ width:32px; height:32px; background-repeat:no-repeat; background-position:0 0; background-size:64px 64px; image-rendering:pixelated; }
#diaBtn .diaMarca{ position:absolute; right:2px; bottom:0; line-height:1; font-size:11px; color:var(--gold-bright); text-shadow:0 1px 1px #000, 0 0 2px #000; }
@media (max-height: 820px) and (min-width: 901px) and (pointer: fine){ #diaBtn .diaRetrato{ width:28px; height:28px; background-size:56px 56px; } }
/* caixa própria na aba Social (18/10): retrato + nome */
#diaRow{ display:flex; align-items:center; gap:8px; padding:2px 0; }
#diaRow .sideBtn{ flex-shrink:0; width:38px; height:38px; }
#diaNomeHud{ font-family:var(--font-body); font-size:12px; color:var(--gold-bright); cursor:pointer; min-width:0; }
@media (prefers-reduced-motion: reduce){ #preyBtn.vazio{ animation:none; box-shadow:0 0 0 2px rgba(244,208,111,.75); } }
#dollRow .sideBox{
  width:52px; box-sizing:border-box; margin:0; padding:3px 4px; border-top:none;
  background:rgba(0,0,0,0.22); border:1px solid var(--chrome-dark); text-align:center; cursor:default;
}
#dollRow #capRow{ font-size:11px; color:#fff; font-variant-numeric:tabular-nums; line-height:1.2; }
#dollRow .sideLbl{ display:block; font-family:var(--font-heading); font-size:8px; color:var(--parchment-dim); }
#dollRow #capRow .capTot{ display:block; font-size:9px; color:var(--parchment-dim); }
#dollRow #soulRow #soulTop{ flex-direction:column; align-items:center; gap:0; font-size:11px; }
#dollRow #soulRow #soulLabel{ font-family:var(--font-heading); font-size:8px; color:var(--parchment-dim); }
#dollRow #soulRow #soulMax{ font-size:9px; }
#dollRow #soulRow #soulTimer{ display:none; }
/* aba Personagem (23/10, Lucas: "aparece barra de rolagem"): a coluna da direita em 2 colunas (botões em pares, CAP e Soul
   lado a lado) — fica da altura do boneco em vez de passar dele. Só na tela baixa (boneco de 42px): na alta o boneco é
   maior e a coluna única já cabe */
@media (max-height: 820px) and (min-width: 901px) and (pointer: fine){
  #charPanel #dollRow #dollRight{ display:grid; grid-template-columns:repeat(2, 42px); gap:4px; align-content:start; flex:0 0 auto; }
  #charPanel #dollRow #dollRight .sideBox{ width:42px; padding:2px 1px; }
  #charPanel #dollRow #capRow{ font-size:10px; }
  #charPanel #dollRow #soulRow #soulTop{ font-size:10px; }
}
/* tela baixa / celular: botões e quadradinhos menores, junto com o boneco de 42px */
@media (max-height: 820px) and (min-width: 901px) and (pointer: fine){
  #dollRow .sideBtn{ width:36px; height:36px; }
  #dollRow .dollSide{ flex-basis:48px; gap:4px; }
  #dollRow .sideBox{ width:48px; }
}
/* 13/10 (2ª versão): boneco à esquerda, os 4 (recompensa, Prey, CAP, Soul) numa coluna só à direita — no celular em pé o
   painel é estreito e as duas colunas laterais cortavam */
#dollRow{ justify-content:center; gap:8px; }
#dollRow #dollRight{ align-items:center; }
#dollRow .sideBox{ width:46px; padding:2px 2px; }
#dollRow #capRow{ font-size:10px; }
/* XP Boost ativo (13/10): linha embaixo da localização */
#xpBoostRow{ display:flex; align-items:center; gap:4px; margin-top:3px; font-family:var(--font-body); font-size:11px; color:#e8c34a; text-shadow:1px 1px 0 #000; }
#xpBoostRow img{ image-rendering:pixelated; }
/* recompensa igual Tibia (13/10): runa/poção à escolha = muitas opções, grade com rolagem própria */
#dailyOverlay .drIconesMuitos{ max-height:150px; overflow-y:auto; padding-right:2px; }
@media (max-height: 520px){ #dailyOverlay .drIconesMuitos{ max-height:90px; } }

/* ===== BALÃO DE FALA DOS NPCs (17/10, ver js/ui/npcFala.js) — o texto vem todo do servidor ===== */
#npcFala{
  display:none; position:fixed; z-index:60; max-width:min(280px, 86vw); box-sizing:border-box;
  padding:8px 22px 8px 10px; font-family:var(--font-body); font-size:13px; line-height:1.35; color:#2a1f12;
  background:#efe3c4; border:2px solid #5a4528; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,0.55);
}
#npcFala::after{ content:''; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); border:8px solid transparent; border-bottom:0; border-top-color:#5a4528; }
#npcFala .nfFechar{ position:absolute; top:3px; right:6px; cursor:pointer; font-size:12px; color:#5a4528; }
#npcFala .nfTexto{ white-space:pre-wrap; }
#npcFala .nfImagens{ display:flex; gap:10px; justify-content:center; margin-top:6px; }
#npcFala .nfImagem{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; font-weight:bold; }
#npcFala .nfImagem img{ image-rendering:pixelated; width:40px; height:40px; background:rgba(0,0,0,0.12); border:1px solid #5a4528; }
#npcFala .nfBotoes{ display:flex; gap:6px; justify-content:center; margin-top:8px; }
#npcFala .nfBotoes button{
  font-family:var(--font-heading); font-size:9px; color:var(--parchment); cursor:pointer; padding:7px 12px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
#npcFala .nfBotoes button:disabled{ opacity:.6; cursor:default; }

/* FORJA (18/10, ver js/ui/tierBadge.js): tier no canto de cima do item — losango dourado com o número, igual o Tibia */
.tierBadge{
  position:absolute; top:1px; left:1px; z-index:2; pointer-events:none;
  min-width:13px; height:13px; padding:0 2px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-size:8px; font-weight:bold; line-height:1; color:#1a1408;
  background:linear-gradient(180deg, #fff1b8 0%, #f4d06f 45%, #b8862b 100%);
  border:1px solid #5a3d0c; border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* ===== FORJA — Exaltation Forge (18/10, ver js/ui/forja.js): mesmo chrome das janelas do jogo + brasa da forja ===== */
#forjaBtn:empty{ display:none; }
#forjaBtn img{ image-rendering:pixelated; }
#forjaOverlay{ position:absolute; inset:0; z-index:56; display:none; align-items:center; justify-content:center; background:rgba(5,4,3,0.72); padding:12px; }
#forjaOverlay .fgBox{
  width:560px; max-width:100%; height:620px; max-height:100%; overflow:hidden; display:flex; flex-direction:column; gap:8px; padding:12px 14px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
  box-shadow:0 20px 60px rgba(0,0,0,0.7); box-sizing:border-box;
}
#forjaOverlay .fgHead{ display:flex; align-items:center; gap:10px; border-bottom:2px solid var(--panel-border); padding-bottom:8px; }
#forjaOverlay .fgFornalha{ width:52px; height:52px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
#forjaOverlay .fgFornalha img{ image-rendering:pixelated; }
#forjaOverlay .fgTitWrap{ flex:1; min-width:0; }
#forjaOverlay .fgTitle{ font-family:var(--font-heading); font-size:13px; color:var(--gold-bright); letter-spacing:1px; }
#forjaOverlay .fgSub{ font-family:var(--font-body); font-size:11px; color:var(--parchment-dim); }
#forjaOverlay .fgBtn{
  font-family:var(--font-heading); font-size:9px; color:var(--parchment); cursor:pointer; padding:6px 10px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
#forjaOverlay .fgBtn:hover:not(:disabled){ filter:brightness(1.15); }
#forjaOverlay .fgBtn:disabled{ opacity:.45; cursor:default; }
#forjaOverlay .fgClose{ padding:5px 8px; align-self:flex-start; }
#forjaOverlay .fgMats{ display:flex; gap:6px; flex-wrap:wrap; }
#forjaOverlay .fgChip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-body); font-size:12px; color:var(--parchment); padding:3px 8px;
  background:var(--well-bg-black); border-style:solid; border-width:2px; border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
#forjaOverlay .fgChip img, #forjaOverlay .fgCusto img{ image-rendering:pixelated; }
#forjaOverlay .fgAbas{ display:flex; gap:3px; }
#forjaOverlay .fgAba{ flex:1; font-family:var(--font-heading); font-size:9px; color:var(--parchment-dim); cursor:pointer; padding:7px 4px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-repeat:repeat; background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light); }
#forjaOverlay .fgAba.on{ color:var(--gold-bright); border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
#forjaOverlay .fgCorpo{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:8px; }
#forjaOverlay .fgHead, #forjaOverlay .fgMats, #forjaOverlay .fgAbas{ flex-shrink:0; }
#forjaOverlay .fgHint{ font-family:var(--font-body); font-size:12px; color:var(--parchment-dim); line-height:1.35; }
#forjaOverlay .fgSec{ font-family:var(--font-heading); font-size:9px; color:var(--gold-bright); letter-spacing:.5px; }
#forjaOverlay .fgToggle{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:12px; color:var(--parchment); cursor:pointer; user-select:none; }

#forjaOverlay .fgLista{ display:flex; flex-wrap:wrap; gap:5px; max-height:150px; overflow-y:auto; padding:6px;
  background:var(--well-bg-black); border-style:solid; border-width:2px; border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
#forjaOverlay .fgSlot{ position:relative; width:46px; height:46px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  background:var(--slot-bg, #241b10); border:2px solid var(--panel-border); box-sizing:border-box; }
#forjaOverlay .fgSlot img{ image-rendering:pixelated; }
#forjaOverlay .fgPick{ cursor:pointer; }
#forjaOverlay .fgPick:hover{ filter:brightness(1.15); }
#forjaOverlay .fgPick.on{ border-color:var(--gold-bright); box-shadow:inset 0 0 0 2px var(--gold-bright); background:rgba(199,165,66,.35); }
#forjaOverlay .fgPick.on::after{ content:'✓'; position:absolute; top:1px; right:3px; font-size:11px; line-height:1; color:var(--gold-bright); text-shadow:0 1px 0 #000; }
#forjaOverlay .fgN{ position:absolute; bottom:1px; right:3px; font-family:var(--font-heading); font-size:9px; color:var(--gold-bright); text-shadow:0 1px 0 #000; }
#forjaOverlay .fgVazio{ font-family:var(--font-heading); font-size:12px; color:rgba(255,255,255,.18); }
#forjaOverlay .fgBigorna{ display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 8px 18px; position:relative;
  background:var(--well-bg-black);
  border-style:solid; border-width:2px; border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
#forjaOverlay .fgBigorna .fgSlot{ width:56px; height:56px; }
#forjaOverlay .fgBigorna .fgResultado{ width:64px; height:64px; }
#forjaOverlay .fgMais, #forjaOverlay .fgSeta{ font-family:var(--font-heading); font-size:16px; color:var(--parchment-dim); }
#forjaOverlay .fgOk .fgResultado{ animation:fgAcerto 1.1s ease-out 1; }
#forjaOverlay .fgFalha .fgResultado{ animation:fgErro .5s ease-in-out 2; }
@keyframes fgAcerto{ 0%{ transform:scale(.6); } 40%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
@keyframes fgErro{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
#forjaOverlay .fgEfeito{ font-family:var(--font-body); font-size:12px; color:#ffd58a; text-align:center; }
#forjaOverlay .fgInfo, #forjaOverlay .fgOps{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
#forjaOverlay .fgCusto{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-body); font-size:12px; color:var(--parchment); padding:3px 8px; background:var(--well-bg-black); border-style:solid; border-width:2px; border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
#forjaOverlay .fgCusto.falta b{ color:#ff7a6a; }
#forjaOverlay .fgChance{ font-family:var(--font-heading); font-size:10px; color:var(--parchment); text-align:center; }
#forjaOverlay .fgChance b{ font-size:14px; color:#8fe06a; }
#forjaOverlay .fgAcao{ font-size:11px; padding:10px 12px; color:var(--gold-bright); }
#forjaOverlay .fgMsgOk{ font-family:var(--font-heading); font-size:11px; color:#8fe06a; text-align:center; }
#forjaOverlay .fgMsgFalha{ font-family:var(--font-heading); font-size:11px; color:#ff7a6a; text-align:center; }
#forjaOverlay .fgMsgBonus{ font-family:var(--font-body); font-size:12px; color:var(--gold-bright); text-align:center; }
#forjaOverlay .fgCards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
#forjaOverlay .fgCard{ display:flex; flex-direction:column; gap:6px; align-items:center; padding:8px; text-align:center;
  background:var(--well-bg-black); border-style:solid; border-width:2px; border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
#forjaOverlay .fgFluxo{ display:flex; align-items:center; gap:6px; }
#forjaOverlay .fgCard .fgAcao{ width:100%; padding:7px 6px; font-size:9px; }
#forjaOverlay .fgHist{ display:flex; flex-direction:column; gap:3px; }
#forjaOverlay .fgHistL{ display:flex; align-items:center; gap:8px; padding:4px 6px; background:var(--well-bg-black); border:1px solid var(--chrome-darker); font-family:var(--font-body); font-size:12px; color:#8fe06a; }
#forjaOverlay .fgHistL.falha{ color:#ff9a8a; }
#forjaOverlay .fgHistL img{ image-rendering:pixelated; }
#forjaOverlay .fgHistT{ flex:1; min-width:0; }
#forjaOverlay .fgHistQ{ font-size:10px; color:var(--parchment-dim); white-space:nowrap; }
@media (max-width: 480px){ #forjaOverlay .fgCards{ grid-template-columns:1fr; } #forjaOverlay .fgBigorna{ gap:6px; } #forjaOverlay .fgBigorna .fgSlot{ width:48px; height:48px; } }

/* CAÇADOR: os 2 botões do topo (tasks / Tarefas Semanais, 18/10 — ver ui/semanaisUi.js), mesmo relevo das abas do jogo */
#cacadorOverlay .jgModos{ display:flex; gap:4px; flex:0 0 auto; }
#cacadorOverlay .jgModo{
  flex:1; font-family:var(--font-heading); font-size:10px; color:var(--parchment-dim); cursor:pointer; padding:8px 10px;
  background-color:var(--chrome); background-image:var(--hud-texture); background-blend-mode:multiply;
  border-style:solid; border-width:2px; border-color:var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
}
#cacadorOverlay .jgModo.jgOn{ color:var(--gold-bright); border-color:var(--chrome-darker) var(--chrome-light) var(--chrome-light) var(--chrome-darker); }
#cacadorOverlay .jgSemTopo, #cacadorOverlay .jgSemResumo{ display:flex; gap:5px; flex-wrap:wrap; }
#cacadorOverlay .jgChipOuro{ color:var(--gold-bright); }
#cacadorOverlay .jgSemDica{ font-size:10px; }
#cacadorOverlay .jgDifIc{ font-family:var(--font-heading); font-size:11px; color:var(--gold-bright); }
#cacadorOverlay .jgFeita{ opacity:.6; }
#cacadorOverlay .jgFeita .jgName{ color:#8fe06a; }