/* v0.6.0: telas do sistema de fases (telas/fases.js): "Escolha a fase", troca de fase (carta pra levar, poder e
   viagem), a coluna "Fase" dos recordes. Usa as variáveis e os cartões de estilo.css (.carta, .card-poder). */

/* ---------- Escolha a fase ---------- */
.cards-fase { gap: 3vw; }
.card-fase {
  --cor-fase: var(--roxo);
  font-family: var(--fonte); color: var(--texto); text-align: center; cursor: pointer;
  width: clamp(240px, 30vw, 440px);
  display: flex; flex-direction: column; align-items: center; gap: 1.4vh;
  padding: 3vh 1.8vw 2.6vh;
  background: var(--escuro-2); border: 4px solid var(--cor-fase); border-radius: 0;
  box-shadow: 0 8px 0 var(--roxo-escuro);
  transition: transform 0.08s, border-color 0.1s, background 0.1s;
}
.card-fase:focus {
  outline: none; transform: translateY(-6px); border-color: var(--laranja); background: #36283b;
  box-shadow: 0 14px 0 var(--laranja-escuro);
}
.card-fase-num {
  font-size: clamp(14px, 2vh, 22px); color: var(--escuro); background: var(--cor-fase);
  padding: 0.1em 0.6em; border: 3px solid var(--escuro);
}
.card-fase .card-nome { font-size: clamp(26px, 4.4vh, 50px); font-weight: 700; color: var(--laranja); }
.card-fase .card-desc { font-size: clamp(15px, 2.1vh, 23px); line-height: 1.3; }
.card-fase-checkpoint { font-size: clamp(14px, 1.9vh, 21px); color: #8ff08a; line-height: 1.3; }
/* v0.7.0: com 4 fases (ou mais), os cards ficam numa linha só. No 3 + 1, o título e o Voltar saíam da tela em 1920x1080. */
.card-fase:first-child:nth-last-child(n+4), .card-fase:first-child:nth-last-child(n+4) ~ .card-fase {
  width: clamp(190px, 20.5vw, 420px); padding: 2.6vh 1.2vw 2.2vh;
}

/* ---------- troca de fase (por cima do mapa parado) ---------- */
.tela-transicao { background: rgba(20, 10, 24, 0.78); }
.transicao-passo {
  display: flex; flex-direction: column; align-items: center; gap: 1.6vh; max-width: 96vw;
}
.transicao-passo[hidden] { display: none; }
.transicao-cartas { display: flex; flex-direction: column; gap: 1.6vh; align-items: center; }
.transicao-linha { display: flex; gap: 1.2vw; justify-content: center; flex-wrap: wrap; }
/* v1.0.0 (auditoria INT-01): o passo do poder (#transicao-poderes) tem as 2 classes e o "column" da .transicao-cartas
   ganhava: as 3 cartas ficavam empilhadas e o título e a dica saíam da janela. Linha = lado a lado, mesma altura. */
.transicao-cartas.transicao-linha { flex-direction: row; align-items: stretch; }
.transicao-linha:empty { display: none; }
/* v0.9.0: a carta mostra a mecânica + a piada (texto maior): carta mais larga (4 por linha cabem até em 1024 px) e,
   se as 8 não couberem na altura, só as cartas rolam: o título e o "Levar essa!" ficam sempre à vista (como no celular) */
.carta-levar { width: clamp(150px, 20vw, 290px); padding: 1.6vh 0.8vw 1.4vh; gap: 0.6vh; }
.transicao-passo[data-passo="cartas"] { max-height: 100%; min-height: 0; }
.transicao-passo[data-passo="cartas"] .transicao-cartas { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 8px 6px 16px; }
.carta-levar .carta-icone { width: clamp(40px, 6vh, 72px); height: clamp(40px, 6vh, 72px); }
.carta-levar .carta-nome { font-size: clamp(16px, 2.2vh, 26px); }
.carta-levar .carta-tag, .carta-levar .carta-texto { font-size: clamp(12px, 1.6vh, 18px); min-height: 0; }
/* a marcada (1º passo) fica acesa mesmo sem o foco; o "Levar essa!" confirma */
.carta-levar.marcada { border-color: #8ff08a; background: #2d3b2c; box-shadow: 0 8px 0 #2b5a2a; }
.carta-levar.marcada:focus { border-color: #8ff08a; box-shadow: 0 14px 0 #2b5a2a; }
.transicao-dica { max-width: 70ch; text-align: center; }
.transicao-viagem .frase { font-size: clamp(20px, 3.2vh, 36px); max-width: 60ch; text-align: center; }
.botao[disabled] { opacity: 0.45; cursor: default; }

/* ---------- recordes e fim ---------- */
.rec-fase { white-space: nowrap; }
.marca-checkpoint { display: block; font-size: 0.7em; color: #8ff08a; }