/* Tutorial system styles */
.tutorial-callout {
  position: fixed;
  background: linear-gradient(135deg, #0f0f1a 0%, #1a0f2e 100%);
  border: 2px solid #4a9eff;
  border-radius: 8px;
  padding: 16px;
  max-width: 320px;
  z-index: 1500;
  box-shadow: 0 0 30px rgba(74, 158, 255, 0.4), inset 0 0 15px rgba(74, 158, 255, 0.1);
  animation: tutorial-slide-in 0.3s ease-out;
}

.tutorial-callout::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #0f0f1a 0%, #1a0f2e 100%);
  border: 2px solid #4a9eff;
  border-right: none;
  border-bottom: none;
  transform: rotate(45deg);
  pointer-events: none;
}

/* Position the pointer based on data-position attribute */
.tutorial-callout[data-position="top"]::before {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.tutorial-callout[data-position="bottom"]::before {
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(-135deg);
}

.tutorial-callout[data-position="left"]::before {
  right: -8px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.tutorial-callout[data-position="right"]::before {
  left: -8px;
  top: 50%;
  transform: translateY(-50%) rotate(135deg);
}

.tutorial-overlay-callout {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 400px;
  z-index: 1500;
}

.tutorial-overlay-callout::before {
  display: none;
}

.tutorial-callout-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tutorial-callout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.tutorial-callout-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #64c8ff;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0;
}

/* controls/close/progress removed — no skip/navigation inside callout */

/* Highlight effect for tutorial targets */
.tutorial-highlight {
  position: relative;
  z-index: 100;
  /* Strong, rapid multi-hue pulse: border color shifts and inner/outer glow expands/contracts */
  animation: tutorial-highlight-pulse 1.2s ease-in-out infinite;
  border: 2px solid rgba(255,255,255,0.06);
  box-shadow:
    0 0 6px rgba(255,255,255,0.06),
    0 0 18px rgba(255,255,255,0.04) !important;
  /* keep pointer-events so highlighted element remains interactive */
}

@keyframes tutorial-highlight-pulse {
  0% {
    border-color: hsla(200,90%,65%,0.95);
    box-shadow:
      0 0 6px hsla(200,90%,60%,0.45),
      0 0 22px hsla(320,90%,60%,0.12),
      inset 0 0 8px hsla(40,90%,65%,0.06);
    transform: translateZ(0) scale(1);
  }
  50% {
    border-color: hsla(40,95%,70%,0.98);
    box-shadow:
      0 0 14px hsla(40,95%,66%,0.75),
      0 0 36px hsla(120,85%,60%,0.18),
      inset 0 0 18px hsla(260,85%,66%,0.09);
    transform: translateZ(0) scale(1.02);
  }
  100% {
    border-color: hsla(320,90%,65%,0.95);
    box-shadow:
      0 0 6px hsla(320,90%,60%,0.45),
      0 0 22px hsla(200,90%,60%,0.12),
      inset 0 0 8px hsla(40,90%,65%,0.06);
    transform: translateZ(0) scale(1);
  }
}

@keyframes tutorial-slide-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .tutorial-callout {
    max-width: 280px;
    padding: 12px;
  }

  .tutorial-callout-header h3 {
    font-size: 14px;
  }

  .tutorial-callout p {
    font-size: 12px;
  }

  .tutorial-overlay-callout {
    max-width: 90vw;
  }
}

/* Tutorial UI lock states */

/* Generic lock mixin for common components */
.tutorial-locked-component {
  pointer-events: none;
  opacity: 0.4;
}

/* Lock set 1: Lock Fusion Creation and Equipped Spells. Keep Element Selection open (Steps 0, 1, 6/7). */
.tutorial-lock-to-elements #fusion-builder,
.tutorial-lock-to-elements #fusion-panel,
.tutorial-lock-to-elements #equipped-spells,
.tutorial-lock-to-elements #hud,
.tutorial-lock-to-elements-details #fusion-builder,
.tutorial-lock-to-elements-details #fusion-panel,
.tutorial-lock-to-elements-details #equipped-spells,
.tutorial-lock-to-elements-details #hud,
.tutorial-lock-to-fusion-full #equipped-spells,
.tutorial-lock-to-fusion-full #hud {
  pointer-events: none;
  opacity: 0.4;
}

/* Lock set 2: Lock Element Selection and Equipped Spells. Keep Fusion Preview open (Step 2/3). */
.tutorial-lock-to-fusion-preview #equipped-spells,
.tutorial-lock-to-fusion-preview #hud {
  pointer-events: none;
  opacity: 0.4;
}

/* Lock set 3: Lock Element Selection and Fusion Creation. Keep Equipped Spells open (Steps 3/4, 7/8). */
.tutorial-lock-to-equipped #elements-library,
.tutorial-lock-to-equipped #element-details-panel,
.tutorial-lock-to-equipped #fusion-builder,
.tutorial-lock-to-equipped #fusion-panel,
.tutorial-lock-to-equipped #hud {
  pointer-events: none;
  opacity: 0.4;
}

/* Lock set 4: Lock everything but Wave Start Button (Step 4/5) */
.tutorial-lock-to-wave #elements-library,
.tutorial-lock-to-wave #element-details-panel,
.tutorial-lock-to-wave #fusion-builder,
.tutorial-lock-to-wave #fusion-panel,
.tutorial-lock-to-wave #equipped-spells {
  pointer-events: none;
  opacity: 0.4;
}

/* Lock set 5: Lock everything but Reward UI (Step 5/6) */
.tutorial-lock-to-reward #fusion-ui,
.tutorial-lock-to-reward #equipped-spells,
.tutorial-lock-to-reward #canvas-and-spells {
  pointer-events: none;
  opacity: 0.4;
}

/* Step 7 specific: disable create button unless exactly 2 elements */
.tutorial-lock-to-fusion-full .fusion-preview-create {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.tutorial-lock-to-fusion-full .fusion-preview-create.enabled-for-two-elements {
  pointer-events: auto;
  opacity: 1;
  cursor: pointer;
}

/* When the inventory selector/modal is open, hide tutorial callouts so they don't obscure the modal. */
.inventory-modal-open .tutorial-callout {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}