@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Source+Sans+3:wght@300;400;600&display=swap');

:root {
  --bg-dark: #0d0f13;
  --bg-panel: #161920;
  --bg-card: #1c2029;
  --bg-card-hover: #242832;
  --bg-kill: #131518;
  --border: #2a2e38;
  --border-accent: #c9a84c;
  --gold: #c9a84c;
  --gold-light: #e8d08c;
  --gold-dim: #7a6530;
  --text-primary: #e8e6e0;
  --text-secondary: #9a9890;
  --text-muted: #5c5a55;
  /* Semantic “go / positive” vs “stop / negative”; swapped in html.colorblind-mode for red–green CVD */
  --green-rgb: 76, 175, 106;
  --red-rgb: 212, 64, 64;
  --green: rgb(var(--green-rgb));
  --red: rgb(var(--red-rgb));
  --green-bg: rgba(var(--green-rgb), 0.12);
  --red-bg: rgba(var(--red-rgb), 0.10);
  --blue: #5c9fd4;
  --blue-bg: rgba(92, 159, 212, 0.10);
  --orange: #d47820;
  --yellow: #c8b840;
  /* Content column cap; keep in sync with weather strip compact breakpoint below. */
  --app-content-max-width: 1200px;
  /* Money-NM gating weathers: subtle warm frame (no text recolor). */
  --relevant-weather-surface: rgba(201, 168, 76, 0.08);
  --relevant-weather-border: #3a3834;
  --relevant-weather-ring: 0 0 0 1px rgba(201, 168, 76, 0.22);
  /* Active forecast period (“now”) — green, distinct from gold chrome and amber gating. */
  --weather-current-border: #3d8b52;
  --weather-current-surface: rgba(var(--green-rgb), 0.12);
  --weather-current-dot: rgba(var(--green-rgb), 0.3);
  --weather-current-rel: #8ecfa2;
}

/* Blue vs orange: distinguishable for most protanopia / deuteranopia (not sole cue — copy still says OPEN / Cooldown, etc.) */
html.colorblind-mode {
  --green-rgb: 55, 162, 235;
  --red-rgb: 232, 122, 42;
}

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

body {
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
}

header {
  background: linear-gradient(180deg, #14171e 0%, var(--bg-dark) 100%);
  border-bottom: 1px solid var(--border);
  /* Horizontal padding lives on .header-content so it aligns with main’s inner column (main is max-width + padding). */
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: var(--app-content-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.header-universalis {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.universalis-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
}

.universalis-server-select {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.75rem;
  padding: 0.28rem 0.5rem;
  min-width: 160px;
  max-width: min(240px, 42vw);
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
}

.universalis-server-select optgroup {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--gold-dim);
  background: var(--bg-panel);
}

.universalis-server-select option {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-primary);
  background: var(--bg-dark);
  padding: 0.2rem 0;
}

.universalis-server-select:focus {
  border-color: var(--gold-dim);
}

.universalis-server-select:disabled {
  opacity: 0.6;
  cursor: wait;
}

header h1 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--gold);
  letter-spacing: 0.08em;
}

.eorzea-time-display {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.1rem;
}

.et-label {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.clock {
  font-family: 'Source Sans 3', monospace;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}

.clock.day { color: var(--gold-light); }
.clock.night { color: var(--blue); }

.day-night {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
}

.day-night .day-night-icon {
  display: block;
  flex-shrink: 0;
}

.day-night.day {
  background: rgba(201, 168, 76, 0.15);
  color: var(--gold);
}

.day-night.night {
  background: var(--blue-bg);
  color: var(--blue);
}

main {
  max-width: var(--app-content-max-width);
  margin: 0 auto;
  padding: 0 1.5rem 1.5rem;
}

/* --- Tab Bar --- */

/* No negative horizontal margin — line up with `main`’s padded column (see header alignment fix). */
.tab-bar {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-dark);
  position: sticky;
  top: var(--header-height, 64px);
  z-index: 90;
}

.tab-btn {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  padding: 0.85rem 1.25rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tab-btn:hover {
  color: var(--gold-light);
  border-bottom-color: var(--gold-dim);
}

.tab-btn.is-active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  text-shadow: 0 0 6px rgba(201, 168, 76, 0.25);
}

.tab-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.tab-panels {
  padding-top: 1.5rem;
}

.tab-panel[hidden] {
  display: none;
}

.tab-empty-state {
  padding: 4rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}

@media (max-width: 600px) {
  .tab-bar {
    overflow-x: auto;
  }
  .tab-btn {
    padding: 0.7rem 0.75rem;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}

.section { margin-bottom: 2rem; }

/* --- Zone Groups --- */

.zone-group {
  margin-bottom: 1.5rem;
}

.zone-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.zone-header-bottom {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.weather-strip-container {
  flex: 1;
  min-width: 0;
}

.weather-history-btn {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.weather-history-btn-icon {
  display: block;
  flex-shrink: 0;
}

.weather-history-btn-label {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  line-height: 1;
}

.weather-history-btn:hover {
  color: var(--gold-light);
  border-color: var(--border);
  background: var(--bg-card);
}

.weather-history-module-error {
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 0.5rem 0;
  line-height: 1.45;
}

.weather-history-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.zone-header h2 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--gold);
  letter-spacing: 0.06em;
  white-space: nowrap;
  min-width: 80px;
}

.weather-strip {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Stack name + timer and keep one row of six (scroll) when the viewport is *narrower* than the
   main content max (see :root --app-content-max-width; match max-width in media to value − 1px). */
@media (max-width: 1199px) {
  .weather-strip-container .weather-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    padding-bottom: 0.15rem;
    scrollbar-gutter: stable;
  }

  .weather-strip-container .weather-strip::-webkit-scrollbar {
    height: 5px;
  }

  .weather-strip-container .weather-strip::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }

  .weather-strip-container .weather-slot {
    flex: 0 0 auto;
  }

  .weather-strip-container .weather-slot-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
  }

  .weather-strip-container .weather-name {
    line-height: 1.2;
    word-break: break-word;
    max-width: 9.5rem;
  }

  .weather-strip-container .weather-time {
    line-height: 1.1;
  }
}

