.tour-surface {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  color: var(--text);
}

.tour-surface .muted {
  color: var(--tour-text) !important;
}

.tour-surface h2,
.tour-surface h3 {
  position: relative;
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}

.tour-surface h2::after,
.tour-surface h3::after {
  content: "";
  display: block;
  width: min(220px, 92%);
  height: 1px;
  margin-top: 6px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(248, 162, 25, 0.92),
    rgba(248, 162, 25, 0.34) 58%,
    rgba(248, 162, 25, 0)
  );
}

.tour-surface .btn,
.tour-surface .btn:visited {
  color: #f7e9c4 !important;
}

.tour-surface .btn:hover {
  color: #f7e9c4 !important;
  background: linear-gradient(180deg, rgba(215,184,124,0.48), rgba(199,167,109,0.16)) !important;
}

.tour-surface .btn:focus-visible {
  color: #f7e9c4 !important;
  background: linear-gradient(180deg, rgba(215,184,124,0.48), rgba(199,167,109,0.16)) !important;
}

.tour-join-card,
.tour-rebuild-card,
.tour-confirm-card,
.tour-champ-picker-card {
  border: 1px solid rgba(67, 203, 253, 0.22);
  background:
    radial-gradient(circle at 8% -20%, rgba(248, 162, 25, 0.2), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
}