/*
 * The Heretic's tour — see tour.js.
 *
 * Structure and theme tokens only, like everything else. The highlight is a
 * ring plus an enormous outward shadow rather than a clip-path cut-out: it
 * works in every browser, needs no reflow maths, and dims the rest of the
 * board without ever hiding it — the point is to look at the board.
 */

.tour { position: fixed; inset: 0; z-index: 70; display: none; }
.tour-open .tour { display: block; }
.tour__scrim { position: absolute; inset: 0; }

.tour__ring {
  position: absolute;
  border-radius: 10px;
  border: 2px solid rgb(var(--ui-accent-rgb));
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / .72), 0 0 26px rgb(var(--ui-accent-rgb) / .45);
  transition: all .28s cubic-bezier(.3, .8, .3, 1), opacity .2s;
  pointer-events: none;
}

.tour__bubble {
  position: absolute;
  width: min(25rem, calc(100vw - 1.5rem));
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 10px;
  background: rgb(var(--ui-800-rgb));
  border: 1px solid rgb(var(--ui-accent-rgb) / .5);
  box-shadow: 0 26px 60px rgb(0 0 0 / .6);
  transition: left .28s cubic-bezier(.3,.8,.3,1), top .28s cubic-bezier(.3,.8,.3,1);
}

.tour__who { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
/* Next is the primary and sits with his face; everything else drops to the
   foot. `margin-left: auto` rather than a spacer element, so the name is free
   to take whatever width it needs first. */
.tour__who .tour__next { margin-left: auto; }
.tour__who .card { flex: none; }
.tour__name {
  font-family: var(--font-display); font-size: .95rem;
  color: rgb(var(--ui-accent-hi-rgb)); letter-spacing: .04em;
}
.tour__skip {
  margin-left: auto; font: inherit; font-size: .7rem; cursor: pointer;
  background: none; border: 0; padding: .2rem .3rem;
  color: rgb(var(--ui-text-500-rgb)); text-decoration: underline; text-underline-offset: 3px;
}
.tour__skip:hover { color: rgb(var(--ui-text-200-rgb)); }

.tour__title {
  font-family: var(--font-display); font-weight: 500; font-size: 1.35rem;
  margin: 0 0 .4rem; color: rgb(var(--ui-text-100-rgb));
}
.tour__body {
  margin: 0; font-size: .92rem; line-height: 1.65;
  color: rgb(var(--ui-text-300-rgb));
}
.tour__body b { color: rgb(var(--ui-text-100-rgb)); font-weight: 600; }
.tour__body a { color: rgb(var(--ui-accent-hi-rgb)); }

.tour__foot { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.tour__dots { flex: 1; font-size: .7rem; color: rgb(var(--ui-text-500-rgb));
              font-variant-numeric: lining-nums tabular-nums; }
.tour__back, .tour__next {
  font: inherit; font-size: .82rem; cursor: pointer;
  padding: .4rem .9rem; border-radius: 6px;
}
.tour__back {
  background: none; border: 1px solid rgb(var(--ui-600-rgb));
  color: rgb(var(--ui-text-400-rgb));
}
.tour__back:disabled { opacity: .35; cursor: default; }
.tour__next {
  border: 0; font-weight: 600;
  background: rgb(var(--ui-accent-rgb)); color: rgb(var(--ui-900-rgb));
}
.tour__next:hover { background: rgb(var(--ui-accent-hi-rgb)); }

@media (prefers-reduced-motion: reduce) {
  .tour__ring, .tour__bubble { transition: none; }
}