@keyframes tooltip-in {
    0%   { opacity: 0; transform: translateY(20px) scale(0.8); }
    100% { opacity: 1; transform: translateY(0)   scale(1);    }
}

#info-card {
    position: fixed !important;
    display: none;
    width: 300px;
    max-width: calc(100vw - 16px);
    background: rgba(20, 20, 30, 0.75);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
    overflow: hidden;
    font-family: sans-serif;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 1000 !important;
    transform-origin: top left;
}

#info-card.visible {
    animation: tooltip-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (max-width: 480px) {
    #info-card {
        width: calc(100vw - 16px);
    }

    .card-header {
        font-size: 14px;
        padding: 12px;
    }

    .card-body {
        font-size: 13px;
        padding: 12px;
    }
}

        /* The Header Style */
        .card-header {
    color: rgb(216, 221, 231);
            padding: 20px 15px;
            font-weight: bold;
            font-size: 16px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            font-family: 'Segoe UI', sans-serif;
        }

        /* The Body Style */
        .card-body {
            padding: 15px;
            color: rgb(183, 186, 201);
            font-size: 14px;
            line-height: 1.5;
            max-height: 200px; /* Prevents it from getting too tall */
            overflow-y: auto;   /* Adds scrollbar if text is REALLY long */
            font-family: 'Segoe UI', sans-serif;
        }

        .trigger {
            text-decoration: underline;
        }