/* A phone's target (client-target-touch.js draws the body outline and the
   ring under its feet). No box round the plate: it grows, its name and bar
   light up in the target's colour (red foe, green friend), an arrow bobs
   over it, and the other plates step back. */
html.touch-play .nameplate.sel,
html.touch-play .nameplate.sel:hover,
html.touch-play .nameplate.sel.hov {
  border: 0 !important;
  box-shadow: none !important;
  filter: none;
  transform: translate(-50%, -100%) scale(1.22);
  z-index: 6;
}
html.touch-play .nameplate.sel .np-name {
  color: #fff;
  font-size: 15px;
  text-shadow: 0 1px 1px #000, 0 0 3px #000, 0 0 10px rgba(255, 64, 36, 0.95);
}
html.touch-play .nameplate.sel.ally .np-name {
  text-shadow: 0 1px 1px #000, 0 0 3px #000, 0 0 10px rgba(70, 240, 106, 0.95);
}
html.touch-play .nameplate.sel .np-bar {
  height: 11px;
  border-color: #fff;
  box-shadow: 0 0 0 1px #000, 0 0 9px 1px rgba(255, 58, 34, 0.9);
}
html.touch-play .nameplate.sel.ally .np-bar {
  box-shadow: 0 0 0 1px #000, 0 0 9px 1px rgba(70, 240, 106, 0.9);
}
html.touch-play .nameplate.sel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 0;
  height: 0;
  margin-left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid #ff4a2e;
  filter: drop-shadow(0 0 4px rgba(255, 64, 36, 0.9)) drop-shadow(0 1px 0 #000);
  animation: tgtBob 0.9s ease-in-out infinite;
  pointer-events: none;
}
html.touch-play .nameplate.sel.ally::after {
  border-top-color: #4af06a;
  filter: drop-shadow(0 0 4px rgba(70, 240, 106, 0.9)) drop-shadow(0 1px 0 #000);
}
@keyframes tgtBob {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(2px); }
}
html.touch-play #nameplates:has(.nameplate.sel) .nameplate:not(.sel) { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  html.touch-play .nameplate.sel::after { animation: none; }
}