/* Spacious desktop client, with the same controls available on small screens. */
:root { color-scheme: dark; }
body { font-size: 12px; background: #111819; color: #c6cdca; }
.win, .mi, .bt { background-image: none; }
.win { background-color: #252d2d; border-color: #53605a #131b19 #131b19 #53605a; }
.bt { min-height: 27px; height: auto; padding: 5px 9px; font-size: 11px; background-color: #37423e; border-color: #626f5f #17201a #17201a #626f5f; border-radius: 3px; }
.bt:hover:not(:disabled), .mi:hover { background-color: #485447; color: #fff1be; }
.bt:focus-visible, .mi:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #e6c56d; outline-offset: 2px; }
.bt.on { background-color: #514b32; color: #ffe49a; border-color: #a79256; }
.titulo { background: #1d2524; min-height: 23px; height: auto; padding: 5px 7px; color: #bdc7bd; font-size: 10px; }
.titulo .bt { min-height: 16px; height: 16px; padding: 0 4px; }
.painel .miolo { padding: 7px; }
.linha { padding: 3px 0; }
#latE { width: 256px; } #latD { width: 252px; }
.lateral { padding: 6px; gap: 7px; background: #161e1e; }
#menu { padding: 6px 10px; background: #182020; border-bottom: 1px solid #505347; box-shadow: none; }
.mi { background: transparent; border: 1px solid transparent; border-radius: 4px; gap: 5px; min-width: 72px; font-family: inherit; }
/* topo: logo e ouro à esquerda (a vida do herói já está no cartão da Party), VIP coins à direita */
#topoMarca { display: flex; align-items: center; padding: 0 6px; }
#topoMarca .marca { padding: 0; font-size: 22px; line-height: 26px; letter-spacing: .04em; white-space: nowrap; }
#ouroTopo, #coinsTopo { display: flex; align-items: center; gap: 6px; padding: 0 10px; white-space: nowrap; }
#ouroTopo img { width: 32px; height: 32px; image-rendering: pixelated; }   /* a pilha de gold do Tibia (item 3031, quadro de 50+), pedido do dono */
#ouroTopo b { font-size: 22px; line-height: 26px; }
#coinsTopo img { width: 22px; height: 22px; image-rendering: pixelated; }
#coinsTopo b { font-size: 15px; }
#centro { background: #0e1414; padding: 6px; gap: 6px; }
#worldbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; background: #202a28; border: 1px solid #455247; border-radius: 4px; }
#worldbar small { display: block; color: #94a58e; font-size: 9px; letter-spacing: 1.5px; }
#worldbar strong { display: block; color: #f0d889; font-size: 17px; margin: 3px 0; }
#worldState { font-size: 10px; color: #b3bfb9; }
.world-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.world-actions .bt { display: flex; align-items: center; gap: 5px; }
.world-actions img { width: 22px; height: 22px; image-rendering: pixelated; }
#planBar { display: contents; }   /* os botões da planície (foco e saída) entram na mesma linha de ações da barra de cima */
#palco { min-height: 130px; background: #101715; }
#moldura { padding: 3px; width: 100%; height: 100%; background: #121917; border-color: #455247; overflow: hidden; }
#tela { display: block; }
#acoes { padding: 6px 3px; border: 1px solid #34423c; background: #1e2725; border-radius: 4px; }
#console { height: 110px; margin: 0; }
#log div { line-height: 16px; } #digita { display: none; }
.mb { padding: 7px 6px; } .mb .bots .bt { min-height: 24px; }
.mb .cab { min-height: 23px; } .mb .sub { padding-bottom: 4px; }
.bolsa .grade4 { grid-template-columns: repeat(5, 40px); gap: 3px; padding: 7px 0; }
.bolsa .slot { width: 40px; height: 40px; border-radius: 3px; }
.bolsa .rod { gap: 6px; padding: 5px 7px 8px; flex-wrap: wrap; line-height: 1.5; }
#jan { width: min(1040px, 94vw); max-height: 90vh; border-radius: 6px; overflow: hidden; box-shadow: 0 18px 80px #000c, 0 0 0 100vmax #0005; }
#jan > .titulo { min-height: 40px; font: bold 15px Georgia, serif; color: #f0d889; padding: 9px 14px; }
#jan .titulo .bt, #dlg .titulo .bt { min-width: 28px; height: 25px; font: 16px sans-serif; }
#janC { padding: 14px; gap: 10px; }
.cartao { padding: 12px; gap: 12px; border-radius: 4px; }
.cartao p { line-height: 1.65; } .cartao h5 { font-size: 14px; margin-bottom: 5px; }
.jabas { gap: 6px; padding-bottom: 9px; } .jabas .bt { min-height: 30px; }
#dlg { max-width: 94vw; width: 560px; border-radius: 5px; box-shadow: 0 10px 70px #000b; }
#dlg .miolo { padding: 15px; line-height: 1.7; }
.hunt-preparo { padding: 12px; background: #202825; }
.preparo-supplies img { width: 25px; height: 25px; vertical-align: middle; margin-right: 5px; image-rendering: pixelated; }
.hunt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#jan .hunt-card { display: flex; flex-direction: column; align-items: stretch; gap: 9px; padding: 0 0 12px; overflow: hidden; }
.hunt-card .hunt-preview { display: block; width: 100%; aspect-ratio: 21 / 10; object-fit: cover; image-rendering: pixelated; border-bottom: 1px solid #56634d; }
#jan .hunt-card > .meio { padding: 0 12px; flex: 1; }
#jan .hunt-card > .bichos { padding: 0 10px; min-width: 0; height: 45px; background: transparent; border: 0; flex-wrap: wrap; justify-content: center; }
#jan .hunt-card > .bt { margin: 0 12px; min-height: 34px; }
.hunt-card.atual { box-shadow: inset 0 0 0 1px #dfc36a; }
.hunt-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.hunt-toolbar input, .hunt-toolbar select { flex: 1; min-width: 140px; padding: 10px; font: inherit; background: #171e1c; color: #eee; border: 1px solid #64725e; border-radius: 3px; }
.hunt-card .hunt-level { color: #e5d18e; }
.hunt-cities { margin: 0; }
.combat-focus #latE, .combat-focus #latD, .combat-focus #console { display: none; }
.combat-focus #centro { padding: 5px; }
.progress-card { background: #202927; border-radius: 5px; padding: 16px; }
.progress-card h4 { font-size: 15px; }
.progress-grid { gap: 10px; }
.monster-picker-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; max-height: 340px; overflow-y: auto; margin-top: 8px; }
.monster-choice { display: flex; align-items: center; gap: 8px; text-align: left; min-height: 62px; }
.monster-choice img { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.monster-choice small { display: block; color: #a7b8a7; }
.monster-selection { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.monster-selection img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.picker-search { width: 100%; padding: 10px; font: inherit; color: #fff; background: #111b17; border: 1px solid #777; }
@media (max-width: 1200px) { #latE { width: 220px; } #latD { width: 224px; } #topoMarca .marca { font-size: 17px; } #ouroTopo b { font-size: 17px; } #ouroTopo img { width: 22px; height: 22px; } .bolsa .grade4 { grid-template-columns: repeat(5, 36px); } .bolsa .slot { width: 36px; height: 36px; } #vitais { width: 180px; } .mi { min-width: 60px; } }
@media (max-width: 980px) { .hunt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #latE { width: 256px; } #topoMarca { display: none; } #ouroTopo { padding: 0 4px; } #coinsTopo { display: none; } }
@media (max-width: 700px) {
  #centro { padding: 3px; gap: 3px; } #menu { padding: 3px; gap: 2px; } .mi { min-width: 57px; }
  #ouroTopo { padding: 0 2px; gap: 3px; } #ouroTopo b { font-size: 13px; } #ouroTopo img { width: 18px; height: 18px; }
  #worldbar { padding: 7px; gap: 5px; } #worldbar strong { font-size: 14px; } #worldState { font-size: 9px; }
  .world-actions { max-width: 112px; } .world-actions .bt { font-size: 9px; min-height: 25px; padding: 3px 5px; } .world-actions img { display: none; }
  #console { height: 78px; } #janC { padding: 9px; } #jan { max-height: 92vh; }
  .hunt-grid { grid-template-columns: 1fr; } #jan .hunt-card { display: flex; } .hunt-card .hunt-preview { aspect-ratio: 21 / 8; }
  .monster-picker-list { grid-template-columns: 1fr; }
  .cartao { padding: 10px; } #latD { width: 240px; }
}
@media (max-height: 560px) { #worldState { display: none; } #worldbar { padding: 3px 8px; } #worldLocation { display: none !important; } #console { height: 58px; } }

.hunt-preparation summary { cursor: pointer; padding: 8px 4px; color: #d5c488; }

/* Vertical party rail gives the arena the full remaining height. */
#battle-workspace { display: flex; flex: 1; min-height: 0; gap: 7px; }
#battle-workspace #palco { flex: 1; min-width: 0; min-height: 0; }
/* Magias: COMPACTAS por padrão (trilho estreito ao lado do palco) e, com o botão, ABERTAS por cima da hunt, translúcidas. */
#battle-workspace { position: relative; }
#acoes { width: 132px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; overflow-y: auto; overflow-x: hidden; padding: 6px; scrollbar-width: thin; }
#tgMagias { flex: none; width: 100%; min-height: 26px; padding: 3px 4px; font-size: 11px; }
#acoes .grupo { flex: 0 0 auto; width: 100%; padding: 5px; border-radius: 4px; }
#acoes .gnome { flex-direction: row; gap: 4px; font-size: 10px; line-height: 14px; margin-bottom: 3px; }
#acoes .gnome span:first-child { color: #efd78f; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#acoes .gnome span:last-child { display: none; }
.skill-label { color: #9db0a3; font-size: 9px; margin-bottom: 4px; }
#acoes .skill-label { display: none; }
#acoes .fila { justify-content: space-between; gap: 3px; }
#acoes .support-skills { justify-content: flex-start; align-items: center; margin-top: 3px; padding-top: 3px; }
#acoes .support-skills small { display: none; }
#acoes .sk { flex: 0 0 26px; width: 26px; height: 26px; background-size: 24px; border-radius: 3px; cursor: pointer; }
#acoes .sk u { font-size: 8px; }
#acoes .sk:focus-visible { outline: 2px solid #f1d889; outline-offset: 2px; }
/* aberto: sai do fluxo e cobre a parte direita do palco */
#acoes.aberto { position: absolute; right: 0; top: 0; bottom: 0; z-index: 6; width: min(560px, 72%);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 10px; padding: 10px; overflow-y: auto; }
#acoes.aberto #tgMagias { grid-column: 1 / -1; min-height: 32px; font-size: 12px; }
#acoes.aberto .grupo { padding: 10px; }
#acoes.aberto .gnome { flex-direction: column; gap: 1px; font-size: 12px; line-height: 16px; margin-bottom: 6px; }
#acoes.aberto .gnome span:last-child { display: block; font-size: 10px; }
#acoes.aberto .skill-label { display: block; }
#acoes.aberto .support-skills { justify-content: flex-end; margin-top: 6px; padding-top: 6px; }
#acoes.aberto .support-skills small { display: block; flex: 1; }
#acoes.aberto .sk { flex: 0 0 52px; width: 52px; height: 52px; background-size: 48px; }
#acoes.aberto .sk u { font-size: 11px; }
.hordem { flex-wrap: wrap; }
@media (max-width: 1100px) {
  #battle-workspace { flex-direction: column; }
  #acoes { flex: none; width: 100%; flex-direction: row; overflow-x: auto; padding: 5px; }
  #tgMagias { width: auto; align-self: center; }
  #acoes .grupo { width: 132px; }
  /* no celular "aberto" não cobre o palco: vira uma faixa mais alta, com os ícones grandes, rolando de lado */
  #acoes.aberto { position: static; width: 100%; display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 6px; }
  #acoes.aberto .grupo { width: 250px; }
  #acoes.aberto .skill-label { display: none; }
}


/* Velocidade da simulação: Pausar numa linha, os cinco passos dividindo a de baixo sem estourar a lateral. */
#velocidades { display: flex; flex-wrap: wrap; gap: 2px; }
#velocidades #bPausa { flex: 1 1 100%; }
#velocidades [data-v] { flex: 1 1 0; min-width: 0; padding: 2px 1px; text-align: center; }

/* Hunt acima do nível da party: o botão avisa, mas deixa entrar — quem escolhe arca. */
.hunt-card .bt.perigo { border-color: #b06020; color: #ffc890; }

/* Cartão da party limpo, no molde do Baiak (pedido do dono, 25/09/2026: "o nosso tá muito poluído"): chip do papel + nome,
   "vocação · nível", três barras finas com ícone e SEM número (o número aparece só com o cartão aberto), botões pequenos.
   Sem retrato, sem sigla, sem caixa dourada por cartão — um fio entre cartões. Letra maior, como no Hunt Analyzer. */
#party { display: flex; flex-direction: column; padding: 4px 10px 8px; }
.mb { padding: 10px 2px 10px; border-bottom: 0; box-shadow: none; cursor: pointer; }
.mb + .mb { border-top: 1px solid rgba(168,137,79,.28); }
.mb .lin1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mb .lin1 .nomeM { flex: 1; font-size: 15px; line-height: 20px; }
.mb .lin1 .seta { flex: none; width: 16px; text-align: center; font-size: 11px; }
.mb .sub { font-size: 12px; line-height: 16px; padding: 1px 0 6px; }
.mb .tres { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 5px 6px; align-items: center; margin: 0; }
.mb .tres .ic { font-style: normal; font-size: 11px; line-height: 10px; text-align: center; }
.mb .tres .ic.hp { color: #ff5a5a; } .mb .tres .ic.mp { color: #7c8cff; } .mb .tres .ic.xp { color: #e2c04e; font-size: 9px; font-weight: 700; }
.mb .tres .barra { margin: 0; height: 9px; }
.mb .tres .barra.xp { height: 7px; }
.mb:not(.aberto) .tres .barra b { display: none; }
.mb.aberto .tres .barra { height: 13px; } .mb.aberto .tres .barra.xp { height: 11px; }
.mb.aberto .tres .barra b { font-size: 10px; line-height: 13px; }
/* aberto: equipamento grande no meio (ícone a 32px, o tamanho do sprite) e os três botões numa fileira embaixo
   (26/09/2026, o dono: "coloca aqueles três botões ali embaixo"; "tô achando pequeno os itens") */
.mb .corpo { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(168,137,79,.28); }
.mb .eq { flex: none; align-self: center; grid-template-columns: repeat(3, 46px); gap: 4px; margin: 0; }
.mb .eq div { width: 46px; height: 46px; background-size: 36px; }
.mb .bots { display: flex; flex-direction: row; gap: 6px; margin: 0; }
.mb .bots .bt { flex: 1; height: auto; min-height: 30px; font-size: 13px; }
.mb.bloq .lin1 .nomeM { flex: 1; }
.mb.bloq .preco { font-size: 13px; }
@media (max-width: 1200px) { .mb .lin1 .nomeM { font-size: 14px; } .mb .eq { grid-template-columns: repeat(3, 40px); } .mb .eq div { width: 40px; height: 40px; background-size: 32px; } }

/* submenu do menu de cima (molde do Baiak, pedido do dono 25/09/2026): aparece ao passar o mouse; no celular não há hover, fica só o botão */
#menu { position: relative; z-index: 20; }
.mi-grupo { position: relative; display: flex; } .mi-grupo > .mi { flex: 1; }
.mi-grupo .sub { display: none; position: fixed; left: 0; top: 0; z-index: 40; gap: 2px; padding: 6px; border-radius: 8px; white-space: nowrap; }   /* fixed + posição por JS: abaixo de 980px .mcentro rola de lado (overflow) e cortaria um absolute */
.mi-grupo .sub::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 6px; }   /* ponte: o mouse cruza a fresta sem o menu fechar */
.mi-grupo:hover .sub, .mi-grupo:has(:focus-visible) .sub { display: flex; }   /* :focus-within prendia o submenu aberto depois do clique (o botão fica com o foco) */
.si { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 11px; cursor: pointer; }
.si img { width: 28px; height: 28px; image-rendering: pixelated; object-fit: contain; }
@media (max-width: 700px) { .mi-grupo .sub { display: none !important; } }

/* paleta HSI de 133 cores na janela Visual: quadradinho menor */
.cor.mini { width: 13px; height: 13px; }
.cor.mini.on { outline: 2px solid #e4bc6c; outline-offset: -1px; }

/* menu do item (botão direito / toque na Mochila e no Loot Pouch), no molde do Baiak */
#ctx { position: fixed; z-index: 60; min-width: 220px; max-width: 300px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
#ctx .ctx-h { display: flex; gap: 8px; align-items: center; padding: 2px 4px 6px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 4px; font-size: 12px; line-height: 1.25; }
#ctx .ctx-h small { color: #a8a8a8; }
#ctx .ctx-row { display: block; width: 100%; text-align: left; padding: 5px 8px; font-size: 12px; text-decoration: none; }
#ctx .ctx-row:disabled { opacity: .5; }
.bom { color: #60e060; } .ruim { color: #ff7060; } .igual { color: #a8a8a8; }
#dica .db.bom { color: #60e060; } #dica .db.ruim { color: #ff7060; } #dica .db.igual { color: #a8a8a8; } #dica .db small { color: #c0c0c0; }

/* Highscore (menu Rank, no molde do Baiak): categorias à esquerda, filtro, tabela paginada e "Minha posição" */
.helper.rank { grid-template-columns: 132px 1fr; }
.rank .hcorpo { display: flex; flex-direction: column; gap: 6px; min-height: 420px; }
.rk-desc { color: var(--ink-muted, #a8a8a8); font-size: 12px; }
.rk-fonte { float: right; font-size: 11px; }
.rk-filtro select { font: inherit; font-size: 13px; background: var(--bg-300, #1a1a1a); color: var(--ink, #e0e0e0); border: 1px solid var(--frame, #3a3a3a); border-radius: var(--radius-sm, 3px); height: 28px; padding: 0 8px; min-width: 220px; }
.rk-lista { flex: 1; overflow-y: auto; max-height: 52vh; border-top: 1px solid var(--frame, #333); }
.rk-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.rk-tab th { position: sticky; top: 0; background: var(--panel-solid, #141414); text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted, #a8a8a8); padding: 7px 8px; border-bottom: 1px solid var(--frame, #333); }
.rk-tab td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); color: var(--ink, #e0e0e0); white-space: nowrap; }
.rk-tab td small { color: var(--ink-muted, #a8a8a8); font-size: 12px; }
.rk-tab .n { text-align: right; font-family: var(--font-mono, Consolas, monospace); }
.rk-tab tr.eu td { background: rgba(228, 188, 108, .10); }
.rk-med { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: bold; color: #1a1408; }
.rk-med.m1 { background: #e4bc6c; } .rk-med.m2 { background: #b8bcc4; } .rk-med.m3 { background: #b07a48; }
.rk-voc { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12px; border: 1px solid currentColor; }
.rk-voc.v-knight { color: #d8b040; } .rk-voc.v-mago { color: #8fa8ff; } .rk-voc.v-druida { color: #5fc08a; } .rk-voc.v-paladino { color: #e08050; }
.rk-vazio { padding: 24px 8px; color: var(--ink-muted, #a8a8a8); text-align: center; }
.rk-pe { display: flex; align-items: center; gap: 6px; } .rk-pe .esp { flex: 1; } .rk-pag { min-width: 54px; text-align: center; color: var(--ink-muted, #a8a8a8); }
@media (max-width: 700px) { .helper.rank { grid-template-columns: 1fr; } .rk-tab td, .rk-tab th { padding: 6px 4px; } .rk-tab td small { display: none; } .rk-filtro select { min-width: 0; width: 100%; } }
.rank .hnav .bt { min-height: 30px; font-size: 13px; padding: 5px 10px; }
/* Guild (guilda-ui.js): formulários, tesouro, receitas dos prédios e placar da guerra */
.gd-abas { margin-bottom: 6px; }
.gd-linha { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.gd-linha input { flex: 1 1 140px; min-width: 0; background: #0b0f12; color: var(--ink, #e0e0e0); border: 1px solid #3a3326; border-radius: 3px; padding: 5px 7px; font: inherit; }
.gd-grade { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 4px 0; align-items: center; }
.gd-mat { display: inline-flex; align-items: center; gap: 2px; border: 1px solid transparent; border-radius: 3px; }
.gd-mat img, .gd-ing img { width: 28px; height: 28px; image-rendering: pixelated; }
.gd-mat b { font-size: 12px; }
.gd-doa { display: inline-flex; align-items: center; gap: 4px; }
.gd-receita { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 4px; }
.gd-ing { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }
.gd-barra { position: relative; height: 6px; margin: 4px 0; }
.gd-barra i { display: block; height: 100%; background: var(--gold-bright, #e4bc6c) !important; }
.gd-placar { font-size: 26px; margin: 2px 0; }
.gd-niv { color: var(--gold-bright, #e4bc6c); letter-spacing: 1px; font-size: 12px; }
.gd-cargo { font-size: 12px; } .gd-lider { color: var(--gold-bright, #e4bc6c); } .gd-vice { color: #9fc2e8; } .gd-recruta { color: #909090; }
.gd-item .fundo { display: inline-flex; vertical-align: middle; width: 30px; height: 30px; }
.gd-log .linha { gap: 8px; } .gd-log .linha small { white-space: nowrap; color: #808080; }
@media (max-width: 700px) { .gd-receita { gap: 4px 8px; } .gd-predio { flex-wrap: wrap; } }
.gd-ing b.neg { color: #ff6a5a; } .gd-ing b.ouro { color: var(--gold-bright, #e4bc6c); }
.adm-chave { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; margin: 2px 0; }
#palco { position: relative; }
#hudBatalha { position: absolute; right: 10px; bottom: 10px; z-index: 6; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 20px); padding: 4px; background: rgba(8,12,16,.7); border: 1px solid rgba(168,137,79,.4); border-radius: 4px; }
#hudBatalha .bt { min-width: 34px; }
.gd-tat { align-items: center; gap: 8px; flex-wrap: wrap; } .gd-tat > span:first-child { min-width: 96px; } .gd-tat .modos { display: flex; flex-wrap: wrap; gap: 4px; } .gd-tat .modos .bt { font-size: 12px; padding: 3px 8px; }
/* mapa de combate da guerra (guilda-ui.js: painelMapa) */
.gd-mapa { display: block; width: 100%; max-width: 600px; height: auto; image-rendering: pixelated; border: 1px solid #3a3326; border-radius: 3px; }
.gd-mapa.mexe { cursor: crosshair; }
.gd-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gd-chip { display: inline-block; padding: 2px 8px; border: 1px solid #3a3326; border-radius: 10px; font-size: 12px; background: #0b0f12; }
.gd-chip.mexe { cursor: grab; }
.gd-bola { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #111; font-size: 11px; font-weight: bold; vertical-align: middle; }
.gd-esq.sel { outline: 1px solid var(--ouro, #e4bc6c); }
.gd-ordens { margin: 4px 0; flex-wrap: wrap; }
.gd-arma { width: 44px; height: 44px; image-rendering: pixelated; }
/* estandarte da guilda (guilda-ui.js: emblemaImg, a escolha no Mestre das Guildas e na aba Resumo) */
.gd-emb { image-rendering: pixelated; object-fit: contain; }
.gd-embs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.gd-embbt { padding: 2px; min-width: 0; line-height: 0; }
.gd-embbt.on { outline: 2px solid var(--ouro, #e4bc6c); }

/* Barra de bônus no alto da hunt (docs/ECONOMIA.md §14.5): quadradinhos com o detalhe no title e o total em texto */
.bonus-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 3px; }
.bonus-ic { width: 22px; height: 22px; display: inline-grid; place-items: center; border: 1px solid #6b5a33; border-radius: 3px; background: rgba(0,0,0,.35); cursor: help; }
.bonus-ic img { width: 18px; height: 18px; image-rendering: pixelated; }
.bonus-ic.ruim { border-color: #a33; background: rgba(120,20,20,.35); }
.bonus-tot { font-size: 10px; margin-left: 4px; color: var(--ink, #e8dcc0); white-space: nowrap; }
@media (max-width: 700px) { .bonus-bar { flex-wrap: nowrap; overflow-x: auto; } }
/* criatura das hunts da base: recorte da folha sprites/bc_<k>.webp (imgBicho em interface.js) */
.bcfig { display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; flex: none; }

/* celular (≤700px): a fileira de 12 abas vira o botão ☰ Menu, que abre uma grade com todas embaixo da barra (01/10/2026, o dono: "diminua o
   menu superior, ele não está responsivo" — antes só Caçar, PVP e Cidade apareciam e o resto ficava num rolar de lado invisível) */
@media (max-width: 700px) {
  #tgM { display: block; }
  #menu .mcentro { display: none; }
  #menu.abreMenu .mcentro { display: grid; position: absolute; left: 4px; right: 4px; top: calc(100% + 4px); z-index: 50; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 8px;
    overflow: visible; border-radius: 6px; background: #0b0c0e; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5c4a2c, 0 10px 24px rgba(0,0,0,.8); }
  #menu.abreMenu .mcentro .mi { min-width: 0; height: 60px; font-size: 10px; }
  #menu.abreMenu .mcentro .mi img { width: 26px; height: 26px; }
}

/* convite para a Arena (amistoso, 01/10/2026): por cima de tudo, em qualquer tela, até aceitar, recusar ou expirar */
#convArena { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
#convArena .conv { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; background: rgba(10,9,7,.96); color: var(--ink);
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #e4bc6c, 0 10px 24px rgba(0,0,0,.7); animation: convEntra .25s ease-out; }
#convArena .conv img { width: 32px; height: 32px; image-rendering: pixelated; }
#convArena .conv div { flex: 1; min-width: 0; font-size: 13px; } #convArena .conv b { color: #ffd98a; } #convArena .conv small { display: block; color: var(--ink-muted); font-size: 11px; }
#convArena .conv .bt { flex: none; min-height: 34px; padding: 0 10px; }
@keyframes convEntra { from { transform: translateY(12px); opacity: 0; } }
@media (max-width: 700px) { #convArena { left: 8px; right: 8px; bottom: 8px; max-width: none; } #convArena .conv { flex-wrap: wrap; } }