PerkUnlockResultPanel
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    pointer-events: all;

    .overlay_backdrop
    {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.82);
        pointer-events: all;
    }

    .content_panel
    {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 28px;
        pointer-events: all;
        background-color: rgba(10, 15, 12, 0.96);
        border: 2px solid rgba(100, 220, 160, 0.35);
        border-radius: 10px;
        padding: 32px 40px;
    }

    .header_label
    {
        font-family: 'Inter';
        font-size: 32px;
        font-weight: 700;
        color: rgba(232, 255, 244, 0.95);
        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
        text-align: center;
    }

    .single_card_container
    {
        position: relative;
        align-items: center;
        justify-content: center;
    }

    .dual_card_row
    {
        position: relative;
        flex-direction: row;
        gap: 48px;
        align-items: center;
        justify-content: center;
    }

    .card_wrapper
    {
        position: relative;
        cursor: pointer;
        border-radius: 6px;
        border: 3px solid transparent;

        &:hover
        {
            border-color: rgba(255, 255, 255, 0.25);
        }

        &.selected
        {
            border-color: rgba(100, 220, 160, 0.9);
            box-shadow: 0px 0px 18px rgba(80, 200, 140, 0.55);
        }
    }

    .confirm_button
    {
        font-family: 'Inter';
        font-size: 20px;
        font-weight: 700;
        color: rgba(232, 255, 244, 1);
        background-color: rgba(60, 140, 100, 0.85);
        border: 2px solid rgba(100, 220, 160, 0.6);
        border-radius: 6px;
        padding: 8px 32px;
        cursor: pointer;

        &:hover { background-color: rgba(80, 170, 120, 0.95); }
        &:active { background-color: rgba(50, 110, 80, 1.0); }
    }
}