/* Guided tutorial - spotlight overlay with popover */
.guided-tutorial-root {
  position: fixed;
  inset: 0;
  z-index: 14000;
  pointer-events: none;
}

.guided-tutorial-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.guided-tutorial-root.is-visible .guided-tutorial-backdrop {
  opacity: 1;
}

/* Lighter dim for menu / readable sections - backdrop off, spotlight cutout only */
.guided-tutorial-root--soft .guided-tutorial-backdrop {
  opacity: 0;
}

.guided-tutorial-root.is-visible.guided-tutorial-root--soft .guided-tutorial-backdrop {
  opacity: 0;
}

.guided-tutorial-root--soft .guided-tutorial-spotlight {
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.16),
    0 0 0 3px rgba(99, 102, 241, 0.95),
    0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Interactive steps: ring only, no full-screen dim */
.guided-tutorial-root--interactive .guided-tutorial-backdrop,
.guided-tutorial-root--modal-guide .guided-tutorial-backdrop {
  opacity: 0;
}

.guided-tutorial-root.is-visible.guided-tutorial-root--interactive .guided-tutorial-backdrop,
.guided-tutorial-root.is-visible.guided-tutorial-root--modal-guide .guided-tutorial-backdrop,
.guided-tutorial-root.is-visible.guided-tutorial-root--modal-guide-active .guided-tutorial-backdrop {
  opacity: 0;
}

