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

/* Dark theme (default) */
:root,
[data-theme="dark"] {
  --bg: #0e0e10;
  --surface: #1a1a1f;
  --border: #2a2a30;
  --text: #e4e4e7;
  --text-muted: #8b8b94;
  --accent: #6366f1;
  --accent-light: #818cf8;
  --node-position: #6366f1;
  --node-technique: #22d3ee;
  --node-free: #34d399;
  --header-bg: rgba(14, 14, 16, 0.85);
}

/* Light theme */
[data-theme="light"] {
  --bg: #f5f5f0;
  --surface: #ffffff;
  --border: #ddd;
  --text: #1a1a1a;
  --text-muted: #888;
  --accent: #4f46e5;
  --accent-light: #6366f1;
  --node-position: #4f46e5;
  --node-technique: #0891b2;
  --node-free: #059669;
  --header-bg: rgba(245, 245, 240, 0.85);
}

/* Girly theme */
[data-theme="girly"] {
  --bg: #1c1018;
  --surface: #2a1a24;
  --border: #3d2835;
  --text: #f5dce8;
  --text-muted: #b08a9e;
  --accent: #e8789a;
  --accent-light: #f0a0b8;
  --node-position: #e8789a;
  --node-technique: #d4a0d0;
  --node-free: #f0a0b8;
  --header-bg: rgba(28, 16, 24, 0.88);
}

/* Military theme */
[data-theme="military"] {
  --bg: #1a1c14;
  --surface: #262b1e;
  --border: #3a3f2e;
  --text: #d4cdb8;
  --text-muted: #8a8470;
  --accent: #8b9a3c;
  --accent-light: #a8b84c;
  --node-position: #8b9a3c;
  --node-technique: #c9a84c;
  --node-free: #6b8f3c;
  --header-bg: rgba(26, 28, 20, 0.88);
}

/* Acid theme (Ableton-style) */
[data-theme="acid"] {
  --bg: #0a0a0a;
  --surface: #1a1a1a;
  --border: #333;
  --text: #c8ff00;
  --text-muted: #7a9900;
  --accent: #c8ff00;
  --accent-light: #e0ff66;
  --node-position: #c8ff00;
  --node-technique: #00ff88;
  --node-free: #66ff00;
  --header-bg: rgba(10, 10, 10, 0.9);
}

/* Navy theme */
[data-theme="navy"] {
  --bg: #0a1628;
  --surface: #132040;
  --border: #1e3460;
  --text: #c8ddf0;
  --text-muted: #6b8ab0;
  --accent: #00d4ff;
  --accent-light: #66e8ff;
  --node-position: #00d4ff;
  --node-technique: #00ffc8;
  --node-free: #34d399;
  --header-bg: rgba(10, 22, 40, 0.9);
}

/* Rust theme */
[data-theme="rust"] {
  --bg: #1a1210;
  --surface: #2a1e18;
  --border: #3d2e24;
  --text: #e0cfc0;
  --text-muted: #9a8070;
  --accent: #e87830;
  --accent-light: #f0a060;
  --node-position: #e87830;
  --node-technique: #d4a060;
  --node-free: #c89040;
  --header-bg: rgba(26, 18, 16, 0.9);
}

/* Violet theme */
[data-theme="violet"] {
  --bg: #120e1c;
  --surface: #1e1830;
  --border: #302848;
  --text: #e0d8f0;
  --text-muted: #9088b0;
  --accent: #a78bfa;
  --accent-light: #c4b5fd;
  --node-position: #a78bfa;
  --node-technique: #d8b4fe;
  --node-free: #86efac;
  --header-bg: rgba(18, 14, 28, 0.9);
}

/* Mono theme */
[data-theme="mono"] {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --border: #d0d0d0;
  --text: #111111;
  --text-muted: #666666;
  --accent: #111111;
  --accent-light: #333333;
  --node-position: #111111;
  --node-technique: #444444;
  --node-free: #22c55e;
  --header-bg: rgba(255, 255, 255, 0.9);
}

/* 8bit theme */
[data-theme="8bit"] {
  --bg: #000080;
  --surface: #0000a0;
  --border: #4040c0;
  --text: #ffff00;
  --text-muted: #c0c000;
  --accent: #ff0000;
  --accent-light: #ff6060;
  --node-position: #ff0000;
  --node-technique: #00ff00;
  --node-free: #00ff00;
  --header-bg: rgba(0, 0, 128, 0.95);
  --8bit-font: 'Courier New', 'Consolas', monospace;
}

