/* =========================
   PITCH FIX OVERRIDES
========================= */

.pitch-preview,
.builder-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 99.4 / 61;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, #3ca15d 0%, #2b8c4e 100%);
  border: 0 !important;
  min-height: auto !important;
  display: block;
}

.pitch-preview {
  border-radius: 20px;
}

.hockey-pitch-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
}

/* actual field area inside the outer SVG margin */
.field-overlay {
  position: absolute;
  left: 4.02%;
  right: 4.02%;
  top: 4.92%;
  bottom: 4.92%;
  z-index: 5;
}

.home-field-overlay {
  pointer-events: none;
}

.builder-field-overlay {
  pointer-events: auto;
  cursor: crosshair;
}

/* dynamic placement layer */
#builderDynamicItems {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

#builderDynamicItems .builder-item {
  pointer-events: auto;
}

/* keep old starter objects visible but non-interactive */
.builder-static-item {
  pointer-events: none;
}

/* home pitch objects */
.pitch-player,
.pitch-ball {
  position: absolute;
  border-radius: 50%;
  z-index: 6;
}

.pitch-player {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.pitch-player.blue {
  background: #3178ff;
}

.pitch-player.red {
  background: #ff5a5f;
}

.pitch-ball {
  width: 10px;
  height: 10px;
  background: #fff36b;
  box-shadow: 0 0 0 3px rgba(255, 243, 107, 0.18);
}

.hp1 { top: 30%; left: 28%; }
.hp2 { top: 46%; left: 39%; }
.hp3 { top: 63%; left: 31%; }
.hp4 { top: 37%; left: 66%; }
.hp5 { top: 56%; left: 74%; }
.hball { top: 48%; left: 49%; }

.home-arrow {
  position: absolute;
  z-index: 6;
  height: 3px;
  background: rgba(255, 255, 255, 0.96);
  transform-origin: left center;
}

.home-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
}

.home-arrow.one {
  width: 86px;
  left: 42%;
  top: 49%;
  transform: rotate(-10deg);
}

.home-arrow.two {
  width: 78px;
  left: 54%;
  top: 43%;
  transform: rotate(22deg);
}

/* builder objects */
.builder-player,
.builder-ball,
.builder-cone,
.builder-arrow {
  position: absolute;
  z-index: 6;
}

.builder-player {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.builder-player.blue {
  background: #3178ff;
}

.builder-player.red {
  background: #ff5a5f;
}

.builder-player.keeper {
  background: #2f3542;
}

.builder-ball {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff36b;
  box-shadow: 0 0 0 4px rgba(255, 243, 107, 0.14);
}

.builder-cone {
  width: 12px;
  height: 12px;
  background: #ff9f1c;
  border-radius: 3px;
  transform: rotate(45deg);
}

.bp1 { top: 30%; left: 28%; }
.bp2 { top: 46%; left: 39%; }
.bp3 { top: 63%; left: 31%; }
.bp4 { top: 37%; left: 66%; }
.bp5 { top: 56%; left: 74%; }
.bp6 { top: 48%; left: 6%; transform: translateY(-50%); }

.bb1 { top: 48%; left: 49%; }

.bc1 { top: 29%; left: 46%; }
.bc2 { top: 44%; left: 54%; }
.bc3 { top: 59%; left: 48%; }

.builder-arrow {
  height: 3px;
  background: rgba(255, 255, 255, 0.96);
  transform-origin: left center;
}

.builder-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
}

.pass-arrow {
  width: 92px;
  top: 49%;
  left: 40%;
  transform: rotate(-8deg);
}

.run-arrow {
  width: 78px;
  top: 43%;
  left: 54%;
  transform: rotate(22deg);
}

/* interactive placed items */
.builder-tool-message {
  min-height: 22px;
  margin-bottom: 1rem;
  color: var(--muted);
  font-weight: 600;
}

.builder-tool-btn.active-placement-tool,
#selectToolBtn.active-placement-tool {
  background: var(--surface-alt);
  border-color: rgba(13, 124, 102, 0.35);
}

.builder-item {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 10;
}

.builder-item:active {
  cursor: grabbing;
}

.builder-item.selected {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
  z-index: 11;
}

.builder-item.blue-player,
.builder-item.red-player,
.builder-item.goalkeeper {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.builder-item.blue-player {
  background: #3178ff;
}

.builder-item.red-player {
  background: #ff5a5f;
}

.builder-item.goalkeeper {
  background: #2f3542;
}

.builder-item.cone {
  width: 12px;
  height: 12px;
  background: #ff9f1c;
  border-radius: 3px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.builder-item.ball {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff36b;
  box-shadow: 0 0 0 4px rgba(255, 243, 107, 0.14);
}

/* optional button styles reused */
.drill-card-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.drill-card-actions .btn {
  width: auto;
}

.session-drill-top-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.remove-session-drill-btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
}

.remove-session-drill-btn:hover {
  background: var(--surface-alt);
}

.saved-preview-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.delete-saved-drill-btn {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
}

.delete-saved-drill-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 640px) {
  .pitch-player,
  .builder-player,
  .builder-item.blue-player,
  .builder-item.red-player,
  .builder-item.goalkeeper {
    width: 16px;
    height: 16px;
  }

  .pitch-ball,
  .builder-ball,
  .builder-item.cone,
  .builder-item.ball {
    width: 10px;
    height: 10px;
  }

  .home-arrow.one,
  .pass-arrow {
    width: 64px;
  }

  .home-arrow.two,
  .run-arrow {
    width: 56px;
  }
}