/* =========================================================================
   A Toca do Maxy e da Z — estilos
   Ordem do arquivo: base → cena → camadas → porta → pergaminho → rodapé
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. VARIÁVEIS E BASE
   As variáveis (--nome) são "apelidos" para valores. Mudando aqui em cima,
   muda em todo lugar que usa var(--nome).
   ------------------------------------------------------------------------- */
:root {
  --earth-dark: #241c08;   /* terra escura do fundo */
  --earth: #5c4a1c;        /* marrom das bordas do pedras.webp */
  --ui-text: #e8dcc0;      /* texto claro da interface (rodapé, changelog) */
  --glow: rgba(255, 214, 140, 0.55); /* brilho quente da porta no hover */

  /* --- As vozes do changelog ---
     Cada personagem tem duas cores: a forte, do nome e da barrinha lateral,
     e a suave, do texto da fala (legível sem cansar a vista). */
  --voice-maxy: #e6be6a;        /* dourado */
  --voice-maxy-text: #e5d3a8;
  --voice-z: #e0855c;           /* alaranjado puxando para o vermelho */
  --voice-z-text: #ebc5ae;

  /* --- O pergaminho --- */
  --paper-light: #efdcae;  /* miolo do papel, mais claro */
  --paper: #e2c891;        /* tom base do papel */
  --paper-edge: #c4a469;   /* bordas, envelhecidas */
  --ink: #4a3520;          /* cor da escrita, marrom de tinta velha */

  /*
    ZOOM DA CENA — resolve o problema das bordas cortadas aparecerem.
    As imagens são desenhadas um pouco MAIORES que a tela, então sobra
    "margem" escondida para fora. Quando a porta treme, ela mexe dentro
    dessa sobra e a borda do desenho nunca entra no campo de visão.
    Precisa ser o MESMO valor nas duas camadas, senão elas desalinham.
    Quanto maior o número, mais margem de folga — e menos cena visível.
  */
  --scene-zoom: 1.06;

  /* Intensidade dos movimentos da porta. Diminuídos para não forçar a folga. */
  --door-hover-scale: 1.008;

  /* Tempo da animação de fade-in da mensagem */
  --fade-duration: 1.2s;
}

/* box-sizing: border-box faz padding e borda entrarem na conta da largura.
   Sem isso, um elemento de 100% + padding fica maior que a tela. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  /* Fundo de terra: mais claro no centro, escurecendo para as bordas.
     Ele aparece nas sobras quando a imagem não cobre a tela inteira. */
  background: radial-gradient(circle at 50% 45%, var(--earth) 0%, var(--earth-dark) 75%);
  font-family: Georgia, "Times New Roman", Times, serif;
  color: var(--ui-text);
  /* Trava a rolagem: a cena sempre cabe na tela, não há nada para rolar.
     Também é o que esconde a sobra do --scene-zoom. */
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   2. A CENA
   É o "palco". Todas as camadas são posicionadas em relação a ela.
   position: relative aqui + position: absolute nos filhos = os filhos se
   posicionam usando a cena como referência, e não a página inteira.
   ------------------------------------------------------------------------- */
