/* styles.css – delt 29/10 2026 (css-split/split.py): GYB-/Pot Farm-tidens regler ligger i gyb-styles.css (kun gyb.html). Samme indhold ellers. */
:root {
    --bg-dark: #12280f;            
    --bg-card: #1d4023;            
    --bg-card-hover: #234d2a;
    --green-primary: #f2a63c;      
    --green-dark: #ec6b34;         
    --green-glow: rgba(242, 166, 60, 0.35);
    --green-bright: #f6c56f;       
    --purple-primary: #7fae5e;     
    --purple-dark: #5f8f45;
    --purple-glow: rgba(127, 174, 94, 0.35);
    --text-primary: #f3e9d0;       
    --text-secondary: #d7e6cf;
    --text-muted: #a9c2a0;
    --border-color: rgba(243, 217, 166, 0.22);
    --space-blue: #0c1d09;         
    --ocean-blue: #0e2410;         
    --land-color: #1d4023;
    --land-highlight: #2f5a34;

    --color-error: #e34f2b;        
    --color-error-light: #f0977e;
    --color-warning: #f2a63c;
    --color-orange: #ec6b34;
    --color-orange-dark: #e34f2b;
    --gray-muted: #5f7a56;

    --bakke-section-alt: #163019;  
    --bakke-red: #e34f2b;
    --bakke-hero-gradient: linear-gradient(170deg, #1d4023 0%, #12280f 100%);
    --bakke-band: repeating-linear-gradient(90deg, #1d4023 0 120px, #f2a63c 120px 240px, #ec6b34 240px 360px, #e34f2b 360px 480px);
    --bakke-progress: linear-gradient(90deg, #e34f2b, #f2a63c, #7fae5e);
    --bakke-shadow-hard: 5px 5px 0 rgba(0, 0, 0, 0.4);
    --bakke-shadow-card: 8px 8px 0 rgba(0, 0, 0, 0.35);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.hidden {
    display: none !important;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Bitter', Georgia, serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}
h1, h2, h3 {
    font-weight: 400;
}
.bg-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 15 C60 15 62 35 60 50 C58 35 60 15 60 15Z M60 50 C60 50 45 30 35 20 C48 32 60 50 60 50Z M60 50 C60 50 75 30 85 20 C72 32 60 50 60 50Z M60 50 C60 50 38 38 25 35 C40 40 60 50 60 50Z M60 50 C60 50 82 38 95 35 C80 40 60 50 60 50Z M60 50 C60 50 42 45 30 48 C44 48 60 50 60 50Z M60 50 C60 50 78 45 90 48 C76 48 60 50 60 50Z M60 50 L60 75' stroke='rgba(242,166,60,0.05)' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") repeat,
        radial-gradient(ellipse at 20% 20%, rgba(242, 166, 60, var(--bg-green-intensity, 0.05)) 0%, transparent 50%),
        var(--bg-dark);
}
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: repeating-linear-gradient(90deg,
        transparent 0 20%,
        rgba(242, 166, 60, 0.04) 20% 40%,
        transparent 40% 60%,
        rgba(236, 107, 52, 0.04) 60% 80%,
        transparent 80% 100%);
}
@keyframes twinkle {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.85rem 2rem;
    background: #12280f;
    border-bottom: 4px solid var(--green-primary);
}
.nav-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-logo {
    font-family: 'Alfa Slab One', serif;
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--green-primary), var(--purple-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    cursor: pointer;
}
.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}
.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}
.nav-links a:hover {
    color: var(--green-primary);
}
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.hero > *:not(.hero-particles) {
    position: relative;
    z-index: 1;
}
.particle {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 166, 60, 0.25) 0%, transparent 70%);
    animation: particleFloat linear infinite;
}
.particle:nth-child(1) { left: 5%; width: 6px; height: 6px; animation-duration: 16s; animation-delay: 0s; }
.particle:nth-child(2) { left: 15%; width: 10px; height: 10px; animation-duration: 12s; animation-delay: -2s; }
.particle:nth-child(3) { left: 30%; width: 5px; height: 5px; animation-duration: 18s; animation-delay: -5s; }
.particle:nth-child(4) { left: 45%; width: 8px; height: 8px; animation-duration: 14s; animation-delay: -1s; }
.particle:nth-child(5) { left: 60%; width: 6px; height: 6px; animation-duration: 15s; animation-delay: -8s; }
.particle:nth-child(6) { left: 72%; width: 12px; height: 12px; animation-duration: 13s; animation-delay: -3s; }
.particle:nth-child(7) { left: 85%; width: 5px; height: 5px; animation-duration: 17s; animation-delay: -6s; }
.particle:nth-child(8) { left: 93%; width: 7px; height: 7px; animation-duration: 11s; animation-delay: -4s; }
@keyframes particleFloat {
    0% { transform: translateY(0) translateX(0) scale(0.5); opacity: 0; }
    5% { opacity: 0.4; }
    50% { transform: translateY(-50vh) translateX(20px) scale(1.2); opacity: 0.25; }
    95% { opacity: 0.05; }
    100% { transform: translateY(-105vh) translateX(-10px) scale(1.5); opacity: 0; }
}
.hero-subtitle {
    font-family: 'Alfa Slab One', serif;
    font-size: 1.25rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 1rem;
}
.main-answer {
    font-family: 'Alfa Slab One', serif;
    font-size: clamp(6rem, 20vw, 14rem);
    font-weight: 900;
    line-height: 1;
    margin: 1rem 0;
    transition: all 0.5s ease;
    cursor: pointer;
}
.main-answer.no {
    color: var(--color-error);
    text-shadow: 0 0 60px rgba(239, 68, 68, 0.5);
}
.main-answer.yes {
    color: var(--green-primary);
    text-shadow: 0 0 60px var(--green-glow), 0 0 120px var(--green-glow);
    animation: pulse-glow 1s ease-in-out infinite;
}
@keyframes pulse-glow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.current-time-display {
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    color: var(--text-secondary);
    margin: 1rem 0;
}
.hero-widgets {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 0.5rem;
}
.hero-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.sound-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sound-toggle:hover {
    border-color: var(--green-primary);
    background: rgba(242, 166, 60, 0.1);
}
.share-btn {
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}
.share-btn:hover {
    border-color: var(--purple-primary);
    background: rgba(127, 174, 94, 0.1);
    color: var(--text-primary);
}
.streak-widget {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: linear-gradient(135deg, rgba(255, 100, 0, 0.1), rgba(255, 60, 0, 0.05));
    border: 1px solid rgba(255, 100, 0, 0.3);
    border-radius: 50px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.streak-fire {
    font-size: 1.1rem;
    transition: transform 0.3s;
}
.streak-widget.streak-hot .streak-fire {
    animation: fireFlicker 0.8s ease-in-out infinite alternate;
}
.streak-widget.streak-blazing {
    border-color: rgba(255, 60, 0, 0.5);
    background: linear-gradient(135deg, rgba(255, 80, 0, 0.15), rgba(255, 40, 0, 0.08));
}
.streak-widget.streak-blazing .streak-fire {
    font-size: 1.3rem;
    animation: fireFlicker 0.5s ease-in-out infinite alternate;
}
.streak-widget.streak-legendary {
    border-color: rgba(255, 40, 0, 0.7);
    background: linear-gradient(135deg, rgba(255, 60, 0, 0.2), rgba(127, 174, 94, 0.1));
    box-shadow: 0 0 20px rgba(255, 60, 0, 0.2);
}
.streak-widget.streak-legendary .streak-fire {
    font-size: 1.5rem;
    animation: fireFlicker 0.3s ease-in-out infinite alternate;
}
@keyframes fireFlicker {
    0% { transform: scale(1) rotate(-5deg); }
    100% { transform: scale(1.15) rotate(5deg); }
}
.next-420-widget {
    margin: 2rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(242, 166, 60, 0.1), rgba(127, 174, 94, 0.1));
    border: 1px solid var(--green-primary);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 500px;
    width: 100%;
}
.next-420-widget:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px var(--green-glow);
    border-color: var(--green-bright);
}
.next-420-widget-label {
    font-family: 'Alfa Slab One', serif;
    font-size: 0.875rem;
    color: var(--green-primary);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 0.5rem;
}
.next-420-widget-city {
    font-family: 'Alfa Slab One', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.next-420-widget-time {
    font-family: 'Space Mono', monospace;
    font-size: 1.25rem;
    color: var(--purple-primary);
}
.next-420-widget-countdown {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
.next-420-widget-unit {
    text-align: center;
}
.next-420-widget-number {
    font-family: 'Alfa Slab One', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--green-bright);
}
.next-420-widget-unit-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.next-420-widget-cta {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.next-420-widget-cta svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    animation: bounce-arrow 1s ease-in-out infinite;
}
@keyframes bounce-arrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    width: 100%;
    margin-top: 3rem;
    padding: 0 1rem;
}
.status-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}
.status-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.status-card.active {
    border-color: var(--green-primary);
    box-shadow: 0 0 30px var(--green-glow);
}
.status-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.status-card-title {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-error);
}
.status-indicator.active {
    background: var(--green-primary);
    box-shadow: 0 0 20px var(--green-glow);
    animation: blink 1s infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.status-card-value {
    font-family: 'Alfa Slab One', serif;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.status-card-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.map-section {
    padding: 6rem 2rem;
    max-width: 1600px;
    margin: 0 auto;
}
.map-header {
    text-align: center;
    margin-bottom: 3rem;
}
.section-title {
    font-family: 'Alfa Slab One', serif;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.section-subtitle {
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.d3-map-container {
    position: relative;
    background: linear-gradient(180deg, #0c1929 0%, #0a1628 50%, #071018 100%);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(242, 166, 60, 0.3);
    box-shadow:
        0 0 100px rgba(242, 166, 60, 0.1),
        inset 0 0 100px rgba(0, 0, 0, 0.5);
    min-height: 500px;
}
.d3-map-container svg {
    width: 100%;
    height: 500px;
    display: block;
    cursor: grab;
    position: relative;
    z-index: 1;
}
.d3-map-container svg:active {
    cursor: grabbing;
}
.map-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.map-controls button {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(242, 166, 60, 0.4);
    background: rgba(10, 22, 40, 0.95);
    color: var(--green-primary);
    font-size: 24px;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}
.map-controls button:hover {
    background: rgba(242, 166, 60, 0.2);
    border-color: var(--green-primary);
    transform: scale(1.05);
}
.map-controls button:active {
    transform: scale(0.95);
}
.map-info-panel {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(10, 22, 40, 0.95);
    border: 1px solid var(--green-primary);
    border-radius: 12px;
    padding: 1.25rem;
    min-width: 220px;
    z-index: 15;
    backdrop-filter: blur(10px);
}
.map-info-title {
    font-family: 'Alfa Slab One', serif;
    font-size: 0.7rem;
    color: var(--green-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
}
.map-info-city {
    font-family: 'Alfa Slab One', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.map-info-timezone {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: var(--purple-primary);
    margin-bottom: 0.5rem;
}
.map-info-time {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    color: var(--green-bright);
}
.map-info-countdown {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(242, 166, 60, 0.3);
}
.map-info-countdown-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}
.map-info-countdown-value {
    font-family: 'Alfa Slab One', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--green-primary);
}
.map-legend {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(10, 22, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    z-index: 15;
    backdrop-filter: blur(10px);
}
.legend-title {
    font-family: 'Alfa Slab One', serif;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.legend-item:last-child {
    margin-bottom: 0;
}
.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.map-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(10, 22, 40, 0.98);
    border: 1px solid rgba(242, 166, 60, 0.5);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.9rem;
    color: white;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.2s ease;
    max-width: 280px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.map-tooltip.visible {
    opacity: 1;
}
.map-tooltip .tooltip-title {
    font-family: 'Alfa Slab One', serif;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
    color: var(--text-primary);
}
.map-tooltip .tooltip-country {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.map-tooltip .tooltip-time {
    font-family: 'Space Mono', monospace;
    color: var(--green-bright);
    margin-bottom: 4px;
}
.map-tooltip .tooltip-420 {
    color: var(--green-primary);
    font-weight: 700;
}
.map-tooltip .tooltip-countdown {
    font-size: 0.85rem;
    color: var(--purple-primary);
}
.country {
    stroke: rgba(242, 166, 60, 0.2);
    stroke-width: 0.5;
    transition: fill 0.3s ease, stroke 0.3s ease;
    cursor: pointer;
}
.country:hover {
    stroke: var(--green-primary);
    stroke-width: 1;
}
@keyframes cityPulse {
    0%, 100% {
        filter: drop-shadow(0 0 4px var(--green-primary));
    }
    50% {
        filter: drop-shadow(0 0 15px var(--green-primary)) drop-shadow(0 0 25px var(--green-primary));
    }
}
.city-label {
    font-family: 'Bitter', Georgia, serif;
    font-size: 10px;
    fill: white;
    pointer-events: none;
    text-shadow: 0 0 4px #0a0a14, 0 0 8px #0a0a14;
}
.graticule {
    fill: none;
    stroke: rgba(242, 166, 60, 0.08);
    stroke-width: 0.5;
}
.active-zones-container {
    margin-top: 2rem;
    text-align: center;
}
.active-zones-title {
    font-family: 'Alfa Slab One', serif;
    font-size: 1rem;
    color: var(--green-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}
.active-zones-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
.zone-badge {
    background: linear-gradient(135deg, var(--green-dark), var(--green-primary));
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: fadeIn 0.5s ease;
    box-shadow: 0 4px 20px var(--green-glow);
}
.zone-badge.next {
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-primary));
    box-shadow: 0 4px 20px var(--purple-glow);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.zone-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: blink 1s infinite;
}
.countdown-section {
    padding: 4rem 2rem;
    text-align: center;
}
.countdown-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.countdown-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    min-width: 100px;
}
.countdown-number {
    font-family: 'Alfa Slab One', serif;
    font-size: 3rem;
    font-weight: 700;
    color: var(--green-primary);
}
.countdown-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
}
.next-420-info {
    color: var(--text-secondary);
    font-size: 1.125rem;
}
.next-420-info span {
    color: var(--purple-primary);
    font-weight: 600;
}
@keyframes gentleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.facts-section {
    padding: 2rem 2rem;
    max-width: 700px;
    margin: 0 auto;
}
.facts-widget {
    text-align: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(242, 166, 60, 0.06), rgba(127, 174, 94, 0.06));
    border: 1px solid rgba(242, 166, 60, 0.15);
    border-radius: 16px;
    position: relative;
}
.facts-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}
.facts-label {
    font-family: 'Alfa Slab One', serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--green-primary);
    margin-bottom: 0.75rem;
}
.facts-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    transition: opacity 0.4s ease;
    min-height: 3em;
}
.countdown-section::before,
.history-section::before,
.gyb-section::before,
.collector-section::before,
.newsletter-section::before,
.events-section::before {
    content: '🌿  ·  🌿  ·  🌿';
    display: block;
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 4px;
    color: var(--text-muted);
    opacity: 0.4;
    margin-bottom: 2rem;
}
.history-section {
    padding: 6rem 2rem;
    max-width: 1000px;
    margin: 0 auto;
}
.history-intro {
    text-align: center;
    margin-bottom: 4rem;
}
.history-timeline {
    position: relative;
    padding-left: 40px;
}
.history-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--green-primary), var(--purple-primary), var(--green-primary));
    opacity: 0.4;
}
.timeline-item {
    position: relative;
    margin-bottom: 2.5rem;
    padding-left: 30px;
}
.timeline-marker {
    position: absolute;
    left: -34px;
    top: 0;
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    border: 2px solid var(--green-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    z-index: 1;
    transition: all 0.3s;
}
.timeline-item:hover .timeline-marker {
    border-color: var(--purple-primary);
    box-shadow: 0 0 15px var(--purple-glow);
    transform: scale(1.1);
}
.timeline-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}
.timeline-item:hover .timeline-content {
    border-color: var(--purple-primary);
    box-shadow: 0 0 30px rgba(127, 174, 94, 0.08);
}
.timeline-year {
    font-family: 'Alfa Slab One', serif;
    font-size: 0.7rem;
    color: var(--green-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}
.timeline-content h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}
.timeline-content p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 0.95rem;
}
.highlight {
    color: var(--green-primary);
    font-weight: 600;
}
.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, var(--green-dark), var(--green-primary));
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}
.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px var(--green-glow);
}
.newsletter-section {
    padding: 6rem 2rem;
    text-align: center;
}
.newsletter-box {
    max-width: 600px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 3rem;
}
.newsletter-box h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.newsletter-box p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}
.newsletter-form {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.newsletter-input {
    flex: 1;
    min-width: 250px;
    padding: 1rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    background: var(--bg-dark);
    color: var(--text-primary);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}
.events-section {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}
.event-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}
.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--green-primary), var(--purple-primary));
}
.event-date {
    font-size: 0.875rem;
    color: var(--green-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.event-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}
.event-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.event-tag {
    display: inline-block;
    background: rgba(242, 166, 60, 0.1);
    color: var(--green-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 1rem;
}
.footer {
    padding: 4rem 2rem 2rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}
.footer-logo {
    font-family: 'Alfa Slab One', serif;
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--green-primary), var(--purple-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}
.footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}
.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s;
}
.footer-links a:hover {
    color: var(--green-primary);
}
.footer-bottom {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 2rem;
}
.smoke-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9000;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.smoke-overlay.active {
    opacity: 1;
    visibility: visible;
}
.smoke-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    will-change: contents;
    filter: blur(6px);
}
.smoke-fill {
    position: absolute;
    bottom: 0;
    left: -10%;
    right: -10%;
    height: 0%;
    background: linear-gradient(to top,
        rgba(245, 245, 245, 0.98) 0%,
        rgba(235, 235, 235, 0.95) 5%,
        rgba(225, 225, 225, 0.9) 15%,
        rgba(215, 215, 215, 0.8) 30%,
        rgba(205, 205, 205, 0.65) 50%,
        rgba(195, 195, 195, 0.45) 70%,
        rgba(185, 185, 185, 0.25) 85%,
        rgba(175, 175, 175, 0.1) 95%,
        transparent 100%
    );
    filter: blur(8px);
    transition: height 0.4s ease-out;
    will-change: height;
    transform: translateZ(0);
}
.smoke-layer-2 {
    position: absolute;
    bottom: 0;
    left: -15%;
    right: -15%;
    height: 0%;
    background: linear-gradient(to top,
        rgba(230, 230, 230, 0.9) 0%,
        rgba(220, 220, 220, 0.7) 20%,
        rgba(210, 210, 210, 0.5) 45%,
        rgba(200, 200, 200, 0.3) 70%,
        transparent 100%
    );
    filter: blur(15px);
    animation: smokeSwirl1 8s ease-in-out infinite;
    transition: height 0.4s ease-out;
    will-change: height, transform;
    transform: translateZ(0);
}
.smoke-layer-3 {
    position: absolute;
    bottom: 0;
    left: -20%;
    right: -20%;
    height: 0%;
    background: linear-gradient(to top,
        rgba(240, 240, 240, 0.85) 0%,
        rgba(225, 225, 225, 0.6) 30%,
        rgba(210, 210, 210, 0.35) 60%,
        transparent 100%
    );
    filter: blur(25px);
    animation: smokeSwirl2 12s ease-in-out infinite;
    transition: height 0.4s ease-out;
    will-change: height, transform;
    transform: translateZ(0);
}
@keyframes smokeSwirl1 {
    0%, 100% { transform: translateX(0) scaleX(1); }
    25% { transform: translateX(3%) scaleX(1.02); }
    50% { transform: translateX(-2%) scaleX(0.98); }
    75% { transform: translateX(2%) scaleX(1.01); }
}
@keyframes smokeSwirl2 {
    0%, 100% { transform: translateX(0) scaleX(1); }
    33% { transform: translateX(-4%) scaleX(1.03); }
    66% { transform: translateX(3%) scaleX(0.97); }
}
.smoke-wisp {
    position: absolute;
    bottom: -150px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(240, 240, 240, 0.9) 0%,
        rgba(230, 230, 230, 0.6) 30%,
        rgba(220, 220, 220, 0.3) 60%,
        transparent 80%);
    pointer-events: none;
    filter: blur(10px);
    animation: wispFloat linear forwards;
    will-change: transform, opacity;
    contain: layout style;
}
@keyframes wispFloat {
    0% {
        transform: translateY(0) translateX(0) scale(0.8) rotate(0deg);
        opacity: 0.9;
    }
    20% {
        transform: translateY(-20vh) translateX(30px) scale(1.3) rotate(10deg);
        opacity: 0.8;
    }
    40% {
        transform: translateY(-40vh) translateX(-20px) scale(1.8) rotate(-5deg);
        opacity: 0.65;
    }
    60% {
        transform: translateY(-60vh) translateX(40px) scale(2.4) rotate(8deg);
        opacity: 0.5;
    }
    80% {
        transform: translateY(-80vh) translateX(-10px) scale(3) rotate(-3deg);
        opacity: 0.3;
    }
    100% {
        transform: translateY(-110vh) translateX(20px) scale(3.5) rotate(5deg);
        opacity: 0;
    }
}
.fog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center,
        rgba(250, 250, 250, var(--fog-opacity, 0)) 0%,
        rgba(240, 240, 240, var(--fog-opacity, 0)) 50%,
        rgba(235, 235, 235, var(--fog-opacity, 0)) 100%
    );
    pointer-events: none;
    z-index: 9800;
    transition: opacity 0.3s ease;
    --fog-opacity: 0;
}
.smoke-noise {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9850;
    opacity: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    transition: opacity 0.5s ease;
}
.content-wrapper {
    transition: filter 0.5s ease;
}
body.celebration-mode .content-wrapper {
    filter: blur(var(--celebration-blur, 0px)) brightness(var(--celebration-brightness, 1));
}
.celebration-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 10000;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.celebration-banner.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.celebration-banner h1 {
    font-family: 'Alfa Slab One', serif;
    font-size: clamp(3rem, 15vw, 8rem);
    font-weight: 900;
    color: var(--green-bright);
    text-shadow:
        0 0 20px var(--green-glow),
        0 0 40px var(--green-glow),
        0 0 80px var(--green-glow),
        2px 2px 4px rgba(0,0,0,0.8);
    animation: celebratePulse 0.5s ease-in-out infinite;
    margin-bottom: 1rem;
}
.celebration-banner p {
    font-family: 'Alfa Slab One', serif;
    font-size: clamp(1rem, 4vw, 2rem);
    color: white;
    text-shadow: 0 0 20px rgba(255,255,255,0.5), 2px 2px 4px rgba(0,0,0,0.8);
    min-height: 1.5em;
}
.celebration-banner p.typewriter::after {
    content: '|';
    animation: cursorBlink 0.5s step-end infinite;
    color: var(--green-bright, #f2a63c);
    font-weight: 400;
    margin-left: 2px;
}
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.celebration-banner.message-pop p {
    animation: messagePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes messagePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); text-shadow: 0 0 40px rgba(242,166,60,0.8), 0 0 80px rgba(242,166,60,0.4); }
    100% { transform: scale(1); }
}
.celebration-banner p.msg-swap {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.25s ease-in;
}
@keyframes celebratePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.joints-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    pointer-events: none;
    z-index: 9500;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    padding: 0 10%;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.joints-container.active {
    opacity: 1;
    transform: translateY(0);
}
.joint {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: bottom center;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.joint.lit {
    opacity: 1;
    animation: jointBob 3s ease-in-out infinite;
}
.joint-img {
    width: clamp(50px, 8vw, 90px);
    height: auto;
    filter: drop-shadow(0 0 8px rgba(255, 100, 0, 0.3));
    transition: filter 0.5s ease;
}
.joint.lit .joint-img {
    filter: drop-shadow(0 0 12px rgba(255, 100, 0, 0.5)) drop-shadow(0 0 25px rgba(242, 166, 60, 0.25));
}
@keyframes jointBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.joint:nth-child(1) { animation-delay: 0s; }
.joint:nth-child(2) { animation-delay: 0.4s; }
.joint:nth-child(2) .joint-img { transform: scaleX(-1); }
.joint:nth-child(3) { animation-delay: 0.8s; }
.joint:nth-child(4) { animation-delay: 1.2s; }
.joint:nth-child(4) .joint-img { transform: scaleX(-1); }
.stop-smoke-btn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 25px;
    color: #fff;
    font-family: 'Bitter', Georgia, serif;
    font-size: 0.85rem;
    cursor: pointer;
    pointer-events: all;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}
