:root {
    /* Palette - Ultra-Premium "Stripe-like" */
    --primary: #0A2540;     /* Deep Navy */
    --primary-dark: #05192E;
    --accent: #635BFF;      /* Stripe Violet */
    --accent-light: #7A73FF;
    --accent-dark: #4B45C6;
    --accent-glow: rgba(99, 91, 255, 0.5);
    --success: #3ECF8E;     /* Vibrant Mint */
    --warning: #F5A623;
    --danger: #FF5A5F;

    --text-main: #1A1F36;   /* Ink */
    --text-light: #4F566B;  /* Slate */
    --text-lighter: #697386;
    --text-white: #FFFFFF;

    /* Glassmorphism Variables */
    --surface-glass: rgba(255, 255, 255, 0.82);
    --surface-glass-hover: rgba(255, 255, 255, 0.92);
    --border-glass: rgba(255, 255, 255, 0.6);
    --glass-blur: blur(24px) saturate(180%);

    /* Refined Shadows for Depth - Updated to be smoother */
    --shadow-xs: 0 2px 5px -1px rgba(50, 50, 93, 0.25), 0 1px 3px -1px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 5px rgba(50, 50, 93, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 6px 12px -2px rgba(50, 50, 93, 0.15), 0 3px 7px -3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 13px 27px -5px rgba(50, 50, 93, 0.18), 0 8px 16px -8px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 30px 60px -12px rgba(50, 50, 93, 0.2), 0 18px 36px -18px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 40px var(--accent-glow);
    --shadow-inner: inset 0 1px 0 0 rgba(255, 255, 255, 0.5);

    /* Typography */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'Playfair Display', serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* Animations */
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: var(--font-ui);
    background-color: var(--primary);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    letter-spacing: -0.01em;
}

::selection {
    background: rgba(99, 91, 255, 0.3);
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--primary);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 700;
}

/* --- Welcome Screen --- */
#welcome-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10000;
    background: radial-gradient(circle at top left, #1a2f4e 0%, #0A2540 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    transition: opacity 1.2s var(--ease-out-quart), visibility 1.2s var(--ease-out-quart);
    overflow: hidden;
}

/* Background Gradients */
#welcome-screen::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background:
        radial-gradient(circle at 50% 50%, rgba(99, 91, 255, 0.15), transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(62, 207, 142, 0.1), transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05), transparent 40%);
    animation: drift 60s infinite alternate cubic-bezier(0.37, 0, 0.63, 1);
    pointer-events: none;
}

/* Noise Texture */
#welcome-screen::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.6;
    pointer-events: none;
}

@keyframes drift {
    0% { transform: translate(-5%, -5%) rotate(0deg) scale(1); }
    100% { transform: translate(5%, 5%) rotate(5deg) scale(1.1); }
}

#welcome-screen.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#welcome-title {
    font-size: clamp(4rem, 12vw, 8rem);
    background: linear-gradient(135deg, #ffffff 30%, #a0a6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    margin-bottom: 2rem;
    letter-spacing: -0.04em;
    line-height: 0.95;
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    animation: slideUpFade 1.6s var(--ease-out-quart) forwards 0.2s;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.4));
}

#welcome-subtitle {
    font-family: var(--font-ui);
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    color: rgba(255, 255, 255, 0.75);
    max-width: 600px;
    line-height: 1.6;
    margin-bottom: 4rem;
    font-weight: 300;
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(30px);
    animation: slideUpFade 1.6s var(--ease-out-quart) forwards 0.5s;
}

#begin-button {
    position: relative;
    padding: 20px 56px;
    font-family: var(--font-ui);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #ffffff;
    background: var(--accent);
    transition: background 0.5s var(--ease-smooth), transform 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s var(--ease-smooth);
    opacity: 0;
    transform: translateY(30px);
    animation: slideUpFade 1.6s var(--ease-out-quart) forwards 0.8s;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.2);
    z-index: 10;
}

#begin-button::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: none;
}

#begin-button:hover {
    background: var(--accent-light);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(50, 50, 93, 0.2), 0 5px 15px rgba(0, 0, 0, 0.17);
}

#begin-button:hover::before {
    animation: shine 0.75s;
}

@keyframes shine {
    100% { left: 200%; }
}

@keyframes slideUpFade {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Map Base --- */
#app-shell {
    position: relative;
    width: 100%;
    height: 100%;
}

#map {
    width: 100vw; height: 100vh;
    background-color: #F5F9FC;
    z-index: 1;
}

.leaflet-tile-pane {
    filter: saturate(0.5) contrast(1.02) brightness(1.04) hue-rotate(200deg) invert(0.05);
}

#map::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, transparent 30%, rgba(10, 37, 64, 0.15) 100%);
    pointer-events: none;
    z-index: 400;
}

.leaflet-control-container { display: none; }

/* --- Markers --- */
.continent-marker {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.6s var(--ease-elastic);
    will-change: transform;
}

