.board-unit {
  --defender-accent: #66e7ff;
  --defender-bright: #d9fbff;
  --defender-mid: #168eaa;
  --defender-dark: #062c38;
  width: 76%;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
}

.board-unit--pulse {
  --defender-accent: #66e7ff;
  --defender-bright: #d9fbff;
  --defender-mid: #1599b7;
  --defender-dark: #063743;
}

.board-unit--nova {
  --defender-accent: #ffb55f;
  --defender-bright: #fff0c3;
  --defender-mid: #c86724;
  --defender-dark: #4c2409;
}

.board-unit--cryo {
  --defender-accent: #90b7ff;
  --defender-bright: #edf4ff;
  --defender-mid: #536dd1;
  --defender-dark: #202e66;
}

.board-unit--tier-2,
.board-unit--tier-3,
.board-unit--tier-4,
.board-unit--tier-5 {
  filter: none;
  box-shadow: none;
}

.defender-visual,
.defender-visual > span {
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  pointer-events: none;
}

.defender-visual {
  width: 88%;
  height: 88%;
  transform: translate(-50%, -50%);
  color: var(--defender-accent);
}

.defender-visual > span {
  transform: translate(-50%, -50%);
}

.defender-visual__aura {
  width: 88%;
  height: 88%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--defender-accent) 34%, transparent), transparent 68%);
  opacity: 0.38;
  filter: blur(5px);
}

.defender-visual__ring {
  width: 74%;
  height: 74%;
  border: 1px solid color-mix(in srgb, var(--defender-bright) 58%, transparent);
  border-radius: 50%;
  opacity: 0;
}

.defender-visual__chassis,
.defender-visual__weapon,
.defender-visual__core,
.defender-visual__module,
.defender-visual__crest {
  z-index: 2;
}

.defender-visual__chassis {
  border: 2px solid color-mix(in srgb, var(--defender-bright) 82%, transparent);
  background: linear-gradient(145deg, var(--defender-bright), var(--defender-accent) 25%, var(--defender-mid) 53%, var(--defender-dark) 100%);
  box-shadow: inset 0 -5px 9px rgba(0, 0, 0, 0.28), 0 0 10px color-mix(in srgb, var(--defender-accent) 32%, transparent);
}

.defender-visual__core {
  border: 1px solid var(--defender-bright);
  background: radial-gradient(circle, #fff 0 13%, var(--defender-bright) 15% 31%, var(--defender-accent) 34% 55%, var(--defender-dark) 60% 100%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--defender-accent) 65%, transparent);
}

.defender-visual__module,
.defender-visual__crest {
  opacity: 0;
}

/* Pulse: slim precision turret, always points toward the enemy approach. */
.defender-visual--pulse .defender-visual__chassis {
  width: 54%;
  height: 48%;
  top: 57%;
  clip-path: polygon(23% 0, 77% 0, 100% 38%, 84% 100%, 16% 100%, 0 38%);
  border-radius: 7px;
}

.defender-visual--pulse .defender-visual__weapon {
  top: 28%;
  width: 12%;
  height: 48%;
  border: 1px solid var(--defender-bright);
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(90deg, var(--defender-dark), var(--defender-bright) 35%, var(--defender-accent) 58%, var(--defender-dark));
  box-shadow: 0 -4px 8px color-mix(in srgb, var(--defender-accent) 45%, transparent);
}

.defender-visual--pulse .defender-visual__core {
  top: 59%;
  width: 20%;
  height: 20%;
  border-radius: 50%;
}

.defender-visual--pulse .defender-visual__module {
  top: 48%;
  width: 10%;
  height: 35%;
  border: 1px solid var(--defender-bright);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--defender-bright), var(--defender-mid) 42%, var(--defender-dark));
}

.defender-visual--pulse .defender-visual__module--a { left: 31%; }
.defender-visual--pulse .defender-visual__module--b { left: 69%; }

.defender-visual--pulse .defender-visual__crest {
  top: 75%;
  width: 50%;
  height: 12%;
  clip-path: polygon(0 50%, 18% 0, 82% 0, 100% 50%, 82% 100%, 18% 100%);
  background: var(--defender-accent);
  box-shadow: 0 0 7px var(--defender-accent);
}

