/* Paleta XILOGRAVURA (#95 f4) — a mesma da arte do tabuleiro: papel-cru, tinta,
 * vermelho queimado (acento, exclusivo do "lado da aldeia") e verde-mata. A UI
 * vira blocos de impressão: superfícies de papel com tinta, em volta de um
 * fundo de tinta quente (a "mesa" da gravura). */
:root {
  --papel: #efe3c8;
  --papel-dim: #e2d4b4;       /* papel pressionado/inativo */
  --tinta: #1a1512;
  --tinta-suave: #4a4035;     /* texto secundário sobre papel */
  --verm: #bf4b2b;
  --verm-escuro: #993a1e;    /* vermelho p/ TEXTO PEQUENO sobre papel (contraste AA) */
  --verde-mata: #5a6b3a;
  --gold: #f2c94c;            /* legado: faíscas/realces no canvas (FX, fase 5) */
  --danger: #e63946;
  --panel: var(--papel);
  --panel-border: var(--tinta);
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background: #14100c;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--papel);
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* coluna: barra de cima | tabuleiro | barra de baixo — barras NÃO cobrem o jogo */
#game-wrap {
  display: flex;
  flex-direction: column;
  width: min(100vw, 540px);
  height: 100vh;
  height: 100svh;   /* altura ESTÁVEL: não muda quando a barra do navegador aparece/some */
  margin: auto;
  user-select: none;
  touch-action: manipulation;
}

/* ---- Tabuleiro ---- */
#stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  /* tabuleiro colado no HUD (#118): toda a folga (letterbox) se consolida
   * ABAIXO — o painel do guardião vive na área livre em vez de cobrir as
   * últimas fileiras (em telas sem folga, overlay continua como fallback) */
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
#game {
  display: block;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 600 / 900;
  border-radius: 10px;
  background: var(--papel); /* flash de carregamento já em papel, não verde */
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.6);
}

/* ---- Barras de HUD (fluxo normal, não absolutas) ---- */
.hud {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
/* o topbar NUNCA quebra em 2 linhas — senão cresceria em altura e encolheria o
 * tabuleiro (que mantém a proporção 600/900, encolhendo nos dois eixos). Se faltar
 * largura (números altos em telas estreitas), rola na horizontal em vez de quebrar. */
#topbar {
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;            /* esconde a barra de rolagem (Firefox) */
}
#topbar::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
#topbar .stat,
#topbar #util-cluster,
#topbar .mini-btn { flex: 0 0 auto; }          /* não deformam nem somem */
/* utilitários no canto discreto (#124): empurrados p/ a direita (separados da
   info) e menores — controle secundário, não compete com os 4 chips de info.
   Em telas estreitas o margin-left:auto recolhe e tudo rola junto (sem buraco). */
#util-cluster { display: flex; align-items: center; gap: 4px; margin-left: auto; }
#util-cluster .mini-btn { font-size: 12px; padding: 4px 7px; border-width: 1px; opacity: 0.82; }
#bottombar { flex-direction: column; gap: 6px; }
#bottombar.disabled { opacity: 0.4; pointer-events: none; filter: grayscale(0.4); }

.stat {
  background: var(--papel);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 700;
  color: var(--tinta);
  display: flex;
  align-items: center;
  gap: 5px;
}
.stat .ic { font-size: 1.05em; }
/* barra de progresso do ano (#122): ticks em talho; o atual pulsa em vermelho,
   os concluídos viram tinta, o último é o poste-marco (mais alto) da virada */
.wbar { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.wbar .tick {
  width: 6px; height: 9px;
  background: var(--papel-dim);
  border: 1px solid var(--tinta);
  border-radius: 1px;
  box-sizing: border-box;
}
.wbar .tick.done { background: var(--tinta); }
.wbar .tick.now { background: var(--verm); border-color: var(--verm-escuro); }
.wbar .tick.milestone { height: 13px; }                 /* a virada do ano: poste mais alto */
.wbar .tick.milestone:not(.done):not(.now) { border-color: var(--verm); }
.stat.flash { animation: hpflash 0.5s ease; }
@keyframes hpflash {
  0%, 100% { background: var(--papel); }
  30% { background: var(--verm); color: var(--papel); transform: scale(1.12); }
}

#tower-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
#action-row {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: center;
}
#action-row .action-btn { flex: 1 1 auto; }

