/* ══════════════════════════════════════════════════════════════════
   KRONOS EARTH WATCH — Broadcast Stage v5
   Performance mode: left AI panel · sweeping timeline · volcano counter
   ══════════════════════════════════════════════════════════════════ */

:root {
  --cyan: #00e5ff;
  --cyan-dim: #006978;
  --amber: #ff6b35;
  --amber-glow: rgba(255,107,53,0.4);
  --red: #ff1744;
  --orange: #ff5722;
  --gold: #ffab00;
  --panel-bg: rgba(4,2,12,0.92);
  --panel-border: rgba(255,107,53,0.18);
  --text: #e0d6cc;
  --text-dim: #6d5e52;
  --text-bright: #fff;
  --font-display: "Orbitron", sans-serif;
  --font-mono: "Share Tech Mono", "Courier New", monospace;
  --font-ui: "Manrope", sans-serif;
  --left-w: 380px;
  --right-w: 360px;
  --top-h: 72px;
  --timeline-h: 80px;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

body {
  background: #000;
  color: var(--text);
  font-family: var(--font-ui);
  overflow: hidden;
  cursor: grab;
}
body:active { cursor: grabbing; }
body.clean-feed-active,
body.clean-feed-active:active {
  cursor: none;
}

body.clean-feed-active #capture-studio-panel,
body.clean-feed-active #settings-btn,
body.clean-feed-active #settings-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#capture-root {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.capture-studio-hidden {
  display: none;
}

#capture-studio {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 320;
  width: min(360px, calc(100vw - 32px));
  pointer-events: auto;
}

#capture-studio-panel,
#capture-result {
  background: rgba(6, 10, 18, 0.94);
  border: 1px solid rgba(0, 229, 255, 0.24);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px);
}

#capture-studio-panel {
  padding: 16px;
}

#capture-studio.recording #capture-studio-panel {
  border-color: rgba(255, 107, 53, 0.45);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 28px rgba(255, 107, 53, 0.18);
}

#capture-studio-kicker,
#capture-result-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--cyan);
  text-transform: uppercase;
}

#capture-studio-status {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-bright);
}

.capture-studio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text);
}

.capture-studio-row select {
  min-width: 132px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--panel-border);
  color: var(--cyan);
  border-radius: 8px;
  padding: 7px 10px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1px;
}

.capture-studio-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

#capture-record-btn,
#capture-stop-btn,
#capture-close-btn,
#capture-download {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  color: var(--text-bright);
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

#capture-record-btn {
  border-color: rgba(255,107,53,0.5);
  background: rgba(255,107,53,0.16);
  color: #fff3eb;
  flex: 1;
}

#capture-stop-btn,
#capture-close-btn,
#capture-download {
  flex: 1;
}

#capture-record-btn:hover,
#capture-stop-btn:hover,
#capture-close-btn:hover,
#capture-download:hover {
  transform: translateY(-1px);
  border-color: var(--cyan);
}

#capture-record-btn:disabled,
#capture-stop-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

#capture-remaining {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--amber);
}

#capture-studio.recording #capture-remaining {
  color: #ff8d66;
  text-shadow: 0 0 16px rgba(255, 107, 53, 0.22);
}

#capture-studio-hint {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(224,214,204,0.76);
}

#capture-result {
  margin-top: 12px;
  padding: 14px;
}

#capture-thumbnail-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.capture-thumbnail-hidden {
  display: none;
}

#capture-thumbnail-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 10px;
}

#capture-thumbnail-preview {
  width: 100%;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.25);
}

.capture-result-hidden {
  display: none;
}

#capture-preview {
  display: block;
  width: 100%;
  margin-top: 12px;
  border-radius: 10px;
  background: #05070d;
  aspect-ratio: 16 / 9;
}

#globeViz { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:1; }

#vignette {
  position:fixed; top:0; left:0; width:100%; height:100%;
  z-index:2; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.35) 100%);
}

/* ══════════════════════════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════════════════════════ */
#top-bar {
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding: 16px 24px 20px;
  background: linear-gradient(180deg, rgba(0,6,18,0.92) 0%, rgba(0,6,18,0.5) 70%, transparent 100%);
  pointer-events:none;
}
#title {
  font-family:var(--font-display); font-size:22px; font-weight:900;
  letter-spacing:5px; color:#fff;
  text-shadow: 0 0 24px var(--amber-glow), 0 0 60px rgba(255,107,53,0.15);
}
#subtitle { font-size:10px; letter-spacing:3.5px; color:var(--amber); margin-top:4px; opacity:0.75; }
#status-section { text-align:right; }
#top-right-controls { display:flex; align-items:center; gap:14px; justify-content:flex-end; }

