/* ── Reset ───────────────────────────────────────────────────────────────────── */

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

body {
  background: #0a0810;
  overflow: hidden;
  font-family: 'Space Mono', monospace;
  color: #d4b483;
  width: 100vw;
  height: 100vh;
  user-select: none;
}

/* ── Canvas ──────────────────────────────────────────────────────────────────── */

#space {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ── Scanlines ───────────────────────────────────────────────────────────────── */

#scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.062) 2px,
    rgba(0, 0, 0, 0.062) 4px
  );
}

/* ── HUD ─────────────────────────────────────────────────────────────────────── */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

#brand {
  position: absolute;
  top: 22px; left: 26px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 4px;
  color: #d4b483;
  text-shadow:
    0 0 12px rgba(212, 180, 131, 0.5),
    0 0 30px rgba(212, 180, 131, 0.18);
}

.cursor {
  display: inline-block;
  color: #c8902a;
  animation: blink 1.1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

#hud-right {
  position: absolute;
  top: 22px; right: 26px;
  text-align: right;
}

#coords {
  font-size: 0.57rem;
  color: #7a6040;
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px rgba(200, 144, 42, 0.22);
}

#status-line {
  margin-top: 5px;
  font-size: 0.49rem;
  color: #3a2a14;
  letter-spacing: 1.5px;
}

#quote {
  position: absolute;
  bottom: 24px; left: 26px;
  font-size: 0.68rem;
  font-style: italic;
  color: #6a5030;
  letter-spacing: 1.5px;
  text-shadow: 0 0 10px rgba(200, 144, 42, 0.13);
  min-height: 1.2em;
}

#legend {
  position: absolute;
  bottom: 24px; right: 26px;
  text-align: right;
  font-size: 0.54rem;
  color: #5a4428;
  letter-spacing: 1px;
  line-height: 2;
}

.legend-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.legend-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Hover info panel ────────────────────────────────────────────────────────── */

#info-panel {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  display: none;
}

#panel-text {
  background: rgba(7, 5, 13, 0.96);
  border: 1px solid rgba(200, 144, 42, 0.35);
  color: #a87840;
  font-family: 'Space Mono', monospace;
  font-size: 0.57rem;
  padding: 10px 14px;
  letter-spacing: 0.5px;
  line-height: 1.75;
  white-space: pre;
  box-shadow: 0 0 16px rgba(200, 144, 42, 0.06);
}

/* ── Detail view ─────────────────────────────────────────────────────────────── */

#detail-view {
  position: fixed;
  top: 0; right: 0;
  width: 44%;
  height: 100%;
  z-index: 40;
  pointer-events: none;
}

#detail-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 52px 48px 40px 56px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(7, 5, 13, 0.93) 16%,
    rgba(7, 5, 13, 0.99) 48%
  );
  border-left: 1px solid rgba(200, 144, 42, 0.15);
  transform: translateX(100%);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: all;
}

#detail-panel.active {
  transform: translateX(0);
}

#detail-sector {
  font-size: 0.52rem;
  letter-spacing: 3px;
  color: #4a3418;
  margin-bottom: 9px;
  flex-shrink: 0;
}

#detail-name {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #d4b483;
  text-shadow: 0 0 22px rgba(212, 180, 131, 0.28);
  margin-bottom: 18px;
  min-height: 1.6em;
  flex-shrink: 0;
}

#detail-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, rgba(200, 144, 42, 0.45), transparent);
  margin-bottom: 22px;
  flex-shrink: 0;
}

/* ── Detail scroll area ──────────────────────────────────────────────────────── */

#detail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}

#detail-scroll::-webkit-scrollbar {
  width: 2px;
}
#detail-scroll::-webkit-scrollbar-track {
  background: transparent;
}
#detail-scroll::-webkit-scrollbar-thumb {
  background: rgba(200, 144, 42, 0.25);
  border-radius: 1px;
}

