/* CR0173 Option A: Harbour Atlas visual system for the live map. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap");

:root {
  --ha-navy: #002b5c;
  --ha-ink: #0f172a;
  --ha-blue: #1a6fd1;
  --ha-blue-soft: #eff6ff;
  --ha-gold: #ffd700;
  --ha-shell: #f8fafc;
  --ha-white: #ffffff;
  --ha-line: #dbeafe;
  --ha-muted: #475569;
  --ha-green: #16a34a;
  --ha-red: #dc2626;
  --ha-shadow: 0 16px 38px rgba(15, 23, 42, 0.12);
  --ha-soft-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  --je-night: #050d1a;
  --je-deep: #0a1628;
  --je-navy: #002b5c;
  --je-blue: #1f7ae0;
  --je-gold: #ffd700;
  --je-line-dark: rgba(255, 255, 255, 0.14);
  --je-muted-light: rgba(255, 255, 255, 0.68);
  --je-green: #16a34a;
  --je-red: #dc2626;
  --je-cyan: #06b6d4;
  --je-radius: 14px;
  --je-radius-lg: 22px;
  --je-shadow-pop: 0 26px 70px rgba(0, 0, 0, 0.34);
}

* {
  letter-spacing: 0 !important;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: var(--ha-shell) !important;
  color: var(--ha-ink) !important;
}

#map {
  background: #dbeafe !important;
}

.leaflet-control-container .leaflet-control,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  border-radius: 8px !important;
  border: 1px solid var(--ha-line) !important;
  box-shadow: var(--ha-soft-shadow) !important;
}

.sidebar,
.leaderboard-panel,
.rank-toggle,
.tx-card,
.tx,
.feed-item,
.header-stats > div,
.tide-card {
  background: rgba(255, 255, 255, 0.97) !important;
  color: var(--ha-ink) !important;
  border: 1px solid var(--ha-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--ha-soft-shadow) !important;
}

.sidebar {
  border-left: 1px solid var(--ha-line) !important;
  border-right: 0 !important;
  box-shadow: var(--ha-shadow) !important;
}

.sidebar::before {
  content: "";
  display: block;
  height: 4px;
  margin: -1px -1px 16px;
  border-radius: 8px 8px 0 0;
  background: var(--ha-gold);
}

.sidebar-toggle,
.rank-toggle {
  background: var(--ha-gold) !important;
  color: var(--ha-navy) !important;
  border-color: rgba(0, 43, 92, 0.12) !important;
}

.header {
  background: transparent !important;
  color: var(--ha-navy) !important;
  border-bottom: 1px solid var(--ha-line) !important;
}

.header h1,
.tx-team,
.rank-badge,
h1,
h2,
h3 {
  color: var(--ha-navy) !important;
}

p,
li,
.tx-text,
.tx-header,
.header-stats,
.leader-table td,
.leader-table th {
  color: var(--ha-muted) !important;
}

.pulse-live {
  background: var(--ha-green) !important;
  box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.12) !important;
}

.leader-table {
  border-collapse: collapse !important;
}

.leader-table th {
  background: var(--ha-blue-soft) !important;
  color: var(--ha-navy) !important;
  border-bottom: 1px solid var(--ha-line) !important;
}

.leader-table td {
  border-bottom: 1px solid #e2e8f0 !important;
}

.rank-badge,
.tx-token {
  background: var(--ha-gold) !important;
  color: var(--ha-navy) !important;
  border: 1px solid rgba(0, 43, 92, 0.12) !important;
}

.tx-amount.positive,
#stat-pot,
#stat-lock,
#tide-status {
  color: var(--ha-green) !important;
}

.tx-amount.negative {
  color: var(--ha-red) !important;
}

a {
  color: var(--ha-navy) !important;
}

@media (max-width: 768px) {
  .sidebar {
    width: min(88vw, 390px) !important;
  }

  .leaderboard-panel {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
  }

  .rank-toggle {
    top: calc(12px + env(safe-area-inset-top)) !important;
    left: 10px !important;
  }
}

/* CR0173 polish iteration: richer live-control surface around unchanged map logic. */
body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: var(--je-night) !important;
  color: #ffffff !important;
}

h1,
h2,
h3,
.header h1,
.rank-badge,
#stat-pot,
#stat-lock {
  font-family: "Fraunces", Georgia, serif !important;
}

button,
table,
.tx-card,
.tx,
.feed-item {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
}

