:root {
  --bg: #0a0a0a;
  --fg: #e8e8e8;
  --fg-dim: #6a6a6a;
  --fg-faint: #3a3a3a;
  --accent: #ffffff;
  --warn: rgba(255, 110, 90, 0.85);
  --mono: "SF Mono", "JetBrains Mono", "Menlo", "Monaco", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Inter", sans-serif;
}

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

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===== corner buttons ===== */
.corner-btn {
  position: fixed;
  top: 24px;
  background: none;
  border: none;
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 6px 10px;
  transition: color 0.4s ease;
  z-index: 50;
}
.corner-btn-left  { left: 24px; }
.corner-btn-right { right: 24px; }
.corner-btn:hover { color: var(--fg); }

/* ===== overlays / modals ===== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.96);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  animation: fadeIn 0.5s ease;
}
.overlay[hidden] { display: none; }
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  max-width: 560px;
  width: calc(100% - 48px);
  padding: 40px 32px;
  border: 1px solid var(--fg-faint);
  background: var(--bg);
}
.modal-header {
  font-size: 13px;
  color: var(--fg-dim);
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}
.about-text p { margin-bottom: 14px; line-height: 1.55; font-size: 14px; color: var(--fg); font-family: var(--sans); }
.about-text a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.close-btn {
  margin-top: 28px;
  background: none;
  border: none;
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 0.05em;
}
.close-btn:hover { color: var(--fg); }

/* ===== enter screen =====
   Button stays flex-centered (same position as listening… text, no jump).
   Tagline sits at the bottom of the screen as a subtle italic line. */
.enter-tagline {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--fg-dim);
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  line-height: 1.7;
  letter-spacing: 0.04em;
}
.enter-tagline p { margin: 0; }
#enterBtn {
  background: none;
  border: 1px solid var(--fg-dim);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  padding: 14px 38px;
  cursor: pointer;
  transition: all 0.3s ease;
}
#enterBtn:hover {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}

