/* 3D-kloden i "4:20 Global Tracker". Indlæses efter styles.css og overstyrer kun kort-delen. */

.map-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.d3-map-container {
    background:
        radial-gradient(70% 60% at 50% 55%, rgba(242, 166, 60, 0.10), transparent 70%),
        radial-gradient(120% 100% at 50% 100%, #0e2410 0%, #07140a 55%, #040a04 100%);
    border: 1px solid rgba(243, 217, 166, 0.22);
    border-radius: 6px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        inset 0 0 120px rgba(0, 0, 0, 0.6);
    min-height: 0;
    overflow: hidden;
}

.d3-map-container svg {
    width: 100%;
    height: min(72vh, 660px);
    display: block;
    cursor: grab;
    touch-action: pan-y;            /* vandret træk drejer kloden, lodret træk ruller siden */
    user-select: none;
    -webkit-user-select: none;
    background: transparent;
}
.d3-map-container svg.traekker { cursor: grabbing; }

/* Lag */
.klode-hav { stroke: rgba(242, 166, 60, 0.35); stroke-width: 1; }
.graticule { fill: none; stroke: rgba(243, 233, 208, 0.07); stroke-width: 0.5; }
.country {
    stroke: rgba(12, 29, 9, 0.9);
    stroke-width: 0.45;
    stroke-linejoin: round;
    transition: fill 1.2s ease;
}
.country:hover { stroke: #f2a63c; stroke-width: 1; }
.klode-kyst { fill: none; stroke: rgba(243, 217, 166, 0.22); stroke-width: 0.5; pointer-events: none; }
.klode-skumring { fill: rgba(242, 166, 60, 0.20); pointer-events: none; }
.klode-nat { fill: rgba(3, 9, 3, 0.62); pointer-events: none; }
.klode-halo { pointer-events: none; }

.city-dot { transition: r 0.15s ease; }
.city-label {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    fill: #f6c56f;
    paint-order: stroke;
    stroke: rgba(7, 20, 10, 0.95);
    stroke-width: 4px;
    stroke-linejoin: round;
    pointer-events: none;
}
.city-group.is-420 .city-label { fill: #ffb08f; }

/* Paneler */
.map-info-panel {
    background: rgba(18, 40, 15, 0.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(243, 217, 166, 0.18);
    border-left: 6px solid #f2a63c;
    border-radius: 6px;
}
.map-legend {
    background: rgba(18, 40, 15, 0.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(243, 217, 166, 0.18);
    border-radius: 6px;
}
.map-controls button {
    background: rgba(18, 40, 15, 0.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.map-tooltip { pointer-events: none; }

/* Natlinjen forklaret, lille note under legenden */
.map-legend .legend-note {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(243, 217, 166, 0.14);
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    line-height: 1.4;
    color: #a9c2a0;
    max-width: 180px;
}

@media (max-width: 768px) {
    .d3-map-container { display: flex; flex-direction: column; }
    .d3-map-container svg { order: -1; height: min(62vh, 460px); }
    .map-controls { top: 10px; right: 10px; }
    .map-info-panel {
        position: static;
        margin: 0 10px 10px;
        min-width: 0;
        padding: 0.85rem 1rem;
        width: auto;
    }
    .map-legend {
        position: static;
        margin: 0 10px 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 0.9rem;
        align-items: center;
        width: auto;
    }
    .map-legend .legend-title { display: block; width: 100%; margin-bottom: 0.1rem; }
    .map-legend .legend-item span:last-child { display: inline; }
    .map-legend .legend-note { width: 100%; max-width: none; margin-top: 0.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .country { transition: none; }
}

/* ---------- WebGL-kloden (globe3d.js) ---------- */
.klode-gl, .klode-labels { display: none; }
.d3-map-container.gl-aktiv svg#worldMapSvg { display: none; }
.d3-map-container.gl-aktiv .klode-gl {
    display: block;
    width: 100%;
    height: min(72vh, 660px);
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    opacity: 0;
    transition: opacity 0.9s ease;
}
.d3-map-container.gl-aktiv .klode-gl.klar { opacity: 1; }
.d3-map-container.gl-aktiv .klode-gl.traekker { cursor: grabbing; }
.d3-map-container.gl-aktiv .klode-labels {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}
.klode-label {
    position: absolute;
    left: 0; top: 0;
    transform: translate(-9999px, -9999px);
    margin: -30px 0 0 0;
    translate: -50% 0;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: #f6c56f;
    background: rgba(7, 20, 10, 0.78);
    border: 1px solid rgba(242, 166, 60, 0.35);
    padding: 3px 7px;
    border-radius: 3px;
    transition: opacity 0.25s ease;
    will-change: transform;
}
.klode-label.is-420 { color: #ffb08f; border-color: rgba(227, 79, 43, 0.6); }
.klode-label.is-hover { color: #f3e9d0; }
@media (max-width: 768px) {
    .d3-map-container.gl-aktiv .klode-gl { order: -1; height: min(62vh, 460px); }
}

/* ---------- Runde 2: fuld bredde, lette paneler, ankomst ---------- */
.map-section { max-width: none; padding: 5rem 0 3.5rem; }
.map-section .map-header { padding: 0 2rem; }
.d3-map-container {
    border: 0;
    border-radius: 0;
    border-top: 1px solid rgba(243, 217, 166, 0.14);
    border-bottom: 1px solid rgba(243, 217, 166, 0.14);
    box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.7);
    background:
        radial-gradient(60% 55% at 50% 60%, rgba(242, 166, 60, 0.07), transparent 70%),
        radial-gradient(120% 100% at 50% 100%, #0a1d0d 0%, #05110a 55%, #020702 100%);
}
.d3-map-container.gl-aktiv .klode-gl { height: min(84vh, 780px); }

.map-info-panel {
    top: 32px;
    left: max(24px, 4vw);
    min-width: 0;
    max-width: 360px;
    padding: 1rem 2.75rem 1.1rem 1.25rem;
    background: linear-gradient(90deg, rgba(4, 12, 6, 0.86) 0%, rgba(4, 12, 6, 0.55) 70%, rgba(4, 12, 6, 0) 100%);
    border: 0;
    border-left: 2px solid #f2a63c;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: opacity 0.9s ease 0.4s, transform 0.9s ease 0.4s;
}
.map-info-title { font: 400 0.66rem/1 'Space Mono', monospace; letter-spacing: 0.2em; text-transform: uppercase; color: #a9c2a0; margin-bottom: 0.55rem; }
.map-info-city { font-family: 'Alfa Slab One', serif; font-weight: 400; font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.05; color: #f3e9d0; margin-bottom: 0.15rem; text-wrap: balance; }
.map-info-timezone { font: 400 0.8rem/1.3 'Space Mono', monospace; color: #a9c2a0; }
.map-info-time { font: 400 1rem/1.3 'Space Mono', monospace; color: #f6c56f; margin-top: 0.35rem; font-variant-numeric: tabular-nums; }
.map-info-countdown { margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid rgba(243, 217, 166, 0.16); }
.map-info-countdown-label { font: 400 0.66rem/1 'Space Mono', monospace; letter-spacing: 0.2em; text-transform: uppercase; color: #a9c2a0; margin-bottom: 0.25rem; }
.map-info-countdown-value { font: 400 clamp(1.9rem, 3vw, 2.7rem)/1 'Alfa Slab One', serif; color: #f2a63c; font-variant-numeric: tabular-nums; }

.map-legend {
    left: max(24px, 4vw);
    right: auto;
    bottom: 26px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.1rem;
    max-width: 560px;
    transition: opacity 0.9s ease 0.7s;
}
.map-legend .legend-title { width: auto; margin: 0 0.5rem 0 0; font: 400 0.66rem/1 'Space Mono', monospace; letter-spacing: 0.2em; text-transform: uppercase; color: #a9c2a0; }
.map-legend .legend-item { display: flex; align-items: center; gap: 0.45rem; margin: 0; font: 500 0.82rem/1 'Bitter', Georgia, serif; color: #d7e6cf; }
.map-legend .legend-color { width: 10px; height: 10px; border-radius: 50%; border: 0; flex: none; }
.map-legend .legend-note { width: 100%; max-width: 520px; margin: 0.35rem 0 0; padding: 0; border: 0; font-size: 0.7rem; line-height: 1.45; color: #7f9a78; }

.map-controls { top: 32px; right: max(24px, 4vw); gap: 6px; }
.map-controls button {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(4, 12, 6, 0.6);
    border: 1px solid rgba(243, 217, 166, 0.22);
    color: #f3e9d0;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.map-controls button:hover { border-color: #f2a63c; color: #f2a63c; background: rgba(4, 12, 6, 0.85); }

.d3-map-container.gl-aktiv .klode-labels { transition: opacity 0.6s ease 0.6s; }
.d3-map-container.gl-aktiv:not(.ankommet) .map-info-panel,
.d3-map-container.gl-aktiv:not(.ankommet) .map-legend,
.d3-map-container.gl-aktiv:not(.ankommet) .klode-labels { opacity: 0; }
.d3-map-container.gl-aktiv:not(.ankommet) .map-info-panel { transform: translateX(-14px); }

.active-zones-container { background: none; border: 0; border-radius: 0; padding: 1.75rem 2rem 0; margin-top: 0; }

@media (max-width: 768px) {
    .map-section .map-header { padding: 0 1.25rem; }
    .map-info-panel { background: rgba(4, 12, 6, 0.55); padding: 0.9rem 1rem 1rem 1.1rem; max-width: none; margin: 0 12px 12px; transform: none; }
    .d3-map-container.gl-aktiv:not(.ankommet) .map-info-panel { transform: none; }
    .map-legend { margin: 0 12px 14px; max-width: none; }
    .map-controls { top: 12px; right: 12px; }
    .d3-map-container.gl-aktiv .klode-gl { height: min(64vh, 480px); }
}

/* ---------- Runde 3: fejring – folketæller, afgangstavle, toast, deling ---------- */
.active-zones-container { display: none; }

.fejring {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2.5rem 2rem 0;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr);
    gap: 2.5rem 3.5rem;
    align-items: start;
}
.fejring-nu { display: grid; gap: 0.35rem; min-width: 0; }
.fejring-label { font: 400 0.72rem/1.4 'Space Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: #a9c2a0; }
.fejring-tal {
    font: 400 clamp(3rem, 6.5vw, 5.6rem)/0.95 'Alfa Slab One', serif;
    color: #f2a63c;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
.fejring-nu.er-nu .fejring-tal { color: #ff8a5c; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 0 40px rgba(227, 79, 43, 0.45); }
.fejring-tal.skift { animation: fejrSkift 0.7s ease-out; }
@keyframes fejrSkift { 0% { transform: translateY(8px); opacity: 0.2; } 100% { transform: none; opacity: 1; } }
.fejring-under { font: 500 1.02rem/1.45 'Bitter', Georgia, serif; color: #d7e6cf; max-width: 32ch; text-wrap: pretty; }
.fejring-siden { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid rgba(243, 217, 166, 0.16); font: 500 0.9rem/1.5 'Bitter', Georgia, serif; color: #a9c2a0; max-width: 36ch; }
.fejring-siden b { color: #f3e9d0; font-family: 'Space Mono', monospace; font-weight: 700; font-variant-numeric: tabular-nums; }
.fejring-del {
    justify-self: start;
    margin-top: 1.1rem;
    font: 700 0.8rem/1 'Space Mono', monospace;
    letter-spacing: 0.06em;
    color: #12280f;
    background: #f2a63c;
    border: 0;
    border-radius: 4px;
    padding: 0.8rem 1.15rem;
    box-shadow: 0 4px 0 #a86a14;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s, box-shadow 0.1s;
}
.fejring-del:hover { background: #f6c56f; }
.fejring-del:active { transform: translateY(2px); box-shadow: 0 2px 0 #a86a14; }
.fejring-del.ok { background: #7fae5e; box-shadow: 0 4px 0 #3f6a2a; }
.fejring-del:focus-visible { outline: 3px solid #f6c56f; outline-offset: 3px; }

.fejring-tavle-wrap { min-width: 0; }
.fejring-tavle-hoved, .fejring-rk {
    display: grid;
    grid-template-columns: 6.5rem 4.5rem minmax(0, 1fr) 12rem;
    gap: 1rem;
    align-items: center;
    padding: 0.7rem 0.25rem;
}
.fejring-tavle-hoved { font: 400 0.66rem/1 'Space Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: #7f9a78; border-bottom: 1px solid rgba(243, 217, 166, 0.18); padding-bottom: 0.6rem; }
.fejring-rk { border-bottom: 1px solid rgba(243, 217, 166, 0.08); font-variant-numeric: tabular-nums; transition: background 0.4s; }
.fejring-rk .om { font: 700 1rem/1.2 'Space Mono', monospace; color: #f2a63c; white-space: nowrap; }
.fejring-rk .kl { font: 400 0.85rem/1.2 'Space Mono', monospace; color: #a9c2a0; }
.fejring-rk .hvem { font: 700 0.95rem/1.3 'Bitter', Georgia, serif; color: #f3e9d0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fejring-rk .hvem small { font-weight: 500; color: #a9c2a0; }
.fejring-rk .hvem em { display: block; font: 400 0.72rem/1.3 'Space Mono', monospace; font-style: normal; color: #7f9a78; }
.fejring-rk .mio { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.6rem; }
.fejring-rk .mio i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #2f5a34, #7fae5e); min-width: 4px; justify-self: start; }
.fejring-rk .mio { grid-template-columns: minmax(0, 1fr) 5.2rem; }
.fejring-rk .mio b { text-align: right; }
.fejring-rk .mio b { font: 700 0.85rem/1 'Space Mono', monospace; color: #d7e6cf; white-space: nowrap; }
.fejring-rk.naeste .om { color: #f6c56f; }
.fejring-rk.naeste .mio i { background: linear-gradient(90deg, #ec6b34, #f2a63c); }
.fejring-rk.nu { background: linear-gradient(90deg, rgba(227, 79, 43, 0.18), transparent 70%); }
.fejring-rk.nu .om { color: #ff8a5c; }
.fejring-rk.nu .mio i { background: linear-gradient(90deg, #e34f2b, #ff8a5c); box-shadow: 0 0 10px rgba(227, 79, 43, 0.6); }
.fejring-note { margin: 0.9rem 0 0; font: 400 0.7rem/1.5 'Space Mono', monospace; color: #7f9a78; max-width: 60ch; }

.fejring-toast {
    position: absolute;
    z-index: 8;
    top: 28px; left: 50%;
    transform: translate(-50%, -24px);
    opacity: 0;
    pointer-events: none;
    font: 700 0.9rem/1.3 'Space Mono', monospace;
    color: #12280f;
    background: linear-gradient(180deg, #f6c56f, #f2a63c);
    padding: 0.7rem 1.1rem;
    border-radius: 999px;
    box-shadow: 0 10px 40px rgba(242, 166, 60, 0.35), 0 4px 0 #a86a14;
    white-space: nowrap;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.fejring-toast.vis { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
    .fejring { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1.25rem 0; }
    .fejring-tavle-hoved { display: none; }
    .fejring-rk { grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-areas: "om hvem" "kl mio"; gap: 0.25rem 0.8rem; padding: 0.75rem 0; }
    .fejring-rk .om { grid-area: om; }
    .fejring-rk .kl { grid-area: kl; }
    .fejring-rk .hvem { grid-area: hvem; white-space: normal; }
    .fejring-rk .mio { grid-area: mio; grid-template-columns: 1fr auto; }
    .fejring-toast { top: 14px; font-size: 0.78rem; white-space: normal; text-align: center; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .fejring-tal.skift { animation: none; }
    .fejring-toast { transition: opacity 0.3s; }
}

/* 20/10 (fletning på serveren): «Prøv igen»-knappen ved kortfejl – før inline style, nu bygget med DOM i globe.js */
.map-error-knap { margin-top: 1rem; padding: 8px 16px; background: var(--green-primary); color: #000; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; }
@media (max-width: 900px) {
    /* 20/10: «1 t 07 min» (Space Mono ≈ 0,6 em pr. tegn ≈ 6,1 rem) løb ind i landenavnet i en 5,5 rem-kolonne – plads til «10 t 00 min» */
    .fejring-rk { grid-template-columns: 6.8rem minmax(0, 1fr); }
}

/* ---------- Runde 4 (20/10, på serveren): ErDet420-stilen – samme sprog som resten af forsiden ----------
   Centreret overskrift med blad-ornament (som Dansk 4:20/Events), grøn nat i stedet for sort, og paneler/fejring som sidens
   kort: mørkegrøn flade, 2 px kant i brandfarve, 6-8 px hjørner og den hårde skygge (--bakke-shadow-hard). */
.map-section::before {
    content: '🌿  ·  🌿  ·  🌿';
    display: block; text-align: center; font-size: 0.8rem; letter-spacing: 4px; color: var(--text-muted); opacity: 0.4; margin-bottom: 1.25rem;
}
.map-section .map-header { text-align: center; margin-bottom: 2.25rem; }
.map-section .section-title, .map-section .section-subtitle { display: block; width: 100%; text-align: center; }
.map-section .section-subtitle { max-width: 52ch; margin-left: auto; margin-right: auto; text-wrap: balance; }

/* Natten er grøn, ikke sort – kloden svæver i samme univers som resten af siden */
.d3-map-container {
    border-top: 2px solid rgba(242, 166, 60, 0.35);
    border-bottom: 2px solid rgba(242, 166, 60, 0.35);
    box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.55);
    background:
        radial-gradient(55% 50% at 50% 55%, rgba(242, 166, 60, 0.09), transparent 70%),
        radial-gradient(120% 100% at 50% 100%, #163019 0%, #0c1d09 55%, #071206 100%);
}

/* Infopanelet som et statuskort */
.map-info-panel {
    padding: 1rem 1.25rem 1.1rem;
    background: rgba(18, 40, 15, 0.92);
    border: 2px solid #f2a63c;
    border-radius: 8px;
    box-shadow: var(--bakke-shadow-hard, 5px 5px 0 rgba(0, 0, 0, 0.4));
}
.map-info-title { font: 700 0.72rem/1 'Space Mono', monospace; letter-spacing: 0.12em; color: #f2a63c; }
.map-info-countdown { border-top: 2px dashed rgba(243, 217, 166, 0.18); }

/* Forklaringen som en lav brik */
.map-legend {
    padding: 0.65rem 0.9rem;
    background: rgba(18, 40, 15, 0.85);
    border: 2px solid rgba(243, 217, 166, 0.22);
    border-radius: 6px;
}
.map-legend .legend-title { color: #f2a63c; font-weight: 700; letter-spacing: 0.12em; }
.map-legend .legend-color { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); }

/* Knapperne: firkantede brikker med hård skygge (som sidens knapper) */
.map-controls { gap: 8px; }
.map-controls button {
    width: 42px; height: 42px; border-radius: 6px;
    background: #12280f;
    border: 2px solid rgba(243, 217, 166, 0.3);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    font: 700 1.15rem/1 'Space Mono', monospace;
    transition: border-color 0.15s, color 0.15s, transform 0.1s, box-shadow 0.1s;
}
.map-controls button:hover { border-color: #f2a63c; color: #f2a63c; background: #12280f; }
.map-controls button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); }
.map-controls button:focus-visible { outline: 3px solid #f6c56f; outline-offset: 2px; }

/* Tooltip og byskilte i samme kortstil */
.map-tooltip { background: #12280f; border: 2px solid #f2a63c; border-radius: 6px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4); }
.klode-label { border-radius: 4px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }

/* Fejringen: to kort side om side – tælleren (rød kant, som "Nu!") og afgangstavlen (amber kant) */
.fejring { padding-top: 3rem; align-items: stretch; }
.fejring-nu, .fejring-tavle-wrap {
    background: #12280f;
    border: 2px solid rgba(243, 217, 166, 0.22);
    border-radius: 8px;
    box-shadow: var(--bakke-shadow-hard, 5px 5px 0 rgba(0, 0, 0, 0.4));
    padding: 1.5rem 1.6rem 1.6rem;
}
.fejring-nu { border-color: #e34f2b; align-content: start; }
.fejring-tavle-wrap { border-color: #f2a63c; }
.fejring-label { color: #f2a63c; font-weight: 700; letter-spacing: 0.12em; }
.fejring-nu.er-nu { background: linear-gradient(160deg, rgba(227, 79, 43, 0.22), #12280f 65%); animation: fejrNuPuls 2.4s ease-in-out infinite; }
@keyframes fejrNuPuls { 0%, 100% { box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(227, 79, 43, 0); } 50% { box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4), 0 0 28px 2px rgba(227, 79, 43, 0.45); } }
.fejring-siden { border-top: 2px dashed rgba(243, 217, 166, 0.16); }
.fejring-tavle-hoved { color: #f2a63c; font-weight: 700; letter-spacing: 0.12em; border-bottom: 2px solid rgba(242, 166, 60, 0.35); }
.fejring-rk:last-child { border-bottom: 0; }
.fejring-rk.naeste { background: rgba(242, 166, 60, 0.07); border-radius: 4px; }
.fejring-note { padding-top: 0.6rem; border-top: 2px dashed rgba(243, 217, 166, 0.12); }

/* Del-knappen som sidens hovedknapper: amber flade, mørk kant, hård skygge */
.fejring-del {
    border: 2px solid #12280f;
    border-radius: 6px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
    padding: 0.85rem 1.25rem;
    font-size: 0.85rem;
}
.fejring-del:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }
.fejring-del.ok { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45); }

/* Toasten over kloden: et skilt, ikke en pille */
.fejring-toast {
    border: 2px solid #12280f;
    border-radius: 6px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45), 0 12px 40px rgba(242, 166, 60, 0.35);
    font: 400 1rem/1.25 'Alfa Slab One', serif;
    letter-spacing: 0.01em;
    padding: 0.75rem 1.2rem;
}

@media (max-width: 900px) {
    .fejring { padding-top: 2rem; gap: 1.5rem; }
    .fejring-nu, .fejring-tavle-wrap { padding: 1.2rem 1.1rem 1.3rem; }
}
@media (max-width: 768px) {
    .map-section::before { margin-bottom: 1rem; }
    .map-info-panel { background: rgba(18, 40, 15, 0.92); padding: 0.9rem 1.1rem 1rem; }
    .map-controls button { width: 40px; height: 40px; }
    .fejring-toast { font-size: 0.88rem; border-radius: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .fejring-nu.er-nu { animation: none; }
}
/* 20/10: i kortet brækkede «89 mio.» over to linjer på computer – én linje, lidt mindre */
.fejring-tal { font-size: clamp(2.6rem, 4.6vw, 4.4rem); white-space: nowrap; }

/* ---------- Lovligt-kortet (nyheder fase 2, 4/11 2026): omskifter, statusfarver, forklaring, stedliste og panel ----------
   Farverne er den ene sandhed: js/lovligt-kort.js læser --lk-* herfra og giver dem til kloden, så forklaring og lande altid
   er ens. Valgt til den mørke klode (hav #0a1e0d): grøn = lovligt, lime = delvist (delstater), gul = afkriminaliseret,
   blå = forsøg, laks = ikke lovligt, mat grøn = ikke kontrolleret. Mørk tekst på alle brikker ≥ 4,5:1. */
.d3-map-container {
    --lk-lovligt: #43d17a;
    --lk-delvist: #b7e05a;
    --lk-afkriminaliseret: #f0c050;
    --lk-forsoeg: #5bb5f0;
    --lk-ikke-lovligt: #e07b72;
    --lk-ukendt: #39503e;
}
/* .map-legend har display:flex i reglerne ovenfor – det slog [hidden] ud. */
.map-legend[hidden], .lovligt-panel[hidden] { display: none !important; }
/* Forklaringen må ikke løbe ind under panelet til højre på mellemstore skærme (review 4/11: ved 1024 px rørte den stadig panelet) */
.d3-map-container.lovligt-kort .map-legend--lovligt { max-width: min(560px, 50%, calc(100% - min(380px, 40%) - 2 * max(24px, 4vw) - 74px)); }

.klode-skift {
    display: inline-flex;
    margin: 1.1rem auto 0;
    background: #12280f;
    border: 2px solid rgba(243, 217, 166, 0.3);
    border-radius: 6px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
.klode-skift-knap {
    font: 700 0.8rem/1 'Space Mono', monospace;
    letter-spacing: 0.06em;
    padding: 0.75rem 1rem;
    color: #d7e6cf;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.klode-skift-knap + .klode-skift-knap { border-left: 2px solid rgba(243, 217, 166, 0.3); }
.klode-skift-knap:hover { color: #f2a63c; }
.klode-skift-knap.aktiv { background: #f2a63c; color: #12280f; }
.klode-skift-knap:focus-visible { outline: 3px solid #f6c56f; outline-offset: -3px; }
.klode-skift.henter .klode-skift-knap.aktiv { opacity: 0.7; }

/* I Lovligt-kort-visningen træder statuspanelet i stedet for «Næste 4:20»-kortet (samme plads) */
.d3-map-container.lovligt-kort .map-info-panel { display: none; }
/* D3-reserven: natten dæmpes, så statusfarverne kan læses på natsiden */
.d3-map-container.lovligt-kort .klode-nat { fill: rgba(3, 9, 3, 0.28); }
.d3-map-container.lovligt-kort .klode-skumring { fill: rgba(242, 166, 60, 0.07); }
.d3-map-container.lovligt-kort .country { cursor: pointer; }

.lk-farve--lovligt { background: var(--lk-lovligt); }
.lk-farve--delvist { background: var(--lk-delvist); }
.lk-farve--afkriminaliseret { background: var(--lk-afkriminaliseret); }
.lk-farve--forsoeg { background: var(--lk-forsoeg); }
.lk-farve--ikke-lovligt { background: var(--lk-ikke-lovligt); }
.lk-farve--ukendt { background: var(--lk-ukendt); }

.map-legend--lovligt .legend-status { width: 100%; font: 400 0.68rem/1.4 'Space Mono', monospace; color: #7f9a78; margin-top: -0.2rem; }
.lovligt-steder { display: flex; flex-wrap: wrap; gap: 0.3rem; width: 100%; margin-top: 0.45rem; }
.lovligt-chip {
    font: 700 0.68rem/1 'Space Mono', monospace;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.5rem;
    border: 0;
    border-radius: 4px;
    color: #12280f;
    background: var(--lk-ukendt);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}
.lovligt-chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35); }
.lovligt-chip:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); }
.lovligt-chip:focus-visible { outline: 3px solid #f6c56f; outline-offset: 2px; }
.lovligt-chip--lovligt { background: var(--lk-lovligt); }
.lovligt-chip--delvist { background: var(--lk-delvist); }
.lovligt-chip--afkriminaliseret { background: var(--lk-afkriminaliseret); }
.lovligt-chip--forsoeg { background: var(--lk-forsoeg); }
.lovligt-chip--ikke-lovligt { background: var(--lk-ikke-lovligt); }
.lovligt-fejl { color: #ffb08f; }
/* 4/11: med 44 steder blev forklaringen 425 px høj (før 262) og dækkede en tredjedel af kloden på computer. Over 900 px, hvor
   forklaringen ligger oven på kloden, ruller brikkerne derfor i en lav boks (ca. 3½ række). Under 901 px står forklaringen
   under kloden og viser alle brikker som før. Polstringen giver plads til brikkernes skygge og fokusring. */
@media (min-width: 901px) {
    .d3-map-container.lovligt-kort .lovligt-steder { max-height: 6.6rem; overflow-y: auto; padding: 2px 6px 6px 2px; scrollbar-width: thin; scrollbar-color: rgba(243, 217, 166, 0.35) transparent; }
}

/* Panelet: samme kortstil som «Næste 4:20» (mørkegrøn flade, amber kant, hård skygge). Står til HØJRE ved siden af zoom-
   knappernes lodrette kolonne (42 px + luft), så forklaringen og stedlisten nederst til venstre altid kan nås – også når USA's
   lange delstatsliste er åben. */
.lovligt-panel {
    position: absolute;
    top: 32px;
    right: calc(max(24px, 4vw) + 58px);
    left: auto;
    z-index: 16;
    width: min(380px, 40%);
    max-height: calc(100% - 64px);
    overflow: auto;
    padding: 1rem 2.4rem 1rem 1.25rem;
    background: rgba(18, 40, 15, 0.94);
    border: 2px solid #f2a63c;
    border-radius: 8px;
    box-shadow: var(--bakke-shadow-hard, 5px 5px 0 rgba(0, 0, 0, 0.4));
    color: #d7e6cf;
    font: 500 0.9rem/1.5 'Bitter', Georgia, serif;
}
.lovligt-panel .map-info-city { margin-bottom: 0.45rem; }
.lovligt-luk {
    position: absolute;
    top: 8px; right: 8px;
    width: 32px; height: 32px;
    border: 2px solid rgba(243, 217, 166, 0.3);
    border-radius: 6px;
    background: #12280f;
    color: #f3e9d0;
    font: 700 1.1rem/1 'Space Mono', monospace;
    cursor: pointer;
}
.lovligt-luk:hover { border-color: #f2a63c; color: #f2a63c; }
.lovligt-luk:focus-visible { outline: 3px solid #f6c56f; outline-offset: 2px; }
.lovligt-maerke {
    display: inline-block;
    font: 700 0.7rem/1 'Space Mono', monospace;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.55rem;
    border-radius: 4px;
    color: #12280f;
    background: var(--lk-ukendt);
}
.lovligt-maerke--ukendt { color: #f3e9d0; }
.lovligt-maerke--lovligt { background: var(--lk-lovligt); }
.lovligt-maerke--delvist { background: var(--lk-delvist); }
.lovligt-maerke--afkriminaliseret { background: var(--lk-afkriminaliseret); }
.lovligt-maerke--forsoeg { background: var(--lk-forsoeg); }
.lovligt-maerke--ikke-lovligt { background: var(--lk-ikke-lovligt); }
.lovligt-siden { margin-top: 0.5rem; font: 400 0.78rem/1.3 'Space Mono', monospace; color: #f6c56f; }
.lovligt-tekst { margin: 0.55rem 0 0; color: #d7e6cf; text-wrap: pretty; }
.lovligt-delstater { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 2px dashed rgba(243, 217, 166, 0.18); }
.lovligt-delstater-titel { font: 700 0.7rem/1.3 'Space Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #f2a63c; margin-bottom: 0.35rem; }
.lovligt-delstater ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1rem; }
.lovligt-delstat-gruppe + .lovligt-delstat-gruppe { margin-top: 0.7rem; }   /* 4/11: delstater grupperet efter status */
/* 5/11: grupperne er <details> – titlen er knappen (▸ lukket / ▾ åben); lukket på telefon, åben på computer (js/lovligt-kort.js) */
.lovligt-delstat-gruppe > summary { cursor: pointer; list-style: none; padding: 0.15rem 0; }
.lovligt-delstat-gruppe > summary::-webkit-details-marker { display: none; }
.lovligt-delstat-gruppe > summary::before { content: '▸'; content: '▸' / ''; display: inline-block; width: 1.1em; color: #f6c56f; }   /* 5/11 Fable L3: pilen læses ikke op (ældre browsere bruger første content) */
.lovligt-delstat-gruppe[open] > summary::before { content: '▾'; content: '▾' / ''; }
.lovligt-delstat-gruppe > summary:focus-visible { outline: 2px solid #f6c56f; outline-offset: 2px; border-radius: 3px; }
.lovligt-delstat { break-inside: avoid; font-size: 0.82rem; line-height: 1.4; padding: 0.1rem 0; }
.lovligt-delstat-navn { color: #f3e9d0; font-weight: 700; }
.lovligt-delstat-siden { color: #a9c2a0; font-family: 'Space Mono', monospace; font-size: 0.68rem; }
.lovligt-delstat-note { display: block; color: #a9c2a0; font-size: 0.76rem; }
.lovligt-delstat-nyhed, .lovligt-laes { color: #f6c56f; text-decoration: underline; text-underline-offset: 3px; }
.lovligt-delstat-nyhed { font-family: 'Space Mono', monospace; font-size: 0.68rem; margin-left: 0.3rem; }
.lovligt-kilde { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 2px dashed rgba(243, 217, 166, 0.18); font: 400 0.72rem/1.4 'Space Mono', monospace; color: #a9c2a0; }
.lovligt-laes {
    display: inline-block;
    margin-top: 0.7rem;
    font: 700 0.8rem/1 'Space Mono', monospace;
    color: #12280f;
    background: #f2a63c;
    border: 2px solid #12280f;
    border-radius: 6px;
    padding: 0.7rem 1rem;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
    text-decoration: none;
}
.lovligt-laes:hover { background: #f6c56f; }
.lovligt-laes:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }
.lovligt-laes:focus-visible { outline: 3px solid #f6c56f; outline-offset: 3px; }
.lovligt-note { margin: 0.7rem 0 0; font: 400 0.66rem/1.4 'Space Mono', monospace; color: #7f9a78; }

@media (max-width: 768px) {
    .klode-skift { margin-top: 0.9rem; }
    .klode-skift-knap { padding: 0.7rem 0.8rem; font-size: 0.74rem; }
    .lovligt-panel { position: static; width: auto; max-height: none; margin: 0 12px 12px; order: 0; }
    .d3-map-container.lovligt-kort .map-legend--lovligt { max-width: none; }
    .map-legend { order: 1; }   /* panelet (det, man lige har trykket på) står før forklaringen på telefon */
    .lovligt-delstater ul { columns: 1; }
    .lovligt-delstat-gruppe > summary { padding: 0.55rem 0; margin-bottom: 0; }   /* 5/11: stort nok at ramme med en finger */
}
/* 769–900 px (review 4/11): styles.css lægger forklaringerne i flow øverst i kortet – så skal panelet også i flow,
   ellers dækker det brikkerne i højre side (målt: Tyskland, Georgien, Holland ved 800 px). Skal stå EFTER .lovligt-panel-reglen. */
@media (min-width: 769px) and (max-width: 900px) {
    .d3-map-container.lovligt-kort .map-legend--lovligt { max-width: none; }
    .lovligt-panel { position: relative; top: auto; right: auto; width: auto; max-height: none; margin: 0 1rem 1rem; }
}
@media (max-width: 360px) {
    .klode-skift-knap { padding: 0.65rem 0.6rem; font-size: 0.7rem; letter-spacing: 0.02em; }
}
@media (prefers-reduced-motion: reduce) {
    .lovligt-chip, .lovligt-laes, .klode-skift-knap { transition: none; }
}

/* M1 (review 4/11): nyhedslinket er skjult, til api/nyhed har bekræftet, at nyheden er udgivet */
.lovligt-laes[hidden], .lovligt-delstat-nyhed[hidden] { display: none !important; }

/* Emil 4/11: tydelig ansvarsfraskrivelse under Lovligt-kortets forklaring og i panelet */
.lovligt-ansvar { width: 100%; max-width: 560px; margin: 0.6rem 0 0.2rem; padding: 0.6rem 0.75rem; border: 1px solid rgba(255, 200, 80, 0.55); border-left: 4px solid #f0c050; border-radius: 6px; background: rgba(240, 192, 80, 0.08); color: #e8dcc0; font: 600 0.72rem/1.5 'Space Mono', monospace; }
.lovligt-note--ansvar { color: #d9cba8; border-left: 3px solid #f0c050; padding-left: 0.5rem; }