.trail-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: calc(100dvh - 7.5rem);
}

.trail-map {
  position: relative;
  width: 100%;
  height: calc(100dvh - 13.5rem);
  min-height: 18rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background-color: var(--brand-soft);
  background-image: url("../assets/trail/trilha-fundo.webp");
  background-size: cover;
  background-position: center;
}

.trail-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.trail-hex {
  stroke-width: 2;
  pointer-events: none;
}

.trail-hex-btn {
  cursor: pointer;
  outline: none;
}

.trail-hex-btn .trail-hex {
  pointer-events: auto;
}

.trail-hex-btn:focus-visible .trail-hex,
.trail-hex-btn:hover .trail-hex {
  fill-opacity: 0.42;
  stroke-opacity: 0.9;
}

.trail-replay-hint {
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-muted);
}


.trail-hex.contribution {
  fill: var(--type-contribution);
  stroke: var(--type-contribution);
}
.trail-hex.reflection {
  fill: var(--type-reflection);
  stroke: var(--type-reflection);
}
.trail-hex.evaluation {
  fill: var(--type-evaluation);
  stroke: var(--type-evaluation);
}
.trail-hex.affectivity {
  fill: var(--type-affectivity);
  stroke: var(--type-affectivity);
}
.trail-hex.challenges {
  fill: var(--type-challenges);
  stroke: var(--type-challenges);
}
.trail-hex.experience {
  fill: var(--type-experience);
  stroke: var(--type-experience);
}
.trail-hex.is-start,
.trail-hex.is-end {
  fill: var(--brand);
  stroke: var(--brand-dark);
}

.trail-hex.is-future {
  fill-opacity: 0.38;
  stroke-opacity: 0.8;
}

.trail-hex.is-visited {
  fill-opacity: 0.22;
  stroke-opacity: 0.5;
  stroke-width: 1.5;
}

.trail-hex.is-current {
  fill-opacity: 0.72;
  stroke: #fff;
  stroke-width: 3.2;
  filter: drop-shadow(0 2px 4px rgba(42, 36, 56, 0.28));
}

.trail-current-ring {
  fill: none;
  stroke: #fff;
  stroke-width: 3.5;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(42, 36, 56, 0.35));
}

.trail-label-plate {
  fill: #fff;
  stroke: rgba(42, 36, 56, 0.2);
  stroke-width: 1;
  pointer-events: none;
}

.trail-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.trail-dot {
  fill: #fff;
  stroke: rgba(42, 36, 56, 0.18);
  stroke-width: 1;
  pointer-events: none;
}

.trail-dock {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 0.35rem 0 calc(0.45rem + var(--safe-bottom));
  background: linear-gradient(180deg, transparent, var(--surface-page) 28%);
}

.trail-dock .mesa-toolbar-nav {
  margin-top: 0.55rem;
  justify-content: center;
}

.trail-progress {
  margin: 0 0 0.45rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-muted);
}

.trail-arrival {
  text-align: center;
}

.trail-arrival h2 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--brand-dark);
}

.trail-arrival p {
  margin: 0 0 0.85rem;
  color: var(--ink-muted);
}

body.trail-overlay-open {
  overflow: hidden;
}

.trail-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(42, 36, 56, 0.62);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(0.75rem + var(--safe-top)) 1rem calc(1rem + var(--safe-bottom));
}

.trail-overlay-panel {
  width: min(100%, var(--app-max-width));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-height: 100%;
  overflow: auto;
}

.trail-overlay .card-stage {
  max-width: none;
  flex: 0 0 auto;
}

.trail-overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.trail-overlay-actions .btn {
  min-height: var(--touch-min);
}

.trail-overlay-actions .btn-block {
  flex: 1 1 100%;
}

.trail-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.trail-prep-dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--brand);
}

.trail-prep-dot.contribution {
  background: var(--type-contribution);
}
.trail-prep-dot.reflection {
  background: var(--type-reflection);
}
.trail-prep-dot.evaluation {
  background: var(--type-evaluation);
}
.trail-prep-dot.affectivity {
  background: var(--type-affectivity);
}
.trail-prep-dot.challenges {
  background: var(--type-challenges);
}
.trail-prep-dot.experience {
  background: var(--type-experience);
}
.trail-prep-dot.is-edge {
  background: var(--brand);
  outline: 2px solid var(--brand-dark);
  outline-offset: 1px;
}

.trail-map.is-shuffling .trail-hex.is-current {
  animation: trail-pulse 0.7s ease-in-out infinite;
}

@keyframes trail-pulse {
  50% {
    fill-opacity: 0.42;
  }
}

@media (max-height: 620px) {
  .trail-map {
    height: 18rem;
  }
}