/* ═══════ RESET & BASE ═══════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --bg:          #0a0a1a;
  --surface:     #12122a;
  --card:        #161640;
  --card-hover:  #1e1e52;
  --border:      #2a2a5a;
  --text:        #e8e8ff;
  --text-dim:    #7a7aaa;
  --neon-green:  #39ff14;
  --neon-cyan:   #00f0ff;
  --neon-pink:   #ff2d95;
  --neon-yellow: #ffe600;
  --neon-orange: #ff8c00;
  --neon-purple: #b44aff;
  --mono:        'Space Mono', monospace;
  --pixel:       'Press Start 2P', monospace;
  --cf-scale:    0.8; /* coverflow UI scale factor (1.0 = original) */
}

html { font-size:16px; scroll-behavior:smooth }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--mono); line-height:1.6;
  min-height:100vh; overflow-x:hidden;
}

/* Retro grid background */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(57,255,20,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,20,.03) 1px, transparent 1px);
  background-size:48px 48px;
}

/* CRT scanlines — behind all content so they don't degrade modal/images */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,.06) 2px, rgba(0,0,0,.06) 4px
  );
}

/* ═══════ SCROLLBAR ═══════ */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#3a3a7a;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--neon-cyan)}

/* ═══════ TOP BAR (fixed) ═══════ */
#topbar {
  position:fixed; top:0; left:0; right:0; z-index:900;
  background: linear-gradient(180deg, #0e0e28 0%, #0a0a1a 100%);
  border-bottom: 2px solid var(--neon-green);
  box-shadow: 0 2px 30px rgba(57,255,20,.15);
  padding: 8px 24px;
}

.topbar-inner {
  display:flex; align-items:center; gap:20px; max-width:1600px; margin:0 auto;
  flex-wrap: wrap;
}

/* ═══════ LOGO + TITLE ═══════ */
.logo-area {
  display:flex; align-items:center; gap:10px; flex-shrink:0; white-space:nowrap;
  cursor:pointer; user-select:none;
}
.logo-area:hover .site-title { color:var(--neon-green); text-shadow:0 0 10px rgba(57,255,20,.5) }
.logo-area:focus-visible { outline:1.5px solid var(--neon-green); outline-offset:4px; border-radius:4px }
.logo-bird { width:48px; height:48px; }

.site-title {
  font-family: var(--pixel); font-size:20px; line-height:1.3; letter-spacing:2px;
  background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan), var(--neon-pink));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow: none; filter: drop-shadow(0 0 8px rgba(57,255,20,.4));
}
.site-title .sub {
  font-size:8px; display:block; letter-spacing:1px; opacity:.7;
  -webkit-text-fill-color: var(--text-dim); margin-top:4px;
}

/* ═══════ FILTERS BAR ═══════ */
.filters-bar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1; justify-content:flex-end;
}

.filter-group {
  display:flex; align-items:center; gap:4px;
}
.filter-label {
  font-family:var(--pixel); font-size:7px; letter-spacing:.5px;
  color:var(--text-dim); text-transform:uppercase; margin-right:4px; white-space:nowrap;
}

