/* ============================================
   GLOBAL OVERLAY SYSTEM — SHADOWMERE STYLE
   (FULLSCREEN-SAFE VERSION)
   ============================================ */

/* Fullscreen dark veil */
.overlay-veil {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    background: rgba(5, 5, 10, 0.85);
    backdrop-filter: blur(4px);

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out;

    z-index: 9000;
}

.overlay-veil.active {
    opacity: 1;
    pointer-events: all;
}

/* ============================================
   PANEL — NOW FULLSCREEN SAFE
   ============================================ */

.overlay-panel {
    /* FULLSCREEN FIX */
    width: 100vw;
    height: 100vh;

    /* Shadowmere styling preserved */
    background: rgba(20, 20, 30, 0.92);
    border: 2px solid #5a2ea6;
    border-radius: 0;

    padding: 0;
    margin: 0;

    box-shadow: 0 0 25px #2a0f4d;

    /* No transform animation — prevents clipping */
    opacity: 1;
    transform: none;

    /* CRITICAL FIX: allow canvas to fill */
    overflow: visible;
    position: relative;
}

.overlay-panel.active {
    opacity: 1;
    transform: none;
}

/* ============================================
   CLOSE BUTTON
   ============================================ */

.overlay-close {
    position: absolute;
    top: 18px;
    right: 22px;

    font-size: 22px;
    color: #c9b3ff;

    cursor: pointer;
    transition: 0.2s;
    z-index: 9999;
}

.overlay-close:hover {
    color: #ffffff;
    text-shadow: 0 0 8px #8a5cff;
}