/* Base Setup */
body {
    margin: 0;
    padding: 20px 0; /* Adds a little breathing room top and bottom */
    background-color: #f4f4f9;
    font-family: system-ui, -apple-system, sans-serif;
    
    /* Flexbox centering for the whole page */
    display: flex;
    justify-content: center; /* Center Horizontally */
    align-items: flex-start; /* Start at top (prevents cutting off top on small screens) */
    min-height: 100vh;       /* Ensure body fills screen background */
    box-sizing: border-box;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.splash-active .app-container {
    display: none;
}

#main_area {
    display: none;
    position: relative;
    width: max(1280px, min(1920px, 100vw));
    min-width: 1280px;
    max-width: 1920px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

body.splash-active #main_area {
    display: block;
}

#splash-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.splash-btn {
    position: absolute;
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
}

#btn-start {
    left: 77.4%;
    top: 40.2%;
    width: 15.5%;
    height: 9.6%;
}

#btn-instructions {
    left: 71.8%;
    top: 55.3%;
    width: 21.1%;
    height: 6.9%;
}

#btn-credits {
    left: 83.7%;
    top: 67.9%;
    width: 9.2%;
    height: 6.9%;
}

.splash-btn:focus-visible {
    outline: 4px solid #0d6efd;
    outline-offset: 4px;
}

body:not(.splash-active) #main_area {
    display: none;
}

/* The Main Application Box */
.app-container {
    width: 1280px;
    
    /* KEY CHANGE: This calculates height based on content */
    height: fit-content; 
    
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    
    /* Optional: Smooth rounded corners for the app container */
    border-radius: 8px;
    overflow: hidden; /* Ensures children don't spill out of corners */
}

/* Header / Top Bar */
.top-bar {
    height: 60px;
    background-color: #e9ecef;
    border-bottom: 1px solid #d0d7de;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    flex-shrink: 0; /* Prevents header from shrinking */
}

.sim-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
}

/* --- LAYOUT GRID --- */
.sim-layout {
    display: grid;
    /* Grid Calculation:
       Total Width: 1280px
       Padding: 20px (left) + 20px (right) = 40px
       Gap: 20px
       Map: 960px
       Remaining for Sidebar: 1280 - 40 - 20 - 960 = 260px
    */
    grid-template-columns: 280px 960px; /* tim changed from 260px to 280px for better fit */
    justify-content: center;
    gap: 10px; /* Tim changed from 20px to 10px for a tighter fit */
    
    background-color: #d9e6f3;
    padding: 10px; /* Tim changed from 20px to 10px for a tighter fit */
}

/* --- LEFT COLUMN (Sidebar) --- */
.controls-column {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Tim changed from 20px to 12px for a tighter fit */
}

.control-card {
    background: white;
    border: 1px solid #bbb;
    border-radius: 4px;
    overflow: hidden;
}

.card-header {
    background: #f0f2f5;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 1px solid #eee;
}

.card-body {
    padding: 8px; /* Tim changed from 10px to 8px for a tighter fit */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Menu Items & Icons */
.menu-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    gap: 5px;
}

.legend-icon {
    display: none; /* Hidden by default */
    max-height: 24px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    border: 1px solid #ddd;
    border-radius: 2px;
}

/* Show icon only when checked */
.menu-item-row:has(.form-check-input:checked) .legend-icon {
    display: block;
}