.weather-slot {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.weather-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  image-rendering: auto;
}

.weather-slot-text {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.weather-slot.current {
  border-color: var(--weather-current-border);
  background: var(--weather-current-surface);
}

.weather-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.weather-time {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* Gating-weather (money NMs) — see data.js ZONE_RELEVANT_WEATHERS: card tint + border, text unchanged. */
.weather-slot.weather-slot--relevant {
  background: var(--relevant-weather-surface);
  border: 1px solid var(--relevant-weather-border);
  box-shadow: var(--relevant-weather-ring);
}

.weather-slot.current.weather-slot--relevant {
  border-color: var(--weather-current-border);
  background: rgba(var(--green-rgb), 0.14);
  box-shadow: var(--relevant-weather-ring);
}

/* --- Zone timeline modal (label: “Timeline”) --- */

.weather-history-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.62);
  box-sizing: border-box;
}

.weather-history-modal {
  /* Timeline copy: lighter than --text-secondary/--text-muted for contrast on panel/card. */
  --wt-name: var(--text-primary);
  --wt-when: #bdbaaf;
  --wt-rel: #d4d0c5;
  --wt-past-when: #9f9b90;
  --wt-past-rel: #a8a39a;

  width: 100%;
  max-width: 480px;
  /* Tall enough for 10 past + current + 10 future + load-more buttons on typical viewports; scrollbar appears after “load more”. */
  max-height: min(94vh, 62rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.weather-history-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.weather-history-modal-head h3 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.35;
}

.weather-history-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weather-history-close:hover {
  color: var(--text-primary);
  background: var(--bg-card-hover);
}

.weather-history-close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.weather-history-modal-scroll {
  overflow-y: auto;
  padding: 0.5rem 0.75rem 0.75rem;
  flex: 1;
  min-height: 0;
}

.weather-history-load-more {
  display: block;
  width: 100%;
  margin: 0.2rem 0;
  padding: 0.35rem 0.5rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-light);
  background: var(--bg-card);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.weather-history-load-more:hover {
  background: var(--bg-card-hover);
  border-color: var(--gold);
}

.weather-history-load-more:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Gutter width must match ::before `left` + 1px (line center = gutter center at 10px). */
.weather-timeline {
  --weather-timeline-gutter: 20px;
  position: relative;
  margin: 0.35rem 0;
}

.weather-timeline::before {
  content: '';
  position: absolute;
  left: calc(var(--weather-timeline-gutter) / 2 - 1px);
  top: 0.45rem;
  bottom: 0.45rem;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
}

.weather-timeline-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  padding: 0.12rem 0;
}

.weather-timeline-item:last-child {
  padding-bottom: 0.05rem;
}

.weather-timeline-gutter {
  width: var(--weather-timeline-gutter);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.weather-timeline-dot {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 2px solid var(--border);
  box-sizing: border-box;
}

.weather-timeline-item.current .weather-timeline-dot {
  border-color: var(--green);
  background: var(--weather-current-dot);
  box-shadow: 0 0 0 1px rgba(var(--green-rgb), 0.45);
}

.weather-timeline-main {
  flex: 1;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.32rem 0.5rem;
}

.weather-timeline-item.current .weather-timeline-main {
  border-color: var(--weather-current-border);
  background: var(--weather-current-surface);
}

/* Do not use opacity on the whole row — it dulls time/relative text. Past rows look “older” via color only. */

/* Three fixed columns: weather+icon | time range | relative — same track widths for every row. */
.weather-timeline-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.15fr);
  column-gap: 0.65rem;
  align-items: center;
}

.weather-timeline-weather-inner {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.weather-timeline-weather .weather-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.weather-timeline-weather .weather-name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  word-break: break-word;
  min-width: 0;
  color: var(--wt-name);
}

.weather-timeline-item.past .weather-timeline-weather .weather-name {
  color: #b0aca3;
}

.weather-timeline-item--relevant .weather-timeline-main {
  background: var(--relevant-weather-surface);
  border: 1px solid var(--relevant-weather-border);
  box-shadow: var(--relevant-weather-ring);
}

.weather-timeline-col.weather-timeline-when {
  font-size: 0.72rem;
  color: var(--wt-when);
  line-height: 1.3;
  min-width: 0;
}

.weather-timeline-col.weather-timeline-rel {
  font-size: 0.72rem;
  color: var(--wt-rel);
  font-weight: 600;
  line-height: 1.35;
  min-width: 0;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.weather-timeline-item.current .weather-timeline-col.weather-timeline-rel {
  color: var(--weather-current-rel);
}

.weather-timeline-item.past .weather-timeline-col.weather-timeline-when,
.weather-timeline-item.past .weather-timeline-col.weather-timeline-rel {
  color: var(--wt-past-when);
  font-weight: 400;
}

.weather-timeline-item.past .weather-timeline-col.weather-timeline-rel {
  color: var(--wt-past-rel);
  font-weight: 600;
}

.weather-timeline-item.current.weather-timeline-item--relevant .weather-timeline-main {
  border-color: var(--weather-current-border);
  background: rgba(var(--green-rgb), 0.13);
  box-shadow: var(--relevant-weather-ring);
}

@media (max-width: 420px) {
  .weather-timeline-cols {
    grid-template-columns: 1fr;
    row-gap: 0.2rem;
  }

  .weather-timeline-weather-inner {
    padding-bottom: 0.1rem;
  }
}

@media (max-width: 480px) {
  .weather-history-modal {
    max-width: none;
    max-height: min(94vh, 62rem);
  }
}

/* --- Tracker Controls --- */

.tracker-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  flex-shrink: 0;
}