.guided-tutorial-root--interactive .guided-tutorial-spotlight,
.guided-tutorial-root--modal-guide .guided-tutorial-spotlight,
.guided-tutorial-root--modal-guide-active .guided-tutorial-spotlight {
  box-shadow:
    0 0 0 3px rgba(99, 102, 241, 0.95),
    0 0 0 6px rgba(99, 102, 241, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

.guided-tutorial-root.is-visible.guided-tutorial-root--interactive .guided-tutorial-spotlight,
.guided-tutorial-root.is-visible.guided-tutorial-root--modal-guide .guided-tutorial-spotlight,
.guided-tutorial-root.is-visible.guided-tutorial-root--modal-guide-active .guided-tutorial-spotlight {
  box-shadow:
    0 0 0 3px rgba(99, 102, 241, 0.95),
    0 0 0 6px rgba(99, 102, 241, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Guiding inside reward / damage modals - above app modals (22500), below coach-mark popover */
.guided-tutorial-root--modal-guide-active {
  z-index: 23000;
}

.guided-tutorial-root--modal-guide-active .guided-tutorial-popover {
  z-index: 2;
}

.guided-tutorial-root--modal-guide-active .guided-tutorial-spotlight {
  z-index: 1;
}

/* Hide tour while celebration / results modals are showing */
.guided-tutorial-root--celebration {
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}

/* App modal open - hide tutorial dim, keep coach-mark above the modal */
.guided-tutorial-root--modal-companion {
  z-index: 23000;
}

.guided-tutorial-root--modal-companion .guided-tutorial-backdrop,
.guided-tutorial-root--modal-companion .guided-tutorial-spotlight {
  opacity: 0 !important;
  visibility: hidden !important;
}

.guided-tutorial-root--modal-companion .guided-tutorial-popover {
  z-index: 2;
  pointer-events: auto;
}

/* Lift open modals above the tutorial dim layer (22500) but below the coach-mark (23000) */
body.guided-tutorial-modal-open #modal-container:not(:empty),
body.guided-tutorial-modal-open .custom-modal-overlay:not(.guided-tutorial-confirm),
body.guided-tutorial-modal-open .student-management-modal,
body.guided-tutorial-modal-open .data-management-modal,
body.guided-tutorial-modal-open .re-journey-overlay,
body.guided-tutorial-modal-open .re-scroll-overlay,
body.guided-tutorial-modal-open .spellbook-overlay--visible,
body.guided-tutorial-modal-open .spellbook-overlay,
body.guided-tutorial-modal-open .live-poll-overlay,
body.guided-tutorial-modal-open .message-board-overlay,
body.guided-tutorial-modal-open .mb-root,
body.guided-tutorial-modal-open .activity-center-overlay,
body.guided-tutorial-modal-open .ac-root,
body.guided-tutorial-modal-open .hoh-root,
body.guided-tutorial-modal-open .nc-modal-overlay,
body.guided-tutorial-modal-open .progressive-setup-overlay {
  z-index: 22500 !important;
}

/* Keep Hall of Heroes fullscreen even when tutorial lifts z-index */
body.guided-tutorial-modal-open .hoh-root.hoh-root--fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Close-confirm must sit above the tutorial coach-mark (23000) */
.custom-modal-overlay.guided-tutorial-confirm {
  z-index: 24000 !important;
}

/* Non-guide modals (legacy - popover hidden while user opens modal on their own) */
.guided-tutorial-root--modal-open {
  z-index: 1000;
}

.guided-tutorial-root--modal-open .guided-tutorial-popover {
  display: none;
}

.guided-tutorial-target-highlight {
  outline: 3px solid rgba(99, 102, 241, 0.95) !important;
  outline-offset: 3px;
  border-radius: 8px;
}

/*
 * Only promote stacking for normal UI chrome. Never force position:relative on
 * fixed fullscreen overlays - that collapses them into document flow (e.g. Hall of Heroes).
 */
.guided-tutorial-target-highlight:not(
  .hoh-root,
  .hoh-root--fullscreen,
  .spellbook-overlay,
  .ac-root,
  .mb-root,
  .live-poll-overlay,
  .re-journey-overlay,
  .re-scroll-overlay,
  .data-management-modal,
  .student-management-modal,
  .progressive-setup-overlay,
  .custom-modal-overlay,
  .give-reward-overlay,
  .combat-overlay,
  .give-award-overlay
) {
  position: relative;
  z-index: 13999;
}

/* Multi-item steps use one unified spotlight ring - no per-item outlines */
.guided-tutorial-root--unified-spotlight .guided-tutorial-target-highlight {
  outline: none !important;
  z-index: auto;
}

.guided-tutorial-spotlight {
  position: fixed;
  border-radius: 10px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(99, 102, 241, 0.95),
    0 8px 32px rgba(0, 0, 0, 0.2);
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
  pointer-events: none;
  z-index: 1;
}

.guided-tutorial-spotlight--center {
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.45),
    0 8px 32px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  opacity: 0;
}

.guided-tutorial-popover {
  position: fixed;
  z-index: 2;
  width: min(380px, calc(100vw - 32px));
  max-width: min(380px, calc(100vw - 32px));
  background: var(--color-surface, #fff);
  color: var(--color-text, #1a1a2e);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

.guided-tutorial-popover--positioning {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

.guided-tutorial-root.is-visible .guided-tutorial-popover:not(.guided-tutorial-popover--positioning) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
}

.guided-tutorial-popover__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary, #64748b);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

.guided-tutorial-popover__close:hover {
  background: var(--color-surface-alt, #f1f5f9);
  color: var(--color-text, #1a1a2e);
}

.guided-tutorial-popover__close span {
  display: block;
  margin-top: -2px;
}

.guided-tutorial-popover__actions--waiting {
  justify-content: flex-start;
}

.guided-tutorial-popover__actions--waiting .guided-tutorial-popover__nav {
  margin-left: auto;
}

.guided-tutorial-popover__step {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #64748b);
  margin: 0 0 6px;
  padding-right: 24px;
}

.guided-tutorial-popover__title {
  font-family: Cinzel, serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.25;
  padding-right: 20px;
}

.guided-tutorial-popover__body {
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 14px;
  color: var(--color-text-secondary, #475569);
}

.guided-tutorial-popover__waiting {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-primary, #6366f1);
  margin: -6px 0 12px;
}

.guided-tutorial-popover__waiting i {
  animation: guided-tutorial-spin 1s linear infinite;
}

@keyframes guided-tutorial-spin {
  to { transform: rotate(360deg); }
}

.guided-tutorial-popover__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.guided-tutorial-popover__nav {
  display: flex;
  gap: 8px;
}

.guided-tutorial-btn {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.guided-tutorial-btn--primary {
  background: var(--color-primary, #6366f1);
  color: #fff;
}

.guided-tutorial-btn--primary:hover {
  filter: brightness(1.08);
}

.guided-tutorial-btn--ghost {
  background: transparent;
  color: var(--color-text-secondary, #64748b);
}

.guided-tutorial-btn--ghost:hover {
  color: var(--color-text, #1a1a2e);
}

.guided-tutorial-btn--secondary {
  background: var(--color-surface-alt, #f1f5f9);
  color: var(--color-text, #1a1a2e);
}

.guided-tutorial-unlock-modal {
  position: fixed;
  inset: 0;
  z-index: 23100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.65);
}

.guided-tutorial-unlock-card {
  max-width: 440px;
  width: 100%;
  background: var(--color-surface, #fff);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.guided-tutorial-unlock-card__icon {
  font-size: 42px;
  color: #f59e0b;
  margin-bottom: 12px;
}

.guided-tutorial-unlock-card h2 {
  font-family: Cinzel, serif;
  font-size: 22px;
  margin: 0 0 8px;
}

.guided-tutorial-unlock-card p {
  margin: 0 0 20px;
  color: var(--color-text-secondary, #64748b);
  font-size: 14px;
  line-height: 1.5;
}

.guided-tutorial-unlock-card__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .guided-tutorial-popover {
    max-width: min(340px, calc(100vw - 24px));
  }

  .guided-tutorial-spotlight {
    border-radius: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guided-tutorial-backdrop,
  .guided-tutorial-spotlight,
  .guided-tutorial-popover {
    transition: none;
  }

  .guided-tutorial-popover__waiting i {
    animation: none;
  }
}

body.guided-tutorial-restricted {
  user-select: none;
}

body.guided-tutorial-restricted .guided-tutorial-popover,
body.guided-tutorial-restricted .guided-tutorial-target-highlight,
body.guided-tutorial-restricted .guided-tutorial-target-highlight * {
  user-select: text;
}

/* Toasts and validation errors must appear above the tutorial layer (23000) */
body.guided-tutorial-active #toast-container {
  z-index: 23500;
}

.guided-tutorial-blocked {
  opacity: 0.45;
  cursor: not-allowed !important;
  pointer-events: auto;
}

input.guided-tutorial-blocked,
select.guided-tutorial-blocked,
textarea.guided-tutorial-blocked {
  pointer-events: none;
}

button.guided-tutorial-blocked,
input.guided-tutorial-blocked,
select.guided-tutorial-blocked,
textarea.guided-tutorial-blocked {
  opacity: 0.45;
  cursor: not-allowed !important;
}