.tower-btn {
  background: var(--papel);
  border: 2px solid var(--tinta);
  border-radius: 10px;
  padding: 6px 4px;
  color: var(--tinta);
  cursor: pointer;
  font-size: clamp(11px, 3vw, 14px);
  flex: 1 1 0;
  min-width: 70px;
  text-align: center;
  transition: transform 0.08s, border-color 0.12s, box-shadow 0.12s;
}
/* nome com fonte PRÓPRIA (não a clamp(…,3vw,14px) do botão): o vw escala com o
   viewport, mas o botão fica preso à moldura retrato — em telas largas a fonte
   batia 14px e "Mapinguari" (o nome mais longo) estourava a pastilha de ~71px.
   11px + nowrap mantém todos os nomes centrados e numa linha (#160). */
.tower-btn .nm { display: block; font-weight: 700; font-size: 11px; white-space: nowrap; letter-spacing: -0.2px; }
.tower-btn .cost { display: block; color: var(--verm-escuro); font-weight: 700; font-size: 0.85em; }
/* retrato do guardião recortado do sheet (seed packet, #120): quadrado p/ não
   distorcer (as células são quadradas); background-* vêm inline por guardião */
.tower-btn .face {
  display: block;
  width: 40px; height: 40px;
  margin: 0 auto 3px;
  border-radius: 6px;
  background-repeat: no-repeat;
  position: relative;
}
.tower-btn:active { transform: scale(0.95); }
.tower-btn.selected { border-color: var(--verm); box-shadow: 0 0 0 2px var(--verm); }
/* sem condição p/ construir: esmaece retrato e nome, mas o custo segue legível
   (#121) — no PvZ a pastilha apaga mas o preço continua nítido em vermelho */
.tower-btn.cant .face, .tower-btn.cant .nm { opacity: 0.45; }
.tower-btn.poor .cost { color: var(--verm); }
/* guardião único (Cuca) já no tabuleiro: cadeado sobre o retrato (#121) */
.tower-btn.locked .face::after {
  content: "🔒";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 18px;
  background: rgba(239, 227, 200, 0.5);
  border-radius: 6px;
}

/* botão de ação = bloco de impressão: vermelho queimado com texto de papel */
.action-btn {
  background: var(--verm);
  border: 2px solid var(--tinta);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--papel);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 3.4vw, 16px);
  cursor: pointer;
}
.action-btn:active { transform: scale(0.96); }
.action-btn.big { padding: 14px 34px; font-size: 21px; margin-top: 14px; letter-spacing: 1px; }
.action-btn:disabled { background: var(--papel-dim); color: var(--tinta-suave); cursor: default; opacity: 0.8; }
.action-btn.special { background: var(--verde-mata); }
.action-btn.special.selected { box-shadow: 0 0 0 3px var(--papel), 0 0 0 5px var(--verde-mata); }

.mini-btn {
  background: var(--papel);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  padding: 5px 10px;
  color: var(--tinta);
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}
.mini-btn.selected { border-color: var(--verm); box-shadow: 0 0 0 2px var(--verm); background: var(--papel-dim); }

/* ---- Slot de contexto + painel de torre (#128) ----
 * O painel mora na barra de baixo, NÃO mais sobre o tabuleiro — antes flutuava
 * (position:absolute) e cobria os guardiões das fileiras de baixo em telas
 * curtas. Slot de altura FIXA compartilhado com a dica de construção (são
 * mutuamente exclusivos): trocar de seleção, ou abrir/fechar o painel, nunca
 * move os botões nem cobre o tabuleiro. ZONAS FIXAS internas: a largura do texto
 * não desloca os botões (relato de tester em vídeo). */
#select-slot {
  width: 100%;
  height: 4.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}
#tower-panel {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10em; /* info flexível + coluna FIXA de botões */
  grid-template-rows: 1fr 1fr;
  align-items: stretch;
  gap: 5px 8px;
}
#tp-info {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: stretch;
  background: var(--papel);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: clamp(11px, 3.2vw, 14px);
  line-height: 1.4;
  color: var(--tinta);
  overflow: hidden;     /* o card tem altura fixa do slot — corta texto excedente */
  min-width: 0; /* texto longo quebra DENTRO da caixa em vez de empurrar os botões */
}
#tp-info #tp-stats { display: block; color: var(--tinta-suave); font-size: 0.92em; max-height: 2.7em; overflow: hidden; }
#tp-info .pips { color: var(--verm); letter-spacing: 2px; }
#tower-panel .action-btn,
#tower-panel .mini-btn {
  grid-column: 2;
  width: 100%;        /* largura = coluna fixa: rótulo nenhum move o botão */
  align-self: stretch;
  padding: 2px 8px;   /* altura vem da linha do slot, não do padding */
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* rótulo maior que a caixa indica corte (sem sumir número) */
  text-align: center;
}
#tower-panel .mini-btn { grid-row: 2; }
/* Linha de ação (#190): Reparar e Benção dividem a coluna fixa lado a lado num
   Mapinguari danificado — antes um botão escondia o outro. Quando só um aplica,
   o .hidden some e o restante ocupa a largura inteira (flex). */