.tracker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tracker-dot.active {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

.tracker-dot.inactive {
  background: var(--orange);
  box-shadow: 0 0 6px var(--orange);
}

.tracker-dot.dead {
  background: var(--red);
  box-shadow: 0 0 6px var(--red);
}

.tracker-dot.disconnected {
  background: var(--text-muted);
}

.tracker-input {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  width: 130px;
  outline: none;
  transition: border-color 0.2s;
}

.tracker-input:focus {
  border-color: var(--gold-dim);
}

.tracker-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tracker-input.input-error {
  border-color: var(--red);
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.btn-tracker {
  font-size: 0.7rem;
  padding: 0.22rem 0.5rem;
  white-space: nowrap;
}

.btn-connect {
  background: rgba(92, 159, 212, 0.12);
  color: var(--blue);
  border-color: rgba(92, 159, 212, 0.3);
}

.btn-connect:hover {
  background: rgba(92, 159, 212, 0.25);
}

.btn-disconnect {
  background: rgba(var(--red-rgb), 0.1);
  color: var(--red);
  border-color: rgba(var(--red-rgb), 0.3);
}

.btn-disconnect:hover {
  background: rgba(var(--red-rgb), 0.2);
}

.tracker-input-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.tracker-input-link {
  display: none;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.tracker-input-link:hover {
  border-color: var(--gold-dim);
}

.tracker-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.2rem;
  margin-left: 0.3rem;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
  line-height: 0;
  position: relative;
}

.tracker-copy-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.tracker-copy-btn.copied {
  color: var(--green);
}

.tracker-copy-btn.copied::after {
  content: 'Copied to clipboard';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.28rem 0.5rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 200;
}

.tracker-status-label {
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.tracker-status-label.active {
  color: var(--green);
}

.tracker-status-label.inactive {
  color: var(--orange);
}

.tracker-status-label.dead {
  color: var(--red);
}

.tracker-status-label.error {
  color: var(--red);
}

/* --- NM Cards (Spawn Conditions) --- */

/* 12-column track: map-pinned cards span 4 (1/3 row); others span 3 (1/4 row) */
.nm-cards {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.75rem;
}

.nm-card:not(.nm-card-pinned) {
  grid-column: span 3;
}

.nm-card.nm-card-pinned {
  grid-column: span 4;
}

.nm-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
  transition: border-color 0.3s, background 0.3s;
}

.nm-card.active {
  border-color: var(--green);
  background: var(--green-bg);
}

/* ≤20m to next window: yellow; ≤10m (also .upcoming): orange overrides border/tint */
.nm-card.upcoming-soon {
  border-color: var(--yellow);
  background: rgba(200, 184, 64, 0.07);
}

.nm-card.upcoming {
  border-color: var(--orange);
  background: rgba(212, 120, 32, 0.10);
}

/* No weather/night gate — same base as .nm-card until .active (green when kill window allows) */
.nm-card.always.active {
  border-color: var(--green);
  background: var(--green-bg);
}

/* Green “open” spawn card with no tracker linked for this zone — same hue, lower emphasis */
.nm-card.active.active-no-tracker {
  border-color: rgba(var(--green-rgb), 0.42);
  background: rgba(var(--green-rgb), 0.07);
}

.nm-card.active.active-no-tracker .nm-status,
.nm-card.active.active-no-tracker .nm-countdown {
  color: rgba(var(--green-rgb), 0.7);
}

/* Tracked kill on cooldown: grey diagonal stripes (no gate: default border; gated + .nm-instance-cooldown: soft green border) */
.nm-card.nm-kill-cooldown-stripes {
  background-image: repeating-linear-gradient(
    -42deg,
    rgba(42, 46, 56, 0.55) 0 6px,
    rgba(92, 90, 85, 0.22) 6px 12px
  );
  background-color: var(--bg-card);
}

/* Keep yellow/orange tint under stripes when gated upcoming (≤20m) + kill CD outlasts condition countdown */
.nm-card.nm-kill-cooldown-stripes.upcoming-soon {
  background-color: rgba(200, 184, 64, 0.07);
}

.nm-card.nm-kill-cooldown-stripes.upcoming {
  background-color: rgba(212, 120, 32, 0.10);
}

.nm-card.nm-instance-cooldown {
  border-color: rgba(var(--green-rgb), 0.42);
}

.nm-card-header {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.4rem;
  gap: 0.4rem;
}

.nm-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.nm-level {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: auto;
}

.nm-map-trigger {
  position: relative;
  cursor: pointer;
  line-height: 1;
}

.map-icon {
  display: inline-flex;
  align-items: center;
  color: var(--gold-dim);
  opacity: 0.6;
  transition: opacity 0.2s, color 0.2s;
}

.nm-map-trigger:hover .map-icon {
  opacity: 1;
  color: var(--gold);
}

.nm-map-popup {
  display: none;
  position: absolute;
  z-index: 200;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.4rem;
  border: 2px solid var(--border-accent);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  background: var(--bg-dark);
}

.nm-map-trigger:hover .nm-map-popup {
  display: block;
}

.nm-map-popup img {
  display: block;
  width: 320px;
  height: auto;
}

.nm-map-caption {
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold-light);
  background: var(--bg-dark);
  text-align: center;
  letter-spacing: 0.04em;
}

.nm-card-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.5rem;
  font-size: 0.78rem;
  line-height: 1.5;
}

