/* ── Tutorial (Training Day) ────────────────────────────────────── */

#tutorial-skip-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  left: 16px;
  z-index: 99999;
  /* Stay tappable even when Driver.js sets pointer-events:none on body * */
  pointer-events: auto !important;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* Bigger tap target */
  min-height: 40px;
  min-width: 80px;
}
#tutorial-skip-btn:active { opacity: 0.7; }

/* ── Driver.js overrides — mobile-friendly ──────────────────────── */

.driver-popover {
  max-width: min(320px, calc(100vw - 24px)) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  /* Stay above everything */
  pointer-events: auto !important;
}

.driver-popover-title {
  font-size: 16px !important;
  line-height: 1.3 !important;
}

.driver-popover-description {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Navigation buttons — big enough for thumbs */
.driver-popover-footer button {
  padding: 10px 16px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  min-height: 40px !important;
  cursor: pointer !important;
}

/* Close (×) button — larger tap area */
.driver-popover-close-btn {
  width: 36px !important;
  height: 36px !important;
  font-size: 20px !important;
  line-height: 36px !important;
  text-align: center !important;
}

/* Progress text */
.driver-popover-progress-text {
  font-size: 12px !important;
}

/* ── Pulse ring on the speed button being asked to press ─────────── */
.tutorial-btn-pulse {
  display: flex !important;
  animation: tutorialBtnPulse 0.65s ease-in-out infinite alternate;
}
@keyframes tutorialBtnPulse {
  from { box-shadow: 0 3px 12px rgba(0,0,0,0.22), 0 0 0 2px rgba(100,220,120,0.9); }
  to   { box-shadow: 0 3px 12px rgba(0,0,0,0.22), 0 0 0 10px rgba(100,220,120,0); }
}

/* Blanket interaction lock during non-interactive tutorial steps.
   Applied via body.tutorial-locked; removed only for the 3 interactive steps. */
body.tutorial-locked * {
  pointer-events: none !important;
  touch-action:   none !important;
  user-select:    none !important;
}

/* Restore Driver.js popover navigation and skip button */
body.tutorial-locked .driver-popover,
body.tutorial-locked .driver-popover *,
body.tutorial-locked #tutorial-skip-btn {
  pointer-events: auto !important;
  touch-action:   auto !important;
  user-select:    auto !important;
}

/* No-element step pinned near the top of the screen instead of dead-center */
.driver-popover.tutorial-popover-top {
  top: calc(env(safe-area-inset-top, 0px) + 24px) !important;
  bottom: auto !important;
}

/* Keep NPC pill visible during the pill-explanation step */
#npc-profile.tutorial-pill-lock {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}