/* ─── MAP SCREEN ──────────────────────────────────────────────────────────── */
#map-screen {
    /* inset:0 alene fylder #ui-scale-root (fast 640×360-referenceboks) helt
       ud — INGEN vw/vh her, i modsætning til #canvas-container: vw/vh måler
       altid den ægte viewport uanset forælder-transform, hvilket gjorde denne
       skærm kæmpestor og forkert-placeret inde i den skalerede reference. */
    position: fixed;
    inset: 0;
    background: var(--clr-bg);
    background-image: var(--bg-dot-grid);
    background-size: var(--bg-dot-size);
    z-index: 215;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 48px; /* topbar med "SLAMBERZ" er fjernet — den plads den brugte skulle i sig selv give nok luft i bunden til grenene, uden at top-paddingen behøvede sænkes */
    overflow: hidden;
}

.map-inner {
    width: 100%;
    padding: 8px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.map-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.map-caps-count, .map-currency {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.map-currency { color: #000; }

.map-hint {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.04em;
}

/* ── Horisontalt node-sti ─────────────────────────────────────────────────── */
.map-path {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    /* Ingen egen overflow her — #map-screen's overflow:hidden klipper allerede
       vandret hvis nødvendigt. At blande overflow-x:hidden med overflow-y:visible
       gør browseren overflow-y til "auto" (scroll), uanset hvor eksplicit man er —
       det var den reelle synder bag gren-badgene der forsvandt i et scroll-felt. */
    padding: 4px 0 8px;
}

.map-node-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.map-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 64px;
}

.map-node-circle {
    position: relative;
    width: 44.8px;
    height: 44.8px;
    border-radius: 50%;
    border: 4px solid var(--border-subtle);
    background: var(--clr-bg-panel);
    box-shadow: 3px 3px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-muted);
    transition: all 0.2s;
}

/* Reward-upgrade-badge på hovednoden — lilla (samme "særlig belønning"-sprog
   som relic-events) i stedet for grøn, så det ikke læses som "node done" */
.map-node-ts-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--clr-purple);
    border: 2px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #000;
    box-shadow: 1px 1px 0px #000;
    line-height: 1;
}

.map-node.done .map-node-circle {
    border-color: #000;
    color: #000;
    background: var(--clr-bg-darker);
    box-shadow: 2px 2px 0px #000;
}
.map-node.current .map-node-circle {
    border-color: #000;
    border-width: 4px;
    color: #000;
    background: #f5c842;
    box-shadow: var(--shadow-sticker);
    cursor: pointer;
    animation: node-pulse 1.4s ease-in-out infinite;
}
.map-node.current:hover .map-node-circle {
    background: var(--clr-gold-hover);
}
.map-node.locked .map-node-circle {
    opacity: 0.3;
    box-shadow: none;
}

