/* ─────────────────────────────────────────────────────────────
   The city tour (js/tutorial.js): the dim, the spotlight on the
   feature being explained, the TAP marker and the instruction card.
   ───────────────────────────────────────────────────────────── */
#tour[hidden] { display: none; }
#tour { position: fixed; inset: 0; z-index: 70; pointer-events: none; font-family: 'Share Tech Mono', monospace; color: var(--text); opacity: 0; transition: opacity .3s ease; }
#tour.in { opacity: 1; }
#tour.out { opacity: 0; }

/* the darkness is the spotlight's shadow, so the lit feature stays clear */
.tour-spot {
  position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 6px;
  box-shadow: 0 0 0 200vmax rgba(5, 2, 12, .72);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1);
}
.tour-spot.on { outline: 2px solid var(--neon); box-shadow: 0 0 0 200vmax rgba(5, 2, 12, .72), 0 0 14px 2px rgba(168,255,62,.6); }
#tour.is-free .tour-spot { box-shadow: 0 0 0 200vmax rgba(5, 2, 12, .45); }
#tour.is-free .tour-spot.on { box-shadow: 0 0 0 200vmax rgba(5, 2, 12, .45), 0 0 14px 2px rgba(168,255,62,.6); }

/* clicks outside the lit feature (and on it, for read-only steps) stop here */
.tour-block { position: absolute; pointer-events: auto; cursor: default; }
.tour-block[hidden] { display: none; }

/* the "press here" marker */
.tour-tap { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .2s, transform .45s cubic-bezier(.2,.8,.2,1); }
.tour-tap.on { opacity: 1; }
.tour-ring { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border: 2px solid var(--pink); border-radius: 50%; animation: tour-ripple 1.5s ease-out infinite; }
.tour-tap b { position: absolute; left: 14px; top: 14px; padding: 2px 6px 0; font: 600 15px/1 'Teko', sans-serif; letter-spacing: 1.5px; color: #12071f; background: var(--pink); }
@keyframes tour-ripple { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* ── The instruction card ── */
.tour-card {
  position: absolute; left: 0; top: 0; width: min(340px, calc(100vw - 28px)); pointer-events: auto;
  padding: 14px 16px; box-sizing: border-box;
  background: #13081f; border: 2px solid var(--neon); box-shadow: 0 12px 32px rgba(0,0,0,.55);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.tour-count { display: block; font-size: 11px; letter-spacing: .5px; opacity: .6; }
.tour-count:empty { display: none; }
.tour-title { margin: 4px 0 0; font: 600 30px/1 'Teko', sans-serif; letter-spacing: .5px; color: var(--neon); text-transform: uppercase; }
.tour-text { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
.tour-text b { color: var(--neon); font-weight: 700; }
.tour-hint { margin: 10px 0 0; font: 500 18px/1.1 'Teko', sans-serif; letter-spacing: 1px; color: var(--pink); }
.tour-hint::before { content: '▶ '; }
.tour-hint[hidden] { display: none; }

.tour-actions { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.tour-actions .btn { flex: 0 1 auto; min-width: 0; font-size: 18px; padding: 7px 16px 3px; white-space: nowrap; }
.tour-actions .btn[hidden] { display: none; }
.tour-skip { margin-right: auto; background: none; border: 0; padding: 4px 0; font: 12px 'Share Tech Mono', monospace; color: var(--text); opacity: .6; text-decoration: underline; cursor: pointer; }
.tour-skip:hover { opacity: 1; }
.tour-skip[hidden] { display: none; }

/* the welcome card: centred, the two buttons share the row evenly */
.tour-card.is-hero .tour-title { font-size: 38px; }
.tour-card.is-hero .tour-actions .btn { flex: 1 1 0; }

/* ── The practice Duffle (same look as #duffle, one layer up) ── */
#tourDuffle { position: fixed; inset: 0; z-index: 62; display: grid; place-items: center; font-family: 'Share Tech Mono', monospace; color: var(--text); opacity: 0; transition: opacity .25s; }
#tourDuffle.open { opacity: 1; }
#tourDuffle.closing { opacity: 0; }
.tour-practice { margin: 0 0 8px; padding: 3px 8px; font-size: 11px; letter-spacing: .5px; text-align: center; color: #12071f; background: var(--amber); }
#tourDuffle .d-withdraw-note.ok { color: var(--neon); opacity: 1; }


@media (max-width: 700px) {
  .tour-card { padding: 12px 14px; }
  .tour-title { font-size: 26px; }
  .tour-card.is-hero .tour-title { font-size: 32px; }
  .tour-text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-card, .tour-tap { transition: none; }
  .tour-ring { animation: none; }
}