/* FTUE guided-tooltip overlay — scrim + spotlight + tooltip + tap prompt.
   Logic + positioning live in game-client/ui/ftue/ftueTooltip.js; this
   file is the visual layer only. The palette/variables are the shared
   ones from ui/styles.css so the tooltip reads as the same parchment
   material as the modals. */

/* Full-screen, transparent layer. It owns the click ("tap to continue")
   and sits above everything including modals — though FTUE steps only
   fire on the play screen when no modal is open. Opacity transition gives
   a soft fade-in (the .ftue-overlay-visible class is added one frame after
   mount). */
.ftue-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.ftue-overlay.ftue-overlay-visible {
  opacity: 1;
}

/* Action mode: the overlay itself never captures clicks (so the player can
   use the highlighted control through the hole). The .ftue-blocker child
   does the selective blocking; the spotlight/tooltip stay pointer-events:
   none. */
.ftue-overlay-action {
  pointer-events: none;
  cursor: default;
}

/* Action-mode click-blocker. Transparent (the dim comes from the spotlight's
   box-shadow); pointer-events:auto so it swallows taps on the dimmed area.
   JS sets a clip-path that removes a rectangular hole over the target, so
   taps in the hole miss this layer and reach the highlighted control. */
.ftue-blocker {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: auto;
}

/* The spotlight cut-out. The element itself is transparent (the target
   shows through it); the enormous box-shadow paints the dark scrim across
   the rest of the screen. A gold ring draws the eye to the highlighted
   region. pointer-events:none so the tap falls through to the overlay. */
.ftue-spotlight {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(20, 14, 8, 0.8);
  border: 2px solid var(--gold);
  border-radius: 10px;
  pointer-events: none;
  /* Animate position/size when the overlay repositions on resize. */
  transition: opacity 0.18s ease;
}

/* The tooltip card — parchment surface matching the modals, positioned by
   JS beside the spotlight. Body text at the readable 1rem minimum. */
.ftue-tooltip {
  position: absolute;
  max-width: 17rem;
  box-sizing: border-box;
  background-color: var(--background-color-1);
  background-image: url('../../assets/backgrounds/background02.png');
  background-size: cover;
  background-position: center;
  border: 1px solid #c8b890;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(20, 14, 8, 0.45);
  padding: 0.85rem 1rem;
  font-family: var(--font-family-3);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--font-color-1);
  pointer-events: none;
}

/* "Tap to continue" — white, centered near the bottom, gently pulsing so
   it reads as a live prompt over the dimmed screen. */
.ftue-continue {
  position: absolute;
  /* Lifted well clear of the bottom edge — 2rem was getting eaten by the
     mobile browser's bottom chrome / home indicator. The safe-area inset
     pushes it above the iOS home bar on devices that report one. */
  bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-family: var(--font-family-2);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: ftue-continue-pulse 1.4s ease-in-out infinite;
}

@keyframes ftue-continue-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}