/* ── Boss-node — større, rødt "fare"-tema, identitet altid tydeligt synlig ── */
.map-node--boss .map-node-circle {
    width: 51.2px;
    height: 51.2px;
    font-size: 24px;
    border-color: #7a1f28;
    box-shadow: 3px 3px 0px #4a1015;
}
.map-node--boss.done .map-node-circle {
    border-color: #000;
    background: var(--clr-bg-darker);
}
.map-node--boss.current .map-node-circle {
    border-color: #7a1f28;
    background: #f2c8c8;
    box-shadow: 5px 5px 0px #4a1015;
    animation: boss-node-pulse 1.4s ease-in-out infinite;
}
.map-node--boss.current:hover .map-node-circle {
    background: #f5d8d8;
}
.map-node--boss.locked .map-node-circle {
    opacity: 0.6; /* mere synlig end almindelige locked-noder — identitet skal kunne ses fra start */
    border-color: #7a1f28;
}
@keyframes boss-node-pulse {
    0%, 100% { box-shadow: 5px 5px 0px #4a1015, 0 0 0 0 rgba(122,31,40,0); }
    50%      { box-shadow: 5px 5px 0px #4a1015, 0 0 0 8px rgba(122,31,40,0.3); }
}
.map-node--boss .map-node-name {
    color: #7a1f28;
    font-weight: 800;
}
.map-node--boss.locked .map-node-name { opacity: 0.7; }

.map-node-label { display: none; }
.map-node-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.map-node-score {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-align: center;
}
.map-node-score-val {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #000;
    letter-spacing: -0.01em;
}
.map-node.done .map-node-name    { color: var(--text-secondary); }
.map-node.locked .map-node-name  { color: var(--text-faint); }
.map-node.current .map-node-name { color: #000; font-weight: 800; }

/* ── Relic node ──────────────────────────────────────────────────────────── */
.map-node--relic .map-node-circle {
    border-color: var(--clr-purple);
    color: var(--clr-purple);
    box-shadow: 3px 3px 0px var(--clr-purple-dark);
}
.map-node--relic.done .map-node-circle {
    border-color: var(--clr-purple-dark);
    color: var(--clr-purple-dark);
    background: rgba(185, 133, 255, 0.1);
}
.map-node--relic.current .map-node-circle {
    border-color: var(--clr-purple);
    color: var(--clr-purple);
    background: rgba(185, 133, 255, 0.15);
    box-shadow: 4px 4px 0px var(--clr-purple-dark);
    animation: relic-pulse 1.4s ease-in-out infinite;
}
.map-node-relic-label {
    color: var(--clr-purple);
    font-style: italic;
    font-family: 'Space Grotesk', sans-serif;
}
.map-node--relic.done .map-node-relic-label { color: var(--clr-purple-dark); }

/* ── Forbindelses-linjer ─────────────────────────────────────────────────── */
.map-line {
    width: 22.4px;
    height: 3px;
    background: var(--border-subtle);
    flex-shrink: 0;
}
.map-line.done { background: #000; }

/* ── Trick Shot-gren (pseudo-node) ──────────────────────────────────────────
   Hænger under sin parent-node med en lille lodret streg. Viser ALTID reward-
   ikonet (hvad du får) + et lille badge for udfordringen (hvad du skal gøre) —
   begge kendt på forhånd. Bliver et almindeligt flueben når den er clearet. */
.map-branch {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2px;
    z-index: 1;
}
.map-branch-connector {
    width: 3px;
    height: 12px;
    background: var(--border-subtle);
}
.map-branch-node {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--clr-purple);
    background: rgba(185, 133, 255, 0.15);
    box-shadow: 2px 2px 0px var(--clr-purple-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--clr-purple-dark);
    margin-top: 2px;
}
.map-branch-node.locked {
    opacity: 0.4;
}
.map-branch-node.available {
    box-shadow: var(--shadow-sticker);
    cursor: pointer;
    animation: node-pulse 1.4s ease-in-out infinite;
}
.map-branch-node.available:hover {
    background: rgba(185, 133, 255, 0.3);
}
.map-branch-node.cleared {
    border-color: #000;
    color: #000;
    background: var(--clr-bg-darker);
    box-shadow: 2px 2px 0px #000;
    font-size: 12px;
}

/* Lille badge på grenen der viser selve udfordringens type (◉/↗) */
.map-branch-challenge-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #f5c842;
    border: 2px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
    color: #000;
    line-height: 1;
}

/* ── Map action-bar: "Next" + evt. "Trick Shot" for den aktuelle node ───────
   Fast placeret nederst til venstre (IKKE del af .map-inner's flow) — ellers
   optager den samme vertikale plads som gren-badges under noderne skal bruge. */
.map-action-bar {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 216;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.map-action-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 12px 22px;
    border: 4px solid #000;
    box-shadow: var(--shadow-sticker);
    cursor: pointer;
    transition: box-shadow 0.08s, transform 0.08s;
}
.map-action-btn--next {
    background: #000;
    color: #fff;
    transform: rotate(1deg);
}
.map-action-btn--next:hover:not(:disabled)  { box-shadow: 2px 2px 0px #000; transform: rotate(1deg) translate(2px,2px); }
.map-action-btn--next:active:not(:disabled) { box-shadow: none; transform: rotate(1deg) translate(4px,4px); }
.map-action-btn--next:disabled { opacity: 0.4; cursor: not-allowed; }

/* Peek-mode (map-btn fra shop/battle) — knapperne skal se tydeligt inaktive ud,
   så man ikke tror man kan springe videre/bruge Trick Shot herfra. */
.map-action-bar--peek .map-action-btn {
    filter: grayscale(1);
    opacity: 0.45;
    cursor: not-allowed;
}

.map-action-btn--trickshot {
    background: #f5c842;
    color: #000;
    transform: rotate(-1deg);
}
.map-action-btn--trickshot:hover:not(:disabled)  { box-shadow: 2px 2px 0px #000; transform: rotate(-1deg) translate(2px,2px); }
.map-action-btn--trickshot:active:not(:disabled) { box-shadow: none; transform: rotate(-1deg) translate(4px,4px); }
.map-action-btn--trickshot:disabled { opacity: 0.4; cursor: not-allowed; }
.map-trickshot-cost { font-weight: 800; }

/* ── Start/action-knap (delt med shop) ───────────────────────────────────── */
.map-start-btn {
    padding: 14px 0;
    width: 100%;
    background: #000;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    border: 4px solid #000;
    box-shadow: var(--shadow-raised);
    border-radius: 0;
    cursor: pointer;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: box-shadow 0.08s, transform 0.08s;
}
.map-start-btn:active {
    box-shadow: var(--shadow-pressed);
    transform: translate(3px, 3px);
}