.continent-marker:hover {
    z-index: 1000 !important;
    transform: scale(1.15);
}

.pin {
    position: relative;
    width: 80px; height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.pin-inner {
    width: 20px; height: 20px;
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    border-radius: 50%;
    z-index: 2;
    box-shadow:
        0 0 0 3px #fff,
        0 4px 12px rgba(99, 91, 255, 0.4);
    transition: all 0.5s var(--ease-elastic);
}

.pin-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: 0;
    animation: pulse-ring 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.pin-ring::after {
    content: '';
    position: absolute; top: -50%; left: -50%; width: 220%; height: 220%;
    border-radius: 50%;
    border: 1px solid var(--accent-light);
    opacity: 0.3;
    animation: pulse-ring-inner 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite 0.4s;
}

.continent-marker:hover .pin-inner {
    transform: scale(1.4);
    background: linear-gradient(135deg, var(--success), #2cb575);
    box-shadow: 0 0 0 4px #fff, 0 8px 20px rgba(62, 207, 142, 0.5);
}

.continent-marker:hover .pin-ring {
    border-color: var(--success);
    animation-duration: 1.5s;
}
.continent-marker:hover .pin-ring::after {
    border-color: var(--success);
    animation-duration: 1.5s;
}

/* Visited Marker */
.visited-marker .pin-inner {
    background: linear-gradient(135deg, var(--success), #2cb575);
    box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(62, 207, 142, 0.4);
    animation: glow-pulse 3s infinite alternate;
}
.visited-marker .pin-ring {
    border-color: var(--success);
    opacity: 0.15;
    animation: none;
}
.visited-marker:hover .pin-inner {
    box-shadow: 0 0 0 4px #fff, 0 8px 20px rgba(62, 207, 142, 0.6);
    animation: none;
}

@keyframes glow-pulse {
    0% { box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(62, 207, 142, 0.4); }
    100% { box-shadow: 0 0 0 3px #fff, 0 4px 20px rgba(62, 207, 142, 0.8), 0 0 10px rgba(62, 207, 142, 0.5); }
}

@keyframes pulse-ring {
    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    40% { opacity: 0.35; }
    100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}
@keyframes pulse-ring-inner {
     0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    40% { opacity: 0.2; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* --- Glass Sidebar (Desktop) --- */
#sidebar {
    position: absolute;
    top: 32px; left: 32px; bottom: 32px;
    width: 560px; /* Wider for premium editorial feel */
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.75));
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    box-shadow:
        var(--shadow-xl),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    z-index: 1000;
    transform: perspective(1500px) translateX(-110%) rotateY(15deg) scale(0.9);
    transform-origin: left center;
    transition:
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.6s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

#sidebar.active {
    transform: perspective(1500px) translateX(0) rotateY(0deg) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* --- Glass Sheet (Mobile) --- */
#bottom-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 85vh;
    max-height: 92vh;
    padding-bottom: env(safe-area-inset-bottom, 24px);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.96));
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15), 0 -1px 0 rgba(255,255,255,0.5);
    z-index: 1000;
    transform: translateY(105%);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    will-change: transform;
    pointer-events: none;
}

#bottom-sheet.active {
    transform: translateY(0);
    pointer-events: auto;
}

.drag-handle {
    width: 40px; height: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 100px;
    margin: 12px auto 8px;
    transition: all 0.3s ease;
}

#bottom-sheet:active .drag-handle {
    width: 50px;
    background: rgba(0, 0, 0, 0.3);
}

@media (min-width: 769px) { #bottom-sheet { display: none !important; } }
@media (max-width: 768px) { #sidebar { display: none !important; } }

/* --- Content Styling --- */
.content-header {
    padding: 48px 48px 32px;
    position: relative;
    flex-shrink: 0;
}

.content-header h2 {
    font-size: 4rem;
    margin-bottom: 12px;
    letter-spacing: -0.04em;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-quart);
    background: linear-gradient(135deg, var(--primary) 0%, #32325d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
}

.content-header p {
    font-family: var(--font-ui);
    font-size: 1.25rem;
    color: var(--text-light);
    font-weight: 400;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.7s var(--ease-out-quart) 0.1s, transform 0.7s var(--ease-out-quart) 0.1s;
}

.content-body {
    padding: 0 48px 64px;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(10, 37, 64, 0.1) transparent;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.7s var(--ease-out-quart) 0.2s, transform 0.7s var(--ease-out-quart) 0.2s;
}

.active .content-header h2,
.active .content-header p,
.active .content-body {
    opacity: 1;
    transform: translateY(0);
}

/* Custom Scrollbar - Ultra Minimal */
.content-body::-webkit-scrollbar { width: 6px; }
.content-body::-webkit-scrollbar-thumb {
    background: rgba(10, 37, 64, 0.15);
    border-radius: 100px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.3s;
}
.content-body:hover::-webkit-scrollbar-thumb { background-color: rgba(10, 37, 64, 0.3); }
.content-body::-webkit-scrollbar-track { background: transparent; margin: 24px 0; }

/* Facts Cards */
.fact-card {
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-xs);
    transition: all 0.4s var(--ease-smooth);
    position: relative;
    overflow: hidden;
}

.fact-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-md);
    background: rgba(255,255,255,0.95);
    border-color: #fff;
}

