/* ==========================================================================
   tutorial.css — first-run coach overlay (Start Tutorial)
   Same z-index tier as .deck-hint (css/layout.css): above the board, below the
   open header dropdown (70) and the modal overlay (100). The dropdown drops
   down over the deck area, so it has to outrank a highlighted deck and this
   coach panel or it gets painted through (issue #124).
   ========================================================================== */

/* A pulsing bloom, never a second edge. The old treatment drew a solid accent
   outline around the target, which on a hand slot sat directly outside the
   slot's own border and read as a doubled border — most obviously with
   Beginner Assistance on, where the slot already carries a green validity
   border (issue #88). A pulse says "look here" without adding an edge, and it
   is now the treatment for every target in every mode.

   `.tutorial-target` itself declares NO animation, and that is load-bearing.
   `animation` is a shorthand: a declaration here would REPLACE whatever the game
   is animating on the same element, not merge with it. tutorial.css loads after
   animations.css at equal specificity, so a highlighted hand slot that then
   completed resolved to the infinite `tutorialTargetPulse` instead of
   `handClear` — `animationend` never fired, and `clickToPlace` awaits exactly
   that event before calling `setState`, so the board froze mid-completion: hand
   uncleared, card still on the pile, counters stuck. Nor can it be undone with
   an `animation: none` override here, which is *more* specific than
   `.animate-hand-clear` and silences it just the same.

   So the pulse is declared per target type below, and never on the element when
   the game animates that element. Adding a new anchor means adding a rule here;
   if the game animates it, put the pulse on a pseudo-element. */
.tutorial-target {
  position: relative;
  z-index: 65;
}

@keyframes tutorialTargetPulse {
  0%, 100% { box-shadow: 0 0 4px 0 color-mix(in srgb, var(--color-accent) 30%, transparent); }
  50%      { box-shadow: 0 0 16px 3px color-mix(in srgb, var(--color-accent) 60%, transparent); }
}

/* Hand slot and draw pile — the targets the game animates itself (`handClear`,
   `glowPulse`, the bust fan). The pulse rides `::before`, which leaves the
   element's own `animation` free. Both are already `position: relative`, and
   `::before` is unused on both (`.hand-slot:empty::after` and
   `.draw-pile--empty::after` are the other pseudo). */
.tutorial-target.hand-slot::before,
.tutorial-target.draw-pile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: tutorialTargetPulse 1.6s ease-in-out infinite;
}

/* The burn pile is a bare column — a card-sized slot with the allowance pips
   below it and nothing around them. Pulsing the CONTAINER would draw a glowing
   rectangle around the group, including the empty gap between the card and the
   pips, which highlights the layout rather than the thing to act on. The glow
   goes on the pile itself and on each pip individually instead: both are what the
   step is teaching, and both are what the player will watch change. */
.tutorial-target.burn-pile-container .burn-pile-slot,
.tutorial-target.burn-pile-container .burn-pip {
  animation: tutorialTargetPulse 1.6s ease-in-out infinite;
}

/* Staggered so the pips read as three separate counters rather than one bar. */
.tutorial-target.burn-pile-container .burn-pip:nth-child(2) { animation-delay: 160ms; }
.tutorial-target.burn-pile-container .burn-pip:nth-child(3) { animation-delay: 320ms; }

/* The deck carries a layered stacked-card box-shadow of its own, so animating
   `box-shadow` there would flatten the stack illusion while highlighted.
   `filter` leaves those shadows intact, so the deck pulses in its own border
   colour instead. */
.tutorial-target.game-deck {
  animation: tutorialDeckPulse 1.6s ease-in-out infinite;
}

@keyframes tutorialDeckPulse {
  0%, 100% { filter: drop-shadow(0 0 2px var(--deck-border)); }
  50%      { filter: drop-shadow(0 0 10px var(--deck-border)); }
}

/* Renders IN FLOW inside #score-toast-slot — the strip between the deck row and
   the hands. That is what makes a scrollbar impossible: the panel is whatever
   height its two rows need and the strip grows to hold it, so there is never a
   cap to overflow. It also cannot cover the deck or the hands, because it is
   their sibling rather than an overlay above them — issue #113 was that
   guarantee being a check that could fail.

   The strip is shared with score and penalty toasts; tutorialCoach.js claims it
   for the panel's lifetime so the two can never be on screen at once.

   Row 1: step counter, title and Skip. Row 2: the instruction. Neither the
   counter nor Skip costs a line of its own. */
.tutorial-coach {
  width: 100%;
  box-sizing: border-box;
  padding: 10px var(--space-3, 12px);
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-radius: 12px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-modal-content) 72%, var(--color-accent) 8%),
    var(--bg-modal-content));
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4),
              0 0 18px color-mix(in srgb, var(--color-accent) 16%, transparent);
  /* The strip is pointer-events: none so it can never swallow a placement
     click. Skip has to be clickable, so the panel opts back in. */
  pointer-events: auto;
  text-align: left;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tutorial-coach__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 8px);
}

.tutorial-coach__head .tutorial-coach__title { flex: 1; min-width: 0; }

@media (max-width: 480px) {
  .tutorial-coach { padding: 8px 10px; border-radius: 10px; }
  .tutorial-coach__title { font-size: 0.86rem; }
  .tutorial-coach__body { font-size: 0.74rem; }
}

.tutorial-coach--gone {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* The panel itself does NOT glow, and there is no `--linked` modifier any more.
   It used to pulse in the same accent, on the same 1.6s cycle, as
   `.tutorial-target` — the pair reading as "this box is talking about that
   thing", which is how the arrows removed in issue #113 were replaced. In
   practice two things throbbing at once is one too many, and the panel is the
   half that never needs acting on (issue #144). The glow is now reserved for
   where the action is: the deck on step 1, a hand on step 2, the burn pile on
   step 3, and the draw pile plus the hands already started while the Joker mark
   is up (coachMarks.js — a Joker cannot go on an empty hand). What ties
   the panel to them is its static accent border and drop shadow (above) — the
   same accent the target pulses in. */

.tutorial-coach__step {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.85;
  white-space: nowrap;
}

.tutorial-coach__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.tutorial-coach__body {
  margin: 4px 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-primary);
  opacity: 0.82;
}

.tutorial-coach__dismiss {
  display: block;
  margin: 8px 0 0;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.6875rem; /* 11px */
  color: var(--color-accent-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.tutorial-coach__dismiss:hover,
.tutorial-coach__dismiss:focus-visible {
  color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  /* Steady bloom instead of a pulse — still a highlight, still not a second
     edge, so the target stays identifiable without motion. Each rule silences
     the same layer that carries the pulse above, never a different one: on a
     hand slot the bloom stays on `::before`, because putting it back on the
     element would fight `handClear`'s own box-shadow for the 400ms it plays. */
  .tutorial-target.hand-slot::before,
  .tutorial-target.draw-pile::before {
    animation: none;
    box-shadow: 0 0 12px 2px color-mix(in srgb, var(--color-accent) 45%, transparent);
  }

  .tutorial-target.burn-pile-container .burn-pile-slot,
  .tutorial-target.burn-pile-container .burn-pip {
    animation: none;
    box-shadow: 0 0 12px 2px color-mix(in srgb, var(--color-accent) 45%, transparent);
  }

  .tutorial-target.game-deck {
    animation: none;
    box-shadow: none;
    filter: drop-shadow(0 0 6px var(--deck-border));
  }
}