/* The guided tour ("VEGA's tour") overlay — ui/tutorial.js. Scoped entirely
   under .tut-*; nothing here touches the game's own classes.

   z-index 120: above .skip (100) and #toasts (90) — nothing else in the app
   lives in the 41–119 band, and toasts deliberately paint UNDER the scrim
   (still legible at .62 alpha, and a refusal toast must not cover the card).

   The root itself passes every tap through (pointer-events: none); only the
   scrim rects, the blocker and the card opt back in. The gap the four scrims
   leave around the anchor is therefore a REAL input hole on DO steps — the
   player taps the game's own element straight through it. */

.tut-root {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
}
.tut-root.tut-hidden { display: none; }

/* Four rects around the hole (top/bottom/left/right), positioned inline by
   position(). They block taps everywhere the hole is not. */
.tut-scrim {
  position: fixed;
  background: rgba(2, 3, 6, .62);
  pointer-events: auto;
}

/* POINT steps: a transparent cover over the hole so the spotlit element is
   seen but not tappable — the card's [Next] is the only move. */
.tut-blocker {
  position: fixed;
  background: transparent;
  pointer-events: auto;
}

/* The spotlight ring over the anchor. Never tappable. */
.tut-ring {
  position: fixed;
  pointer-events: none;
  border: 2px solid var(--blue-lit, #6ea8ff);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(2, 3, 6, .5), 0 0 14px rgba(110, 168, 255, .55);
  animation: tut-pulse 1.6s ease-in-out infinite;
}
@keyframes tut-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(2, 3, 6, .5), 0 0 10px rgba(110, 168, 255, .4); }
  50%      { box-shadow: 0 0 0 1px rgba(2, 3, 6, .5), 0 0 18px rgba(110, 168, 255, .8); }
}

/* A CSS triangle on the card edge facing the ring. */
.tut-arrow {
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  animation: tut-bob 1.6s ease-in-out infinite;
}
.tut-arrow--up   { border-bottom: 9px solid var(--blue-lit, #6ea8ff); }
.tut-arrow--down { border-top: 9px solid var(--blue-lit, #6ea8ff); }
@keyframes tut-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ---- The VEGA card --------------------------------------------------------- */

.tut-card {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(94vw, 400px);
  max-height: 62vh;
  overflow-y: auto;
  pointer-events: auto;
  background: var(--panel-2, #171b25);
  border: 1px solid var(--line-lit, #2b3648);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .55);
  padding: .8rem .9rem;
  animation: tut-in .18s ease-out;
}
.tut-card--center {
  top: 50%;
  transform: translate(-50%, -50%);
}
/* Belt-and-braces for the anchor-ladder hide (ui/tutorial.js showStep): the UA
   [hidden] rule already applies since .tut-card sets no display, but a future
   display line here must not silently resurrect the skip-flash. */
.tut-card[hidden] { display: none; }
@keyframes tut-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tut-head {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.tut-portrait {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(110, 168, 255, .08);
  flex: none;
}
.tut-name {
  flex: 1;
  min-width: 0;
  font-family: var(--mono, monospace);
  font-size: var(--t-xs, .765rem);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--blue-lit, #6ea8ff);
}
.tut-close {
  flex: none;
  width: var(--tap, 2.75rem);
  height: var(--tap, 2.75rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--text-3, #9aa3b5);
  font-size: 1rem;
  cursor: pointer;
}
.tut-close:hover { color: var(--text, #e7ecf5); }

.tut-copy { margin: .6rem 0 0; }
.tut-copy--extra { margin-top: .4rem; }

.tut-foot {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .7rem;
}
.tut-progress {
  font-size: var(--t-xs, .765rem);
  color: var(--text-3, #9aa3b5);
  margin-right: auto;
}
/* The offroute card's two buttons wrap as a unit: at 360px the footer used to
   break after 'Take me there' and strand 'End tour' alone on the next line. */
.tut-foot-btns {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-left: auto;
}
/* Buttons come from game.css (.btn), which does not floor its height — on the
   tour every control meets the tap floor. */
.tut-card .btn { min-height: var(--tap, 2.75rem); }
/* The DO-step skip is a link-styled button that still meets the tap floor. */
.tut-skip {
  min-height: var(--tap, 2.75rem);
  padding: 0 .4rem;
  background: none;
  border: 0;
  color: var(--text-3, #9aa3b5);
  font-size: var(--t-sm, .875rem);
  text-decoration: underline;
  cursor: pointer;
  margin-left: auto;
}
.tut-skip:hover { color: var(--text, #e7ecf5); }

/* The 32px VEGA thumb on the More screen's Guided tour card heading. */
.tut-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  vertical-align: middle;
  background: rgba(110, 168, 255, .08);
}

/* game.css's global kill switch already floors animation/transition durations;
   this removes the tour's own motion outright. */
@media (prefers-reduced-motion: reduce) {
  .tut-ring, .tut-arrow, .tut-card { animation: none; }
}