.fact-card p {
    font-size: 1.05rem;
    color: var(--text-main);
    line-height: 1.6;
}

.fact-card strong {
    color: var(--accent);
    transition: color 0.5s var(--ease-smooth);
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    font-weight: 700;
}

/* Gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 40px 0;
}

.gallery-grid img {
    width: 100%; height: 160px;
    object-fit: cover;
    border-radius: 16px;
    transition: all 0.5s var(--ease-out-quart);
    box-shadow: var(--shadow-xs);
    cursor: zoom-in;
    filter: brightness(0.95);
}

.gallery-grid img:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
    z-index: 10;
    filter: brightness(1.05);
}

.gallery-grid img:first-child {
    grid-column: span 2;
    height: 240px;
}

/* Close Button */
.close-btn {
    position: absolute;
    top: 24px; right: 24px;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.3);
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s var(--ease-smooth);
    z-index: 10;
    backdrop-filter: blur(4px);
}

.close-btn:hover {
    background: #fff;
    transform: rotate(90deg);
    box-shadow: var(--shadow-sm);
    color: var(--danger);
}
.close-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* Read More */
.read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1.5rem;
    padding: 12px 28px;
    background-color: var(--primary);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    border-radius: 50px;
    transition: all 0.3s var(--ease-smooth);
    font-size: 0.95rem;
    box-shadow: 0 4px 10px rgba(10, 37, 64, 0.2);
}

.read-more-link:hover {
    background-color: var(--accent);
    transition: color 0.5s var(--ease-smooth);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 91, 255, 0.3);
}

/* Loader */
.loader {
    position: absolute; top: 50%; left: 50%;
    width: 48px; height: 48px;
    border: 3px solid rgba(99, 91, 255, 0.1);
    border-radius: 50%;
    border-top-color: var(--accent);
    transition: color 0.5s var(--ease-smooth);
    animation: spin 0.8s ease-in-out infinite;
    z-index: 500;
    transform: translate(-50%, -50%);
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* Boat */
.sailing-boat {
    transition: transform 0.1s linear;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* --- Map Controls --- */
.map-controls {
    position: absolute;
    bottom: 32px; right: 32px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.map-controls button {
    width: 56px; height: 56px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    color: var(--primary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: var(--shadow-md);
}

.map-controls button:hover {
    background: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(99, 91, 255, 0.25);
    color: var(--accent);
    transition: color 0.5s var(--ease-smooth);
    border-color: #fff;
}

.map-controls button:active {
    transform: translateY(1px) scale(0.95);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
    .map-controls { bottom: 24px; right: 24px; gap: 12px; }
    .map-controls button { width: 48px; height: 48px; }
}

/* --- Mobile Optimizations --- */
@media (max-width: 768px) {
    #bottom-sheet {
        height: 85vh;
        padding-bottom: env(safe-area-inset-bottom, 24px);
    }

    .content-header {
        padding: 32px 24px 16px;
    }

    .content-header h2 {
        font-size: 2.75rem; /* Smaller heading on mobile */
    }

    .content-body {
        padding: 0 24px 80px; /* More bottom padding for scroll */
    }

    .close-btn {
        width: 48px; height: 48px; /* Optimized 48px touch target */
        background: rgba(255,255,255,0.9);
        box-shadow: var(--shadow-md);
    }

    .gallery-grid {
        grid-template-columns: 1fr; /* Single column gallery */
        gap: 12px;
    }

    .gallery-grid img:first-child {
        grid-column: span 1;
        height: 200px;
    }

    /* Hide map controls when sidebar/sheet is active */
    body.ui-active .map-controls {
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
    }
}

/* --- Custom Tooltips --- */
.leaflet-tooltip.custom-tooltip {
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-md);
    opacity: 1 !important;
}

.leaflet-tooltip-top.custom-tooltip::before {
    border-top-color: var(--primary);
}

/* --- New Content Sections --- */
.climate-section {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-xs);
    transition: all 0.4s var(--ease-smooth);
}

.climate-section:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-md);
    border-color: #fff;
    transform: translateY(-2px);
}

.section-icon {
    width: 32px; height: 32px;
    stroke: var(--warning);
    flex-shrink: 0;
}

.climate-section p {
    font-size: 1.05rem;
    color: var(--text-main);
    line-height: 1.5;
    margin: 0;
}

.landmark-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.landmark-item {
    position: relative;
    padding: 16px 20px 16px 50px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    font-size: 1.05rem;
    color: var(--text-main);
    font-weight: 500;
    transition: all 0.3s var(--ease-smooth);
    cursor: default;
}

