/* frontend/hint-arrow.css — THE STANDARD "LOOK HERE" HINT (HintArrow, hint-arrow.js). Born in TriGammon's
 * first-run card (2026-09-22 .482–.485), lifted out so every game points at things the same way.
 * docs/ui-components.md is the reference: read it before pointing at something.
 *
 * Two parts, both CHILDREN that HintArrow.point() appends to the target (so they never touch its own
 * box-shadow, ::before or ::after):
 *   · .ha-arrow — a bobbing arrow beside the target, pointing AT it, that SQUASHES where it lands (wide + short)
 *     and STRETCHES on the way back (thin + tall). data-dir = the way it points: up (it sits BELOW the target),
 *     down (above), left (to the right), right (to the left).
 *   · .ha-ring — an optional breathing ring around the target, following its border-radius.
 *
 * ── Colour is a knob ─────────────────────────────────────────────────────────
 * --ha-color / --ha-glow, set on the target or any ancestor (a game points them at its own tokens; TriGammon uses
 * its --tg-sel / --tg-selGlow, so Arcade follows). Default: Predicely gold — a FALLBACK inside var(), never set on the
 * target, or it would shadow an ancestor's choice. --ha-size scales the arrow (1 = 16×22).
 *
 * ⛔ The target must not clip its children (overflow: hidden) — point at a wrapper instead. hint-arrow.js warns.
 * ⛔ Every keyframe of a box-shadow animation has the SAME layer count, or it flips on/off instead of fading
 *   (the TriGammon .475 lesson).
 */

/* the arrow: an outer box placed + turned toward the target, an inner shape that bobs in its own frame
   ("up" = toward the target; the bob moves away and back) */
.ha-arrow { --ha-w: calc(16px * var(--ha-size, 1)); --ha-h: calc(22px * var(--ha-size, 1)); --ha-gap: 6px;
  position: absolute; width: var(--ha-w); height: var(--ha-h); z-index: 90; pointer-events: none; }
.ha-arrow[data-dir="up"] { left: 50%; top: calc(100% + var(--ha-gap)); margin-left: calc(var(--ha-w) / -2); }
.ha-arrow[data-dir="down"] { left: 50%; bottom: calc(100% + var(--ha-gap)); margin-left: calc(var(--ha-w) / -2); transform: rotate(180deg); }
/* turned 90°, the box's footprint is h wide × w tall around its centre: shift by (h − w) / 2 so the GAP holds */
.ha-arrow[data-dir="left"] { top: 50%; left: calc(100% + var(--ha-gap) + (var(--ha-h) - var(--ha-w)) / 2); margin-top: calc(var(--ha-h) / -2); transform: rotate(-90deg); }
.ha-arrow[data-dir="right"] { top: 50%; right: calc(100% + var(--ha-gap) + (var(--ha-h) - var(--ha-w)) / 2); margin-top: calc(var(--ha-h) / -2); transform: rotate(90deg); }
.ha-arrow i { position: absolute; inset: 0; display: block; background: var(--ha-color, #e8c15a);
  clip-path: polygon(50% 0, 100% 46%, 66% 46%, 66% 100%, 34% 100%, 34% 46%, 0 46%);
  filter: drop-shadow(0 0 6px var(--ha-glow, rgba(232, 193, 90, .55))); transform-origin: 50% 100%; animation: ha-bob 1.1s ease-in-out infinite; }
/* the bob SQUASHES and STRETCHES (owner, 2026-09-22): wide + short where it lands, thin + tall on the way back,
   settling next to the target — pivoting on its base, so the squash sits on the floor of the bounce */
@keyframes ha-bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  38% { transform: translateY(5px) scale(.96, 1.05); }
  50% { transform: translateY(6px) scale(1.24, .78); }
  68% { transform: translateY(1px) scale(.84, 1.18); }
  84% { transform: translateY(-1px) scale(1.04, .97); }
}

/* the ring: a breathing outline just outside the target, same corners */
.ha-ring { position: absolute; inset: 0; border-radius: inherit; z-index: 89; pointer-events: none;
  box-shadow: 0 0 0 2px var(--ha-color, #e8c15a), 0 0 12px var(--ha-glow, rgba(232, 193, 90, .55)); animation: ha-breathe 1.6s ease-in-out infinite; }
@keyframes ha-breathe {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--ha-color, #e8c15a), 0 0 4px rgba(0, 0, 0, 0); }
  50% { box-shadow: 0 0 0 3px var(--ha-color, #e8c15a), 0 0 16px var(--ha-glow, rgba(232, 193, 90, .55)); }
}

@media (prefers-reduced-motion: reduce) {
  .ha-arrow i, .ha-ring { animation: none; }   /* still there, held still */
}