/* Show mode badge (CATCHUP / LIVE) */
#show-mode-badge {
  font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:2px; padding:4px 12px; border-radius:3px;
  background:rgba(0,229,255,0.15); border:1px solid rgba(0,229,255,0.4);
  color:var(--cyan); pointer-events:none;
  transition: all 0.4s ease;
}
#show-mode-badge.live {
  background:rgba(255,23,68,0.2); border-color:rgba(255,23,68,0.5);
  color:var(--red); animation:pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge { 0%,100%{opacity:1} 50%{opacity:0.6} }

#live-indicator {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:13px; font-weight:700;
  color:var(--red); letter-spacing:3px;
}
.live-dot {
  width:10px; height:10px; background:var(--red); border-radius:50%;
  box-shadow:0 0 10px var(--red); animation:pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.7)} }
#clock { font-size:20px; font-family:var(--font-mono); color:var(--text); margin-top:4px; letter-spacing:3px; }
#date-line { font-size:10px; color:var(--text-dim); letter-spacing:1.5px; margin-top:2px; }

/* Settings button */
#settings-btn {
  pointer-events:auto; cursor:pointer;
  background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:6px;
  color:var(--amber); font-size:20px; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  transition: border-color 0.2s, color 0.2s;
}
#settings-btn:hover { border-color:var(--amber); color:#fff; }

/* ══════════════════════════════════════════════════════════════════
   SETTINGS PANEL
   ══════════════════════════════════════════════════════════════════ */
#settings-panel {
  position:fixed; top:var(--top-h); right:24px; z-index:20;
  width:300px; background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:6px;
  overflow:hidden; pointer-events:auto;
  transform:translateX(300px); opacity:0; transition:transform 0.3s ease, opacity 0.3s ease;
}
#settings-panel.open { transform:translateX(0); opacity:1; }
.settings-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; border-bottom:1px solid var(--panel-border);
  font-family:var(--font-display); font-size:9px; font-weight:700; letter-spacing:2px; color:var(--amber);
}
.settings-header button { background:none; border:none; color:var(--text-dim); font-size:16px; cursor:pointer; }
.settings-body { padding:10px 14px; }
.setting-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 0; font-size:12px; color:var(--text); cursor:pointer;
}
.setting-select-row {
  gap: 12px;
}
.setting-row select {
  min-width: 118px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--panel-border);
  color: var(--cyan);
  border-radius: 4px;
  padding: 5px 8px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1px;
  outline: none;
}
.setting-row select:hover,
.setting-row select:focus {
  border-color: var(--amber);
  color: #fff;
}
.setting-row select option {
  background: #0b0a14;
  color: var(--text);
}
.setting-row input[type=checkbox] {
  appearance:none; width:36px; height:18px; border-radius:9px;
  background:rgba(255,255,255,0.1); border:1px solid var(--panel-border);
  position:relative; cursor:pointer; transition:background 0.2s;
}
.setting-row input[type=checkbox]::after {
  content:""; position:absolute; top:2px; left:2px;
  width:12px; height:12px; border-radius:50%; background:var(--text-dim);
  transition: transform 0.2s, background 0.2s;
}
.setting-row input[type=checkbox]:checked { background:rgba(255,107,53,0.3); border-color:var(--amber); }
.setting-row input[type=checkbox]:checked::after { transform:translateX(18px); background:var(--amber); }

/* ══════════════════════════════════════════════════════════════════
   LEFT PANEL — AI Commentary Cards
   ══════════════════════════════════════════════════════════════════ */
#left-panel {
  position:fixed;
  top:calc(var(--top-h) + 10px);
  left:0;
  bottom:calc(var(--timeline-h) + 8px);
  width:var(--left-w);
  z-index:16;
  pointer-events:none;
  display:flex;
  flex-direction:column;
}

#card-container {
  margin:0 12px;
  background:var(--panel-bg);
  --focus-accent: var(--amber);
  border:1px solid var(--panel-border);
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  max-height:100%;
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
#card-container.hero {
  border-color:rgba(255,171,0,0.5);
  box-shadow:0 0 30px rgba(255,171,0,0.1);
}

