:root {
  --color_background: #f4f1ea;
  --color_surface: #ffffff;
  --color_surface_alt: #ece7dc;
  --color_text: #222018;
  --color_text_muted: #6a6558;
  --color_border: #d6cfbf;
  --color_accent: #3f8a2b;
  --color_accent_text: #ffffff;
  --color_link: #2a6f9e;
  --color_danger: #a8342a;
  --radius_default: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color_background: #1a1c18;
    --color_surface: #25281f;
    --color_surface_alt: #2f3327;
    --color_text: #ece9df;
    --color_text_muted: #a29d8c;
    --color_border: #42463a;
    --color_accent: #5fb347;
    --color_accent_text: #10140c;
    --color_link: #7cc0ea;
    --color_danger: #e07468;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--color_background);
  color: var(--color_text);
  line-height: 1.5;
}

a { color: var(--color_link); }

h1, h2, h3 { line-height: 1.25; }

/* ---------- header ---------- */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: 10px 20px;
  background: var(--color_surface);
  border-bottom: 3px solid var(--color_accent);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-brand {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color_text);
  text-decoration: none;
}

.site-navigation { display: flex; gap: 6px; }

.site-navigation a {
  padding: 6px 12px;
  border-radius: var(--radius_default);
  text-decoration: none;
  color: var(--color_text);
}

.site-navigation a:hover { background: var(--color_surface_alt); }

.site-navigation a.is-active {
  background: var(--color_accent);
  color: var(--color_accent_text);
}

.global-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 520px;
  margin-left: auto;
}

.global-search input { width: 100%; }

.global-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--color_surface);
  border: 1px solid var(--color_border);
  border-radius: var(--radius_default);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  max-height: 60vh;
  overflow: auto;
}

.global-search-results a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color_text);
}

.global-search-results a:hover,
.global-search-results a.is-highlighted { background: var(--color_surface_alt); }

.search-result-kind {
  display: inline-block;
  min-width: 78px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color_text_muted);
}

.search-result-subtitle { color: var(--color_text_muted); font-size: 0.85rem; }

/* ---------- layout ---------- */
.page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-title { margin: 0 0 4px; }
.page-subtitle { margin: 0 0 20px; color: var(--color_text_muted); }

.card {
  background: var(--color_surface);
  border: 1px solid var(--color_border);
  border-radius: var(--radius_default);
  padding: 16px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

a.card { display: block; text-decoration: none; color: var(--color_text); }
a.card:hover { border-color: var(--color_accent); }
.card h3 { margin: 0 0 6px; }

.muted { color: var(--color_text_muted); }
.empty-message { padding: 20px; text-align: center; color: var(--color_text_muted); }
.error-message { border-left: 4px solid var(--color_danger); padding: 12px 16px; background: var(--color_surface); }

/* ---------- inputs ---------- */
input[type="search"], input[type="number"], input[type="text"], select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--color_border);
  border-radius: var(--radius_default);
  background: var(--color_surface);
  color: var(--color_text);
}

.button, button {
  font: inherit;
  padding: 7px 14px;
  border: 1px solid var(--color_border);
  border-radius: var(--radius_default);
  background: var(--color_surface);
  color: var(--color_text);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.button:hover, button:hover { border-color: var(--color_accent); }

.button.is-primary {
  background: var(--color_accent);
  border-color: var(--color_accent);
  color: var(--color_accent_text);
}

.segmented-control { display: inline-flex; border: 1px solid var(--color_border); border-radius: var(--radius_default); overflow: hidden; }

.segmented-control a {
  padding: 7px 16px;
  text-decoration: none;
  color: var(--color_text);
  background: var(--color_surface);
}

.segmented-control a.is-active { background: var(--color_accent); color: var(--color_accent_text); }

.tab-row { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--color_border); }

