/* Paleta de Cores Tema Ursínho:
   Bege Claro (Fundo): #f7f3e8
   Bege/Creme (Fundo Card): #fffaf0
   Marrom Suave (Texto/Borda): #a07855
   Marrom Escuro (Destaque): #6a4c35
   Branco: #ffffff
*/

:root {
    --cor-fundo-principal: #f7f3e8; /* Bege Claro */
    --cor-fundo-card: #fffaf0;     /* Creme */
    --cor-borda: #a07855;          /* Marrom Suave */
    --cor-texto-principal: #6a4c35; /* Marrom Escuro */
    --cor-destaque: #d4a373;       /* Marrom Caramelo para hover */
}

/* ------------------- ESTILO GERAL ------------------- */
body {
    font-family: 'Arial', sans-serif; /* Use uma fonte mais fofa se quiser! */
    background-image: url('https://i.pinimg.com/736x/47/b5/e0/47b5e06b90253d3fda831d000c104cec.jpg'); 
    background-repeat: repeat; /* Para garantir que o padrão preencha toda a área */
    background-color: #fffaf0; /* Cor de fallback caso a imagem não carregue */
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 1.6;
}

.header-ursinho, .footer-ursinho {
    background-color: var(--cor-fundo-card);
    padding: 20px 0;
    border-bottom: 3px solid var(--cor-borda);
}

.header-ursinho h1 {
    font-size: 2.5em;
    color: var(--cor-texto-principal);
    text-shadow: 1px 1px 0px var(--cor-borda);
}

/* ------------------- GALERIA (O LAYOUT) ------------------- */
.galeria-personagens {
    display: flex; /* Habilita o layout flexível */
    flex-wrap: wrap; /* Permite que os cards quebrem para a linha de baixo */
    justify-content: center; /* Centraliza os cards */
    gap: 30px; /* Espaço entre os cards */
    padding: 40px 20px;
}

.card-personagem {
    width: 280px; /* Largura fixa para os cards */
    background-color: var(--cor-fundo-card);
    border: 3px solid var(--cor-borda);
    border-radius: 15px; /* Bordas arredondadas */
    box-shadow: 5px 5px 0px var(--cor-borda); /* Sombra fofa */
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden; /* Garante que a imagem fique dentro da borda */
}

.card-personagem:hover {
    transform: translateY(-5px); /* Efeito de 'levantar' */
    box-shadow: 8px 8px 0px var(--cor-destaque); /* Sombra mais destacada */
}

.link-shrine {
    text-decoration: none; /* Remove sublinhado do link */
    color: inherit; /* Mantém a cor do texto do pai */
    display: block;
}

.card-personagem img {
    width: 100%;
    height: 280px; /* Altura fixa para as imagens */
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
    border-bottom: 2px solid var(--cor-borda);
}

.nome-personagem {
    font-size: 1.4em;
    font-weight: bold;
    padding: 15px 10px;
    background-color: #ffffff; /* Fundo branco no nome */
    border-top: 1px dashed var(--cor-borda); /* Linha divisória */
}

/* ------------------- RODAPÉ ------------------- */
.footer-ursinho {
    margin-top: 40px;
    border-top: 3px solid var(--cor-borda);
    border-bottom: none;
    font-size: 0.9em;
    font-style: italic;
}

/* Posicionamento inicial do botão */
.back-button {
    position: absolute; /* Pode mudar para absolute se quiser relativo a container */
    top: 7px;       /* Distância do topo */
    left: -20px;      /* Distância da esquerda */
    width: 15%; 
  height: auto;
    z-index: 999;    /* Sempre acima de outros elementos */
}

.back-button img {
  /* A imagem ocupará 80% do espaço disponível dentro da div .back-button */
  width: 80%; 
  height: auto; /* Garante que a proporção seja mantida */
}