.phantom-container {
  max-width: 65ch;
  margin: 2em auto;
  line-height: 1.8;
  font-size: 1.1em;
}

.phantom-link {
  position: relative;
  color: var(--text-color, #333);
  border-bottom: 1px dashed rgba(var(--accent-color-rgb, 184, 134, 11), 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.phantom-link:hover {
  color: var(--accent-color, #b8860b);
  border-bottom-style: solid;
  border-bottom-color: var(--accent-color, #b8860b);
}

.phantom-destination {
  position: absolute;
  top: -3em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-color, #fdf8f0);
  border: 1px solid var(--accent-color, #b8860b);
  border-radius: 4px;
  padding: 0.8em 1.2em;
  font-size: 0.9em;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.phantom-destination::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--accent-color, #b8860b);
}

.phantom-link:hover .phantom-destination {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

/* Different phantom states */
.phantom-404 .phantom-destination {
  border-color: #dc3545;
  color: #dc3545;
}

.phantom-404 .phantom-destination::before {
  border-top-color: #dc3545;
}

.phantom-construction .phantom-destination {
  border-color: #ffc107;
  color: #f57c00;
}

.phantom-construction .phantom-destination::before {
  border-top-color: #ffc107;
}

.phantom-forbidden .phantom-destination {
  border-color: #6f42c1;
  color: #6f42c1;
}

.phantom-forbidden .phantom-destination::before {
  border-top-color: #6f42c1;
}

.phantom-impossible .phantom-destination {
  border-color: #20c997;
  color: #138496;
}

.phantom-impossible .phantom-destination::before {
  border-top-color: #20c997;
}

/* Interactive styles */
.phantom-link.clicked {
  animation: phantom-click 0.6s ease;
}

@keyframes phantom-click {
  0% { transform: scale(1); }
  25% { transform: scale(1.05); }
  75% { transform: scale(0.95); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* Demo section styling */
.demo-section {
  margin: 3em 0;
  padding: 2em;
  border: 1px solid rgba(var(--accent-color-rgb, 184, 134, 11), 0.2);
  background: rgba(var(--accent-color-rgb, 184, 134, 11), 0.02);
}

.demo-title {
  font-weight: bold;
  color: var(--accent-color, #b8860b);
  margin-bottom: 1.5em;
}

.phantom-legend {
  margin-top: 2em;
  font-size: 0.9em;
  color: var(--text-light, #666);
  line-height: 1.5;
}

.phantom-legend strong {
  color: var(--text-color, #333);
}