* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #14201a;
  color: #eee;
  font-family: 'Segoe UI', sans-serif;
  overflow-x: hidden;
}

.hud {
  padding: 10px 16px;
  background: #0d1712;
  font-size: 15px;
  border-bottom: 2px solid #2a4033;
  position: sticky;
  top: 0;
  z-index: 5;
}

.mapa-container {
  display: flex;
  justify-content: center;
  padding: 16px;
  overflow: auto;
}

/* O mapa e o minimapa tratam o arrasto por conta própria (eventos de ponteiro),
   e sem isto o navegador rolaria a página junto no celular — o gesto ficaria
   dividido entre os dois e nenhum dos dois funcionaria direito. */
#mapa,
#minimapa {
  touch-action: none;
}

canvas {
  border: 2px solid #2a4033;
  border-radius: 6px;
  background: #25392b;
  max-width: 100%;
}

.escondido {
  display: none !important;
}

.btn-recentralizar {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: #3fa9f5;
  color: #0d1712;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  z-index: 8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn-recentralizar:hover {
  background: #63bcf7;
}

/* logo abaixo do "Minha base", compartilhando a mesma coluna à esquerda */
.btn-relatorios {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(calc(-50% + 48px));
  background: #1c2b22;
  color: #eee;
  border: 1px solid #3fa9f5;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  z-index: 8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn-relatorios:hover {
  background: #24382c;
}

.btn-relatorios .contador {
  background: #3fa9f5;
  color: #0d1712;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
  font-size: 12px;
}

/* terceiro da coluna, abaixo de "Relatórios" */
.btn-exercito {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(calc(-50% + 96px));
  background: #1c2b22;
  color: #eee;
  border: 1px solid #3fa9f5;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  z-index: 8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn-exercito:hover {
  background: #24382c;
}

.painel-minimapa {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 8;
  line-height: 0; /* tira o vão que o canvas inline deixaria embaixo */
}

#minimapa {
  display: block;
  border: 2px solid #2a4033;
  border-radius: 6px;
  background: #1b2a20;
  cursor: crosshair;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* sobrepostos ao próprio minimapa, encostados na borda direita */