#tp-actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 6px;
  min-width: 0;
}
#tp-actions .action-btn {
  flex: 1 1 0;
  width: auto;     /* a base flex manda, não os 100% da regra compartilhada */
  min-width: 0;    /* botão compacto encolhe em vez de estourar a coluna */
}

/* ---- Overlay (cobre o tabuleiro) ---- */
/* modal em TELA CHEIA (#126): position:fixed cobre a viewport inteira, não só o
   #stage — antes o card era limitado à altura do tabuleiro e a vitrine rolava.
   Com a tela toda, abertura/derrota cabem sem rolagem. */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(20, 16, 12, 0.82); /* tinta quente cobrindo a tela */
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.overlay.hidden { display: none; }
/* cartão de PAPEL (#95 f4): a tela vira uma estampa — papel, moldura de tinta */
.overlay-card {
  text-align: center;
  padding: 18px 22px;
  /* o dim cobre a tela toda (#126), mas o card fica na largura do JOGO (~540): em
     tablet/desktop a viewport >> coluna do jogo, e sem o teto o card esticava p/
     707px desalinhado do tabuleiro (relato: "no tablet está assim") */
  max-width: min(92%, 520px);
  max-height: 92%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--papel);
  border: 3px solid var(--tinta);
  border-radius: 6px;
  color: var(--tinta);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.overlay-card > #ov-title,
.overlay-card > .action-btn,
.overlay-card > #tut-btn { flex: 0 0 auto; }
.overlay-card > #tut-btn { margin-top: 8px; }
#ov-text { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
/* título como carimbo de xilogravura: vermelho queimado com "registro" de tinta
 * levemente deslocado (gravura fora de registro, marca de impressão manual) */
#ov-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 13vw, 80px);
  letter-spacing: 5px;
  color: var(--verm);
  text-shadow: 3px 3px 0 var(--tinta);
}
#ov-text {
  margin-top: 10px;
  font-size: clamp(14px, 4vw, 18px);
  line-height: 1.5;
  color: var(--tinta);
}

/* ---- Vitrine (placar global + ranking) ---- */
/* lado a lado p/ caber sem rolagem (#126): a altura vira a da MAIOR coluna, não a
   soma. Em telas estreitas (< ~340px de vitrine) as colunas quebram e empilham. */
.lb-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 6px;
}
.lb-cols > .lb { flex: 1 1 0; min-width: 0; margin: 0; } /* basis 0 + min-0: colunas dividem a largura e encolhem (nome com reticências) em vez de quebrar */
.lb {
  margin: 4px auto 0;
  max-width: 340px;
  background: rgba(26, 21, 18, 0.06);
  border: 2px solid var(--tinta);
  border-radius: 10px;
  padding: 7px 11px;
  text-align: left;
}
.lb-title { font-family: var(--font-display); font-weight: 700; color: var(--verm); text-align: center; margin-bottom: 6px; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: clamp(12px, 3.4vw, 14px);
  border-top: 1px solid rgba(26, 21, 18, 0.15);
}
.lb-row:first-of-type { border-top: none; }
.lb-pos {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tinta); color: var(--papel); font-weight: 700; font-size: 12px;
}
.lb-row > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-date { color: var(--tinta-suave); font-size: 0.85em; white-space: nowrap; }
.lb-empty { color: var(--tinta-suave); text-align: center; font-size: 0.92em; }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* gate de alias (#152): campo de nome na tela inicial, acima do ranking */
.alias-gate { max-width: 280px; margin: 0 auto 10px; }
.alias-gate input {
  width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 8px;
  border: 2px solid var(--tinta); background: #fff8e9;
  color: var(--tinta); font-size: 15px; text-align: center;
}
.alias-gate input:focus { outline: 2px solid var(--verm); outline-offset: 1px; }

/* formulário de envio do score ao ranking global */
.lb-form { display: flex; gap: 8px; max-width: 320px; margin: 0 auto 10px; }
.lb-form input {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px;
  border: 2px solid var(--tinta); background: #fff8e9;
  color: var(--tinta); font-size: 15px;
}
.lb-form .btn-mini {
  padding: 8px 12px; border-radius: 8px; border: 2px solid var(--tinta); cursor: pointer;
  background: var(--verm); color: var(--papel); font-weight: 700; font-size: 14px; white-space: nowrap;
}
.lb-form .btn-mini:disabled { opacity: 0.7; cursor: default; }

/* ---- Onboarding (tutorial) ---- */
#tutorial-tip {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 92%;
  background: var(--papel);
  border: 2px solid var(--verm);
  color: var(--tinta);
  font-weight: 700;
  font-size: clamp(13px, 3.8vw, 16px);
  padding: 8px 16px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 5;
  text-align: center;
  box-shadow: 0 3px 10px rgba(26, 21, 18, 0.5);
  animation: tipbob 1.2s ease-in-out infinite;
}
@keyframes tipbob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}
/* na barra de controles, em FLUXO (não sobre o canvas): como overlay cobria as
 * caravelas do telegraph — justo a informação que se lê na hora de posicionar */
