/* CryptoBound room map matrix — original holographic selector. */
#RoomOptionsMapImage,
#RoomOptionsMapName {
    cursor: pointer !important;
}

#RoomOptionsMapImage {
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

#RoomOptionsMapImage:hover {
    filter: brightness(1.16) saturate(1.18) !important;
    transform: translateY(-1px) scale(1.015) !important;
    box-shadow: inset 0 0 18px rgba(53,245,255,.24), 0 0 22px rgba(53,245,255,.62) !important;
}

#RoomOptionsMapImage:before {
    content: "OPEN MAP MATRIX";
    position: absolute;
    right: 6px;
    bottom: 4px;
    padding: 2px 6px;
    border: 1px solid rgba(120,251,255,.7);
    border-radius: 3px;
    background: rgba(0,11,24,.78);
    color: #d9ffff;
    font: 800 8px/11px Arial,sans-serif;
    letter-spacing: .45px;
    text-shadow: 0 0 6px #24efff;
    z-index: 4;
    pointer-events: none;
}

#dialog_room_options.map-gallery-visible {
    overflow: visible !important;
    z-index: 10000 !important;
}

body.room-map-gallery-open #itemsSelection {
    z-index: 1 !important;
    pointer-events: none !important;
}

/* These rosters are mounted outside the room-options dialog, so their own
 * stacking context can otherwise paint over the map matrix. Keep their state
 * intact, but make them non-visible/non-interactive until the matrix closes. */
body.room-map-gallery-open #friendsList,
body.room-map-gallery-open #guildMembersList,
body.room-map-gallery-open #friendsListExtra {
    visibility: hidden !important;
    pointer-events: none !important;
}

body:has(#RoomOptionsMapGallery.is-open) #itemsSelection {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

#RoomOptionsMapGallery {
    position: absolute;
    left: -30px;
    top: -47px;
    width: 708px;
    height: 482px;
    box-sizing: border-box;
    padding: 13px 14px 11px;
    border: 1px solid rgba(90,244,255,.9);
    border-radius: 13px;
    background:
        radial-gradient(circle at 9% 8%,rgba(34,236,255,.18),transparent 25%),
        radial-gradient(circle at 91% 92%,rgba(255,49,190,.15),transparent 30%),
        linear-gradient(145deg,rgba(4,13,29,.985),rgba(5,29,43,.98) 52%,rgba(17,6,30,.985));
    box-shadow:
        0 24px 54px rgba(0,0,0,.78),
        0 0 0 1px rgba(255,255,255,.09) inset,
        0 0 32px rgba(33,238,255,.43),
        0 0 68px rgba(255,43,191,.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: left center;
    transform: perspective(900px) translateX(-31px) rotateY(-16deg) scale(.93);
    clip-path: polygon(0 10%,0 90%,0 90%,0 10%);
    transition:
        opacity .24s ease,
        transform .42s cubic-bezier(.16,.86,.24,1),
        clip-path .42s cubic-bezier(.16,.86,.24,1),
        visibility 0s linear .42s;
    z-index: 130;
    font-family: Arial,sans-serif;
}

#RoomOptionsMapGallery.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: perspective(900px) translateX(0) rotateY(0) scale(1);
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    transition-delay: 0s;
}

#RoomOptionsMapGallery:before,
#RoomOptionsMapGallery:after {
    content: "";
    position: absolute;
    pointer-events: none;
}

#RoomOptionsMapGallery:before {
    inset: 7px;
    border: 1px solid rgba(88,244,255,.16);
    border-radius: 9px;
    background-image:
        linear-gradient(rgba(91,239,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(91,239,255,.035) 1px,transparent 1px);
    background-size: 22px 22px;
}

#RoomOptionsMapGallery:after {
    left: 12px;
    right: 12px;
    top: 62px;
    height: 1px;
    background: linear-gradient(90deg,transparent,#41f4ff 22%,#ff4bc8 78%,transparent);
    box-shadow: 0 0 10px rgba(65,244,255,.8);
}

.RoomMapGalleryGlow {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 3px;
    overflow: hidden;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg,transparent,#25f3ff,#fff36b,#ff39bd,transparent);
    box-shadow: 0 0 16px #31efff;
}