/* Nova: broad armored reactor cannon with expanding side pods. */
.defender-visual--nova .defender-visual__chassis {
  width: 68%;
  height: 62%;
  top: 54%;
  clip-path: polygon(25% 0, 75% 0, 100% 28%, 92% 78%, 70% 100%, 30% 100%, 8% 78%, 0 28%);
  border-radius: 8px;
}

.defender-visual--nova .defender-visual__weapon {
  top: 30%;
  width: 35%;
  height: 31%;
  border: 2px solid var(--defender-bright);
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 50% 26%, #fff 0 8%, var(--defender-bright) 10% 23%, var(--defender-accent) 25% 53%, var(--defender-dark) 58% 100%);
  box-shadow: 0 -4px 12px color-mix(in srgb, var(--defender-accent) 52%, transparent);
}

.defender-visual--nova .defender-visual__core {
  top: 58%;
  width: 28%;
  height: 28%;
  border-radius: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.defender-visual--nova .defender-visual__module {
  top: 59%;
  width: 19%;
  height: 29%;
  border: 2px solid color-mix(in srgb, var(--defender-bright) 82%, transparent);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--defender-accent), var(--defender-mid) 48%, var(--defender-dark));
  box-shadow: inset 0 0 7px rgba(255, 255, 255, 0.08);
}

.defender-visual--nova .defender-visual__module--a { left: 22%; transform: translate(-50%, -50%) rotate(-12deg); }
.defender-visual--nova .defender-visual__module--b { left: 78%; transform: translate(-50%, -50%) rotate(12deg); }

.defender-visual--nova .defender-visual__crest {
  top: 81%;
  width: 58%;
  height: 8%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--defender-accent), var(--defender-bright), var(--defender-accent), transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--defender-accent) 52%, transparent);
}

/* Cryo: crystalline control emitter, with prongs and lattice instead of a gun barrel. */
.defender-visual--cryo .defender-visual__chassis {
  width: 56%;
  height: 58%;
  top: 57%;
  clip-path: polygon(50% 0, 88% 24%, 100% 70%, 72% 100%, 28% 100%, 0 70%, 12% 24%);
  border-radius: 6px;
}

.defender-visual--cryo .defender-visual__weapon {
  top: 27%;
  width: 35%;
  height: 42%;
  clip-path: polygon(50% 0, 67% 35%, 100% 76%, 65% 66%, 50% 100%, 35% 66%, 0 76%, 33% 35%);
  background: linear-gradient(180deg, #fff, var(--defender-bright) 18%, var(--defender-accent) 49%, var(--defender-mid) 76%, var(--defender-dark));
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--defender-accent) 52%, transparent));
}

.defender-visual--cryo .defender-visual__core {
  top: 60%;
  width: 22%;
  height: 22%;
  border-radius: 4px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.defender-visual--cryo .defender-visual__module {
  top: 57%;
  width: 15%;
  height: 36%;
  clip-path: polygon(50% 0, 100% 72%, 52% 100%, 0 72%);
  background: linear-gradient(180deg, var(--defender-bright), var(--defender-accent) 42%, var(--defender-dark));
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--defender-accent) 45%, transparent));
}

.defender-visual--cryo .defender-visual__module--a { left: 24%; transform: translate(-50%, -50%) rotate(-24deg); }
.defender-visual--cryo .defender-visual__module--b { left: 76%; transform: translate(-50%, -50%) rotate(24deg); }

.defender-visual--cryo .defender-visual__crest {
  top: 79%;
  width: 52%;
  height: 13%;
  border: 1px solid var(--defender-bright);
  clip-path: polygon(0 50%, 14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%);
  background: color-mix(in srgb, var(--defender-dark) 68%, transparent);
}

/* Tier evolution: structural additions, not just brighter paint. */
.defender-visual--tier-2 .defender-visual__ring {
  opacity: 0.55;
  width: 79%;
  height: 79%;
}

.defender-visual--tier-2 .defender-visual__weapon {
  filter: saturate(1.06) brightness(1.05);
}

.defender-visual--tier-3 .defender-visual__ring,
.defender-visual--tier-4 .defender-visual__ring,
.defender-visual--tier-5 .defender-visual__ring {
  opacity: 0.75;
  width: 84%;
  height: 84%;
  border-width: 2px;
}