/* Card image area */
#card-image {
  width:100%;
  height:180px;
  background: linear-gradient(135deg, #0a1628 0%, #1a0e2e 50%, #0f1922 100%);
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
#card-image-overlay {
  position:absolute; bottom:0; left:0; right:0; height:60px;
  background:linear-gradient(transparent, rgba(4,2,12,0.95));
}

/* Card content */
#card-content {
  padding:16px 20px 20px;
  flex:1;
  overflow-y:auto;
}
#card-content::-webkit-scrollbar { width:0; }

#card-source-badge {
  font-family:var(--font-display); font-size:8px; font-weight:700;
  letter-spacing:2.5px; color:var(--cyan);
  background:rgba(0,229,255,0.1); border:1px solid rgba(0,229,255,0.3);
  display:inline-block; padding:3px 10px; border-radius:3px;
  margin-bottom:10px;
}
#card-source-badge.freddy { color:#a78bfa; background:rgba(167,139,250,0.1); border-color:rgba(167,139,250,0.3); }
#card-source-badge.sammy { color:#34d399; background:rgba(52,211,153,0.1); border-color:rgba(52,211,153,0.3); }

#card-meta-row {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
#card-date {
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:800;
  color:var(--text-bright);
  letter-spacing:0.4px;
}
#card-time {
  font-family:var(--font-display);
  font-size:18px;
  font-weight:800;
  color:var(--focus-accent);
  letter-spacing:1px;
  white-space:nowrap;
}

#card-headline {
  font-family:var(--font-ui); font-size:24px; font-weight:800;
  color:var(--text-bright); line-height:1.3;
  letter-spacing:0.1px;
  margin-bottom:10px;
}

#card-subhead {
  font-family:var(--font-ui); font-size:16px;
  font-weight:700;
  color:var(--focus-accent); letter-spacing:0.2px;
  margin-bottom:14px; line-height:1.45;
}

#card-body {
  font-family:var(--font-ui); font-size:15px;
  color:var(--text); line-height:1.7;
  margin-bottom:18px;
}
#card-body strong { color:var(--text-bright); font-weight:400; }

#card-data {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.card-dp {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:4px;
  padding:8px 10px;
}
.card-dp-key {
  font-size:10px; letter-spacing:1.2px;
  color:var(--text-dim); text-transform:uppercase;
  margin-bottom:3px;
}
.card-dp-val {
  font-family:var(--font-ui); font-size:18px; font-weight:800;
  color:var(--focus-accent);
}

/* Card transition */
#card-container.transitioning #card-content {
  opacity:0;
  transform:translateY(8px);
}
#card-content {
  transition:opacity 0.3s ease, transform 0.3s ease;
}

/* ══════════════════════════════════════════════════════════════════
   STATS BAR
   ══════════════════════════════════════════════════════════════════ */
#stats-bar {
  position:fixed; top:var(--top-h); left:var(--left-w); z-index:10;
  display:flex; gap:1px; pointer-events:none;
  margin-left:12px;
}
.stat {
  background:var(--panel-bg); border:1px solid var(--panel-border);
  padding:6px 12px; display:flex; flex-direction:column; align-items:center; min-width:60px;
}
.stat:first-child { border-radius:0 0 0 5px; }
.stat:last-child { border-radius:0 0 5px 0; }
.stat-value { font-family:var(--font-display); font-size:15px; font-weight:800; color:var(--amber); line-height:1; }
.stat-label { font-family:var(--font-ui); font-size:10px; font-weight:700; letter-spacing:0.8px; color:rgba(224,214,204,0.82); margin-top:5px; }
#stat-iss { color: var(--cyan); text-shadow: 0 0 10px rgba(0,229,255,0.22); }

/* ══════════════════════════════════════════════════════════════════
   MET TEAM COMMENTARY PANEL — top right
   ══════════════════════════════════════════════════════════════════ */