.zoom-controles {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.zoom-controles button {
  width: 24px;
  height: 22px;
  background: rgba(13, 23, 18, 0.78);
  color: #eee;
  border: 1px solid rgba(63, 169, 245, 0.8);
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.zoom-controles button:hover {
  background: rgba(36, 56, 44, 0.95);
}

/* Em tela estreita a coluna de botões comia o mapa: três botões de 14px com
   padding de 10 ocupavam um terço da largura. Encolhem o texto e o padding, e o
   empilhamento encolhe junto — as distâncias de 48 e 96px são a altura de um e
   de dois botões, e mantê-las abriria buracos entre eles.
   Depois das regras que ela sobrescreve, de propósito: media query não soma
   especificidade, então a regra de baixo é que vence. */
@media (max-width: 700px) {
  .btn-recentralizar,
  .btn-relatorios,
  .btn-exercito {
    padding: 6px 9px;
    font-size: 12px;
    left: 10px;
  }

  .btn-relatorios {
    transform: translateY(calc(-50% + 36px));
  }

  .btn-exercito {
    transform: translateY(calc(-50% + 72px));
  }

  .painel-minimapa {
    top: 52px;
    right: 10px;
  }

  .zoom-controles button {
    width: 20px;
    height: 19px;
    font-size: 12px;
  }
}

/* Abaixo disto nem o texto encurtado cabe: os três botões somavam 36% da
   largura da tela. Fica o ícone e o contador, que é o que se lê de relance —
   o `title` de cada um continua dizendo o que ele faz. */
@media (max-width: 480px) {
  .rotulo-botao {
    display: none;
  }
}

/* Numa tela estreita o canvas da base fica com ~340px, e uma telinha de 268
   deixaria 70px de base à mostra. Aí ela ocupa a largura toda e vira uma lista
   de tela cheia — o `»` continua sendo o caminho de volta para a base. */
@media (max-width: 700px) {
  .painel-lateral {
    left: 10px;
    width: auto;
  }
}

.tabela-exercito {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 14px;
}

.tabela-exercito th,
.tabela-exercito td {
  padding: 7px 8px;
  border-bottom: 1px solid #2a4033;
  text-align: right;
}

.tabela-exercito th:first-child,
.tabela-exercito td:first-child {
  text-align: left;
}

.tabela-exercito thead th {
  color: #99a89d;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
}

.tabela-exercito tbody tr.sem-tropa {
  opacity: 0.45;
}

/* Cabeçalho de família. A regra de opacidade acima vem antes de propósito: sem
   isso, um grupo inteiro sem tropa apagaria o próprio título junto, e a lista
   perderia a divisão justamente onde ela mais ajuda a entender o que falta. */
.tabela-exercito tbody tr.grupo-exercito td {
  padding-top: 14px;
  border-bottom: 1px solid #2a4033;
  color: #cfe0d2;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tabela-exercito tbody tr.grupo-exercito td:last-child {
  color: #99a89d;
  text-align: right;
}

.tabela-exercito tfoot td {
  border-bottom: none;
  border-top: 2px solid #2a4033;
  font-weight: 700;
}

.resumo-poder {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  background: #14201a;
  border: 1px solid #2a4033;
  border-radius: 8px;
  padding: 12px 14px;
}

.resumo-poder strong {
  font-size: 18px;
}

.confirm-box {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1c2b22;
  border: 1px solid #3fa9f5;
  border-radius: 8px;
  padding: 16px 20px;
  text-align: center;
  z-index: 20;
}

.confirm-box button {
  margin: 4px 8px 0;
}

.painel-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.painel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.painel-conteudo {
  position: relative;
  background: #1c2b22;
  border: 1px solid #2a4033;
  border-radius: 10px;
  padding: 20px 24px;
  width: min(780px, 95vw);
  max-height: 85vh;
  overflow-y: auto;
}

/* Só a base fica larga. Espaço a mais é o único jeito de afastar os lotes sem
   encolher o prédio — dentro de uma largura fixa, um sempre come o outro. Os
   painéis de texto continuam estreitos, que é onde se lê melhor. */
.painel-conteudo.largo {
  width: min(1100px, 95vw);
}

.painel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.btn-modo {
  background: #24382c;
  border: 1px solid #3a5a45;
  color: #cfe3d2;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-modo:hover {
  background: #2d4636;
}

/* Ligado tem que ser óbvio à distância: o jogador precisa saber em que modo está
   antes de clicar, não depois. */
.btn-modo.ativo {
  background: #3fa9f5;
  border-color: #7fc9ff;
  color: #08203a;
  font-weight: bold;
}

.btn-fechar {
  background: none;
  border: none;
  color: #eee;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}

.recursos-linha {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 15px;
  flex-wrap: wrap;
}

/* --- A faixa de recursos, flutuando sobre a vila -------------------------- */

/* Era um cabeçalho e uma linha empurrando o canvas para baixo; hoje os dois
   flutuam por cima do topo da vila, com um véu atrás para o número continuar
   legível sobre o desenho. O celular deitado já fazia assim, e é o arranjo de
   todo jogo de base: a vila é o assunto, o resto é sobreposição.

   O véu é um gradiente e não uma cor chapada — uma faixa com aresta lê como
   barra de ferramentas colada no desenho, e some quando desbota para o nada. */
/* A faixa não tem véu próprio: ela é só o container que empilha os recursos e,
   abaixo deles, a engrenagem. Quem carrega o véu é a linha de cima. */
.faixa-base {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  /* O fundo é atravessável: o clique tem de chegar aos lotes que ficam embaixo
     dele. Só os filhos que respondem a clique reativam o ponteiro. */
  pointer-events: none;
}

/* O VÉU MORA AQUI, e não na faixa inteira. Envolvendo tudo, ele descia até
   depois da engrenagem — um bom pedaço de vila coberto sem ter nada a esconder,
   já que a engrenagem tem fundo próprio. Cobrindo só a linha de recursos, ele
   acaba onde o texto acaba.

   O rodapé de 6px é a distância em que o gradiente desbota; sem ele o véu
   termina numa aresta reta, que lê como barra colada no desenho. */
.faixa-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 10px 3px;
  /* O véu fica cheio até quase o fim e desbota nos últimos 12%. Antes ele
     começava a clarear em 74%, o que punha o desbote em cima da segunda linha
     de recursos — o número perdia fundo justamente onde precisava dele. */
  background: linear-gradient(to bottom, rgba(10, 16, 12, 0.74) 88%, rgba(10, 16, 12, 0));
  border-radius: 8px 8px 0 0;
}

/* Duas caixas, e não uma só que quebra: o ouro fica fixo à esquerda e os comuns
   quebram DENTRO do bloco deles. Numa caixa só, a segunda linha começava na
   margem — ou seja, embaixo do ouro —, e alinhar recurso comum por baixo da
   moeda sugeria que a coluna começava ali. Assim ela começa na carne. */
.faixa-base .recursos-linha {
  margin: 0;
  flex-wrap: nowrap;
  align-items: flex-start;
  column-gap: 12px;
  font-size: 14px;
  flex: 1;
}

.recursos-comuns {
  display: flex;
  flex-wrap: wrap;
  /* Duas folgas diferentes de propósito: entre um recurso e o vizinho o espaço
     separa, mas ENTRE AS LINHAS ele só empurra a vila para baixo. */
  column-gap: 12px;
  row-gap: 1px;
  flex: 1;
}

/* Ícone e número na mesma linha de base. Sem isto o número assenta no rodapé do
   ícone e cada par fica com uma altura, o que se lê como fileira torta.
   Sem o `>`: os comuns estão um nível abaixo, dentro de `.recursos-comuns`. */
.faixa-base .recursos-linha span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
}

/* O ouro é o primeiro da fila e ganha uma cápsula com anel dourado. É o único
   recurso que se gasta com gente de fora, e o único que um dia virá da loja —
   vale ser o que o olho acha primeiro.

   Marcado por `data-recurso` e não pela POSIÇÃO (`:first-child`): a ordem sai de
   `ORDEM_DOS_TIPOS`, e amarrar o estilo a ela faria o destaque migrar para outro
   recurso no dia em que alguém reordenasse a tabela. */
#hud [data-recurso='ouro'],
.recursos-linha [data-recurso='ouro'] {
  background: rgba(60, 44, 10, 0.75);
  border: 1px solid #c9a227;
  border-radius: 999px;
  padding: 2px 9px 2px 6px;
}

/* Na HUD os itens são `inline`, então a cápsula precisa da caixa para o anel
   não cortar o ícone no topo e embaixo. */
#hud [data-recurso='ouro'] {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
}

.faixa-base .btn-fechar {
  pointer-events: auto;
  flex: none;
}

/* --- A engrenagem e o menu dela ------------------------------------------- */