/* Model toggle buttons */
.model-btns { display:flex; gap:3px }
/* Conservation status buttons */
.cons-btns { display:flex; gap:8px; flex-wrap:wrap }
.mbtn {
  font-family:var(--mono); font-size:.82rem; padding:6px 14px;
  background:transparent; border:1.5px solid var(--border); color:var(--text-dim);
  cursor:pointer; border-radius:4px; transition:.15s; white-space:nowrap;
}
.mbtn:hover { border-color:var(--neon-cyan); color:var(--text) }
.mbtn.active-birdnet   { background:#00f0ff22; color:var(--neon-cyan); border-color:var(--neon-cyan) }
.mbtn.active-perch     { background:#ff2d9522; color:var(--neon-pink); border-color:var(--neon-pink) }
.mbtn.active-both      { background:rgba(57,255,20,.1); color:var(--neon-green); border-color:var(--neon-green) }
.mbtn.active-cons      { background:rgba(255,230,0,.12); color:#ffe600; border-color:#ffe600 }
.mbtn.active-insecteffnet { background:#ff8c0022; color:var(--neon-orange); border-color:var(--neon-orange) }
/* Confidence slider */
.conf-slider-wrap { display:flex; align-items:center; gap:10px }
.conf-slider {
  -webkit-appearance:none; appearance:none;
  width:200px; height:6px; border-radius:3px;
  background:#1a1a3a; outline:none; cursor:pointer;
}
.conf-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:var(--neon-yellow); cursor:pointer;
  box-shadow:0 0 6px #ffe60044;
}
.conf-slider::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%; border:none;
  background:var(--neon-yellow); cursor:pointer;
  box-shadow:0 0 6px #ffe60044;
}
.conf-slider::-moz-range-track {
  height:6px; border-radius:3px; background:#1a1a3a;
}
.conf-val { font-family:var(--mono); font-size:.85rem; color:var(--neon-yellow); min-width:32px; text-align:right }

/* ═══════ PIXEL STEREO TOGGLE SWITCHES ═══════ */
.bird-toggle-row {
  display:flex; gap:24px; align-items:center;
  margin-top:16px; padding-top:14px;
  border-top:2px solid var(--border);
}
.pixel-switch {
  display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
}
.pixel-switch-label {
  font-family:var(--pixel); font-size:7px; letter-spacing:.5px;
  color:var(--text-dim); text-transform:uppercase;
}
/* Track (housing) — chunky pixelated border via box-shadow steps */
.pixel-switch-track {
  width:48px; height:20px; position:relative;
  background:#1a1a3a;
  /* Pixelated border effect */
  box-shadow:
    inset -2px -2px 0 #0a0a1a,
    inset 2px 2px 0 #2a2a4a;
  image-rendering:pixelated;
}
.pixel-switch-track.on {
  background:#0a2a0a;
  box-shadow:
    inset -2px -2px 0 #061806,
    inset 2px 2px 0 #143a14,
    0 0 8px rgba(57,255,20,.2);
}
/* Knob (slider) — pixelated rect */
.pixel-switch-knob {
  position:absolute; top:2px; left:2px;
  width:16px; height:16px;
  background:#444;
  /* Pixel corners via box-shadow */
  box-shadow:
    inset -2px -2px 0 #333,
    inset 2px 2px 0 #555;
  transition: left .15s steps(8);
  image-rendering:pixelated;
}
.pixel-switch-track.on .pixel-switch-knob {
  left:30px;
  background:#39ff14;
  box-shadow:
    inset -2px -2px 0 #2acc10,
    inset 2px 2px 0 #5aff3a,
    0 0 6px rgba(57,255,20,.5);
}
/* Status text */
.pixel-switch-status {
  font-family:var(--pixel); font-size:8px; letter-spacing:.5px;
  min-width:32px;
  transition: color .15s;
}
.pixel-switch-status.on { color:var(--neon-green); text-shadow:0 0 6px rgba(57,255,20,.4); }
.pixel-switch-status.off { color:#555; }

/* Album dropdown */
.filter-select {
  font-family:var(--mono); font-size:.82rem; padding:6px 12px;
  background:#0a0a20; color:var(--text); border:1.5px solid var(--border);
  border-radius:4px; outline:none; min-width:160px; transition:.15s; cursor:pointer;
}
.filter-select:focus { border-color:var(--neon-cyan) }

/* Search input */
.filter-input {
  font-family:var(--mono); font-size:.85rem; padding:6px 14px;
  background:#0a0a20; color:var(--text); border:1.5px solid var(--border);
  border-radius:4px; outline:none; width:320px; transition:.15s;
}
.filter-input:focus { border-color:var(--neon-green) }
.filter-input::placeholder { color:var(--text-dim); opacity:.6 }

/* ═══════ MAIN CONTENT ═══════ */
#main {
  padding:108px 28px 140px; max-width:1500px; margin:0 auto; position:relative; z-index:1;
}

.section-title {
  font-family:var(--pixel); font-size:10px; letter-spacing:.5px;
  color:var(--neon-cyan); padding:8px 0; border-bottom:2px solid var(--border);
  margin:36px 0 18px; line-height:1.7;
}
/* First section of the location view — topbar clearance is already handled by #main padding */
#view-locations > .section-title:first-of-type { margin-top:0 }

/* ═══════ HOME VIEW TABS (locations / species) ═══════ */
/* Primary view navigation in the header — floated right */
.topnav {
  display:flex; gap:10px; align-items:center;
  margin-left:auto;
}
.view-tab {
  font-family:var(--pixel); font-size:9px; letter-spacing:.5px;
  background:var(--card); color:var(--text-dim);
  border:1.5px solid var(--border); border-radius:6px;
  padding:10px 16px; cursor:pointer; transition:.15s;
}
.view-tab:hover { color:var(--text); border-color:var(--text-dim) }
.view-tab.active {
  color:var(--neon-green); border-color:var(--neon-green);
  background:#12122a; box-shadow:0 0 14px rgba(57,255,20,.18);
}

/* Help button — sits between the view tabs and the bandcamp link */
.help-btn {
  font-family:var(--pixel); font-size:9px; line-height:1; flex-shrink:0;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:var(--card); color:var(--text-dim);
  border:1.5px solid var(--border); border-radius:6px;
  cursor:pointer; transition:.15s;
}
.help-btn:hover {
  color:var(--neon-cyan); border-color:var(--neon-cyan);
  box-shadow:0 0 14px rgba(0,240,255,.25);
}

/* Bandcamp store link — pinned to the upper right of the header */
.bandcamp-link {
  margin-left:16px; display:flex; align-items:center; flex-shrink:0;
  color:var(--text-dim); transition:.15s;
}
.bandcamp-link svg { display:block }
.bandcamp-link:hover {
  color:var(--neon-cyan);
  filter:drop-shadow(0 0 6px rgba(0,240,255,.6));
}

/* ═══════ SPECIES VIEW ═══════ */
.species-view-bar {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px;
}
.species-view-bar .filter-input { width:280px }
.species-view-count {
  font-family:var(--pixel); font-size:7px; color:var(--text-dim);
  letter-spacing:.5px; margin-left:auto;
}

.species-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px; margin-bottom:24px;
}
@media(max-width:600px){ .species-grid{grid-template-columns:1fr;max-width:340px} }

.sp-view-card {
  display:flex; flex-direction:column; overflow:hidden; cursor:pointer;
  background:var(--card); border:1.5px solid var(--border); border-radius:8px;
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
.sp-view-card:hover {
  border-color:var(--neon-cyan); box-shadow:0 4px 18px rgba(0,240,255,.12);
  transform:translateY(-3px);
}

.sp-view-thumb { width:100%; height:150px; object-fit:cover; display:block; background:#0d0d24 }
.sp-view-thumb-ph {
  display:flex; align-items:center; justify-content:center;
  font-size:2.6rem; background:#1a1a2e;
}

.sp-view-info { flex:1; padding:10px 12px; display:flex; flex-direction:column; gap:4px }
.sp-view-name {
  font-size:.92rem; font-weight:700; color:var(--text); line-height:1.3;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.sp-view-nbird {
  font-family:var(--pixel); font-size:6px; color:var(--neon-orange);
  border:1px solid var(--neon-orange); border-radius:3px; padding:2px 5px;
}
.sp-view-sci { font-size:.72rem; font-style:italic; color:var(--text-dim) }
.sp-view-stats { font-size:.72rem; color:var(--text-dim) }

/* Buttons & Knobs — filter block shared with the album detail view */
.species-filters {
  background:var(--card); border:1.5px solid var(--border); border-radius:8px;
  padding:14px 18px 18px; margin-bottom:24px;
}
.species-filters .section-h { margin:0 0 4px }
.species-knobs {
  display:flex; gap:36px; flex-wrap:wrap; align-items:flex-start;
}
.species-knob-group { min-width:230px }
.species-knob-group .section-sub { margin-top:6px }
.species-knobs .bird-toggle-row {
  margin-top:6px; padding-top:0; border-top:none; flex-wrap:wrap; gap:16px;
}
@media(max-width:820px){
  .species-knobs { flex-direction:column; gap:6px }
}

.species-more-row { text-align:center; margin:8px 0 32px }
.species-more-btn {
  font-family:var(--pixel); font-size:8px; letter-spacing:.5px;
  background:var(--card); color:var(--neon-cyan); border:1.5px solid var(--neon-cyan);
  border-radius:6px; padding:14px 22px; cursor:pointer; transition:.15s;
}
.species-more-btn:hover { box-shadow:0 0 16px rgba(0,240,255,.2); background:#12122a }

/* Model breakdown bar */
.model-breakdown-bar {
  display:flex; gap:12px; margin-bottom:28px; flex-wrap:wrap;
}
.mb-card {
  flex:1; min-width:200px; background:var(--card); border:1.5px solid var(--border);
  padding:14px 16px; border-radius:6px; display:flex; align-items:center; gap:12px;
}
.mb-card.bn { border-left:3px solid var(--neon-cyan) }
.mb-card.pc { border-left:3px solid var(--neon-pink) }
.mb-card.ie { border-left:3px solid var(--neon-orange) }
.mb-card.mu { border-left:3px solid var(--neon-green) }
.mb-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0 }
.mb-dot.bn { background:var(--neon-cyan); box-shadow:0 0 8px var(--neon-cyan) }
.mb-dot.pc { background:var(--neon-pink); box-shadow:0 0 8px var(--neon-pink) }
.mb-dot.ie { background:var(--neon-orange); box-shadow:0 0 8px var(--neon-orange) }
.mbtn.active-battybirdnet { background:#b44aff22; color:var(--neon-purple); border-color:var(--neon-purple) }
.mb-card.bb { border-left:3px solid var(--neon-purple) }
.mb-dot.bb { background:var(--neon-purple); box-shadow:0 0 8px var(--neon-purple) }
.mb-stats { font-size:.85rem; color:var(--text-dim); line-height:1.7 }
.mb-stats strong { color:var(--text); }

/* ═══════ CHARTS ═══════ */
.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:36px }
@media(max-width:960px){ .chart-grid{grid-template-columns:1fr} }

.bar-row { display:flex; align-items:center; gap:10px; margin-bottom:6px }
.bar-label { width:180px; font-size:.85rem; color:var(--text); text-align:right;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0 }
.bar-track { flex:1 1 auto; min-width:60px; height:24px; background:rgba(255,255,255,.03); border-radius:2px;
  border:1px solid var(--border); overflow:hidden }
.bar-fill { height:100%; border-radius:2px; transition:width .6s ease }
.bar-count { min-width:48px; font-size:.85rem; color:var(--text-dim); text-align:right; flex-shrink:0 }

/* ═══════ SPECIES TABLE ═══════ */
.table-wrap { overflow-x:auto; margin-bottom:24px }
.species-table { width:100%; border-collapse:collapse }
.species-table th {
  font-family:var(--pixel); font-size:8px; letter-spacing:.5px; color:var(--neon-green);
  text-align:left; padding:12px 10px; border-bottom:2px solid var(--border);
  cursor:pointer; user-select:none; white-space:nowrap; transition:.15s;
}
.species-table th:hover { color:#fff }
.species-table td { font-size:.85rem; padding:6px 12px; border-bottom:1px solid var(--border) }
.species-table tbody tr:hover { background:rgba(57,255,20,.03) }
.species-table .sp-thumb { width:80px; height:80px; object-fit:cover; border-radius:6px; border:1px solid var(--border) }

.sp-name { color:var(--neon-cyan); cursor:pointer; font-weight:700 }
.sp-name:hover { text-decoration:underline;color:#fff }
.sp-sci { color:var(--text-dim); font-size:.78rem; opacity:.75 }

.section-h {
  font-family:var(--pixel); font-size:9px; font-weight:700;
  color:var(--neon-pink); letter-spacing:.5px; text-transform:uppercase;
  margin:24px 0 12px; padding-bottom:8px; border-bottom:1.5px solid var(--border);
}
.section-h:first-child { margin-top:0 }

/* Subsection heading (inside Buttons & Knobs) */
.section-sub {
  font-family:var(--pixel); font-size:7px; letter-spacing:.5px;
  color:var(--text-dim); text-transform:uppercase;
  margin:14px 0 6px;
}

/* ═══════ FILE LIST ═══════ */
.file-item {
  background:var(--card); border:1px solid var(--border); margin-bottom:6px;
  padding:12px 16px; border-radius:5px; transition:border-color .15s;
}
.file-item:hover { border-color:#3a3a7a }
.file-name { color:var(--neon-yellow); font-size:.88rem; cursor:pointer; display:flex; align-items:center; gap:8px }
.file-name::before { content:'▸'; transition:transform .15s; color:var(--text-dim) }
.file-name.open::before { transform:rotate(90deg) }

/* ═══════ DETECTION ROWS ═══════ */
.det-list { padding-top:12px; border-top:1px solid var(--border); margin-top:10px }
.det-row {
  display:flex; align-items:center; gap:14px;
  padding:8px 6px; font-size:.84rem; border-bottom:1px solid rgba(42,42,90,.5);
}
.det-row:last-child { border-bottom:none }

.det-species { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.c-high{color:#39ff14} .c-med{color:#ffe600} .c-low{color:#ff8844}

/* ═══════ TAGS / PILLS ═══════ */
.tag {
  display:inline-block; font-size:.78rem; padding:5px 10px; margin:3px;
  background:rgba(57,255,20,.06); border:1px solid var(--border); color:var(--neon-green);
  border-radius:4px; cursor:pointer; transition:.15s; white-space:nowrap;
}
.tag:hover { background:rgba(0,240,255,.1); border-color:var(--neon-cyan); color:var(--neon-cyan) }

/* ═══════ ALBUM COVER IMAGES ═══════ */
.album-cover {
  width:72px; height:72px; object-fit:cover; border-radius:6px;
  border:2px solid var(--border); flex-shrink:0; transition:border-color .15s;
}
.album-cover:hover { border-color:var(--neon-pink) }

/* Small inline cover (next to album tags in species detail) */
.album-cover-sm {
  width:28px; height:28px; object-fit:cover; border-radius:3px;
  border:1.5px solid var(--border); vertical-align:middle; margin-right:4px;
}

/* Cover fallback icon for albums without images */
.album-cover-fallback {
  width:72px; height:72px; display:flex; align-items:center; justify-content:center;
  background:var(--card); border-radius:6px; border:2px dashed var(--border);
  flex-shrink:0; color:var(--text-dim); font-size:.9rem;
}

/* Album detail header with cover */
.album-header {
  display:flex; gap:18px; align-items:flex-start; margin-bottom:20px;
}
.album-header-info { flex:1 }
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:900;
  overflow:hidden; width:100vw; height:100vh;
}
.modal-overlay.active { display:flex; justify-content:center }

.modal-backdrop {
  position:absolute; inset:0; background:rgba(5,7,12,.88); backdrop-filter:blur(3px)
}

.modal-box {
  position:relative; z-index:1;
  max-width:960px; width:calc(100% - 40px);
  max-height:calc(100vh - 48px); margin:24px auto;
  display:flex; flex-direction:column;
  background:var(--surface); border-top:3px solid var(--neon-green);
  padding:0; border-radius:6px;
  box-shadow:0 16px 48px rgba(0,0,0,.7); animation:modalIn .2s ease;
  overflow:hidden;
}
.modal-box-inner {
  flex:1; overflow-x:hidden; overflow-y:auto; padding:0 32px 36px;
}
.modal-header-bar {
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 24px 6px;
  background:var(--surface);
  border-bottom:1.5px solid var(--border);
  gap:12px;
}
.modal-header-filters {
  display:flex; flex-direction:column; align-items:flex-end;
  gap:6px;
}

/* Title inline with close button — truncates if too long */
.modal-title {
  font-family:var(--pixel); font-size:13px; line-height:1.5;
  color:#fff; text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  flex:1; min-width:0;
}
.modal-box img { max-width:100%; height:auto !important }
.modal-box .leaflet-container { max-width:100% !important; box-sizing:border-box }
.modal-box * {
  max-width:100%;
}
@keyframes modalIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }

/* ═══════ HELP OVERLAY ("What the hell is this?") ═══════ */
/* Self-contained overlay — above topbar/modal (900), below mini-player (9998)
   so audio can keep playing + stay controllable while it's open. */
.help-overlay {
  display:none; position:fixed; inset:0; z-index:950;
  overflow:hidden; width:100vw; height:100vh;
}
.help-overlay.active { display:flex; justify-content:center }
.help-backdrop {
  position:absolute; inset:0; background:rgba(5,7,12,.88); backdrop-filter:blur(3px)
}
.help-box {
  position:relative; z-index:1;
  max-width:720px; width:calc(100% - 40px);
  max-height:calc(100vh - 48px); margin:24px auto;
  display:flex; flex-direction:column;
  background:var(--surface); border-top:3px solid var(--neon-cyan);
  border-radius:6px; box-shadow:0 16px 48px rgba(0,0,0,.7);
  animation:modalIn .2s ease; overflow:hidden;
}
.help-header {
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 24px 10px; background:var(--surface);
  border-bottom:1.5px solid var(--border);
}
.help-title {
  font-family:var(--pixel); font-size:13px; line-height:1.5;
  color:#fff; text-transform:uppercase;
}
.help-close {
  font-family:var(--pixel); font-size:8px; letter-spacing:.5px; flex-shrink:0;
  background:transparent; color:var(--neon-pink); border:2px solid var(--neon-pink);
  padding:6px 14px; cursor:pointer; border-radius:4px; transition:.15s;
}
.help-close:hover { background:var(--neon-pink); color:#fff }
.help-body { flex:1; overflow-y:auto; padding:20px 32px 36px; }
.help-body p { line-height:1.65; margin:0 0 14px; color:var(--text) }
.help-lede { font-size:1.05rem; color:#fff }
.help-section-h {
  font-family:var(--pixel); font-size:10px; letter-spacing:1px;
  color:var(--neon-green); text-transform:uppercase;
  margin:24px 0 10px;
}
.help-list { list-style:none; margin:0 0 14px; padding:0 }
.help-list li {
  position:relative; padding:0 0 10px 20px; line-height:1.55;
}
.help-list li::before {
  content:'▸'; position:absolute; left:2px; color:var(--neon-cyan);
}
.help-list strong { color:#fff }
.help-body a { color:var(--neon-cyan); text-decoration:underline }
.help-body a:hover { color:#fff }
.help-fine { font-size:.78rem; color:var(--text-dim); margin-top:20px; line-height:1.6 }

.modal-close {
  font-family:var(--pixel); font-size:8px; letter-spacing:.5px; flex-shrink:0;
  background:transparent; color:var(--neon-pink); border:2px solid var(--neon-pink);
  padding:6px 14px; cursor:pointer; border-radius:4px; transition:.15s;
}
.modal-close:hover { background:var(--neon-pink); color:#fff }

/* ═══════ FOOTER ═══════ */
.site-footer {
  max-width:1400px; margin:40px auto 60px; padding:20px 32px;
  border-top:1.5px solid var(--border); text-align:center;
}
.footer-models { display:flex; justify-content:center; gap:24px; flex-wrap:wrap }
.footer-model {
  font-size:.85rem; color:var(--text-dim);
}
.footer-note a {
  color:var(--neon-cyan); text-decoration:none;
}
.footer-model a {
  color:var(--neon-cyan); text-decoration:none;
}
.footer-note a:hover, .footer-model a:hover { text-decoration:underline; }
.footer-note { margin-top:10px; font-size:.72rem; color:var(--text-dim); opacity:.6 }

/* ═══════ BOOT SCREEN ═══════ */
#bootScreen {
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:40px;
}
.boot-text{font-family:var(--mono);font-size:.85rem;color:var(--neon-green);line-height:2.6}
@keyframes blink{50%{opacity:.3}} .blink{animation:blink 1s step-end infinite}

/* ═══════ RESPONSIVE ═══════ */
@media(max-width:960px){
  #topbar { padding:8px 12px }
  .topnav { gap:6px }
  .view-tab { padding:8px 12px; font-size:8px }
  .help-btn { width:30px; height:30px; font-size:8px }
  .logo-area { gap:6px }
  .site-title { font-size:15px }
  .filter-input { width:180px; min-width:120px }
  .filters-bar { gap:6px }
  #main { padding:108px 14px 140px }
  .chart-grid { gap:14px }
  .album-card { width:260px; height:260px }
  .album-card-thumb, .album-card-thumb-placeholder { height:170px }

  /* Modal header stacks vertically on mobile */
  .modal-header-bar {
    padding:8px 14px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .modal-title { font-size:12px; }
  .modal-box-inner { padding:0 14px 30px }

  /* Stack filters neatly under the close button */
  .modal-header-filters {
    width:100%;
    align-items:flex-start;
    gap:8px;
  }
  .modal-header-filters .filter-group {
    width:100%;
  }

  /* Make the close button full-width on mobile */
  .modal-close {
    width:100%;
    text-align:center;
  }

  .conf-slider { width:160px }

  /* Allow model buttons and filter labels to wrap inside the modal */
  .modal-header-filters .model-btns {
    flex-wrap:wrap;
  }
  .modal-header-filters .filter-group {
    flex-wrap:wrap;
  }

  /* Album modal cover+map stacks on small screens */
  .modal-box-inner > div[style*="display:flex;gap:16px"] {
    flex-direction:column!important;
  }
}

/* ═══════ COVERFLOW (Album playback mode) ═══════ */
/* All dimensions are base values × var(--cf-scale). Adjust --cf-scale in :root to resize the entire UI. */
.coverflow-stage {
  position:relative !important;
  height:calc(380px * var(--cf-scale)) !important;
  perspective:1400px;
  perspective-origin:50% 50%;
  overflow:hidden;
  margin-bottom:4px;
  display:block !important; /* override any flex from modal layout */
  width:100%;
  transform-style:preserve-3d;
}

/* Loading placeholder — shown until seekbar metadata finishes */
.cf-player-placeholder {
  position:relative;
  height:calc(380px * var(--cf-scale)); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:calc(24px * var(--cf-scale));
  background:transparent; border-radius:calc(8px * var(--cf-scale));
  margin-bottom:4px;
}
.cf-loading-spinner {
  width:calc(72px * var(--cf-scale)); height:calc(72px * var(--cf-scale)); position:relative;
}
.cf-loading-spinner::before,
.cf-loading-spinner::after {
  content:''; position:absolute; inset:0;
  border:4px solid transparent; border-radius:50%;
}
.cf-loading-spinner::before {
  border-top-color:var(--neon-green); border-right-color:rgba(57,255,20,.3);
  animation:cf-spin 1s linear infinite;
}
.cf-loading-spinner::after {
  inset:calc(8px * var(--cf-scale));
  border-bottom-color:#0ff; border-left-color:rgba(0,255,255,.3);
  animation:cf-spin .7s linear infinite reverse;
}
@keyframes cf-spin { to { transform:rotate(360deg); } }
.cf-loading-text {
  font-size:calc(15px * var(--cf-scale)); color:var(--neon-green); font-family:var(--pixel); letter-spacing:.5px; text-transform:uppercase;
  animation: cf-load-pulse 1.4s ease-in-out infinite;
  text-shadow:0 0 12px rgba(57,255,20,.6);
}
@keyframes cf-load-pulse {
  0%,100% { opacity:.5; }
  50% { opacity:1; }
}

.cf-card-inner {
  position:absolute;
  left:50%; top:50%;
  width:calc(260px * var(--cf-scale)); height:calc(300px * var(--cf-scale));
  border-radius:calc(8px * var(--cf-scale));
  background:#1a1a2e;
  border:2px solid #444;
  overflow:hidden;
  transition:transform .45s cubic-bezier(.25,.1,.25,1), opacity .45s ease, box-shadow .45s ease, filter .45s ease, border-color .45s ease;
  will-change:transform,opacity,filter,box-shadow;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}

.cf-card-inner img {
  width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
  position:absolute;top:0;left:0;
}
.cf-card-inner img[data-hidden="1"] { visibility:hidden; }

.cf-card-inner .cf-label {
  position:absolute;bottom:0;left:0;right:0;
  padding:calc(48px * var(--cf-scale)) calc(10px * var(--cf-scale)) calc(12px * var(--cf-scale));
  background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;text-align:center;
}
.cf-card-inner .cf-label span {font-size:calc(1.05rem * var(--cf-scale));font-weight:700;display:block;line-height:1.3;text-shadow:0 2px 6px rgba(0,0,0,.9);}
.cf-card-inner .cf-label small {font-size:calc(.82rem * var(--cf-scale));color:#ccc;display:block;margin-top:calc(4px * var(--cf-scale));text-shadow:0 1px 3px rgba(0,0,0,.8);}

/* Arrow buttons — minimal, unobtrusive */
.cf-arrow {
  position:absolute;top:50%;transform:translateY(-50%);
  width:calc(46px * var(--cf-scale)); height:calc(46px * var(--cf-scale)); border-radius:50%;
  background:rgba(10,10,26,.5);border:1.5px solid rgba(57,255,20,.35);
  color:var(--neon-green);font-size:calc(1.4rem * var(--cf-scale));
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  z-index:20;transition:.2s;backdrop-filter:blur(6px);opacity:.7;
}
.cf-arrow:hover {background:rgba(57,255,20,.15);border-color:var(--neon-green);opacity:1}
.cf-arrow:active {transform:translateY(-50%) scale(.9)}
.cf-arrow-left  {left:calc(6px * var(--cf-scale))}
.cf-arrow-right {right:calc(6px * var(--cf-scale))}



/* ═══════ STITCHED AUDIO PLAYER (album modal) — fixed size, not affected by --cf-scale ═══════ */
.cf-audio-player { width:100%; margin-bottom:16px; }

.cf-seek-wrap { position:relative; width:100%; height:72px; cursor:pointer; user-select:none; margin-bottom:16px; }

.cf-seek-bar {
  position:absolute; top:18px; left:0; right:0; height:6px;
  background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden;
}

.cf-seek-progress {
  position:absolute; top:0; left:0; height:100%; width:0%;
  background:linear-gradient(90deg, rgba(57,255,20,.25), rgba(57,255,20,.4));
  border-radius:3px; pointer-events:none; transition:none;
}

.cf-seek-thumb {
  position:absolute; top:-2px; width:16px; height:calc(100% + 4px); margin-left:-8px;
  background:var(--neon-green); border-radius:3px; opacity:.9; pointer-events:none;
  box-shadow:0 0 8px rgba(57,255,20,.5); transition:left .1s linear; z-index:2;
}

/* Time markers under seek bar — positioned relative to cf-seek-wrap */
.cf-time-markers {
  position:absolute; top:26px; left:0; right:0; height:44px; pointer-events:none; overflow:visible;
}

.cf-hour-marker {
  position:absolute; top:0; transform:translateX(-50%); font-size:.55rem; color:#888;
  font-family:'Space Mono',monospace; white-space:nowrap; line-height:1.3;
}

/* Sunrise/sunset markers — icons below the hour labels */
.cf-sun-marker {
  position:absolute; bottom:0; transform:translateX(-50%); pointer-events:auto; line-height:1;
  cursor:pointer; text-align:center;
}
.cf-sun-marker .cf-sun-icon { font-size:1rem; display:block; text-align:center; }
.cf-sun-marker .cf-sun-arrow { font-size:.55rem; display:block; text-align:center; margin-bottom:1px; }
/* Instant CSS tooltip — no browser delay */
.cf-sun-marker::after {
  content:attr(data-label);
  position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%);
  padding:2px 8px; border-radius:4px; font-size:.75rem; white-space:nowrap;
  background:rgba(10,10,26,.9); color:var(--neon-green); font-family:'Space Mono',monospace;
  border:1px solid rgba(57,255,20,.3); opacity:0; pointer-events:none; transition:opacity .1s;
}
.cf-sun-marker:hover::after { opacity:1; }
.cf-sunrise { color:#ffb74d; }
.cf-sunrise .cf-sun-icon { text-shadow:0 0 8px rgba(255,183,77,.6); }
.cf-sunset  { color:#ef5350; }
.cf-sunset .cf-sun-icon { text-shadow:0 0 8px rgba(239,83,80,.6); }

/* Controls row: prev | play/pause | next — centered */
.cf-controls-row {
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 0 4px;
}
.cf-controls-btns {
  display:flex; align-items:center; gap:20px;
}
.cf-controls-btn {
  width:40px; height:40px; border-radius:50%;
  background:rgba(10,10,26,.6); border:1.5px solid rgba(57,255,20,.35);
  color:var(--neon-green); font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s, transform .15s;
  line-height:1;
}
.cf-controls-btn:hover {
  background:rgba(57,255,20,.12); border-color:var(--neon-green); transform:scale(1.1);
}
.cf-controls-btn:active { transform:scale(.95); }
.cf-controls-btn.cf-play-btn {
  width:54px; height:54px; font-size:1.35rem;
  background:rgba(57,255,20,.08); border-color:rgba(57,255,20,.5);
}
.cf-controls-btn.cf-play-btn:hover {
  background:rgba(57,255,20,.18); border-color:var(--neon-green);
}
.cf-time-display { font-size:.75rem; color:var(--text-dim); font-family:'Space Mono',monospace; }

/* Share button — copies a deep-link to the current playback time */
.cf-share-btn { width:36px; height:36px; margin-left:4px; }
/* Invisible spacer mirroring the share button so play/pause stays centered
   despite the asymmetric row */
.cf-share-spacer { width:36px; height:36px; margin-right:4px; }

/* "Link Copied to Clipboard" toast — cold-war terminal readout */
.cf-share-toast {
  position:fixed; z-index:10001;
  transform:translate(-50%,-100%);
  padding:9px 14px;
  background:rgba(10,10,26,.96);
  background-image:repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,.18) 2px, rgba(0,0,0,.18) 4px);
  border:1.5px solid var(--neon-green);
  color:var(--neon-green);
  font-family:var(--pixel); font-size:8px; letter-spacing:1px;
  text-transform:uppercase; white-space:nowrap;
  text-shadow:0 0 6px rgba(57,255,20,.65);
  box-shadow:0 0 14px rgba(57,255,20,.35), inset 0 0 10px rgba(57,255,20,.06);
  pointer-events:none;
  animation:cf-toast-life 2s ease-out forwards;
}
/* Downward pointer under the toast */
.cf-share-toast::after {
  content:''; position:absolute; left:50%; bottom:-7px;
  transform:translateX(-50%);
  width:0; height:0; border:6px solid transparent; border-top-color:var(--neon-green); border-bottom:0;
}
@keyframes cf-toast-life {
  0%   { opacity:0; transform:translate(-50%,-100%) translateY(8px); }
  12%  { opacity:1; transform:translate(-50%,-100%) translateY(0); }
  75%  { opacity:1; transform:translate(-50%,-100%) translateY(0); }
  100% { opacity:0; transform:translate(-50%,-100%) translateY(-4px); }
}

/* Spectrogram — scrolling waterfall below controls */
#cfSpecCanvas {
  display:block;
  width:100%;
  margin-top:12px;
  border-radius:6px;
  background:#0a0a1a;
  border:1px solid rgba(57,255,20,.15);
  image-rendering:pixelated; /* crisp edges */
  cursor:crosshair;
}

/* ═══════ UTILITY ═══════ */
.clearfix::after{content:'';display:block;clear:both}
.hidden{display:none!important}

/* ═══════ ALBUM GRID (homepage thumbnail browser) ═══════ */
.album-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:20px;
  margin:0 auto;
  margin-bottom:36px;
}
@media(max-width:600px){
  .album-grid { grid-template-columns:1fr; max-width:360px }
  .album-card { margin:0 auto }
}

.album-card {
  width:300px;
  height:300px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  border-radius:8px;
  overflow:hidden;
  background:var(--card);
  border:1.5px solid var(--border);
  cursor:pointer;
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
}
}
.album-card:hover {
  border-color:var(--neon-green);
  box-shadow:0 4px 20px rgba(57,255,20,.15);
  transform:translateY(-3px);
}

.album-card-thumb {
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}
.album-card-thumb-placeholder {
  width:100%;
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.4rem;
  background:#1a1a2e;
}

.album-card-info {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px 12px;
  overflow:hidden;
}
.album-card-title {
  font-family:var(--mono);
  font-size:.8rem;
  color:var(--text);
  line-height:1.35;
  margin-bottom:4px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.album-card-meta {
  font-size:.65rem;
  color:var(--text-dim);
  line-height:1.4;
}

/* ═══════ MINI PLAYER (floating bottom-right) ═══════ */
.mini-player {
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:9998;
  display:flex;
  align-items:center;
  gap:16px;
  background:linear-gradient(135deg, #0e0e28ee, #12122aee);
  border:1.5px solid var(--neon-green);
  border-radius:14px;
  padding:13px 18px;
  box-shadow:0 8px 32px rgba(0,0,0,.6), 0 0 20px rgba(57,255,20,.12);
  backdrop-filter:blur(12px);
  min-width:370px;
  max-width:540px;
  animation: miniSlideIn .3s ease-out;
}
.mini-player.hidden {
  display:none!important;
}
@keyframes miniSlideIn {
  from { opacity:0; transform:translateY(20px) scale(.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}



/* Thumbnail — species image or fallback icon */
.mini-thumb-wrap {
  width:64px;
  height:64px;
  flex-shrink:0;
  border-radius:8px;
  overflow:hidden;
  position:relative;
  background:#1a1a2e;
  border:1.5px solid var(--border);
  cursor:pointer;
}
.mini-thumb-wrap:hover {
  border-color:var(--neon-cyan);
}
.mini-thumb {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.mini-thumb-fallback {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.7rem;
}

/* Info column — species name + time */
.mini-info {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.mini-species {
  font-size:1.1rem;
  color:#fff;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
}
.mini-species:hover {
  color:var(--neon-cyan);
  text-decoration:underline;
}
.mini-time {
  font-size:.85rem;
  color:var(--text-dim);
  font-family:'Space Mono',monospace;
}

/* Controls */
.mini-controls {
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.mini-btn {
  width:42px;
  height:42px;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s;
  font-size:1rem;
  line-height:1;
}
.mini-play {
  color:var(--neon-green);
  border:2px solid var(--neon-green);
}
.mini-play:hover,
.mini-play.on {
  background:var(--neon-green);
  color:var(--bg);
}
.mini-stop {
  color:var(--neon-pink);
  border:1.5px solid var(--neon-pink);
  font-size:.8rem;
}
.mini-stop:hover {
  background:var(--neon-pink);
  color:#fff;
}
.mini-next {
  color:var(--neon-cyan);
  border:1.5px solid var(--neon-cyan);
  font-size:1.1rem;
}
.mini-next:hover {
  background:rgba(0,240,255,.12);
  border-color:#fff;
  color:#fff;
}

@media(max-width:640px) {
  .mini-player {
    bottom:12px;
    right:12px;
    left:12px;
    max-width:none;
    min-width:auto;
    flex-wrap:nowrap;
    padding:10px 14px;
    gap:12px;
  }
}

/* ═══════ MAPS (Leaflet) — Cold War Dark Theme ═══════ */
#map-global.leaflet-container { height:380px !important }

/* Base map container: dark background, neon border, scanlines */
.leaflet-container {
  height:200px !important; width:100% !important;
  border-radius:6px; margin-bottom:14px;
  border:1.5px solid var(--neon-green) !important;
  background:#0a0e17 !important;
  box-shadow: 0 0 12px rgba(57,255,20,.15), inset 0 0 30px rgba(0,0,0,.6);
  position: relative;
}

/* OSM tiles are light-themed; invert them to match the Cold War dark look.
   Applied only to the tile pane so markers/popups/controls keep their colors. */
.leaflet-tile-pane { filter: invert(0.92) hue-rotate(180deg) contrast(0.92) brightness(0.9); }

/* CRT scanline overlay on maps */
.leaflet-container::after {
  content:''; pointer-events:none;
  position:absolute; inset:0; border-radius:6px; z-index:1000;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(57,255,20,.018) 2px, rgba(57,255,20,.018) 4px),
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.35) 100%);
}

/* Zoom controls: dark with green accents */
.leaflet-bar {
  border:none !important;
  box-shadow:0 0 8px rgba(57,255,20,.3) !important;
}
.leaflet-bar a,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  background:#12122a !important;
  color:var(--neon-green) !important;
  border:none !important;
  font-size:18px !important;
  width:28px !important; height:28px !important;
  line-height:28px !important;
  text-shadow:0 0 6px var(--neon-green) !important;
}
.leaflet-bar a:hover {
  background:#1a1a3e !important;
  color:#fff !important;
}
.leaflet-control-zoom-in { border-radius:4px 4px 0 0 !important; }
.leaflet-control-zoom-out { border-radius:0 0 4px 4px !important; }

/* Attribution: dark, small */
.leaflet-control-attribution {
  background:rgba(18,18,42,.85) !important;
  color:#4a6a4a !important;
  font-family:'Space Mono',monospace !important;
  font-size:9px !important;
}
.leaflet-control-attribution a {
  color:#39ff14aa !important;
}

/* Radar blip marker with pulsing rings */
.cw-radar-marker { background:none; border:none; width:auto !important; height:auto !important; }
.cw-radar-dot {
  border-radius:50%;
  background:var(--radar-color);
  box-shadow: 0 0 6px var(--radar-color), 0 0 12px var(--radar-color);
  position:relative;
  animation: cw-radar-pulse 2s ease-in-out infinite;
}
.cw-radar-dot::before {
  content:''; position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:3px; height:3px; border-radius:50%;
  background:#fff;
}
.cw-radar-dot::after {
  content:''; position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:100%; height:100%; border-radius:50%;
  border:1.5px solid var(--radar-color);
  animation: cw-radar-ring 2s ease-out infinite;
}
@keyframes cw-radar-pulse {
  0%, 100% { opacity:.8; transform:scale(1); }
  50% { opacity:1; transform:scale(1.15); }
}
@keyframes cw-radar-ring {
  0% { transform:translate(-50%,-50%) scale(1); opacity:.7; }
  100% { transform:translate(-50%,-50%) scale(2.5); opacity:0; }
}
/* Leaflet marker dots must not be squashed by the `.modal-box *` max-width
   rule — the marker pane is 0-width, so max-width:100% resolves to 0 and the
   dot collapses to a vertical sliver. (Same specificity as `.modal-box *`,
   this rule wins by position.) */
.cw-radar-marker, .cw-radar-dot { max-width:none; }

/* Cold War popup styling */
.cw-popup {
  font-family:'Space Mono',monospace !important;
  font-size:11px !important;
  color:#c8e6c9 !important;
  cursor:pointer;
  padding:2px 4px;
}
.cw-popup-sub {
  color:#5a7a5a !important;
  font-size:9px !important;
}
.leaflet-popup-content-wrapper {
  background:#0d1117 !important;
  border:1px solid #39ff1444 !important;
  border-radius:4px !important;
  box-shadow:0 0 16px rgba(57,255,20,.2) !important;
  color:#c8e6c9 !important;
}
.leaflet-popup-tip {
  background:#0d1117 !important;
  border:1px solid #39ff1444 !important;
  box-shadow:none !important;
}
.leaflet-popup-close-button {
  color:#ff2d95 !important;
  font-size:18px !important;
}
.leaflet-popup-close-button:hover {
  color:#fff !important;
}

/* Tile layer tint overlay */
.leaflet-tile-pane { opacity:.75; }

.map-placeholder { padding:30px;text-align:center;color:var(--text-dim);font-size:.85rem;background:#0a0a20;border-radius:6px;margin-bottom:14px }

/* ═══════ SPECIES DETAIL OVERLAY — HERO (photo left + facts right) ═══════ */
.sp-hero {
  display:flex; gap:18px; align-items:flex-start;
  padding-top:18px; margin-bottom:8px;
}
.sp-hero-img {
  position:relative; overflow:hidden; border-radius:6px;
  flex:0 0 57%; width:57%;
  container-type: inline-size; /* so overlays can size text to the image box (cqi) */
}
.sp-hero-img img {
  display:block; width:100%; height:auto; max-height:440px; object-fit:cover;
  border-radius:6px; border:1.5px solid var(--border);
}
.sp-hero-facts { flex:1; min-width:0; padding-top:2px; }
.sp-fact {
  display:flex; gap:10px; margin-bottom:10px;
  font-size:.85rem; line-height:1.55; color:var(--text-dim);
}
.sp-fact:last-child { margin-bottom:0 }
.sp-fact-label {
  font-family:var(--pixel); font-size:7px; letter-spacing:.5px;
  color:var(--neon-cyan); text-transform:uppercase;
  min-width:84px; flex-shrink:0; padding-top:3px;
}
.sp-fact-sci { font-style:italic; color:var(--text) }
.sp-fact-models span span { font-size:.8rem }
@media(max-width:720px){
  .sp-hero { flex-direction:column }
  .sp-hero-img { width:100%; flex-basis:auto; max-width:300px }
  .sp-fact-label { min-width:76px }
  .sp-loc { flex-direction:column; gap:10px }
  .sp-loc-side { width:100%; flex-basis:auto }
  .sp-loc-thumb { max-width:280px }
}

/* ── All Detections: per-location sections ── */
.sp-loc {
  display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start;
  margin-bottom:36px;
}
/* Subtle hairline between location sections (skip the first) */
.sp-loc + .sp-loc {
  border-top:1px solid var(--border);
  padding-top:32px;
}
.sp-loc-side {
  flex:0 0 33%; width:33%; min-width:0;
}
.sp-loc-thumb {
  width:100%;
}
.sp-loc-thumb img {
  display:block; width:100%; height:auto;
  border-radius:6px; border:1.5px solid var(--border);
}
.sp-loc-thumb-ph {
  width:100%; aspect-ratio:3/2; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:var(--text-dim);
  background:linear-gradient(135deg,#1a1a2e,#2a2a4a);
  border-radius:6px; border:1.5px solid var(--border);
}
/* Mini map under each location thumbnail — approximate (jittered) location */
.sp-loc-map.leaflet-container {
  height:150px !important;
  margin:10px 0 0;
}
.sp-loc-body { flex:1; min-width:0 }
.sp-loc-head {
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  flex:0 0 100%; /* full-width row above the two columns */
  margin:0 0 4px;
}
.sp-loc-name {
  color:var(--neon-pink); font-size:1.05rem; font-weight:700;
}

/* One detection: meta row + spectrogram snippet */
.sp-det-card {
  background:var(--card); border:1px solid var(--border); border-radius:6px;
  padding:10px 12px; margin-bottom:8px; transition:border-color .15s;
}
.sp-det-card:hover { border-color:#3a3a7a }
.sp-det-meta {
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  font-size:.84rem; flex-wrap:wrap;
}
.sp-det-ctl {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex-shrink:0; cursor:pointer;
  background:#0d0d24; color:var(--text); border:1.5px solid var(--border);
  border-radius:5px; transition:.15s; padding:0;
}
.sp-det-ctl:hover { border-color:var(--neon-green); color:var(--neon-green); box-shadow:0 0 10px rgba(57,255,20,.25) }
.sp-det-ctl.active { border-color:var(--neon-green); color:var(--neon-green); box-shadow:0 0 10px rgba(57,255,20,.35) }
.sp-det-ctl svg { display:block }
.sp-det-file {
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.72rem; color:var(--text-dim);
}
.det-spec-canvas {
  display:block; width:100%; height:84px;
  background:#0a0a1a; border:1px solid var(--border); border-radius:4px;
}

/* "And XX more detections" / "All location detections" link */
.sp-loc-more {
  display:inline-block; margin:8px 0 4px; cursor:pointer;
  font-family:var(--pixel); font-size:7px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--neon-cyan); transition:.15s;
}
.sp-loc-more:hover { color:#fff; text-shadow:0 0 8px rgba(0,240,255,.6) }

/* ═══════ DETECTED FLASH OVERLAY ═══════ */
.species-img-wrap {
  position:relative; overflow:hidden; border-radius:6px; margin-bottom:14px;
}
.species-img-wrap img {
  display:block; width:100%; max-height:420px; object-fit:cover;
  border-radius:6px; border:1.5px solid var(--border);
}
.detected-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:5;
  background:rgba(255,0,0,0.18);
  animation: detBgPulse 1.6s ease-out forwards;
}
.detected-overlay span {
  font-family: Impact, 'Arial Black', 'Helvetica Neue', sans-serif;
  /* Sized to the hero box (not the viewport) so it always fits the 57%-wide image */
  font-size: clamp(1.4rem, 11cqi, 4.2rem);
  font-weight: 900;
  letter-spacing: .35em;
  text-indent: .35em;
  color: #ff1a1a;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(255,20,20,.9),
    0 0 30px rgba(255,0,0,.7),
    0 0 60px rgba(255,0,0,.45),
    0 0 100px rgba(255,0,0,.25),
    4px 4px 0 rgba(0,0,0,.7);
  animation: detTextFlash 1.6s ease-out forwards;
  -webkit-text-stroke: 1px rgba(0,0,0,.4);
}
@keyframes detBgPulse {
  0%   { opacity:0 }
  6%   { opacity:1; background:rgba(255,0,0,.32) }
  12%  { opacity:.6; background:rgba(255,0,0,.10) }
  22%  { opacity:1; background:rgba(255,0,0,.28) }
  40%  { opacity:1; background:rgba(255,0,0,.14) }
  65%  { opacity:.8 }
  100% { opacity:0 }
}
@keyframes detTextFlash {
  0%   { opacity:0; transform:scale(1.25); filter:blur(8px) }
  6%   { opacity:1; transform:scale(1.02); filter:blur(0) }
  12%  { opacity:.5; transform:scale(1.0) }
  22%  { opacity:1; transform:scale(1.0) }
  45%  { opacity:1 }
  75%  { opacity:.7; filter:blur(1px) }
  100% { opacity:0; filter:blur(4px) }
}

/* ═══════ FUN FACT OVERLAY (non-bird species) ═══════ */
.fun-fact-overlay {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:4;
  padding: 18px 12px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  opacity:0; transition: opacity .9s ease-in;
}
.fun-fact-overlay.show { opacity:1; }
.fun-fact-overlay span {
  font-family: Impact, 'Arial Black', 'Helvetica Neue', sans-serif;
  font-size: clamp(.7rem, 3.4cqi, 1.3rem);
  font-weight: 700;
  letter-spacing: .1em;
  color: #4fc3f7;
  text-shadow:
    0 0 6px rgba(79,195,247,.8),
    0 0 18px rgba(79,195,247,.4),
    0 0 36px rgba(79,195,247,.2),
    1px 1px 0 rgba(0,0,0,.7);
}