.scene {
  position: relative;
  width: 100%;
  height: 100%;
  /* Corta tudo que passar das bordas da cena — a sobra do zoom fica escondida. */
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   3. AS CAMADAS (empilhamento)
   inset: 0 é atalho para top/right/bottom/left: 0 — ou seja, "ocupe tudo".
   Como as duas imagens têm o mesmo tamanho original e o mesmo enquadramento,
   elas se alinham automaticamente.

   z-index define quem fica na frente (número maior = mais perto de você):
     porta ......... 1
     pedras ........ 2  (na frente da porta)
     pergaminho .... 3
   ------------------------------------------------------------------------- */
.door,
.rocks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* object-fit: cover = a imagem preenche todo o espaço, cortando o excesso
   (como o "preencher" de um papel de parede). Aplicado igual nas duas camadas,
   o corte é idêntico, então elas continuam encaixadas.

   O transform: scale aplica o zoom da folga. Está nas DUAS camadas com o mesmo
   valor, então o encaixe entre porta e pedras não muda. */
.door__image,
.rocks {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(var(--scene-zoom));
}

.rocks {
  z-index: 2;
  /* A CHAVE DO TRUQUE: as pedras estão na frente, mas o mouse as atravessa.
     Sem isto, clicar perto da moldura não chegaria na porta. */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* -------------------------------------------------------------------------
   4. A PORTA (o botão)
   Um <button> vem com estilos de sistema (borda cinza, fundo, padding).
   As três primeiras linhas "zeram" isso para ele virar só uma área clicável.
   ------------------------------------------------------------------------- */
.door {
  z-index: 1;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  /* transition = a mudança acontece suavemente, e não de um frame para o outro */
  transition: filter 0.35s ease, transform 0.35s ease;
}

/* EFEITO DE HOVER (mouse em cima) e de foco pelo teclado (Tab).
   :focus-visible só acende quando o foco veio do teclado — assim quem navega
   por Tab enxerga onde está, sem poluir o clique de mouse. */
.door:hover:not(:disabled),
.door:focus-visible {
  /* drop-shadow segue o contorno real do PNG (respeita a transparência),
     diferente de box-shadow, que desenharia um retângulo. Dois brilhos
     empilhados: um curto e forte, outro largo e suave. */
  filter: drop-shadow(0 0 12px var(--glow)) drop-shadow(0 0 45px var(--glow));
  transform: scale(var(--door-hover-scale));
  /* A tremidinha roda uma vez, toda vez que o mouse entra. */
  animation: door-nudge 0.55s ease-in-out;
}

/* Remove o contorno azul padrão do navegador — o brilho acima já é o aviso. */
.door:focus {
  outline: none;
}

/* Enquanto a batida está acontecendo, a porta fica travada. */
.door:disabled {
  cursor: default;
  filter: none;
}

/* Animação da tremidinha do hover: um balanço de poucos pixels.
   Os valores são pequenos de propósito — junto com o --scene-zoom, é isso que
   impede a borda do desenho de aparecer durante o movimento. */
@keyframes door-nudge {
  0%   { transform: scale(var(--door-hover-scale)) rotate(0deg) translateX(0); }
  25%  { transform: scale(var(--door-hover-scale)) rotate(-0.12deg) translateX(-2px); }
  55%  { transform: scale(var(--door-hover-scale)) rotate(0.12deg) translateX(2px); }
  80%  { transform: scale(var(--door-hover-scale)) rotate(-0.05deg) translateX(-1px); }
  100% { transform: scale(var(--door-hover-scale)) rotate(0deg) translateX(0); }
}

/* Animação da BATIDA (o JavaScript coloca a classe .is-knocking no clique):
   quatro solavancos curtos, no ritmo do "toc toc toc toc". */
.door.is-knocking {
  animation: door-knock 1.6s ease-in-out;
}

@keyframes door-knock {
  0%, 100%           { transform: scale(1) translateY(0); }
  6%, 28%, 50%, 72%  { transform: scale(0.998) translateY(2px); }  /* o toc */
  14%, 36%, 58%, 80% { transform: scale(1) translateY(0); }        /* a volta */
}

/* -------------------------------------------------------------------------
   5. A MENSAGEM NO PERGAMINHO

   São duas coisas no mesmo elemento:
     .message          → o texto e a posição na tela
     .message::before  → o papel desenhado atrás do texto

   ::before é um "pseudo-elemento": um elemento invisível no HTML que o CSS
   cria só para decorar. Como ele é filho do parágrafo, ele acompanha o
   tamanho do parágrafo automaticamente — é isso que faz o papel se adaptar
   ao texto sem nenhuma linha de JavaScript. Texto maior, papel maior.
   ------------------------------------------------------------------------- */
.message {
  position: absolute;
  z-index: 3;

  /* POSIÇÃO: centralizado na horizontal, lá embaixo na vertical.
     left: 50% leva a borda esquerda ao meio; o translateX(-50%) puxa de volta
     metade da própria largura — é assim que se centraliza de verdade.
     bottom: 8vh = 8% da altura da tela de distância do rodapé. */
  left: 50%;
  bottom: 8vh;

  width: min(34rem, 84vw);   /* min() = o que for menor: o texto ou a tela */
  margin: 0;
  /* O padding é a "margem do papel": espaço entre o texto e a beirada. */
  padding: 2.1rem 2.4rem 2.3rem;

  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(1rem, 1.9vw, 1.35rem); /* cresce com a tela, com limites */
  line-height: 1.65;
  color: var(--ink);
  text-wrap: balance;        /* distribui as linhas de forma mais bonita */
  /* Um brilho claro atrás das letras, como tinta absorvida pelo papel. */
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.5);

  /* Estado inicial: invisível e 20px mais abaixo... */
  opacity: 0;
  transform: translate(-50%, 20px);
  /* ...e sem receber cliques, para não bloquear a porta enquanto está escondida. */
  pointer-events: none;
  transition: opacity var(--fade-duration) ease,
              transform var(--fade-duration) ease;
}

/* Estado final: visível e na posição de repouso. */
.message.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/*
  AS LETRAS.
  O JavaScript quebra a frase em um <span class="letter"> por caractere, todos
  começando escondidos. Escrever "letra por letra" é só ir adicionando a classe
  .is-typed em cada um, na ordem.

  visibility: hidden (e não display: none) é essencial aqui: o elemento fica
  invisível MAS continua ocupando o lugar dele. É por isso que o pergaminho já
  nasce do tamanho final, em vez de ir crescendo e pulando na tela conforme o
  texto é escrito.
*/
.letter {
  visibility: hidden;
}

.letter.is-typed {
  visibility: visible;
}

/*
  Cada palavra é um span com white-space: nowrap. Sem isso, como cada letra é um
  elemento separado, o navegador entenderia que pode quebrar a linha entre duas
  letras quaisquer, e "ninguém" viraria "ningu-" numa linha e "ém" na outra.
  As quebras só podem acontecer nos espaços entre as palavras.
*/
.word {
  white-space: nowrap;
}

/*
  O "..." que ocupa o pergaminho enquanto ninguém escreveu nada.
  inset: 0 faz ele cobrir o papel inteiro e o grid centraliza no meio dele.
  Quando a escrita começa, ele ganha .is-gone e desaparece suavemente.
*/
.message__dots {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  letter-spacing: 0.3em;
  font-size: 1.4em;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.message__dots.is-gone {
  opacity: 0;
}

/*
  ESCONDIDO DOS OLHOS, VISÍVEL PARA LEITORES DE TELA.
  Este é um padrão clássico da web. Não se usa display: none nem
  visibility: hidden porque esses dois escondem o elemento do leitor de tela
  também. O truque é deixá-lo com 1 pixel e recortar o que sobra: ele continua
  existindo para quem lê a página em voz alta, mas ninguém o enxerga.
*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
  O PAPEL.
  inset: 0 faz ele cobrir exatamente a área do parágrafo (texto + padding).
  z-index: -1 coloca atrás do texto, mas ainda dentro do parágrafo.
*/
.message::before {
  content: "";               /* obrigatório: sem isto o ::before não existe */
  position: absolute;
  inset: 0;
  z-index: -1;

  /* A "textura" do papel: três manchas radiais claras/escuras por cima de um
     degradê de base. É o que tira o aspecto de retângulo chapado. */
  background:
    radial-gradient(ellipse at 22% 28%, rgba(255, 249, 226, 0.75) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 72%, rgba(168, 132, 74, 0.28) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 15%, rgba(196, 164, 105, 0.30) 0%, transparent 45%),
    linear-gradient(160deg, var(--paper-light) 0%, var(--paper) 45%, var(--paper-edge) 100%);

  /* A BORDA IRREGULAR.
     clip-path recorta o elemento seguindo uma lista de pontos (x y). Como os
     valores estão em %, o recorte se estica junto com o papel — o papel pode
     crescer que a irregularidade acompanha.
     Quer a borda mais rasgada? Afaste os números de 0% e 100%. */
  clip-path: polygon(
    1% 4%,    20% 0.5%,  46% 3%,   72% 0.5%,  99% 3.5%,
    98% 27%,  100% 52%,  98.5% 77%, 99% 96.5%,
    74% 99.5%, 50% 97%,  26% 100%, 2% 96.5%,
    0.5% 74%, 2% 50%,    0% 26%
  );

  /* Um giro mínimo, como um papel colado meio torto pela mão. */
  transform: rotate(-0.7deg);

  /* drop-shadow (e não box-shadow) porque a sombra precisa seguir o recorte
     irregular do clip-path, e não um retângulo. */
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55));
}