#map {
  background:
    radial-gradient(circle at 45% 25%, rgba(31, 122, 224, 0.24), transparent 32%),
    linear-gradient(135deg, #0e2847, #d8e9f6) !important;
}

.leaflet-control-container .leaflet-control,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  border-radius: 10px !important;
  border: 1px solid rgba(0, 43, 92, 0.16) !important;
  box-shadow: 0 16px 38px rgba(5, 13, 26, 0.28) !important;
}

.sidebar {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 215, 0, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(5, 13, 26, 0.98), rgba(10, 22, 40, 0.97)) !important;
  color: #ffffff !important;
  border-left: 1px solid rgba(255, 215, 0, 0.22) !important;
  box-shadow: -18px 0 60px rgba(0, 0, 0, 0.36) !important;
  backdrop-filter: blur(16px) !important;
}

.sidebar::before {
  height: 5px !important;
  background: linear-gradient(90deg, var(--je-gold), var(--je-cyan), var(--je-blue)) !important;
}

.sidebar-toggle,
.rank-toggle {
  background: linear-gradient(180deg, var(--je-gold), #efbf2e) !important;
  color: var(--je-night) !important;
  border: 1px solid rgba(5, 13, 26, 0.18) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 42px rgba(5, 13, 26, 0.34) !important;
}

.rank-toggle {
  border-radius: 999px !important;
}

.header {
  background: transparent !important;
  color: #ffffff !important;
  border-bottom: 1px solid var(--je-line-dark) !important;
}

.header h1,
h1,
h2,
h3 {
  color: #ffffff !important;
}

.header h1 {
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.28) !important;
}

.header-stats {
  color: var(--je-muted-light) !important;
}

.header-stats > div,
.tide-card,
.leaderboard-panel,
.tx-card,
.tx,
.feed-item {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid var(--je-line-dark) !important;
  border-radius: var(--je-radius) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24) !important;
}

.leaderboard-panel {
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 215, 0, 0.16), transparent 32%),
    rgba(5, 13, 26, 0.94) !important;
  border-color: rgba(255, 215, 0, 0.22) !important;
  border-radius: var(--je-radius-lg) !important;
  backdrop-filter: blur(16px) !important;
}

.feed-container {
  background: rgba(0, 0, 0, 0.2) !important;
}

.tx-card {
  border-left: 4px solid rgba(255, 255, 255, 0.2) !important;
}

.tx-positive {
  border-left-color: var(--je-green) !important;
  background: rgba(22, 163, 74, 0.12) !important;
}

.tx-negative {
  border-left-color: var(--je-red) !important;
  background: rgba(220, 38, 38, 0.12) !important;
}

.tx-neutral {
  border-left-color: var(--je-blue) !important;
  background: rgba(31, 122, 224, 0.12) !important;
}

.tx-header,
.tx-text,
.leader-table td,
.leader-table th,
p,
li {
  color: var(--je-muted-light) !important;
}

.tx-team,
.leader-table th,
.rank-badge,
#stat-pot,
#stat-lock,
#tide-status {
  color: var(--je-gold) !important;
}

.tx-token,
.rank-badge {
  background: rgba(255, 215, 0, 0.14) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 215, 0, 0.24) !important;
}

.tx-amount,
#stat-pot,
#stat-lock {
  font-family: "JetBrains Mono", Consolas, monospace !important;
  font-variant-numeric: tabular-nums;
}

.tx-amount.positive,
.tx-amount.pos,
#stat-pot {
  color: #86efac !important;
}

.tx-amount.negative,
.tx-amount.neg {
  color: #fca5a5 !important;
}

.leader-table th {
  background: rgba(255, 215, 0, 0.1) !important;
  border-bottom-color: var(--je-line-dark) !important;
}

.leader-table td {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.pulse-live {
  background: #ef4444 !important;
  box-shadow: 0 0 0 7px rgba(239, 68, 68, 0.15) !important;
}

a {
  color: var(--je-gold) !important;
}

@media (max-width: 768px) {
  .sidebar {
    width: min(88vw, 390px) !important;
  }

  .leaderboard-panel {
    border-radius: 16px !important;
  }

  .rank-toggle {
    align-items: center !important;
    display: flex !important;
    font-size: 0 !important;
    height: 42px !important;
    justify-content: center !important;
    left: 6px !important;
    max-width: none !important;
    padding: 0 !important;
    width: 42px !important;
  }

  .rank-toggle i {
    font-size: 1rem !important;
  }
}