:root {
  --vts-neutral:   #6b7280;
  --vts-contested: #ffa657;
  --vts-dominated: #00FF94;
  --vts-attacked:  #ff5f56;
  --vts-fortified: #ffd166;
  --vts-decaying:  #d2a8ff;
  --vts-captured:  #ffffff;
  --vts-runner-up: rgba(255,255,255,0.15);
}



.terri-circle { stroke-opacity: 0.9; }
.terri-halo   { stroke-opacity: 0.5; }




.anim-breath {
  animation: vtsBreath 4s ease-in-out infinite;
}
@keyframes vtsBreath {
  0%, 100% { opacity: 0.95; }
  50%      { opacity: 0.70; }
}


.anim-pulse-slow {
  animation: vtsPulseSlow 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes vtsPulseSlow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}


.anim-attacked {
  animation: vtsAttacked 1.8s ease-in-out infinite;
}
@keyframes vtsAttacked {
  0%, 100% { stroke: var(--vts-attacked); stroke-opacity: 0.6; }
  50%      { stroke: var(--vts-attacked); stroke-opacity: 1.0; }
}


.anim-fortified {
  animation: vtsFortified 5s ease-in-out infinite;
}
@keyframes vtsFortified {
  0%, 100% { stroke-opacity: 0.6; }
  50%      { stroke-opacity: 1.0; }
}


.anim-decay {
  animation: vtsDecay 6s ease-in-out infinite;
}
@keyframes vtsDecay {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.25; }
}


.anim-captured {
  animation: vtsCaptured 2.4s ease-in-out infinite;
}
@keyframes vtsCaptured {
  0%   { opacity: 1; }
  40%  { opacity: 0.75; }
  100% { opacity: 1; }
}



.terri-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: #05070a;
  border: 2px solid rgba(255,255,255,0.7);
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  position: relative;
}

.terri-marker .marker-icon {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
  border: 2px solid #05070a;
}

.marker-icon.alert    { background: var(--vts-attacked); }
.marker-icon.crown    { background: var(--vts-fortified); color: #05070a; }
.marker-icon.warn     { background: var(--vts-contested); }
.marker-icon.captured { background: var(--vts-captured); color: #05070a; }
.marker-icon.sand     { background: var(--vts-decaying); }


.marker-captured-pulse {
  animation: vtsMarkerCapturedPulse 2s ease-in-out infinite;
}
@keyframes vtsMarkerCapturedPulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 0 0 rgba(255,255,255,0.5); }
  50%      { box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 0 8px rgba(255,255,255,0); }
}


.marker-attacked-shake {
  animation: vtsMarkerShake 1.6s ease-in-out infinite;
}
@keyframes vtsMarkerShake {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-1px, 0); }
  40%      { transform: translate(1px, 0); }
  60%      { transform: translate(-1px, 0); }
  80%      { transform: translate(1px, 0); }
}


.marker-fortified-glow {
  box-shadow: 0 2px 12px rgba(0,0,0,0.5),
              0 0 0 2px var(--vts-fortified),
              0 0 14px rgba(255,209,102,0.45);
}



.vts-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.vts-sb-neutral   { background: rgba(107,114,128,0.15); color: #9ca3af;            border: 1px solid rgba(107,114,128,0.3); }
.vts-sb-contested { background: rgba(255,166,87,0.15);  color: var(--vts-contested); border: 1px solid rgba(255,166,87,0.3); }
.vts-sb-dominated { background: rgba(0,255,148,0.12);   color: var(--vts-dominated); border: 1px solid rgba(0,255,148,0.3); }
.vts-sb-attacked  { background: rgba(255,95,86,0.15);   color: var(--vts-attacked);  border: 1px solid rgba(255,95,86,0.4); }
.vts-sb-fortified { background: rgba(255,209,102,0.15); color: var(--vts-fortified); border: 1px solid rgba(255,209,102,0.4); }
.vts-sb-decaying  { background: rgba(210,168,255,0.10); color: var(--vts-decaying);  border: 1px solid rgba(210,168,255,0.3); }
.vts-sb-captured  { background: rgba(255,255,255,0.10); color: #fff;                 border: 1px solid rgba(255,255,255,0.3); animation: vtsBadgePulse 2s ease-in-out infinite; }

@keyframes vtsBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}



.vts-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  background: var(--vts-dominated);
  color: #05070a;
}

.vts-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,255,148,0.3); }

.vts-cta.warn    { background: var(--vts-contested); color: #05070a; }
.vts-cta.warn:hover { box-shadow: 0 6px 20px rgba(255,166,87,0.3); }

.vts-cta.danger  { background: var(--vts-attacked); color: #fff; }
.vts-cta.danger:hover { box-shadow: 0 6px 20px rgba(255,95,86,0.4); }

.vts-cta.muted   { background: rgba(255,255,255,0.08); color: #e6edf3; }

.vts-cta.danger.pulse { animation: vtsCtaPulse 1.5s ease-in-out infinite; }
@keyframes vtsCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,95,86,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(255,95,86,0); }
}