/* Importa uma fonte "Pixel Art" retro para o estilo do jogo */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* ==========================================
   1. O CONTENTOR PRINCIPAL
   ========================================== */
.card-container {
    width: 100% !important;
    height: 100% !important;
    
    /* FIX 1: Fundo da carta INVERTIDO para Preto! */
    background-color: #050505; 
    
    color: #fff;
    border: 0.15cqw solid #34495e; 
    border-radius: 0; 
    
    font-family: 'VT323', monospace; 
    position: relative; 
    container-type: inline-size; 
    
    box-shadow: 0 4px 10px rgba(0,0,0,0.8);
    transition: transform 0.2s; 
    box-sizing: border-box;
    overflow: hidden; 
}

.card-container:hover {
    transform: translateY(-5px) scale(1.02);
}

.not-owned {
    opacity: 0.4;
    filter: grayscale(50%);
    border-color: #7f8c8d;
}

/* ==========================================
   2. O TOPO: NOME E CUSTO
   ========================================== */
.card-header {
    position: absolute;
    top: 3%;
    left: 3%;
    right: 3%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 5;
    pointer-events: none;
}

.card-name { 
    font-size: 8cqw; 
    text-transform: capitalize;
    background: rgba(0, 0, 0, 0.85);
    padding: 0.5cqw 2cqw;
    border-radius: 1cqw;
    border: 0.2cqw solid #3498db;
    max-width: 65%;
    line-height: 1.1;
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
} 

.card-cost { 
    color: #fff; 
    font-size: 10cqw; 
    font-weight: bold; 
    background: rgba(0, 0, 0, 0.85);
    border: 0.3cqw solid #3498db;
    border-radius: 50%;
    width: 16cqw;
    height: 16cqw;
    display: flex;
    justify-content: center;
    align-items: center;
    
    animation: cost-pulse 10s infinite ease-in-out;
}

/* ==========================================
   ANIMAÇÃO DE PARTÍCULAS DE SOUL (COST)
   ========================================== */
@keyframes cost-pulse {
    0%, 85%, 100% { 
        box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); 
    }
    92% { 
        /* O momento exato em que a borda emite o pulso de energia azul/ciano */
        box-shadow: 0 0 8px 2px #3498db, inset 0 0 5px #3498db; 
    }
}

/* ==========================================
   3. A IMAGEM E AS CLASSES
   ========================================== */
.card-image-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55%;
    z-index: 1;
    pointer-events: none;
}

.card-image { 
    position: absolute;
    top: 15%; 
    left: 50%;
    transform: translateX(-50%);
    width: 65cqw;
    height: 65cqw;
    border-radius: 50%; 
    object-fit: contain; 
    
    /* FIX 1: Fundo da imagem INVERTIDO para Cinzento Escuro! */
    background-color: #1f2326; 
    
    padding: 4cqw; 
    box-sizing: border-box;
    image-rendering: pixelated;
    border: 0.3cqw solid #7f8c8d; 
    box-shadow: 0 0 10px rgba(0,0,0,0.8) inset, 0 5px 10px rgba(0,0,0,0.5);
}

.card-class-icons {
    position: absolute;
    top: 29%;    
    right: 3%;  
    display: flex;
    flex-direction: column; 
    gap: 1cqw;    
    z-index: 10; 
    pointer-events: none; 
}

.class-icon {
    width: 12cqw;  
    height: 12cqw;
    background-color: rgba(0, 0, 0, 0.8); 
    border: 0.2cqw solid #2ecc71; 
    border-radius: 50%;     
    padding: 0.5cqw;
    object-fit: contain; 
    image-rendering: pixelated; 
}

.card-invoked-icon {
    position: absolute;
    top: 29%;    
    left: 3%;  /* O Segredo: encostado à ESQUERDA! */
    display: flex;
    flex-direction: column; 
    z-index: 10; 
    pointer-events: none; 
}
.invoked-icon {
    width: 12cqw;  
    height: 12cqw;
    background-color: rgba(0, 0, 0, 0.8); 
    border: 0.2cqw solid #9b59b6; /* Uma borda roxa/mística (podes alterar a cor) */
    border-radius: 50%;
    object-fit: contain;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.card-container[data-type="environment" i] .card-image {
    /* O !important esmaga qualquer outra regra ou estilo inline! */
    object-fit: cover !important; 
    padding: 0 !important; 
    border-radius: 50% !important; 
}

/* ==========================================
   4. OS STATS (ATK, HP, RARIDADE)
   ========================================== */
.card-stats {
    position: absolute;
    top: 48%; 
    left: 6%;
    right: 6%;
    height: 16cqw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 6;
    pointer-events: none;
}

.card-atk:empty, .card-hp:empty {
    display: none !important;
}

.card-atk, .card-hp { 
    position: relative; 
    width: 16cqw;
    height: 16cqw;
    background-color: #050505; 
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10cqw;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.8);
    text-shadow: 2px 2px 3px #000, -1px -1px 2px #000;
    z-index: 2; 
}

.card-atk { 
    color: #e74c3c; 
    border: 0.3cqw solid #e74c3c; /* Borda vermelha do círculo intacta! */
}

.card-atk::before,
.card-atk::after {
    content: '';
    position: absolute;
    top: 50%; 
    left: 50%;
    
    /* 180% faz os pregos serem maiores que o círculo */
    width: 150%; 
    height: 150%;
    background: url('/img/card_design/nail.webp') no-repeat center center; 
    background-size: contain;
    
    z-index: -1; /* Mantém os dois atrás do fundo preto do círculo */
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.9)); 
    
    /* A MAGIA 1: Reduzimos a opacidade ligeiramente como pediste! */
    opacity: 0.45; 
}

