:root {
    --main-pink: #fce8f4;
    --border-pink: #ffbde7;
    --dark-pink: #e098d0;
    --text-color: #555;
    --link-color: #edc5d0ff;
    --link-color-hover: #edc5d0ff;
    --button-bg: #fff;
    --button-border: #ffbde7;
    --font-kawaii: 'Comic Sans MS', sans-serif;
}

/* Garante que o corpo centralize o conteúdo */
body {
    background-color: var(--main-pink);
    font-family: var(--font-kawaii);
    display: flex;
    justify-content: center; /* CENTRALIZA HORIZONTALMENTE */
    align-items: center; /* CENTRALIZA VERTICALMENTE */
    min-height: 100vh;
    margin: 0;
    position: relative; /* Mantém a posição para os GIFs absolutos */
}

/* O container não deve forçar o layout, permitindo que o BODY centralize */
.container {
    position: relative;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* O cartão principal da página (A JANELA) */
.main-card {
    background-color: white;
    border: 5px solid var(--border-pink);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 90%;
    max-width: 600px;
    z-index: 2; /* Garante que fique acima dos GIFs e do background */
    position: relative; 
}

.profile-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid var(--dark-pink);
    object-fit: cover;
    margin-bottom: 20px;
}

.text-content h1 {
    font-size: 2em;
    color: var(--dark-pink);
    margin: 0;
}

.description {
    color: var(--text-color);
    font-size: 1em;
    margin-top: 10px;
}

.play-button {
    background-color: var(--button-bg);
    border: 2px solid var(--button-border);
    color: var(--text-color);
    padding: 10px 20px;
    margin-top: 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em;
    transition: background-color 0.3s, transform 0.3s;
}

.play-button:hover {
    background-color: var(--main-pink);
    transform: scale(1.05);
}

.play-icon {
    margin-right: 10px;
}


/* Ticker de CSS (Ajustado) */
.ticker-wrapper {
    background-color: var(--border-pink);
    overflow: hidden;
    border-radius: 10px;
    margin-top: 20px;
    padding: 5px 0; /* Diminuído para ser menos invasivo */
    width: 100%; /* Garante que ocupe a largura total do main-card */
    box-sizing: border-box; 
}

.ticker-text {
    display: flex;
    white-space: nowrap;
    animation: ticker-scroll 15s linear infinite;
    gap: 15px; /* Espaçamento entre os GIFs */
    align-items: center;
    height: 45px; /* Altura reduzida dos GIFs no ticker */
    width: fit-content;
    will-change: transform;
}

.ticker-text img {
    height: 110%;
    object-fit: contain;
}

/* Define a animação do ticker */
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-51.2%); }
}

/* Linha divisória (Horizontal Rule) */
hr {
    border: none;
    border-top: 1px solid var(--border-pink);
    margin: 15px auto; /* Centraliza horizontalmente e adiciona espaço vertical */
    width: 80%;
}

/* DECORAÇÕES (GIFs) - POSICIONAMENTO CORRIGIDO NOS CANTOS */
.decorative-gif, .decorative-gif2 { 
    position: absolute;
    width: 120px;
    height: auto;
    z-index: 1; 
    opacity: 0.8;
}

.top-left {
    top: 5px; /* Perto da borda superior */
    left: 5px; /* Perto da borda esquerda */
}

.bottom-right {
    bottom: 5px; /* Perto da borda inferior */
    right: 5px; /* Perto da borda direita */
}

/* As regras duplicadas do body e main-card foram removidas */

/* Estilos para o Tamanotchi que você tinha inserido */
.tamanotchi-pet {
    position: absolute;
    z-index: 10;
    bottom: 20px;
    right: 20px;
}

.tamanotchi-pet img {
    width: 10px; 
    height: auto;
}

a {
    /* 1. ESTADO NORMAL: Links que NUNCA foram visitados */
    color: #007bff; /* Exemplo de cor azul */
    text-decoration: none; /* Remove o sublinhado padrão */
}

a:visited {
    /* 2. ESTADO VISITADO: Links que JÁ foram clicados */
    color: #6610f2; /* Exemplo de cor roxa escura */
}

a:hover {
    /* 3. ESTADO HOVER: Quando o mouse está SOBRE o link */
    color: #d67abe; /* Exemplo de cor amarela */
    text-decoration: underline; /* Opcional: Adiciona sublinhado ao passar o mouse */
}