/*
  ===========================================================================
  QUANDO VOCÊ DESENHAR O SEU PERGAMINHO
  ===========================================================================
  Quando o seu papel.png estiver pronto, apague o bloco .message::before
  acima e descomente o de baixo. A técnica se chama "border-image de 9 fatias"
  (9-slice): você corta a imagem em 9 pedaços com duas linhas horizontais e
  duas verticais, como um jogo da velha.

      +----+--------+----+
      | 1  |   2    | 3  |     1,3,7,9 = os CANTOS → nunca esticam
      +----+--------+----+     2,8     = topo e base → esticam na horizontal
      | 4  |   5    | 6  |     4,6     = laterais    → esticam na vertical
      +----+--------+----+     5       = o miolo     → estica nos dois lados
      | 7  |   8    | 9  |
      +----+--------+----+

  É por isso que o papel pode crescer sem os cantos ficarem esmagados — que
  é exatamente o que aconteceria se você só esticasse a imagem inteira.

  Atenção ao caminho: o CSS mora em assets/css/, então "../img/papel.png"
  significa "suba uma pasta e entre em img". Endereços dentro do CSS são
  relativos ao ARQUIVO CSS, e não ao index.html.

  Como desenhar: faça um pergaminho de uns 300x300 px cujas BORDAS sejam
  razoavelmente uniformes (o meio pode ter o que você quiser, ele vai ser
  repetido/esticado). Depois meça quantos pixels de cada lado são "canto" —
  digamos 60 — e use esse número no border-image-slice.

  .message {
    border-style: solid;
    border-width: 60px;         // o tamanho do canto na TELA
    border-image-source: url("../img/papel.png");
    border-image-slice: 60 fill; // o tamanho do canto na IMAGEM
                                 // "fill" manda desenhar o miolo também
    border-image-repeat: round;  // "round" repete a textura sem cortar pela
                                 // metade; "stretch" estica. Teste os dois.
    padding: 1rem 1.4rem;        // o padding diminui, porque a borda já
                                 // empurra o texto para dentro
  }

  .message::before { content: none; }   // desliga o papel feito em CSS
  ===========================================================================
*/

