/* v0.9.0 (item 29): tela de CÓDIGOS "Palavrinha Mágica" (js/telas/codigos.js) e o enfeite do retrato dourado.
   Usa as cores e botões do estilo.css. Tudo aqui começa com .codigos- / .tela-codigos / .codigo- (sem colisão). */

.caixa-codigos {
  width: min(900px, 94vw); overflow-y: auto; gap: 1.6vh;
  scrollbar-width: thin; scrollbar-color: var(--roxo) #1b1420;
}
.codigos-intro { max-width: 40em; font-size: clamp(14px, 2.1vh, 24px); line-height: 1.3; }

/* campo + botão Usar (lado a lado; em tela estreita o botão desce) */
.codigos-form { display: flex; gap: 1vw; width: 100%; max-width: 40em; flex-wrap: wrap; justify-content: center; }
.codigos-campo {
  flex: 1 1 14em; min-width: 0;
  /* 18 px no mínimo (o celular dá zoom sozinho em campo abaixo de 16 px) */
  font-family: var(--fonte); font-size: clamp(18px, 3vh, 34px); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #ffffff; background: var(--escuro);
  padding: 0.35em 0.6em; border: 3px solid #5c4a70; border-radius: 0; box-shadow: 0 5px 0 #120d16;
}
.codigos-campo::placeholder { color: var(--quimono); opacity: 0.55; text-transform: none; letter-spacing: 0; font-weight: 400; }
.codigos-campo:focus { outline: none; border-color: var(--laranja); box-shadow: 0 5px 0 #120d16, 0 0 0 4px var(--quimono); }
.codigos-usar { flex: 0 0 auto; min-width: 6em; }

/* resposta: acerto (dourado), aviso (já usado, vazio, a piada da educação) e erro */
.codigos-resposta {
  margin: 0; width: 100%; max-width: 40em; padding: 0.6em 0.9em; text-align: center;
  font-size: clamp(15px, 2.3vh, 26px); line-height: 1.3; color: #ffffff;
  background: rgba(27, 20, 32, 0.8); border: 3px solid #5c4a70;
}
.codigos-acerto { border-color: #ffc94a; color: #ffe7a6; box-shadow: 0 0 0 3px rgba(255, 201, 74, 0.25), 0 0 22px rgba(255, 201, 74, 0.35); }
.codigos-aviso { border-color: var(--roxo); color: var(--quimono); }
.codigos-erro { border-color: #d0574f; color: #ffd0cc; }
.codigos-acerto.codigos-anima { animation: codigos-acertou 0.55s ease-out; }
.codigos-erro.codigos-anima, .codigos-aviso.codigos-anima { animation: codigos-errou 0.4s ease-in-out; }
@keyframes codigos-acertou {
  0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(255, 201, 74, 0.9); }
  60% { transform: scale(1.03); box-shadow: 0 0 0 12px rgba(255, 201, 74, 0); }
  100% { transform: scale(1); }
}
@keyframes codigos-errou {
  20% { transform: translateX(-8px); } 40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}

/* o recado secreto do pergaminho */
.codigos-pergaminho {
  width: 100%; max-width: 40em; padding: 1em 1.3em;
  color: #3a2a1a; background: #ead9b0; border: 4px solid #8a6a3a; box-shadow: 0 6px 0 #5a4220;
  font-size: clamp(15px, 2.2vh, 24px); line-height: 1.4;
}
.codigos-pergaminho-titulo { margin: 0 0 0.4em; font-size: 1.15em; color: #6a3e12; text-align: center; }
.codigos-pergaminho-texto { margin: 0; }

/* lista dos códigos usados */
.codigos-subtitulo { margin: 0.4em 0 0; font-size: clamp(16px, 2.5vh, 28px); color: var(--quimono); font-weight: 700; }
/* a lista é quem encolhe e rola (o Voltar fica sempre à vista); se nem assim couber (celular), a caixa rola */
.codigos-lista {
  list-style: none; margin: 0; padding: 0 0.3em 0 0; width: 100%; max-width: 40em; display: flex; flex-direction: column; gap: 0.5em;
  flex: 0 1 auto; min-height: 4.5em; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--roxo) #1b1420;
}
.codigos-item { flex: none; }
.codigos-item {
  display: flex; align-items: center; gap: 0.8em; padding: 0.45em 0.8em;
  font-size: clamp(14px, 2.1vh, 23px); background: rgba(27, 20, 32, 0.7); border: 3px solid #3d2e4c;
}
.codigos-item-icone { width: 1.6em; height: 1.6em; flex: none; color: #ffd36b; }
.codigos-item-icone svg { width: 100%; height: 100%; display: block; }
.codigos-item-texto { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.codigos-item-nome { color: #ffffff; font-weight: 700; }
.codigos-item-efeito { color: var(--quimono); font-size: 0.85em; }
.codigos-item-data { color: var(--quimono); font-size: 0.8em; opacity: 0.8; white-space: nowrap; }
.codigos-reler { font-size: clamp(14px, 2vh, 22px); padding: 0.2em 0.7em; }
.codigos-vazio { font-size: clamp(14px, 2.1vh, 24px); opacity: 0.85; }

/* toque: alvo de dedo com pelo menos 44 px */
@media (pointer: coarse) {
  .codigos-campo, .codigos-usar, .codigos-reler, .caixa-codigos > .botao { min-height: 44px; }
}

/* ---------- enfeite: retrato dourado no menu inicial (código "retrato") ---------- */
body.codigo-retrato-dourado .inicio-retrato {
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.35)) drop-shadow(0 0 8px rgba(255, 201, 74, 0.9)) drop-shadow(0 0 22px rgba(255, 170, 40, 0.5));
  animation: codigo-retrato-brilho 2.8s ease-in-out infinite;
}
@keyframes codigo-retrato-brilho {
  50% { filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.35)) drop-shadow(0 0 12px rgba(255, 214, 110, 1)) drop-shadow(0 0 34px rgba(255, 170, 40, 0.7)); }
}

@media (prefers-reduced-motion: reduce) {
  .codigos-anima { animation: none !important; }
  body.codigo-retrato-dourado .inicio-retrato { animation: none; }
}