/* v0.8.0 (pedidos 24 e 25 do Mario): CARTA CLARA e as cartas da Pausa (telas/levelup.js e telas/pausa.js).
   Usa as variáveis e os cartões de estilo.css (.carta, .pausa-*). Carrega depois dele: o que repete aqui, vale aqui. */

/* ---------- level up: rostinho do dono (só carta exclusiva) e texto mecânico ---------- */
/* o rostinho fica no canto de cima à direita, espelhando o número (1, 2, 3) do canto esquerdo */
/* só no level up (#levelup-cartas): a troca de fase (fases.js, .carta-levar) usa o mesmo cartão e fica como estava */
#levelup-cartas .carta { width: clamp(210px, 24vw, 360px); }
.carta-rosto {
  position: absolute; right: -4px; top: -4px; width: clamp(40px, 6.6vh, 74px); height: clamp(40px, 6.6vh, 74px);
  display: block; border: 3px solid var(--escuro); background: var(--escuro); box-shadow: 0 3px 0 var(--roxo-escuro);
  pointer-events: none;
}
.carta:focus .carta-rosto { border-color: var(--laranja); }
#levelup-cartas .carta-texto { gap: 0.35em; justify-content: flex-start; }
#levelup-cartas .carta-linha { color: #8ff08a; }   /* o que muda ao subir (Dano +7): verde, como no VS */
.carta-mecanica { color: #ffffff; }
.carta-piada { color: #ffe7b8; }
/* v0.9.0: a seleção do poder inicial e a troca de fase também mostram a mecânica + a piada (levelup.preencherPrevia) */
#cards-poder .card-desc { display: flex; flex-direction: column; gap: 0.35em; font-size: clamp(13px, 1.8vh, 20px); }
/* com a mecânica no card, a tela do poder passa da altura em PC baixinho (1024x600): rola por dentro em vez de
   esconder o Voltar (sem sobra, nada muda; "safe center" não corta o topo) */
section[data-cena="selecaoPoder"] { overflow-y: auto; justify-content: safe center; }
.carta-levar .carta-texto { gap: 0.35em; justify-content: flex-start; }

/* ---------- v0.9.3: a carta diz o que afeta (telas/afeta.js: carta de nível e ficha da Pausa) ---------- */
/* "Afeta: ..." em azul-gelo; o número antes → depois em verde (como o "Dano +4"); "ninguém usa" em laranja */
.carta-afeta, .pausa-detalhe-afeta { color: #9fdcff; }
.carta-muda, .pausa-detalhe-muda { color: #8ff08a; }
.carta-aviso, .pausa-detalhe-aviso { color: #ffb36b; }
/* carta que não coube nem com a letra no piso (telas/levelup.js, caberNaTela): ícone, título e espaços menores */
.tela-levelup.apertada { gap: 4px; padding-top: 4px; padding-bottom: 4px; }
.tela-levelup.apertada .titulo-tela { font-size: 18px; }
.tela-levelup.apertada .carta { gap: 2px; padding-top: 5px; padding-bottom: 4px; }
.tela-levelup.apertada .carta-icone { width: 28px; height: 28px; }
.tela-levelup.apertada .carta-texto { gap: 0.15em; }
.tela-levelup.apertada.sem-dica > .dica { display: none; }   /* 3º passo: nem apertada coube; os botões ficam inteiros */
/* revisão (celular): a ficha da Pausa ficou mais comprida (Afeta + "No Nv N:" + uma linha por poder) e a lista de cartas
   encolhia por causa dela: rolava sozinha e a carta tocada sumia embaixo da ficha. Agora a lista não encolhe por causa da
   ficha (teto de 40% da altura, rola por dentro) e a ficha fica com o resto e rola. #id: ganha do toque.css (último CSS). */
body.toque #pausa-build { flex-shrink: 0; max-height: 40vh; max-height: 40dvh; }

/* ---------- pausa: 2 colunas (menu | cartas da partida com a ficha) ---------- */
.caixa-pausa { flex-direction: row; align-items: flex-start; gap: clamp(18px, 3vw, 56px); max-width: 96vw; }
.pausa-menu { display: flex; flex-direction: column; align-items: center; gap: 1.8vh; flex: none; }
.pausa-cartas {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.9vh;
  width: clamp(320px, 42vw, 680px); max-height: 86vh; min-height: 0;
}
/* v1.0.0 (auditoria INT-03): em tela larga o teto de 680 px cortava mais nomes que em 720p (a letra cresce e a lista
   não): acima de 1620 px de largura a lista acompanha os 42vw */
@media (min-width: 1620px) { .pausa-cartas { width: 42vw; } }
.pausa-cartas .pausa-subtitulo { text-align: center; }
.pausa-build { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4vh 0.8vw; }
.pausa-golpe { grid-template-columns: minmax(0, 1fr); }
.pausa-golpe[hidden] { display: none; }
.pausa-carta {
  width: 100%; display: flex; align-items: center; gap: 0.45em; padding: 0.18em 0.4em;
  font: inherit; color: var(--texto); text-align: left; cursor: pointer;
  background: rgba(13, 10, 16, 0.45); border: 2px solid transparent; border-radius: 0;
}
/* v1.0.0 (auditoria INT-03): nome comprido quebra em até 2 linhas (antes: 1 linha com "..." em 13 a 46 de 102 nomes);
   as reticências só ficam pra quem não cabe nem em 2 */
.pausa-carta .pausa-nome {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.12;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.pausa-carta .pausa-nivel { margin-left: 0; padding-left: 0.3em; }
.pausa-carta.escolhida { border-color: var(--roxo); background: #2b2131; }
.pausa-carta:focus { outline: none; border-color: var(--laranja); background: #36283b; }
.pausa-rosto { width: 1.5em; height: 1.5em; display: block; flex: none; border: 2px solid var(--escuro); background: var(--escuro); }
.pausa-cartas-dica { margin: 0; text-align: center; font-size: clamp(12px, 1.6vh, 18px); }

/* a ficha da carta com o foco */
.pausa-detalhe {
  display: flex; flex-direction: column; gap: 0.5vh; min-height: 8.5em; overflow-y: auto;
  padding: 1.2vh 1vw; background: var(--escuro); border: 3px solid var(--roxo); box-shadow: 0 6px 0 var(--roxo-escuro);
  font-size: clamp(14px, 1.9vh, 21px); line-height: 1.3; text-align: left;
}
.pausa-detalhe p { margin: 0; }
.pausa-detalhe-topo { display: flex; align-items: center; gap: 0.5em; }
.pausa-detalhe-icone { width: 2em; height: 2em; display: block; flex: none; }
.pausa-detalhe-icone svg { width: 100%; height: 100%; display: block; }
.pausa-detalhe-nome { flex: 1 1 auto; font-size: 1.15em; font-weight: 700; color: var(--laranja); line-height: 1.05; }
.pausa-detalhe-rosto { width: 2.6em; height: 2.6em; display: block; flex: none; border: 3px solid var(--escuro); box-shadow: 0 3px 0 var(--roxo-escuro); }
/* v1.0.0 (auditoria P-06): a ficha tem fundo --escuro, da mesma cor da borda do rostinho: o corte reto do quadrado
   (casaco, aba do chapéu) ficava solto no ar. Moldura roxa e fundo próprio, como o rostinho das cartas */
.pausa-detalhe-rosto { border-color: var(--roxo); background: var(--escuro-2); }
.pausa-detalhe-tag { color: #ffe7b8; font-size: 0.9em; }
.pausa-detalhe-mecanica { color: #ffffff; }
.pausa-detalhe-piada { color: #ffe7b8; }

/* janela em pé (ou estreita): as 2 colunas viram 1 */
@media (max-aspect-ratio: 1/1) {
  .caixa-pausa { flex-direction: column; align-items: center; overflow-y: auto; }
  .pausa-cartas { width: min(92vw, 680px); max-height: none; }
}