/* ==========================================================================
   css/campo-aberto-v6.css — patch sobre css/style.css (tema "Campo Aberto")
   Carregar DEPOIS do style.css. Usa as variáveis que já existem, mais duas
   (--warn-*) porque "atenção" e "ação" estavam ambas a laranja.

   Índice
   1. Contraste
   2. Cor semântica: laranja = ação, sálvia = progresso, barro = aviso
   3. Superfícies: a secção volta a ter limite (o aninhamento estava trocado)
   4. Ícones
   5. Sub-abas (Reino / Eu) e barra inferior de 3 separadores
   6. Ecrã de treino: uma métrica herói + 3 apoios + detalhe escondido
   7. Equipamento em lista, com carteira e custo
   8. Estados desativados
   12. Login: Google + Apple + email/palavra-passe
   ========================================================================== */

/* ---- 1. Contraste ------------------------------------------------------- */

:root {
  /* --muted-2 (#82796a) dá ~3,4:1 sobre a areia: chumba nos 11-12px em que
     estava a ser usado (.viewer-hint, .hex-map-hint, .site-version-hero,
     labels inativos do tab bar). Escurecido para ~5,6:1.
     Regra: --muted-2 nunca abaixo de 14px. */
  --muted-2: #6f665a;

  /* 2. Aviso deixa de partilhar o laranja da ação */
  --warn-bg: #f6e0d6;
  --warn-border: #d98b6a;
  --warn-ink: #8c3a1a;
}

/* ---- 2. Cor semântica --------------------------------------------------- */

/* Antes: o laranja era botão primário, aba ativa, barra de XP, crachá de
   nível, "+" E aviso. "Ação" e "atenção" com a mesma cor. */
.speed-warning,
.construction-warning,
.resources-warning {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-ink);
}

/* Progresso passa a sálvia — que estava subaproveitado — e liberta o
   laranja para a ação. */
.xp-bar-fill { background: var(--sage); }
.resource-rate { color: var(--sage-700); }

/* ---- 3. Superfícies ----------------------------------------------------- */

/* Antes: .card com background transparent e border-radius 0, mas os filhos
   (#training-readout, .monster-item, .hud-grid p) com superfície e raios de
   20-28px — a secção não tinha limite, o conteúdo tinha. Daí ter sido
   preciso o remendo .card + .card { border-top }. Agora o cartão é a
   superfície e os filhos acalmam. */
.card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  margin: 0 16px 12px;
}
.card + .card { border-top: 1px solid var(--line); }
.card .hud-grid p,
.card .leaderboard-row { border-radius: var(--r-sm); }

/* ---- 4. Ícones ---------------------------------------------------------- */

.icon,
.icon-svg,
.icon-img { display: inline-flex; flex: 0 0 auto; }
.icon-svg,
.icon-img { display: block; }
/* Ícones ilustrados dos recursos (js/icons.js, 2026-09-16) - object-fit
   garante que ficam nítidos/quadrados mesmo que o <img> não seja
   perfeitamente 1:1 no tamanho pedido. */
.icon-img { object-fit: contain; }

/* O ponto de cor dos recursos deu lugar ao ícone (js/resources-ui.js) */
.resource-dot { display: none; }
.resources-grid dt {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* ---- 5. Navegação ------------------------------------------------------- */

/* Sub-abas: sempre na mesma ordem (Reino continua a ser sempre TRÊS; Eu
   passou a ser DUAS em 2026-09-16, a pedido - Personagem saiu para Reino ›
   Fortaleza). `flex:1` em .nav-tab abaixo não assume nenhum número fixo de
   botões, por isso a exceção não pediu nenhuma alteração aqui. */
.subtabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin: 0 16px 14px;
  border-radius: 999px;
  background: var(--surface);
}
.subtabs .nav-tab {
  flex: 1;
  min-height: 40px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 700 13px var(--font-body);
  cursor: pointer;
}
.subtabs .nav-tab.active { background: var(--accent); color: var(--bg); }
/* .subtabs define display:flex — precisa de bater .hidden (mesma
   especificidade, e este ficheiro carrega depois do style.css). Usado
   pela barra do "Eu" (#eu-subtabs), escondida fora desse separador. */
.subtabs.hidden { display: none; }

.subpane { display: none; }
.subpane.active { display: block; }

/* Barra inferior: 3 separadores em vez de 4 */
#tab-bar .tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 48px;
  color: var(--muted);
}
#tab-bar .tab-btn.active { color: var(--accent-700); }
#tab-bar .tab-icon { font-size: 0; } /* mata o glifo emoji herdado */
#tab-bar .tab-icon .icon-svg { width: 21px; height: 21px; }

