/* ===========================================
   EQ Ninjas — Visual Map
   Used to place navigation elements on images
   =========================================== */

.map-container {
    position: relative;
    align-self: center;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 0;
    box-sizing: border-box;
}

.map {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: bottom;
    min-height: 0;
    overflow: hidden;
}

.map-page-shell {
    width: 100%;
    height: var(--eqn-viewport-height, 100vh);
    max-width: 750px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: min-content minmax(0, 1fr) min-content;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.map-page-shell > .map-container {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.map-belt-cue {
    position: absolute;
    top: clamp(8px, 1.8vmin, 14px);
    left: clamp(8px, 2.2vmin, 16px);
    z-index: 5;
    width: clamp(82px, 21vmin, 124px);
    height: clamp(38px, 10vmin, 54px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 7px;
    border-radius: 8px;
    background: rgba(136, 180, 244, .86);
    border: 2px solid rgba(255, 255, 255, .74);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .24);
    pointer-events: auto;
    box-sizing: border-box;
    appearance: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    font: inherit;
    text-decoration: none;
    overflow: hidden;
}

.map-belt-cue img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
    transform: scale(3);
    transform-origin: center;
}

.activity-belt-cue {
    overflow: hidden;
}

.activity-belt-cue img {
    transform-origin: center;
}

.map-belt-cue:hover,
.map-belt-cue:focus-visible {
    background: rgba(154, 195, 252, .94);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .3);
    transform: translateY(-1px);
}

.map-belt-cue:focus-visible {
    outline: 3px solid rgba(255, 213, 74, .95);
    outline-offset: 2px;
}

.padded > .map-item {
    padding: var(--pad-y) var(--pad-x) !important;
}

/* Optional even spaced style */

.map-container.stacked {
    align-content: center;
    width: 100%;
    height: 100%;
}

.stacked > .map-item {
    position: relative;
    margin-bottom: 40px;
}

.stacked > .map {
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.map-item {
    text-align: center;
    position: absolute;
    z-index: 2;
    /* display: grid; */
    /* grid-template-columns: var(--rail) 1fr; */
    align-items: center;
    background: #ffffffd6;
    border-radius: 999px;
    box-shadow: 0 6px 18px var(--shadow);
    padding: 0;
    gap: var(--gap);
    cursor: pointer;
    outline: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .12s ease;
    
    /* min-height: clamp(64px, 12vmin, 84px); */
    /* width: clamp(150px, 20vw, 180px); */
    width: max-content;

    /* Center anchor */
    left:50%;
    transform:translateX(-50%);
}

.map-item.locked { opacity: .95; cursor: default; background-color: #ffffff94; }
.map-item.earned { border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); background-color: #ffffff; }

.map-item.pulse{
    animation: bdgPulse 1.2s ease-out infinite;
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent),
        0 8px 20px rgba(0,0,0,.18);
    border-color: var(--accent);
}
@keyframes bdgPulse{
    0%{   box-shadow:0 0 0 0   color-mix(in srgb, var(--accent) 45%, transparent); }
    70%{  box-shadow:0 0 0 50px color-mix(in srgb, var(--accent) 0%,  transparent); }
    100%{ box-shadow:0 0 0 0   color-mix(in srgb, var(--accent) 0%,  transparent); }
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
    .bdg-card,.bdg-progress-bar{ transition:none!important; }
    .bdg-card.pulse{ animation:none!important; }
}

.characters-map-overlay {
    max-width: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
}

.logo-map-overlay {
    max-width: 60%;
}

.stacked > .logo-map-overlay {
    max-width: 60%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Sample Positions
.map-item:nth-child(1) { bottom: 6%; left: 45%; }
.map-item:nth-child(2) { bottom: 21%; left: 49%; }
.map-item:nth-child(3) { bottom: 37.5%; left: 53%; }
.map-item:nth-child(4) { bottom: 50%; left: 45%; }
.map-item:nth-child(5) { bottom: 63%; left: 55%; }
.map-item:nth-child(6) { bottom: 74.5%; left: 65%; }
*/

.map-item .am-lockbadge, .map-item .am-checkcard {
    position: absolute;
    top: initial;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
}

.map-page.map-cozy .map-item {
    --pad-x: clamp(10px, 2vmin, 14px);
    --pad-y: clamp(6px, 1.6vmin, 10px);
    --gap: clamp(6px, 1.6vmin, 10px);
    min-height: clamp(58px, 11vmin, 78px);
    min-height: clamp(20px, 9vmin, 50px);
    align-content: center;
}