/* ==================== TUTORIAL OVERLAY ==================== */

/* Full-screen overlay — sits above everything except auth-loading */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.tutorial-overlay.active {
  pointer-events: auto;
}

/* Dim backdrop — covers entire viewport, click-through except on controls */
.tutorial-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  transition: opacity 0.4s ease;
  opacity: 0;
}

.tutorial-overlay.active .tutorial-backdrop {
  opacity: 1;
}

/* Highlighted element pokes through the dark backdrop via z-index */
.tutorial-highlight {
  position: relative;
  z-index: 100001 !important;
}

/* ==================== GHOST HAND ==================== */

.tutorial-ghost-hand {
  position: fixed;
  z-index: 100010;
  font-size: clamp(40px, 2.5rem + 1vw, 56px);
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  /* Centre the fingertip on the target */
  transform: translate(-50%, -20%);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
  transition: opacity 0.3s ease;
}

.tutorial-ghost-hand.visible {
  opacity: 1;
}

/* ── Ghost-hand animation keyframes ─────────────────────── */

/* Tap: descend onto target, press, release */
@keyframes ghost-tap {
  0%   { transform: translate(-50%, -80px) scale(1); opacity: 0; }
  25%  { transform: translate(-50%, -20%) scale(1); opacity: 0.75; }
  45%  { transform: translate(-50%, -20%) scale(0.85); opacity: 0.9; }
  60%  { transform: translate(-50%, -20%) scale(1); opacity: 0.75; }
  85%  { transform: translate(-50%, -20%) scale(1); opacity: 0.75; }
  100% { transform: translate(-50%, -20%) scale(1); opacity: 0; }
}

/* Swipe up: touch then drag upward */
@keyframes ghost-swipe-up {
  0%   { transform: translate(-50%, 0); opacity: 0; }
  15%  { transform: translate(-50%, 0); opacity: 0.75; }
  25%  { transform: translate(-50%, 0) scale(0.92); opacity: 0.8; }
  75%  { transform: translate(-50%, -180px) scale(0.92); opacity: 0.7; }
  90%  { transform: translate(-50%, -180px) scale(1); opacity: 0.3; }
  100% { transform: translate(-50%, -180px); opacity: 0; }
}

/* Swipe down: touch then drag downward */
@keyframes ghost-swipe-down {
  0%   { transform: translate(-50%, 0); opacity: 0; }
  15%  { transform: translate(-50%, 0); opacity: 0.75; }
  25%  { transform: translate(-50%, 0) scale(0.92); opacity: 0.8; }
  75%  { transform: translate(-50%, 180px) scale(0.92); opacity: 0.7; }
  90%  { transform: translate(-50%, 180px) scale(1); opacity: 0.3; }
  100% { transform: translate(-50%, 180px); opacity: 0; }
}

/* Swipe right: touch then drag rightward */
@keyframes ghost-swipe-right {
  0%   { transform: translate(-50%, -20%); opacity: 0; }
  15%  { transform: translate(-50%, -20%); opacity: 0.75; }
  25%  { transform: translate(-50%, -20%) scale(0.92); opacity: 0.8; }
  75%  { transform: translate(120px, -20%) scale(0.92); opacity: 0.7; }
  90%  { transform: translate(120px, -20%) scale(1); opacity: 0.3; }
  100% { transform: translate(120px, -20%); opacity: 0; }
}

/* Swipe left: touch then drag leftward */
@keyframes ghost-swipe-left {
  0%   { transform: translate(-50%, -20%); opacity: 0; }
  15%  { transform: translate(-50%, -20%); opacity: 0.75; }
  25%  { transform: translate(-50%, -20%) scale(0.92); opacity: 0.8; }
  75%  { transform: translate(-200px, -20%) scale(0.92); opacity: 0.7; }
  90%  { transform: translate(-200px, -20%) scale(1); opacity: 0.3; }
  100% { transform: translate(-200px, -20%); opacity: 0; }
}

/* Long press: hold down with expanding ripple */
@keyframes ghost-long-press {
  0%   { transform: translate(-50%, -80px) scale(1); opacity: 0; }
  15%  { transform: translate(-50%, -20%) scale(1); opacity: 0.75; }
  25%  { transform: translate(-50%, -20%) scale(0.88); opacity: 0.85; }
  70%  { transform: translate(-50%, -20%) scale(0.88); opacity: 0.85; }
  85%  { transform: translate(-50%, -20%) scale(1); opacity: 0.7; }
  100% { transform: translate(-50%, -20%) scale(1); opacity: 0; }
}