/* ---- 6. Ecrã de treino -------------------------------------------------- */

/* Antes: 8 blocos de texto cinzento a 11-13px, todos centrados, e só a
   distância com hierarquia. Isto lê-se a andar, de relance, com o braço a
   mexer: uma métrica grande, três apoios grandes, o resto atrás de um
   toque. */
.training-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.training-tile {
  padding: 10px 6px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  text-align: center;
}
.training-tile-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.training-tile-value {
  margin-top: 2px;
  font: 400 20px var(--font-heading);
  font-variant-numeric: tabular-nums;
}
.training-tile.xp .training-tile-label,
.training-tile.xp .training-tile-value { color: var(--sage-700); }

/* Card de um treino já feito (2026-09-13, a pedido): só 2 apoios, não 3 -
   sem "Tempo ativo", que fica atrás do "Ver mais detalhes" junto com o
   resto. */
.training-card .training-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.training-detail-toggle {
  margin-top: 14px;
  border: none;
  background: none;
  font: 600 12px var(--font-body);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* A explicação do modo desce para debaixo do botão: é uma nota, não um
   cabeçalho. Com ela em cima, o CTA caía ~430px abaixo da dobra num
   iPhone 13. */
.mode-xp-explanation {
  margin: 8px 16px 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* ---- 7. Equipamento — um card por peça, molde do card da Fortaleza ------ */

/* 2026-09-11: sai a mini-lista + popup (onde carregar não era óbvio) e
   passa a 3 cards inline com o botão "Melhorar" e o custo à vista, iguais
   ao card da Fortaleza (#warehouse-panel). js/equipment.js renderiza. */
#equipment-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.equip-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px;
}
.equip-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 15px var(--font-heading);
  margin: 0 0 4px;
}
.equip-card-stats {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 10px;
}
.equip-delta { color: var(--sage-700); font-weight: 600; }
.equip-card .btn-primary { width: 100%; }
.equip-cost-warn {
  flex-basis: 100%;
  text-align: center;
  color: var(--warn-ink);
  font-weight: 600;
}

/* Carteira: o stock onde é gasto, não num relatório noutro separador */
.wallet {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}
.wallet-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface);
  font: 700 12px var(--font-body);
}

/* Botão + custo por baixo. O botão diz só "Melhorar"; o ESTADO dele é que
   diz se dá — laranja quando há recursos, cinza quando não. Nada de
   "Tens 200 pedra e 137 barro — dá". */
.warehouse-cost,
.cost-line {
  margin-top: 8px;
  font: 600 12.5px var(--font-body);
  color: var(--muted);
  text-align: center;
}
/* Custo da Fortaleza: 1 a 3 recursos (madeira/pele -> pedra -> barro -> ferro),
   cada um icone + numero, numa linha centrada que quebra se preciso. */
.warehouse-cost {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
}
.warehouse-cost-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* ---- 8. Estados desativados --------------------------------------------- */

/* Um botão cinza tem de estar realmente inerte: não focável, não clicável,
   e anunciado como desativado por um leitor de ecrã. */
button[disabled] {
  cursor: not-allowed;
  background: var(--sand-300);
  color: var(--muted-2);
  box-shadow: none;
}
.subtabs .nav-tab[disabled] {
  background: transparent;
  opacity: 0.55;
}

/* Nota de sub-aba travada, generica - reutilizavel para o proximo
   sub-separador "em breve" (ex: Arena/PvP). A Masmorra usava isto ate
   sair da navegação (2026-09-16), quando deu lugar a Fortaleza em Reino. */
.subpane-locked-note {
  margin: 0 16px 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font: 600 13px var(--font-body);
  color: var(--muted);
  text-align: center;
}

/* ---- 9. Reino › Mapa ---------------------------------------------------- */

/* O mapa deixa de ser um bloco pequeno dentro de um cartão que também fazia
   exploração, produção E construção do armazém. Aqui é o ecrã.
   (A sub-aba do Mapa é [data-subpane-name="mapa"], não tem id.) */
[data-subpane-name="mapa"] #hex-map {
  height: 58vh;
  min-height: 340px;
  margin: 0;
  border-radius: var(--r-md);
}
.reino-stats {
  display: flex;
  gap: 8px;
  margin: 14px 16px 0;
}
.reino-stat {
  flex: 1;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
}
.reino-stat-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.reino-stat-value { font: 400 22px var(--font-heading); }