.tab-row a {
  padding: 8px 16px;
  text-decoration: none;
  color: var(--color_text);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.tab-row a.is-active { border-bottom-color: var(--color_accent); font-weight: 600; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.filter-bar label { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--color_text_muted); gap: 2px; }
.filter-bar input[type="search"] { min-width: 240px; }
.filter-bar input[type="number"] { width: 110px; }

/* ---------- tables ---------- */
.data-table { width: 100%; border-collapse: collapse; background: var(--color_surface); border: 1px solid var(--color_border); }
.data-table th, .data-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--color_border); }
.data-table th { background: var(--color_surface_alt); font-size: 0.85rem; }
.data-table tbody tr[data-href] { cursor: pointer; }
.data-table tbody tr[data-href]:hover { background: var(--color_surface_alt); }
.table-wrapper { overflow-x: auto; }

.status-badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.8rem; }
.status-badge.is-alive { background: #d6efcd; color: #1f5a10; }
.status-badge.is-dead { background: #f1d4d0; color: #7c241b; }
.status-badge.is-away { background: #e3dcc3; color: #5b4d17; }

@media (prefers-color-scheme: dark) {
  .status-badge.is-alive { background: #2a4a20; color: #bfe8b0; }
  .status-badge.is-dead { background: #54261f; color: #f2c0b9; }
  .status-badge.is-away { background: #4a4224; color: #e9dba0; }
}

/* ---------- map ---------- */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }

.map-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.map-cursor-coordinates { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--color_text_muted); }

.map-viewport {
  overflow: auto;
  max-height: 72vh;
  border: 2px solid var(--color_border);
  border-radius: var(--radius_default);
  background: var(--color_surface_alt);
}

.map-canvas { position: relative; width: 100%; }
.map-canvas img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

.map-pin {
  position: absolute;
  /* The sharp corner ends up 13 * sqrt(2) = 18.4px below the pin centre once rotated; that tip sits on the coordinate. */
  transform: translate(-50%, -50%) translateY(-18.4px) rotate(-45deg);
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50% 50% 50% 0;
  border: 2px solid #fff;
  background: #7d7d7d;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.map-pin:hover, .map-pin.is-selected { z-index: 10; outline: 3px solid #ffd84a; }
.map-pin.pin-type-farm { background: #3f8a2b; }
.map-pin.pin-type-build { background: #2a78c0; }
.map-pin.pin-type-base { background: #d9822b; }
.map-pin.pin-type-nether { background: #b3281f; }
.map-pin.pin-type-nature { background: #1f8c7a; }
.map-pin.pin-type-island { background: #8a5fc0; }

.map-pin-label {
  position: absolute;
  transform: translate(-50%, 4px);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 11;
}

.location-panel h2 { margin-top: 0; }
.coordinate-tag { font-family: ui-monospace, Consolas, monospace; background: var(--color_surface_alt); padding: 1px 8px; border-radius: 4px; }
.type-tag { text-transform: capitalize; }

.location-image { max-width: 100%; border-radius: var(--radius_default); margin: 8px 0; }
.highlight-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.highlight-gallery img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius_default); display: block; }

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

/* ---------- documents ---------- */
.document-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.document-sidebar h3 { margin: 16px 0 6px; font-size: 0.85rem; text-transform: uppercase; color: var(--color_text_muted); }
.document-sidebar h3:first-child { margin-top: 0; }
.document-sidebar ul { list-style: none; margin: 0; padding: 0; }
.document-sidebar a { display: block; padding: 5px 10px; border-radius: 6px; text-decoration: none; color: var(--color_text); }
.document-sidebar a:hover { background: var(--color_surface_alt); }
.document-sidebar a.is-active { background: var(--color_accent); color: var(--color_accent_text); }

.document-body { background: var(--color_surface); border: 1px solid var(--color_border); border-radius: var(--radius_default); padding: 24px 32px; }
.document-body h1 { margin-top: 0; }
.document-body blockquote { margin: 12px 0; padding: 4px 16px; border-left: 4px solid var(--color_accent); color: var(--color_text_muted); }
.document-notice { padding: 8px 12px; margin-bottom: 14px; border-left: 4px solid var(--color_accent); background: var(--color_surface_alt); }

@media (max-width: 800px) {
  .document-layout { grid-template-columns: 1fr; }
  .document-body { padding: 16px; }
}

/* ---------- animal page ---------- */
.animal-header { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
.animal-picture {
  width: 100%; aspect-ratio: 1; object-fit: contain; padding: 16px; box-sizing: border-box;
  border-radius: var(--radius_default); border: 1px solid var(--color_border);
  background: radial-gradient(circle at 50% 40%, var(--color_surface), var(--color_surface_alt));
}

.details-list { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.details-list dt { color: var(--color_text_muted); }
.details-list dd { margin: 0; }

.history-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--color_border); }
.history-timeline li { position: relative; padding: 0 0 14px 12px; }
.history-timeline li::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color_accent);
}

/* ---------- players ---------- */

.event-badge { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--color_surface_alt); color: var(--color_text); }
.event-badge.is-in { background: #d6efcd; color: #1f5a10; }
.event-badge.is-out { background: #d5e4f1; color: #1d4a6e; }
.event-badge.is-death { background: #f1d4d0; color: #7c241b; }
.event-badge.is-birth { background: #e3dcc3; color: #5b4d17; }

@media (prefers-color-scheme: dark) {
  .event-badge.is-in { background: #2a4a20; color: #bfe8b0; }
  .event-badge.is-out { background: #1f3a52; color: #b7d8f2; }
  .event-badge.is-death { background: #54261f; color: #f2c0b9; }
  .event-badge.is-birth { background: #4a4224; color: #e9dba0; }
}

.history-timeline li.is-out::before { background: var(--color_link); }
.history-timeline li.is-death::before { background: var(--color_danger); }
.history-timeline li.is-other::before { background: var(--color_text_muted); }

.movement-chart { background: var(--color_surface); border: 1px solid var(--color_border); border-radius: var(--radius_default); padding: 10px; overflow-x: auto; }
.movement-chart svg { display: block; width: 100%; min-width: 560px; height: auto; }
.chart-lane { stroke: var(--color_border); stroke-dasharray: 3 4; }
.chart-lane-label, .chart-axis-label { fill: var(--color_text_muted); font-size: 12px; }
.chart-path { fill: none; stroke: var(--color_text_muted); stroke-width: 1.5; opacity: 0.6; }
.chart-dot { fill: var(--color_text_muted); stroke: var(--color_surface); stroke-width: 2; }
.chart-dot.is-in { fill: var(--color_accent); }
.chart-dot.is-out { fill: var(--color_link); }
.chart-dot.is-death { fill: var(--color_danger); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.8rem; margin-top: 6px; }

.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0 20px; }
.stat-box { background: var(--color_surface); border: 1px solid var(--color_border); border-radius: var(--radius_default); padding: 10px 18px; }
.stat-box .stat-value { font-size: 1.5rem; font-weight: 700; display: block; }
.stat-box .stat-label { color: var(--color_text_muted); font-size: 0.85rem; }

@media (max-width: 700px) {
  .animal-header { grid-template-columns: 1fr; }
  .animal-picture { max-width: 280px; }
  .details-list { grid-template-columns: 1fr; }
  .details-list dt { margin-top: 8px; }
}

/* ---------- scans ---------- */
.scan-carousel-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.scan-carousel-controls button { cursor: pointer; font-size: 1.1rem; min-width: 44px; }
.scan-carousel-back { margin-left: auto; }
.scan-full-image { display: block; max-width: 100%; margin: 0 auto 8px; border: 1px solid var(--color_border); border-radius: 6px; }
.button-link {
  padding: 6px 12px; border: 1px solid var(--color_border); border-radius: var(--radius_default);
  background: var(--color_surface); color: var(--color_text); text-decoration: none;
}
.button-link:hover { border-color: var(--color_accent); }

/* passport scans on a person's page */
.passport-scan { margin: 0 0 12px; }
.passport-scan img { display: block; max-width: min(100%, 520px); border: 1px solid var(--color_border); border-radius: 6px; }
.passport-older summary { cursor: pointer; color: var(--color_accent); margin-bottom: 12px; }