#met-panel {
  position:fixed;
  top:calc(var(--top-h) + 10px);
  right:calc(var(--right-w) + 12px);
  z-index:10;
  width:280px;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:8px;
  overflow:hidden;
  pointer-events:none;
  --met-accent:#a78bfa;
  transition:border-color 0.5s ease, box-shadow 0.5s ease;
}
#met-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px 6px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
#met-agent-badge {
  font-family:var(--font-display);
  font-size:8px;
  font-weight:700;
  letter-spacing:2px;
  color:#a78bfa;
  background:rgba(167,139,250,0.12);
  border:1px solid rgba(167,139,250,0.3);
  padding:3px 8px;
  border-radius:3px;
  transition:color 0.5s, background 0.5s, border-color 0.5s;
}
#met-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#a78bfa;
  animation:pulse-dot 2s ease-in-out infinite;
  transition:background 0.5s;
}
#met-body {
  padding:10px 14px 8px;
  min-height:52px;
  display:flex;
  align-items:center;
}
#met-text {
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:600;
  color:var(--text);
  line-height:1.5;
  transition:opacity 0.5s ease;
}
#met-text strong {
  color:var(--met-accent);
  font-weight:800;
  background:color-mix(in srgb, var(--met-accent) 14%, transparent);
  padding:1px 4px;
  border-radius:4px;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--met-accent) 28%, transparent);
}
#met-text em {
  color:color-mix(in srgb, var(--met-accent) 78%, white);
  font-style:normal;
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--met-accent) 55%, transparent);
  text-underline-offset:2px;
}
#met-text code {
  font-family:var(--font-mono);
  font-size:12px;
  color:color-mix(in srgb, var(--met-accent) 85%, white);
  background:rgba(255,255,255,0.04);
  padding:1px 4px;
  border-radius:4px;
}
#met-text.fading { opacity:0; }
#met-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 14px 8px;
}
#met-agent-name {
  font-family:var(--font-display);
  font-size:8px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.4);
  transition:color 0.5s;
}
#met-counter {
  font-family:var(--font-mono);
  font-size:8px;
  color:rgba(255,255,255,0.2);
  letter-spacing:1px;
}

/* ══════════════════════════════════════════════════════════════════
   EARTHQUAKE LABEL — bottom left
   ══════════════════════════════════════════════════════════════════ */
#eq-counter {
  position:fixed;
  bottom:calc(var(--timeline-h) + 14px);
  left:16px;
  z-index:10;
  display:flex; align-items:center; gap:8px;
  background:var(--panel-bg); border:1px solid rgba(255,107,53,0.25);
  border-radius:6px; padding:8px 16px;
  pointer-events:none;
}
#eq-counter-icon { font-size:18px; }
#eq-counter-label {
  font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:3px; color:var(--amber); opacity:0.85;
}

/* ══════════════════════════════════════════════════════════════════
   RIGHT PANEL: EARTHQUAKE LIST
   ══════════════════════════════════════════════════════════════════ */
#info-panel {
  position:fixed;
  top:calc(var(--top-h) + 10px);
  right:0;
  bottom:calc(var(--timeline-h) + 8px);
  width:var(--right-w);
  z-index:10;
  background:linear-gradient(270deg, rgba(4,2,12,0.94) 0%, rgba(4,2,12,0.85) 80%, transparent 100%);
  border-left:1px solid var(--panel-border);
  display:flex; flex-direction:column;
  pointer-events:auto; overflow:hidden;
}
.info-section-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px 10px;
  font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:2.5px; color:var(--amber); flex-shrink:0;
}
.sort-indicator {
  font-family:var(--font-mono); font-size:9px; letter-spacing:1px;
  color:var(--cyan); opacity:0.7;
}
.info-list { flex:1; overflow-y:auto; padding:0 8px 10px; }
.info-list::-webkit-scrollbar { width:3px; }
.info-list::-webkit-scrollbar-thumb { background:rgba(255,107,53,0.2); border-radius:2px; }