/* ===== central display ===== */
.display {
  position: relative;
  z-index: 10;
  text-align: center;
  pointer-events: none;
}
.listening {
  color: var(--fg-dim);
  font-size: 14px;
  letter-spacing: 0.15em;
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

.event-info {
  animation: fadeIn 0.6s ease;
}
.evt-location {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
  color: var(--fg);
}
.evt-magnitude {
  font-family: var(--mono);
  font-size: 42px;
  font-weight: 200;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.evt-meta {
  color: var(--fg-dim);
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* ===== wave animation ===== */
.wave-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.wave-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.wave-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.01;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  /* Two parallel animations: both linear so the ring grows VISIBLY throughout
     its lifetime (not bursting to the edge in the first 20%) and the fade
     happens while the ring is still on-screen. */
  animation:
    wave-scale var(--wave-dur, 6s) linear var(--wave-delay, 0s) forwards,
    wave-fade  var(--wave-dur, 6s) linear var(--wave-delay, 0s) forwards;
  opacity: 0;
}
.wave-ring.warn { stroke: var(--warn); }
@keyframes wave-scale {
  from { transform: scale(0.5); }
  to   { transform: scale(var(--wave-max, 30)); }
}
@keyframes wave-fade {
  0%   { opacity: 0; }
  30%  { opacity: var(--wave-peak, 0.7); }    /* slow gradual emergence — no "pop" at center */
  100% { opacity: 0; }                         /* then continuous linear fade as the ring expands outward */
}

/* ===== screen shake ===== */
/* Body uses a transform animation that pulls from --shake-amp (set by JS each frame).
   We rely on translate3d so the GPU handles it smoothly. */
body.shaking {
  animation: shake 0.18s linear infinite;
  will-change: transform;
}
@keyframes shake {
  0%   { transform: translate3d(0, 0, 0); }
  10%  { transform: translate3d(calc(var(--shake-amp, 0px) * -1), calc(var(--shake-amp, 0px) *  0.5), 0); }
  20%  { transform: translate3d(calc(var(--shake-amp, 0px) *  0.8), calc(var(--shake-amp, 0px) * -0.6), 0); }
  30%  { transform: translate3d(calc(var(--shake-amp, 0px) * -0.6), calc(var(--shake-amp, 0px) * -0.4), 0); }
  40%  { transform: translate3d(calc(var(--shake-amp, 0px) *  0.4), calc(var(--shake-amp, 0px) *  0.7), 0); }
  50%  { transform: translate3d(calc(var(--shake-amp, 0px) * -0.8), calc(var(--shake-amp, 0px) *  0.3), 0); }
  60%  { transform: translate3d(calc(var(--shake-amp, 0px) *  0.5), calc(var(--shake-amp, 0px) * -0.5), 0); }
  70%  { transform: translate3d(calc(var(--shake-amp, 0px) * -0.3), calc(var(--shake-amp, 0px) *  0.6), 0); }
  80%  { transform: translate3d(calc(var(--shake-amp, 0px) *  0.7), calc(var(--shake-amp, 0px) * -0.2), 0); }
  90%  { transform: translate3d(calc(var(--shake-amp, 0px) * -0.4), calc(var(--shake-amp, 0px) *  0.4), 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ===== log list ===== */
.log-list {
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-gutter: stable;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg);
}
.log-empty { color: var(--fg-dim); font-style: italic; }
.log-head-row,
.log-row {
  display: grid;
  grid-template-columns: 70px 80px 220px 70px;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--fg-faint);
  align-items: start;
}
.col-time { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.time-recv { font-size: 9px; color: var(--fg-faint); letter-spacing: 0.04em; }
.log-head-row {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-right: 15px; /* mirror the scrollbar gutter on the list below */
}
/* Past events stay dim like the menu; the most recently RECEIVED one is
   bright white — regardless of its chronological position in the list
   (late-arriving small events still get the highlight). */
.log-row { color: var(--fg-dim); }
.log-row.just-arrived { color: var(--fg); }
.log-row .col-place { font-family: var(--sans); font-size: 13px; white-space: nowrap; overflow: hidden; }
.log-row .col-depth { text-align: left; }
/* Header switches from "magnitude" → "mag" on narrow screens. Both spans
   live in the DOM so screen readers see one of them; CSS hides whichever
   doesn't match the viewport. Default state (desktop) is "magnitude"
   shown, "mag" hidden — the media query below flips this on mobile. */
.log-head-row .lh-short { display: none; }
.log-head-row .lh-full  { display: inline; }
/* Marquee for long place names — JS adds .marquee + --marquee-distance
   only to cells whose inner text doesn't fit. The animation gently slides
   the text left to reveal the end, pauses, then slides back. Short names
   that already fit are untouched (no animation, no jitter). */
.log-row .col-place .marquee-inner { display: inline-block; white-space: nowrap; }
.log-row .col-place.marquee .marquee-inner {
  animation: marquee-scroll 14s ease-in-out infinite;
}
@keyframes marquee-scroll {
  0%, 18%   { transform: translateX(0); }
  45%, 60%  { transform: translateX(var(--marquee-distance, 0)); }
  90%, 100% { transform: translateX(0); }
}

/* ===== mobile: log fits narrow screens =====
   Below 600px width the fixed 70/80/220/70 grid overflows. We tighten the
   fixed columns and let the place column take whatever space is left so it
   truncates with ellipsis instead of pushing depth off-screen. */
@media (max-width: 600px) {
  /* About: smaller text + safety-net scroll so the bottom border of the
     modal is never clipped, no matter how tall the content gets. */
  .modal {
    padding: 32px 20px;
    max-height: 85vh;
    overflow-y: auto;
  }
  .about-text p {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  /* Log: tighter grid, place takes the remaining space and the magnitude
     header switches to its short form so it doesn't bleed into LOCATION. */
  .log-head-row,
  .log-row {
    grid-template-columns: 60px 40px 1fr 55px;
    gap: 8px;
    font-size: 11px;
  }
  .log-row .col-place { font-size: 12px; }
  .log-head-row { padding-right: 0; }
  .time-recv { font-size: 8px; }
  .log-head-row .lh-full  { display: none; }
  .log-head-row .lh-short { display: inline; }
}

/* ===== test panel ===== */
.test-panel {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  align-items: center;
  background: rgba(20, 20, 20, 0.85);
  border: 1px solid var(--fg-faint);
  padding: 8px 14px;
  font-size: 12px;
  color: var(--fg-dim);
  z-index: 40;
  transition: opacity 0.3s ease;
}
.test-panel.hidden { display: none; }
.test-title { letter-spacing: 0.1em; margin-right: 8px; }
.test-panel label { display: flex; align-items: center; gap: 6px; }
.test-panel input {
  background: var(--bg);
  border: 1px solid var(--fg-faint);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
  width: 56px;
  padding: 4px 6px;
}
.test-panel button {
  background: none;
  border: 1px solid var(--fg-dim);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 12px;
  cursor: pointer;
  letter-spacing: 0.05em;
}
.test-panel button:hover { background: var(--fg); color: var(--bg); }
.test-hide { border: none !important; color: var(--fg-dim) !important; }
.test-hide:hover { background: none !important; color: var(--fg) !important; }

/* ===== status (tiny, bottom-right) ===== */
.status {
  position: fixed;
  bottom: 8px;
  right: 12px;
  font-size: 10px;
  color: var(--fg-faint);
  letter-spacing: 0.08em;
  z-index: 30;
}