/* --- DYNAMIC KEY (Sidebar Bottom) --- */
.legend-container {
    background: rgba(255,255,255,0.9);
    border: 2px solid #333;
    border-radius: 4px;
    padding: 8px; /* Tim changed from 10px to 8px for a tighter fit */
    
    /* Pushes legend to bottom if sidebar is shorter than map */
    /* margin-top: auto;  */
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.legend-header {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    border-bottom: 2px solid #333;
    margin-bottom: 8px;
    padding-bottom: 2px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between swatch and text Tim changed from 10 to 8*/
    margin-bottom: 5px;
    font-size: 0.85rem;
    line-height: 1.1;
}

/* Color Swatches */
.swatch {
    width: 40px;
    height: 20px;
    border: 1px solid #777;
    flex-shrink: 0;
}

/* Swatch Specifics */
/* .swatch.topo-style { background-color: #d2b48c; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); border: none; } */
/* .swatch.park-style { background: transparent; border: 2px dashed #d63384; } */
/* 1. Park Boundary: Black dashed line */
/* 1. Park Boundary: Square Dashed Line */
.swatch.park-style {
    width: 40px;  
    height: 20px; 
    
    /* Clear old styles */
    border: none;
    margin: 0;
    background-color: transparent;
    
    /* Load your image */
    background-image: url('./icon_park.png'); 
    background-size: contain;      /* Ensures the whole icon is visible */
    background-repeat: no-repeat;  /* Prevents tiling */
    background-position: center;   /* Centers it in the box */
}


/* 2. Mountains: Dome with Triangle Subtracted */
.swatch.topo-style {
    width: 40px;
    height: 20px;
    
    /* Clear old CSS shapes */
    border: none;
    background-color: transparent;
    border-radius: 0; 
    
    /* Load your image */
    background-image: url('./icon_mountain.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* This creates the "cut out" triangle at the bottom */
.swatch.topo-style::after {
    content: none;
}
.swatch.topoLayer { background-color: #000000;   width: 40px; height: 3px; border: none;}
.swatch.sp-indigo { background-color: #4A0072; width: 20px;}
.swatch.sp-crystal { background-color: #00382E; width: 20px; border-radius: 50%;}

.swatch.temp-17 { background-color: #E07A00; }
.swatch.temp-18 { background-color: #D84315; }
.swatch.temp-19 { background-color: #8C0606; }

.swatch.precip-low { background-color: #008BA3; }
.swatch.precip-mid { background-color: #1976D2; }
.swatch.precip-high { background-color: #0146A0; }

.swatch.food-hi { background-color: #78909C; }
.swatch.food-lo { background: repeating-linear-gradient(45deg, #78909C, #78909C 4px, #fff 4px, #fff 8px); border-color:#78909C; }

/* .swatch.food2-hi { background-color: #8D6E63; }
.swatch.food2-lo { background: repeating-linear-gradient(135deg, #8D6E63, #8D6E63 4px, #fff 4px, #fff 8px); border-color:#8D6E63; } */
.swatch.food2-hi { background-color: #808080; }
.swatch.food2-lo { background: repeating-linear-gradient(135deg, #808080, #808080 4px, #fff 4px, #fff 8px); border-color:#808080; }

/* .swatch.river-style { background-color: #121721; height: 8px; margin-top: 6px; margin-bottom: 6px; } */
/* 5. River: Two Arrows Pointing at Each Other */
/* 5. River: Image Icon */
.swatch.river-style {
    width: 40px; 
    height: 20px;
    
    /* Clear old styles */
    border: none;
    margin: 0;
    background-color: transparent;
    
    /* Load your image */
    background-image: url('./icon_river.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* IMPORTANT: Turn off the old text arrows */
.swatch.river-style::after {
    content: none;
}

/* --- RIGHT COLUMN (Map) --- */
.map-column {
    display: flex;
    flex-direction: column;
    /* Height is determined by children (Map + Timeline) */
}

.map-frame {
    width: 964px; /*Adding 4 for border*/
    height: 724px; /*Adding 4 for border*/
    border: 2px solid #333;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    position: relative; /* New for dots */
}

.timeline-strip {
    margin-top: 10px;
    width: 964px; /* Making it match the map */
    height: 40px;
    display: flex;
    border: 2px solid #333;
    background: white;
}

.year-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #333;
    font-weight: 600;
    cursor: pointer;
}
.year-option:last-child { border-right: none; }
.year-option:hover { background-color: #f0f8ff; }

/* --- DYNAMIC SLIDER STYLING --- */

/* --- DYNAMIC SLIDER STYLING (UPDATED) --- */

/* 1. Define the Colors */
:root {
    --slider-color: #4A0072; /* Default: Indigo Longwing Purple */
}

body.crystal-mode {
    --slider-color: #00382E; /* Crystal Alpine Green */
}

/* 2. Base Input Styling (Acts as the Track) */
input[type=range] {
    -webkit-appearance: none; 
    width: 100%;
    
    /* THE TRACK HEIGHT & SHAPE */
    height: 6px;
    border-radius: 3px;
    cursor: pointer;
    margin: 10px 0;
    
    /* Default Background (Grey) - JS will override this with the gradient */
    background: #e0e0e0;
}

input[type=range]:focus {
    outline: none;
}

/* 3. WebKit Track (Make Transparent so we see the Input Gradient) */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: transparent; /* KEY: Must be transparent */
    border: none;
    border-radius: 3px;
}

/* 4. WebKit Thumb (The Handle) */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--slider-color);
    
    /* VERTICAL ALIGNMENT MATH: (TrackHeight 6px - ThumbHeight 18px) / 2 = -6px */
    margin-top: -6px; 
    
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: background 0.3s ease;
}

/* 5. Firefox Support (Firefox handles filling differently, this keeps it consistent) */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 6px;
    background: #e0e0e0; /* Firefox doesn't support the gradient trick as easily, this is safe fallback */
    border-radius: 3px;
}
input[type=range]::-moz-range-progress {
    background-color: var(--slider-color);
    height: 6px;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--slider-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.btn-group .btn-outline-primary {
    background-color: white;
}

.my-3 {margin-bottom: 0rem !important;}

.map-frame {
    position: relative; 
}

/* The Loading Text Container */
#p5_loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Perfect centering */
    
    font-size: 1.5rem;
    font-weight: bold;
    color: #555;
    background-color: rgba(255, 255, 255, 0.9); /* Slight background box */
    padding: 15px 30px;
    border-radius: 8px;
    z-index: 1000; /* Ensure it sits on top of the canvas */
    pointer-events: none;
}

/* The Animation Logic */
.dots::after {
    content: '';
    animation: dot-cycle 1.5s infinite steps(1);
    display: inline-block;
    width: 1.5ch; /* Reserves space so the word "Loading" doesn't jitter */
    text-align: left;
}

@keyframes dot-cycle {
    0%   { content: '.'; }
    33%  { content: '..'; }
    66%  { content: '...'; }
}