/* Scroll: hand drags downward gently (simulating finger-scroll) */
@keyframes ghost-scroll {
  0%   { transform: translate(-50%, -20%); opacity: 0; }
  10%  { transform: translate(-50%, -20%); opacity: 0.75; }
  20%  { transform: translate(-50%, -20%) scale(0.94); opacity: 0.8; }
  60%  { transform: translate(-50%, calc(-20% + 100px)) scale(0.94); opacity: 0.7; }
  70%  { transform: translate(-50%, calc(-20% + 100px)) scale(1); opacity: 0.5; }
  80%  { transform: translate(-50%, calc(-20% + 100px)); opacity: 0.3; }
  100% { transform: translate(-50%, calc(-20% + 100px)); opacity: 0; }
}

/* Point: hand appears and gently hovers (no press) */
@keyframes ghost-point {
  0%   { transform: translate(-50%, -60px) scale(1); opacity: 0; }
  30%  { transform: translate(-50%, -20%) scale(1); opacity: 0.7; }
  70%  { transform: translate(-50%, -20%) scale(1); opacity: 0.7; }
  100% { transform: translate(-50%, -20%) scale(1); opacity: 0; }
}

/* Tap-zone: hand taps a specific zone of the card (RHS / LHS) */
@keyframes ghost-tap-zone {
  0%   { transform: translate(0, -60px) scale(1); opacity: 0; }
  25%  { transform: translate(0, 0) scale(1); opacity: 0.75; }
  45%  { transform: translate(0, 0) scale(0.85); opacity: 0.9; }
  60%  { transform: translate(0, 0) scale(1); opacity: 0.75; }
  85%  { transform: translate(0, 0) scale(1); opacity: 0.75; }
  100% { transform: translate(0, 0) scale(1); opacity: 0; }
}

/* Animation class application */
.tutorial-ghost-hand.anim-tap          { animation: ghost-tap 1.2s ease infinite; }
.tutorial-ghost-hand.anim-swipe-up     { animation: ghost-swipe-up 1.4s ease infinite; }
.tutorial-ghost-hand.anim-swipe-down   { animation: ghost-swipe-down 1.4s ease infinite; }
.tutorial-ghost-hand.anim-swipe-right  { animation: ghost-swipe-right 1.4s ease infinite; }
.tutorial-ghost-hand.anim-swipe-left   { animation: ghost-swipe-left 1.4s ease infinite; }
.tutorial-ghost-hand.anim-long-press   { animation: ghost-long-press 2s ease infinite; }
.tutorial-ghost-hand.anim-scroll       { animation: ghost-scroll 2s ease infinite; }
.tutorial-ghost-hand.anim-point        { animation: ghost-point 2.5s ease infinite; }
.tutorial-ghost-hand.anim-tap-zone     { animation: ghost-tap-zone 1.2s ease infinite; }

/* ==================== TOOLTIP ==================== */