.nm-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.nm-value {
  color: var(--text-primary);
}

.nm-drop { color: var(--gold-light); }

/* In .nm-card-body the value column is 1fr; without this the trigger stretches to the full cell. */
.nm-drop-trigger {
  position: relative;
  display: inline-block;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  cursor: help;
  /* Lift above grid neighbors on hover so the path to the popup is not over the next card. */
  z-index: 1;
}

.nm-drop-trigger:hover,
.nm-drop-trigger:focus-within {
  z-index: 100;
}

.nm-drop-trigger:hover .nm-drop {
  color: var(--gold);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.nm-drop-popup {
  display: none;
  position: absolute;
  z-index: 200;
  top: 100%;
  left: 0;
  /* No margin: margin sat outside the hit box, so the pointer "bridge" to the panel closed the
     tooltip. Extra top padding replaces the old visual gap. */
  margin-top: 0;
  min-width: 280px;
  max-width: min(360px, 94vw);
  padding: 0.85rem 0.65rem 0.5rem;
  border: 2px solid var(--border-accent);
  border-radius: 6px;
  background: var(--bg-dark);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

.nm-drop-trigger:hover .nm-drop-popup,
.nm-drop-trigger:focus-within .nm-drop-popup {
  display: block;
}

.nm-drop-popup-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.5rem;
  font-size: 0.78rem;
  line-height: 1.5;
  align-items: baseline;
}

.nm-drop-popup-body .nm-label {
  align-self: start;
  white-space: normal;
  word-break: break-word;
  max-width: 9rem;
  hyphens: auto;
}

.nm-drop-popup-body .nm-value {
  color: var(--gold-light);
  word-break: break-word;
}

.nm-drop-popup-dc.nm-value,
.nm-drop-popup-region.nm-value {
  color: unset;
}

.nm-drop-popup-dc-price {
  color: var(--gold-light);
}

.nm-drop-popup-dc-bracket {
  color: var(--text-secondary);
  font-size: 0.9em;
  font-weight: 400;
}

.nm-drop-popup-link {
  display: inline-block;
  margin-top: 0.45rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
  width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}

.nm-drop-popup-link:hover {
  text-decoration: underline;
}

.nm-card-footer {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nm-footer-condition {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nm-kill-cooldown:not(:empty) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nm-kill-cd-status {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.nm-kill-cd-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nm-kill-cd-time {
  font-family: 'Source Sans 3', monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--orange);
}

.nm-status {
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.nm-status .weather-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nm-status svg.weather-icon {
  display: block;
}

.nm-card.active .nm-status { color: var(--green); }
.nm-card:not(.active) .nm-status { color: var(--text-muted); }
.nm-card.upcoming-soon .nm-status { color: var(--yellow); }
.nm-card.upcoming .nm-status { color: var(--orange); }
.nm-card.always:not(.active) .nm-status { color: var(--text-muted); }

/* Ungated NM (always): kill OPEN/Cooldown in footer mirrors Spawn Window when tracker or manual data exists */
.nm-card.nm-none-kill-cooldown .nm-status {
  color: var(--red);
}
.nm-card.nm-none-kill-cooldown .nm-countdown {
  color: var(--orange);
}

.nm-card.nm-instance-cooldown .nm-status { color: var(--green); }
.nm-card.nm-instance-cooldown .nm-countdown { color: var(--green); }

.nm-countdown {
  font-family: 'Source Sans 3', monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* "in" / "for" before relative times — not bold, slightly muted vs the clock digits. */
.countdown-qualifier {
  font-size: 0.86em;
  font-weight: 400;
  opacity: 0.68;
  margin-right: 0.28em;
}

.nm-countdown .countdown-time,
.nm-kill-cd-time .countdown-time,
.kill-time .countdown-time {
  font-weight: 600;
}

.nm-card.active .nm-countdown { color: var(--green); }
.nm-card.upcoming-soon .nm-countdown { color: var(--yellow); }
.nm-card.upcoming .nm-countdown { color: var(--orange); }

/* Map-pin NMs: footer weather + kill cooldown text matches Spawn Window tracker rows */
.nm-card.nm-card-pinned:not(.active):not(.upcoming-soon):not(.upcoming) .nm-status {
  color: var(--text-secondary);
}

.nm-card.nm-card-pinned .nm-gate-open {
  color: var(--green);
}

.nm-card.nm-card-pinned.nm-none-kill-cooldown .nm-status {
  color: var(--text-secondary);
}

.nm-card.nm-card-pinned .nm-kill-cd-status {
  color: var(--text-secondary);
}

.nm-card.nm-card-pinned .nm-kill-cd-time {
  color: var(--text-primary);
}

/* --- Spawn Windows Section ---
   No surrounding card/border — the tracker view sits directly on the page
   surface like the Money NMs and Chronological tabs so all three feel like
   variants of the same canvas rather than one tab being boxed in. */

.kill-section {
  /* Surface treatment intentionally omitted; child columns/cards carry their
     own borders and the page already provides comfortable horizontal padding. */
}

.kill-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.kill-header-bar h2 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--gold);
  letter-spacing: 0.06em;
}

/* Kill-section three-column grid: Pagos | Pyros | Hydatos */

.kill-tracker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  align-items: start;
}

@media (max-width: 900px) {
  .kill-tracker-grid {
    grid-template-columns: 1fr;
  }
}

.kill-tracker-col {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.35rem;
  margin: -0.35rem;
  transition: border-color 0.3s;
}

.kill-tracker-col.tracker-stale-warning {
  border-color: rgba(200, 184, 64, 0.45);
}

.kill-tracker-col.tracker-stale-critical {
  border-color: rgba(var(--red-rgb), 0.5);
}

.kill-tracker-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}

/* Tracker ID / Connect — under zone title, above NM list */
.kill-tracker-col-connect {
  margin-bottom: 0.5rem;
}

.kill-tracker-col-connect .kill-tracker-controls {
  margin-left: 0;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
}

.kill-tracker-col-connect .tracker-input-wrap {
  flex: 1;
  min-width: 0;
}

.kill-tracker-col-connect .tracker-input,
.kill-tracker-col-connect .tracker-input-link {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.kill-tracker-col-connect .tracker-status-label {
  flex-basis: 100%;
  margin-top: 0.15rem;
}

.kill-zone-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin: 0;
  white-space: nowrap;
}

.kill-zone-status {
  font-size: 0.75rem;
  text-align: right;
  line-height: 1.3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}

.tracker-stale-row {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  white-space: nowrap;
}

.tracker-stale-row-warning {
  color: var(--yellow);
}

.tracker-stale-row-critical {
  color: var(--red);
}

.tracker-stale-icon {
  flex-shrink: 0;
  vertical-align: middle;
}

.tracker-stale-msg {
  font-weight: 600;
}

.kill-zone-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.kill-zone-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
  padding: 0.4rem 0;
}

