.empire-event-hover{
    position:fixed;
    z-index:9999;
    width:min(340px,calc(100vw - 24px));
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transform:translateY(7px);
    transition:
        opacity .14s ease,
        transform .14s ease,
        visibility .14s ease;
}

.empire-event-hover.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.empire-event-hover-card{
    overflow:hidden;
    border-radius:16px;

    border:
        1px solid
        rgba(255,255,255,.30);

    /* Bright red popup */
    background:
        linear-gradient(
            145deg,
            #ff0000,
            #dc0000
        );

    color:#fff;

    box-shadow:
        0 20px 50px
        rgba(220,0,0,.42);
}

/* Bright accent across top */
.empire-event-hover-top{
    height:5px;

    background:
        linear-gradient(
            90deg,
            #ffeb3b,
            #ffffff,
            #ffeb3b
        );
}

.empire-event-hover-body{
    padding:16px 17px;
}

.empire-event-hover-title{
    margin:0 0 12px;
    font-size:16px;
    font-weight:900;
    line-height:1.35;
    color:#ffffff;
}

.empire-event-hover-grid{
    display:grid;
    gap:8px;
}

.empire-event-hover-row{
    display:grid;
    grid-template-columns:22px 1fr;
    gap:8px;
    align-items:start;

    color:#ffffff;

    font-size:12px;
    line-height:1.45;
}

/* White icons against red background */
.empire-event-hover-row i{
    margin-top:2px;
    color:#ffffff;
}

.empire-event-hover-label{
    color:#ffe5e5;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.empire-event-hover-value{
    margin-top:1px;
    color:#ffffff;
    font-weight:700;
}

@media (hover:none),(pointer:coarse){

    .empire-event-hover{
        display:none!important;
    }

}