.RoomMapGalleryGlow:after {
    content: "";
    display: block;
    width: 34%;
    height: 100%;
    background: rgba(255,255,255,.94);
    filter: blur(2px);
    animation: cbMapMatrixScan 2.1s linear infinite;
}

.RoomMapGalleryHeader {
    position: relative;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 44px 0 7px;
    z-index: 3;
}

.RoomMapGalleryHeader strong {
    display: block;
    color: #f5ffff;
    font: 900 21px/21px "Arial Black",Arial,sans-serif;
    letter-spacing: 1.3px;
    text-shadow: 0 0 8px #35edff,0 0 17px rgba(255,57,189,.5),0 2px 0 #000;
}

.RoomMapGalleryHeader span {
    display: block;
    margin-top: 3px;
    color: #79eefa;
    font: 700 9px/11px Arial,sans-serif;
    letter-spacing: .65px;
    text-transform: uppercase;
}

#RoomOptionsMapGalleryCurrent {
    max-width: 210px;
    padding: 6px 12px;
    overflow: hidden;
    border: 1px solid rgba(255,232,92,.72);
    border-radius: 999px;
    background: linear-gradient(180deg,rgba(255,227,72,.16),rgba(255,91,36,.08));
    box-shadow: inset 0 0 9px rgba(255,227,72,.12),0 0 12px rgba(255,227,72,.2);
    color: #fff06a;
    font: 900 11px/12px Arial,sans-serif;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 0 7px rgba(255,224,59,.8),0 1px 0 #000;
}

#RoomOptionsMapGalleryClose {
    position: absolute;
    right: 1px;
    top: 7px;
    width: 29px;
    height: 29px;
    padding: 0;
    border: 1px solid rgba(255,94,155,.82);
    border-radius: 50%;
    background: linear-gradient(180deg,rgba(255,61,127,.92),rgba(116,9,55,.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.38),0 0 12px rgba(255,53,121,.55);
    color: white;
    cursor: pointer;
    font: 900 22px/25px Arial,sans-serif;
    text-shadow: 0 1px 0 #000;
    transition: transform .15s ease,filter .15s ease;
}

#RoomOptionsMapGalleryClose:hover {
    transform: rotate(7deg) scale(1.08);
    filter: brightness(1.18);
}

#RoomOptionsMapGalleryGrid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    grid-auto-rows: 45px;
    gap: 6px;
    height: 370px;
    padding: 9px 5px 6px;
    box-sizing: border-box;
    overflow: hidden;
}

.RoomMapGalleryCard {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 3px;
    overflow: hidden;
    border: 1px solid rgba(80,213,235,.48);
    border-radius: 7px;
    background: linear-gradient(180deg,rgba(19,55,75,.94),rgba(5,16,30,.98));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 3px 8px rgba(0,0,0,.46);
    color: #d8fbff;
    cursor: pointer;
    opacity: 0;
    transform: translateX(-16px) translateY(7px) scale(.86) rotate(-2deg);
    transition: border-color .14s ease,box-shadow .14s ease,filter .14s ease,transform .14s ease;
}

#RoomOptionsMapGallery.is-open .RoomMapGalleryCard {
    animation: cbMapCardArrive .35s cubic-bezier(.16,.86,.24,1) forwards;
    animation-delay: calc(var(--map-order) * 17ms + 90ms);
}

.RoomMapGalleryCard:hover {
    z-index: 5;
    border-color: rgba(84,249,255,.96);
    box-shadow: inset 0 0 10px rgba(53,245,255,.16),0 0 13px rgba(53,245,255,.65),0 5px 10px rgba(0,0,0,.6);
    filter: brightness(1.18) saturate(1.16);
    transform: translateY(-2px) scale(1.045) !important;
}

.RoomMapGalleryThumb {
    position: relative;
    display: block;
    width: 86px;
    height: 21px;
    margin: 0 auto 2px;
    border-radius: 3px;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

.RoomMapGalleryThumb:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg,rgba(255,255,255,.17),transparent 40%,rgba(42,237,255,.08));
}

/* Compact catalog number: it sits over the lower-left of the thumbnail so
 * the artwork remains visible and it never intercepts the card click. */
