/* Phase 5 -- state outline icons (StateFace sprite). Tokens from confirm-modal.css island-glass. */
.jwh-state-icon {
  display: inline-block;
  width: 56px;
  height: 56px;
  fill: none;
  stroke: var(--ig-gold, #FED100);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  overflow: visible;
}
.jwh-state-icon use { vector-effect: non-scaling-stroke; }

@media (max-width: 480px) {
  .jwh-state-icon { width: 44px; height: 44px; }
}

/* Selected / hover: filled green shape (shape change, not colour alone) */
.jwh-state-icon--filled { fill: var(--ig-green, #009B3A); stroke: var(--ig-green, #009B3A); }

/* Card-size variant (state-scoreboard.js createStateCardElement) */
.jwh-state-icon--card { width: 24px; height: 24px; }
@media (max-width: 480px) {
  .jwh-state-icon--card { width: 20px; height: 20px; }
}

/* Popup draw-on (hybrid D2): path uses pathLength="100" in the sprite */
.jwh-state-icon--draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: jwh-state-draw 400ms ease-out 120ms forwards;
}
@keyframes jwh-state-draw {
  to { stroke-dashoffset: 0; }
}

/* Tile stamp-in (hybrid D2): stampBounce curve, stagger via --stagger */
@keyframes jwh-state-stamp-in {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.jwh-stamp-in {
  animation: jwh-state-stamp-in 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation-delay: var(--stagger, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .jwh-stamp-in { animation: jwh-state-fade 50ms linear both; animation-delay: 0ms; }
  .jwh-state-icon--draw { animation: jwh-state-fade 50ms linear both; stroke-dashoffset: 0; }
}
@keyframes jwh-state-fade { from { opacity: 0; } to { opacity: 1; } }