/* Condensed row inside each zone column */

.kill-row {
  background: var(--bg-dark);
  border: 1px solid rgba(13, 15, 19, 0.3);
  border-radius: 5px;
  display: flex;
  align-items: stretch;
  transition: background 0.3s, border-color 0.3s;
}

.kill-row.window-open {
  background: rgba(var(--green-rgb), 0.08);
  border-color: rgba(var(--green-rgb), 0.2);
}

/* Kill window open but spawn weather/night not active — very subtle green */
.kill-row.window-open.kill-row-spawn-gate-unmet {
  background: rgba(var(--green-rgb), 0.02);
  border-color: rgba(var(--green-rgb), 0.07);
}

.kill-row-spawn-hint {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--text-secondary);
  margin-left: auto;
  flex-shrink: 0;
}

.kill-row-spawn-hint .weather-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
}

.kill-row-spawn-hint .night-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
  color: var(--text-secondary);
}

.kill-row-condition-label {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.kill-row.window-open.kill-row-spawn-gate-unmet .kill-row-spawn-hint {
  color: var(--text-secondary);
}

.kill-row.window-closed {
  background: rgba(var(--red-rgb), 0.08);
  border-color: rgba(var(--red-rgb), 0.2);
}

/* Whole-row feedback while pop / reset / export / create interact is in flight:
   border/background stay as window-open / window-closed; only a neutral sweep overlay. */
.kill-row.kill-row-interact-pending {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.kill-row.kill-row-interact-pending::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 30%,
    rgba(var(--green-rgb), 0.04) 40%,
    rgba(255, 255, 255, 0.10) 48%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.10) 52%,
    rgba(var(--green-rgb), 0.04) 60%,
    transparent 70%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: kill-row-pending-shimmer 1.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.kill-row.kill-row-interact-pending::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 12px rgba(var(--green-rgb), 0.08);
  pointer-events: none;
  z-index: 0;
  animation: kill-row-pending-pulse 2s ease-in-out infinite;
}

.kill-row.kill-row-interact-pending .kill-row-content,
.kill-row.kill-row-interact-pending .kill-row-action {
  position: relative;
  z-index: 1;
}

@keyframes kill-row-pending-shimmer {
  0% {
    background-position: 130% 0;
  }
  100% {
    background-position: -130% 0;
  }
}

@keyframes kill-row-pending-pulse {
  0%, 100% { box-shadow: inset 0 0 8px rgba(var(--green-rgb), 0.05); }
  50% { box-shadow: inset 0 0 16px rgba(var(--green-rgb), 0.12); }
}

/* --- Mark Success Celebration --- */

.kill-row.kill-row-mark-success {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: kill-row-success-scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kill-row.kill-row-mark-success::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(var(--green-rgb), 0.35) 0%,
    rgba(var(--green-rgb), 0.15) 35%,
    rgba(var(--green-rgb), 0.05) 60%,
    transparent 80%
  );
  animation: kill-row-success-flash 0.8s ease-out forwards;
  pointer-events: none;
  z-index: 0;
}

.kill-row.kill-row-mark-success::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow:
    0 0 10px rgba(var(--green-rgb), 0.4),
    0 0 25px rgba(var(--green-rgb), 0.2),
    inset 0 0 10px rgba(var(--green-rgb), 0.15);
  animation: kill-row-success-glow 1.2s ease-out forwards;
  pointer-events: none;
  z-index: 0;
}

.kill-row.kill-row-mark-success .kill-row-content,
.kill-row.kill-row-mark-success .kill-row-action {
  position: relative;
  z-index: 1;
}

.kill-row.kill-row-mark-success .kill-row-name {
  animation: kill-row-success-text 0.6s ease-out;
}

