/* ========================================
   MOBILE CARD STYLES
   Touch-specific interactions and animations
   ======================================== */

/* Always create pseudo-elements for +/- zones, but hidden by default */
.card::before {
    content: '−';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,
        rgba(236, 72, 153, 0.5) 0%,
        rgba(236, 72, 153, 0.5) 49.5%,
        transparent 50.5%,
        transparent 100%);
    pointer-events: none;
    border-radius: 5px;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 12px;
    font-size: 48px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    visibility: hidden; /* Hidden by default - instant toggle */
    will-change: visibility;
}

.card::after {
    content: '+';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,
        transparent 0%,
        transparent 49.5%,
        rgba(34, 197, 212, 0.5) 50.5%,
        rgba(34, 197, 212, 0.5) 100%);
    pointer-events: none;
    border-radius: 5px;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 12px;
    font-size: 48px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    visibility: hidden; /* Hidden by default - instant toggle */
    will-change: visibility;
}

/* Card activation state - shows +/- zones by making them visible */
.card.card-activated::before {
    visibility: visible; /* Show instantly */
}

.card.card-activated::after {
    visibility: visible; /* Show instantly */
}

/* Extra highlight border when activated */
.card.card-activated {
    box-shadow: black 2px 2px 5px;
}

/* Zoom animation for mobile card activation */
@keyframes card-zoom-in {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.10);
    }
}

/* On touch devices, zoom the card when activated */
.touch-device .card {
    will-change: transform;
}

.touch-device .card.card-activated {
    transform: scale(1.10);
    box-shadow: 0 6px 20px rgba(118, 207, 249, 0.9);
    animation: card-zoom-in 0.15s ease-out forwards;
}

/* Special cards keep their gold glow when activated on touch */
.touch-device .card-special.card-activated {
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.8);
}

/* Flash animations for zone taps */
@keyframes flash-minus {
    0% {
        background: linear-gradient(45deg,
            rgba(236, 72, 153, 0.5) 0%,
            rgba(236, 72, 153, 0.5) 49.5%,
            transparent 50.5%,
            transparent 100%);
    }
    50% {
        background: linear-gradient(45deg,
            rgba(236, 72, 153, 0.70) 0%,
            rgba(236, 72, 153, 0.70) 49.5%,
            transparent 50.5%,
            transparent 100%);
    }
    100% {
        background: linear-gradient(45deg,
            rgba(236, 72, 153, 0.5) 0%,
            rgba(236, 72, 153, 0.5) 49.5%,
            transparent 50.5%,
            transparent 100%);
    }
}

@keyframes flash-plus {
    0% {
        background: linear-gradient(45deg,
            transparent 0%,
            transparent 49.5%,
            rgba(34, 197, 212, 0.5) 50.5%,
            rgba(34, 197, 212, 0.5) 100%);
    }
    50% {
        background: linear-gradient(45deg,
            transparent 0%,
            transparent 49.5%,
            rgba(34, 197, 212, 0.7) 50.5%,
            rgba(34, 197, 212, 0.7) 100%);
    }
    100% {
        background: linear-gradient(45deg,
            transparent 0%,
            transparent 49.5%,
            rgba(34, 197, 212, 0.5) 50.5%,
            rgba(34, 197, 212, 0.5) 100%);
    }
}

.card.card-activated.flash-minus::before {
    animation: flash-minus 0.3s ease-out;
}

.card.card-activated.flash-plus::after {
    animation: flash-plus 0.3s ease-out;
}

/* Disable hover effects when card is activated */
.card.card-activated:hover {
    transform: none;
    transition: none !important;
}