/* ---------- First-visit tour ---------- */
#tour { position: fixed; inset: 0; z-index: 140; }
/* the spotlight: a hole whose enormous shadow dims everything else; it GLIDES
   between steps, and the gold ring marks what to look at */
.tour-hole {
  position: absolute;
  border-radius: 16px;
  box-shadow: 0 0 0 200vmax rgba(4, 5, 8, 0.82);
  outline: 2px solid rgba(214, 189, 126, 0.7);
  outline-offset: 4px;
  transition: left 0.5s cubic-bezier(0.3, 0.1, 0.2, 1), top 0.5s cubic-bezier(0.3, 0.1, 0.2, 1),
    width 0.5s cubic-bezier(0.3, 0.1, 0.2, 1), height 0.5s cubic-bezier(0.3, 0.1, 0.2, 1);
}
.tour-hole.bare { outline: none; }
.tour-card {
  position: absolute;
  left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 4vh);
  transform: translateX(-50%);
}
.tour-card.at-top {                       /* spotlight low → the words go high */
  bottom: auto;
  top: calc(env(safe-area-inset-top, 0px) + 4vh);
}
.tour-card, .tour-card.at-top {
  width: min(480px, 92vw);
  background: #efeae0;
  color: #262523;
  border-radius: 12px;
  padding: 1.15rem 1.25rem 1rem;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
}
.tour-text { font-size: 1.08rem; line-height: 1.5; }
.tour-btns { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; }
.tour-skip {
  border: 0; background: none; color: #6d675c; font-family: inherit;
  font-size: 0.88rem; cursor: pointer; padding: 0.55rem 0.4rem;
  margin-right: auto;
}
.tour-next, .tour-alt {
  border: 0; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 0.95rem; padding: 0.62rem 1.25rem;
}
.tour-next { background: #b98d2f; color: #fff; }
.tour-alt { background: #262523; color: #efeae0; }

/* the ? that replays it — big enough for old thumbs, quiet enough for a vigil */
.help-fab {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 0.9rem);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
  z-index: 101;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(20, 21, 26, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink-dim);
  font-size: 1.15rem; font-family: inherit; cursor: pointer;
  transition: opacity 0.35s ease;
}
.help-fab.chrome-hidden { opacity: 0; pointer-events: none; }

/* ---------- First-climb swipe hint ---------- */
#swipe-hint[hidden] { display: none; }   /* the id's display:flex beats the hidden
                                            attribute's UA default — same trap as every
                                            other [hidden] rule in this file */
#swipe-hint {
  position: absolute; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
  padding-top: 36vh;              /* nudge the group down, nearer the first step */
  pointer-events: none;
  transition: opacity 0.5s ease;
}
#swipe-hint.fading { opacity: 0; }
#swipe-hint p {
  color: rgba(236, 231, 220, 0.85);
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.swipe-track {
  width: 46px; height: 112px;
  border: 2px solid rgba(236, 231, 220, 0.55);
  border-radius: 26px;
  background: rgba(8, 9, 12, 0.4);
  position: relative;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.swipe-dot {
  position: absolute; left: 50%; top: 12px;
  width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%;
  background: #ece7dc;
  box-shadow: 0 0 12px rgba(236, 231, 220, 0.6);
  animation: swipe-down 1.7s ease-in-out infinite;
}
@keyframes swipe-down {
  0% { top: 12px; opacity: 0; }
  18% { opacity: 1; }
  72% { top: 82px; opacity: 1; }
  100% { top: 86px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .swipe-dot { animation: none; top: 45px; } }