/* Black & White map with red features - OPTIMIZED VERSION */

/* ============================================
   PERFORMANCE NOTES:
   - Terrain colors are pre-calculated grayscale (no runtime filter!)
   - Shape filter only applies to small number of elements
   - Feature filter uses will-change for GPU acceleration
   ============================================ */

/* Grayscale terrain colors - pre-calculated for performance */
/* These replace the colored fills with their luminance-equivalent grays */
.terrain-flat-desert-rocky { fill: #dadada !important; }
.terrain-flat-desert-sandy { fill: #e7e7e7 !important; }
.terrain-flat-farmland { fill: #bababa !important; }
.terrain-flat-forest-deciduous { fill: #ababab !important; }
.terrain-flat-forest-deciduous-heavy { fill: #ababab !important; }
.terrain-flat-forest-evergreen { fill: #959595 !important; }
.terrain-flat-forest-evergreen-heavy { fill: #575757 !important; }
.terrain-flat-forest-jungle { fill: #818181 !important; }
.terrain-flat-forest-jungle-heavy { fill: #747474 !important; }
.terrain-hills { fill: #c8c8c8 !important; }
.terrain-hills-forest-deciduous { fill: #a2a2a2 !important; }
.terrain-hills-forest-evergreen { fill: #696969 !important; }
.terrain-hills-forest-jungle { fill: #6c6c6c !important; }
.terrain-mountain-volcano { fill: #949494 !important; }
.terrain-mountain-volcano-dormant { fill: #8f8f8f !important; }
.terrain-mountains { fill: #808080 !important; }
.terrain-mountains-forest-deciduous { fill: #8e8e8e !important; }
.terrain-mountains-forest-evergreen { fill: #656565 !important; }
.terrain-mountains-forest-jungle { fill: #5c5c5c !important; }
.terrain-other-badlands { fill: #cfcfcf !important; }

/* Water terrains - black as requested */
.terrain-water-ocean,
.terrain-water-sea,
.terrain-water-shoals,
.terrain-water-deep-ocean,
.terrain-water-deep-sea,
.terrain-water-kelp,
.terrain-water-kelp-heavy {
    fill: #000000 !important;
}

/* Shapes: filter is OK here - typically only dozens of elements, not thousands */
.shape-layer {
    filter: grayscale(100%);
    will-change: filter;  /* GPU acceleration hint */
}

/* Red feature icons with GPU acceleration */
.feature-symbol {
    will-change: filter;  /* Hint browser to cache filtered result */
    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(7404%) hue-rotate(8deg) brightness(103%) contrast(117%) !important;
}

/* Red hex selection to match feature icons */
.hex-selection {
    stroke: #ff2600 !important;
    stroke-width: 3 !important;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

/* ============================================
   CONTROLS - Monochromatic flat style
   ============================================ */

#controls button {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    color: #ff2600;
}

#controls button:hover {
    background: #2a2a2a;
    border-color: #444;
    transform: none;
    box-shadow: none;
}

#controls button:active {
    background: #111;
    box-shadow: none;
}

/* ============================================
   INFO PANEL - Monochromatic flat style
   ============================================ */

#info-container #info-button {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    color: #ff2600;
}

#info-container #info-button:hover {
    background: #2a2a2a;
    border-color: #444;
    transform: none;
}

#info-panel {
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

#info-panel-header {
    border-bottom: 1px solid #333;
}

#info-panel-title {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #ff2600;
    background-clip: unset;
    color: #ff2600;
}

#info-panel-collapse,
#info-panel-popout {
    color: #666;
    border-radius: 0;
}

#info-panel-collapse:hover,
#info-panel-popout:hover {
    background: #222;
    color: #fff;
}

#info-panel-popout.active {
    background: #222;
    color: #ff2600;
}

#info-panel .label {
    color: #666;
}

#info-panel .stat span:not(.label) {
    color: #ccc;
}

#info-panel .no-selection {
    color: #555;
}

/* Coords row - flat monochrome with red accent */
#info-panel .coords-row {
    background: linear-gradient(to bottom right, rgba(255, 38, 0, 0.2) 0%, transparent 60%);
    border-top: 1px solid rgba(255, 38, 0, 0.9);
    border-left: 1px solid rgba(255, 38, 0, 0.6);
    border-right: 1px solid rgba(255, 38, 0, 0.2);
    border-bottom: 1px solid rgba(255, 38, 0, 0.1);
    border-radius: 0;
    box-shadow: none;
}

#info-panel .coords-row .label {
    color: #ff2600;
}

#info-panel .coords-row span:not(.label) {
    color: #fff;
}

.copy-link-btn {
    color: #666;
}

.copy-link-btn:hover {
    background: #222;
    color: #fff;
}

.copy-link-btn.copied {
    color: #ff2600;
}

/* Layer toggle buttons - flat monochrome */
#info-panel-toggles {
    border-top: 1px solid #333;
}

.toggle-btn {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 0;
    color: #666;
}

.toggle-btn:hover {
    background: #2a2a2a;
    border-color: #444;
    color: #999;
}

.toggle-btn.active {
    background: linear-gradient(to bottom right, rgba(255, 38, 0, 0.15) 0%, transparent 60%);
    border-top: 1px solid rgba(255, 38, 0, 0.6);
    border-left: 1px solid rgba(255, 38, 0, 0.4);
    border-right: 1px solid rgba(255, 38, 0, 0.15);
    border-bottom: 1px solid rgba(255, 38, 0, 0.05);
    color: #ff2600;
}