.landmark-item:hover {
    background: #fff;
    box-shadow: var(--shadow-sm);
    transform: translateX(4px);
    border-color: rgba(99, 91, 255, 0.3);
    color: var(--primary);
}

.landmark-item::before {
    content: '';
    position: absolute;
    left: 20px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.8;
}

.landmark-item:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

/* --- Passport Feature --- */

/* Toast Notification */
.toast {
    position: fixed;
    top: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: #fff;
    color: var(--primary);
    padding: 16px 32px;
    border-radius: 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    font-weight: 600;
    z-index: 20000;
    opacity: 0;
    transition: all 0.5s var(--ease-elastic);
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(99, 91, 255, 0.2);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast::before {
    content: '🎉';
    font-size: 1.2rem;
}

/* Passport Modal */
#passport-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10001;
    background: rgba(10, 37, 64, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s var(--ease-smooth);
    padding: 20px;
}

#passport-modal.active {
    opacity: 1;
    visibility: visible;
}

.passport-container {
    width: 100%;
    max-width: 600px;
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--shadow-xl);
    padding: 40px;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: all 0.5s var(--ease-elastic);
    max-height: 90vh;
    overflow-y: auto;
}

#passport-modal.active .passport-container {
    transform: scale(1) translateY(0);
}

.close-passport {
    position: absolute;
    top: 24px; right: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    transition: color 0.3s;
}

.close-passport:hover {
    color: var(--danger);
    transform: scale(1.1);
}

.passport-header {
    text-align: center;
    margin-bottom: 32px;
}

.passport-header h2 {
    font-size: 2rem;
    margin-bottom: 8px;
}

.passport-header p {
    color: var(--text-light);
}

.passport-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.passport-stamp {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(0,0,0,0.1);
    border-radius: 50%;
    color: var(--text-lighter);
    opacity: 0.5;
    transition: all 0.3s var(--ease-spring);
    position: relative;
    padding: 10px;
    text-align: center;
}

.passport-stamp.earned {
    border: 3px solid var(--accent);
    color: var(--primary);
    opacity: 1;
    background: radial-gradient(circle at center, rgba(99, 91, 255, 0.05), transparent);
    box-shadow: 0 4px 12px rgba(99, 91, 255, 0.15);
}

.stamp-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.stamp-icon svg {
    stroke-width: 1.5px;
}

.earned .stamp-icon svg {
    stroke: var(--accent);
    fill: rgba(99, 91, 255, 0.1);
}

.stamp-name {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.stamp-date {
    font-size: 0.6rem;
    color: var(--success);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.passport-progress {
    background: #f0f4f8;
    padding: 20px;
    border-radius: 16px;
    text-align: center;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0,0,0,0.1);
    border-radius: 100px;
    margin-bottom: 8px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--success);
    border-radius: 100px;
    transition: width 1s var(--ease-out-quart);
}

#passport-status {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
}

/* Confetti animation could be added here later */

/* --- Lightbox UI --- */
#lightbox {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 20002; /* Above passport modal */
    background: rgba(10, 37, 64, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s var(--ease-out-quart);
    cursor: zoom-out;
}

#lightbox.active {
    opacity: 1;
    visibility: visible;
}

#lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    transform: scale(0.95);
    transition: transform 0.4s var(--ease-out-quart);
    object-fit: contain;
}

#lightbox.active #lightbox-img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 32px; right: 32px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
    z-index: 10;
}

.lightbox-close:hover {
    color: #fff;
    transform: scale(1.1);
}

/* --- Exploration UI --- */
.step-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.progress-indicator {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.progress-dot {
    width: 8px; height: 8px;
    background: rgba(10, 37, 64, 0.2);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.progress-dot.active {
    background: var(--accent);
    transition: background 0.5s var(--ease-smooth), transform 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth);
    transform: scale(1.2);
}

.nav-buttons {
    margin-top: auto;
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.nav-buttons.center {
    justify-content: center;
}

.nav-btn {
    padding: 12px 24px;
    border-radius: 100px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s var(--ease-smooth);
    font-family: var(--font-ui);
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    font-size: 0.95rem;
}

.nav-btn:hover {
    transform: translateY(-2px);
}

.nav-btn:active {
    transform: translateY(0);
}

.nav-btn.primary {
    background: var(--accent);
    transition: background 0.5s var(--ease-smooth), transform 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 91, 255, 0.3);
}

.nav-btn.primary:hover {
    background: var(--accent-light);
    box-shadow: 0 8px 16px rgba(99, 91, 255, 0.4);
}

.nav-btn.secondary {
    background: rgba(10, 37, 64, 0.05);
    color: var(--text-light);
}

.nav-btn.secondary:hover {
    background: rgba(10, 37, 64, 0.1);
    color: var(--primary);
}

.nav-btn.success {
    background: var(--success);
    box-shadow: 0 4px 12px rgba(62, 207, 142, 0.3);
}

.nav-btn.success:hover {
    background: #2cb575;
    box-shadow: 0 8px 16px rgba(62, 207, 142, 0.4);
}

.completion-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
}