/* Mover edifícios e trocar a cor são ajustes que se fazem uma vez; ocupando
   espaço fixo no topo, eles competiam com a vila o tempo todo. Aqui embaixo da
   faixa, no canto, ficam à mão sem ficar no caminho.

   Fica DENTRO da faixa, e não posicionado por cima dela com um `top` fixo: a
   linha de recursos quebra em duas quando o estoque tem doze itens, e um `top`
   escrito à mão punha a engrenagem em cima dos números na hora em que isso
   acontecia. No fluxo, ela desce sozinha. */
/* Fora do véu, logo abaixo dele. A margem à esquerda repete o padding da linha
   de recursos, para a engrenagem alinhar com o primeiro ícone. */
.ferramentas-base {
  position: relative;
  z-index: 4;
  margin: 4px 0 0 10px;
  width: fit-content;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Concluir fica FORA do menu, ao lado da engrenagem. Ele é o fim de uma tarefa
   em curso — quem está arrastando prédios precisa alcançá-lo direto, e não
   reabrir a gaveta de onde entrou no modo. */
.btn-concluir-edicao {
  background: #23402f;
  border: 1px solid #5fbf7f;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-concluir-edicao:hover {
  background: #2c5039;
}

/* `inline-flex` e não só `text-align`: o emoji tem métricas próprias e não fica
   no meio do botão só por estar centrado no texto — sobra a descida da fonte
   embaixo, e ele assenta alto. Centrar pela caixa resolve nos dois eixos. */
.btn-config {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  background: rgba(14, 24, 19, 0.88);
  border: 1px solid #2a4033;
  border-radius: 8px;
  cursor: pointer;
}

.btn-config:hover {
  background: rgba(26, 44, 34, 0.95);
}

/* Enquanto o modo de mover está ligado, a engrenagem fica acesa: é o único
   aviso de que o próximo arrasto move um prédio em vez de passear pela vila. */
.btn-config.ativo {
  border-color: #5fbf7f;
  background: #23402f;
}

.menu-config {
  position: absolute;
  top: 42px;
  left: 0;
  width: 190px;
  padding: 8px;
  background: #16241c;
  border: 1px solid #2a4033;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

.menu-config.escondido {
  display: none;
}

.menu-config > button {
  width: 100%;
  text-align: left;
}

.menu-config > button.ativo {
  background: #23402f;
  border-color: #5fbf7f;
}

.menu-secao {
  margin: 10px 0 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9fb8a8;
}

#base-canvas {
  display: block;
  margin: 0 auto 16px;
  cursor: default;
  /* O canvas é mais largo que o painel. Sem isto ele vaza para fora em vez de
     encolher, e a conta de posição do mouse em base.js já divide pelo tamanho
     real na tela, então reduzir por CSS não desalinha o clique. */
  max-width: 100%;
  height: auto;
}

/* A telinha da direita fica POR CIMA da borda do canvas, e o palco é o que dá a
   ela um canto para se ancorar. Ao lado não dá: o canvas tem 830px e o painel
   849 úteis, então abrir espaço lateral significaria encolher o bitmap — e é
   exatamente isso que borra terreno, sprite e rótulo (armadilha 9). */
.palco-base {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto 16px;
}

.palco-base #base-canvas {
  margin: 0;
}

/* Só quando a cena não cabe: aí o dedo passeia pela base em vez de rolar o
   painel. Quando ela cabe, a classe sai e o dedo volta a rolar normalmente. */
#base-canvas.pode-passear {
  touch-action: none;
}

/* Por cima do canvas, no canto de baixo à esquerda: a telinha de edifícios já
   ocupa a direita, e o alto tem os rótulos dos prédios do fundo. */
.zoom-base {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.zoom-base button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #3d5a45;
  border-radius: 6px;
  background: rgba(20, 30, 24, 0.82);
  color: #cfe0d2;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.zoom-base button:hover:not(:disabled) {
  background: rgba(38, 56, 44, 0.92);
}

.zoom-base button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Começa ABAIXO da faixa de recursos, e não atrás dela. A altura da faixa varia
   (a linha de recursos quebra em duas com doze itens), então ela é medida no JS
   e chega aqui por `--topo-da-lateral`; o fallback vale para o primeiro quadro,
   antes da medição. */
.painel-lateral {
  position: absolute;
  top: var(--topo-da-lateral, 96px);
  right: 10px;
  bottom: 10px;
  width: 268px;
  display: flex;
  flex-direction: column;
  background: rgba(12, 22, 17, 0.94);
  border: 1px solid #33513f;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.painel-lateral.fechada,
.btn-abrir-lateral.fechada {
  display: none;
}

.lateral-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 6px 8px 10px;
  border-bottom: 1px solid #2a4033;
  background: #16241c;
}

.lateral-topo h3 {
  margin: 0;
  font-size: 15px;
}

.btn-fechar-lateral,
.btn-abrir-lateral {
  background: #22352a;
  color: #cfe0d4;
  border: 1px solid #33513f;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
}

/* A aba de reabrir vive no mesmo canto que a telinha ocupava, para o olho ir
   procurá-la onde ela sumiu — inclusive na altura, abaixo da faixa. */
.btn-abrir-lateral {
  position: absolute;
  top: var(--topo-da-lateral, 96px);
  right: 10px;
  padding: 6px 10px;
}

.lateral-corpo {
  overflow-y: auto;
  padding: 10px;
  /* No toque quem rola é o navegador, e `pan-y` é o que diz a ele para continuar
     fazendo isso mesmo com os ouvintes de ponteiro pendurados aqui. */
  touch-action: pan-y;
}