.event-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 12px; border-radius:6px; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background 0.3s, border-color 0.3s;
}
.event-item:hover { background:rgba(0,229,255,0.08); }
.event-item.focused-event {
  border:1px solid rgba(255,107,53,0.5);
}
/* Past events (behind playhead) — slightly dimmed */
.event-item.past-event { opacity:0.5; }
.event-side {
  min-width:68px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  flex-shrink:0;
}
.event-mag {
  font-family:var(--font-display); font-size:18px; font-weight:900;
  width:68px; text-align:center; padding:8px 4px;
  border-radius:4px; background:rgba(255,255,255,0.05); flex-shrink:0;
  border-left:3px solid transparent;
}
.event-date-stack {
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:800;
  color:var(--text-bright);
  letter-spacing:0.35px;
  text-align:center;
  line-height:1.1;
}
.event-time-stack {
  font-family:var(--font-display);
  font-size:13px;
  font-weight:800;
  color:var(--amber);
  letter-spacing:0.8px;
  text-align:center;
  line-height:1;
}
.event-details { flex:1; min-width:0; }
.event-region {
  display:inline-block;
  margin-bottom:6px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(0,229,255,0.10);
  border:1px solid rgba(0,229,255,0.22);
  color:var(--cyan);
  font-family:var(--font-display);
  font-size:9px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.event-place {
  font-size:15px; font-weight:700; color:#fff; line-height:1.35;
  white-space:normal;
  overflow:visible;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.event-depth {
  margin-top:7px;
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,0.82);
  letter-spacing:0.25px;
}
.event-depth strong {
  font-family:var(--font-display);
  font-size:15px;
  color:var(--amber);
  letter-spacing:0.9px;
}
.event-tsunami {
  display:inline-block;
  margin-left:7px;
  font-family:var(--font-display);
  font-size:10px;
  font-weight:800;
  color:var(--red);
  letter-spacing:1px;
}
.event-age {
  margin-top:7px;
  font-size:11px;
  color:var(--text-dim);
  letter-spacing:0.25px;
  line-height:1.2;
}
.event-loading { text-align:center; padding:20px; color:var(--text-dim); font-size:13px; }

/* ══════════════════════════════════════════════════════════════════
   BOTTOM TIMELINE — Sweeping Playhead
   ══════════════════════════════════════════════════════════════════ */
#timeline-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:18;
  height:var(--timeline-h); display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(0,6,18,0.5) 0%, var(--panel-bg) 30%);
  border-top:1px solid var(--panel-border);
  padding:0 16px; gap:12px;
}
#timeline-label-left, #timeline-label-right {
  font-family:var(--font-display); font-size:8px; font-weight:700;
  letter-spacing:2px; color:var(--text-dim); white-space:nowrap; flex-shrink:0;
}
#timeline-track {
  flex:1; height:60px; position:relative;
}
#timeline-line {
  position:absolute; top:50%; left:0; right:0; height:2px;
  background:rgba(255,255,255,0.08); transform:translateY(-50%);
}

/* Time markers (every 4 hours) */
#timeline-time-markers { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; }
.timeline-time-mark {
  position:absolute; top:8px; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:9px; color:rgba(255,255,255,0.2);
  letter-spacing:1px;
}
.timeline-time-tick {
  position:absolute; top:50%; width:1px; height:12px;
  background:rgba(255,255,255,0.08); transform:translate(-50%,-50%);
}

/* Event dots */
#timeline-dots { position:absolute; top:0; left:0; right:0; bottom:0; }
.timeline-dot {
  position:absolute; top:50%; border-radius:50%;
  transform:translate(-50%,-50%); cursor:pointer;
  transition:transform 0.3s, opacity 0.3s, box-shadow 0.3s;
}
.timeline-dot:hover { transform:translate(-50%,-50%) scale(1.6); z-index:2; }
.timeline-dot.tl-focused {
  transform:translate(-50%,-50%) scale(2.5);
  z-index:5;
  box-shadow:0 0 16px rgba(255,107,53,0.9);
}
/* Past dots: solid and bright */
.timeline-dot.tl-past { opacity:0.7; }
/* Future dots: dim outline */
.timeline-dot.tl-future { opacity:0.2; }

/* Playhead — the sweeping "present moment" */
#timeline-playhead {
  position:absolute; top:0; bottom:0; left:0%;
  width:0; z-index:10; pointer-events:none;
  transition:left 1.5s ease-in-out;
}
#playhead-line {
  position:absolute; top:4px; bottom:18px; left:0;
  width:2px; background:var(--amber);
  box-shadow:0 0 8px var(--amber), 0 0 20px rgba(255,107,53,0.3);
}
#playhead-glow {
  position:absolute; top:50%; left:-8px;
  width:18px; height:18px; transform:translateY(-50%);
  background:radial-gradient(circle, var(--amber) 0%, transparent 70%);
  border-radius:50%;
  animation:playhead-pulse 1.6s ease-in-out infinite;
}
@keyframes playhead-pulse {
  0%,100% { opacity:0.8; transform:translateY(-50%) scale(1); }
  50% { opacity:0.4; transform:translateY(-50%) scale(1.4); }
}
#playhead-label {
  position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-size:8px; font-weight:700;
  color:var(--amber); letter-spacing:1px; white-space:nowrap;
  text-shadow:0 0 6px rgba(0,0,0,0.8);
}