[data-theme="8bit"] body, [data-theme="8bit-green"] body,
[data-theme="8bit-red"] body, [data-theme="8bit-pink"] body,
[data-theme="8bit-amber"] body,
[data-theme="8bit"] input, [data-theme="8bit-green"] input,
[data-theme="8bit-red"] input, [data-theme="8bit-pink"] input,
[data-theme="8bit-amber"] input,
[data-theme="8bit"] button, [data-theme="8bit-green"] button,
[data-theme="8bit-red"] button, [data-theme="8bit-pink"] button,
[data-theme="8bit-amber"] button,
[data-theme="8bit"] select, [data-theme="8bit-green"] select,
[data-theme="8bit-red"] select, [data-theme="8bit-pink"] select,
[data-theme="8bit-amber"] select {
  font-family: var(--8bit-font) !important;
}

[data-theme="8bit"] *, [data-theme="8bit-green"] *,
[data-theme="8bit-red"] *, [data-theme="8bit-pink"] *,
[data-theme="8bit-amber"] * {
  border-radius: 0 !important;
}

[data-theme="8bit"] .header, [data-theme="8bit-green"] .header,
[data-theme="8bit-red"] .header, [data-theme="8bit-pink"] .header,
[data-theme="8bit-amber"] .header {
  backdrop-filter: none;
  border-bottom: 3px solid var(--text);
}

[data-theme="8bit"] .card, [data-theme="8bit-green"] .card,
[data-theme="8bit-red"] .card, [data-theme="8bit-pink"] .card,
[data-theme="8bit-amber"] .card,
[data-theme="8bit"] .loc-card, [data-theme="8bit-green"] .loc-card,
[data-theme="8bit-red"] .loc-card, [data-theme="8bit-pink"] .loc-card,
[data-theme="8bit-amber"] .loc-card,
[data-theme="8bit"] .action-card, [data-theme="8bit-green"] .action-card,
[data-theme="8bit-red"] .action-card, [data-theme="8bit-pink"] .action-card,
[data-theme="8bit-amber"] .action-card,
[data-theme="8bit"] .tech-item, [data-theme="8bit-green"] .tech-item,
[data-theme="8bit-red"] .tech-item, [data-theme="8bit-pink"] .tech-item,
[data-theme="8bit-amber"] .tech-item,
[data-theme="8bit"] .landing-card, [data-theme="8bit-green"] .landing-card,
[data-theme="8bit-red"] .landing-card, [data-theme="8bit-pink"] .landing-card,
[data-theme="8bit-amber"] .landing-card {
  border-width: 2px;
  border-style: solid;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
}

/* 8bit-green theme */
[data-theme="8bit-green"] {
  --bg: #003000;
  --surface: #004800;
  --border: #006800;
  --text: #00ff00;
  --text-muted: #00aa00;
  --accent: #00ff00;
  --accent-light: #66ff66;
  --node-position: #00ff00;
  --node-technique: #00cc00;
  --node-free: #88ff88;
  --header-bg: rgba(0, 48, 0, 0.95);
  --8bit-font: 'Courier New', 'Consolas', monospace;
}

/* 8bit-red theme */
[data-theme="8bit-red"] {
  --bg: #300000;
  --surface: #480000;
  --border: #802020;
  --text: #ff4040;
  --text-muted: #cc3030;
  --accent: #ff0000;
  --accent-light: #ff6060;
  --node-position: #ff0000;
  --node-technique: #ff8800;
  --node-free: #ffcc00;
  --header-bg: rgba(48, 0, 0, 0.95);
  --8bit-font: 'Courier New', 'Consolas', monospace;
}

/* 8bit-pink theme */
[data-theme="8bit-pink"] {
  --bg: #2a0028;
  --surface: #400040;
  --border: #803080;
  --text: #ff80ff;
  --text-muted: #cc60cc;
  --accent: #ff00ff;
  --accent-light: #ff88ff;
  --node-position: #ff00ff;
  --node-technique: #ff66cc;
  --node-free: #00ffcc;
  --header-bg: rgba(42, 0, 40, 0.95);
  --8bit-font: 'Courier New', 'Consolas', monospace;
}