/* -------------------------------------------------------------------------
   6. RODAPÉ COM A VERSÃO
   ------------------------------------------------------------------------- */
.footer {
  position: fixed;
  right: 0.9rem;
  bottom: 0.7rem;
  z-index: 4;
}

.version-button {
  border: none;
  background: none;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-family: inherit;   /* herda a fonte do body em vez da fonte do sistema */
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(232, 220, 192, 0.55);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  transition: color 0.25s ease;
}

.version-button:hover,
.version-button:focus-visible {
  color: var(--ui-text);
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   7. A JANELA DO CHANGELOG (<dialog>)
   ------------------------------------------------------------------------- */
.changelog {
  width: min(38rem, 92vw);
  max-height: 78vh;
  padding: 0;
  border: 1px solid rgba(232, 220, 192, 0.22);
  border-radius: 14px;
  background: #1d1708;
  color: var(--ui-text);
  font-family: inherit;
  overflow: auto;
}

/* ::backdrop é o fundo escurecido que o navegador desenha atrás do dialog. */
.changelog::backdrop {
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(2px);
}

.changelog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid rgba(232, 220, 192, 0.16);
  /* sticky: o cabeçalho fica grudado no topo enquanto a lista rola. */
  position: sticky;
  top: 0;
  background: #1d1708;
}