/* Focus overlay above timeline */
#timeline-focus-overlay {
  position:absolute; top:-44px; transform:translateX(-50%);
  background:rgba(4,2,12,0.95); border:1px solid var(--amber);
  border-radius:6px; padding:7px 12px; white-space:nowrap;
  font-family:var(--font-ui); font-size:12px; font-weight:800;
  color:var(--text-bright); letter-spacing:0.2px;
  opacity:0; transition:opacity 0.3s; pointer-events:none;
  z-index:80;
  box-shadow:0 0 18px rgba(0,0,0,0.35);
}
#timeline-focus-overlay.visible { opacity:1; }

/* ══════════════════════════════════════════════════════════════════
   LEGEND
   ══════════════════════════════════════════════════════════════════ */
#legend {
  position:fixed; bottom:calc(var(--timeline-h) + 6px); right:calc(var(--right-w) + 12px);
  z-index:10; display:flex; align-items:center; gap:6px;
  background:var(--panel-bg); border:1px solid var(--panel-border);
  border-radius:4px; padding:5px 12px; pointer-events:none;
}
.legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.legend-text { font-size:9px; color:var(--text-dim); margin-right:4px; }

/* ══════════════════════════════════════════════════════════════════
   ATTRIBUTION
   ══════════════════════════════════════════════════════════════════ */
#attribution {
  position:fixed; bottom:calc(var(--timeline-h) + 4px); left:50%;
  transform:translateX(-50%); z-index:10;
  font-size:8px; letter-spacing:2.5px; color:var(--text-dim); opacity:0.4; pointer-events:none;
}

/* ══════════════════════════════════════════════════════════════════
   MARKER ANIMATIONS
   ══════════════════════════════════════════════════════════════════ */
@keyframes marker-ripple {
  0% { transform:scale(0.3); opacity:0.8; }
  100% { transform:scale(1.8); opacity:0; }
}

.globe-marker { transition:opacity 0.4s ease, filter 0.4s ease; }
.globe-marker.dimmed { opacity:0.12 !important; filter:saturate(0.2) brightness(0.5); }
.globe-marker.focused { opacity:1 !important; filter:brightness(1.4) drop-shadow(0 0 12px var(--amber)); }
.quake-focused-marker { z-index:10; }
.live-quake-marker {
  backdrop-filter: blur(1px);
}
.live-highlight-marker {
  backdrop-filter: blur(1px);
}

.map-guide-label {
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:800;
  letter-spacing:1.6px;
  color:rgba(190, 231, 243, 0.88);
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(0,0,0,0.75);
  white-space:nowrap;
  pointer-events:none;
}
.map-guide-label.ocean {
  color:rgba(116, 220, 247, 0.72);
}
.map-guide-label.region {
  color:rgba(255,255,255,0.8);
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1200px) {
  :root { --left-w:300px; --right-w:280px; }
}
@media (max-width:900px) {
  :root { --left-w:0px; --right-w:0px; }
  #left-panel, #info-panel, #met-panel { display:none; }
  #stats-bar { left:12px; margin-left:0; }
  #eq-counter { left:14px; }
  #legend { right:12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Stage Curtain — hides globe until first reveal
   ═══════════════════════════════════════════════════════════════════ */
#stage-curtain {
  position:fixed; inset:0; z-index:200;
  background:#040812;
  transition:opacity 1.2s ease;
}
#stage-curtain.curtain-up {
  opacity:0; pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════════
   Countdown Overlay — live→broadcast transition
   ═══════════════════════════════════════════════════════════════════ */
#countdown-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(4,8,18,0.97);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.8s ease;
  pointer-events:none;
}
#countdown-overlay.countdown-hidden {
  opacity:0; pointer-events:none;
}
#countdown-overlay.countdown-visible {
  opacity:1; pointer-events:auto;
}
#countdown-content {
  text-align:center;
}
#countdown-title {
  font-family:'Orbitron',sans-serif;
  font-size:14px; font-weight:700;
  letter-spacing:4px; color:#8fe9ff;
  margin-bottom:16px; opacity:0.7;
}
#countdown-stats {
  font-family:'Share Tech Mono',monospace;
  font-size:13px; color:rgba(255,255,255,0.5);
  line-height:1.8; margin-bottom:32px;
}
#countdown-number {
  font-family:'Orbitron',sans-serif;
  font-size:120px; font-weight:900;
  color:#ff6b35;
  text-shadow:0 0 60px rgba(255,107,53,0.5), 0 0 120px rgba(255,107,53,0.2);
  transition:transform 0.3s ease, opacity 0.3s ease;
}
#countdown-number.pop {
  transform:scale(1.15);
}
@media (max-width:900px) {
  #countdown-number { font-size:72px; }
}