/* PoodleBoards host overlay — single Puzzle feedback owner (MAX-161).
   Saved Game analysis juice, chess.com-timed to the piece: wash is visible
   the instant the piece lands (no fade-in delay), badge springs immediately,
   overlay is removed when the piece leaves the square. best/miss share the
   spring; only color and icon differ. No board-wide wash, no shake, no
   brilliant spark. */

.poodle-board-host,
.cg-host {
  position: relative;
}

.poodle-host-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.ph-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: inherit;
}

.ph-flash.ph-solved {
  background: rgba(30, 201, 125, 0.28);
  box-shadow: inset 0 0 0 3px rgba(16, 185, 129, 0.55);
  animation: phFlashGreen 0.42s ease-out forwards;
}

.ph-flash.ph-wrong {
  background: rgba(224, 87, 76, 0.42);
  box-shadow: inset 0 0 0 3px rgba(224, 49, 49, 0.72);
  animation: phFlashRed 0.5s ease-out forwards;
}

.ph-flash.ph-instant {
  animation: none;
  opacity: 1;
  transition: opacity 0.25s ease-out;
}

@keyframes phFlashGreen {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes phFlashRed {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

.ph-shake {
  animation: phShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes phShake {
  10%, 90% { transform: translate3d(-4px, 0, 0); }
  20%, 80% { transform: translate3d(6px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-8px, 0, 0); }
  40%, 60% { transform: translate3d(8px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.ph-square-pulse {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
}

.ph-square-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--badge-color, transparent);
  opacity: 0.24;
  animation: squareWash .28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}

.ph-square-pulse.ph-correct { --badge-color: #1ec97d; }
.ph-square-pulse.ph-wrong { --badge-color: #f23a2c; }

@keyframes squareWash {
  0%   { opacity: 0.24; }
  100% { opacity: 0.09; }
}

.ph-move-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.5), rgba(255,255,255,0) 55%),
    var(--badge-bg, #1ec97d);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.4),
    0 0 0 2px rgba(255,255,255,0.92);
  z-index: 30;
  pointer-events: none;
  opacity: 1;
  transform: scale(1);
  animation: badgeSpring .12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: center;
}

.ph-move-badge.ph-best { --badge-bg: #1ec97d; }
.ph-move-badge.ph-miss { --badge-bg: #f23a2c; }

.ph-move-badge svg {
  width: 58%;
  height: 58%;
  display: block;
}

@keyframes badgeSpring {
  0%   { opacity: 1; transform: scale(0.72); }
  100% { opacity: 1; transform: scale(1); }
}

.ph-square-pulse.ph-instant::before {
  animation: none;
  opacity: 0.24;
}

.ph-move-badge.ph-instant {
  animation: none;
  opacity: 1;
  transform: scale(1);
}

.ph-floats {
  position: absolute;
  inset: 0;
}

.ph-float {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 3px 10px;
  border-radius: 999px;
  font: 700 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap;
  color: #fff;
  background: rgba(20, 24, 30, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.25);
  opacity: 0;
}

.ph-float.ph-gain {
  background: rgba(18, 122, 74, 0.94);
  border-color: rgba(255, 255, 255, 0.35);
}

.ph-float.ph-hint {
  background: rgba(30, 90, 160, 0.94);
}

.ph-float.ph-rise {
  animation: phRise 1.5s ease-out forwards;
}

.ph-float.ph-instant {
  animation: none;
  opacity: 1;
}

@keyframes phRise {
  0% { opacity: 0; margin-top: 10px; }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; margin-top: -34px; }
}

.ph-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ph-engine-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 61;
  padding: 2px 8px;
  border-radius: 999px;
  font: 600 11px/1.5 system-ui, sans-serif;
  color: #fff;
  background: rgba(20, 24, 30, 0.75);
  pointer-events: none;
}

/* Engine switch (Classic | Chessground) — works inside the board-settings
   menu and the compact Storm/Daily tool rows. */
.ph-engine-switch {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(128, 128, 128, 0.14);
}

.ph-engine-option {
  border: 0;
  border-radius: 6px;
  padding: 4px 10px;
  font: 600 12px/1.4 system-ui, sans-serif;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.ph-engine-option.is-on {
  background: rgba(255, 255, 255, 0.9);
  color: #111;
}

.ph-engine-option:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .ph-flash.ph-solved,
  .ph-flash.ph-wrong {
    animation: none;
    opacity: 0.55;
  }
  .ph-shake {
    animation: none;
  }
  .ph-square-pulse.ph-correct::before,
  .ph-square-pulse.ph-wrong::before {
    animation: none;
    opacity: 0.24;
    transform: none;
  }
  .ph-move-badge {
    animation: none;
    opacity: 1;
    transform: scale(1);
  }
  .ph-float.ph-rise {
    animation: none;
    opacity: 1;
  }
}