.success-icon-wrapper {
    width: 120px; height: 120px;
    background: rgba(62, 207, 142, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    animation: scaleIn 0.6s var(--ease-elastic);
}

.success-icon {
    stroke: var(--success);
    animation: drawCheck 0.8s ease-out forwards 0.4s;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

@keyframes scaleIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes drawCheck {
    to { stroke-dashoffset: 0; }
}

/* --- Journal UI --- */
.journal-textarea {
    width: 100%;
    min-height: 150px;
    padding: 16px;
    border: 1px solid rgba(10, 37, 64, 0.15);
    border-radius: 12px;
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-main);
    background: #f9fbfd;
    resize: vertical;
    transition: all 0.3s ease;
}

.journal-textarea:focus {
    outline: none;
    border-color: var(--accent);
    transition: all 0.5s var(--ease-smooth);
    box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.1);
    background: #fff;
}

/* --- Cuisine Cards --- */
.cuisine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.cuisine-card {
    background: #fff;
    border: 1px solid rgba(10, 37, 64, 0.1);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s var(--ease-smooth);
}

.cuisine-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-light);
}

.cuisine-card strong {
    color: var(--primary);
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-heading);
    font-size: 1.1rem;
}

.cuisine-card p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.4;
}

/* --- Travel Tips --- */
.tips-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.tip-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.tip-item:hover {
    background: #fff;
    box-shadow: var(--shadow-xs);
}

.tip-item svg {
    color: var(--success);
    flex-shrink: 0;
    margin-top: 2px;
}

.tip-item span {
    font-size: 1rem;
    color: var(--text-main);
    line-height: 1.5;
}

/* --- Quiz UI --- */
.quiz-container {
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.quiz-question {
    font-size: 1.4rem;
    color: var(--primary);
    margin-bottom: 8px;
    line-height: 1.3;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-option {
    padding: 16px 20px;
    text-align: left;
    background: #fff;
    border: 1px solid rgba(10, 37, 64, 0.1);
    border-radius: 12px;
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth);
    position: relative;
    overflow: hidden;
}

.quiz-option:hover:not(:disabled) {
    background: #f8faff;
    border-color: var(--accent);
    transition: all 0.5s var(--ease-smooth);
    transform: translateX(4px);
}

.quiz-option:disabled {
    cursor: default;
    opacity: 0.7;
}

.quiz-option.correct {
    background: rgba(62, 207, 142, 0.1) !important;
    border-color: var(--success) !important;
    color: #0e5a32 !important;
    font-weight: 600;
}

.quiz-option.correct::after {
    content: '✓';
    position: absolute;
    right: 20px; top: 50%;
    transform: translateY(-50%);
    color: var(--success);
    font-weight: bold;
}

.quiz-option.incorrect {
    background: rgba(255, 90, 95, 0.1) !important;
    border-color: var(--danger) !important;
    color: #c51c24 !important;
}

.quiz-feedback {
    min-height: 24px;
    font-size: 1rem;
    margin-top: 8px;
    animation: fadeInUp 0.3s ease-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.confetti-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* Atmospheric Cloud Layer */
#cloud-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 450;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' opacity='0.03'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.8;
    mix-blend-mode: overlay;
    animation: driftClouds 120s linear infinite;
}

@keyframes driftClouds {
    0% { background-position: 0 0; }
    100% { background-position: -800px 800px; }
}

/* Staggered Animations */
@keyframes staggerFadeUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.stagger-in {
    opacity: 0;
    animation: staggerFadeUp 0.6s var(--ease-out-quart) forwards;
}

/* Custom Popup for Easter Egg */
.leaflet-popup.custom-tooltip .leaflet-popup-content-wrapper,
.leaflet-popup.custom-tooltip .leaflet-popup-tip {
    background-color: var(--primary);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-md);
}
.leaflet-popup.custom-tooltip .leaflet-popup-content {
    margin: 8px 12px;
}

/* Greeting Play Button */
.play-greeting-btn {
    background: rgba(99, 91, 255, 0.1);
    border: none;
    cursor: pointer;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: all 0.3s var(--ease-smooth);
    box-shadow: var(--shadow-xs);
}

.play-greeting-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: scale(1.1);
    box-shadow: var(--shadow-sm);
}

.play-greeting-btn:active {
    transform: scale(0.95);
}

/* Live Conditions Widget */
.live-conditions-widget {
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s var(--ease-smooth);
}

.live-conditions-widget:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: #fff;
}

.widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    font-weight: 700;
    margin-bottom: 16px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--success);
    border-radius: 50%;
    position: relative;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 16px;
    height: 16px;
    background-color: var(--success);
    border-radius: 50%;
    opacity: 0.4;
    animation: pulse-ring 2s infinite;
}

