.cards {
    perspective: 500px;
}

.card {
    /* Removed fixed width/height to allow responsive sizing */
    /* width: 200px; */
    /* height: 250px; */
    /* background: #16161d; */
    /* Background handled by existing styles */
    /* border: 2px solid #555555; */
    /* Border handled by existing styles */
    /* border-radius: 4px; */
    /* Radius handled by existing styles */
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .5s;
}

/* 
   Trigger the card tilt when the CONTAINER is hovered.
   This is crucial because .mouse-tracker-grid overlays the card,
   stealing pointer events from the card itself.
*/
/* .tarea-card-container:hover .card {
    transform: translateZ(10px);
} */

.card_title {
    /* color: #fff; */
    /* Color handled by existing styles */
    /* position: absolute; */
    /* Position handled by existing styles */
    /* top: 50%; */
    /* right: 20px; */
    /* transform: translateY(-50%); */
    transition: transform .5s;
    /* font: 700 1.5rem monospace; */
    text-shadow: -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

/* 
   Trigger the title pop-out when the CONTAINER is hovered.
*/
.tarea-card-container:hover .card_title {
    transform: translateZ(50px);
}

.light-mode .card_title {
    text-shadow: none !important;
}