/* 8bit-amber theme */
[data-theme="8bit-amber"] {
  --bg: #1a1000;
  --surface: #2a1a00;
  --border: #604800;
  --text: #ffb000;
  --text-muted: #cc8800;
  --accent: #ffcc00;
  --accent-light: #ffe060;
  --node-position: #ffcc00;
  --node-technique: #ff8800;
  --node-free: #ffee66;
  --header-bg: rgba(26, 16, 0, 0.95);
  --8bit-font: 'Courier New', 'Consolas', monospace;
}

/* PS1 theme */
[data-theme="ps1"] {
  --bg: #1a1a24;
  --surface: #24243a;
  --border: #3a3a58;
  --text: #d0d8e8;
  --text-muted: #7880a0;
  --accent: #60c0e0;
  --accent-light: #88d8f0;
  --node-position: #60c0e0;
  --node-technique: #a0d0e0;
  --node-free: #60e0a0;
  --header-bg: rgba(26, 26, 36, 0.92);
}

[data-theme="ps1"] .header {
  border-bottom: 1px solid #60c0e0;
}

/* Game Boy theme */
[data-theme="gameboy"] {
  --bg: #8b956d;
  --surface: #9baa7c;
  --border: #6b7353;
  --text: #1d2b0f;
  --text-muted: #3a4a28;
  --accent: #2d4010;
  --accent-light: #3a5218;
  --node-position: #2d4010;
  --node-technique: #4a6420;
  --node-free: #5a7a30;
  --header-bg: rgba(139, 149, 109, 0.95);
  --8bit-font: 'Courier New', 'Consolas', monospace;
}

[data-theme="gameboy"] body,
[data-theme="gameboy"] input,
[data-theme="gameboy"] button,
[data-theme="gameboy"] select {
  font-family: var(--8bit-font) !important;
}

[data-theme="gameboy"] * {
  border-radius: 2px !important;
}

[data-theme="gameboy"] .header {
  backdrop-filter: none;
  border-bottom: 2px solid #3a4a28;
}

[data-theme="gameboy"] .card,
[data-theme="gameboy"] .loc-card,
[data-theme="gameboy"] .action-card,
[data-theme="gameboy"] .tech-item,
[data-theme="gameboy"] .landing-card {
  border-width: 2px;
  box-shadow: 3px 3px 0 rgba(29, 43, 15, 0.3);
}

/* Famicom theme */
[data-theme="famicom"] {
  --bg: #f0e6d0;
  --surface: #faf4e8;
  --border: #d4c4a0;
  --text: #4a2020;
  --text-muted: #8a6a50;
  --accent: #cc2020;
  --accent-light: #e03030;
  --node-position: #cc2020;
  --node-technique: #c8963c;
  --node-free: #30a030;
  --header-bg: rgba(240, 230, 208, 0.95);
}

[data-theme="famicom"] .header {
  border-bottom: 2px solid #cc2020;
}

[data-theme="famicom"] .card,
[data-theme="famicom"] .loc-card,
[data-theme="famicom"] .action-card,
[data-theme="famicom"] .tech-item,
[data-theme="famicom"] .landing-card {
  box-shadow: 2px 2px 0 rgba(74, 32, 32, 0.12);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  height: 100vh;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 12px 24px;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.theme-select {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  outline: none;
}

.theme-select:focus {
  border-color: var(--accent);
}

/* Main */
.main {
  height: 100vh;
  width: 100vw;
  position: relative;
}

#map {
  width: 100%;
  height: 100%;
}

#map svg {
  display: block;
}

/* Detail Panel */
.detail-panel {
  position: fixed;
  top: 56px;
  right: 0;
  width: 320px;
  height: calc(100vh - 56px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 24px;
  overflow-y: auto;
  z-index: 20;
  transition: transform 0.25s ease;
}

.detail-panel.hidden {
  transform: translateX(100%);
}

.detail-panel__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
}

.detail-panel__close:hover {
  color: var(--text);
}

.detail-panel__name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-right: 24px;
}

.detail-panel__depth {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.depth-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}

.depth-dot.active {
  background: var(--accent-light);
}

.detail-panel__description {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.detail-panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.tag {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--border);
  color: var(--text-muted);
}

.detail-panel__link {
  display: inline-block;
  color: var(--accent-light);
  font-size: 14px;
  text-decoration: none;
}

.detail-panel__link:hover {
  text-decoration: underline;
}

/* Map Legend */
.map-legend {
  position: fixed;
  bottom: 16px;
  left: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  z-index: 10;
  font-size: 12px;
}

.map-legend__title {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

.map-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.map-legend__line {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
}

/* Tooltip */
.tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
}