.stop-smoke-btn:hover {
    background: rgba(0, 0, 0, 0.85);
    border-color: rgba(255, 255, 255, 0.5);
}
.celebration-mode .stop-smoke-btn {
    display: block;
}
@keyframes fabAlertPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.4); }
    50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(255, 68, 68, 0); }
}
@keyframes fabUrgentGlow {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 8px rgba(255, 68, 68, 0.3); }
    50% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 68, 68, 0.5); }
}
@keyframes fabHarvestGlow {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 8px rgba(251, 191, 36, 0.3); }
    50% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(251, 191, 36, 0.5); }
}
.green-tint {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(242, 166, 60, 0.15) 0%, rgba(242, 166, 60, 0.05) 100%);
    pointer-events: none;
    z-index: 8999;
    opacity: 0;
    transition: opacity 1s ease;
}
.green-tint.active {
    opacity: 1;
}
.celebration-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--green-primary), var(--purple-primary), var(--green-primary));
    background-size: 200% 100%;
    z-index: 10001;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s linear;
    box-shadow: 0 0 20px var(--green-glow), 0 2px 10px rgba(0,0,0,0.3);
    animation: progressGlow 2s ease-in-out infinite;
}
@keyframes progressGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.falling-emoji {
    position: fixed;
    font-size: 2rem;
    pointer-events: none;
    z-index: 9999;
    animation: fall 4s linear forwards;
    will-change: transform, opacity;
    contain: layout style;
}
@keyframes fall {
    0% { transform: translateY(-50px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes screenShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
body.shake main {
    animation: screenShake 0.5s ease-in-out;
}
body.celebration-mode {
    --celebration-blur: 0px;
}
body.celebration-mode .main-answer {
    animation: megaPulse 0.3s ease-in-out infinite;
}
@keyframes megaPulse {
    0%, 100% { transform: scale(1); text-shadow: 0 0 60px var(--green-glow); }
    50% { transform: scale(1.1); text-shadow: 0 0 100px var(--green-glow), 0 0 150px var(--green-primary); }
}
.glow-border {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9001;
    border: 4px solid transparent;
    opacity: 0;
    transition: opacity 0.5s;
}
.glow-border.active {
    opacity: 1;
    border-color: var(--green-primary);
    box-shadow: inset 0 0 50px var(--green-glow), 0 0 50px var(--green-glow);
    animation: borderPulse 2s ease-in-out infinite;
}
@keyframes borderPulse {
    0%, 100% { border-color: var(--green-primary); box-shadow: inset 0 0 50px var(--green-glow), 0 0 50px var(--green-glow); }
    50% { border-color: var(--purple-primary); box-shadow: inset 0 0 80px var(--purple-glow), 0 0 80px var(--purple-glow); }
}
.location-announcement {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10002;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
}
.location-announcement.active {
    opacity: 1;
    animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.location-announcement .city-name {
    font-family: 'Alfa Slab One', serif;
    font-size: clamp(1.5rem, 6vw, 3rem);
    color: var(--purple-primary);
    text-shadow: 0 0 30px var(--purple-glow), 2px 2px 4px rgba(0,0,0,0.8);
    margin-bottom: 0.5rem;
}
.location-announcement .country-name {
    font-size: 1.25rem;
    color: var(--text-secondary);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
@keyframes bounceIn {
    0% { transform: translateX(-50%) scale(0); opacity: 0; }
    50% { transform: translateX(-50%) scale(1.1); }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
@media (max-width: 600px) {
.joints-container {
        padding: 0 2%;
    }
.joint:nth-child(4) {
        display: none;
    }
}
@media (max-width: 900px) {
.map-info-panel {
        position: relative;
        top: 0;
        left: 0;
        margin: 1rem;
        width: calc(100% - 2rem);
    }
.map-legend {
        position: relative;
        bottom: 0;
        right: 0;
        margin: 1rem;
        width: calc(100% - 2rem);
    }
}
@media (max-width: 768px) {
.nav-toggle {
        display: flex;
    }
.nav-links {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 280px;
        flex-direction: column;
        background: rgba(18, 40, 15, 0.98);
        backdrop-filter: blur(20px);
        padding: 80px 24px 24px;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        border-left: 1px solid var(--border-color);
        z-index: 1000;
        gap: 0;
    }
.nav-links.open {
        transform: translateX(0);
    }
.nav-links li {
        border-bottom: 1px solid var(--border-color);
    }
.nav-links a {
        display: block;
        padding: 16px 0;
        font-size: 1.125rem;
    }
.main-answer {
        font-size: 5rem;
    }
.status-grid {
        grid-template-columns: 1fr;
    }
.countdown-number {
        font-size: 2rem;
    }
.countdown-box {
        min-width: 70px;
        padding: 1rem;
    }
.next-420-widget-city {
        font-size: 1.5rem;
    }
.d3-map-container {
        min-height: 350px;
    }
.d3-map-container svg {
        height: 350px;
    }
.map-info-panel {
        position: absolute;
        top: auto;
        bottom: 70px;
        left: 10px;
        right: 10px;
        min-width: auto;
        padding: 0.75rem;
        margin: 0;
        width: auto;
    }
.map-info-city {
        font-size: 1.1rem;
    }
.map-info-countdown-value {
        font-size: 1.2rem;
    }
.map-legend {
        position: absolute;
        bottom: 10px;
        left: 10px;
        padding: 0.5rem 0.75rem;
        margin: 0;
        width: auto;
    }
.legend-title {
        display: none;
    }
.legend-item span:last-child {
        display: none;
    }
.map-controls {
        top: 10px;
        right: 10px;
    }
.map-controls button {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }
.map-tooltip {
        max-width: 200px;
        font-size: 0.8rem;
    }
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}
.collector-section {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.badge-collector {
    background: var(--bg-card);
    border-radius: 24px;
    padding: 32px;
    border: 1px solid var(--border-color);
}
.collector-header {
    text-align: center;
    margin-bottom: 32px;
}
.collector-header h2 {
    font-family: 'Alfa Slab One', serif;
    font-size: 2rem;
    color: #fff;
    margin: 0 0 16px;
}
.level-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.level-display .level-num {
    font-family: 'Alfa Slab One', serif;
    font-size: 1.2rem;
    color: var(--purple-primary);
}
.xp-bar {
    width: 200px;
    height: 8px;
    background: #1a1a2e;
    border-radius: 4px;
    overflow: hidden;
}
.xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green-primary), var(--green-dark));
    transition: width 0.3s;
}
.xp-text {
    color: var(--green-primary);
    font-size: 0.9rem;
    font-family: 'Space Mono', monospace;
}
.badge-count {
    color: var(--text-muted);
    margin-top: 8px;
}
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}
.badge-card {
    background: var(--rarity-bg, #1a1a2e);
    border: 2px solid var(--rarity-color, #444);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s;
    position: relative;
    cursor: default;
}
.badge-card.locked {
    opacity: 0.4;
    filter: grayscale(70%);
}
.badge-card.earned:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 20px var(--rarity-color);
}
.badge-card.rarity-mythic.earned {
    animation: mythicGlow 2s infinite;
}
.badge-card.rarity-legendary.earned {
    animation: legendaryGlow 3s infinite;
}
@keyframes mythicGlow {
    0%, 100% { box-shadow: 0 0 10px var(--rarity-color); }
    50% { box-shadow: 0 0 30px var(--rarity-color), 0 0 50px var(--rarity-color); }
}
@keyframes legendaryGlow {
    0%, 100% { box-shadow: 0 0 8px var(--rarity-color); }
    50% { box-shadow: 0 0 20px var(--rarity-color); }
}
.badge-emoji {
    font-size: 36px;
    margin-bottom: 8px;
}
.badge-name {
    font-weight: bold;
    font-size: 0.85rem;
    color: var(--rarity-color, #fff);
    margin-bottom: 4px;
}
.badge-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    min-height: 32px;
    line-height: 1.3;
}
.badge-xp {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.65rem;
    color: var(--green-primary);
    font-family: 'Space Mono', monospace;
}
.badge-rarity {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 0.55rem;
    text-transform: uppercase;
    color: var(--rarity-color);
    letter-spacing: 0.5px;
}
@keyframes notifSlideIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes notifBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.collector-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}
.stat-item {
    text-align: center;
    padding: 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
}
.stat-value {
    font-family: 'Alfa Slab One', serif;
    font-size: 1.5rem;
    color: var(--green-primary);
}
.stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}
@media (max-width: 768px) {
.badge-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}
@keyframes plantBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@keyframes needsWater {
    0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.4); }
    50% { box-shadow: 0 0 25px rgba(59, 130, 246, 0.8); }
}
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px var(--green-glow);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 40px var(--green-glow), 0 0 60px var(--green-glow);
        transform: scale(1.02);
    }
}
@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}
@keyframes celebrationPop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes celebrationBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    75% { transform: scale(1.1) rotate(5deg); }
}
@keyframes rewardSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes slideInLeft {
    0% { transform: translateX(-20px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes tooltipFadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes gyb-pause-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 166, 60, 0.3); }
    50% { box-shadow: 0 0 12px 4px rgba(242, 166, 60, 0.2); }
}
@keyframes gyb-resume-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 166, 60, 0.4); }
    50% { box-shadow: 0 0 20px 8px rgba(242, 166, 60, 0.2); }
}
@keyframes indicatorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes ledPulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}
@keyframes fanSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes airflowPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}
@keyframes airflowMove {
    0% { transform: translateX(0); opacity: 0.8; }
    100% { transform: translateX(-8px); opacity: 0; }
}
@keyframes plantReady {
    0%, 100% {
        box-shadow: 0 0 30px rgba(242, 166, 60, 0.4), inset 0 0 30px rgba(242, 166, 60, 0.1);
    }
    50% {
        box-shadow: 0 0 50px rgba(242, 166, 60, 0.6), inset 0 0 40px rgba(242, 166, 60, 0.2);
    }
}
@keyframes plantCritical {
    0%, 100% { border-color: var(--color-error); background: rgba(239, 68, 68, 0.05); }
    50% { border-color: #ff0000; background: rgba(239, 68, 68, 0.15); }
}
@keyframes plantSway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}
@keyframes sproutIn {
    0% { transform: scale(0) translateY(15px); opacity: 0; }
    60% { transform: scale(1.1) translateY(-3px); opacity: 1; }
    100% { transform: scale(1) translateY(0); }
}
@keyframes plantWilt {
    0%, 100% { transform: rotate(-4deg) scale(0.95); }
    50% { transform: rotate(3deg) scale(0.92); }
}
@keyframes sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
}
@keyframes attention {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
@keyframes needsAttention {
    0%, 100% { background: rgba(251, 191, 36, 0.1); }
    50% { background: rgba(251, 191, 36, 0.3); box-shadow: 0 0 15px rgba(251, 191, 36, 0.5); }
}
@keyframes tutorialIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes welcomeBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes guidePulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(242, 166, 60, 0.4),
                    0 0 20px rgba(242, 166, 60, 0.2);
    }
    50% {
        box-shadow: 0 0 15px rgba(242, 166, 60, 0.6),
                    0 0 40px rgba(242, 166, 60, 0.3);
    }
}
@keyframes guidePulseRing {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }
}
@keyframes guideTipFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes guideDotPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}
@keyframes needsActionPulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(251, 191, 36, 0.4);
    }
    50% {
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.8),
                    0 0 40px rgba(251, 191, 36, 0.4);
    }
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.login-form input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid rgba(242, 166, 60, 0.3);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s ease;
}
.login-form input:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 15px rgba(242, 166, 60, 0.2);
}
.login-form input::placeholder {
    color: var(--text-muted);
}
/* Skærmnavn ved oprettelse (vises først, når man trykker "Opret konto") */
.rarity-badge.standard {
    color: var(--text-muted);
    font-size: 0.7rem;
}
@media (prefers-reduced-motion: no-preference) {
@keyframes gybMythicPulse {
        0%, 100% { box-shadow: 0 0 14px rgba(236, 72, 153, 0.4); }
        50% { box-shadow: 0 0 26px rgba(6, 182, 212, 0.6); }
    }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
}
.stat-item {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
@keyframes milestoneNotif {
    0%, 100% { box-shadow: 0 0 30px rgba(249, 115, 22, 0.4); }
    50% { box-shadow: 0 0 50px rgba(249, 115, 22, 0.7); }
}
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--green-primary);
    transition: all 0.3s ease;
    transform-origin: center;
}
.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.nav-overlay.active {
    display: block;
    opacity: 1;
}
.newsletter-feedback {
    margin-top: 1rem;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    text-align: center;
    animation: fadeIn 0.3s ease;
}
.newsletter-feedback.success {
    background: rgba(242, 166, 60, 0.15);
    border: 1px solid var(--green-primary);
    color: var(--green-bright);
}
.newsletter-feedback.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--color-error);
    color: var(--color-error-light);
}
.newsletter-input:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(242, 166, 60, 0.2);
}
.map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #0c1929 0%, #0a1628 50%, #071018 100%);
    z-index: 50;
    gap: 1rem;
    transition: opacity 0.5s ease;
}
.map-loading.hidden {
    opacity: 0;
    pointer-events: none;
}
.map-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--green-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.map-loading p {
    color: var(--text-muted);
    font-size: 0.9rem;
}
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    padding: 12px 24px;
    background: var(--green-primary);
    color: #000;
    font-weight: 600;
    border-radius: 8px;
    z-index: 10010;
    transition: top 0.2s ease;
    text-decoration: none;
}
.skip-link:focus {
    top: 16px;
}
@media (prefers-reduced-motion: reduce) {
*,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
.stars,
    .bg-animation,
    .smoke-particle,
    .joint-smoke {
        animation: none !important;
    }
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid var(--green-primary);
    outline-offset: 2px;
}
@keyframes timingBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
@media (max-width: 768px) {
.map-controls button {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
}
@media (max-width: 768px) {
.legend-title,
    .news-date,
    .badge-xp,
    .badge-rarity,
    .farm-visit-plant-name,
    .equip-spec-label,
    .strain-info-icon,
    .harvest-stat-label,
    .seed-info-icon,
    .tent-btn .tent-tier,
    .lab-test-option .test-price,
    .collection-stat-item .stat-label,
    .bh-label,
    .ph-status,
    .trichome-text {
        font-size: 0.75rem;
    }
}
@keyframes processing-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(251, 191, 36, 0.2); }
    50% { box-shadow: 0 0 15px rgba(251, 191, 36, 0.4); }
}
.rarity-badge {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
.rarity-uncommon {
    border-color: rgba(242, 166, 60, 0.5);
}
.rarity-rare {
    border-color: rgba(59, 130, 246, 0.5);
}
.rarity-epic {
    border-color: rgba(127, 174, 94, 0.5);
}
.rarity-legendary {
    border-color: rgba(234, 179, 8, 0.5);
}
.rarity-diamond {
    border-color: rgba(6, 182, 212, 0.5);
}
.rarity-mythic {
    border-color: rgba(236, 72, 153, 0.5);
}
@keyframes pulse-blue {
    0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.4); }
    50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.7); }
}
@keyframes pulse-purple {
    0%, 100% { box-shadow: 0 0 15px rgba(127, 174, 94, 0.4); }
    50% { box-shadow: 0 0 25px rgba(127, 174, 94, 0.7); }
}
@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 20px rgba(234, 179, 8, 0.4); }
    50% { box-shadow: 0 0 30px rgba(234, 179, 8, 0.8); }
}
@keyframes rainbow-glow {
    0% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.6); }
    16% { box-shadow: 0 0 20px rgba(234, 179, 8, 0.6); }
    33% { box-shadow: 0 0 20px rgba(242, 166, 60, 0.6); }
    50% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.6); }
    66% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); }
    83% { box-shadow: 0 0 20px rgba(127, 174, 94, 0.6); }
    100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.6); }
}
@keyframes cosmic-pulse {
    0%, 100% {
        box-shadow: 0 0 30px rgba(236, 72, 153, 0.5), inset 0 0 20px rgba(127, 174, 94, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(127, 174, 94, 0.6), inset 0 0 30px rgba(59, 130, 246, 0.3);
    }
}
.consent-banner {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: min(640px, calc(100vw - 2rem));
    padding: 0.85rem 1.25rem;
    background: rgba(10, 14, 12, 0.97);
    border: 1px solid rgba(242, 166, 60, 0.35);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    animation: consentSlideUp 0.4s ease;
}
@keyframes consentSlideUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.consent-banner .consent-text {
    color: var(--text-secondary, #ccc);
    font-size: 0.85rem;
    line-height: 1.5;
}
.consent-banner .consent-text a {
    color: var(--green-primary, #f2a63c);
    text-decoration: underline;
}
.consent-banner .consent-ok {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    background: var(--green-primary, #f2a63c);
    color: #12280f;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
}
.consent-banner .consent-ok:hover {
    filter: brightness(1.1);
}
@media (max-width: 500px) {
/* Lavere og helt i bunden på telefon (Fable 21/10 L7): lå før midt på skærmen oven i 4:20-svaret og kloden */
.consent-banner {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
        padding: 0.65rem 0.9rem;
    }
.consent-banner .consent-text {
        font-size: 0.78rem;
        line-height: 1.4;
    }
}
.nav-logo {
    font-family: 'Alfa Slab One', serif;
    font-size: 20px;
    font-weight: 400;
    color: #f3e9d0;
    letter-spacing: 0.5px;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.nav-logo::before {
    content: '\1F341';
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f2a63c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.nav-links a {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #e9dcc0;
}
.nav-links a:hover { color: #f6c56f; }
.nav-links a.active { color: #f2a63c; }
.nav-links li:last-child a {
    background: #ec6b34;
    color: #12280f;
    padding: 8px 18px;
    border-radius: 4px;
}
.nav-links li:last-child a:hover { background: #f2a63c; color: #12280f; }
.hero {
    position: relative;
    background: linear-gradient(170deg, #1d4023 0%, #12280f 100%);
}
.hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    background: var(--bakke-band);
}
.hero-leaf {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f2a63c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
    margin: 0 auto 18px;
}
.hero-kicker {
    display: block;
    font-family: 'Space Mono', monospace;
    color: #f2a63c;
    letter-spacing: 6px;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.hero-subtitle {
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
    font-size: clamp(44px, 7vw, 76px);
    color: #f2a63c;
    line-height: 0.95;
    text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
}
.main-answer {
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
    font-size: clamp(90px, 17vw, 148px);
    line-height: 0.88;
    text-shadow: 7px 7px 0 rgba(0, 0, 0, 0.35);
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    animation: none;
}
.main-answer.no { color: #f3e9d0; }
.main-answer.yes { color: #f2a63c; }
.current-time-display {
    font-family: 'Space Mono', monospace;
    color: #cbe0c0;
    font-size: 17px;
}
.current-time-display #currentTime { color: #f2a63c; font-weight: 700; }
.cta-button {
    position: relative;
    display: inline-block;
    background: #f2a63c;
    color: #12280f;
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
    font-size: 16px;
    padding: 14px 44px;
    border: none;
    border-radius: 4px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4);
    overflow: hidden;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0.5px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta-button::before,
.cta-button::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    border-radius: 0;
    background-image: none;
    opacity: 1;
    transform: none;
    animation: none;
}
.cta-button::before { left: 0; background: #e34f2b; }
.cta-button::after { right: 0; background: #7fae5e; left: auto; }
.cta-button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
    background: #f2a63c;
}
.section-title {
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 40px);
    color: #f3e9d0;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    text-shadow: none;
}
.section-title .accent { color: #f2a63c; }
.section-subtitle {
    font-family: 'Space Mono', monospace;
    color: #a9c2a0;
    font-size: 15px;
}
.map-section { background: #12280f; border-top: 4px solid #e34f2b; }
.countdown-section { background: linear-gradient(170deg, #1d4023 0%, #12280f 100%); border-top: 4px solid #f2a63c; }
.facts-section { background: #163019; }
.collector-section { background: #12280f; border-top: 4px solid #7fae5e; }
.history-section { background: #163019; border-top: 4px solid #e34f2b; }
.newsletter-section { background: linear-gradient(170deg, #1d4023 0%, #12280f 100%); border-top: 4px solid #f2a63c; }
.events-section { background: #12280f; border-top: 4px solid #e34f2b; }
.status-card {
    background: #1d4023;
    border: 2px solid rgba(243, 217, 166, 0.22);
    border-radius: 6px;
    backdrop-filter: none;
}
.status-card-title {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #f2a63c;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.status-card-value {
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1;
}
.status-card-desc { color: #a9c2a0; font-size: 13px; }
.countdown-box {
    background: #12280f;
    border: 2px solid #f2a63c;
    border-radius: 8px;
    box-shadow: none;
}
.countdown-container .countdown-box:nth-child(1) { border-color: #e34f2b; }
.countdown-container .countdown-box:nth-child(3) { border-color: #7fae5e; }
.countdown-number {
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
    color: #f3e9d0;
    text-shadow: none;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
}
.countdown-label {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #a9c2a0;
}
.facts-widget {
    background: #12280f;
    border: 2px solid rgba(243, 217, 166, 0.2);
    border-radius: 8px;
}
.facts-label {
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
    color: #f2a63c;
}
.facts-text { color: #d7e6cf; }
.xp-bar {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    overflow: hidden;
}
.xp-fill {
    background: linear-gradient(90deg, #e34f2b, #f2a63c, #7fae5e);
    border-radius: 999px;
}
.collector-stats .stat-item {
    background: #1d4023;
    border-radius: 6px;
    border: none;
    border-top: 4px solid #f2a63c;
}
.collector-stats .stat-item:nth-child(1) { border-top-color: #e34f2b; }
.collector-stats .stat-item:nth-child(3) { border-top-color: #7fae5e; }
.collector-stats .stat-value {
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
    color: #f3e9d0;
}
.collector-stats .stat-label {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: #a9c2a0;
    text-transform: uppercase;
}
.timeline-content {
    background: #1d4023;
    border: none;
    border-radius: 6px;
}
.timeline-year {
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
    color: #f2a63c;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
}
.timeline-content h3 {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 800;
    color: #f3e9d0;
}
.newsletter-box { background: transparent; border: none; box-shadow: none; }
.newsletter-input {
    background: #f3e9d0;
    color: #12280f;
    border: none;
    border-radius: 4px;
    font-family: 'Space Mono', monospace;
}
.newsletter-input::placeholder { color: #5f7a56; }
.event-card {
    background: #1d4023;
    border: none;
    border-top: 4px solid #e34f2b;
    border-radius: 6px;
}
.events-grid .event-card:nth-child(2) { border-top-color: #f2a63c; }
.events-grid .event-card:nth-child(3) { border-top-color: #7fae5e; }
.event-date {
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
    color: #f2a63c;
}
.event-card h3 { font-family: 'Bitter', Georgia, serif; font-weight: 800; color: #f3e9d0; }
.event-tag {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    color: #a9c2a0;
    background: none;
    border: none;
    padding: 0;
}
.footer {
    position: relative;
    background: #0c1d09;
    border-top: none;
    padding-top: 58px;
}
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: var(--bakke-band);
}
.footer-logo {
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
    color: #f3e9d0;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
}
.footer-links a { font-family: 'Space Mono', monospace; font-size: 13px; }
.footer-bottom { color: #5f7a56; }
.d3-map-container {
    background: #0e2410;
    border: 2px solid rgba(243, 217, 166, 0.22);
    border-radius: 6px;
}
.map-info-panel, .map-legend {
    background: #1d4023;
    border: none;
    border-radius: 6px;
}
.map-info-panel { border-left: 6px solid #f2a63c; }
.map-info-title, .legend-title {
    font-family: 'Space Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #f2a63c;
}
.map-info-city { font-family: 'Alfa Slab One', serif; font-weight: 400; color: #f3e9d0; }
.active-zones-container { background: #1d4023; border: none; border-radius: 6px; }
.guest-cta-btn, .consent-banner .consent-ok {
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
}
.hero-subtitle { text-transform: none; }
.next-420-widget { text-decoration: none; }
.next-420-widget .next-420-widget-city {
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
    color: #f3e9d0;
    text-decoration: none;
    border-bottom: none;
}
.next-420-widget .next-420-widget-label {
    font-family: 'Space Mono', monospace;
    color: #f2a63c;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.next-420-widget .next-420-widget-time { color: #a9c2a0; font-family: 'Space Mono', monospace; }
.next-420-widget .next-420-widget-number {
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
    color: #f2a63c;
}
.next-420-widget .next-420-widget-cta { color: #d7e6cf; }
.footer-logo {
    text-transform: none;
    letter-spacing: 0.5px;
}
.countdown-section .section-title,
.countdown-section .section-subtitle,
.events-section .section-title,
.events-section .section-subtitle {
    text-align: center;
    width: 100%;
    display: block;
}
.status-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) {
.status-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.status-grid { grid-template-columns: 1fr; }
}
.map-controls button {
    background: #1d4023;
    border: 1px solid rgba(243, 217, 166, 0.3);
    color: #f3e9d0;
}
.map-controls button:hover { background: #234d2a; border-color: #f2a63c; }
.answer-teaser {
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
    font-size: clamp(64px, 12vw, 110px);
    line-height: 0.9;
    color: #a9c2a0;
    text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
    min-height: 1em;
}
.answer-teaser .teaser-text {
    display: inline-block;
    animation: teaserPulse 0.3s ease infinite;
}
@keyframes teaserPulse {
    0%, 100% { transform: scale(1) rotate(-1deg); opacity: 0.55; }
    50% { transform: scale(1.07) rotate(1deg); opacity: 0.95; }
}
@keyframes answerStamp {
    0% { transform: scale(2.4) rotate(-6deg); opacity: 0; }
    55% { transform: scale(0.94) rotate(1.5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.answer-teaser {
    font-size: clamp(90px, 17vw, 148px);
    line-height: 0.88;
}
.next-420-widget .widget-quote {
    font-family: 'Bitter', Georgia, serif;
    font-style: italic;
    font-size: 15px;
    color: #d7e6cf;
    line-height: 1.5;
    margin-bottom: 10px;
}
.next-420-widget .widget-quote em {
    color: #f2a63c;
    font-weight: 600;
}
.next-420-widget .next-420-widget-cta {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: #f2a63c;
}
.next-420-widget .next-420-widget-cta {
    display: inline-block;
    background: #f2a63c;
    color: #12280f;
    font-family: 'Alfa Slab One', serif;
    font-weight: 400;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: 4px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
    margin-top: 6px;
}
.next-420-widget:hover .next-420-widget-cta { background: #f6c56f; }
@keyframes demoReadyPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(242, 166, 60, 0); }
    50% { box-shadow: 0 0 18px rgba(242, 166, 60, 0.55); }
}
@keyframes demoPopUp {
    0% { opacity: 0; transform: translate(-50%, 8px); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -22px); }
}
.world-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translate(-50%, 80px);
    z-index: 9500;
    background: #1d4023;
    border: 2px solid #f2a63c;
    border-radius: 6px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4);
    padding: 12px 22px;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #f3e9d0;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease;
    max-width: calc(100vw - 32px);
    text-align: center;
}
.world-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.nav-logo::before { content: none; }
.nav-logo img {
    height: 42px;
    width: auto;
    display: block;
}
.hero-leaf {
    width: 110px;
    height: 110px;
    background: none;
    border-radius: 0;
    box-shadow: none;
}
.hero-leaf img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.3));
}
.footer-logo img {
    height: 52px;
    width: auto;
    display: block;
    margin: 0 auto;
}
@media (max-width: 600px) {
.nav-logo img { height: 34px; }
}
@keyframes gardenerWorkPop {
    0% { opacity: 0; transform: translateY(6px) scale(0.6); }
    15% { opacity: 1; transform: translateY(0) scale(1.15); }
    30% { transform: translateY(0) scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-10px) scale(0.9); }
}
@keyframes payrollStrikePulse {
    0%, 100% { box-shadow: 0 0 0 rgba(227, 79, 43, 0); }
    50% { box-shadow: 0 0 14px rgba(227, 79, 43, 0.45); }
}
.celebration-banner h1 {
    font-weight: 400;
    text-shadow: 0 0 14px var(--green-glow), 3px 3px 0 rgba(0, 0, 0, 0.65);
}
.location-announcement .city-name {
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
}
.location-announcement .country-name {
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
}
@media (pointer: coarse) {
button, .gyb-tab, .shop-tab, .gyb-subtab, .gyb-hub-btn { touch-action: manipulation; }
* { -webkit-tap-highlight-color: rgba(127, 174, 94, 0.25); }
button:active { transform: scale(0.97); }
.smoke-layer-3, .fog-overlay, .smoke-noise { display: none; }
.smoke-layer-2, .smoke-fill { filter: none; mix-blend-mode: normal; opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
button:active { transform: none; }
}
@media (max-width: 768px) {
input, select, textarea { font-size: 16px !important; }
.consent-banner { bottom: calc(10px + env(safe-area-inset-bottom)); width: calc(100% - 24px); }
/* 64 px var plads til GYB-knapper, som ikke er live (Fable 21/10 L7) */
main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media (max-width: 768px) {
.nav-toggle {
        display: flex;
    }
.section-title {
        flex-wrap: wrap;
    }
.events-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    }
}
/* 420 Collector på serveren (2026-10-10): forklaring og login-boks for gæster */
.collector-intro { margin: 0 0 14px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }
.collector-intro b { color: var(--text-primary, #f3ead7); }
.collector-login { margin: 0 0 16px; padding: 12px 16px; border: 1px dashed rgba(240, 160, 48, .6); border-radius: 12px; background: rgba(240, 160, 48, .08); }
.collector-login[hidden] { display: none; }
.collector-login a { color: #f0a030; font-weight: 700; }
/* Forsiden før lanceringen (2026-10-11) */
/* Ankre (#verdenskort, #historie …) lander under den faste menu i stedet for bag den */
section[id] { scroll-margin-top: 90px; }
/* Collector: mærkernes småtekst var 9-11 px (under 768 px gør en ældre regel den 12 px) */
.badge-desc { font-size: 0.78rem; }
.badge-card { padding-bottom: 30px; }
/* plads til sjældenheden nederst, så den ikke lægger sig oven i en lang beskrivelse */
@media (min-width: 769px) {
.badge-xp { font-size: 0.7rem; }
.badge-rarity { font-size: 0.65rem; }
}
@media (max-width: 768px) {
/* Verdenskortet på mobil: infoboksen og forklaringen lå oven på kortet og dækkede det helt, og forklaringen
       viste kun farvefelter uden tekst. Nu står kortet øverst og boksene under det. */
.d3-map-container { display: flex; flex-direction: column; min-height: 0; }
.d3-map-container svg { order: -1; flex: none; }
.map-info-panel, .map-legend { position: static; margin: 0 10px 10px; width: auto; min-width: 0; }
.map-info-panel { order: 1; padding: 0.75rem 1rem; }
.map-legend { order: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 0.6rem 0.9rem; }
.map-legend .legend-title { display: block; width: 100%; margin-bottom: 2px; }
.map-legend .legend-item { margin: 0; }
.map-legend .legend-item span:last-child { display: inline; }
/* Kortet er nu kun så højt som selve verden (erdet420.js) – knapperne ligger vandret i hjørnet, så de ikke dækker et land */
.map-controls { flex-direction: row; top: 6px; right: 6px; gap: 6px; }
.map-controls button { width: 34px; height: 34px; font-size: 18px; }
}
@media (max-width: 600px) {
/* Collector på mobil: to mærker pr. række i stedet for 16 under hinanden */
.badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.badge-card { padding: 12px 8px 28px; }
}
/* ===== Klar til lancering (2026-10-11, del 2) ===== */
/* Siden må aldrig blive bredere end skærmen: rystelsen ved 4:20 flytter indholdet 5 px sidelæns, og på en telefon fik det
   browseren til at zoome ud (iPhone SE: 320 → 323 px). KUN på body: står den også på html, føres body's overflow ikke videre
   til vinduet, og mobilmenuens rul-lås (body.style.overflow = 'hidden') holder op med at virke (Fable 11/10, M1).
   clip laver ingen scroll-container, så position: sticky virker stadig. Safari < 16 kender ikke clip → hidden. */
body { overflow-x: clip; }
@supports not (overflow: clip) {
body { overflow-x: hidden; }
}
/* Åbner man menuen midt i 4:20-fejringen, skal "4:20!" ikke stå oven i menupunkterne */
body.menu-aaben .celebration-banner, body.menu-aaben .location-announcement { visibility: hidden; }
/* 4:20-øjeblikket: "4:20!" har sin egen mørke glorie og holder sig inden for skærmen (før lå den skarpt oven i
   "JA!" og overskriften, og på mobil blev den skåret af i højre kant) */
.celebration-banner {
    width: max-content;
    max-width: 92vw;
    box-sizing: border-box;
    padding: 1.5rem 2.5rem;
    background: radial-gradient(closest-side, rgba(10, 26, 10, 0.72), rgba(10, 26, 10, 0));
}
.celebration-banner h1 { margin-bottom: 0.25rem; }
.celebration-banner p { overflow-wrap: anywhere; }
.location-announcement { width: max-content; max-width: 92vw; }
/* "4:20 NU i …" under kortet vises kun, når det er 4:20 et sted (JS sætter hidden) */
.active-zones-container[hidden] { display: none; }
/* Statuskortene står nu under spilrækken (spillene skulle højere op) */
.status-sektion { max-width: 1200px; margin: 0 auto; padding: 0 2rem 3rem; }
@media (max-width: 700px) {
.status-sektion { padding: 0 1rem 2.5rem; }
}
/* Statuskortene to og to på mobil i stedet for fire under hinanden */
@media (max-width: 520px) {
.status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.status-card { padding: 0.9rem 0.8rem; }
.status-card-title { font-size: 10px; letter-spacing: 0.5px; }
.status-card-value { font-size: 32px; }
.status-card-desc { font-size: 12px; }
}
/* Spilrækken højt oppe på forsiden */
.spilraekke { padding: 4rem 2rem 3.5rem; max-width: 1200px; margin: 0 auto; text-align: center; }
.spilraekke .section-title { display: block; text-align: center; }
.spilraekke-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 1.5rem; text-align: left; }   /* 3/11: fem spil – sidste række centreres (Fable L5) */
.spilraekke-grid > .spilraekke-kort { flex: 0 1 calc((100% - 40px) / 3); }
.spilraekke-kort {
    display: flex; flex-direction: column; background: #1d4023; border: 2px solid rgba(243, 217, 166, 0.22);
    border-radius: 6px; overflow: hidden; color: #f3e9d0; text-decoration: none; transition: border-color 0.2s, transform 0.2s;
}
.spilraekke-kort:hover, .spilraekke-kort:focus-visible { border-color: #f2a63c; transform: translateY(-3px); }
.spilraekke-kort picture { display: block; }
.spilraekke-kort img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.spilraekke-tekst { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 6px; }
.spilraekke-tekst strong { font-family: 'Alfa Slab One', serif; font-weight: 400; font-size: 1.3rem; color: #f2a63c; }
.spilraekke-tekst span { color: #a9c2a0; font-size: 0.95rem; }
.spilraekke-knap {
    align-self: flex-start; margin: 8px 16px 16px; padding: 8px 18px; border-radius: 6px; background: #f2a63c;
    color: #12280f; font-family: 'Alfa Slab One', serif; font-size: 0.95rem; letter-spacing: 0.5px;
}
.spilraekke-alle { display: inline-block; margin-top: 1.5rem; color: #f2a63c; font-weight: 700; text-decoration: none; }
.spilraekke-alle:hover { text-decoration: underline; }
@media (max-width: 700px) {
/* På mobil: kompakte rækker med lille billede, så spillene ikke fylder tre skærme */
.spilraekke { padding: 3rem 1rem 2.5rem; }
.spilraekke-grid { gap: 10px; }
.spilraekke-grid > .spilraekke-kort { flex-basis: 100%; }
.spilraekke-kort { flex-direction: row; align-items: center; }
.spilraekke-kort picture { flex: none; width: 112px; }
.spilraekke-kort img { aspect-ratio: 1 / 1; height: 88px; }
.spilraekke-tekst { flex: 1; min-width: 0; padding: 10px 12px; }
.spilraekke-tekst strong { font-size: 1.1rem; }
.spilraekke-tekst span { font-size: 0.85rem; }
.spilraekke-knap { align-self: center; margin: 0 12px 0 0; padding: 10px 14px; }
}
/* Påmindelse i kalenderen */
.kalender-intro { margin: 1.5rem 0 0.6rem; color: #d7e6cf; text-align: center; }
.kalender-knapper { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.event-card .kalender-knapper { justify-content: flex-start; margin: 0.4rem 0 1rem; }
.kalender-knap {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 6px;
    border: 2px solid rgba(242, 166, 60, 0.6); color: #f3e9d0; text-decoration: none; font-weight: 700; font-size: 0.95rem;
    background: rgba(242, 166, 60, 0.08);
}
.kalender-knap:hover, .kalender-knap:focus-visible { border-color: #f2a63c; background: rgba(242, 166, 60, 0.18); }