/**
 * Hockey Rink SVG Markings & Tactical Board Styles
 */

.rink-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a; /* Deep arena background */
  overflow: hidden;
  border-radius: 8px;
  user-select: none;
  -webkit-user-select: none;
}

.rink-svg {
  width: 100%;
  height: 100%;
  max-height: 82vh;
  touch-action: none;
  display: block;
}

/* Rink Ice Sheet */
.rink-ice-surface {
  fill: #f8fafc;
  stroke: #94a3b8;
  stroke-width: 4;
}

/* Rink Dasherboards */
.rink-boards {
  fill: none;
  stroke: #cbd5e1;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Crease (Pale Crease Blue) */
.rink-crease {
  fill: #bae6fd;
  stroke: #dc2626;
  stroke-width: 2;
  opacity: 0.85;
}

/* Red lines & Goal lines */
.rink-line-red {
  stroke: #dc2626;
  stroke-width: 2.5;
}

.center-red-line {
  stroke: #dc2626;
  stroke-width: 3.5;
  stroke-dasharray: 10,4;
}

/* Blue lines */
.rink-line-blue {
  stroke: #0284c7;
  stroke-width: 5;
}

/* Faceoff Circles & Dots */
.rink-circle-red {
  fill: none;
  stroke: #dc2626;
  stroke-width: 2;
}

.rink-dot-red {
  fill: #dc2626;
}

.rink-circle-blue {
  fill: none;
  stroke: #0284c7;
  stroke-width: 2;
}

.rink-dot-blue {
  fill: #0284c7;
}

.rink-referee-crease {
  fill: none;
  stroke: #dc2626;
  stroke-width: 2;
}

.rink-trapezoid {
  fill: none;
  stroke: #dc2626;
  stroke-width: 1.5;
  stroke-dasharray: 4,4;
}

.rink-svg.is-stamping,
.rink-svg.is-drawing {
  cursor: crosshair;
}

/* Tactical Elements */
.tactical-element-group {
  cursor: grab;
  transition: transform 0.05s ease;
}

.tactical-element-group:active {
  cursor: grabbing;
}

.tactical-player {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.tactical-player text {
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.tactical-element-group.is-selected {
  filter: drop-shadow(0 0 6px #38bdf8);
}

.tactical-drawing-group.is-selected path {
  filter: drop-shadow(0 0 4px #38bdf8);
}

.drawing-step-badge {
  font-size: 8px;
  font-weight: 800;
  fill: #0f172a;
  background: #ffffff;
  padding: 2px;
}

/* Animation overlay elements */
.anim-skater, .anim-puck {
  pointer-events: none;
}

.anim-skater text {
  pointer-events: none;
  user-select: none;
}

.anim-skater.holding-position {
  opacity: 0.9;
}

/* Step Spotlight & Dimming */
.tactical-drawing-group.is-dimmed-step {
  opacity: 0.15;
  transition: opacity 0.3s ease;
}

.tactical-drawing-group.is-active-step {
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

/* Dynamic Animation Overlay Enhancements */
.anim-shot-tracer {
  pointer-events: none;
}

.anim-shot-puck {
  filter: drop-shadow(0 2px 5px rgba(234, 88, 12, 0.5));
}

.anim-shooter-stance {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* Phase Progression Position & Origin Ghost Elements */
.tactical-player-origin-ghost {
  pointer-events: none;
  user-select: none;
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

.tactical-player-origin-ghost circle {
  stroke-dasharray: 3.5, 2.5;
}

.tactical-player-origin-ghost text {
  font-family: system-ui, -apple-system, sans-serif;
  user-select: none;
  pointer-events: none;
}

.tactical-player.is-progressed-pos {
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.45)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}