.tutorial-tooltip {
  position: fixed;
  z-index: 100020;
  left: 50%;
  transform: translateX(-50%);
  /* Match preview card dimensions exactly */
  width: calc(100% - 24px);
  max-width: 680px;
  min-height: clamp(140px, 25vh, 220px);
  box-sizing: border-box;
  padding: clamp(24px, 1.5rem + 1.5vw, 40px) clamp(28px, 1.75rem + 1.5vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(17, 19, 23, 0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--card-radius, clamp(14px, 0.875rem + 0.5vw, 20px));
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  text-align: center;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: auto;
}

.tutorial-tooltip.visible {
  opacity: 1;
}

.tutorial-tooltip-text {
  color: rgba(255, 255, 255, 0.92);
  font: 500 clamp(1.1rem, 1rem + 0.5vw, 1.35rem) / 1.45 system-ui, -apple-system, sans-serif;
  margin: 0 0 clamp(16px, 1rem + 0.5vw, 24px) 0;
}

/* Welcome screen text — needs extra brightness against the dark overlay */
.tutorial-tooltip-text.welcome {
  color: #fff;
  font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

/* ── Progress dots ─────────────────────────────────────── */

.tutorial-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.tutorial-dots {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
}

.tutorial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.3s ease, transform 0.3s ease;
}

.tutorial-dot.active {
  background: rgba(99, 102, 241, 0.9);
  transform: scale(1.3);
}

.tutorial-dot.done {
  background: rgba(74, 222, 128, 0.7);
}

/* ── Skip button ───────────────────────────────────────── */

.tutorial-skip {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  font: 500 clamp(0.85rem, 0.8rem + 0.25vw, 1rem) / 1 system-ui, -apple-system, sans-serif;
  padding: 10px 20px;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.tutorial-skip:hover,
.tutorial-skip:active {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
}

/* ── Button group (Next + Skip) ────────────────────────── */

.tutorial-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.tutorial-next {
  background: rgba(99, 102, 241, 0.25);
  border: 1px solid rgba(99, 102, 241, 0.5);
  color: rgba(255, 255, 255, 0.92);
  font: 600 clamp(0.85rem, 0.8rem + 0.25vw, 1rem) / 1 system-ui, -apple-system, sans-serif;
  padding: 10px 22px;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.tutorial-next:hover,
.tutorial-next:active {
  background: rgba(99, 102, 241, 0.4);
  border-color: rgba(99, 102, 241, 0.7);
}

/* ==================== WELCOME SPLASH ==================== */

.tutorial-welcome {
  position: fixed;
  inset: 0;
  z-index: 100030;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 0.875rem + 0.5vw, 24px);
  background: rgba(10, 11, 14, 0.88);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: auto;
  cursor: pointer;
}

.tutorial-welcome.visible {
  opacity: 1;
}

.tutorial-welcome-logo {
  width: clamp(56px, 3.5rem + 1.5vw, 80px);
  height: clamp(56px, 3.5rem + 1.5vw, 80px);
  animation: tutorial-logo-bloom 1s ease forwards;
}

@keyframes tutorial-logo-bloom {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.tutorial-welcome-title {
  color: rgba(255, 255, 255, 0.9);
  font: 600 clamp(1.2rem, 1rem + 0.6vw, 1.6rem) / 1.3 system-ui, -apple-system, sans-serif;
  text-align: center;
  animation: tutorial-text-fade 0.8s ease 0.3s both;
}

.tutorial-welcome-sub {
  color: rgba(255, 255, 255, 0.55);
  font: 400 clamp(0.8rem, 0.75rem + 0.25vw, 0.95rem) / 1.4 system-ui, -apple-system, sans-serif;
  text-align: center;
  animation: tutorial-text-fade 0.8s ease 0.6s both;
}

@keyframes tutorial-text-fade {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==================== COMPLETION SCREEN ==================== */

.tutorial-complete {
  position: fixed;
  inset: 0;
  z-index: 100030;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 0.875rem + 0.5vw, 24px);
  background: rgba(10, 11, 14, 0.88);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: auto;
  cursor: pointer;
}

.tutorial-complete.visible {
  opacity: 1;
}

.tutorial-complete-text {
  color: rgba(255, 255, 255, 0.9);
  font: 600 clamp(1.2rem, 1rem + 0.6vw, 1.6rem) / 1.3 system-ui, -apple-system, sans-serif;
  text-align: center;
}

.tutorial-complete-sub {
  color: rgba(255, 255, 255, 0.55);
  font: 400 clamp(0.85rem, 0.8rem + 0.25vw, 1rem) / 1.4 system-ui, -apple-system, sans-serif;
  text-align: center;
}

/* Confetti particles for completion */
.tutorial-confetti {
  position: fixed;
  inset: 0;
  z-index: 100035;
  pointer-events: none;
  overflow: hidden;
}

.tutorial-confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: tutorial-confetti-fall 2s ease forwards;
}

@keyframes tutorial-confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ==================== TAP-ZONE INDICATORS ==================== */

/* Flash indicators for L/R tap zones on expanded card */
.tutorial-zone-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 100002;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutorial-zone-indicator.left {
  left: 0;
  justify-content: flex-start;
  padding-left: clamp(12px, 0.75rem + 0.5vw, 20px);
  background: linear-gradient(90deg, rgba(248, 113, 113, 0.12) 0%, transparent 100%);
}

.tutorial-zone-indicator.right {
  right: 0;
  justify-content: flex-end;
  padding-right: clamp(12px, 0.75rem + 0.5vw, 20px);
  background: linear-gradient(-90deg, rgba(74, 222, 128, 0.12) 0%, transparent 100%);
}

/* "○ Open" indicator — top-center of a preview card, between Greek badge & brain */
.tutorial-zone-indicator.open-hint {
  left: 0;
  width: 100%;
  top: 0;
  bottom: auto;
  height: auto;
  padding: 20px 0 0;
  justify-content: center;
  background: none;
}

.tutorial-zone-indicator.flash {
  opacity: 1;
}

.tutorial-zone-label {
  color: rgba(255, 255, 255, 0.95);
  font: 600 clamp(0.85rem, 0.8rem + 0.3vw, 1.1rem) / 1 system-ui, -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.65);
  padding: 6px 14px;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: tutorial-zone-breathe 1.8s ease-in-out infinite;
}

@keyframes tutorial-zone-breathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* ==================== PRACTICE PROMPT (Phase 2) ==================== */

/* Pulsing "Now you try!" text so user knows it's their turn */
.tutorial-practice-prompt {
  color: rgba(74, 222, 128, 0.95) !important;
  animation: tutorial-practice-pulse 1.6s ease-in-out infinite;
}

@keyframes tutorial-practice-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

/* ==================== REDUCED MOTION ==================== */

@media (prefers-reduced-motion: reduce) {
  .tutorial-ghost-hand {
    display: none !important;
  }

  .tutorial-tooltip {
    transition: opacity 0.15s ease;
  }

  .tutorial-welcome-logo {
    animation: none;
    opacity: 1;
  }

  .tutorial-welcome-title,
  .tutorial-welcome-sub {
    animation: none;
    opacity: 1;
  }

  .tutorial-practice-prompt {
    animation: none;
  }
}