.RoomMapGalleryId {
    position: absolute;
    right: 5px;
    top: 5px;
    min-width: 11px;
    height: 11px;
    padding: 0 2px;
    box-sizing: border-box;
    border: 1px solid rgba(177,249,255,.94);
    border-radius: 2px;
    background: rgba(1,16,31,.9);
    box-shadow: 0 0 5px rgba(38,235,255,.72);
    color: #f4ffff;
    font: 900 7px/10px Arial,sans-serif;
    text-align: center;
    text-shadow: 0 0 4px #21eaff;
    pointer-events: none;
    z-index: 4;
}

.RoomMapGalleryCard.is-selected .RoomMapGalleryId {
    right: 5px;
    border-color: #fff06a;
    color: #fff7af;
    box-shadow: 0 0 5px rgba(255,231,77,.8);
}

.RoomMapGalleryName {
    display: block;
    width: 100%;
    overflow: hidden;
    color: inherit;
    font: 800 9px/13px Arial,sans-serif;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 1px #000,0 0 4px rgba(64,235,255,.5);
}

.RoomMapGalleryCard.is-locked .RoomMapGalleryName {
    transform: translateX(-3px);
}

.RoomMapGalleryCard.is-locked:after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 1px;
    width: 14px;
    height: 14px;
    background: url("/static/images/maps_locked.png") center/14px 14px no-repeat;
    filter: drop-shadow(0 0 2px rgba(255,215,52,.62));
    pointer-events: none;
    z-index: 4;
}

.RoomMapGalleryState {
    position: absolute;
    right: 3px;
    top: 3px;
    min-width: 0;
    padding: 1px 3px;
    border-radius: 3px;
    color: #07121d;
    font: 900 6px/8px Arial,sans-serif;
    letter-spacing: .2px;
}

.RoomMapGalleryCard.is-selected {
    border-color: #fff16a;
    background: linear-gradient(180deg,rgba(62,79,35,.96),rgba(22,25,18,.98));
    box-shadow: inset 0 0 12px rgba(255,232,72,.18),0 0 13px rgba(255,232,72,.64),0 4px 9px rgba(0,0,0,.58);
    color: #fff493;
}

.RoomMapGalleryCard.is-selected:before {
    content: "✓";
    position: absolute;
    left: 4px;
    top: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff066;
    box-shadow: 0 0 8px #ffe84a;
    color: #172300;
    font: 900 9px/13px Arial,sans-serif;
    text-align: center;
    z-index: 3;
}

.RoomMapGalleryCard.is-confirming {
    animation: cbMapChosen .23s ease both !important;
}

.RoomMapGalleryCard.is-locked .RoomMapGalleryThumb {
    filter: grayscale(.82) brightness(.54);
}

.RoomMapGalleryCard.is-locked {
    cursor: not-allowed !important;
}

.RoomMapGalleryCard.is-locked * {
    cursor: not-allowed !important;
}

.RoomMapGalleryCard.is-locked .RoomMapGalleryState {
    background: #ffdf55;
}

.RoomMapGalleryCard.is-mode-disabled {
    opacity: .38 !important;
    filter: grayscale(.86);
}

.RoomMapGalleryCard.is-mode-disabled .RoomMapGalleryState {
    background: #ff6c8e;
}

#RoomOptionsMapGallery footer {
    position: relative;
    z-index: 3;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7px;
    border-top: 1px solid rgba(72,227,245,.17);
    color: #78cdd9;
    font: 700 9px/26px Arial,sans-serif;
    letter-spacing: .15px;
}

.RoomMapGalleryLegend {
    color: #fff08a;
}

.RoomMapGalleryLegend i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: #fff06a;
    box-shadow: 0 0 7px #ffe84a;
}

@keyframes cbMapMatrixScan {
    from { transform: translateX(-120%); }
    to { transform: translateX(400%); }
}

@keyframes cbMapCardArrive {
    to {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1) rotate(0);
    }
}

@keyframes cbMapChosen {
    0% { transform: scale(1); }
    52% { transform: scale(1.12); filter: brightness(1.5); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    #RoomOptionsMapGallery,
    .RoomMapGalleryCard,
    .RoomMapGalleryGlow:after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
    #RoomOptionsMapGallery.is-open .RoomMapGalleryCard {
        opacity: 1;
        transform: none;
    }
}