@keyframes kill-row-success-scale {
  0% { transform: scale(1); }
  40% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes kill-row-success-flash {
  0% { opacity: 1; }
  30% { opacity: 0.9; }
  100% { opacity: 0; }
}

@keyframes kill-row-success-glow {
  0% {
    opacity: 1;
    box-shadow:
      0 0 12px rgba(var(--green-rgb), 0.5),
      0 0 30px rgba(var(--green-rgb), 0.25),
      inset 0 0 12px rgba(var(--green-rgb), 0.2);
  }
  50% {
    opacity: 0.6;
    box-shadow:
      0 0 6px rgba(var(--green-rgb), 0.3),
      0 0 15px rgba(var(--green-rgb), 0.12),
      inset 0 0 6px rgba(var(--green-rgb), 0.08);
  }
  100% {
    opacity: 0;
    box-shadow:
      0 0 0 rgba(var(--green-rgb), 0),
      0 0 0 rgba(var(--green-rgb), 0),
      inset 0 0 0 rgba(var(--green-rgb), 0);
  }
}

@keyframes kill-row-success-text {
  0% { color: var(--text-primary); }
  30% { color: var(--green); }
  100% { color: var(--text-primary); }
}

@media (prefers-reduced-motion: reduce) {
  .kill-row.kill-row-interact-pending::before {
    animation: none;
    background-position: 50% 0;
    opacity: 0.4;
  }
  .kill-row.kill-row-interact-pending::after {
    animation: none;
  }
  .kill-row.kill-row-mark-success {
    animation: none;
  }
  .kill-row.kill-row-mark-success::before {
    animation: none;
    opacity: 0.3;
  }
  .kill-row.kill-row-mark-success::after {
    animation: none;
    opacity: 0;
  }
  .kill-row.kill-row-mark-success .kill-row-name {
    animation: none;
  }
}

.kill-row-content {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kill-row-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
}

.kill-row-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kill-row-level {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.kill-row-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.55rem;
  border-left: 1px solid;
  border-left-color: inherit;
  background: transparent;
  border-top: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}

.kill-row-action svg {
  width: 18px;
  height: 18px;
  display: block;
}

.kill-row-action:hover {
  background: rgba(255, 255, 255, 0.06);
}

.kill-action-mark {
  color: var(--green);
  opacity: 0.7;
}

.kill-action-mark:hover {
  opacity: 1;
  background: rgba(var(--green-rgb), 0.1);
}

.kill-action-reset {
  color: var(--text-muted);
  opacity: 0.7;
}

.kill-action-reset:hover {
  color: var(--text-secondary);
  opacity: 1;
  background: rgba(255, 255, 255, 0.06);
}

.kill-action-export {
  position: relative;
}

.kill-action-spinner {
  cursor: default;
  pointer-events: none;
  color: var(--green);
  opacity: 0.8;
}

.kill-row-action:disabled,
.kill-row-action[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}

.kill-row-body {
  font-size: 0.78rem;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 0 0.45rem;
}

.kill-time { color: var(--text-primary); }

.kill-row-body .kill-elapsed { color: var(--text-secondary); }
.kill-row-body .kill-cooldown { color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; margin-left: auto; }

.kill-action-export .export-overlay-icon {
  position: absolute;
  bottom: -2px;
  right: -4px;
  width: 10px;
  height: 10px;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}

.kill-action-spinner .spinner-svg {
  animation: eureka-spin 0.8s linear infinite;
}

@keyframes eureka-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.tracker-interact-pending {
  font-size: 0.75rem;
  color: var(--accent);
  line-height: 1.4;
  display: block;
}

.tracker-interact-error {
  font-size: 0.75rem;
  color: var(--red, #e74c3c);
  line-height: 1.4;
  display: block;
}

.tracker-editable-badge {
  font-size: 0.65rem;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  display: block;
}

.tracker-recent-empty,
.tracker-recent-err {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.tracker-recent-err {
  color: var(--red);
}

.tracker-recent-err code {
  font-size: 0.68rem;
  background: var(--bg-dark);
  padding: 0.05rem 0.2rem;
  border-radius: 3px;
}

.tracker-recent-sync {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

.source-tracker { color: var(--blue); }
.source-manual { color: var(--text-muted); }

.kill-source {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* --- Buttons --- */

.btn {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-kill {
  background: rgba(var(--green-rgb), 0.15);
  color: var(--green);
  border-color: var(--green);
}

.btn-kill:hover {
  background: rgba(var(--green-rgb), 0.3);
}

.btn-reset {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}

.btn-reset:hover {
  color: var(--text-secondary);
  border-color: var(--text-muted);
}

/* --- Footer --- */

footer {
  max-width: var(--app-content-max-width);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

footer .footer-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-top: 0.5rem;
  text-align: left;
}

footer .footer-controls-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
}

footer .footer-accessible-palette {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  flex-wrap: wrap;
}

footer .footer-make-bigger,
footer .footer-time-12h {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-left: 0.35rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
}

@media (max-width: 640px) {
  footer .footer-make-bigger,
  footer .footer-time-12h {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
}

footer .footer-palette-label {
  color: var(--gold-dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

footer .footer-palette-switch {
  position: relative;
  box-sizing: border-box;
  width: 40px;
  height: 22px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
}

footer .footer-palette-switch:hover {
  border-color: var(--gold-dim);
}

footer .footer-palette-thumb {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.2s ease, background 0.2s;
}

footer .footer-palette-switch[aria-checked="true"] {
  border-color: rgba(var(--green-rgb), 0.45);
  background: rgba(var(--green-rgb), 0.18);
}

footer .footer-palette-switch[aria-checked="true"] .footer-palette-thumb {
  transform: translateX(18px);
  background: var(--green);
}

footer .footer-palette-state {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 1.5rem;
  text-align: left;
}

footer .footer-palette-switch:focus-visible {
  outline: 2px solid var(--gold-dim);
  outline-offset: 2px;
}

footer .footer-clear-saved-btn {
  flex-shrink: 0;
  margin-left: auto;
  font: inherit;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

footer .footer-clear-saved-btn:hover {
  color: var(--text-secondary);
  border-color: var(--gold-dim);
  background: rgba(0, 0, 0, 0.2);
}

footer .footer-clear-saved-btn:focus-visible {
  outline: 2px solid var(--gold-dim);
  outline-offset: 2px;
}

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

/* --- Responsive --- */

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .header-universalis {
    flex-direction: column;
    width: 100%;
  }

  .universalis-server-select {
    max-width: 100%;
    width: 100%;
  }

  .zone-header-bottom {
    flex-wrap: wrap;
  }

  .tracker-controls {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
  }

  .tracker-input {
    flex: 1;
    min-width: 100px;
  }

  .nm-cards {
    grid-template-columns: 1fr;
  }

  .nm-card:not(.nm-card-pinned),
  .nm-card.nm-card-pinned {
    grid-column: span 1;
  }

  .weather-strip {
    width: 100%;
  }

  .kill-header-bar {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
}

/* --- Chronological tab --- */

/* Vertical timeline rail along the *outside* (left) of the cards — same
   visual language as the per-zone weather-timeline modal so the
   chronological list reads as a single time-ordered thread of upcoming
   spawn windows. The rail and dots live in a separate gutter column to
   the left of each card; the card itself carries the background, border,
   and state chrome — the rail/dot decorate the row, they aren't inside
   it. */
.chrono-list {
  --chrono-when: 5rem;
  --chrono-gutter: 24px;
  --chrono-rail-gap: 0.7rem;
  --chrono-when-gap: 0.6rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Vertical rail sits in the middle of the gutter column, which is offset
   from the left edge of the list by the absolute time column + its gap. */
.chrono-list::before {
  content: '';
  position: absolute;
  left: calc(var(--chrono-when) + var(--chrono-when-gap) + var(--chrono-gutter) / 2 - 1px);
  top: 1.1rem;
  bottom: 1.1rem;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
  pointer-events: none;
}

/* Row is just a layout container — transparent. All visible chrome is on
   .chrono-row-card so the dot/rail can sit cleanly to the left without
   the card border intruding on them. The first column is the absolute
   wall-clock time, then the rail gutter dot, then the card itself. */
.chrono-row {
  display: grid;
  grid-template-columns: var(--chrono-when) var(--chrono-gutter) 1fr;
  column-gap: var(--chrono-when-gap);
  align-items: stretch;
}

/* The absolute-time cell sits to the left of the timeline rail.
   Right-aligned so each clock stamp's right edge sits flush against the
   column's right boundary — that keeps the gap between the time text and
   the dot symmetrical with the gap between the dot and the card, so the
   dot reads as centered in the gutter between time and card. All stamps
   share the same right edge so they still form a single tidy column down
   the rail. Tabular numerals keep widths stable while the clock ticks. */
.chrono-row-when {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.1rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.chrono-row-when-main {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.chrono-row-when-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* When this row is "NOW", the leading "now" reads as a status, so promote
   it slightly with the green family used elsewhere for active state. */
.chrono-row.chrono-row--active .chrono-row-when-main {
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}

/* Gutter cell — sits outside the card; dot is centered on the rail. */
.chrono-row-gutter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chrono-row-dot {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 2px solid var(--border);
  box-sizing: border-box;
}

/* The card carries everything that used to be on .chrono-row — background,
   border, padding, inner grid for zone | name | time. */
.chrono-row-card {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: background-color 120ms ease, border-color 120ms ease,
    box-shadow 120ms ease;
  min-width: 0;
}

/* Dot color tracks row state — eye can scan the rail and see at a glance
   where the active / soon / guaranteed clusters are. Order matters here:
   the persistent "guaranteed" tint comes first so the time-sensitive
   states (active / upcoming-soon / upcoming) override it on rows that
   carry both classes — same precedence the card itself uses. */
.chrono-row.chrono-row--guaranteed .chrono-row-dot {
  border-color: var(--gold-light);
  background: rgba(201, 168, 76, 0.6);
}
.chrono-row.chrono-row--upcoming .chrono-row-dot {
  border-color: var(--orange);
  background: rgba(212, 120, 32, 0.6);
  box-shadow: none;
}
.chrono-row.chrono-row--upcoming-soon .chrono-row-dot {
  border-color: var(--yellow);
  background: rgba(200, 184, 64, 0.6);
  box-shadow: none;
}
.chrono-row.chrono-row--active .chrono-row-dot {
  border-color: var(--green);
  background: rgba(var(--green-rgb), 0.6);
  box-shadow: 0 0 0 2px rgba(var(--green-rgb), 0.25);
}

/* Active-now rows get the same green family as .nm-card.active */
.chrono-row.chrono-row--active > .chrono-row-card {
  border-color: var(--weather-current-border);
  background: var(--weather-current-surface);
}

/* ≤20m to start: yellow; ≤10m (also .chrono-row--upcoming): orange overrides */
.chrono-row.chrono-row--upcoming-soon > .chrono-row-card {
  border-color: var(--yellow);
  background: rgba(200, 184, 64, 0.07);
}

.chrono-row.chrono-row--upcoming > .chrono-row-card {
  border-color: var(--orange);
  background: rgba(212, 120, 32, 0.10);
}

/* Zone pill — small uppercase badge so the eye can scan-by-zone instantly.
   Fills the fixed first column so every pill has the same visual width. */
.chrono-zone-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.18rem 0.5rem;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(201, 168, 76, 0.10);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
}

/* NM name leads the row — eye lands here first. Level sits inline as
   subordinate metadata (no second line, no drop noise). */
.chrono-row-main {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.chrono-row-name {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
}

.chrono-row-level {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Condition (weather/night icon + label) joins the countdown on a single
   line so the eye reads "Fog in 2h 57m" as one phrase. */
.chrono-row-condition {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.chrono-row-condition-label {
  color: var(--text-secondary);
}

/* Right-side time block — just the timing phrase now (the absolute clock
   moved to the left of the timeline rail, see .chrono-row-when). */
.chrono-row-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  min-width: 9rem;
}

.chrono-row-phrase {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Status badges (Guaranteed / CD) sit in the wide whitespace between the
   NM name and the time column — they qualify availability, not timing. */
.chrono-row-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.chrono-row-countdown {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.chrono-row-countdown .countdown-time {
  font-weight: 600;
}

.chrono-row.chrono-row--active .chrono-row-countdown { color: var(--green); }
.chrono-row.chrono-row--upcoming-soon .chrono-row-countdown { color: var(--yellow); }
.chrono-row.chrono-row--upcoming .chrono-row-countdown { color: var(--orange); }

/* Green "NOW" pill — same family as .nm-gate-open, smaller. */
.chrono-now-pill {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  margin-right: 0.35em;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid var(--green);
  border-radius: 4px;
}

/* Orange cooldown chip — matches .upcoming-soon family but always shown when CD overlaps. */
.chrono-cd-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.45rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--orange);
  background: rgba(212, 120, 32, 0.12);
  border: 1px solid rgba(212, 120, 32, 0.45);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.chrono-cd-icon {
  flex-shrink: 0;
}

/* "Guaranteed" rows — a quiet gold wash over the row. Intentionally subtle:
   the inline "guaranteed" label is doing most of the talking; the row tint
   is just there so the eye picks up the cluster while scanning the list.
   Timing states (active / upcoming-soon / upcoming) win over guaranteed —
   when both apply, the timing state's stronger color is the primary signal
   (it's *time-sensitive*; guaranteed is *persistent*) and the gold tint
   steps aside, leaving only the small inline text + a faint gold accent
   strip down the left edge to keep the cross-state link visible. */
.chrono-row.chrono-row--guaranteed > .chrono-row-card {
  background:
    linear-gradient(rgba(201, 168, 76, 0.06), rgba(201, 168, 76, 0.06)),
    var(--bg-card);
  border-color: rgba(201, 168, 76, 0.28);
  box-shadow: inset 2px 0 0 rgba(201, 168, 76, 0.45);
}

/* When a row is also Active / Upcoming-soon / Upcoming, the timing state
   takes over — keep its colored border + surface, and drop the gold wash
   so the time-sensitive signal reads cleanly. The faint gold accent strip
   on the left stays so the eye still spots the guaranteed cluster. */
.chrono-row.chrono-row--guaranteed.chrono-row--active > .chrono-row-card,
.chrono-row.chrono-row--guaranteed.chrono-row--upcoming-soon > .chrono-row-card,
.chrono-row.chrono-row--guaranteed.chrono-row--upcoming > .chrono-row-card {
  background: none;
  box-shadow: inset 2px 0 0 rgba(201, 168, 76, 0.4);
}
.chrono-row.chrono-row--guaranteed.chrono-row--active > .chrono-row-card {
  background: var(--weather-current-surface);
  border-color: var(--weather-current-border);
}
.chrono-row.chrono-row--guaranteed.chrono-row--upcoming-soon > .chrono-row-card {
  background: rgba(200, 184, 64, 0.07);
  border-color: var(--yellow);
}
.chrono-row.chrono-row--guaranteed.chrono-row--upcoming > .chrono-row-card {
  background: rgba(212, 120, 32, 0.10);
  border-color: var(--orange);
}

/* Small italic muted "guaranteed" word inline beside the level — the colored
   row is the primary signal, this word just labels what the color means. */
.chrono-row-guaranteed-tag {
  font-size: 0.72rem;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--gold-dim);
  text-transform: lowercase;
  cursor: help;
}

/* On timing-state rows, the surface shifts to green / yellow / orange and
   the dim-gold "guaranteed" text gets lost against the colored wash. Bump
   it to gold-light on active/upcoming-soon (high luminance against the
   green/yellow surfaces) and keep gold-light on upcoming so it stays
   readable against the orange tint. */
.chrono-row.chrono-row--active .chrono-row-guaranteed-tag,
.chrono-row.chrono-row--upcoming-soon .chrono-row-guaranteed-tag,
.chrono-row.chrono-row--upcoming .chrono-row-guaranteed-tag {
  color: var(--gold-light);
}

/* Zone badge re-skins on timing-state rows — the gold-on-dark pill clashes
   against the green/yellow/orange surface; recolor it into the same family
   as the row state so the badge reads as part of the card, not a foreign
   element pinned onto it. The Cinzel uppercase typography stays so the
   badge still scans as the "zone" pill. */
.chrono-row.chrono-row--active .chrono-zone-badge {
  color: var(--weather-current-rel);
  background: rgba(var(--green-rgb), 0.16);
  border-color: rgba(var(--green-rgb), 0.55);
}
.chrono-row.chrono-row--upcoming-soon .chrono-zone-badge {
  color: var(--yellow);
  background: rgba(200, 184, 64, 0.14);
  border-color: rgba(200, 184, 64, 0.55);
}
.chrono-row.chrono-row--upcoming .chrono-zone-badge {
  color: var(--orange);
  background: rgba(212, 120, 32, 0.14);
  border-color: rgba(212, 120, 32, 0.55);
}

@media (max-width: 600px) {
  .chrono-list {
    --chrono-when: 3.5rem;
    --chrono-when-gap: 0.45rem;
  }
  .chrono-row-when-main { font-size: 0.85rem; }
  .chrono-row-when-sub { display: none; }
  .chrono-row.chrono-row--active .chrono-row-when-main { font-size: 0.7rem; }
  .chrono-row-card {
    grid-template-columns: 5rem 1fr;
    grid-template-areas:
      "zone main"
      "time time";
    row-gap: 0.5rem;
  }
  .chrono-zone-badge { grid-area: zone; }
  .chrono-row-main { grid-area: main; }
  .chrono-row-time {
    grid-area: time;
    align-items: flex-start;
    min-width: 0;
  }
  .chrono-row-phrase {
    flex-wrap: wrap;
  }
}