/* F2AS — Unlock card neon grid + clean lock + row bottom alignment
   Scope: desktop frontend only. Keeps Want to see all data aligned with the ranking panels. */
.lcpi-front-desktop .lcpi-content-grid .lcpi-rank-panel,
.lcpi-front-desktop .lcpi-rightbar .lcpi-unlock.lcpi-panel {
    box-sizing: border-box !important;
}

.lcpi-front-desktop .lcpi-rightbar .lcpi-unlock.lcpi-panel {
    position: relative !important;
    min-height: 162px !important;
    height: 162px !important;
    padding: 17px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 78% 28%, rgba(83, 219, 255, .16) 0 7%, transparent 34%),
        radial-gradient(circle at 92% 86%, rgba(255, 201, 94, .24) 0 8%, transparent 32%),
        radial-gradient(circle at 20% 8%, rgba(171, 74, 255, .20) 0 6%, transparent 31%),
        linear-gradient(135deg, rgba(10, 22, 55, .97), rgba(13, 11, 42, .98) 55%, rgba(31, 11, 59, .96)) !important;
    border-color: rgba(125, 75, 255, .55) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        inset 0 -28px 64px rgba(134, 41, 255, .15),
        0 18px 42px rgba(24, 8, 61, .22) !important;
}

.lcpi-front-desktop .lcpi-rightbar .lcpi-unlock.lcpi-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .42;
    background-image:
        linear-gradient(rgba(65, 213, 255, .15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(178, 79, 255, .14) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.72) 44%, rgba(0,0,0,.36));
}

.lcpi-front-desktop .lcpi-rightbar .lcpi-unlock.lcpi-panel::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 5px;
    width: 118px;
    height: 118px;
    border-radius: 999px;
    pointer-events: none;
    background:
        radial-gradient(circle, rgba(255, 214, 121, .36) 0 11%, rgba(179, 72, 255, .20) 34%, transparent 68%);
    filter: blur(.6px);
    opacity: .95;
}

.lcpi-front-desktop .lcpi-rightbar .lcpi-unlock > div {
    min-width: 0 !important;
    max-width: calc(100% - 94px) !important;
    position: relative !important;
    z-index: 2 !important;
}

.lcpi-front-desktop .lcpi-rightbar .lcpi-unlock h3 {
    margin: 0 0 5px !important;
    font-size: 17px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
    color: rgba(244, 247, 255, .97) !important;
    text-shadow: 0 0 18px rgba(108, 92, 255, .24) !important;
}

.lcpi-front-desktop .lcpi-rightbar .lcpi-unlock p {
    margin: 0 0 10px !important;
    max-width: 238px !important;
    font-size: 11.6px !important;
    line-height: 1.24 !important;
    color: rgba(226, 232, 255, 0.70) !important;
}

.lcpi-front-desktop .lcpi-rightbar .lcpi-unlock .lcpi-btn {
    min-height: 33px !important;
    height: 33px !important;
    padding: 0 15px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 33px !important;
    white-space: nowrap !important;
    box-shadow: 0 0 18px rgba(178, 74, 255, .34) !important;
}

.lcpi-front-desktop .lcpi-rightbar .lcpi-unlock img {
    position: absolute !important;
    right: 16px !important;
    bottom: 11px !important;
    width: 76px !important;
    max-width: 24% !important;
    height: auto !important;
    max-height: 88px !important;
    object-fit: contain !important;
    z-index: 2 !important;
    opacity: .96 !important;
    filter:
        drop-shadow(0 0 12px rgba(255, 206, 97, .60))
        drop-shadow(0 0 20px rgba(176, 73, 255, .28)) !important;
    transform: translateZ(0) !important;
}

@media (min-width: 1281px) {
    .lcpi-front-desktop .lcpi-rightbar .lcpi-unlock.lcpi-panel {
        min-height: 162px !important;
        height: 162px !important;
    }
}

@media (min-width: 1101px) and (max-width: 1280px) {
    .lcpi-front-desktop .lcpi-rightbar .lcpi-unlock.lcpi-panel {
        min-height: 150px !important;
        height: 150px !important;
        padding: 14px 16px !important;
    }
    .lcpi-front-desktop .lcpi-rightbar .lcpi-unlock > div {
        max-width: calc(100% - 82px) !important;
    }
    .lcpi-front-desktop .lcpi-rightbar .lcpi-unlock h3 {
        font-size: 16px !important;
    }
    .lcpi-front-desktop .lcpi-rightbar .lcpi-unlock p {
        font-size: 11.2px !important;
        max-width: 210px !important;
    }
    .lcpi-front-desktop .lcpi-rightbar .lcpi-unlock img {
        width: 68px !important;
        right: 13px !important;
        bottom: 10px !important;
    }
}

@media (max-width: 1100px) {
    .lcpi-front-desktop .lcpi-rightbar .lcpi-unlock.lcpi-panel {
        height: auto !important;
        min-height: 110px !important;
    }
    .lcpi-front-desktop .lcpi-rightbar .lcpi-unlock img {
        bottom: 8px !important;
    }
}