.changelog__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: normal;
  letter-spacing: 0.02em;
}

.changelog__close {
  border: none;
  background: none;
  color: var(--ui-text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.3rem;
  opacity: 0.7;
}

.changelog__close:hover {
  opacity: 1;
}

.changelog__body {
  padding: 0.4rem 1.3rem 1.4rem;
  font-size: 0.95rem;
  line-height: 1.65;
}

/* Título de cada versão, ex.: "0.2.0 — 2026-09-14" */
.changelog__version {
  margin: 1.3rem 0 0.2rem;
  font-size: 1.05rem;
  color: #f0c987;
}

.changelog__date {
  font-size: 0.8rem;
  color: rgba(232, 220, 192, 0.6);
}

/* Nome do grupo de mudanças: Adicionado, Corrigido... */
.changelog__section {
  margin: 0.8rem 0 0.1rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(232, 220, 192, 0.7);
}

.changelog__list {
  margin: 0.2rem 0;
  padding-left: 1.2rem;
}

/* -------------------------------------------------------------------------
   AS FALAS NO CHANGELOG
   Linhas no formato  M: "texto"  viram este bloco.
   O que muda de um personagem para o outro é só a cor — o formato é o mesmo,
   por isso as regras comuns ficam em .changelog__say e só as cores ficam nas
   classes com o nome de cada um.
   ------------------------------------------------------------------------- */
.changelog__say {
  margin: 0.75rem 0;
  padding: 0.55rem 0.9rem;
  /* A cor desta borda é definida lá embaixo, por personagem. */
  border-left: 3px solid;
  border-radius: 0 7px 7px 0;
  background: rgba(255, 255, 255, 0.035);
  font-style: italic;
  line-height: 1.6;
}

.changelog__speaker {
  font-style: normal;   /* o nome não fica em itálico, só a fala */
  font-weight: bold;
  letter-spacing: 0.04em;
}

/* O pontinho separando o nome da fala. Fica no CSS e não no JavaScript porque
   é decoração: se um dia você quiser trocar por dois-pontos ou por um traço,
   mexe aqui e não no código. */
.changelog__speaker::after {
  content: "·";
  margin: 0 0.5rem;
  opacity: 0.45;
  font-weight: normal;
}

/* --- Maxy: dourado --- */
.changelog__say--maxy {
  border-left-color: var(--voice-maxy);
  color: var(--voice-maxy-text);
}

.changelog__say--maxy .changelog__speaker {
  color: var(--voice-maxy);
}

/* --- Z: alaranjado --- */
.changelog__say--z {
  border-left-color: var(--voice-z);
  color: var(--voice-z-text);
}

.changelog__say--z .changelog__speaker {
  color: var(--voice-z);
}

/* -------------------------------------------------------------------------
   8. AJUSTES DE TELA
   ------------------------------------------------------------------------- */

/* Em telas "em pé" (celular na vertical), cover cortaria as laterais e comeria
   as pedras. contain mostra a cena inteira e deixa o fundo de terra aparecer
   nas sobras — continua alinhado porque vale para as duas camadas. */
@media (max-aspect-ratio: 1 / 1) {
  .door__image,
  .rocks {
    object-fit: contain;
  }

  /* No celular o papel sobe um pouco, para não encostar no rodapé. */
  .message {
    bottom: 10vh;
    width: 88vw;
    padding: 1.7rem 1.6rem 1.9rem;
  }
}

/* Respeita quem configurou o sistema para reduzir animações (enjoo, vertigem).
   O conteúdo continua funcionando: só as animações somem. */
@media (prefers-reduced-motion: reduce) {
  .door:hover:not(:disabled),
  .door:focus-visible {
    animation: none;
  }

  .door.is-knocking {
    animation: none;
  }

  .message {
    transition-duration: 0.01ms;
  }
}