/* Radar HUD skin: keeps the live #radar-canvas functional and decorates only the shell. */

.room-list-btn.ui {
    --radar-hud-right: 6px;
    --radar-hud-bottom: 6px;
    --radar-hud-size-min: 134px;
    --radar-hud-size-fluid: 14vw;
    --radar-hud-size-max: 239px;
    --radar-hud-tablet-size: 132px;
    --radar-hud-mobile-size: 118px;
    position: fixed;
    right: var(--radar-hud-right);
    bottom: var(--radar-hud-bottom);
    z-index: 920;
    width: clamp(var(--radar-hud-size-min), var(--radar-hud-size-fluid), var(--radar-hud-size-max));
    height: clamp(var(--radar-hud-size-min), var(--radar-hud-size-fluid), var(--radar-hud-size-max));
    cursor: pointer;
    pointer-events: auto;
    transform: translateZ(0);
    transition: transform 0.18s ease, filter 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.radar-hud-shell {
    --radar-canvas-x: 51.6%;
    --radar-canvas-y: 62.2%;
    --radar-canvas-size: 65.5%;
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
    border-radius: 50%;
}

.radar-hud-shell::before {
    content: "";
    position: absolute;
    inset: 16%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(93, 234, 255, 0.24), rgba(2, 17, 23, 0.7) 62%, transparent 74%);
    filter: blur(10px);
    opacity: 0.84;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.radar-hud-frame,
.radar-hud-glass,
.radar-canvas-class {
    position: absolute;
    display: block;
}

.radar-hud-frame {
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        drop-shadow(0 10px 18px rgba(0, 0, 0, 0.52))
        drop-shadow(0 0 12px rgba(83, 226, 255, 0.2));
    pointer-events: none;
}

.radar-canvas-class {
    left: var(--radar-canvas-x);
    top: var(--radar-canvas-y);
    z-index: 2;
    width: var(--radar-canvas-size);
    height: var(--radar-canvas-size);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    background: rgba(1, 18, 22, 0.22);
}

.radar-hud-glass {
    left: var(--radar-canvas-x);
    top: var(--radar-canvas-y);
    width: var(--radar-canvas-size);
    height: var(--radar-canvas-size);
    transform: translate(-50%, -50%);
    z-index: 3;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.18), transparent 17%),
        linear-gradient(125deg, rgba(255, 255, 255, 0.16) 0%, transparent 22%, transparent 100%);
    box-shadow:
        inset 0 0 20px rgba(111, 239, 255, 0.12),
        inset 0 0 2px rgba(190, 255, 255, 0.28);
    mix-blend-mode: screen;
    opacity: 0.58;
    pointer-events: none;
}

.room-list-btn.ui:hover {
    transform: translateY(-2px) scale(1.025);
    filter: brightness(1.08);
}

.room-list-btn.ui:hover .radar-hud-shell::before {
    opacity: 1;
    transform: scale(1.08);
}

.room-list-btn.ui:active {
    transform: translateY(1px) scale(0.985);
}

.room-list-btn.ui:focus-visible {
    outline: 2px solid rgba(244, 255, 248, 0.9);
    outline-offset: 5px;
}

.radar-hud-shell .radar-canvas-class.radar-glowing {
    animation: radarHudPulse 900ms ease-in-out infinite;
}

.radar-hud-shell .radar-canvas-class.radar-glowing + .radar-hud-glass {
    opacity: 0.86;
}

body.map-overlay-open .room-list-btn.ui {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@keyframes radarHudPulse {
    0%, 100% {
        box-shadow: 0 0 0 rgba(114, 237, 255, 0);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 18px rgba(114, 237, 255, 0.44);
        filter: brightness(1.18);
    }
}

@media (max-width: 900px) {
    .room-list-btn.ui {
        right: 6px;
        bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        width: var(--radar-hud-tablet-size);
        height: var(--radar-hud-tablet-size);
    }

    .daily-bonus-btn.ui {
        bottom: calc(var(--daily-bonus-tablet-bottom) + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 520px) {
    .room-list-btn.ui {
        width: var(--radar-hud-mobile-size);
        height: var(--radar-hud-mobile-size);
    }

    .daily-bonus-btn.ui {
        bottom: calc(var(--daily-bonus-mobile-bottom) + env(safe-area-inset-bottom, 0px));
    }
}

@media (min-width: 901px) {
    .daily-bonus-btn.ui {
        bottom: var(--daily-bonus-bottom);
    }
}

@media (prefers-reduced-motion: reduce) {
    .room-list-btn.ui,
    .radar-hud-shell::before,
    .radar-hud-shell .radar-canvas-class.radar-glowing {
        animation: none;
        transition: none;
    }

    .room-list-btn.ui:hover,
    .room-list-btn.ui:active {
        transform: none;
    }
}