/* ── Detail sections ─────────────────────────────────────────────────────────── */

.det-section {
  margin-bottom: 22px;
}

.det-shead {
  font-size: 0.52rem;
  letter-spacing: 2px;
  color: #7a5c2c;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.det-srule {
  height: 1px;
  background: linear-gradient(to right, rgba(200, 144, 42, 0.22), transparent);
  margin-bottom: 8px;
}

.det-sbody {
  font-size: 0.63rem;
  line-height: 1.95;
  color: #9a7240;
  white-space: pre-wrap;
  letter-spacing: 0.3px;
}

.det-highlight {
  color: #c8a060;
}

.det-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c8902a;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 144, 42, 0.35);
  transition: color 0.2s, border-color 0.2s;
  cursor: pointer;
  pointer-events: all;
}

.det-link:hover {
  color: #e8b050;
  border-color: rgba(232, 176, 80, 0.7);
}

.det-link-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  opacity: 0.85;
}

.det-link-icon svg {
  width: 100%;
  height: 100%;
}

/* ── Tags row ────────────────────────────────────────────────────────────────── */

#detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
  margin-bottom: 22px;
  min-height: 24px;
  flex-shrink: 0;
}

.tag-chip {
  font-size: 0.5rem;
  letter-spacing: 1.5px;
  color: #6a4e22;
  border: 1px solid rgba(200, 144, 42, 0.25);
  padding: 3px 9px;
  white-space: nowrap;
  font-family: 'Space Mono', monospace;
}

/* ── Close button ────────────────────────────────────────────────────────────── */

#detail-close {
  background: none;
  border: none;
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 2px;
  color: #362614;
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: color 0.2s;
  flex-shrink: 0;
}

#detail-close:hover {
  color: #7a5c2c;
}

/* ── Mobile ──────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* HUD */
  #brand        { font-size: 0.78rem; letter-spacing: 2px; top: 14px; left: 16px; }
  #hud-right    { top: 14px; right: 16px; }
  #coords       { font-size: 0.46rem; letter-spacing: 1px; }
  #status-line  { display: none; }
  #quote        { font-size: 0.54rem; letter-spacing: 1px; bottom: 16px; left: 16px; }
  #legend       { font-size: 0.46rem; line-height: 1.9; bottom: 16px; right: 16px; }
  .legend-dot   { width: 6px; height: 6px; }

  /* Detail panel: slides up from bottom instead of in from right */
  #detail-view {
    width: 100%;
    height: 58%;
    top: auto;
    bottom: 0;
    right: 0;
  }

  #detail-panel {
    padding: 22px 22px 26px;
    background: rgba(7, 5, 13, 0.98);
    border-left: none;
    border-top: 1px solid rgba(200, 144, 42, 0.18);
    transform: translateY(100%);
  }

  #detail-panel.active { transform: translateY(0); }

  #detail-sector { font-size: 0.46rem; }
  #detail-name   { font-size: 1.05rem; margin-bottom: 14px; }
  #detail-rule   { margin-bottom: 16px; }
  #detail-scroll { max-height: 46%; }
  .det-shead     { font-size: 0.46rem; }
  .det-sbody     { font-size: 0.58rem; }
  .tag-chip      { font-size: 0.44rem; padding: 2px 7px; }
  #detail-close  { font-size: 0.44rem; }

  /* Hover tooltip: smaller on mobile */
  #panel-text { font-size: 0.5rem; padding: 8px 10px; }

  /* Info panel: don't show tooltip on touch (it flickers on tap) */
  #info-panel { display: none !important; }
}

/* ── Dimmer ──────────────────────────────────────────────────────────────────── */

#dimmer {
  position: fixed;
  inset: 0;
  background: rgba(7, 5, 13, 0);
  z-index: 35;
  pointer-events: none;
  transition: background 0.5s ease;
}

#dimmer.active {
  background: rgba(7, 5, 13, 0.38);
  pointer-events: all;
}