/* A mão aberta só aparece quando há o que rolar: convidar a arrastar uma lista
   que já cabe inteira é prometer o que não acontece. */
.lateral-corpo.rolavel {
  cursor: grab;
}

/* Enquanto arrasta, a mão fecha e o texto para de ser selecionado — sem isto o
   arrasto pinta a lista inteira de azul. */
.painel-lateral.arrastando .lateral-corpo {
  cursor: grabbing;
  user-select: none;
}

.lista-lateral {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

/* Uma linha por item: foto à esquerda, o resto à direita. Uma coluna só, porque
   com 250px de texto duas colunas não cabem sem cortar o nome. */
.item-lateral {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 8px;
  align-items: start;
  background: #14201a;
  border: 1px solid #2a4033;
  border-radius: 8px;
  padding: 8px;
}

.item-lateral.item-bloqueado {
  opacity: 0.55;
}

.item-corpo h4 {
  margin: 0 0 3px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: baseline;
}

.item-lateral p {
  margin: 2px 0;
  font-size: 12px;
}

.item-lateral button {
  margin-top: 4px;
  padding: 5px 12px;
  font-size: 13px;
}

/* Pixel art reduzida: sem o `pixelated` o navegador interpola e a miniatura
   fica embaçada, que é o oposto do que uma foto de 54px precisa ser. */
.miniatura {
  width: 54px;
  height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
  background: #0e1813;
  border: 1px solid #24352b;
  border-radius: 6px;
}

.miniatura.vazia,
.miniatura.emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #7f9184;
  box-sizing: border-box;
}

/* A sigla de quem ainda não tem arte tem duas letras (ver `iniciais` em
   sprites.js), e no tamanho do emoji elas transbordariam a miniatura — que em
   alguns lugares tem 34px. Menor e mais apertada, ela cabe em todos. */
.miniatura.vazia {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* A fila de treino: uma fileira de fotos em vez de duas frases. Rola de lado
   quando a fila é longa, para não empurrar os cards de tropa para baixo. */
.fila-treino {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 4px;
}

/* O item em curso também é um `.progresso-tarefa`, e aquela regra tem
   `margin-top: 10px` — pensada para o bloco de texto que fica embaixo de outra
   coisa. Aqui ela descia só ele, e a fileira saía com um degrau. */
.fila-item.progresso-tarefa {
  margin-top: 0;
}

.fila-item {
  position: relative;
  flex: 0 0 auto;
  line-height: 0; /* tira o vão que a img inline deixaria embaixo */
  cursor: pointer;
}

/* O item de fila é clicável (tira um da fila), e precisa dizer isso ao passar o
   mouse — sem resposta nenhuma, ninguém descobre que dá para cancelar. */
.fila-item:hover .miniatura {
  border-color: #e05252;
}

.fila-item:hover::after {
  content: '×';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(224, 82, 82, 0.35);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  border-radius: 6px;
}

.fila-item .miniatura {
  width: 46px;
  height: 46px;
}

.fila-item.em-treino .miniatura {
  border-color: #3fa9f5;
}

/* Selo no canto de baixo à direita, como num inventário. Dentro da foto, e não
   transbordando dela: a fileira rola de lado, e o que passa da borda é cortado
   pelo `overflow`. O z-index é para ele ficar por cima da barra de progresso,
   que corre rente ao mesmo rodapé. */
.fila-qtd {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: #3fa9f5;
  color: #0d1712;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
}

.fila-tempo {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(13, 23, 18, 0.82);
  color: #cfe0d4;
  font-size: 10px;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 4px 0 4px 0;
}

/* A barra fica DENTRO da foto, rente ao rodapé: fora dela viraria mais uma
   linha, que é justamente o que esta mudança veio tirar. */
.fila-item.em-treino .barra-progresso {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 4px;
  margin: 0;
}

/* Só símbolo e número, em duas colunas fixas. Com `flex-wrap` a quebra saía onde
   desse — três símbolos numa linha e um sozinho na outra, diferente em cada
   tropa porque depende da largura do número. Em grade, todas as fichas quebram
   no mesmo lugar e as colunas alinham entre um item e o seguinte. */
.ficha-curta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 6px;
  color: #b7c8ba;
}

.resumo-lateral {
  margin: 0 0 6px;
  font-size: 14px;
}

.resumo-lateral span {
  display: block;
  color: #99a89d;
  font-size: 12px;
}

.dica-edificio {
  text-align: center;
  color: #99a89d;
  font-style: italic;
}

.edificio-card {
  background: #14201a;
  border: 1px solid #2a4033;
  border-radius: 8px;
  padding: 12px 14px;
}

.edificio-card h3 {
  margin: 0 0 6px;
  display: flex;
  justify-content: space-between;
}

.nivel {
  color: #3fa9f5;
  font-size: 13px;
}

.custo {
  color: #c9b458;
  font-size: 13px;
}

.edificio-card button,
.treino-soldado button,
.confirm-box button {
  background: #3fa9f5;
  color: #0d1712;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 600;
}

.edificio-card button:disabled,
.treino-soldado button:disabled {
  background: #46574d;
  color: #99a89d;
  cursor: not-allowed;
}

.treino-soldado {
  margin-top: 16px;
  border-top: 1px solid #2a4033;
  padding-top: 12px;
}

/* `.receita` sobreviveu à telinha lateral só por causa de `receita-bloqueada`,
   que o painel de ataque usa para apagar uma tropa que acabou. O resto das
   regras vale para os cards antigos que ainda existem fora da base. */
.receita {
  background: #14201a;
  border: 1px solid #2a4033;
  border-radius: 8px;
  padding: 10px 12px;
}

.receita h4 {
  margin: 0 0 4px;
  display: flex;
  justify-content: space-between;
}

.receita p {
  margin: 4px 0;
  font-size: 14px;
}

.receita button {
  background: #3fa9f5;
  color: #0d1712;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 600;
}

.receita button:disabled {
  background: #46574d;
  color: #99a89d;
  cursor: not-allowed;
}

.receita-bloqueada {
  opacity: 0.55;
}

.requisito {
  color: #c9b458;
  font-style: italic;
}

.progresso-tarefa {
  margin-top: 10px;
}

.titulo-seletor {
  margin: 16px 0 8px;
  font-size: 15px;
}


/* --- Montagem do exército: paleta em cima, grade embaixo --- */

/* A paleta é o "quanto tem de cada", em foto. Rola de lado quando há muitos
   tipos, para não empurrar a grade para fora da tela. */
/* As vagas que o ponto de coleta EXIGE. Ficam antes da paleta e com moldura
   própria porque não são a mesma coisa que ela: a paleta é o que o jogador pode
   levar, isto é o que o lugar cobra para deixar partir. */
.bloco-vagas {
  border: 1px solid #2a4033;
  border-left: 3px solid #6b8f3a;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 6px 0 10px;
  background: #131d17;
}

/* Incompleto fica âmbar, não vermelho: não é erro, é uma condição que falta. */
.bloco-vagas.incompleto {
  border-left-color: #d7a83c;
}

.vagas-titulo {
  font-size: 0.82rem;
  color: #b9c9b4;
  margin-bottom: 6px;
}

.vagas-fileira {
  display: flex;
  gap: 8px;
}

.vaga-explorador {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #3a5a45;
  border-radius: 8px;
  background: #101a14;
  cursor: pointer;
  line-height: 0;
}

.vaga-explorador.cheia {
  border-style: solid;
  border-color: #6b8f3a;
  background: #16241a;
}

.vaga-explorador:hover {
  border-color: #8fbf5a;
}

/* Vaga que o jogador não tem como preencher: não adianta convidar ao clique. */
.vaga-explorador.sem-tropa {
  opacity: 0.45;
  cursor: not-allowed;
}

.vaga-vazia {
  font-size: 1.5rem;
  color: #3a5a45;
  line-height: 1;
}

.vagas-aviso {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: #93a68f;
}

.bloco-vagas.incompleto .vagas-aviso {
  color: #d7a83c;
}

.paleta-tropas {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
}

.paleta-item {
  position: relative;
  flex: 0 0 auto;
  background: #14201a;
  border: 2px solid #2a4033;
  border-radius: 8px;
  padding: 4px;
  line-height: 0;
  cursor: pointer;
}

.paleta-item:hover:not(:disabled) {
  border-color: #3a5a45;
}

/* A tropa ativa é a "tinta" do pincel, e precisa saltar: sem ela marcada, o
   clique na grade parece não ter regra nenhuma. */
.paleta-item.ativo {
  border-color: #3fa9f5;
  box-shadow: 0 0 0 2px rgba(63, 169, 245, 0.3);
}

.paleta-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.paleta-item .miniatura {
  width: 52px;
  height: 52px;
}

.campo-montagem {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Na defesa tudo encosta na direita, porque é lá que quem defende fica no campo
   de batalha — a grade no painel passa a ocupar o mesmo canto que o exército
   ocupa na luta. */
.campo-montagem.do-defensor,
.paleta-tropas.do-defensor {
  justify-content: flex-end;
}

/* E as figuras olham para a esquerda, que é de onde o inimigo vem. A arte é
   desenhada olhando para a direita, então quem defende é sempre espelhado —
   mesmo motivo da guarnição da Torre na vista da base. */
.campo-montagem.do-defensor .miniatura,
.paleta-tropas.do-defensor .miniatura {
  transform: scaleX(-1);
}

/* A grade tem a proporção da faixa que o atacante ocupa no campo: estreita e
   alta. Deixá-la quadrada mentiria sobre onde as tropas vão parar. */
/* Célula de tamanho FIXO, e não `1fr`: com fração, a grade esticava para a
   largura do painel e seis colunas viravam quadrados de 90px, com metade das
   fileiras fora da tela. O JS só diz quantas colunas são; o tamanho é daqui. */
.grade-batalha {
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), 38px);
  width: fit-content;
  gap: 3px;
  background: #101a15;
  border: 1px solid #2a4033;
  border-radius: 8px;
  padding: 6px;
  /* O gesto do pincel é nosso: sem isto o dedo rolaria o painel no lugar de
     posicionar. */
  touch-action: none;
  user-select: none;
}

.posto-batalha {
  aspect-ratio: 1;
  border: 1px dashed #2f4a39;
  border-radius: 5px;
  line-height: 0;
  cursor: pointer;
}

/* As três faixas continuam existindo por baixo — a coluna é o que decide se a
   tropa conta como frente, meio ou fundo para as regras de alvo. Um fundo de cor
   diferente por faixa é o que deixa isso visível sem escrever nada. */
.posto-batalha.faixa-fundo {
  background: rgba(63, 169, 245, 0.05);
}

.posto-batalha.faixa-meio {
  background: rgba(201, 180, 88, 0.05);
}

.posto-batalha.faixa-frente {
  background: rgba(224, 82, 82, 0.07);
}

.posto-batalha:hover {
  border-style: solid;
  border-color: #3fa9f5;
}

.posto-batalha.ocupado {
  border-style: solid;
  border-color: #3a5a45;
  background: #16241c;
}

.posto-batalha .miniatura {
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  border-radius: 4px;
}

/* A palavra deitada cabe na coluna estreita ao lado da grade; a seta NÃO pode
   deitar junto, senão ela gira com o texto e passa a apontar para baixo em vez
   de para o inimigo. Por isso cada uma no seu modo de escrita. */
.rumo-inimigo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #7f9184;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rumo-inimigo span {
  writing-mode: vertical-rl;
}

.resumo-ataque {
  margin-top: 14px;
}

.aviso-desguarnecida {
  color: #e0a052;
  font-weight: 600;
}

.banner-area {
  position: fixed;
  top: 212px; /* logo abaixo do minimapa */
  right: 16px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(420px, 90vw);
}

.banner-relatorio {
  background: #1c2b22;
  border: 1px solid #2a4033;
  border-left: 4px solid #3fa9f5;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.banner-relatorio .btn-fechar {
  font-size: 18px;
  margin-left: auto;
}

.lista-relatorios {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.relatorio-item {
  background: #14201a;
  border: 1px solid #2a4033;
  border-left: 4px solid #6fd66f;
  border-radius: 8px;
  padding: 10px 12px;
}

.relatorio-item.perdeu {
  border-left-color: #e05252;
}

.relatorio-item h4 {
  margin: 0 0 4px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.relatorio-item p {
  margin: 4px 0;
  font-size: 14px;
}

.quando {
  color: #99a89d;
  font-size: 12px;
  font-weight: 400;
}

/* Os dois exércitos lado a lado no relatório. Em duas colunas de propósito: é
   uma comparação, e comparar em lista vertical obriga a lembrar de cabeça o que
   estava em cima. Abaixo de 520px a coluna vira linha e elas empilham. */
.confronto-relatorio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  margin: 8px 0;
  padding: 8px 10px;
  background: #101a15;
  border: 1px solid #24352b;
  border-radius: 6px;
}

@media (max-width: 520px) {
  .confronto-relatorio {
    grid-template-columns: 1fr;
  }
}

.lado-relatorio h5 {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #7f9184;
}

.quartel-relatorio {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: #9fb0a3;
}

.tropas-relatorio {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 !important;
  font-size: 13px !important;
  color: #b7c8ba;
}

.tropas-relatorio em {
  color: #7f9184;
}

.tropa-relatorio b.baixa {
  color: #e0a052;
  font-weight: 600;
}

/* Tipo apagado por inteiro: vermelho, porque "−4" de quatro é outra notícia. */
.tropa-relatorio b.dizimado {
  color: #e05252;
  font-weight: 600;
}

/* Composição da guarnição inimiga, no painel de ataque. Vem em linhas separadas
   porque é isso que o jogador precisa ler para escolher onde põe as dele. */
.guarnicao {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 13px;
  color: #b7c8ba;
  margin: 2px 0 8px;
}

.guarnicao b {
  color: #7f9184;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.4px;
  margin-right: 4px;
}

/* --- Tela de assistir à batalha --- */

/* Sem max-width aqui de propósito: o canvas tem tamanho fixo e o painel largo
   foi dimensionado para caber nele. Deixar o navegador encolher borraria o texto
   dos rótulos (armadilha 9 do CLAUDE.md). */
#replay-canvas {
  display: block;
  margin: 10px auto 0;
  border-radius: 8px;
}

.replay-controles {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.replay-controles input[type='range'] {
  flex: 1;
  accent-color: #6fd66f;
  cursor: pointer;
}

.replay-controles [data-acao='velocidade'] {
  min-width: 48px;
}

.replay-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  color: #b7c8ba;
  margin-bottom: 12px;
}

.replay-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.replay-legenda i {
  width: 11px;
  height: 11px;
  border-radius: 2px;
}

.barra-progresso {
  background: #14201a;
  border: 1px solid #2a4033;
  border-radius: 6px;
  height: 14px;
  overflow: hidden;
  margin: 8px 0;
}

.barra-progresso > div {
  background: #3fa9f5;
  height: 100%;
}

.buff-ativo {
  color: #6fd66f;
}

.feridos {
  color: #e0a052;
}

.resultado-combate {
  margin-top: 14px;
}

.vitoria {
  color: #6fd66f;
}

.derrota {
  color: #e05252;
}

/* ---------------------------------------------------------------------------
   Celular deitado: a base vira TELA CHEIA e a HUD flutua por cima.

   O corte é por ALTURA porque quem manda numa tela deitada é o eixo curto. Só a
   base entra nesse modo — os painéis de texto continuam modais centrados, que é
   onde se lê melhor. A classe vem do JS (`base-compacta`), e não de um
   `@media` sozinho, porque o dimensionamento do canvas precisa da mesma
   decisão: CSS e bitmap discordarem é a armadilha 9.

   Vem DEPOIS das regras que sobrescreve: media query não soma especificidade,
   e a de baixo é que vence.
   --------------------------------------------------------------------------- */