/* Prego 1 (Corta da esquerda-cima para a direita-baixo) */
.card-atk::before {
    transform: translate(-50%, -50%) rotate(-45deg); 
}

/* A MAGIA 2: Prego 2 (Corta na direção oposta formando um "X") */
.card-atk::after {
    transform: translate(-50%, -50%) rotate(45deg); 
}

.card-hp { 
    color: #2ecc71; 
    border: 0.3cqw solid #2ecc71; /* Borda Verde de volta */
    
    /* Corta qualquer bocado da máscara que saia do círculo verde */
    overflow: hidden; 
}

.card-hp::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 50%;
    
    /* Mantém a máscara contida dentro do círculo */
    width: 80%; 
    height: 80%;
    background: url('/img/card_design/mask.webp') no-repeat center center; 
    background-size: contain;
    transform: translate(-50%, -50%); 
    
    /* Pouca opacidade (marca de água) e colado ao fundo, atrás do número verde */
    opacity: 0.15; 
    z-index: 0; 
}

.card-rarity {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-51%, 20%); 
    background: transparent;
    border: none; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 14cqw;
    height: 14cqw;
    z-index: 10;
}

.card-rarity img { 
    height: 12cqw; 
    image-rendering: pixelated; 
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.9)); 
}

/* ==========================================
   5. A DESCRIÇÃO E AS MOLDURAS (BOTTOM)
   ========================================== */
.card-desc {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background-color: transparent; 
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-top: none; 
}

.card-desc::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; /* Vai de ponta a ponta */
    height: 50%; 
    background: url('/img/card_design/card_top.webp') no-repeat center top;
    
    /* A MAGIA: 100% de largura, mas a altura escala para manter a proporção original! */
    background-size: 100% auto; 
    
    z-index: 0; 
    mix-blend-mode: screen; 
}

.card-desc::after {
    content: '';
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%; /* Vai de ponta a ponta */
    height: 50%;
    background: url('/img/card_design/card_bottom.webp') no-repeat center bottom;
    
    /* A MAGIA: 100% de largura, mas a altura escala para manter a proporção original! */
    background-size: 100% auto; 
    
    z-index: 0; 
    mix-blend-mode: screen; 
}

/* A CAIXA LIMITADORA DO TEXTO (SAFE ZONE) */
.desc-text {
    position: absolute;
    
    /* FIX: Aumentámos a margem do topo e do fundo. 
       A caixa de texto agora começa MAIS ABAIXO e acaba MAIS ACIMA.
       Nunca vai tocar nas imagens! */
    top: 24%;    
    bottom: 24%; 
    left: 8%;
    right: 8%;
    
    display: flex;
    align-items: center;     
    justify-content: center; 
    
    background-color: transparent !important; 
    
    font-size: 7.5cqw !important; 
    text-align: center;
    line-height: 1.1;
    color: #bdc3c7;
    
    z-index: 2; 
    
    overflow: hidden; 
    white-space: normal; 
    word-wrap: break-word;
}

/* ==========================================
   6. EXTRAS (QUANTIDADE E SELEÇÃO NA MESA)
   ========================================== */
.card-wrapper {
    width: 180px; 
    height: 240px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px; 
    position: relative; 
}

.card-wrapper .card-container {
    width: 100% !important;
    height: 100% !important;
}

.card-quantity {
    position: absolute;
    bottom: -30px; 
    font-family: 'VT323', monospace;
    font-size: 24px;
    color: #fff;
    background-color: #000;
    border: 2px solid #fff;
    border-radius: 4px;
    padding: 2px 15px;
}

.selected-attacker {
    box-shadow: 0 0 20px 5px #e74c3c !important; 
    transform: translateY(-15px) scale(1.05); 
    transition: all 0.2s ease-in-out;
    border-color: #e74c3c !important;
}

.card-container, 
.card-quantity,
.cornifer-option {
    -webkit-user-select: none; 
    -moz-user-select: none;    
    -ms-user-select: none;     
    user-select: none;         
}

#myField .card-container[data-crystal-side="pink"],
#opponentField .card-container[data-crystal-side="pink"] {
    box-shadow: 0 0 15px 3px rgba(255, 102, 204, 0.7);
    border-color: #ff9ff3 !important;
}
#myField .card-container[data-crystal-side="blue"],
#opponentField .card-container[data-crystal-side="blue"] {
    box-shadow: 0 0 15px 3px rgba(102, 204, 255, 0.7);
    border-color: #54a0ff !important;
}
/* A própria carta do Meio herda a animação Luz/Vazio! */
#myField .card-container[data-crystal-side="white"],
#opponentField .card-container[data-crystal-side="white"] {
    animation: voidLightPulse 1.5s infinite ease-in-out !important;
}




/* Crystal Card Shine */
.card-container[data-crystal-side="pink"] {
    border-color: #ff9ff3 !important;
    box-shadow: 0 0 10px 2px rgba(255, 102, 204, 0.5) !important;
}
.card-container[data-crystal-side="blue"] {
    border-color: #54a0ff !important;
    box-shadow: 0 0 10px 2px rgba(102, 204, 255, 0.5) !important;
}
.card-container[data-crystal-side="white"] {
    border-color: #ffffff !important;
    animation: voidLightPulse 1.5s infinite ease-in-out !important;
}