/* ---- 10. Palco 3D em Reino › Fortaleza --------------------------------- */

/* O palco (#viewer-stage) deixou de estar duplicado: vive só dentro da
   sub-aba Reino › Fortaleza (.subpane[data-subpane-name="fortaleza"] -
   mudou-se de Eu › Personagem em 2026-09-16, a pedido). A regra do
   style.css que o mostrava — #view-jogo[data-pane="personagem"|"mundo"] —
   já não bate com nada: os panes chamam-se treinar/reino/eu. Sem este
   override, #view-jogo:not([data-pane="personagem"])
   :not([data-pane="mundo"]) #viewer-stage{display:none} do style.css
   escondia o modelo 3D para sempre. A visibilidade passa a ser só a do
   .subpane que o contém (.subpane:not(.active){display:none} trata do
   resto); a luta em ecrã inteiro continua a vir do :has(.battle-fullscreen)
   do style.css. */
#view-jogo[data-pane="reino"] .subpane[data-subpane-name="fortaleza"].active #viewer-stage {
  display: block;
}

/* ---- 11. Missões mensais (separador Treinar, secção 22) --------------- */

.missions-panel {
  margin-top: 14px;
  text-align: left;
}
.mission-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mission-title {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.mission-count {
  font: 400 16px var(--font-heading);
  color: var(--muted);
}
.mission-help,
.mission-empty {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
}
.mission-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px;
  margin-bottom: 10px;
}
.mission-card:last-child { margin-bottom: 0; }
/* Sem dificuldade (2026-09-21, a pedido): todos os cartoes de missao tem o
   mesmo aspeto - as cores verde/amarelo/vermelho de 2026-09-20 sairam. */
.mission-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 6px;
}
.mission-reward {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  font-size: 13px;
  color: var(--sage-700);
}
.mission-goal {
  font-size: 15px;
  color: var(--text);
  margin: 0 0 10px;
}
.mission-progress-track {
  height: 7px;
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 5px;
}
.mission-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--sage);
  transition: width 0.3s ease;
}
.mission-progress-text {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
}
.mission-btn-accept { width: 100%; }
.mission-subpanel { margin-bottom: 16px; }
.mission-subpanel:last-child { margin-bottom: 0; }
.mission-subpanel-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 6px;
}
.mission-card-locked { opacity: 0.55; }
.mission-btn-ghost {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--warn-border);
  background: transparent;
  color: var(--warn-ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* ---- 12. Login: email/palavra-passe (2026-09-11; so este desde 2026-09-14,
   Google e Apple saíram a pedido) --------------------------------------- */
.auth-provider-btn { width: 100%; margin-bottom: 8px; }
.auth-provider-btn:last-of-type { margin-bottom: 0; }
.auth-email-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-input {
  width: 100%;
  max-width: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  text-align: center;
}
.auth-toggle-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}
.auth-link {
  background: none;
  border: none;
  box-shadow: none;
  padding: 2px;
  font: 600 12.5px var(--font-body);
  color: var(--accent-700);
  cursor: pointer;
  text-decoration: underline;
}
/* Corrigido 2026-09-14: so o de email tinha esta regra - o de repor
   palavra-passe usava a mesma classe mas ficava sem estilo nenhum (texto
   cinzento discreto, facil de nao reparar que algo tinha corrido mal).
   Destacado ainda mais no mesmo dia (a pedido, via Trello): deixa de ser so
   texto a cores e passa a caixa de aviso, mesmo tratamento visual do
   .speed-warning/.construction-warning - e o mesmo "isto precisa da tua
   atencao", só que dentro do formulario de login em vez de por cima do mapa. */
#email-auth-status.auth-status-error,
#password-reset-status.auth-status-error {
  width: 100%;
  margin-top: 4px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-ink);
  font-weight: 600;
}

/* Modal de "nova palavra-passe" (link de recuperação por email) - mesmo
   posicionamento fixo/centrado que o style.css já dá a #auth-modal e
   #name-picker-modal, repetido aqui porque este id é novo. */
#password-reset-modal {
  position: fixed;
  inset: 0;
  z-index: 990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
  /* Mesmo reforco de scroll do #auth-modal (css/style.css) - ver o
     comentario la e o <meta name="viewport"> no index.html. */
  overflow-y: auto;
}
#password-reset-modal.hidden { display: none; }
#password-reset-modal .auth-box > * + * { margin-top: 10px; }