#select-hint {
  align-self: center;
  max-width: 94%;
  background: var(--papel);
  border: 2px solid var(--tinta);
  color: var(--tinta);
  font-size: clamp(11px, 3.2vw, 14px);
  padding: 4px 14px;
  border-radius: 16px;
  pointer-events: none;
  text-align: center;
  /* a altura fixa agora é do #select-slot (#128): a dica e o painel dividem o
   * mesmo slot, então o tabuleiro nunca muda de tamanho ao trocar a seleção.
   * A pílula se ajusta ao conteúdo (até 2 linhas) e fica centrada no slot. */
  max-height: 100%;
  overflow: hidden;
  /* #187: NÃO usar flex aqui — a dica tem <b> intercalados (a do Reflorestar tem 4),
   * e flex transforma cada trecho de texto/negrito num flex-item, embaralhando o
   * fluxo inline. A centralização vertical já vem do #select-slot (que é flex). */
  display: block;
}
#select-hint b { color: var(--verm); }
.tut-highlight { animation: tutpulse 0.9s ease-in-out infinite; }
@keyframes tutpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(191, 75, 43, 0.75); border-color: var(--verm); }
  50% { box-shadow: 0 0 0 7px rgba(191, 75, 43, 0); }
}

.hidden { display: none !important; }

/* HUD compacto em desktop/tablet: canvas chega ao tamanho nativo (#157).
 * min-height: 650px exclui telefones em landscape (ex: 844×390).
 * height: min(100svh, 1140px) — 900 canvas + 44 topbar + 196 bottombar = 1140px:
 *   em telas mais altas (1440p+) o game-wrap para de crescer, o canvas fica em 600×900
 *   nativo e o body (flex, align-items:center) centraliza o bloco com black acima/abaixo.
 * O #select-slot mantém os 4.6em do layout base (#160): o slot é compartilhado entre a
 * dica de construção E o painel do guardião selecionado — compactá-lo para 2.2em
 * esmagava o painel (info + Melhorar/Vender) no desktop. */
@media (min-width: 600px) and (min-height: 650px) {
  #game-wrap {
    width: min(100vw, clamp(540px, calc(100svh * 600 / 900), 600px));
    height: min(100svh, 1140px);
  }
  #bottombar { padding: 3px 8px; gap: 3px; }
  #bottombar .tower-btn { padding: 3px 4px; }
  #bottombar .tower-btn .face { width: 30px; height: 30px; margin-bottom: 1px; }
  #bottombar .action-btn { padding: 6px 12px; }
}

/* versão do build no rodapé do overlay (#34) — discreta, não compete com o card */
#ov-version { flex: 0 0 auto; margin-top: 10px; font-size: 11px; color: rgba(26, 21, 18, 0.4); }

/* botão de retomar partida salva (#68) */
#resume-btn { flex: 0 0 auto; margin-top: 8px; }

/* Lendas (#87): recordes de eras passadas, discretos sob o ranking da temporada */
.lb-legacy-title { margin-top: 8px; font-size: 0.85em; opacity: 0.8; }
.lb-row.lb-legacy { opacity: 0.65; font-size: 0.92em; }

/* identidade xilo (#95 f4): ícones próprios (sem emoji estrutural), título em
 * vermelho queimado com gradiente de estampa, vitrine visível na abertura */
.stat .ic svg { width: 1.1em; height: 1.1em; display: block; }
#ov-title {
  background: linear-gradient(180deg, #d4603a 8%, #bf4b2b 52%, #8f351c 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.overlay { background: rgba(20, 16, 12, 0.82); } /* em tela cheia (#126) cobre as barras atrás — mais opaco que o 0.6 antigo, que só cobria o tabuleiro */
.stat, .mini-btn, .tower-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }