/* 
    Planeta dos Bichos Misturados - Estilos Globais 
    Paleta de Cores: Vibrante, Amigável para Crianças
*/

:root {
    --primary: #FF5E5B;
    --secondary: #4ECDC4;
    --accent: #FFE66D;
    --dark: #292F36;
    --light: #F7FFF7;
    --bg-gradient: linear-gradient(135deg, #A8E6CF 0%, #DCEDC1 100%);
    --card-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    --hover-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    --transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 🌈 TELA DE CARREGAMENTO INICIAL (KID-FRIENDLY) 🌈 */
.initial-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    /* Super Top Level */
    background: radial-gradient(circle at center, #A8E6CF 0%, #DCEDC1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1s ease-out, visibility 1s;
    user-select: none;
}

.initial-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content-wrapper {
    text-align: center;
    padding: 40px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 60px;
    border: 12px solid #fff;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.15);
    max-width: 90%;
    width: 480px;
    animation: loaderPopIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes loaderPopIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.planet-animation {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto 30px;
}

.floating-logo {
    width: 160px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: floatLogo 3s ease-in-out infinite;
    z-index: 2;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

.orbiting-paws {
    position: absolute;
    inset: 0;
    animation: orbit 5s linear infinite;
}

.rotating-paw {
    position: absolute;
    font-size: 3rem !important;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.15));
}

.rotating-paw:nth-child(1) {
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    color: #FF5E5B;
}

/* ✨ TUTORIAL EFFECTS ✨ */
.pulse-tutorial {
    animation: childPulse 1.2s ease-in-out infinite !important;
    box-shadow: 0 0 20px rgba(255, 230, 109, 0.8) !important;
    border: 4px solid var(--accent) !important;
    border-radius: 20px;
    position: relative;
    z-index: 10001;
}

@keyframes childPulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.08);
        filter: brightness(1.2) drop-shadow(0 0 15px var(--accent));
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

.rotating-paw:nth-child(2) {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    color: #4ECDC4;
}

.rotating-paw:nth-child(3) {
    top: 50%;
    right: -10px;
    transform: translateY(-50%) rotate(90deg);
    color: #FFE66D;
}

@keyframes floatLogo {

    0%,
    100% {
        transform: translate(-50%, -55%);
    }

    50% {
        transform: translate(-50%, -45%);
    }
}

@keyframes simpleFloat {

    0%,
    100% {
        transform: translateY(-8px);
    }

    50% {
        transform: translateY(8px);
    }
}

@keyframes orbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#initial-load-text {
    font-family: 'Outfit', sans-serif;
    color: #292F36;
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: 900;
    text-shadow: 0 2px 0 #fff;
}

.loading-bar-container {
    height: 36px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    border: 5px solid #fff;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.1);
}

.loading-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #FF5E5B, #FF9B9B, #FF5E5B);
    background-size: 200% 100%;
    animation: barShimmer 2s linear infinite;
    border-radius: 18px;
    transition: width 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
    box-shadow: 0 0 15px rgba(255, 94, 91, 0.4);
}

@keyframes barShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

#initial-load-percentage {
    margin-top: 10px;
    font-weight: 900;
    color: #FF5E5B;
    font-size: 1.4rem;
}

.loading-subtext {
    color: #777;
    font-size: 1.1rem;
    font-weight: 600;
    font-style: italic;
    margin-top: 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH SCREEN - Tela de Login / Cadastro
═══════════════════════════════════════════════════════════════════ */
.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    /* Acima de tudo */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 20px;
    overflow-y: auto;
}

.auth-overlay.hidden {
    display: none !important;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: transparent;
    backdrop-filter: blur(10px);

    z-index: 9999;
    pointer-events: all;
    cursor: pointer;
    padding-top: 100px;
    padding-bottom: 100px;
    display: flex;
    align-items: center;
    /* centraliza vertical */
    justify-content: center;
    /* centraliza horizontal */
}

.modal-overlay.hidden {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}


.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border: 8px solid var(--accent);
    border-radius: 50px;
    padding: 45px 35px 35px;
    box-shadow:
        0 20px 0 var(--secondary),
        0 30px 50px rgba(0, 0, 0, 0.15);
    animation: authCardIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    margin: 20px;
    overflow: hidden;
}

.auth-card::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100px;
    height: 100px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0.1;
    z-index: -1;
}

.auth-card::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 150px;
    height: 150px;
    background: var(--secondary);
    border-radius: 50%;
    opacity: 0.1;
    z-index: -1;
}

.auth-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #f0f0f0;
    border: 4px solid #ddd;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 20;
    padding: 0;
}

.auth-close:hover {
    background: var(--primary);
    border-color: #fff;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 20px rgba(255, 94, 91, 0.6);
}

.auth-close .material-symbols-rounded {
    font-size: 28px;
}

@keyframes authCardIn {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.auth-logo {
    display: block;
    width: 220px;
    margin: 0 auto 30px;
    filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.05));
    transition: transform 0.3s ease;
}

.auth-card:hover .auth-logo {
    transform: scale(1.05) rotate(2deg);
}

/* ── Abas ── */
.auth-tabs {
    display: flex;
    background: #f0f0f0;
    border-radius: 35px;
    padding: 6px;
    margin-bottom: 30px;
    gap: 6px;
    border: 3px solid #eee;
}

.auth-tab {
    flex: 1;
    padding: 13px 0;
    border: none;
    border-radius: 30px;
    background: transparent;
    color: #888;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-transform: uppercase;
}

.auth-tab.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 6px 0 #cc4b48;
    transform: translateY(-2px);
}

.auth-tab:not(.active):hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
}

/* ── Painéis ── */
.auth-panel {
    display: none;
    flex-direction: column;
    gap: 16px;
    animation: panelFadeIn 0.3s ease;
}

.auth-panel.active {
    display: flex;
}

@keyframes panelFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Campo de formulário ── */
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555;
    font-size: 1rem;
    font-weight: 900;
    text-transform: none;
}

.auth-field label .material-symbols-rounded {
    font-size: 1.1rem;
    color: var(--accent);
}

.auth-field input {
    width: 100%;
    padding: 15px 20px;
    background: #f8f8f8;
    border: 3px solid #eee;
    border-radius: 20px;
    color: #333;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    outline: none;
    transition: all 0.3s ease;
}

.auth-field input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.auth-field input:focus {
    border-color: var(--secondary);
    background: #fff;
    box-shadow: 0 0 0 6px rgba(78, 205, 196, 0.15);
    transform: scale(1.02);
}

.auth-field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.6);
    cursor: pointer;
}

/* ── Wrapper para senha + olho ── */
.password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrap input {
    padding-right: 48px;
}

.btn-eye {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer;
    color: #bbb;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.btn-eye:hover {
    color: var(--accent);
}

.btn-eye .material-symbols-rounded {
    font-size: 1.3rem;
}

/* ── Campo username + status ── */
.field-with-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.field-with-status input {
    flex: 1;
}

.username-status {
    font-size: 0.75rem;
    font-weight: 900;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 20px;
    background: #f0f0f0;
    color: #888;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.username-status.available {
    background: #e8fff0;
    color: #2fb35a;
    box-shadow: 0 4px 0 #27964b;
}

.username-status.unavailable {
    background: #fff0f0;
    color: var(--primary);
    box-shadow: 0 4px 0 #cc4b48;
}

.username-status.checking {
    background: #f0f0f0;
    color: #888;
}

/* ── Mensagem de erro ── */
.auth-error {
    background: #fff5f5;
    border: 3px solid #ffcdcd;
    border-radius: 20px;
    padding: 12px 18px;
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: shakeErr 0.4s ease;
}

@keyframes shakeErr {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(8px);
    }

    60% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(5px);
    }
}

/* ── Botão principal de auth ── */
.btn-auth {
    width: 100%;
    padding: 18px;
    margin-top: 10px;
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: 30px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 8px 0 #3ba8a0, 0 15px 30px rgba(78, 205, 196, 0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-auth:hover {
    transform: translateY(-4px);
    filter: brightness(1.05);
    box-shadow: 0 12px 0 #3ba8a0, 0 20px 40px rgba(78, 205, 196, 0.5);
}

.btn-auth:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #3ba8a0;
}

/* ── Loading ── */
.auth-loading {
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--dark);
    font-size: 1.1rem;
    font-weight: 900;
    z-index: 100;
}

.auth-spinner {
    width: 50px;
    height: 50px;
    border: 6px solid #f0f0f0;
    border-top-color: var(--secondary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.hidden {
    display: none !important;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Outfit', sans-serif;
    background: url('fundoBody.webp') no-repeat center center fixed;
    background-size: cover;
    color: var(--dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Impede barras de rolagem */
    user-select: none;
    margin: 0;
    padding: 0;
    height: 100vh;
}

#btn-next-question {
    max-width: 250px;
}

#game-stage {
    width: 1280px;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    flex-shrink: 0;
    z-index: 10;
    zoom: 0.7;
}

#game-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: white;
    border-radius: 40px;

    /* Borda strictly EXTERNAL */
    outline: 16px solid #558b2f;
    outline-offset: 8px;

    box-shadow:
        0 0 0 25px #33691e,
        0 30px 60px rgba(0, 0, 0, 0.6);

    overflow: hidden;
    container-type: size;
}

/* ── Decorações Naturais (cenasPecas) ── */
.game-decorations-overlay {
    position: absolute;
    inset: -50px;
    /* Expande ainda mais o container para fora */
    pointer-events: none;
    z-index: 9990;
    /* Sobrepõe absolutamente tudo, incluindo modais e tela de carregamento! */
    overflow: visible;
    /* Garante que não corte as pontas das folhas */
    border-radius: 40px;
}

.decor-item {
    position: absolute;

    pointer-events: none;
}

/* Posicionamento Extremo para não atrapalhar o jogo */
.bottom-left-1 {
    bottom: 0px;
    left: -50px;
    width: 220px;
    transform: rotate(15deg);
}

.bottom-left-2 {
    bottom: -20px;
    left: -50px;
    width: 100px;
    opacity: 1;
}

.bottom-right-1 {
    bottom: 0px;
    right: -60px;
    width: 240px;
    transform: rotate(-20deg);
}

.bottom-right-2 {
    bottom: 00px;
    right: -50px;
    width: 80px;
    opacity: 1;
}

.bottom-center {
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    opacity: 1;
}

.top-left-1 {
    top: -0x;
    left: -90px;
    width: 180px;
    transform: rotate(-15deg);

}

.top-left-2 {
    top: 0px;
    left: 500px;
    width: 200px;
    transform: rotate(15deg);
    opacity: 1;

}

.top-right-1 {
    top: -30px;
    right: -60px;
    width: 160px;
    transform: rotate(20deg);

}

.menina {
    bottom: -20px;
    left: -200px;
    width: 300px;
    transform-origin: bottom center;
    animation: decorBreath 4s ease-in-out infinite;
}


.menino {
    bottom: -20px;
    right: -200px;
    width: 300px;
    transform-origin: bottom center;
    animation: decorBreath 4s ease-in-out infinite;
    animation-delay: 0.5s;
}

.chao {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4000px;

    transform: translate(-50%, -50%);
    transform-origin: center;
}

/* Animação sutil de vento nos itens */

@keyframes decorSway {

    0%,
    100% {
        transform: scale(1) rotate(var(--rot, 0deg));
    }

    50% {
        transform: scale(1.01) rotate(calc(var(--rot, 0deg) + 2deg));
    }
}

@keyframes decorBreath {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.003);
    }
}

.bottom-left-1 {
    --rot: 10deg;
}

.bottom-right-1 {
    --rot: -15deg;
}

.top-left-1 {
    --rot: -10deg;
}

.top-right-1 {
    --rot: 15deg;
}

/* ═══════════════════════════════════════
   PAINEL JOGADORES ONLINE
═══════════════════════════════════════ */
.online-players-panel {
    position: absolute;
    left: 20px;
    top: 200px;
    width: 200px;
    background: linear-gradient(180deg, rgba(30, 45, 30, 0.94), rgba(15, 25, 15, 0.9));
    border: 2px solid rgba(100, 255, 150, 0.3);
    border-radius: 20px;
    padding: 12px;
    z-index: 500;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);

    height: 300px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: white;
    background: transparent;


    /* fundo mais transparente */
    background: linear-gradient(180deg,
            rgba(34, 90, 34, 0.35),
            rgba(16, 50, 16, 0.35));

    backdrop-filter: blur(6px);

    /* borda suave */
    border: 1px solid rgba(120, 255, 120, 0.25);

    box-shadow:
        inset 0 1px 6px rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.35);

    color: white;
    font-weight: bold;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.online-players-panel.minimized {
    height: 48px;
    overflow: hidden;
    width: 140px;
}

.online-players-panel.minimized .online-players-list {
    display: none;
}

.online-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: #7ad6ff;
    border-bottom: 1px solid rgba(100, 200, 255, 0.2);
    padding-bottom: 8px;
    transition: color 0.2s;
}

.online-panel-header:hover {
    color: #00e676;
}

.online-count-badge {
    margin-left: auto;
    background: #00e676;
    color: #000;
    font-size: 0.75rem;
    font-weight: 900;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.online-players-list {
    list-style: none;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 250px;
    scrollbar-width: none;

}

.online-players-list::-webkit-scrollbar {
    display: none;
}

.online-empty-msg {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 10px 0;
    font-style: italic;
}

.online-player-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 8px 10px;
    transition: all 0.2s;
}

.online-player-item.is-me {
    background: rgba(0, 230, 118, 0.15);
    border-color: rgba(0, 230, 118, 0.3);
}

.online-me-tag {
    font-size: 0.65rem;
    background: #00e676;
    color: #000;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.online-player-item:hover {
    background: rgba(255, 255, 255, 0.12);
}

.online-player-dot {
    width: 9px;
    height: 9px;
    background: #00e676;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.5);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(0, 230, 118, 0);
    }
}

.online-player-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    color: white;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-challenge-player {
    background: linear-gradient(135deg, #ff5e5b, #ff8c00);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 5px 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: transform 0.2s, filter 0.2s;
    white-space: nowrap;
    font-family: 'Outfit', sans-serif;
}

.btn-challenge-player:hover {
    transform: scale(1.08);
    filter: brightness(1.2);
}

.btn-challenge-player .material-symbols-rounded {
    font-size: 15px;
}

/* ═══════════════════════════════════════
   MODAIS DE CONVITE DE BATALHA
═══════════════════════════════════════ */
.challenge-modal-card {
    text-align: center;
    padding: 35px 25px;
    max-width: 400px;
    width: 92% !important;
    background: rgba(255, 251, 235, 0.98) !important;
    /* Creme suave e amigável */
    border: 6px solid #ffcc33 !important;
    /* Borda grossa amarela "brinquedo" */
    border-radius: 45px !important;
    box-shadow: 0 20px 0 #d4a017, 0 30px 45px rgba(0, 0, 0, 0.3) !important;
    /* Sombra com profundidade 3D */
    animation: modalPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    position: relative;
}

@keyframes modalPopIn {
    0% {
        transform: scale(0.8) translateY(20px);
        opacity: 0;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.challenge-badge {
    font-size: 4.5rem;
    line-height: 1;
    margin-bottom: 15px;
    animation: badgeWiggle 2s infinite ease-in-out;
    display: inline-block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

@keyframes badgeWiggle {

    0%,
    100% {
        transform: rotate(-5deg) scale(1);
    }

    50% {
        transform: rotate(5deg) scale(1.1);
    }
}

.challenge-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: #4e342e;
    /* Marrom escuro amigável */
    margin-bottom: 4px;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -1px;
}

.challenge-subtitle {
    font-size: 1.1rem;
    color: #795548;
    margin-bottom: 20px;
    font-weight: 600;
}

.challenge-biome-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e1f5fe;
    border: 3px solid #03a9f4;
    border-radius: 20px;
    padding: 8px 18px;
    font-weight: 800;
    color: #01579b;
    margin-bottom: 25px;
    font-size: 1rem;
    box-shadow: 0 4px 0 #0288d1;
}

.challenge-question {
    font-size: 1.2rem;
    font-weight: 800;
    color: #333;
    margin-bottom: 25px;
    background: #fff9c4;
    padding: 10px;
    border-radius: 15px;
    display: inline-block;
    border: 2px dashed #fbc02d;
}

.challenge-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 16px;
}

.btn-challenge-accept {
    background: #4caf50;
    border: none;
    border-radius: 25px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    padding: 15px 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 6px 0 #2e7d32;
    text-transform: uppercase;
}

.btn-challenge-accept:hover {
    transform: scale(1.05) rotate(2deg);
    background: #66bb6a;
}

.btn-challenge-accept:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #2e7d32;
}

.btn-challenge-reject {
    background: #f44336;
    border: none;
    border-radius: 25px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    padding: 15px 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 6px 0 #c62828;
    text-transform: uppercase;
}

.btn-challenge-reject:hover {
    transform: scale(1.05) rotate(-2deg);
    background: #ef5350;
}

.btn-challenge-reject:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #c62828;
}

.challenge-countdown {
    font-size: 1rem;
    color: #5d4037;
    font-weight: 700;
    margin-top: 10px;
    background: #efebe9;
    padding: 8px 15px;
    border-radius: 12px;
    display: inline-block;
}

.challenge-countdown span {
    color: #e65100;
    font-weight: 900;
    font-size: 1.3rem;
}

.challenge-spinner-bar {
    width: 105%;
    height: 14px;
    background: #eeeeee;
    border-radius: 20px;
    overflow: hidden;
    margin: 20px -2.5% 0;
    border: 3px solid #ddd;
}

.challenge-spinner-fill {
    height: 100%;
    width: 100%;
    background: repeating-linear-gradient(45deg,
            #4fc3f7,
            #4fc3f7 10px,
            #29b6f6 10px,
            #29b6f6 20px);
    border-radius: 20px;
    animation: spinnerFill 30s linear forwards;
}

@keyframes spinnerFill {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

/* 💬 BALÕES DE FALA (DICAS EDUCATIVAS) 💬 */
.speech-bubble {
    position: absolute;
    background: white;
    border: 4px solid var(--secondary);
    border-radius: 20px;
    padding: 15px;
    max-width: 250px;
    min-width: 140px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: bubblePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-sizing: border-box;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -20px;
    border-width: 20px 20px 0;
    border-style: solid;
    border-color: white transparent transparent;
}

.speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -26px;
    border-width: 20px 20px 0;
    border-style: solid;
    border-color: var(--secondary) transparent transparent;
}

#bubble-menina {
    bottom: 420px;
    left: -200px;
    transform-origin: bottom center;
}

#bubble-menina::after,
#bubble-menina::before {
    left: 50%;
    transform: translateX(-50%);
}

#bubble-menino {
    bottom: 420px;
    right: -200px;
    transform-origin: bottom center;
}

#bubble-menino::after,
#bubble-menino::before {
    right: 50%;
    transform: translateX(50%);
}

@keyframes bubblePop {
    from {
        transform: scale(0) translateY(20px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.speech-bubble.hidden {
    display: none !important;
}

/* Screens */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    padding: 0;
    background: var(--light);
    background-size: cover;
    background-position: center;
}

.screen.active {
    display: flex;
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Buttons */
.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 0 #b71c1c, 0 8px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.1s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 8px 0 #b71c1c, 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-primary:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #b71c1c;
}

.btn-image {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.1s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.2));
    outline: none;
}

.btn-image:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.2)) brightness(1.1);
}

.btn-image:active {
    transform: translateY(6px);
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.2));
}

.btn-image img {
    max-width: 350px;
    height: auto;
    display: block;
}

#btn-fusion-tool {
    transition: all 0.3s ease;
    height: 85px;
    /* Altura padrão do cabeçalho */
    display: flex;
    align-items: center;
}

#btn-fusion-tool img {
    height: 100%;
    /* Ajusta a imagem à altura do botão */
    width: auto;
}

#btn-fusion-tool:hover {
    transform: scale(1.08) translateY(-5px);
    filter: brightness(1.1) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}

.btn-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
    overflow: hidden;
}

.btn-secondary {
    background: var(--secondary);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 0 #388e3c, 0 6px 12px rgba(0, 0, 0, 0.2);
    font-size: 20px;
    transition: all 0.1s ease;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #388e3c, 0 8px 15px rgba(0, 0, 0, 0.2);
}

.btn-secondary:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #388e3c;
}

.btn-icon {
    background: #388e3c;
    border: 3px solid #eee;
    padding: 12px 20px;
    border-radius: 20px;
    font-size: 1.5rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 900;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 0 #ddd;
    color: var(--light);
    position: relative;
    /* Necessário para as partículas */
}

/* Partículas Sparkle do Botão */
.sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 0 10px white, 0 0 20px gold;
    animation: buttonSparkleAnim 2s forwards ease-out;
}

@keyframes buttonSparkleAnim {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(var(--x), var(--y)) scale(1.5);
        opacity: 0;
    }
}

.btn-icon:hover {
    background: #519755;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #ddd;
}

.btn-icon:active {
    transform: translateY(2px);
    box-shadow: 0 0px 0 #ddd;
}

#btn-home {
    background: #FFD3B6;
    border-color: #FFAAA5;
    box-shadow: 0 4px 0 #FF8B94;
    color: #444;
}

.btn-battle-container {
    position: relative;
    width: 250px;
    height: 85px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

#btn-battle {
    background: url('botoes/fundoBatalha.webp') no-repeat center;
    background-size: contain;
    /* Ajustado para preencher sem recorte */
    border: none;
    border-radius: 0;
    width: 100%;
    height: 100%;
    color: white;
    font-weight: 900;
    font-size: 1.2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    justify-content: center;
    box-shadow: none;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: visible;
    position: relative;
    z-index: 2;
}



.battle-sparkle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: var(--c, #fff);
    border-radius: 50%;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 10px var(--c, #fff);
    animation: floatSparkle 3s infinite ease-in-out;
    animation-delay: var(--d, 0s);
    opacity: 0;
}

@keyframes floatSparkle {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    20% {
        opacity: 0.8;
    }

    100% {
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.5);
        opacity: 0;
    }
}

#btn-album {
    background: url('botoes/botao_boss_gorila.webp') no-repeat center;
    background-size: contain;
    /* Ajustado para preencher sem recorte */
    border: none;
    border-radius: 0;
    width: 250px;
    height: 100px;
    color: white;
    font-weight: 900;
    font-size: 1.2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    justify-content: center;
    box-shadow: none;
    overflow: hidden;
    position: absolute;
    top: 150px;
    right: -40px;
    z-index: 190;
}

.floating-back {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
}

.album-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px;
    background: transparent;
    padding: 12px 25px;
    border-radius: 0px;
    backdrop-filter: none;
    box-shadow: none;
    border: none;
    z-index: 100;


    /* fundo mais transparente */
    background: linear-gradient(180deg,
            rgba(34, 90, 34, 0.35),
            rgba(16, 50, 16, 0.35));

    backdrop-filter: blur(6px);

    /* borda suave */
    border: 1px solid rgba(120, 255, 120, 0.25);

    box-shadow:
        inset 0 1px 6px rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.35);

    color: white;
    font-weight: bold;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}



.album-header h2 {
    font-size: 2.5rem;
    color: var(--light);
    font-weight: 900;
    margin: 0;
}

.fusion-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.fusion-header h2 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--light);
}

/* Menu Screen */
#screen-menu {
    background-image: url('capaJogo.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 72px;
    /* Era 10vh, agora fixo proporcional ao container 1280x720 */
    display: flex;
    gap: 30px;
}

.menu-content {
    background: none;
    backdrop-filter: none;
    padding: 0;
    border: none;
    box-shadow: none;
}



.logo {
    height: 250px;
    width: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    margin-bottom: 30px;
    animation: pulseLogo 4s infinite ease-in-out;
}

#btn-play {

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 10px rgba(255, 230, 109, 0.5));
    border-radius: 50px;
}

#btn-play:hover {
    transform: scale(1.1) rotate(1deg);
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 20px rgba(255, 230, 109, 0.8)) brightness(1.1);
}

#btn-play:active {
    transform: scale(0.95) translateY(4px);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 5px rgba(255, 230, 109, 0.4));
}

@keyframes bouncePlay {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(-1deg);
    }
}


/* Sun Sparkle Effects - Intensified */
.sun-sparkle {
    position: absolute;
    width: 150px;
    /* Um pouco maior */
    height: 150px;
    background: radial-gradient(circle,
            rgba(255, 255, 100, 0.9) 0%,
            rgba(255, 230, 0, 0.5) 40%,
            rgba(255, 180, 0, 0.1) 70%,
            transparent 100%);
    border-radius: 50%;
    filter: blur(8px);
    pointer-events: none;
    z-index: 2;
    /* Garante que fique acima do cenário */
    mix-blend-mode: screen;
    /* Perfeito para efeitos de luz */
    animation: sunTwinkle 3s ease-in-out infinite alternate;
}

@keyframes sunTwinkle {
    0% {
        transform: scale(0.8) rotate(0deg);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.3) rotate(45deg);
        opacity: 1;
    }

    100% {
        transform: scale(0.9) rotate(90deg);
        opacity: 0.5;
    }
}

.btn-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
}

@keyframes magicGlow {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }

    100% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

@keyframes shineSweep {
    0% {
        left: -100%;
    }

    20% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes pulseLogo {

    0%,
    100% {
        transform: scale(1) rotate(-2deg);
    }

    50% {
        transform: scale(1.08) rotate(2deg);
    }
}

@keyframes sparkle {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
    }

    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

.game-title {
    font-size: 3.5rem;
    margin-bottom: 25px;
    color: white;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    font-weight: 900;
}

.game-title span {
    color: var(--accent);
    display: block;
}

/* Map Screen */
#screen-map {
    padding: 0px;
    flex-direction: column;
    justify-content: center;
    background-image: url('cenarios/cenario_completo_biomas.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}





#screen-album {
    padding: 0;
    overflow-y: auto;
    background: linear-gradient(135deg, #A8E6CF 0%, #DCEDC1 100%);
    /* Fundo temático suave */
}

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px;
    padding: 12px 25px;
    border-radius: 30px;
    backdrop-filter: none;
    box-shadow: none;
    border: none;
    z-index: 100;
    overflow: visible !important;
    background: transparent;
    height: 130px;

    /* fundo mais transparente */
    background: linear-gradient(180deg,
            rgba(34, 90, 34, 0.35),
            rgba(16, 50, 16, 0.35));

    backdrop-filter: blur(6px);

    /* borda suave */
    border: 1px solid rgba(120, 255, 120, 0.25);

    box-shadow:
        inset 0 1px 6px rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.35);

    color: white;
    font-weight: bold;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);

}






.discovery-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    /* Altura padrãoizada */
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 20px;
    margin-left: 20px;
}

.discovery-container:hover {
    transform: scale(1.08) translateY(-5px);
    filter: brightness(1.1);
}

.credits-container {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #ffd700 0%, #ffae42 100%);
    padding: 10px 25px;
    border-radius: 40px;
    border: 3px solid white;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.5);
    height: 60px;
    transition: all 0.3s ease;
    margin-right: 30px;
    cursor: pointer;
}

.credits-container:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
}

.credits-container .coin-icon,
.xp-container .xp-icon,
.power-container .material-symbols-rounded {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}

.stat-item .coin-icon,
.stat-item .xp-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-right: 8px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}

.icon-small {
    width: 20px !important;
    height: 20px !important;
}

.credits-display {
    font-size: 1.8rem;
    font-weight: 900;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    min-width: 60px;
}

.power-container {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #7b1fa2 0%, #1976d2 100%);
    padding: 10px 25px;
    border-radius: 40px;
    border: 3px solid white;
    box-shadow: 0 5px 15px rgba(123, 31, 162, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.5);
    height: 60px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.power-container:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(123, 31, 162, 0.6);
}

.power-container .material-symbols-rounded {
    font-size: 2.2rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.power-display {
    font-size: 1.8rem;
    font-weight: 900;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    min-width: 50px;
}

.xp-container {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #ba68c8 0%, #9c27b0 100%);
    padding: 10px 25px;
    border-radius: 40px;
    border: 3px solid white;
    box-shadow: 0 5px 15px rgba(156, 39, 176, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.5);
    height: 60px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.xp-container:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(156, 39, 176, 0.6);
}



.xp-display {
    font-size: 1.8rem;
    font-weight: 900;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    min-width: 50px;
}

.discovery-bg {
    height: 100%;
    width: auto;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
}

.discovery-content {
    position: absolute;
    top: 60%;
    left: 23%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    width: 100%;
    gap: 0px;
}

.discovery-label {
    color: #444;
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: -5px;
    letter-spacing: 1px;

}

#discovered-count {
    color: #9e2703;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 3px 3px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
}

.colection {
    color: #9e2703;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 3px 3px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
}

.map-view {
    position: relative;
    width: 100%;
    height: 100%;
    flex-grow: 1;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

#backgroundbau {
    position: absolute;

    right: 20px;
    top: 2%;
    height: 420px;
    width: 120px;

    background: linear-gradient(180deg, rgba(30, 45, 30, 0.94), rgba(15, 25, 15, 0.9));
    border: 2px solid rgba(100, 255, 150, 0.3);
    border-radius: 20px;
    padding: 12px;

    backdrop-filter: blur(12px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);


    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    background: transparent;


    /* fundo mais transparente */
    background: linear-gradient(180deg,
            rgba(34, 90, 34, 0.35),
            rgba(16, 50, 16, 0.35));

    backdrop-filter: blur(6px);

    /* borda suave */
    border: 1px solid rgba(120, 255, 120, 0.25);

    box-shadow:
        inset 0 1px 6px rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.35);





}

/* Custom Vertical Scrollbar */
.map-view::-webkit-scrollbar,
#screen-album::-webkit-scrollbar,
.swap-card-body::-webkit-scrollbar,
.album-content::-webkit-scrollbar,
#inventory-list::-webkit-scrollbar {
    width: 15px;
}

.map-view::-webkit-scrollbar-track,
#screen-album::-webkit-scrollbar-track,
.swap-card-body::-webkit-scrollbar-track,
.album-content::-webkit-scrollbar-track,
#inventory-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.map-view::-webkit-scrollbar-thumb,
#screen-album::-webkit-scrollbar-thumb,
.swap-card-body::-webkit-scrollbar-thumb,
.album-content::-webkit-scrollbar-thumb {
    background-image: url('nature_scrollbar.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    cursor: pointer;
}

#inventory-list::-webkit-scrollbar-thumb {
    background-image: url('space_scrollbar.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    cursor: pointer;
}

.map-view::-webkit-scrollbar-thumb:active,
#screen-album::-webkit-scrollbar-thumb:active,
.swap-card-body::-webkit-scrollbar-thumb:active,
.album-content::-webkit-scrollbar-thumb:active,
#inventory-list::-webkit-scrollbar-thumb:active {
    filter: brightness(1.2) saturate(1.2);
}



.biome-card {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    z-index: 10;
}

/* Posições no Mapa (baseado no desenho de fundo) */
.biome-card[data-biome="floresta"] {

    top: 30%;
    left: 25%;



}

.biome-card[data-biome="montanha"] {
    top: 10%;
    left: 35%;
}

.biome-card[data-biome="frutas"] {
    top: 15%;
    left: 75%;
}

.biome-card[data-biome="caverna"] {
    top: 78%;
    left: 15%;

}

.biome-card[data-biome="cidade"] {

    top: 52%;
    left: 42%;
}

.biome-card[data-biome="oceano"] {
    top: 45%;
    left: 75%;
}

/* Arena de Batalhas no Mapa */
.arena-card {
    top: 65%;
    left: 65%;
}

@keyframes bounceArena {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

.biome-card:hover {
    transform: scale(1.15) translateY(-5px);
    filter: drop-shadow(0 0 20px rgba(255, 230, 109, 0.6));
}






.biome-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.biome-card:hover img {
    transform: scale(1.1);
}

.biome-name,
.biome-name2,
.biome-name3,
.biome-name4,
.biome-name-arena,
.biome-name-shop {
    display: block;
    color: white;
    padding: 8px 22px;
    border-radius: 50px;
    text-align: center;
    font-weight: 950;
    font-size: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    border: 4px solid white;
    z-index: 15;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    font-family: 'Outfit', 'Inter', sans-serif;
}

/* Biomas Comuns (Frutas, Cidade, Oceano) - Tons de azul e ciano alegre */
.biome-name {
    background: linear-gradient(135deg, #00d2ff, #3a7bd5);
}

/* Montanha Gelada - Branco Neve e Azul Celeste */
.biome-name2 {
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
    color: #1a237e;
    border-color: #e3f2fd;
}

/* Floresta Tropical - Verde Vibrante */
.biome-name3 {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    color: #1b5e20;
}

/* Caverna Mágica - Roxo e Rosa Místico */
.biome-name4 {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Arena - Vermelho Batalha */
.biome-name-arena {
    background: linear-gradient(135deg, #ff0844, #ffb199);
}

/* Shopping - Dourado Alegria */
.biome-name-shop {
    background: linear-gradient(135deg, #f6d365, #fda085);
    color: #5d4037;
}

.biome-card:hover .biome-name,
.biome-card:hover .biome-name2,
.biome-card:hover .biome-name3,
.biome-card:hover .biome-name4,
.biome-card:hover .biome-name-arena,
.biome-card:hover .biome-name-shop {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.2), 0 15px 30px rgba(0, 0, 0, 0.4);
}


/* Biome Entities & Management */
.biome-header {
    position: absolute;
    top: 25px;
    left: 25px;
    right: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.loading-status {
    width: 100% !important;
    height: 150px !important;
}

.biome-header h2 {
    color: white;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    padding: 10px 40px;
    border-radius: 50px;
    margin: 0;
    font-size: 2.5rem;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.biome-background {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    /* Ajuste exato sem cortes */
    background-position: center;
    position: relative;
    overflow: hidden;
}

.entities-layer {
    width: 100%;
    height: 100%;
    position: relative;
}

.animal-entity {
    position: absolute;
    width: 14cqi;
    /* Dinâmico conforme largura do jogo */
    min-width: 80px;
    cursor: grab;
    transition: transform 0.2s, filter 0.2s;
    user-select: none;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Identificadores sobre os animais no bioma - Estilo Infantil */
.animal-status-indicators {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.animal-label-tag {
    background: linear-gradient(135deg, #ff9800, #ff5722);
    color: white;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 950;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 3px solid white;
    white-space: nowrap;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}

.animal-label-tag-name {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.animal-label-tag .lvl {
    background: rgba(255, 255, 255, 0.3);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    color: white;
}

.animal-hp-mini,
.animal-xp-mini {
    width: 90px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    overflow: hidden;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* HP - Verde Maçã Vibrante */
.animal-hp-mini .fill {
    background: linear-gradient(to bottom, #89ff00, #4caf50);
}

/* XP - Azul Estelar */
.animal-xp-mini .fill {
    background: linear-gradient(to bottom, #00d2ff, #3a7bd5);
}

.row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.labelxp {
    color: white;
    font-size: 0.75rem;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 8px;
    min-width: 25px;
    text-align: center;
}

.animal-xp-mini .fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
    transition: width 0.4s ease;
}

.animal-hp-mini .fill {
    height: 100%;
    background: linear-gradient(90deg, #f44336, #e91e63);
    box-shadow: 0 0 10px rgba(244, 67, 54, 0.5);
    transition: width 1s linear;
    /* Suavidade para regeneração por segundo */
}

.animal-entity:hover {
    filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.9));
    transform: scale(1.1);
}

.animal-entity:active {
    cursor: grabbing;
}

.animal-entity img {
    width: 100%;
    height: auto;
    pointer-events: none;
}

.animal-entity.dragging {
    z-index: 1000;
}

.swap-card {
    background: #FFFAF0;
    /* Ivory white */
    border: 8px solid var(--accent);
    position: relative;
    /* Para o botão de fechar fixar corretamente */
}

.modal-content.swap-card p {
    margin: 0px !important;

}

/* Badge para animais já no bioma */
.biome-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #FF5E5B;
    /* Vermelho primário */
    color: white;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid white;
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.album-item.in-biome .card-inner {
    opacity: 0.8;
}

.album-item.in-biome .card-image-bg img {
    filter: grayscale(0.2);
}

.album-item.in-biome:hover {
    transform: none !important;
}

.modal-content.swap-card {
    margin: 0px !important;
    overflow: visible !important;
    /* Permite que o botão de fechar fique para fora */
    max-height: none !important;
    padding: 35px 25px !important;
}

.swap-card-body {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 55vh;
    padding: 10px;
}

/* Força 3 por linha no modal de troca */
.swap-card .animal-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

.swap-card .combat-inventory-item {
    padding: 8px;
}

.swap-card .combat-inventory-item img {
    width: 100px;
    height: 100px;
}

.navigation-footer {
    padding: 20px 0;
    text-align: center;
}

/* Biome Exploration */
.biome-full-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.9);
}

#animal-entities {
    position: relative;
    flex-grow: 1;
}



.sparkle-point {
    position: absolute;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    cursor: pointer;
    animation: pulseSparkle 1.5s infinite;
    z-index: 2000;
}

@keyframes pulseSparkle {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
}

.biome-info {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.5);
    padding: 15px 40px;
    border-radius: 30px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    pointer-events: none;
    /* Não atrapalha o clique nos brilhos */
}

#biome-title {
    color: var(--light);
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 5px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
    position: absolute;
    bottom: 60px;
    left: 10px;
    z-index: 150;
    background-color: rgba(0, 51, 161, 0.404);
    padding: 20px;
    border-radius: 30px;
}

.biome-info p {
    color: var(--dark);
    font-weight: 700;
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Fusion Tool */
#screen-fusion {
    flex-direction: row;
    padding: 0;
}

.logo {
    height: 200px;
    width: auto;
}

.fusion-sidebar {
    width: 350px;
    height: 100%;
    background: url('fundoCardsLab.webp') no-repeat center center / cover;
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 15px 0 35px rgba(0, 0, 0, 0.2);
    border-right: 4px solid var(--secondary);
    z-index: 10;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Base para o decor */
    overflow: hidden;
    /* Garante que o decor não escape */
}

.fusion-sidebar-decor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    /* Ajuste a altura conforme a imagem */
    background: url('baseFundoCardsLab.webp') no-repeat bottom center / contain;
    pointer-events: none;
    /* Deixa os cliques passarem para o inventário se necessário */
    z-index: 20;
    /* Sobrepõe o inventory-list */
}

.fusion-main {
    flex-grow: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.fusion-main-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 250px;
    /* Ajuste conforme a necessidade da imagem */
    background: url('decoracaoMixSystem.webp') no-repeat top center / contain;
    z-index: 30;
    /* Fica por cima de tudo na main */
    pointer-events: none;
    /* Permite clicar nos slots por baixo */
}

.fusion-area {
    flex-grow: 1;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.slot-container {
    display: flex;
    align-items: center;
    gap: 50px;
    background: rgba(0, 0, 0, 0.3);
    padding: 50px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.2);
    margin-top: 80px;
}

.fusion-slot {
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.2);
    border: 4px dashed white;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    font-size: 1.1rem;
    color: white;
    transition: var(--transition);
    cursor: pointer;
}

.fusion-slot:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-10px);
}

.fusion-slot img {
    width: 90%;
    animation: popIn 0.3s ease-out;
}

.plus-sign {
    font-size: 5rem;
    color: white;
    font-weight: 900;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.btn-fuse-start {
    margin-top: 40px;
    padding: 25px 80px;
    background: var(--accent);
    color: var(--dark);
    border: none;
    border-radius: 60px;
    font-size: 1.8rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 0 #fbc02d, 0 12px 25px rgba(0, 0, 0, 0.2);
    transition: all 0.1s ease;
}

.btn-fuse-start:hover {
    transform: translateY(-3px);
    background: #ffeb3b;
    box-shadow: 0 11px 0 #fbc02d, 0 15px 30px rgba(0, 0, 0, 0.2);
}

.btn-fuse-start:active {
    transform: translateY(6px);
    box-shadow: 0 2px 0 #fbc02d;
}

.btn-fuse-start:disabled {
    background: #bbb;
    box-shadow: none;
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-transfusion-lab {
    margin-top: 15px;
    padding: 14px 40px;
    background: linear-gradient(135deg, #7b1fa2 0%, #4a148c 100%);
    color: white;
    border: none;
    border-radius: 40px;
    font-size: 1.1rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 0 #311b92, 0 10px 20px rgba(74, 20, 140, 0.3);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 1px;
    display: flex;
    text-align: center;
    justify-content: center;
}

.t-action-area {

    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.btn-transfusion-lab:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #9c27b0 0%, #6a1b9a 100%);
    box-shadow: 0 9px 0 #311b92, 0 15px 30px rgba(74, 20, 140, 0.4);
}

.btn-transfusion-lab:active {
    transform: translateY(5px);
    box-shadow: 0 1px 0 #311b92;
}

/* Animal Grid */
.animal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 15px;

    padding: 5px 0;
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
    margin: 0px !important;
    max-height: 100vh;
    padding-bottom: 50px;
    margin-left: 20px !important;
    max-width: 300px !important;
    padding: 30px;

}

.animal-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;

    padding: 5px 0;
    overflow-y: hidden;
    overflow-x: hidden;
    flex-grow: 1;

    height: auto;
    padding-bottom: 50px;

    max-width: 100% !important;
    margin-right: 0px !important;
    padding-right: 30px;

}

.animal-grid3 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;

    padding: 5px 0;
    overflow-y: hidden;
    overflow-x: hidden;
    flex-grow: 1;

    height: auto;
    padding-bottom: 50px;
    min-height: 300px;
    max-width: 100% !important;
    margin-right: 0px !important;
    padding-right: 30px;

}


.inventory-item {
    aspect-ratio: 1;
    background: white;
    border-radius: 12px;
    padding: 5px;
    border: 3px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    /* Base para o badge */
}

.inventory-item:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

.inventory-item.selected {
    border-color: #4caf50;
    background: #e8f5e9;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
}

.selected-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #4caf50;
    color: white;
    font-size: 0.6rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 5;
    text-transform: uppercase;
}

.lvl-tag-mini {
    position: absolute;
    top: -8px;
    left: -8px;
    background: var(--primary);
    color: white;
    font-size: 0.6rem;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 8px;
    z-index: 10;
    border: 1px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.inventory-item img {
    width: 100%;
    object-fit: contain;
}

.inventory-item.is-mixture {
    filter: grayscale(0.2) brightness(0.9);
    position: relative;
    cursor: help;
}

.lock-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}

.lock-overlay .material-symbols-rounded {
    font-size: 2.5rem;
    color: rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.219);
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Result Celebration */
#screen-result {
    flex-direction: row;
    gap: 80px;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, #fff 0%, #A8E6CF 100%);
}

.result-celebration {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 80px;
}

.creature-card.large {
    background: white;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    margin: 30px 0;
    width: 80%;
}

.creature-card.large img {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    margin-bottom: 20px;
}

.creature-card h3 {
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 5px;
}

#result-subtitle {
    display: flex;
    justify-content: center;
    width: 100%;
}

#result-stats {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
}

#result-stats .stat-item {
    font-size: 1.1rem;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.creature-bio {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 15px;
}

/* Album */
.album-content {
    padding: 0 40px 40px 40px;
    height: 100%;
    overflow-y: auto;
}

.album-category-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--dark);
    margin: 60px 0 30px 0;
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 5px solid white;
    padding-bottom: 15px;
    text-shadow: 2px 2px 0 white;
}

.category-icon {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 20px;
    border: 4px solid white;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    /* Reduzido de 380px para 260px (aprox. 3-4 por linha) */
    gap: 30px;
    padding: 30px 0;
    align-content: start;
}

.album-biome-section {
    margin-bottom: 50px;
    /* Separação clara entre biomas */
}

.album-item {
    background: white;
    padding: 10px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    border: 6px solid white;
    height: 100%;
    min-height: 320px;
    /* Reduzida a altura mínima para acompanhar a nova largura */
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    width: 320px;
}

.album-item:hover:not(.locked) {
    transform: scale(1.05) rotate(1deg) translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.card-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fdfdfd;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eee;
}

.card-image-bg {
    background: radial-gradient(circle, #fff 0%, #f9f9f9 100%);
    height: 160px;
    /* Reduzido proporcionalmente */
    flex-shrink: 0;
    /* Impede a imagem de ser achatada se o card precisar de espaço */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: relative;
}

.card-image-bg img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

.card-info {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: white;
}

.card-name {
    font-size: 1.25rem;
    /* Ajustado para a nova largura */
    font-weight: 900;
    color: var(--dark);
    text-transform: uppercase;
    margin-bottom: 8px;
    border-bottom: 3px solid var(--accent);
    padding-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    /* Reduzido espaço */
    text-align: left;
    margin-top: auto;
}

.stat-item {
    font-size: 0.95rem;
    /* Reduzido um pouco */
    font-weight: 900;
    padding: 6px 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.stat-item.hp {
    background: #ffebee;
    color: #d32f2f;
}

.stat-item.atk {
    background: #fff3e0;
    color: #ef6c00;
}

.stat-item.def {
    background: #e3f2fd;
    color: #1976d2;
}

.stat-item.crit {
    background: #f3e5f5;
    color: #7b1fa2;
}

.album-item.locked .card-inner {
    background: #f5f5f5;
    justify-content: center;
    align-items: center;
    filter: grayscale(1);
    opacity: 0.7;
}

.album-item.locked {
    opacity: 0.5;
    background: #f0f0f0;
    border: 3px dashed #ccc;
    box-shadow: none;
}

.locked-icon {
    font-size: 5rem;
    margin-bottom: 10px;
}

/* Toasts */
#toast-container {
    position: fixed;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: 90cqi;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
    padding: 14px 28px;
    border-radius: 60px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.07);
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    animation: toastSlideIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        toastFadeOut 0.35s ease-in 2.1s forwards;
}

/* Tipo: ataque / correto */
.toast.toast-attack {
    background: linear-gradient(135deg, #e65100, #ff8f00);
    border-color: #ffcc02;
    box-shadow: 0 8px 32px rgba(230, 81, 0, 0.55), 0 0 20px rgba(255, 204, 2, 0.3);
}

/* Tipo: dano / errado */
.toast.toast-damage {
    background: linear-gradient(135deg, #b71c1c, #e53935);
    border-color: #ff8a80;
    box-shadow: 0 8px 32px rgba(183, 28, 28, 0.55), 0 0 20px rgba(255, 138, 128, 0.3);
}

/* Tipo: vitória */
.toast.toast-victory {
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
    border-color: #69f0ae;
    box-shadow: 0 8px 32px rgba(27, 94, 32, 0.55), 0 0 20px rgba(105, 240, 174, 0.3);
}

/* Tipo: derrota */
.toast.toast-defeat {
    background: linear-gradient(135deg, #37474f, #546e7a);
    border-color: #b0bec5;
    box-shadow: 0 8px 32px rgba(55, 71, 79, 0.55);
}

/* Tipo: info / neutro */
.toast.toast-info {
    background: linear-gradient(135deg, #1565c0, #1976d2);
    border-color: #82b1ff;
    box-shadow: 0 8px 32px rgba(21, 101, 192, 0.55), 0 0 20px rgba(130, 177, 255, 0.3);
}

/* Tipo: crítico (especial) */
.toast.toast-crit {
    background: linear-gradient(135deg, #880e4f, #c2185b);
    border-color: #ff80ab;
    box-shadow: 0 8px 32px rgba(136, 14, 79, 0.65), 0 0 30px rgba(255, 128, 171, 0.4);
    font-size: 1.4rem;
    animation: toastSlideIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        critPulse 0.4s ease 0.35s 2,
        toastFadeOut 0.35s ease-in 2.5s forwards;
}

.toast .toast-icon {
    font-size: 1.5rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

@keyframes toastSlideIn {
    from {
        transform: translateY(-30px) scale(0.75);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes toastFadeOut {
    from {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    to {
        transform: translateY(-20px) scale(0.85);
        opacity: 0;
    }
}

@keyframes critPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@keyframes popIn {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

/* 👥 MULTIPLAYER / OUTROS JOGADORES 👥 */
.other-player-avatar {
    position: absolute;
    width: 60px;
    height: 60px;
    z-index: 50;
    pointer-events: none;
    transition: left 0.5s ease-out, top 0.5s ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
}

.other-player-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    background: white;
    animation: floatingAvatar 3s ease-in-out infinite;
}

.other-player-avatar .player-label {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.7rem;
    font-weight: bold;
    margin-bottom: 5px;
    white-space: nowrap;
}

@keyframes floatingAvatar {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* --- MODAL DA FIGURINHA --- */
.stats-card-modal {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: 680px;
    /* Alargado para suportar duas colunas */
    width: 90%;
    position: relative;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.horizontal-modal-layout {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: stretch;
    background: white;
    padding: 25px;
    border-radius: 40px;
    border: 8px solid var(--primary);
}

.horizontal-modal-layout .modal-left-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.horizontal-modal-layout .modal-right-col {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .horizontal-modal-layout {
        flex-direction: row;
        gap: 10px;
        padding: 15px;
        align-items: center;
    }

    .stats-card-modal {
        max-width: 600px;
        width: 95%;
    }

    .horizontal-modal-layout .modal-left-col {
        flex: 0.8;
    }

    .horizontal-modal-layout .modal-right-col {
        flex: 1.2;
    }

    #stats-animal-img {
        width: 90px;
        height: 90px;
        margin-bottom: 5px;
    }

    .animal-glow-container {
        width: 100px;
        height: 100px;
    }

    #stats-animal-name {
        font-size: 1.3rem;
    }

    .stats-hero-info .lvl-badge {
        font-size: 0.8rem;
    }

    .stat-box .stat-val {
        font-size: 1.1rem;
    }

    .evo-cost span {
        font-size: 0.85rem !important;
    }
}

.stats-card-modal .album-item {
    pointer-events: none;
    /* A carta exibida no modal não deve ter efeito de hover */
    margin: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.btn-close-modal {
    position: absolute;
    top: -15px;
    right: -15px;
    background: white;
    border: 4px solid var(--accent);
    color: var(--dark);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--accent), 0 6px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transition: all 0.1s ease;
}

.btn-close-modal:hover {
    transform: scale(1.1) translateY(-2px);
    background: #ffeb3b;
    box-shadow: 0 6px 0 var(--accent), 0 8px 15px rgba(0, 0, 0, 0.2);
}

.btn-close-modal:active {
    transform: scale(1.0) translateY(4px);
    box-shadow: 0 0px 0 var(--accent);
}




.modal-content {
    background: white;
    padding: 20px;
    border-radius: 50px;
    text-align: center;
    max-width: 800px;
    width: 100%;
    border: 8px solid var(--secondary);
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-height: auto;
}

.modal-content.stats-card-modal {
    background: white;
    padding: 50px;
    border-radius: 50px;
    text-align: center;
    max-width: 950px;
    width: 90%;
    border: 8px solid var(--secondary);
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-content h2 {
    color: var(--primary);
    margin-bottom: 20px;
    font-size: 2.2rem;
    font-weight: 900;
}

.modal-content p {
    margin-bottom: 35px;
    font-size: 1.3rem;
    color: var(--dark);
    font-weight: 700;
    line-height: 1.4;
}


/* Regra de hidden unificada acima (linha ~237) - não duplicar aqui */

/* Combat System */
#screen-combat {

    flex-direction: column;
    overflow: hidden;
    background: #000;
}

.combat-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    /* Ajuste exato sem cortes */
    background-position: center;
    filter: brightness(1);
    transition: background-image 1s ease-in-out;
}

.combat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px;
    background: transparent;
    padding: 12px 25px;
    border-radius: 00px;
    backdrop-filter: none;
    box-shadow: none;
    border: none;
    z-index: 100;


    /* fundo mais transparente */
    background: linear-gradient(180deg,
            rgba(34, 90, 34, 0.35),
            rgba(16, 50, 16, 0.35));

    backdrop-filter: blur(6px);

    /* borda suave */
    border: 1px solid rgba(120, 255, 120, 0.25);

    box-shadow:
        inset 0 1px 6px rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.35);

    color: white;
    font-weight: bold;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);

}

.fighter-stats {
    width: 40%;
}

.fighter-info {
    color: white;
    text-align: center;
}

.fighter-info span {
    font-weight: 900;
    font-size: 1rem;
    /* Reduzido de 1.4rem */
    text-shadow: 2px 2px 0 #000;
    display: block;
    margin-bottom: 5px;
    /* Reduzido de 10px */
}

.hp-bar-container {
    height: 18px;
    /* Reduzido de 30px */
    background: rgba(0, 0, 0, 0.5);
    border-radius: 9px;
    border: 2px solid white;
    /* Reduzido de 3px */
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.75rem;
    /* Reduzido de 0.9rem */
    font-weight: 900;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    width: 100%;
    text-align: center;
    pointer-events: none;
}

.hp-fill {
    height: 100%;
    background: linear-gradient(to right, #4CAF50, #8BC34A);
    transition: width 0.5s ease-out, background 0.3s;
}

.hp-fill.low {
    background: linear-gradient(to right, #f44336, #e91e63);
}

.combat-vs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.turn-timer {
    font-size: 1.4rem;
    /* Reduzido de 2.2rem */
    font-weight: 900;
    color: #ffd600;
    background: rgba(0, 0, 0, 0.82);
    width: 45px;
    /* Reduzido de 65px */
    height: 45px;
    /* Reduzido de 65px */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 3px solid #ffd600;
    box-shadow: 0 0 15px rgba(255, 214, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.turn-timer.low-time {
    color: #ff1744;
    border-color: #ff1744;
    box-shadow: 0 0 25px rgba(255, 23, 68, 0.6);
    animation: timerPanic 0.5s infinite alternate;
}

@keyframes timerPanic {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.15);
    }
}

.combat-vs {
    font-size: 1.2rem;
    /* Reduzido de 2.2rem */
    font-weight: 900;
    color: white;
    background: var(--primary);
    width: 40px;
    /* Reduzido de 60px */
    height: 40px;
    /* Reduzido de 60px */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.team-visual {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: center;
}

.team-dot {
    width: 18px;
    /* Reduzido de 24px */
    height: 18px;
    /* Reduzido de 24px */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 1.5px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: all 0.3s ease;
}

.team-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-dot.active {
    transform: scale(1.3);
    box-shadow: 0 0 10px white;
    background: white;
}

.team-dot.defeated {
    filter: grayscale(1) brightness(0.5);
    opacity: 0.5;
    border-color: #ff5e5b;
}

.team-dot.waiting {
    opacity: 0.8;
}

.combat-arena {
    position: relative;
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 20px;
    /* Restaurado para o padrão original */
    padding-left: 80px;
    padding-right: 80px;
}

.fighter-container {
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Volta ao centro para o jogador */
    position: relative;
    z-index: 10;
    overflow: visible;
}



.row {
    display: flex !important;
    flex-direction: row !important;
    width: auto !important;
    align-items: center !important;
    text-align: center;
    gap: 10px;
}

.column {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    align-items: center !important;
    text-align: center;
}

.fighter-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 900;
    font-size: 0.8rem;
    display: flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.arena-lvl {
    background: #ffd600;
    color: #000;
    padding: 0px 6px;
    border-radius: 6px;
    font-size: 0.7rem;
}

.fighter-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

.damage-pop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4.2rem;
    font-weight: 900;
    color: #ff3b3b;
    font-family: 'Outfit', sans-serif;
    text-shadow: 0 0 12px white, 0 4px 0 rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 59, 59, 0.6);
    pointer-events: none;
    animation: damagePop 2.4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    white-space: nowrap;
}

.damage-pop.critical {
    color: #ffd700;
    font-size: 5.8rem;
    text-shadow: 0 0 20px #ff3b3b, 0 4px 0 rgba(0, 0, 0, 0.5), 0 0 50px rgba(255, 215, 0, 0.9);
    animation: damagePopCrit 2.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes damagePop {
    0% {
        transform: translate(-50%, 40px) scale(0.3);
        opacity: 0;
    }

    12% {
        transform: translate(-50%, -30px) scale(1.35);
        opacity: 1;
    }

    22% {
        transform: translate(-50%, -20px) scale(1.1);
        opacity: 1;
    }

    /* Fica parado e bem visível aqui por ~1.2s */
    70% {
        transform: translate(-50%, -25px) scale(1.05);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -110px) scale(0.9);
        opacity: 0;
    }
}

@keyframes damagePopCrit {
    0% {
        transform: translate(-50%, 40px) scale(0.2);
        opacity: 0;
    }

    10% {
        transform: translate(-50%, -40px) scale(1.5);
        opacity: 1;
    }

    18% {
        transform: translate(-50%, -30px) scale(1.1);
        opacity: 1;
    }

    26% {
        transform: translate(-50%, -38px) scale(1.2);
        opacity: 1;
    }

    /* Fica parado e bem visível aqui por ~1.3s */
    72% {
        transform: translate(-50%, -35px) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -130px) scale(0.85);
        opacity: 0;
    }
}




.combat-ui-container {
    position: relative;
    padding: 10px 20px;
    /* Reduzido de 20px 40px */
    background: rgba(32, 136, 0, 0.75);
    backdrop-filter: blur(12px);
    z-index: 5;
    border-top: 3px solid var(--secondary);
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Reduzido de 15px */
    transition: all 0.3s ease;
}

.combat-ui-disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.5);
}

.energy-bar-section {
    width: 100%;
    display: flex;
    /* Alinha em linha para economizar espaço */
    align-items: center;
    gap: 10px;
}

.energy-info {
    display: flex;
    gap: 8px;
    color: #00e5ff;
    font-weight: 900;
    font-size: 0.85rem;
    /* Reduzido */
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
    white-space: nowrap;
}

.energy-bar-container {
    height: 8px;
    /* Reduzido de 12px */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    border: 1.5px solid #00e5ff;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
    flex-grow: 1;
    /* Ocupa o resto da largura */
}

.energy-fill {
    height: 100%;
    background: linear-gradient(90deg, #00b8d4, #00e5ff);
    transition: width 0.3s ease;
}

.powerup-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Painel de Ações Flutuante à Direita */
.combat-side-actions {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 100;
    align-items: center;
}

.btn-powerup {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 4px;
    width: 55px;
    /* Reduzido de 100px (~50% de redução visual de área) */
    height: 55px;
    /* Reduzido de 100px */
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn-powerup img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.btn-powerup .cost {
    position: absolute;
    bottom: -8px;
    right: -8px;
    background: #ffd600;
    color: #000;
    font-weight: 900;
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 8px;
    border: 2px solid white;
}

.btn-powerup:hover:not(:disabled) {
    transform: scale(1.1);
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.2);
}

.btn-powerup.selected {
    background: rgba(0, 229, 255, 0.4);
    border-color: #00e5ff;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.6);
    transform: translateY(-5px);
}

/* Fire effect for the POW ultimate */
.btn-powerup.btn-pow.ultimate-ready {
    border-color: #ff5e00;
    box-shadow: 0 0 25px rgba(255, 69, 0, 0.7);
    animation: ignitingFire 1.5s infinite alternate;
}

.btn-powerup.btn-pow.selected {
    background: linear-gradient(0deg, rgba(255, 69, 0, 0.6) 0%, rgba(255, 140, 0, 0.4) 100%);
    border-color: #ffcc00;
    box-shadow: 0 0 40px rgba(255, 140, 0, 0.9);
    animation: burningFlame 1.2s infinite alternate;
}

@keyframes ignitingFire {
    0% {
        box-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
    }

    100% {
        box-shadow: 0 0 30px rgba(255, 140, 0, 0.9);
    }
}

@keyframes burningFlame {
    0% {
        filter: brightness(1);
        transform: translateY(-5px) scale(1);
    }

    100% {
        filter: brightness(1.4);
        transform: translateY(-8px) scale(1.05);
    }
}

.btn-powerup:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(1);
}

.combat-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.attack-main {
    flex-grow: 1;
    font-size: 1.1rem !important;
    /* Reduzido de 1.8rem */
    padding: 10px 15px !important;
    /* Reduzido de 20px */
    background: linear-gradient(135deg, #ff1744, #d50000) !important;
    box-shadow: 0 6px 20px rgba(213, 0, 0, 0.4) !important;
    white-space: nowrap;
}

.secondary-actions {
    display: flex;
    gap: 10px;
}

.secondary-actions .btn-secondary,
.secondary-actions .btn-icon,
.powerup-controls .btn-secondary,
.powerup-controls .btn-icon {
    width: 45px;
    /* Reduzido de 60px */
    height: 45px;
    /* Reduzido de 60px */
    padding: 0;
    border-radius: 50%;
    justify-content: center;
}

.secondary-actions .material-symbols-rounded {
    font-size: 2rem;
}

/* Question Modal Styles */



.fighter-container.hit {
    animation: animalHit 0.7s cubic-bezier(.36, .07, .19, .97) both;
}

.fighter-container.hit img {
    animation: hitFlash 0.7s ease both;
}

.fighter-container.crit-hit {
    animation: animalCritHit 0.9s cubic-bezier(.36, .07, .19, .97) both;
}

.fighter-container.crit-hit img {
    animation: critFlash 0.9s ease both;
}

/* Animação de Investida (Attack Anim) */
.attack-anim {
    animation: attackLunge 0.5s ease-in-out;
}

.opponent .attack-anim {
    animation: attackLungeOpponent 0.5s ease-in-out;
}

@keyframes attackLunge {
    0% { transform: scale(1) translateX(0); }
    25% { transform: scale(1.1) translateX(40px); }
    100% { transform: scale(1) translateX(0); }
}

@keyframes attackLungeOpponent {
    0% { transform: scale(1) translateX(0); }
    25% { transform: scale(1.1) translateX(-40px); }
    100% { transform: scale(1) translateX(0); }
}


@keyframes animalHit {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    8% {
        transform: translate3d(-6px, -3px, 0) scale(0.96);
    }

    16% {
        transform: translate3d(7px, 3px, 0) scale(1.03);
    }

    25% {
        transform: translate3d(-7px, -4px, 0) scale(0.95);
    }

    34% {
        transform: translate3d(6px, 3px, 0) scale(1.02);
    }

    43% {
        transform: translate3d(-5px, -2px, 0) scale(0.97);
    }

    52% {
        transform: translate3d(5px, 2px, 0) scale(1.01);
    }

    62% {
        transform: translate3d(-3px, -1px, 0) scale(0.99);
    }

    72% {
        transform: translate3d(3px, 1px, 0) scale(1);
    }

    85% {
        transform: translate3d(-1px, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes hitFlash {
    0% {
        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
    }

    15% {
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) brightness(10) sepia(1) saturate(5) hue-rotate(-20deg);
    }

    30% {
        filter: drop-shadow(0 0 20px rgba(255, 50, 50, 0.9)) brightness(1.5) sepia(0.8) saturate(4) hue-rotate(-20deg);
    }

    55% {
        filter: drop-shadow(0 0 15px rgba(255, 80, 80, 0.6)) brightness(1.2) sepia(0.4) saturate(2) hue-rotate(-10deg);
    }

    100% {
        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
    }
}

@keyframes animalCritHit {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    6% {
        transform: translate3d(-10px, -6px, 0) scale(0.88);
    }

    14% {
        transform: translate3d(12px, 6px, 0) scale(1.08);
    }

    22% {
        transform: translate3d(-11px, -7px, 0) scale(0.9);
    }

    30% {
        transform: translate3d(10px, 5px, 0) scale(1.06);
    }

    38% {
        transform: translate3d(-8px, -4px, 0) scale(0.94);
    }

    46% {
        transform: translate3d(8px, 4px, 0) scale(1.04);
    }

    56% {
        transform: translate3d(-5px, -2px, 0) scale(0.98);
    }

    66% {
        transform: translate3d(4px, 2px, 0) scale(1.01);
    }

    78% {
        transform: translate3d(-2px, -1px, 0) scale(1);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes critFlash {
    0% {
        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
    }

    10% {
        filter: brightness(20) sepia(1) saturate(8) hue-rotate(-30deg);
    }

    22% {
        filter: drop-shadow(0 0 30px rgba(255, 200, 0, 1)) brightness(2) sepia(1) saturate(6) hue-rotate(-25deg);
    }

    40% {
        filter: drop-shadow(0 0 25px rgba(255, 100, 0, 0.9)) brightness(1.6) sepia(0.7) saturate(4) hue-rotate(-15deg);
    }

    65% {
        filter: drop-shadow(0 0 15px rgba(255, 80, 80, 0.5)) brightness(1.2) sepia(0.3) saturate(2) hue-rotate(-5deg);
    }

    100% {
        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
    }
}



.combat-inventory-item {
    position: relative;
    padding: 15px;
    border-radius: 20px;
    background: #f9f9f9;
    border: 3px solid #eee;
    text-align: center;
    cursor: pointer;
}

.power-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 800;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 20;
    pointer-events: none;
    border: 2px solid white;
    animation: badgePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.power-badge.positive {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
}

.power-badge.negative {
    background: linear-gradient(135deg, #f44336 0%, #c62828 100%);
}

.power-badge.neutral {
    background: linear-gradient(135deg, #9e9e9e 0%, #616161 100%);
}

@keyframes badgePop {
    from {
        transform: scale(0) rotate(-10deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.combat-inventory-item.is-defeated img {
    filter: grayscale(1) opacity(0.5);
}

.defeated-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    background: #e74c3c;
    color: white;
    padding: 5px 15px;
    font-weight: 900;
    font-size: 1.1rem;
    border: 3px solid white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: stampIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes stampIn {
    0% {
        transform: translate(-50%, -50%) rotate(-15deg) scale(3);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) rotate(-15deg) scale(1);
        opacity: 1;
    }
}

.combat-inventory-item.low-hp {
    border-color: #ff5e5b;
    background: #fff5f5;
}

.combat-inventory-item img {
    width: 150px;
}

/* Barra de vida nos cards do inventário de combate */
.inv-hp-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.inv-hp-fill {
    height: 100%;
    background: linear-gradient(to right, #43a047, #66bb6a);
    border-radius: 6px;
    transition: width 0.6s ease-out, background 0.4s;
}

.inv-hp-fill.low {
    background: linear-gradient(to right, #e53935, #ef5350);
}

.inv-hp-fill.healing {
    animation: healingPulse 1.5s ease-in-out infinite;
}

@keyframes healingPulse {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(102, 187, 106, 0.6);
    }

    50% {
        box-shadow: 0 0 10px rgba(102, 187, 106, 1);
    }
}

.inv-hp-fill.low.healing {
    animation: healingPulseRed 1.5s ease-in-out infinite;
}

@keyframes healingPulseRed {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(239, 83, 80, 0.6);
    }

    50% {
        box-shadow: 0 0 10px rgba(239, 83, 80, 1);
    }
}

.inv-hp-text {
    color: #555;
    font-weight: 700;
    transition: color 0.3s ease;
}

.inv-hp-text.healing-flash {
    color: #2e7d32;
    animation: hpTextFlash 1.5s ease-out forwards;
}

@keyframes hpTextFlash {
    0% {
        color: #00c853;
        transform: scale(1.15);
    }

    40% {
        color: #43a047;
        transform: scale(1.05);
    }

    100% {
        color: #555;
        transform: scale(1);
    }
}


.chest-box {
    position: relative;
    width: 120px;
    height: 120px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chest-box:hover {
    transform: scale(1.1) rotate(5deg);
}

.chest-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    position: relative;
    z-index: 2;
}

.chest-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, rgba(255, 215, 0, 0) 70%);
    border-radius: 50%;
    z-index: 20;
    animation: pulseGlow 2s infinite ease-in-out;
    pointer-events: none;
    /* Não bloqueia cliques */
}

@keyframes pulseGlow {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
    }
}

/* Brilhos Extras ao redor do baú */
.sparkle-particle {
    position: absolute;
    pointer-events: none;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px white, 0 0 20px 4px gold;

    animation: sparkleAnim 1.5s infinite ease-in-out;
    z-index: 2000;
}

@keyframes sparkleAnim {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }

    50% {
        transform: scale(1) rotate(180deg);
        opacity: 1;
    }

    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

/* Moedas Voando */
.coin-particle {
    position: fixed;
    pointer-events: none;
    z-index: 20000;
    /* Acima do modal-overlay que é 10000 */
    font-size: 2.8rem;
    color: #ffd700;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    animation: flyToCorner 1.2s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes flyToCorner {
    0% {
        transform: translate(0, 0) scale(0.5) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
        transform: translate(0, -50px) scale(1.2) rotate(45deg);
    }

    100% {
        /* Alvos precisos para o contador de créditos - agora usando unidades do container (cqi) para o zoom */
        transform: translate(calc(100cqi - var(--start-x) - 220px), calc(-1 * (var(--start-y) - 60px))) scale(0.6) rotate(720deg);
        opacity: 0;
    }
}

/* Modal de Recompensa Centralizado */
.reward-modal-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.chest-box.large {
    width: 350px;
    height: 350px;
    animation: chestEntrance 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes chestEntrance {
    0% {
        transform: scale(0) rotate(-20deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.chest-glow.large {
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, rgba(255, 215, 0, 0) 70%);
}

.reward-message-container {
    text-align: center;
    color: white;
    margin-top: 20px;
    animation: fadeIn 0.5s ease-out;
    position: relative;
    z-index: 10;
    /* Garante que está acima dos brilhos */
}

.reward-message-container h2 {
    font-size: 2.5rem;
    color: #ffd700;
    margin-bottom: 10px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.reward-message-container p {
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Animal Stats Card */
.stats-card {
    background: white;
    border: 8px solid var(--primary);
    border-radius: 40px;
    padding: 30px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.stats-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 30px;
    border: 3px solid #eee;
}

#stats-animal-img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
    margin-bottom: 15px;
}

#stats-animal-name {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--primary);
    margin: 0;
}

.stats-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #fdfdfd;
    border-radius: 20px;
    border: 2px solid #f0f0f0;
}

.stat-label {
    font-size: 1.2rem;
    font-weight: 700;
    color: #666;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--secondary);
}

.fighter-container.player,
.fighter-container.opponent {
    cursor: pointer;
    transition: all 0.2s;
}

.fighter-container.player:hover img,
.fighter-container.opponent:hover img {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
    transform: scale(1.1);
}

/* --- VICTORY MODAL (sobrepõe screen-biome) --- */
/* --- TELA DE VITÓRIA (MODAL) --- */
.victory-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.5s ease-out;
}

.victory-modal-overlay.hidden {
    display: none !important;
}

.victory-modal-box {
    background-image: url('fundoVitoria.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 8px solid #FFD700;
    border-radius: 50px;
    padding: 30px;
    width: 95%;
    max-width: 800px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 0 100px rgba(255, 215, 0, 0.4), 0 40px 100px rgba(0, 0, 0, 0.7);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    animation: bounceInUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* esconder scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE e Edge antigo */
}

/* Chrome, Edge, Safari */
.victory-modal-box::-webkit-scrollbar {
    display: none;
}

.victory-modal-box::before,
.victory-modal-box::after {
    content: '';
    position: absolute;
    font-size: 3rem;
    animation: floatDecor 3s infinite ease-in-out;
}

.victory-modal-box::before {
    top: 20px;
    left: 20px;
    animation-delay: 0.5s;
}

.victory-modal-box::after {
    bottom: 20px;
    right: 20px;
    animation-delay: 1.2s;
}

@keyframes floatDecor {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(20deg);
    }
}

@keyframes bounceInUp {
    from {
        opacity: 0;
        transform: translateY(200px) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.vmodal-title {
    font-size: 3.5rem;
    font-weight: 900;
    color: #FFE66D;
    text-shadow: 0 6px 0 #d4af37, 0 0 30px rgba(255, 230, 109, 0.7);
    margin: 10px 0;
    animation: titleFloat 2s ease-in-out infinite;
}

@keyframes titleFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

.imgVictory {
    height: auto !important;
    width: 350px !important;
    max-width: 80%;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3));
    margin-top: 20px;
    /* Sobe um pouco a faixa */
}

.vmodal-subtitle {
    font-size: 1.4rem;
    color: #ffffff;
    font-weight: 800;

    margin-top: 10px;
    background: rgba(0, 110, 255, 0.4);
    padding: 10px 30px;
    border-radius: 30px;
    backdrop-filter: blur(5px);
}

.vmodal-animals-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    height: 180px;
    margin: 30px 0;
    width: 100%;
}

.vmodal-animal-img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(255, 215, 0, 0.6));
    animation: celebrateBounce 0.6s ease-in-out infinite alternate;
}

@keyframes celebrateBounce {
    from {
        transform: translateY(0) rotate(-5deg) scale(1);
    }

    to {
        transform: translateY(-30px) rotate(5deg) scale(1.15);
    }
}

.vmodal-cards-hint {
    background: #FFEB3B;
    color: #444;
    padding: 8px 25px;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 800;
    box-shadow: 0 4px 0 #CDDC39;
    margin-bottom: 25px;
    animation: pulseHint 1.5s infinite;
}

@keyframes pulseHint {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Flip Cards Premium */
.victory-cards-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    perspective: 1200px;
    width: 100%;
}

.rewards-card {
    width: 150px;
    height: 220px;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rewards-card:hover:not(.flipped) {
    transform: translateY(-15px) rotateZ(3deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 6px solid white;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.card-front {
    background: linear-gradient(135deg, #FF9800, #F44336);
    background-image: url('cenasPecas/verso_carta.webp');
    background-size: cover;
    background-position: center;
}

.card-back {
    background: white;
    transform: rotateY(180deg);
}

.reveal-value {
    font-size: 1.8rem;
    font-weight: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Totais de Recompensa */
/* --- NOVO SECTION DE RECOMPENSAS (REMODELADO) --- */
#victory-total-section {
    background: transparent;

    padding: 20px;
    border-radius: 50px;
    width: 90%;
    margin-top: 5px;
    border: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transform: scale(0.9);
    animation: popIn 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.reward-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    color: #ff5722;
    text-shadow: 2px 2px 0 #fff;
    margin: 0;
    letter-spacing: 1px;
}

.reward-totals-row {
    display: flex;
    justify-content: center;
    gap: 25px;
    width: 100%;
}

.total-reward-badge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-width: 130px;
    border-radius: 35px;
    font-size: 2rem;
    font-weight: 900;
    gap: 8px;
    border: 4px solid white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: float 3s ease-in-out infinite;
}

.total-reward-badge:hover {
    transform: scale(1.1) rotate(2deg);
}

.total-reward-badge.coins {
    background: linear-gradient(180deg, #FFEB3B 0%, #FBC02D 100%);
    color: #5D4037;
    animation-delay: 0s;
}

.total-reward-badge.xp {
    background: linear-gradient(180deg, #E1BEE7 0%, #BA68C8 100%);
    color: #4A148C;
    animation-delay: 0.5s;
}

.total-reward-badge .material-symbols-rounded {
    font-size: 3rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.btn-victory-continue {
    background: linear-gradient(180deg, #8BC34A 0%, #43A047 100%);
    color: white;
    border: none;
    padding: 18px 60px;
    border-radius: 50px;
    font-size: 1.8rem;
    font-weight: 900;
    cursor: pointer;
    border-bottom: 8px solid #2E7D32;
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.4);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    text-transform: uppercase;
}

.btn-victory-continue:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 35px rgba(76, 175, 80, 0.6);
    filter: brightness(1.1);
}

.btn-victory-continue:active {
    transform: translateY(4px);
    border-bottom-width: 0;
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.btn-victory-continue .material-symbols-rounded {
    font-size: 2.2rem;
    animation: simplePulse 1.5s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes simplePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

/* --- TELA DE DERROTA --- */
#screen-defeat {
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.defeat-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50px;
    padding: 40px;
    width: 90%;
    max-width: 600px;
    text-align: center;
    border: 10px solid #607D8B;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.defeat-title {
    font-size: 3rem;
    font-weight: 900;
    color: #460C05 !;
    margin-bottom: 5px;
}

.defeat-subtitle {
    font-size: 1.3rem;
    color: #78909C;
    margin-bottom: 30px;
    font-weight: 600;
}

.defeat-icon {
    font-size: 8rem;
    margin: 20px 0;
    display: inline-block;
    animation: sway 2s infinite ease-in-out;
}

@keyframes sway {

    0%,
    100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

.xp-earned-badge.defeat-xp {
    background: #BBDEFB;
    color: #1976D2;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 1.4rem;
    font-weight: 900;
}

.btn-defeat-continue {
    background: linear-gradient(180deg, #F44336, #B71C1C);
    color: white;
    border: none;
    padding: 18px 60px;
    border-radius: 40px;
    font-size: 1.5rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 0 #7F0000;
    margin-top: 30px;
    transition: all 0.2s;
}

.btn-defeat-continue:active {
    transform: translateY(10px);
    box-shadow: none;
}



/* Flip Cards */
.victory-cards-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    perspective: 1000px;
}

.rewards-card {
    width: 150px;
    height: 220px;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.rewards-card.flipped {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card-front {
    background-image: url('cenasPecas/verso_carta.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: transparent;
}

.card-front .material-symbols-rounded {
    display: none;
}

.card-back {
    background: white;
    color: var(--dark);
    transform: rotateY(180deg);
}

.card-back .coin-reveal {
    font-size: 2.5rem;
    font-weight: 900;
    color: #f1c40f;
}

/* XP Section */
.xp-earned-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(46, 204, 113, 0.9);
    color: white;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 900;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.defeat-xp {
    background: rgba(52, 152, 219, 0.9);
}

#victory-levelups,
#defeat-levelups {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.level-progress-item {
    background: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 5px;
}

.total-coins-badge {
    background: var(--accent);
    color: var(--dark);
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 25px;
    display: inline-block;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



/* Level Up Modal */
.levelup-card {
    background: white;
    padding: 40px;
    border-radius: 50px;
    text-align: center;
    border: 10px solid #f1c40f;
    box-shadow: 0 0 50px rgba(241, 196, 15, 0.5);
    position: relative;
    max-width: 400px;
    width: 90%;
    cursor: pointer;
}

.levelup-stars {
    font-size: 2.5rem;
    color: #f1c40f;
    margin-bottom: 15px;
}

.levelup-card img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    margin-bottom: 10px;
}

.levelup-name {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--dark);
}

.levelup-badge {
    background: #f1c40f;
    color: white;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 50px;
    font-size: 2rem;
    font-weight: 900;
    margin: 15px 0;
}

.levelup-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    text-align: left;
}

.levelup-stat-row {
    font-weight: 700;
    display: flex;
    justify-content: space-between;
}

/* Confetti Efeito */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2000;
    overflow: hidden;
}

.confetti {
    position: absolute;
    top: -30px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    pointer-events: none;
    animation: confettiFall linear forwards;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}


@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg) translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateY(110vh) rotate(720deg) translateX(50px);
        opacity: 0.2;
    }
}

.levelup-card {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.levelup-stars {
    animation: starRotate 2s infinite ease-in-out;
}

@keyframes starRotate {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.2) rotate(10deg);
    }
}


.stat-up {
    color: #2ecc71;
    font-weight: 900;
}

.defeat-emoji {
    font-size: 5rem;
    margin-bottom: 15px;
}

.defeat-title {
    font-size: 3rem;
    font-weight: 900;
    color: white;
}

/* Level & XP inside Stats Modal */
.level-badge-overlay {
    position: absolute;
    bottom: -10px;
    right: 15px;
    background: #f1c40f;
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 900;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border: 3px solid white;
}

.xp-container-stats {
    width: 100%;
    margin: 10px 0 15px 0;
    text-align: center;
}

.xp-bar-stats {
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 5px;
}

.xp-fill-stats {
    height: 100%;
    background: linear-gradient(90deg, #2ecc71, #27ae60);
    transition: width 0.5s ease;
}

.xp-text-stats {
    font-size: 0.8rem;
    font-weight: 800;
    color: #888;
}

/* Ghost Drag and Swap Confirmation */
.ghost-drag {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 100px;
    height: 100px;
    opacity: 0.8;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
    transform: translate(-50%, -50%);
}

.ghost-drag img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.confirm-swap-card {
    max-width: 500px !important;
    text-align: center;
}

.swap-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 30px 0;
}

.swap-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    padding: 20px;
    border-radius: 20px;
    width: 150px;
}

.swap-side p {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.swap-side.out {
    border: 2px solid var(--primary);
}

.swap-side.in {
    border: 2px solid var(--secondary);
}

.swap-side img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.swap-side span {
    font-size: 0.8rem;
    margin-top: 5px;
    font-weight: bold;
}

.swap-arrow {
    font-size: 3rem;
    color: var(--dark);
    display: flex;
    align-items: center;
}

.animal-entity.drop-target {
    filter: brightness(1.2) drop-shadow(0 0 15px var(--accent));
    transform: scale(1.1);
}

/* --- RECOMPENSA DIÁRIA (BAÚ) --- */
.reward-chest-container {


    perspective: 1000px;
    position: absolute;
    top: 60%;
    right: 20px;



    z-index: 100;
    cursor: pointer;
}



.chest-box {
    position: relative;
    width: 120px;
    height: 120px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chest-box:hover {
    transform: scale(1.15) rotate(5deg);
}

.chest-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}

.chest-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 230, 109, 0.6) 0%, rgba(255, 230, 109, 0) 70%);
    z-index: 1;
    border-radius: 50%;
    animation: pulseGlow 2s infinite ease-in-out;
    pointer-events: none;
}

@keyframes pulseGlow {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
    }
}

.sparkle-particle {
    position: absolute;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2000;
    animation: sparkleAnim 1.5s forwards ease-out;
    box-shadow: 0 0 10px white, 0 0 20px var(--accent);
}

@keyframes sparkleAnim {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx, 20px), var(--ty, -20px)) scale(1);
        opacity: 0;
    }
}

/* --- Novos Estilos: Bank de XP e Evolução Bubbly --- */

.stats-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #ffc10741;
    height: auto;
    padding: 20px;
    border-radius: 30px;
    border: solid 1px #ffc10769;
    margin-left: 15px;
}

.stats-bar2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    background: #ffc10741;
    position: absolute;
    top: 0;
    left: 32%;
    height: auto;
    padding: 20px;
    border-radius: 0px;
    border: solid 1px #ffc10769;

    width: auto;

}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 30px;
    color: white;
    font-weight: 900;
    font-size: 1.8rem;
    border: 3px solid white;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stat-item.credits {
    background: #ffc107;
    color: #5d4037;
    box-shadow: 0 4px 0 #e65100;
}

.stat-item.credits .material-symbols-rounded {
    color: #e65100;
    font-weight: 900;
}

.stat-item.power {
    background: linear-gradient(135deg, #7b1fa2, #1976d2);
    color: rgb(15, 5, 150);
    box-shadow: 0 4px 0 #4a148c;
}

.stat-item.power .material-symbols-rounded {
    color: #ffeb3b;
    font-weight: 900;
}

.stat-item.xp-bank {
    background: #9c27b0;
    box-shadow: 0 4px 0 #4a148c;
}

.stat-item.xp-bank .material-symbols-rounded {
    color: #e1bee7;
}

.stat-item:hover {
    transform: scale(1.05);
}




/* Animal Stats Modal Full Refactor */
.animal-stats-full {
    display: flex;
    flex-direction: row;
    gap: 20px;
    color: #5d4037;
    /* Marrom escuro para visibilidade */
    padding: 10px;
}


.stats-hero {
    display: flex;
    align-items: center;
    gap: 20px;
}

.stats-hero img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5));
}

.stats-hero-info h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 900;
}

.stats-hero-info .lvl-badge {
    display: inline-block;
    background: var(--primary);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-top: 5px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.stat-box {
    background: rgba(0, 0, 0, 0.04);
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;

    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stat-box .material-symbols-rounded {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.stat-box.hp .material-symbols-rounded {
    color: #ff5252;
}

.stat-box.atk .material-symbols-rounded {
    color: #ff9800;
}

.stat-box.def .material-symbols-rounded {
    color: #2196f3;
}

.stat-box.crit .material-symbols-rounded {
    color: #ffeb3b;
}

.stat-val {
    font-size: 1.1rem;
    font-weight: 900;
}

.stat-label {
    font-size: 0.75rem;
    color: #795548;
    font-weight: bold;
    text-transform: uppercase;
}


.stats-evolve-area {
    background: #fdfae6;
    border-radius: 20px;
    padding: 15px;
    border: 3px solid #e0e0e0;
}


.xp-bar-container {
    height: 16px;
    background: #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    border: 2px solid #bdbdbd;
}


.xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8e24aa, #ba68c8);
    transition: width 0.5s cubic-bezier(0.1, 0.7, 0.1, 1);
}

.xp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    font-weight: 900;
    color: #4a148c;
    width: 100%;
    text-align: center;
    text-shadow: 1px 1px 0 white;
}


.evo-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.evo-cost {
    display: flex;
    flex-direction: column;
}

.evo-cost span {
    font-weight: bold;
    font-size: 0.95rem;
}

.evo-cost small {
    opacity: 0.8;
    font-size: 0.8rem;
}

.btn-evolve {
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 900;
    font-size: 1rem;
    animation: pulseButton 2s infinite ease-in-out;
}

@keyframes pulseButton {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(225, 190, 231, 0);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(225, 190, 231, 0.4);
    }
}

.reveal-value {
    font-size: 1.5rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Botões de Compra de XP Bubbly */
.btn-add-stat {
    background: #4a148c;
    /* Roxo bem escuro */
    border: 3px solid #ffffff;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-left: 8px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-add-stat .material-symbols-rounded {
    font-size: 1.6rem;
    font-weight: 900;
}

.btn-add-stat:hover {
    transform: scale(1.15) translateY(-2px);
    background: #6a1b9a;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4);
}

.btn-add-stat:active {
    transform: scale(0.95) translateY(4px);
    box-shadow: 0 0px 0 rgba(0, 0, 0, 0.4);
}



.btn-buy-link {
    background: rgba(255, 255, 255, 0.1);
    border: 1px dashed rgba(255, 255, 255, 0.3);
    color: #e1bee7;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: fit-content;
}

.btn-buy-link:hover {
    background: rgba(142, 36, 170, 0.3);
    border-color: #ba68c8;
    color: white;
}

/* --- Loja Temática: Mercado de XP das Criaturas --- */

.store-card {
    max-width: 550px;
    width: 95%;
    background: #fffbe6;
    /* Fundo creme fofo */
    border: 8px solid #8d6e63;
    /* Borda de "madeira" */
    border-radius: 40px;
    box-shadow: 0 20px 0 #5d4037, 0 30px 40px rgba(0, 0, 0, 0.4);
    padding: 30px;
    position: relative;
    overflow: visible;
}

/* Placa do Título */
.store-title {
    background: #ff9800;
    color: white;
    padding: 10px 40px;
    border-radius: 50px;
    font-size: 2.2rem;
    font-weight: 900;
    text-shadow: 3px 3px 0 #e65100;
    box-shadow: 0 6px 0 #e65100;
    display: table;
    margin: -60px auto 20px;
    /* Sobe a placa */
    border: 5px solid white;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: white;
}

.store-balance-row {
    background: #ffecb3;
    display: inline-flex;
    padding: 8px 20px;
    border-radius: 20px;
    margin: 0 auto 20px;
    display: flex;
    width: fit-content;
    border: 3px solid #ffa000;
}

.xp-packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.xp-pack-card {
    background: white;
    border: 5px solid #8d6e63;
    border-radius: 25px;
    padding: 15px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 0 #5d4037;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.xp-pack-card:hover {
    transform: translateY(-8px) scale(1.05);
    background: #f1f8e9;
    border-color: #4caf50;
    box-shadow: 0 10px 0 #2e7d32;
}

.xp-pack-card.selected {
    background: #e8f5e9;
    border-color: #4caf50;
    box-shadow: 0 6px 0 #2e7d32;
    transform: scale(0.95);
}

.pack-icon {
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    /* Garante espaço fixo para o ícone */
}

.pack-icon .material-symbols-rounded {
    font-size: 4rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
}

.pack-icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.2));
}

/* Cores específicas dos pacotes profissionais */
.xp-pack-card:nth-child(1) .material-symbols-rounded {
    color: #9c27b0;
}

/* Básico - Roxo */
.xp-pack-card:nth-child(2) .material-symbols-rounded {
    color: #ff9800;
}

/* Super - Laranja */
.xp-pack-card:nth-child(3) .material-symbols-rounded {
    color: #d84315;
}

/* Mestre - Fogo */

.pack-amount {
    font-weight: 900;
    font-size: 1.4rem;
    color: #4caf50;
    text-shadow: none;
}

#loader-text {

    color: #714216;
}

.pack-price {
    background: #fff3e0;
    padding: 4px 12px;
    border-radius: 15px;
    border: 2px solid #ffcc80;
    color: #ef6c00;
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.xp-pack-card small {
    color: #795548;
    font-weight: bold;
    font-size: 0.8rem;
}

/* Seção de Confirmação Bubbly */
.xp-confirm-section {
    background: #f0f4c3;
    border: 5px dashed #afb42b;
    border-radius: 30px;
    padding: 20px;
    margin-top: 10px;
}

.confirm-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
}

.confirm-box p {
    color: #33691e;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.confirm-btns {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.confirm-btns button {
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 900;
    border-radius: 50px;
    transition: transform 0.1s;
}

#btn-xp-cancel {
    background: #ffab91;
    border: 4px solid white;
    box-shadow: 0 5px 0 #d84315;
    color: #bf360e;
}

#btn-xp-confirm {
    background: #81c784;
    border: 4px solid white;
    box-shadow: 0 5px 0 #2e7d32;
    color: #1b5e20;
}

.confirm-btns button:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

/* Ajuste no botão fechar do modal temático */
.store-card .btn-close-modal {
    top: 10px;
    right: 15px;
    background: #ef5350;
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: 3px solid white;
    box-shadow: 0 4px 0 #b71c1c;
}

/* Feedback Visual para Drag and Drop */
.ghost-drag {
    position: fixed;
    width: 100px;
    height: 100px;
    pointer-events: none;
    z-index: 20000;
    transform: translate(-50%, -50%);
    opacity: 0.8;
}

.ghost-drag img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

.animal-entity.drop-target {
    filter: brightness(1.3) drop-shadow(0 0 30px var(--accent)) !important;
    transform: scale(1.15);
    z-index: 100;
}

.animal-entity.drop-target::after {
    content: "SOLTE PARA TROCAR";
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--dark);
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    animation: bounceText 0.5s infinite alternate;
}

@keyframes bounceText {
    from {
        transform: translateX(-50%) translateY(0);
    }

    to {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Battle Intro Animation */
.combat-intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    z-index: 2000;
    overflow: hidden;
}

.combat-intro.hidden {
    display: none !important;
}

.vs-image-intro {
    width: 250px;
    height: auto;
    z-index: 2002;
    filter: drop-shadow(0 0 30px var(--accent));
    animation: vsImpact 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes vsImpact {
    0% {
        transform: scale(3);
        opacity: 0;
        filter: brightness(5) drop-shadow(0 0 100px white);
    }

    70% {
        transform: scale(0.9);
        opacity: 1;
        filter: brightness(1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        filter: drop-shadow(0 0 30px var(--accent));
    }
}

.lightning-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2001;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightning-ray {
    position: absolute;
    width: 4px;
    height: 200%;
    background: white;
    box-shadow: 0 0 20px 4px rgba(255, 230, 109, 0.8), 0 0 40px 10px rgba(255, 255, 255, 0.6);
    opacity: 0;
}

.lightning-ray:nth-child(1) {
    transform: rotate(45deg);
    animation: lightningStrike 0.4s 0.2s infinite;
}

.lightning-ray:nth-child(2) {
    transform: rotate(-45deg);
    animation: lightningStrike 0.4s 0.4s infinite;
}

.lightning-ray:nth-child(3) {
    transform: rotate(90deg);
    animation: lightningStrike 0.4s 0.1s infinite;
}

.lightning-ray:nth-child(4) {
    transform: rotate(0deg);
    animation: lightningStrike 0.4s 0.3s infinite;
}

@keyframes lightningStrike {

    0%,
    100% {
        opacity: 0;
        transform: scaleX(1) rotate(inherit);
    }

    10%,
    90% {
        opacity: 0;
    }

    50% {
        opacity: 1;
        transform: scaleX(3) rotate(inherit);
        filter: brightness(2);
    }
}

/* Shake effect for the whole screen during intro */
.screen-shake {
    animation: screenShake 0.5s ease-out;
}

@keyframes screenShake {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate(-10px, -10px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate(10px, 10px);
    }
}

/* Biome Transition Loader */
.biome-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('fundo_progresso_rustico.webp') no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5000;
    transition: opacity 0.6s ease;
}

.biome-loader.hidden {
    display: none !important;
}

.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.paw-loader {
    font-size: 5rem;
    animation: pawFloat 1.2s ease-in-out infinite alternate;
}


.loader-progress-container {
    width: 300px;
    height: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid #714216;
    margin-top: 10px;
}

.loader-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #714216, #a67c52);
    transition: width 0.1s ease;
}

.loader-percentage {
    font-size: 1.2rem;
    font-weight: 900;
    color: #714216;
}

.loader-content p {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--primary);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05);
    animation: textPulse 1s ease-in-out infinite alternate;
}

@keyframes pawFloat {
    from {
        transform: translateY(0) rotate(-10deg) scale(1);
        filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
    }

    to {
        transform: translateY(-30px) rotate(10deg) scale(1.2);
        filter: drop-shadow(0 25px 30px rgba(0, 0, 0, 0.2));
    }
}

@keyframes textPulse {
    from {
        opacity: 0.6;
        transform: scale(1);
    }

    to {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* --- DYNAMIC ANIMAL GLOW SYSTEM --- */

.animal-glow-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.animal-glow {
    position: absolute;
    width: 130%;
    height: 130%;
    border-radius: 50%;
    filter: blur(25px);
    opacity: 0.9;
    animation: glowRotatePulse 4s infinite linear;
    mix-blend-mode: screen;
    z-index: -1;
}

/* Lightning effects for level 100+ */
.glow-lightning {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    animation: glowRotatePulse 6s infinite linear reverse;
}

.glow-bolt {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 140%;
    background: linear-gradient(to bottom, transparent 10%, #ffffff 50%, transparent 90%);
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(var(--rot));
    opacity: 0;
    box-shadow: 0 0 10px #fff, 0 0 20px #00ffff;
    animation: strikeLightning 1.5s infinite ease-out;
}

@keyframes strikeLightning {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--rot)) scaleY(0.5);
    }

    10% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--rot)) scaleY(1.2);
    }

    20% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--rot)) scaleY(1.0);
    }

    100% {
        opacity: 0;
    }
}

@keyframes glowRotatePulse {
    0% {
        transform: rotate(0deg) scale(0.9);
        opacity: 0.6;
    }

    50% {
        transform: rotate(180deg) scale(1.4);
        opacity: 1;
    }

    100% {
        transform: rotate(360deg) scale(0.9);
        opacity: 0.6;
    }
}

/* Level Specific Colors - Conic Gradients for visible rotation */
.glow-white {
    background: conic-gradient(#fff, rgba(255, 255, 255, 0.2), #fff);
}

.glow-green {
    background: conic-gradient(#4caf50, #00ff00, #aed581, #4caf50);
}

.glow-blue {
    background: conic-gradient(#2196f3, #00ffff, #81d4fa, #2196f3);
}

.glow-red {
    background: conic-gradient(#f44336, #ff1744, #ef5350, #f44336);
}

.glow-purple {
    background: conic-gradient(#9c27b0, #e040fb, #ba68c8, #9c27b0);
}

/* Level Mixed Gradients */
.glow-purple-green {
    background: conic-gradient(#9c27b0, #4caf50, #e040fb, #00ff00, #9c27b0);
}

.glow-purple-blue {
    background: conic-gradient(#9c27b0, #2196f3, #e040fb, #00ffff, #9c27b0);
}

.glow-purple-red {
    background: conic-gradient(#9c27b0, #f44336, #e040fb, #ff1744, #9c27b0);
}

.glow-purple-green-blue {
    background: conic-gradient(#9c27b0, #4caf50, #00ffff, #e040fb, #00ff00, #2196f3, #9c27b0);
}

.glow-purple-blue-red {
    background: conic-gradient(#9c27b0, #2196f3, #ff1744, #e040fb, #00ffff, #f44336, #9c27b0);
}

.glow-ultimate {
    background: conic-gradient(#9c27b0, #4caf50, #2196f3, #f44336, #e040fb, #00ff00, #00ffff, #ff1744, #9c27b0);
}

/* Remove individual custom animations to keep unified rotating pulse */
.glow-ultimate {
    animation: glowRotatePulse 2s infinite linear;
}

/* Fast rotation for ultimate */

/* Lightning Rays for Level 100 */
.glow-lightning {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.glow-bolt {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 80px;
    background: #fff;
    box-shadow: 0 0 8px #fff, 0 0 15px #2196f3;
    border-radius: 20px;
    transform-origin: top center;
    opacity: 0;
    animation: glowLightningStrike 0.5s infinite;
}

@keyframes glowLightningStrike {

    0%,
    90% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--rot)) scaleY(0.1);
    }

    95% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--rot)) scaleY(1.2);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--rot)) scaleY(1.5);
    }
}

/* Animação suave para simular os animais respirando sozinhos e virando pro lado certo! */
@keyframes animalBreathing {

    0%,
    100% {
        transform: scaleX(var(--flip, 1)) scale(1);
    }

    50% {
        transform: scaleX(var(--flip, 1)) scale(1.005);
    }
}

/* O Animal do Jogador sempre deve encarar a direita */
#player-fighter-img {
    --flip: -1;
}

#opponent-fighter-img,
.animal-entity img {
    --flip: 1;
}

/* Aplicando a respiração nos bichinhos dos biomas e na arena de batalha */
#player-fighter-img,
#opponent-fighter-img,
.animal-entity img {
    animation: animalBreathing var(--breath-speed, 2.5s) ease-in-out infinite;
    animation-delay: var(--breath-delay, 0s);
    transform-origin: bottom center;
}

/* Mixture Legend Styles */
.mixture-subtitle {
    font-size: 0.8rem;
    color: #8e24aa;
    font-style: italic;
    font-weight: 500;
    margin-top: -5px;
    margin-bottom: 5px;
    display: block;
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.mixture-subtitle.mini {
    font-size: 0.65rem;
    margin-top: -2px;
    margin-bottom: 2px;
}

.animal-label-tag .mixture-subtitle {
    font-size: 0.6rem;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    margin: 2px 0;
}

.fighter-info .mixture-subtitle {
    color: #e1bee7;
    /* Lilás claro para fundo escuro da batalha */
}

/* Ajustes específicos para modais */
.modal-left-col .mixture-subtitle {
    font-size: 0.9rem;
    margin-top: 0;
}

/* Header Modal Premium Design */
.headerModal {
    background: linear-gradient(135deg, var(--primary) 0%, #ff8f00 100%);
    padding: 10px 10px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);


}

strong {
    font-size: 35px;
}

.headerModal::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 1;
}



@keyframes rotateDecor {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.headerModal h2 {
    color: white !important;
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 !important;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
    border: none !important;
    padding: 0 !important;
}

.headerModal p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 5px !important;
    position: relative;
    z-index: 2;
}

/* Decorações extras dentro do header */
.headerModal .decor-circle {
    position: absolute;
    width: 15px;
    height: 15px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0.6;
}

.headerModal .circle-1 {
    top: 15px;
    left: 15%;
}

.headerModal .circle-2 {
    bottom: 15px;
    right: 10%;
}

/* --- SUPER ANIMAÇÃO DE PODER (Top & Exagerada) --- */
.power-celebration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    pointer-events: all;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
}

.power-celebration-card {
    background: white;
    padding: 40px 60px;
    border-radius: 50px;
    border: 10px solid #ffeb3b;
    box-shadow: 0 0 50px rgba(255, 235, 59, 0.8), 0 20px 0 #fbc02d;
    text-align: center;
    animation: powerPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    position: relative;
    z-index: 100002;
}

.power-celebration-card h1 {
    font-size: 4rem;
    margin: 0;
    color: #ff5252;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 4px;
    text-shadow: 4px 4px 0 #b71c1c, 0 0 20px rgba(255, 82, 82, 0.5);
    animation: rainbowText 2s linear infinite;
}

.power-diff-text {
    font-size: 6rem;
    font-weight: 900;
    color: #4caf50;
    margin: 20px 0;
    display: block;
    text-shadow: 4px 4px 0 #1b5e20;
    animation: bounceDiff 0.5s ease-in-out infinite alternate;
}

.power-final-text {
    font-size: 2.5rem;
    font-weight: 900;
    color: #1976d2;
    background: #e3f2fd;
    padding: 10px 30px;
    border-radius: 30px;
    display: inline-block;
    border: 4px dashed #1976d2;
}

.celebration-sparkle {
    position: absolute;
    font-size: 3rem;
    animation: floatRandom 1.5s ease-out forwards;
    z-index: 100003;
}

@keyframes powerPop {
    0% {
        transform: scale(0) rotate(-20deg);
        opacity: 0;
    }

    70% {
        transform: scale(1.2) rotate(10deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes rainbowText {
    0% {
        color: #ff5252;
        filter: hue-rotate(0deg);
    }

    100% {
        color: #ff5252;
        filter: hue-rotate(360deg);
    }
}

@keyframes bounceDiff {
    from {
        transform: translateY(0) scale(1.1);
    }

    to {
        transform: translateY(-20px) scale(1.3);
    }
}

@keyframes floatRandom {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(var(--tr));
        opacity: 0;
    }
}

.confetti {
    position: fixed;
    width: 15px;
    height: 15px;
    z-index: 100001;
    pointer-events: none;
    animation: confettiFall var(--dur) linear forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-10vh) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0;
    }
}

/* --- SUPER ANIMAÇÃO DE REDUÇÃO DE PODER (Top & Dramática) --- */
.power-reduction-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    pointer-events: all;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.4) 0%, transparent 70%);
    cursor: pointer;
}

.power-reduction-card {
    background: #eceff1;
    padding: 40px 60px;
    border-radius: 50px;
    border: 10px solid #90a4ae;
    box-shadow: 0 0 50px rgba(144, 164, 174, 0.8), 0 20px 0 #546e7a;
    text-align: center;
    animation: powerDownPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    position: relative;
    z-index: 100002;
}

.power-reduction-card h1 {
    font-size: 3.5rem;
    margin: 0;
    color: #455a64;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 4px 4px 0 #263238;
}

.power-diff-text-neg {
    font-size: 6rem;
    font-weight: 900;
    color: #f44336;
    margin: 20px 0;
    display: block;
    text-shadow: 4px 4px 0 #b71c1c;
    animation: shakeEffect 0.2s ease-in-out infinite;
}

@keyframes powerDownPop {
    0% {
        transform: scale(1.5);
        opacity: 0;
        filter: grayscale(1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        filter: grayscale(0);
    }
}

@keyframes shakeEffect {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px) rotate(-2deg);
    }

    75% {
        transform: translateX(5px) rotate(2deg);
    }

    100% {
        transform: translateX(0);
    }
}

.raindrop {
    position: fixed;
    top: -50px;
    z-index: 100001;
    pointer-events: none;
    font-size: 2rem;
    animation: rainFall var(--dur) linear forwards;
}

@keyframes rainFall {
    0% {
        transform: translateY(-10vh);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateY(110vh);
        opacity: 0;
    }
}

/* TRANSFUSION SYSTEM STYLES (KIDDY PREMIUM) */
.transfusion-btn {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 30px !important;
    cursor: pointer;
    font-weight: 950 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 4px solid #fff;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 15px rgba(255, 107, 107, 0.3);
}

.transfusion-btn:hover {
    transform: scale(1.08) rotate(2deg);
    box-shadow: 0 12px 25px rgba(255, 107, 107, 0.5);
}

.transfusion-card {
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    border-radius: 30px;
    border: 5px solid #4CAF50;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.8);
    position: relative;
    padding-top: 40px;
    /* Espaço para o botão de fechar não sobrepor o título */
    z-index: 8000;
}

/* Botão de fechar fixo no topo (Sempre visível) */
.transfusion-card .btn-close-modal,
.select-t-card .btn-close-modal {
    position: absolute;
    top: -15px;
    right: -15px;
    z-index: 1000;
}

/* Container de scroll para manter o X fixo no topo do card */
.modal-scroll-container {
    overflow-y: auto;
    height: auto;
    max-height: 80vh;
    flex-grow: 1;
    width: 100%;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Scrollbar personalizada para o tema */
.modal-scroll-container::-webkit-scrollbar {
    width: 10px;
}

.modal-scroll-container::-webkit-scrollbar-track {
    background: rgba(123, 31, 162, 0.05);
    border-radius: 10px;
}

.modal-scroll-container::-webkit-scrollbar-thumb {
    background: #ce93d8;
    border-radius: 10px;
    border: 2px solid #FFF9F2;
}

.modal-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #7b1fa2;
}

.t-emoji-header {
    font-size: 3rem;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.2));
}

.t-title {
    font-size: 3rem !important;
    background: linear-gradient(45deg, #7b1fa2, #FF4081);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 950 !important;
    margin-bottom: 5px !important;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

/* SUGGESTIONS PANEL */
.t-suggestions-panel {
    background: #FFEFD5;
    border-radius: 30px;
    padding: 20px;
    margin: 20px 0;
    border: 3px dashed #FF8E53;
}

.t-sug-title {
    font-weight: 900;
    color: #D2691E;
    margin-bottom: 12px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.t-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.t-sug-card {
    background: white;
    padding: 12px 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: #6a4f4b;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.t-sug-card b {
    color: #7b1fa2;
    font-weight: 900;
}

.t-sug-card:hover {
    border-color: #7b1fa2;
    transform: translateX(10px);
}

.t-sug-emoji {
    font-size: 1.5rem;
}

.t-sug-apply {
    margin-left: auto;
    background: #4CAF50;
    color: white;
    border: none;
    padding: 6px 15px;
    border-radius: 15px;
    font-weight: 900;
    cursor: pointer;
    font-size: 0.8rem;
    box-shadow: 0 4px 0 #388E3C;
}

.t-sug-apply:active {
    transform: translateY(3px);
    box-shadow: none;
}

.transfusion-main-layout {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 15px;
    margin: 30px 0;
}

.t-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.t-side-label {
    background: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 950;
    color: #333;
    font-size: 1rem;
    text-align: center;
    line-height: 1.2;
    border: 2px solid #EEE;
}

.t-slot {
    width: 180px;
    height: 180px;
    background: #FFF;
    border: 6px dashed #7b1fa2;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
}

.t-slot:hover {
    transform: scale(1.05) translateY(-5px);
    border-color: #FF4081;
}

.t-slot.filled {
    border-style: solid;
    border-width: 6px;
    box-shadow: 0 15px 30px rgba(123, 31, 162, 0.2);
}

.t-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.t-arrow-icon {
    font-size: 4.5rem !important;
    color: #FF4081 !important;
    filter: drop-shadow(0 4px 5px rgba(255, 64, 129, 0.4));
    animation: tMainArrowPulse 1s infinite alternate;
}

@keyframes tMainArrowPulse {
    from {
        transform: scale(1);
        filter: brightness(1);
    }

    to {
        transform: scale(1.2);
        filter: brightness(1.2);
    }
}

.t-cost-badge {
    background: #fbc02d;
    padding: 10px 25px;
    border-radius: 25px;
    border: 4px solid white;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    font-weight: 950;
    color: #604B00;
    font-size: 1.1rem;
}

/* PREDICTION AND SWAP OPTION */
.t-prediction-panel {
    background: white;
    padding: 25px;
    border-radius: 35px;
    margin-bottom: 25px;
    border: 5px solid #F0F0F0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.t-pred-label {
    font-weight: 950;
    color: #7b1fa2;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.t-pred-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 5px 0;
    font-size: 1.1rem;
}

#t-pred-result {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.t-pred-row {
    font-size: 0.95rem;
    color: #444;
    font-weight: 600;
}

.pred-up {
    color: #2e7d32;
    font-weight: 950;
    text-shadow: 0 0 10px rgba(76, 175, 80, 0.2);
}

.pred-down {
    color: #c62828;
    font-weight: 950;
    text-shadow: 0 0 10px rgba(244, 67, 54, 0.2);
}

.t-swap-option {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #F5F5F5;
}

.t-swap-label {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    background: #F0FDF4;
    padding: 12px 20px;
    border-radius: 20px;
    border: 2px solid #DCFCE7;
    transition: all 0.2s ease;
}

.t-swap-label:hover {
    background: #DCFCE7;
}

.t-swap-label input {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.t-swap-label span {
    font-weight: 800;
    color: #166534;
    font-size: 0.95rem;
}

.btn-transfuse-action {
    background: linear-gradient(135deg, #7b1fa2 0%, #FF1493 100%);
    color: white;
    padding: 20px 60px !important;
    border-radius: 40px !important;
    border: 6px solid white;
    font-size: 1.8rem !important;
    font-weight: 950 !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-transfuse-action:hover:not(:disabled) {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 20px 40px rgba(123, 31, 162, 0.5);
}

.btn-transfuse-action:active:not(:disabled) {
    transform: scale(0.95);
}

.btn-transfuse-action:disabled {
    background: #CCC;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.6;
}

/* SELECTION MODAL CARDS */
.select-t-card {
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    border-radius: 30px;
    border: 5px solid #4CAF50;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.8);
    position: relative;
    padding-top: 40px;
    /* Espaço para o botão de fechar não sobrepor o título */
    z-index: 9999;
}

.t-select-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    justify-content: center;
}

.t-animal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
    padding: 10px;
}

.t-select-card {
    background: #F8F9FA;
    border-radius: 30px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 4px solid transparent;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    cursor: pointer;
}

.t-select-card:hover {
    background: white;
    border-color: #7b1fa2;
    transform: translateY(-8px) rotate(1deg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.t-select-card img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: 10px;
}

.t-card-name {
    font-weight: 900;
    color: #333;
    font-size: 1rem;
}

.t-card-power {
    font-weight: 800;
    color: #7b1fa2;
    font-size: 0.85rem;
    margin-top: 5px;
}

.t-biome-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #4CAF50;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 900;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 2px solid white;
    z-index: 10;
}

.t-select-card.in-biome {
    background: #E8F5E9;
    border-color: #81C784;
}

.fusion-machine-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.t-impact-badge {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 900;
    white-space: nowrap;
    border: 2px solid white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 20;
}

.t-impact-badge.up {
    background: #4CAF50;
    color: white;
}

.t-impact-badge.down {
    background: #f44336;
    color: white;
}

.t-impact-badge.neutral {
    background: #9c27b0;
    color: white;
}

/* ── Seta de Transfusão ── */
.btn-transfusion-lab {
    position: relative !important;
    overflow: visible !important;
}

.t-hint-arrow {
    position: absolute;
    top: -40px;
    right: -30px;
    width: 65px;
    height: 65px;
    background: url('cenasPecas/seta01.webp') no-repeat center;
    background-size: contain;
    pointer-events: none;
    z-index: 1000;
    /* Apontando para o botão (canto superior esquerdo) */
    transform: rotate(135deg);
    animation: tHintArrowPulse 1.5s infinite ease-in-out;
}

@keyframes tHintArrowPulse {

    0%,
    100% {
        transform: rotate(135deg) scale(1) translate(0, 0);
        filter: drop-shadow(0 0 5px rgba(255, 235, 59, 0.5));
    }

    50% {
        transform: rotate(135deg) scale(1.15) translate(-12px, -12px);
        filter: drop-shadow(0 0 25px rgba(255, 235, 59, 1));
    }
}

/* ── Alerta de Transfusão no Bioma ── */
.biome-alert-btn {
    position: absolute !important;
    right: 40px;
    bottom: 15%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    background: none;
    border: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200 !important;
}

.biome-alert-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: alertImgPulse 1.5s infinite ease-in-out;
}

@keyframes alertImgPulse {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(255, 235, 59, 0.6)) brightness(1);
    }

    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 35px rgba(255, 235, 59, 1)) brightness(1.3);
    }
}

.biome-alert-btn .chest-glow {
    background: radial-gradient(circle, rgba(255, 255, 100, 0.9) 0%, rgba(255, 150, 0, 0.6) 40%, rgba(255, 50, 0, 0) 75%);
    width: 250%;
    height: 250%;
    animation: alertGlowPulse 1.5s infinite ease-in-out;
}

@keyframes alertGlowPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
}

.biome-alert-btn:hover img {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.5)) brightness(1.1);
}

.biome-alert-btn.hidden {
    display: none !important;
}

/* Efeito de estrelinhas saindo */
.alert-stars {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 0;
}

.a-star {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 15px white, 0 0 30px #ffea00;
    pointer-events: none;
    opacity: 0;
    animation: shootRadial 2s infinite linear;
    animation-delay: var(--delay);
}

@keyframes shootRadial {
    0% {
        transform: rotate(var(--angle)) translateY(0px) scale(0.5);
        opacity: 1;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: rotate(var(--angle)) translateY(-80px) scale(1.5);
        opacity: 0;
    }
}

/* ── BOTÃO DE MISSÕES (TELA MAPA) ── */
.btn-missions {
    position: absolute;
    top: 40%;
    right: 35px;
    width: 90px;
    height: 90px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: missionsWiggle 3s infinite ease-in-out;
}

.btn-missions img {
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-missions:hover {
    transform: scale(1.15) rotate(-5deg);
}

.btn-missions:hover img {
    filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.6));
}

.missions-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff5252;
    color: white;
    font-size: 1.2rem;
    font-weight: 900;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    animation: badgePulse 1s infinite alternate;
}

@keyframes badgePulse {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.2);
    }
}

@keyframes missionsWiggle {

    0%,
    90% {
        transform: scale(1) rotate(0deg);
    }

    92% {
        transform: scale(1.1) rotate(10deg);
    }

    94% {
        transform: scale(1.1) rotate(-10deg);
    }

    96% {
        transform: scale(1.1) rotate(10deg);
    }

    98% {
        transform: scale(1.1) rotate(-10deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* ── MISSIONS MODAL ── */
.missions-card {
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    border-radius: 30px;
    border: 5px solid #4CAF50;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.8);
    position: relative;
    padding-top: 40px;
    /* Espaço para o botão de fechar não sobrepor o título */
    z-index: 9999;

}

#missions-list {
    max-height: 50vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.mission-item {
    background: white;
    border-radius: 20px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-left: 8px solid #ff9800;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.btn-claim {
    cursor: pointer;
}

.mission-item:hover {
    transform: translateX(5px);
}

.mission-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mission-icon {
    font-size: 2.5rem;
    color: #ff9800;
    background: #fff3e0;
    padding: 10px;
    border-radius: 50%;
}

.mission-text h3 {
    margin: 0;
    font-size: 1.3rem;
    color: #333;
}

.mission-text p {
    margin: 5px 0 0 0;
    font-size: 1rem;
    color: #666;
}

.btn-do-mission {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 0 #2E7D32;
    transition: all 0.1s ease;
    text-transform: uppercase;
}

.btn-do-mission:hover {
    transform: translateY(-2px);
    background: #43A047;
    box-shadow: 0 6px 0 #2E7D32, 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn-do-mission:active {
    transform: translateY(4px);
    box-shadow: 0 0px 0 #2E7D32;
}

/* ── SETA GUIA GLOBAL ── */
.global-guide-arrow {
    position: absolute;
    z-index: 10000;
    pointer-events: none;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    /* Centrado no ponto alvo */
    transition: top 0.3s ease, left 0.3s ease;
}

.global-guide-arrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: guideBouncing 1s infinite alternate;
    filter: drop-shadow(0 0 10px rgba(255, 235, 59, 1)) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
}

@keyframes guideBouncing {
    from {
        transform: translateY(-15px) scale(1);
    }

    to {
        transform: translateY(5px) scale(1.1);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   BOSS SELECTION & ARENA
═══════════════════════════════════════════════════════════════════ */
.boss-header {
    padding: 20px;
    background: transparent;
    color: white;
    text-align: center;
    border-bottom: 4px solid var(--accent);
    margin: 0px;
    background-image: url('fundos/boss_header.webp');
    background-size: cover;
    /* faz a imagem preencher */
    background-position: center;
    /* centraliza */
    background-repeat: no-repeat;
    /* evita repetir */
    height: 100px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}


.boss-header h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 5px;
    text-shadow: 0 0 10px rgba(255, 230, 109, 0.5);
}

.boss-desc {
    color: #ccc;
    font-style: italic;
}

.boss-selection-content {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 350px);
    /* 3 cards por linha */
    justify-content: center;
    align-content: flex-start;
    gap: 30px;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    /* Rolagem vertical visível */
    background: radial-gradient(circle, #222 0%, #000 100%);

    background-color: none;
    background-image: url('fundos/bossf.webp');
    background-size: cover;
    /* faz a imagem preencher */
    background-position: center;
    /* centraliza */
    background-repeat: no-repeat;
    /* evita repetir */
}

.boss-card {
    min-width: 100%;
    height: 400px;
    background: #2a2a2a;
    border-radius: 24px;
    border: 3px solid #444;
    position: relative;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.boss-card:hover {
    transform: translateY(-15px) scale(1.03);
    border-color: var(--accent);
    box-shadow: 0 0 40px rgba(255, 230, 109, 0.3);
}

.boss-card.locked {
    filter: grayscale(1) brightness(0.5);
    cursor: not-allowed;
}

.boss-card .boss-img-wrapper {
    height: 75%;
    width: 100%;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boss-card .boss-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.boss-card:hover .boss-img {
    transform: scale(1.1);
}

.boss-card .boss-info {
    flex: 1;
    padding: 15px;
    background: linear-gradient(to top, #111, #222);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.boss-card .boss-name {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--accent);
}

.boss-card .boss-biome-tag {
    font-size: 0.8rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.boss-card .boss-lvl-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ff5252;
    color: white;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    z-index: 5;
}

/* Boss Fight Unique Elements */
/* Apenas o Boss é alinhado na base e empurrado um pouco mais para baixo */
.boss-mode .fighter-container.opponent {
    align-items: flex-end;
    margin-bottom: -15px;
}

.boss-mode #opponent-fighter-img {
    filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.4));
    animation: bossBreathing 3s infinite ease-in-out;
    transform-origin: center bottom;
}

.boss-mode .opponent .fighter-label {
    /* Calcula a posição baseada na escala do Boss (250px é a altura do container) */
    top: calc(-250px * (var(--boss-scale, 1) - 1) - 30px);
    transition: top 0.3s ease;
}

@keyframes bossBreathing {

    0%,
    100% {
        transform: scale(var(--boss-scale, 1));
    }

    50% {
        /* Expande para os lados e um pouco para cima, simulando pulmões cheios */
        transform: scale(calc(var(--boss-scale, 1) * 1.005)) scaleX(1.005);
    }
}

/* Boss Introduction Cinematic */
.boss-dialogue-container {
    position: absolute;
    top: 65%;
    /* Centralizado no corpo do boss (zoom) */
    left: 78%;
    /* Alinhado horizontalmente com o boss focado */
    transform: translateX(-50%);
    z-index: 2000;
    width: 60%;
    max-width: 350px;
    pointer-events: none;
    transition: all 0.5s ease;
}

.boss-dialogue-box {
    background: rgba(0, 0, 0, 0.85);
    border: 3px solid #ff5252;
    border-radius: 20px;
    padding: 20px;
    color: white;
    position: relative;
    box-shadow: 0 0 30px rgba(255, 82, 82, 0.4);
}

.boss-dialogue-name {
    position: absolute;
    bottom: -20px;
    /* Movido para baixo para não bater na seta superior */
    left: 20px;
    background: #ff5252;
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.1rem;
}

.boss-dialogue-content {
    font-size: 1.1rem;
    /* Menor e mais legível */
    font-style: italic;
    line-height: 1.4;
    text-align: left;
    font-family: 'Outfit', sans-serif;
    min-height: 3em;
}

.boss-dialogue-arrow {
    position: absolute;
    top: -15px;
    /* Seta no topo do balão */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid #ff5252;
    /* Ponta para CIMA */
}

/* Efeito de digitação */
.typing-cursor::after {
    content: '|';
    animation: blink 0.7s infinite;
    color: #ff5252;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Cinematic Screen Zoom Effect */
.screen-boss-focus {
    transform: scale(1.7) translate(-18%, -5%) !important;
}

#screen-combat {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.boss-mode-darken {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 950;
    /* Abaixo do diálogo, acima da arena */
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.boss-mode-darken.active {
    opacity: 1;
}

/* Custom Vertical Scrollbar para a Seleção de Bosses */
#boss-list::-webkit-scrollbar {
    width: 30px;
    /* Expessura da barra de rolagem vertical */
    cursor: pointer;
}

#boss-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    margin: 20px 0;
}

#boss-list::-webkit-scrollbar-thumb {
    background-image: url('telaBoss.webp');
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

/* Custom Vertical Scrollbar para a Seleção de Bosses */
#battle-biome-list::-webkit-scrollbar {
    width: 30px;
    /* Expessura da barra de rolagem vertical */
    cursor: pointer;
}

#battle-biome-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    margin: 20px 0;
}

#battle-biome-list::-webkit-scrollbar-thumb {
    background-image: url('rolagembtl.webp');
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    cursor: pointer;
}




/* ── Seleção de Bioma para Batalha ── */
.biome-selection-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 320px);
    justify-content: center;
    align-content: flex-start;
    gap: 30px;
    padding: 30px;
    overflow-y: auto;
    background: radial-gradient(circle, #2e7d32 0%, #0a2d0c 100%);
    background-image: url('fundos/batleF.webp');
    background-size: cover;
    /* faz a imagem preencher */
    background-position: center;
    /* centraliza */
    background-repeat: no-repeat;
    /* evita repetir */
}

.biome-battle-card {
    height: 380px;
    background: #1a3c1e;
    border-radius: 30px;
    border: 4px solid #3d8c40;
    position: relative;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.biome-battle-card:hover {
    transform: translateY(-15px) scale(1.05);
    border-color: #ffd600;
    box-shadow: 0 0 50px rgba(255, 214, 0, 0.3);
}

.biome-battle-card .biome-img-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.biome-battle-card .biome-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.biome-battle-card:hover .biome-img {
    transform: scale(1.15);
}

.biome-battle-card .biome-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top, #0a2d0c, #1a3c1e);
    color: white;
    padding: 15px;
}

.biome-battle-card .biome-name {
    font-size: 1.4rem;
    font-weight: 900;
    color: #ffd600;
    text-align: center;
}

.biome-battle-card .biome-status {
    font-size: 0.9rem;
    color: #a5d6a7;
    margin-top: 5px;
    font-weight: 600;
}

.biome-battle-card.disabled {
    filter: grayscale(1) opacity(0.6);
    cursor: not-allowed;
}

.biome-battle-card.disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Spirit Animal Animation */
.spirit-animal {
    position: absolute;
    width: 120px;
    height: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.8;
    z-index: 1000;
    pointer-events: none;
    animation: floatToHeaven 4s ease-in forwards;
}

/* Quando for o bicho do usuário, flipamos para a direita */
.spirit-animal.spirit-player {
    transform: translateX(-50%) scaleX(-1);
    animation-name: floatToHeavenPlayer;
}

@keyframes floatToHeaven {
    0% {
        transform: translate(-50%, 0) scale(1);
        opacity: 0.8;
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -100px) scale(1.1);
    }

    100% {
        transform: translate(-50%, -120vh) scale(1);
        opacity: 0;
    }
}

@keyframes floatToHeavenPlayer {
    0% {
        transform: translate(-50%, 0) scale(1) scaleX(-1);
        opacity: 0.8;
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -100px) scale(1.1) scaleX(-1);
    }

    100% {
        transform: translate(-50%, -120vh) scale(1) scaleX(-1);
        opacity: 0;
    }
}

/* ══════════════════════════════════════════════════════════
   MATCHMAKING SCREEN  –  display APENAS em .active para não
   sobrepor outras telas (não definir display:flex aqui!)
══════════════════════════════════════════════════════════ */
#screen-matchmaking.active {
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.matchmaking-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, #2e7d32 0%, #1b5e20 100%);
    /* Verde selva profundo */
    z-index: 0;
}

.matchmaking-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#ffffff 2px, transparent 2px);
    background-size: 30px 30px;
    opacity: 0.05;
    /* Bolinhas sutis ao fundo */
}

.matchmaking-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 24px 20px;
    width: 100%;
    max-width: 480px;
}

.matchmaking-header {
    text-align: center;
}

.matchmaking-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fffbdf;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 230, 0, 0.4);
    margin: 0 0 4px;
    font-family: 'Outfit', sans-serif;
}

.matchmaking-biome-label {
    color: #e8f5e9;
    font-size: 1.1rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 15px;
    border-radius: 20px;
    display: inline-block;
    margin: 5px 0;
}

.matchmaking-biome-label strong {
    color: #ffeb3b;
    text-transform: capitalize;
}

/* ── Radar ─────────────────────────────── */
.matchmaking-radar-wrap {
    position: relative;
    width: 220px;
    height: 220px;
    flex-shrink: 0;
}

.radar-ring {
    position: absolute;
    border-radius: 50%;
    border: 6px solid rgba(255, 255, 255, 0.15);
    /* Borda mais grossa tipo bolha */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: radarPulse 3s ease-in-out infinite;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
}

.ring-1 {
    width: 220px;
    height: 220px;
    animation-delay: 0s;
}

.ring-2 {
    width: 150px;
    height: 150px;
    animation-delay: 0.5s;
}

.ring-3 {
    width: 80px;
    height: 80px;
    animation-delay: 1s;
}

@keyframes radarPulse {

    0%,
    100% {
        opacity: .35;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: .7;
        transform: translate(-50%, -50%) scale(1.04);
    }
}

.radar-sweep {
    position: absolute;
    top: 0%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform-origin: 0% 100%;
    background: conic-gradient(from 0deg, rgba(255, 235, 59, 0) 0deg, rgba(255, 235, 59, 0.4) 30deg, rgba(255, 235, 59, 0) 60deg);
    animation: radarSweep 2s linear infinite;
    border-radius: 0 100% 0 0;
    filter: blur(2px);
}

@keyframes radarSweep {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.radar-player {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 10;
}

.radar-player .material-symbols-rounded {
    font-size: 3rem;
    color: #fff;
    background: #4caf50;
    border: 4px solid #fff;
    border-radius: 50%;
    padding: 10px;
    animation: playerPulse 1.5s ease-in-out infinite;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

@keyframes playerPulse {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(56, 200, 100, 0.4);
    }

    50% {
        box-shadow: 0 0 20px rgba(56, 200, 100, 0.8);
    }
}

.radar-player-name {
    font-size: 1rem;
    color: #fff;
    font-weight: 900;
    text-align: center;
    background: #2e7d32;
    padding: 2px 10px;
    border-radius: 10px;
    border: 2px solid #fff;
}

.radar-opponent {
    position: absolute;
    top: 18%;
    right: 14%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 10;
    animation: opponentAppear 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.radar-opponent .material-symbols-rounded {
    font-size: 2.8rem;
    color: #fff;
    background: #ff5722;
    border: 4px solid #fff;
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    animation: opponentBounce 1s infinite alternate;
}

@keyframes opponentBounce {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-5px);
    }
}

.radar-opp-name {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 900;
    text-align: center;
    background: #c62828;
    padding: 2px 10px;
    border-radius: 10px;
    border: 2px solid #fff;
    max-width: 80px;
    word-break: break-all;
}

@keyframes opponentAppear {
    from {
        transform: scale(0) rotate(-20deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* ── Circular timer ─────────────────────── */
.matchmaking-timer-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.matchmaking-timer-ring {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.matchmaking-timer-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.timer-track {
    fill: none;
    stroke: rgba(0, 0, 0, 0.2);
    stroke-width: 10;
}

.timer-fill {
    fill: none;
    stroke: #ffeb3b;
    /* Amarelo */
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 276.46;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear, stroke 0.5s;
    filter: drop-shadow(0 0 5px rgba(255, 235, 59, 0.5));
}

.timer-fill.urgent {
    stroke: #ff5252;
    animation: urgentPulse 0.5s ease-in-out infinite alternate;
}

@keyframes urgentPulse {
    from {
        opacity: .6
    }

    to {
        opacity: 1
    }
}

.matchmaking-seconds {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffcc33;
    text-shadow: 0 4px 0 #8d6e63, 0 0 10px white;
    font-family: 'Outfit', sans-serif;
}

.matchmaking-phase-text {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 15px;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    transition: all 0.4s ease;
    width: 260px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* ── Phase dots ─────────────────────────── */
.matchmaking-phases {
    display: flex;
    align-items: center;
}

.phase-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 50px;
    height: 50px;
    border-radius: 18px;
    /* Quadrado arredondado amigável */
    border: 4px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    font-size: .8rem;
    color: #fff;
    font-weight: 800;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.phase-dot.active {
    border-color: #ffeb3b;
    background: #fbc02d;
    color: #4e342e;
    box-shadow: 0 0 20px rgba(255, 235, 59, 0.6), 0 5px 0 #f9a825;
    transform: scale(1.15) rotate(5deg);
}

.phase-dot.done {
    border-color: #4caf50;
    background: #66bb6a;
    color: #fff;
    opacity: 0.8;
}

.phase-dot.bot.active {
    border-color: #ffeb3b;
    background: #ff9800;
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 152, 0, 0.6), 0 5px 0 #ef6c00;
    transform: scale(1.15) rotate(-5deg);
}

.phase-connector {
    width: 30px;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── Cancel button ──────────────────────── */
.btn-matchmaking-cancel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 35px;
    background: #f44336;
    border: none;
    border-radius: 30px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 6px 0 #c62828;
    text-transform: uppercase;
}

.btn-matchmaking-cancel:hover {
    background: #ef5350;
    transform: scale(1.05) rotate(-1deg);
}

.btn-matchmaking-cancel:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #c62828;
}

.matchmaking-found-flash {
    position: absolute;
    inset: 0;
    background: rgba(56, 200, 100, 0.15);
    animation: flashIn 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 50;
}

@keyframes flashIn {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.screen-shake-light {
    animation: screen-shake-light 0.4s ease-in-out;
}

@keyframes screen-shake-light {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px) rotate(-1deg);
    }

    50% {
        transform: translateX(5px) rotate(1deg);
    }

    75% {
        transform: translateX(-3px);
    }
}

/* --- Modal Seleção de Bioma para Desafio --- */
.biome-selection-modal {
    max-width: 700px;
    width: 95%;
    padding: 35px;
    background: rgba(255, 251, 230, 0.95);
    backdrop-filter: blur(10px);
    border: 8px solid #8d6e63;
    border-radius: 40px;
    box-shadow: 0 20px 0 #5d4037, 0 30px 40px rgba(0, 0, 0, 0.4);
    position: relative;
    text-align: center;
    border-style: double;
}

.biome-selection-modal .challenge-title {
    font-size: 2.2rem;
    background: linear-gradient(to bottom, #795548, #5d4037);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
}

.biome-grid-modal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 25px;
    max-height: 550px;
    overflow-y: auto;
    padding: 15px;
    scrollbar-width: thin;
    scrollbar-color: #8d6e63 transparent;
}

.biome-item-modal {
    background: white;
    border: 6px solid #8d6e63;
    border-radius: 30px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 0 #5d4037;
    position: relative;
    overflow: hidden;
}

.biome-item-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
    pointer-events: none;
}

.biome-item-modal:hover {
    transform: translateY(-10px);
    border-color: #ff9800;
    box-shadow: 0 12px 0 #e65100;
    background: #fff8e1;
}

.biome-item-modal.active {
    border-color: #4caf50;
    background: #e8f5e9;
    box-shadow: 0 4px 0 #2e7d32;
    transform: scale(0.95);
}

.biome-item-modal img {
    width: 120px;
    height: 75px;
    object-fit: cover;
    border-radius: 20px;
    border: 4px solid #eee;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.biome-item-modal span {
    font-weight: 900;
    font-size: 0.95rem;
    color: #5d4037;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 600px) {
    .biome-grid-modal {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── BOTÃO SHOP NO MAPA ── */
.shop-map-card {
    top: 25%;
    left: 60%;
}

/* ── TELA DE SHOPPING ── */
/* ── TELA DE SHOPPING (THEME MATCHED TO XP STORE) ── */
#screen-shop {
    background: rgba(0, 0, 0, 0.85);
    /* Overlay background like a modal */
}

/* ── FEEDBACK TOASTS ── */
.toast-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 900;
    font-family: 'Outfit', sans-serif;
    border: 3px solid #ffd700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: toastPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes toastPop {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── CAPIRANGA WALKER (EASTER EGG) ── */
.capiranga-walker {
    position: absolute;
    bottom: -100px;
    /* Passa um pouco abaixo dos outros personagens */
    right: -300px;
    width: 250px;
    height: auto;
    z-index: 1000000;
    /* Garante que passe na frente de tudo */
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.capiranga-walker.active {
    animation: capirangaScroll 45s linear forwards;
    /* Passo calmo cruzando o mundo */
}

@keyframes capirangaScroll {
    from {
        right: -300px;
    }

    to {
        right: 120vw;
    }
}

.capiranga-walker img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
}

/* 📱 DESIGN MOBILE LANDSCAPE (HORIZONTAL) 📱 */

/* ── 1. Aviso de Orientação ── */
.landscape-warning {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999999;
    background: radial-gradient(circle at center, #FF5E5B 0%, #cc4b48 100%);
    color: white;
    font-family: 'Outfit', sans-serif;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 20px;
    user-select: none;
}

/* Mostra apenas em telas menores (mobile) quando em retrato */
@media (orientation: portrait) and (max-width: 1024px) {
    .landscape-warning {
        display: flex;
    }

    body.mobile-landscape-layout>*:not(.landscape-warning) {
        display: none !important;
    }
}

.warning-wrapper {
    max-width: 320px;
    animation: authCardIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.device-animation {
    background: rgba(255, 255, 255, 0.2);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    border: 4px solid #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.rotate-icon {
    font-size: 70px !important;
    animation: rotateDevice 2.5s ease-in-out infinite;
    display: block;
    color: #fff;
}

@keyframes rotateDevice {

    0%,
    20% {
        transform: rotate(0deg);
    }

    50%,
    70% {
        transform: rotate(90deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.landscape-warning h2 {
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 15px;
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
}

.landscape-warning p {
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 700;
    opacity: 0.95;
}

/* ── 2. Ajustes de Escala para Mobile Paisagem ── */
@media (max-width: 1024px) and (orientation: landscape) {
    #game-stage {
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        zoom: 1 !important;
        /* Reseta o zoom para usar 100% real */
        margin: 0 !important;
    }

    /* Esconde decorações externas que poluem o fullscreen */
    .game-decorations-overlay,
    .decor-item,
    .menina,
    .menino {
        display: none !important;
    }

    /* Remove bordas e molduras para o jogo encostar na tela */
    #game-container {
        border-radius: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Ajusta modais e elementos internos para caberem no novo fullscreen */
    .modal-content {
        max-height: 95vh;
        transform: scale(0.9);
    }
}

/* ── 3. Melhorias gerais para touch ── */
@media (max-width: 1024px) {

    /* Botões maiores para dedos pequenos/grandes */
    .btn-image,
    .btn-icon,
    .btn-auth,
    .btn-primary {
        transition: transform 0.1s active !important;
    }

    .btn-image:active,
    .btn-icon:active,
    .btn-auth:active {
        transform: scale(0.9) !important;
    }

    /* Scrollbars mais amigáveis para touch */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
}

/* ── BOTÃO DE ADICIONAR (PLUS) NO HEADER ── */
.btn-add-stat {
    background: var(--accent);
    border: 3px solid white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 8px;
    color: var(--dark);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0;
    pointer-events: none;
    /* Deixa o clique passar para o container pai */
}

.btn-add-stat:hover {
    transform: scale(1.1) rotate(90deg);
    background: #fff;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
}

.btn-add-stat:active {
    transform: scale(0.9);
    box-shadow: 0 0 0 transparent;
}

.btn-add-stat .material-symbols-rounded {
    font-size: 20px !important;
    font-weight: 900;
}

.ViewGo {
    position: absolute;
    bottom: -30%;
    right: -100px;
    transform: translate(-50%, -50%);
    z-index: 3000;
    pointer-events: none;
    transition: opacity 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0px;
    background-color: white;
    padding: 10px;
    border-radius: 20px;

}

.icoView {
    width: 70px;
    height: 70px;
}

.ViewGo span {
    color: #7010d8;
}

.ViewGo h1 {
    font-size: 20px;
    font-weight: 900;
    gap: 0px;
    margin: 0px;
    padding: 0px;
}

/* 🐾 ENGLISH FLASHCARDS - KID PREMIUM DESIGN 🐾 */
.flashcard-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(43, 24, 11, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    animation: flashFadeIn 0.4s ease;
}

@keyframes flashFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.flashcard-content {
    background: linear-gradient(135deg, #ffffff 0%, #fff9e6 100%);
    width: 92%;
    max-width: 440px;
    border-radius: 50px;
    padding: 35px;
    text-align: center;
    border: 12px solid #FFD966;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.4),
        inset 0 0 30px rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    animation: flashPopIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.flashcard-content::before {
    content: '✨';
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 60px;
    opacity: 0.1;
    transform: rotate(-15deg);
}

.flashcard-header {
    background: linear-gradient(to right, #FF9800, #F44336);
    color: white;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 900;
    display: inline-block;
    margin-bottom: 25px;
    font-size: 1.4rem;
    box-shadow: 0 6px 0 #cc5800, 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: rotate(-2deg);
}

.flashcard-reward-msg {
    color: #FF5E5B;
    font-weight: 900;
    font-size: 1.1rem;
    margin: -10px 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.flashcard-question {
    font-size: 2rem;
    color: #5D4037;
    margin-bottom: 30px;
    font-weight: 900;
    line-height: 1.2;
}

.flashcard-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.flashcard-option {
    background: #FFF;
    padding: 25px 15px;
    border-radius: 30px;
    font-size: 1.3rem;
    font-weight: 900;
    color: #795548;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 4px solid #E0E0E0;
    box-shadow: 0 8px 0 #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flashcard-option:active {
    transform: translateY(4px);
    box-shadow: 0 4px 0 #E0E0E0;
}

.flashcard-option.correct {
    background: #4CAF50 !important;
    border-color: #2E7D32 !important;
    color: white !important;
    box-shadow: 0 8px 0 #1b5e20 !important;
}

.flashcard-option.wrong {
    background: #FF5E5B !important;
    border-color: #cc4b48 !important;
    color: white !important;
    box-shadow: 0 8px 0 #a33c39 !important;
    animation: flashShake 0.5s;
}

@keyframes flashShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

@keyframes flashPopIn {
    from {
        transform: scale(0.3) rotate(-10deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

/* 🏆 CELEBRATION EFFECTS 🏆 */
.celebration-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.celebration-star {
    position: absolute;
    color: #FFD966;
    font-size: 40px;
    animation: starExplode 1.2s forwards;
    text-shadow: 0 0 15px rgba(255, 217, 102, 0.6);
}

@keyframes starExplode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

.celebration-text {
    font-size: 5rem;
    font-weight: 900;
    color: #FF9800;
    text-shadow: 0 10px 0 #cc5800, 0 20px 40px rgba(0, 0, 0, 0.2);
    animation: celebrateText 1.2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes celebrateText {
    0% {
        transform: scale(0) rotate(-20deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.4) rotate(10deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0);
        opacity: 0;
    }
}


/* ── Efeito de Magia e Projéteis ───────────────────────────── */
.combat-effects-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1500;
    pointer-events: none;
}

.combat-projectile {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #00e5ff 40%, #0060df 100%);
    box-shadow: 0 0 25px #00e5ff, 0 0 50px rgba(0, 229, 255, 0.5), 0 0 80px rgba(0, 96, 223, 0.3);
    z-index: 10001;
    filter: drop-shadow(0 0 15px #fff);
    animation: magicPulse 0.4s infinite alternate;
}

.projectile-trail {
    position: absolute;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.8) 0%, rgba(0, 96, 223, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: trailFadeMagic 0.5s ease-out forwards;
}

@keyframes magicPulse {
    from {
        transform: scale(1);
        filter: brightness(1);
    }

    to {
        transform: scale(1.1);
        filter: brightness(1.3);
    }
}

@keyframes trailFadeMagic {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(0.2);
        opacity: 0;
    }
}