@media (max-height: 559px) {
  body.base-compacta .painel-conteudo.largo {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    padding: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
  }

  /* A faixa flutuante já é o padrão em todo tamanho de tela; aqui ela só
     aperta, porque a altura é o que falta. */
  body.base-compacta .faixa-topo {
    padding: 3px 8px 6px;
    border-radius: 0;
  }

  body.base-compacta .ferramentas-base {
    margin-left: 8px;
  }

  body.base-compacta .faixa-base .recursos-linha {
    gap: 8px;
    font-size: 12px;
  }

  body.base-compacta .btn-config {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  body.base-compacta .palco-base {
    margin: 0;
    width: 100%;
  }

  body.base-compacta #base-canvas {
    border: none;
    margin: 0;
  }

  /* A telinha de edifícios vira gaveta: cobre parte da vila, não tudo. Com os
     268px fixos ela tapava um canvas de 280 por inteiro. */
  body.base-compacta .painel-lateral {
    width: min(46vw, 300px);
    max-height: 100%;
  }
}

/* Os botões do cabeçalho vão para a ESQUERDA no compacto. A gaveta de edifícios
   encosta na direita, e o X ficava colado nela — perto demais de uma lista que
   rola, que é o jeito de errar o toque. À esquerda o canto está livre. */
@media (max-height: 559px) {
  body.base-compacta .painel-conteudo.largo > .painel-header {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
  }

  body.base-compacta .painel-conteudo.largo > .painel-header h2 {
    margin: 0;
  }

  /* Os painéis de TEXTO (ataque, exército, relatórios, replay) continuam
     modais, mas numa tela de 375px de altura eles precisam da tela inteira para
     caber — a tabela do exército tem 22 linhas e a grade de ataque tem 54
     quadros. Aqui não há bitmap envolvido, então basta o `@media`: é só
     tipografia e espaçamento, e nada pode discordar do JS. */
  .painel-conteudo:not(.largo) {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    padding: 8px 12px;
    border: none;
    border-radius: 0;
  }

  .painel-conteudo:not(.largo) .painel-header {
    position: sticky;
    top: -8px;
    z-index: 2;
    padding: 4px 0;
    background: #1c2b22;
  }

  .painel-conteudo:not(.largo) .painel-header h2 {
    font-size: 16px;
    margin: 0;
  }

  /* A tabela do exército: 22 linhas mais oito cabeçalhos de família não cabem
     em 375px com a tipografia de desktop. Encolhe o texto e o respiro; a
     rolagem cuida do resto. */
  .tabela-exercito {
    font-size: 12px;
    margin-top: 6px;
  }

  .tabela-exercito th,
  .tabela-exercito td {
    padding: 3px 5px;
  }

  .tabela-exercito tbody tr.grupo-exercito td {
    padding-top: 7px;
  }

  /* No painel de ataque, o que ocupa altura é a paleta de fotos em cima da
     grade. Menores, as duas cabem sem rolagem na maioria dos casos. */
  .paleta-tropas {
    gap: 4px;
  }

  .paleta-item {
    width: 44px;
    height: 44px;
  }

  .titulo-seletor {
    margin: 6px 0 4px;
    font-size: 14px;
  }

  .resumo-poder {
    margin-top: 8px;
    padding: 7px 10px;
    gap: 10px;
  }

  .resumo-poder strong {
    font-size: 15px;
  }
}

/* O topo do painel de ataque gastava 190px em texto antes de a grade começar —
   metade da altura de um celular deitado. Os parágrafos perdem o respiro e a
   dica longa some: ela explica uma regra que se aprende vendo a batalha, e no
   estreito o espaço vale mais que a explicação. O que fica é o que muda a
   decisão: quem guarda, o que se ganha, e quanto tempo leva. */
@media (max-height: 559px) {
  .painel-conteudo:not(.largo) p {
    margin: 3px 0;
    font-size: 13px;
  }

  .painel-conteudo:not(.largo) .dica-edificio {
    margin: 2px 0;
    font-size: 12px;
  }

  .painel-conteudo:not(.largo) .dica-expedicao {
    display: none;
  }

  .painel-conteudo:not(.largo) h3 {
    margin: 5px 0 3px;
  }
}

/* Amostras de cor da vila, dentro do menu da engrenagem. Bolinhas pequenas: é
   uma escolha que se faz uma vez e depois só se olha — foi por isso que ela
   saiu do cabeçalho, onde ocupava espaço fixo em cima da vila. */