.defender-visual--tier-3 .defender-visual__module,
.defender-visual--tier-4 .defender-visual__module,
.defender-visual--tier-5 .defender-visual__module {
  opacity: 1;
}

.defender-visual--tier-4 .defender-visual__crest,
.defender-visual--tier-5 .defender-visual__crest {
  opacity: 0.86;
}

.defender-visual--tier-4 .defender-visual__chassis,
.defender-visual--tier-5 .defender-visual__chassis {
  box-shadow: inset 0 -5px 9px rgba(0, 0, 0, 0.28), 0 0 12px color-mix(in srgb, var(--defender-accent) 52%, transparent);
}

.defender-visual--tier-5 {
  width: 94%;
  height: 94%;
}

.defender-visual--tier-5 .defender-visual__ring {
  width: 92%;
  height: 92%;
  border-style: dashed;
  border-color: var(--defender-bright) color-mix(in srgb, var(--defender-accent) 30%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--defender-accent) 45%, transparent);
  animation: defender-tier-five-ring 5.2s linear infinite;
}

.defender-visual--tier-5 .defender-visual__aura {
  width: 104%;
  height: 104%;
  opacity: 0.62;
}

.defender-visual--tier-5 .defender-visual__core {
  box-shadow: 0 0 10px var(--defender-accent), 0 0 17px color-mix(in srgb, var(--defender-accent) 52%, transparent);
}

.board-unit__tier {
  right: -5px;
  bottom: -5px;
  z-index: 6;
  min-width: 25px;
  padding: 3px 5px;
  border-color: color-mix(in srgb, var(--defender-accent) 38%, rgba(255, 255, 255, 0.18));
  color: var(--defender-bright);
  background: rgba(2, 9, 14, 0.94);
  box-shadow: 0 0 7px color-mix(in srgb, var(--defender-accent) 20%, transparent);
}

.board-unit__pips {
  bottom: -3px;
  z-index: 5;
  gap: 2px;
}

.board-unit__pips i {
  width: 5px;
  height: 2px;
  background: rgba(220, 244, 250, 0.14);
}

.board-unit__pips i.is-active {
  background: var(--defender-accent);
  box-shadow: 0 0 5px var(--defender-accent);
}

.board-unit--dragging {
  opacity: 0.18;
  transform: scale(0.9);
}

.board-unit--ghost {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.board-unit--ghost .board-unit__tier,
.board-unit--ghost .board-unit__pips {
  opacity: 0.76;
}

/* Unit picker reuses the same silhouette language. */
.deploy-type {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 6px;
}

.deploy-type__visual {
  position: relative;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
}

.deploy-type__visual .defender-visual {
  width: 100%;
  height: 100%;
}

.deploy-type__label {
  min-width: 0;
}

.deploy-type[data-deploy-type="pulse"] { --defender-accent: #66e7ff; --defender-bright: #d9fbff; --defender-mid: #1599b7; --defender-dark: #063743; }
.deploy-type[data-deploy-type="nova"] { --defender-accent: #ffb55f; --defender-bright: #fff0c3; --defender-mid: #c86724; --defender-dark: #4c2409; }
.deploy-type[data-deploy-type="cryo"] { --defender-accent: #90b7ff; --defender-bright: #edf4ff; --defender-mid: #536dd1; --defender-dark: #202e66; }

.deploy-type .defender-visual--selector .defender-visual__aura,
.deploy-type .defender-visual--selector .defender-visual__ring,
.deploy-type .defender-visual--selector .defender-visual__module,
.deploy-type .defender-visual--selector .defender-visual__crest {
  display: none;
}

.deploy-type.is-selected .deploy-type__visual {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--defender-accent) 58%, transparent));
}

@keyframes defender-tier-five-ring {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 720px) {
  .board-unit { width: 74%; }
  .board-unit__tier { right: -4px; bottom: -4px; min-width: 23px; font-size: 0.48rem; }
  .board-unit__pips { bottom: -2px; }
  .deploy-type { gap: 3px; padding-left: 4px; padding-right: 4px; }
  .deploy-type__visual { width: 22px; height: 22px; flex-basis: 22px; }
}

@media (max-width: 360px) {
  .deploy-type__visual { width: 19px; height: 19px; flex-basis: 19px; }
  .deploy-type__label { font-size: 0.54rem; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  .defender-visual--tier-5 .defender-visual__ring {
    animation: none;
  }
}