/* Page 1 match-card state icons — all devices.
   Presentation only: real row state selects the matching bright-vintage toolbar artwork.
   Mapping: WATCHING -> Watching eye, NEAR SIGNAL -> Near target,
   SIGNAL / LOCKED -> Signal bell. ALL remains a filter only, never a match state.
   Pulse cadence: WATCHING 2.2s, NEAR .95s, SIGNAL .42s.
   No feed, detector, odds, signal, runtime, or engine logic changes.
   Rollback: rollback/pre-card-state-icons-pulse-20260904 */

.match-wrap > .match-row .statebox::before{
  content:"";
  display:none;
  width:26px;
  height:26px;
  flex:0 0 26px;
  background-color:transparent!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  background-position:center!important;
  opacity:.90;
  filter:brightness(1.08) saturate(1.05) drop-shadow(0 0 2px rgba(255,255,255,.10));
  transform:scale(1);
  pointer-events:none;
  will-change:opacity,filter,transform;
}

/* Keep the real state text in the DOM for runtime/accessibility, but use one visual icon only. */
.match-wrap > .match-row .statebox .state{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Legacy meter/pulse visuals remain suppressed; runtime state ownership is unchanged. */
.match-wrap > .match-row .statebox .minute,
.match-wrap > .match-row .statebox .status-meter-icon,
.match-wrap > .match-row .statebox .watch-pulse{
  display:none!important;
}

/* WATCHING: slow, calm pulse. */
.match-wrap[data-state="WATCHING"] > .match-row .statebox::before{
  display:block;
  background-image:url("assets/icons/toolbar-watching-bright-vintage.svg?v=20260904-cardpulse-v1")!important;
  animation:nomadCardWatchingPulse 2.2s ease-in-out infinite;
}

/* NEAR SIGNAL: clearly faster pulse. */
.match-wrap[data-state="NEAR SIGNAL"] > .match-row .statebox::before{
  display:block;
  background-image:url("assets/icons/toolbar-near-bright-vintage.svg?v=20260904-cardpulse-v1")!important;
  animation:nomadCardNearPulse .95s ease-in-out infinite;
}

/* SIGNAL / LOCKED: fastest alert pulse. LOCKED deliberately wins over any stale row state. */
.match-wrap[data-state="SIGNAL"] > .match-row .statebox::before,
.match-wrap[data-signal-status="LOCKED"] > .match-row .statebox::before{
  display:block;
  background-image:url("assets/icons/toolbar-signal-bright-vintage.svg?v=20260904-cardpulse-v1")!important;
  animation:nomadCardSignalPulse .42s linear infinite;
}

/* Device-fit only; artwork mapping never changes. */
@media (min-width:1025px){
  .match-wrap > .match-row .statebox::before{
    width:30px;
    height:30px;
    flex-basis:30px;
  }
}

@media (max-width:700px){
  .match-wrap > .match-row .statebox::before{
    width:24px;
    height:24px;
    flex-basis:24px;
  }
}

@media (max-width:360px){
  .match-wrap > .match-row .statebox::before{
    width:22px;
    height:22px;
    flex-basis:22px;
  }
}

@keyframes nomadCardWatchingPulse{
  0%,100%{
    opacity:.82;
    filter:brightness(.98) saturate(1.02) drop-shadow(0 0 1px rgba(255,255,255,.08));
    transform:scale(1);
  }
  50%{
    opacity:1;
    filter:brightness(1.18) saturate(1.08) drop-shadow(0 0 4px rgba(255,255,255,.20));
    transform:scale(1.025);
  }
}

@keyframes nomadCardNearPulse{
  0%,100%{
    opacity:.78;
    filter:brightness(1.00) saturate(1.04) drop-shadow(0 0 2px rgba(255,255,255,.10));
    transform:scale(1);
  }
  50%{
    opacity:1;
    filter:brightness(1.28) saturate(1.14) drop-shadow(0 0 6px rgba(255,220,110,.30));
    transform:scale(1.045);
  }
}

@keyframes nomadCardSignalPulse{
  0%,100%{
    opacity:.72;
    filter:brightness(1.02) saturate(1.06) drop-shadow(0 0 2px rgba(255,255,255,.12));
    transform:scale(1);
  }
  50%{
    opacity:1;
    filter:brightness(1.42) saturate(1.20) drop-shadow(0 0 8px rgba(131,223,137,.52));
    transform:scale(1.065);
  }
}

@media (prefers-reduced-motion:reduce){
  .match-wrap > .match-row .statebox::before{
    animation:none!important;
    opacity:1;
    transform:none;
  }
}