.cores-jogador {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.amostra-cor {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  cursor: pointer;
}

.amostra-cor.ativa {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

/* O que o próximo nível faz, logo acima do preço. Verde porque é o ganho, não o
   custo — e a telinha tem 166px de texto, então a frase precisa ser curta o
   bastante para caber em duas linhas. */
.ganho-nivel {
  margin: 6px 0 2px;
  font-size: 12px;
  color: #9fd8b4;
  line-height: 1.35;
}

/* O ícone de um recurso, que substituiu os emojis. A arte tem 64px e aparece em
   tamanhos que vão de 11px (o selo de tempo) a 54px (a foto na telinha), então
   ela é sempre REDUZIDA — nunca ampliada, que é o que borra.

   Medido em `em`: assim o ícone acompanha o texto em que estiver, sem uma classe
   por lugar. O `vertical-align` negativo assenta a figura na linha de base; sem
   ele ela flutua acima do número que acompanha.

   `image-rendering: auto` é o ponto que não pode faltar. A propriedade é
   HERDADA, e `.miniatura` usa `pixelated` para os sprites do jogo — que são
   pixel art e pedem isso. Estes ícones não são: são ilustração com contorno
   suave, e reduzidos com nearest-neighbor saem serrilhados. */
.ico-rec {
  display: inline-block;
  /* 1,65em dá 25px na fonte de 15px da HUD. Em 1,25 (o primeiro valor) a arte
     sumia no meio do número; medido, a diferença de altura entre os dois é de
     10px na HUD e 12px na linha de recursos da base — o salto grande é ANTES
     disso, quando a linha da base quebra de três para quatro linhas, e esse já
     acontece em 1,45. */
  width: 1.65em;
  height: 1.65em;
  vertical-align: -0.37em;
  object-fit: contain;
  image-rendering: auto;
}

/* Na foto da telinha e na fila, o ícone preenche a miniatura em vez de ficar
   pequeno no meio dela. `.miniatura.emoji` é um flex centralizado; o `em` de
   cima daria o tamanho do texto, não o da caixa. */
.miniatura.emoji .ico-rec {
  width: 88%;
  height: 88%;
}

/* --- O mural do Mercado --------------------------------------------------- */

/* Mesmo bloco do resumo do exército, com um nome próprio porque aqui são três
   números e não quatro, e eles se repartem por igual. */
.mercado-topo {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
  background: #14201a;
  border: 1px solid #2a4033;
  border-radius: 8px;
  padding: 12px 14px;
}

.mercado-topo strong {
  font-size: 18px;
}

.form-anuncio {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  background: #14201a;
  border: 1px solid #2a4033;
  border-radius: 8px;
  padding: 10px 12px;
}

/* O rótulo vai dentro de um <span>: numa coluna flex, texto solto e elemento
   viram DOIS itens, e "Por" ficava numa linha com a moedinha na de baixo,
   empurrando o campo para fora do alinhamento do vizinho. */
.form-anuncio label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: #9fb8a8;
}

.form-anuncio label > span {
  white-space: nowrap;
}

.form-anuncio input {
  width: 88px;
  padding: 5px 7px;
  background: #0f1a14;
  color: #e8f0ea;
  border: 1px solid #2a4033;
  border-radius: 5px;
  font-size: 14px;
}

.form-anuncio select {
  padding: 6px 8px;
  background: #0f1a14;
  color: #e8f0ea;
  border: 1px solid #2a4033;
  border-radius: 5px;
  font-size: 14px;
  max-width: 220px;
}

/* Ocupa a linha inteira: a dica muda de tamanho conforme o que está escrito, e
   no meio da fileira ela empurraria o botão de lugar a cada tecla. */
.form-anuncio .anuncio-dica {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 12px;
  color: #9fb8a8;
  min-height: 16px;
}

/* A fileira de procura. Quebra em várias linhas em vez de rolar de lado: são
   poucas fichas, e uma que fique escondida fora da tela é uma que o jogador não
   sabe que existe. */
.procura-mercado {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.ficha-procura {
  padding: 4px 9px;
  font-size: 13px;
  background: #14201a;
  border: 1px solid #2a4033;
  border-radius: 999px;
  cursor: pointer;
  color: #e8f0ea;
}

.ficha-procura small {
  color: #9fb8a8;
  margin-left: 2px;
}

.ficha-procura.ativa {
  background: #23402f;
  border-color: #5fbf7f;
}

.ficha-procura.ativa small {
  color: #cfe6d8;
}

.resumo-recurso {
  margin: 0 0 8px;
  padding: 8px 10px;
  background: #14201a;
  border: 1px solid #2a4033;
  border-left: 4px solid #5fbf7f;
  border-radius: 6px;
  font-size: 14px;
}

.resumo-recurso small {
  color: #9fb8a8;
}

.lista-ofertas {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Grade, e não flex: as quatro colunas de todas as linhas têm de se alinhar
   entre si, senão a coluna de preço fica serrilhada conforme o nome do recurso.
   O item cresce, o resto tem largura própria. */
.oferta {
  display: grid;
  grid-template-columns: 1fr auto minmax(96px, auto) auto;
  align-items: center;
  gap: 10px;
  background: #14201a;
  border: 1px solid #2a4033;
  border-left: 4px solid #2a4033;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 14px;
}

.oferta-barata {
  border-left-color: #5fbf7f;
}

.oferta-cara {
  border-left-color: #c98a3c;
}

.oferta-minha {
  border-left-color: #3fa9f5;
}

.oferta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.oferta-icone {
  font-size: 18px;
}

.oferta-vendedor {
  font-size: 12px;
  color: #9fb8a8;
}

.oferta-preco {
  text-align: right;
}

.oferta-preco small {
  display: block;
  font-size: 11px;
  color: #9fb8a8;
}

.oferta button {
  padding: 5px 12px;
  font-size: 13px;
}

.btn-cancelar-anuncio {
  background: #3a2a22;
  border-color: #5a4030;
}

/* Numa tela estreita as quatro colunas não cabem. Vira duas linhas: em cima o
   que está à venda e o botão, embaixo quem vende e por quanto. Os quatro ficam
   com posição explícita — deixar o fluxo automático acomodá-los põe o botão
   embaixo, longe do item a que ele pertence. */
@media (max-width: 560px) {
  .oferta {
    grid-template-columns: 1fr auto;
  }

  .oferta-item {
    grid-area: 1 / 1;
  }

  .oferta button {
    grid-area: 1 / 2 / span 2 / 3;
    align-self: center;
  }

  .oferta-vendedor {
    grid-area: 2 / 1;
  }

  /* Sem botão (um anúncio já vendido não tem), o preço volta para a coluna 2. */
  .oferta-preco {
    grid-area: 2 / 1;
    text-align: right;
  }
}