/* Reset and core styles */
* {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body {
  background-color: #ffffff;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Active Player Card Styling */
.player-card {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-color: #E2E8F0;
  opacity: 0.55;
  transform: scale(0.97);
}

.player-card.active-red {
  opacity: 1;
  transform: scale(1.02);
  border-color: #FCA5A5;
  box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.15), 0 0 0 2px #EF4444;
}

.player-card.active-blue {
  opacity: 1;
  transform: scale(1.02);
  border-color: #93C5FD;
  box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.15), 0 0 0 2px #3B82F6;
}

/* Board Node SVG Styling */
.node-circle {
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
  transform-origin: center;
}

.node-circle:hover {
  filter: brightness(0.95);
}

.node-circle:active {
  transform: scale(0.92);
}

.node-empty {
  fill: #F8FAFC;
  stroke: #CBD5E1;
  stroke-width: 2.5;
  transition: all 0.2s ease;
}

.node-empty:hover {
  fill: #F1F5F9;
  stroke: #94A3B8;
}

.node-red {
  fill: url(#redGrad);
  filter: drop-shadow(0 4px 8px rgba(239, 68, 68, 0.3));
}

.node-blue {
  fill: url(#blueGrad);
  filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
}

.node-last-empty {
  fill: #FEF3C7;
  stroke: #F59E0B;
  stroke-width: 3.5;
  animation: pulseRemaining 1.6s infinite ease-in-out;
}

@keyframes pulseRemaining {
  0%, 100% {
    stroke-width: 3.5;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4));
  }
  50% {
    stroke-width: 5.5;
    filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.7));
  }
}

/* Neighbor Ray Pulse */
.neighbor-ray {
  stroke-dasharray: 6 3;
  animation: dashAnimation 1s linear infinite;
}

@keyframes dashAnimation {
  to {
    stroke-dashoffset: -18;
  }
}

/* Dot tracker mini circles */
.track-dot {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background-color: #E2E8F0;
  transition: all 0.2s;
}

.track-dot.filled-red {
  background-color: #EF4444;
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
}

.track-dot.filled-blue {
  background-color: #3B82F6;
  box-shadow: 0 0 4px rgba(59, 130, 246, 0.5);
}