.widget-body {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.widget-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.widget-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
    font-family: var(--font-heading);
}

.widget-label {
    font-size: 0.8rem;
    color: var(--text-light);
}

.widget-divider {
    width: 1px;
    height: 40px;
    background: rgba(10, 37, 64, 0.1);
}

/* Interactive Landmark Pin Highlights */
.landmark-pin > div {
    transition: all 0.4s var(--ease-elastic);
}

.landmark-pin.highlighted > div {
    transform: translate(-50%, -50%) scale(1.6) !important;
    box-shadow: 0 0 0 4px white, 0 8px 16px rgba(0,0,0,0.4) !important;
    background: var(--success) !important;
}

/* Readable map-first guide. Tile colours are not modified by UI themes. */
:root{--primary:#233c49;--text:#233c49;--text-light:#405561;--accent:#325764;--accent-light:#497080;--success:#285e43;font-family:Arial,Helvetica,sans-serif}
html,body{width:100%;height:100%;margin:0;overflow:hidden}#app-shell{position:fixed;inset:120px 0 0;overflow:clip}#map{position:absolute;inset:0;width:auto;height:auto;background:#d9e5e6}#guide-toolbar[hidden]{display:none}#guide-toolbar{position:fixed;top:0;left:0;right:0;height:120px;z-index:1100;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 24px;background:#fff8ec;color:#233c49;border-bottom:1px solid #8c9d9e}#guide-toolbar h1{font:29px Georgia,serif;margin:0 0 6px}#guide-toolbar p{margin:0;font-size:14px}#guide-toolbar label{display:grid;gap:5px;font-size:14px}#guide-toolbar nav{display:flex;flex-wrap:wrap;gap:7px}button,select,textarea{font:14px Arial,sans-serif;min-height:40px}#guide-toolbar button,#guide-toolbar select{border:1px solid #7b9098;border-radius:7px;color:#233c49;background:#fffaf1;padding:8px 12px}#guide-toolbar select{min-width:200px}button:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #b2531d!important;outline-offset:3px}#sidebar,#bottom-sheet{background:#fff8ec;color:#233c49;border:1px solid #879b9d;box-shadow:0 10px 40px #18364533;backdrop-filter:none}#sidebar{position:absolute;top:0;bottom:0;left:0;width:440px;max-width:100%;height:auto;transform:translateX(-102%)}#sidebar.active{transform:none}#bottom-sheet{display:none}.ui-active #map{left:440px}.content-header{padding:28px 24px 14px}.content-header h2{font:28px/1.2 Georgia,serif;color:inherit!important;padding-right:28px}.content-header p{color:inherit!important;font-size:16px!important;line-height:1.45}.content-body{padding:12px 24px 24px;overflow:auto;min-height:0}.content-body p,.content-body li,.content-body span{font-size:16px!important;line-height:1.5;color:inherit}.content-body h4{font-size:18px!important;text-transform:none!important;letter-spacing:0!important;color:inherit!important}.content-body [style*="text-transform"]{text-transform:none!important;letter-spacing:0!important;font-size:16px!important;color:inherit!important}.content-body .nav-btn,.quiz-option{font-size:15px!important;min-height:44px;white-space:normal}.nav-btn.primary,.quiz-option.correct{background:#345764!important;color:#fff7e5!important;border:1px solid #345764}.nav-btn.secondary,.quiz-option{background:#fffaf0!important;color:#233c49!important;border:1px solid #879ca1}.nav-btn:disabled{opacity:1!important;background:#dce2de!important;color:#53636a!important}.content-body a{color:#245d70;text-decoration:underline}.progress-dot.active{background:#345764!important}.progress-dot{background:#aab8bc}.map-controls{position:absolute;bottom:45px;right:14px;gap:8px;z-index:800}.map-controls button{background:#fff9ed;color:#233c49!important;box-shadow:0 2px 8px #18344455;border:1px solid #8b9ea2;min-width:44px;min-height:44px}#mute-btn{width:auto;padding:8px 10px;border-radius:7px;font-size:14px}.leaflet-control-attribution{background:#fffaf1!important;color:#233c49!important;font-size:14px!important;padding:5px 8px!important;line-height:1.3}.leaflet-control-attribution a{font-size:14px!important;color:#245d70!important}.custom-tooltip{font-size:15px!important;color:#233c49!important;background:#fffaf0!important}.hero-image-container{overflow:hidden}.hero-image{transform:none!important;filter:none!important}.live-conditions-widget,.fact-card,.cuisine-card,.quiz-container,.climate-section,.tip-item{background:#f0f1e9!important;color:#233c49!important;border-color:#a4b3b3!important}.widget-header{font-size:15px!important;text-transform:none!important;letter-spacing:0!important;color:#233c49!important}.widget-label{font-size:14px!important;color:inherit!important}.widget-value{color:inherit!important}.pulse-dot{display:none}.content-body .wildlife-card,.content-body .wildlife-section{color:inherit!important}.close-btn{width:40px;height:40px;top:13px;right:13px;background:#fff8ec;color:#233c49}.close-btn svg{fill:currentColor}#particle-canvas,#cloud-layer{display:none!important}#loader{pointer-events:none}.pin{opacity:1!important;animation:none!important}.pin-ring{display:none}.dark{--primary:#fff2dd;--text:#fff2dd;--text-light:#eddfc7;--accent:#f6d498;--accent-light:#e9c38a;--success:#9fdbbd}.dark #guide-toolbar,.dark #sidebar,.dark #bottom-sheet{background:#243c48;color:#fff2dd}.dark #guide-toolbar button,.dark #guide-toolbar select,.dark .close-btn,.dark .nav-btn.secondary,.dark .quiz-option{background:#344f5c!important;color:#fff2dd!important;border-color:#93a8ad}.dark .content-body a{color:#bde9f6}.dark .live-conditions-widget,.dark .fact-card,.dark .cuisine-card,.dark .quiz-container,.dark .climate-section,.dark .tip-item{background:#344e59!important;color:#fff2dd!important}.dark .widget-header{color:#fff2dd!important}.dark .nav-btn.primary{background:#f1d6a7!important;color:#243c48!important}.dark .content-body [style*="background:rgba"],.dark .content-body [style*="background: rgba"]{background:#344e59!important;color:#fff2dd!important}.motion-paused *{animation:none!important;transition:none!important}.motion-paused #particle-canvas{display:none!important}.passport-container{background:#fff8ec;color:#233c49}.stamp-name,.stamp-date,.passport-status{font-size:14px!important;text-transform:none!important;letter-spacing:0!important;color:#233c49!important}.passport-stamp{min-height:125px}#lightbox{background:#142c38ee}.widget-body{gap:12px}.widget-label{white-space:normal}
@media(max-width:768px){#guide-toolbar{height:160px;padding:12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:9px}#guide-toolbar h1{font-size:23px}#guide-toolbar p{font-size:14px;line-height:1.3}#guide-toolbar label{min-width:0}#guide-toolbar select{width:100%;min-width:0;max-width:170px}#guide-toolbar nav{grid-column:1/-1;justify-content:space-between}#guide-toolbar nav button{flex:1;padding:6px 8px}#app-shell{top:160px}#sidebar{display:none}#bottom-sheet{display:flex;position:absolute;left:0;right:0;top:44%;bottom:0;height:auto;max-height:none;transform:translateY(105%);border-radius:14px 14px 0 0;overflow:hidden;flex-direction:column}#bottom-sheet.active{transform:none}.ui-active #map{left:0;bottom:56%}.content-header{padding:20px 17px 5px}.content-header h2{font-size:24px}.content-header p{font-size:15px!important;margin:6px 0}.content-body{padding:10px 17px 20px}.content-body p,.content-body li,.content-body span{font-size:15px!important}.map-controls{bottom:auto;top:12px;right:12px;gap:5px}.map-controls button{width:40px;height:40px;min-height:40px;min-width:40px}#mute-btn{width:75px;min-width:75px;font-size:14px}.leaflet-control-attribution{max-width:calc(100vw - 10px);font-size:14px!important}.nav-buttons{gap:8px;flex-wrap:wrap}.nav-buttons button{padding:10px 12px}.content-body img{max-width:100%}.hero-image-container img{height:150px!important;margin-bottom:14px!important}.passport-container{max-height:90dvh;overflow:auto;margin:5dvh 14px;padding:22px 16px}.passport-grid{grid-template-columns:repeat(2,1fr)}.passport-header h2{font-size:25px}.passport-header p{font-size:15px}.content-header .close-btn{top:5px}.drag-handle{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:0s!important;transition:none!important}}
#app-shell{height:auto!important;width:auto!important}#map{height:auto!important;width:auto!important;filter:none!important}.leaflet-tile-pane,.leaflet-tile{filter:none!important}.leaflet-tile{opacity:1!important}#welcome-screen{animation:none!important}#welcome-screen>*{opacity:1!important;transform:none!important;animation:none!important}#begin-button{min-height:48px;animation:none!important}.content-body [style*="opacity:0"],.stagger-in{opacity:1!important;transform:none!important}.content-body{flex:1}.leaflet-control-attribution{display:block!important;visibility:visible!important;opacity:1!important}#sidebar:not(.active),#bottom-sheet:not(.active){visibility:hidden}.content-body img{background:#d8e2e1}.hero-image-container::after{content:'Illustrative landscape photo via Unsplash. Not a verified landmark.';display:block;font-size:14px;line-height:1.45;margin:0 0 16px;color:inherit}#mute-btn{white-space:nowrap!important;min-width:85px!important;width:85px!important;height:42px!important}.ui-active .map-controls{display:none}.widget-item{min-width:0}.leaflet-container{font-family:Arial,Helvetica,sans-serif}
.leaflet-control-container{display:block!important}#map::after{display:none!important}.content-body div[style*="color:var(--accent)"]{color:inherit!important}.dark .content-body span[style*="background:"]{background:#344e59!important;color:#fff2dd!important}.dark .content-body div[style*="background:rgba"],.dark .content-body div[style*="background: rgba"]{color:#fff2dd!important}.content-body .play-greeting-btn{min-width:40px!important;min-height:40px!important;color:#233c49!important;background:#efe5d1!important}.content-body .quiz-feedback{font-size:15px!important}.content-body img[loading]{min-height:110px}#passport-modal:not(.active),#lightbox:not(.active){visibility:hidden}#passport-modal.active,#lightbox.active{visibility:visible}#sidebar .content-header,#bottom-sheet .content-header{flex:none}#welcome-title{-webkit-text-fill-color:#fff6e4;background:none;font-size:clamp(45px,10vw,78px);filter:none}#welcome-subtitle{color:#fff2dd;font-size:18px;line-height:1.5}#begin-button{background:#f1d6a7;color:#233c49}#welcome-screen::before,#welcome-screen::after{display:none}
.quiz-feedback span{color:inherit!important}.quiz-question{font-size:20px!important}.passport-stamp{font-family:Arial,sans-serif;border:1px solid #839ba1;background:#fff9ed}.passport-stamp:disabled{opacity:1;color:#53636a}.passport-stamp.earned{color:#233c49}#passport-modal .close-passport{color:#233c49;background:#fff9ed;min-width:44px;min-height:44px}
.landmark-link{display:block;text-align:left;color:inherit;background:transparent;border:0;text-decoration:underline;font-size:16px;padding:5px 0}.landmark-coords{display:block;font-size:14px!important}.landmark-item{color:inherit!important}.source-note{font-size:14px!important;line-height:1.5!important;padding-top:20px;border-top:1px solid #84999e}.source-note a{font-size:14px!important}.dark .content-body .source-note,.dark .content-body strong{color:#fff2dd!important}#sidebar .content-header p,#bottom-sheet .content-header p{margin:10px 0}#guide-toolbar #mute-btn{width:auto!important;min-width:85px!important}#guide-toolbar #passport-btn{width:auto}.map-controls{display:flex!important;top:12px;bottom:auto}.map-controls button{width:40px;min-width:40px;height:40px;min-height:40px}.leaflet-tooltip{font-size:14px!important}#welcome-screen{padding:24px}#welcome-subtitle{max-width:500px}.dark #passport-modal h2,.dark #passport-modal h3,.dark #passport-modal p{color:#233c49}.dark #passport-modal .nav-btn.primary{color:#fff8ed!important;background:#345764!important}#passport-modal .journal-textarea{font-size:16px}#passport-modal .nav-btn.secondary{font-size:14px!important}.dark #passport-modal .nav-btn.secondary{color:#233c49!important;background:#fff9ed!important}#lightbox-img{max-height:80vh}.lightbox-close{width:48px;height:48px;color:#fff9ed}
@media(max-width:768px){#guide-toolbar{height:210px}#guide-toolbar nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}#guide-toolbar nav button{min-width:0!important;width:auto!important;min-height:40px;padding:7px 5px}#guide-toolbar nav #mute-btn{min-width:0!important;width:auto!important}#app-shell{top:210px}.hero-image-container img{height:125px!important}.content-header{padding:15px 17px 0}.content-header h2{margin:0}.content-body{padding-top:8px}.map-controls{top:8px;right:8px}.content-body p,.content-body li{line-height:1.55!important}.content-header p{max-width:calc(100% - 30px)}}
.toast,.toast-container,#toast,#toast-container{pointer-events:none!important}.content-body .quiz-option{color:#233c49!important}.dark .content-body .quiz-option{color:#fff2dd!important}.content-body .quiz-option:disabled{opacity:1}.content-body .quiz-option.correct{background:#345764!important;color:#fff7e5!important}.dark .content-body .quiz-option.correct{background:#f1d6a7!important;color:#233c49!important}
#welcome-title{color:#fff6e4}.content-body strong,.fact-card strong{font-size:15px!important;color:inherit!important;text-transform:none!important;letter-spacing:0!important}.landmark-item{background:#f0f1e9!important;border-color:#a4b3b3!important}.dark .landmark-item{background:#344e59!important;color:#fff2dd!important}.toast{background:#fff8ec!important;color:#233c49!important;top:auto;bottom:20px;border-radius:10px;max-width:calc(100vw - 24px);font-size:15px;padding:12px 18px}.map-controls{opacity:1!important;transform:none!important;pointer-events:auto!important}
.content-header h2{background:none!important;-webkit-background-clip:border-box;-webkit-text-fill-color:currentColor;filter:none!important}