/* Tutorial Overlay and Tooltip Styles */

/* Main overlay - covers entire viewport */
.tutorial-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(46, 32, 22, 0.75);
     z-index: var(--z-modal-high);
     pointer-events: auto;
}

/* Spotlight cutout for highlighting elements */
.tutorial-spotlight {
     position: fixed;
     border-radius: var(--radius-lg);
     box-shadow: 0 0 0 9999px rgba(46, 32, 22, 0.75);
     pointer-events: none;
     z-index: var(--z-modal-high);
     transition: all var(--duration-base) ease;
}

/* Tooltip container */
.tutorial-tooltip {
     position: fixed;
     background: var(--storybook-cream);
     border: var(--border-width-lg) solid var(--storybook-gold-muted);
     border-radius: var(--radius-2xl);
     padding: var(--space-xl);
     max-width: 320px;
     width: 90%;
     box-shadow: var(--shadow-3xl), var(--shadow-inset-sm);
     background-image: var(--card-back-svg);
     z-index: calc(var(--z-modal-high) + 1);
     font-family: var(--font-family);
}

/* Tooltip text */
.tutorial-text {
     margin: 0 0 var(--space-lg) 0;
     color: var(--storybook-brown-deep);
     font-size: var(--font-md);
     line-height: 1.5;
     text-align: center;
}

/* Button container */
.tutorial-buttons {
     display: flex;
     justify-content: center;
     gap: var(--space-md);
     flex-wrap: wrap;
}

/* Base button styles */
.tutorial-tooltip button {
     padding: var(--space-sm) var(--space-lg);
     border-radius: var(--radius-lg);
     font-family: var(--font-family);
     font-size: var(--font-base);
     cursor: pointer;
     transition: all var(--duration-base) ease;
     min-width: 100px;
}

/* Skip button - subdued style */
.tutorial-skip {
     background: var(--storybook-parchment-dark);
     border: var(--border-width-md) solid var(--storybook-ink-faded);
     color: var(--storybook-ink-faded);
}

.tutorial-skip:hover,
.tutorial-skip:focus {
     background: var(--storybook-parchment-light);
     border-color: var(--storybook-brown-medium);
     color: var(--storybook-brown-medium);
}

/* Next button - prominent style */
.tutorial-next {
     background: linear-gradient(to bottom, var(--storybook-gold-highlight), var(--storybook-gold-muted));
     border: var(--border-width-md) solid var(--storybook-gold-rich);
     color: var(--storybook-brown-deep);
     font-weight: bold;
}

.tutorial-next:hover,
.tutorial-next:focus {
     background: linear-gradient(to bottom, #ffe7a0, var(--storybook-gold-highlight));
     box-shadow: var(--shadow-lg);
     transform: translateY(-1px);
}

/* Focus outline for accessibility */
.tutorial-tooltip button:focus {
     outline: 3px solid var(--storybook-gold-highlight);
     outline-offset: 2px;
}

/* Progress indicator */
.tutorial-progress {
     margin-top: var(--space-md);
     text-align: center;
     color: var(--storybook-ink-faded);
     font-size: var(--font-sm);
}

/* Highlight class for targeted elements */
.tutorial-highlight {
     position: relative;
     z-index: calc(var(--z-modal-high) + 2);
     pointer-events: auto;
     animation: tutorial-pulse 1.5s ease-in-out infinite;
}

/* Pulsing animation for highlighted elements */
@keyframes tutorial-pulse {
     0%, 100% {
          box-shadow:
               0 0 0 0 rgba(255, 215, 0, 0.7),
               0 0 10px 3px rgba(255, 215, 0, 0.4);
     }
     50% {
          box-shadow:
               0 0 0 8px rgba(255, 215, 0, 0),
               0 0 20px 6px rgba(255, 215, 0, 0.6);
     }
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
     .tutorial-tooltip {
          padding: var(--space-lg);
          max-width: 280px;
     }

     .tutorial-text {
          font-size: var(--font-base);
     }

     .tutorial-buttons {
          flex-direction: column;
     }

     .tutorial-tooltip button {
          width: 100%;
     }
}

/* Smaller screens */
@media (max-width: 360px) {
     .tutorial-tooltip {
          padding: var(--space-md);
          max-width: 260px;
     }

     .tutorial-text {
          font-size: var(--font-sm);
     }
}