/* Braking Point - sweeping marker track */
.brake-arena { gap: 22px; }

.track {
  position: relative;
  width: min(560px, 94%);
  height: 86px;
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 26px, transparent 26px 52px),
    linear-gradient(180deg, #22222c, #14141b);
  border: 1px solid var(--f1-line);
  overflow: hidden;
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.5);
}

.track-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  background: repeating-linear-gradient(90deg, #55556a 0 18px, transparent 18px 36px);
  transform: translateY(-50%);
}

.brake-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 62%;
  width: 26%;
  background: linear-gradient(180deg, rgba(0, 210, 106, 0.34), rgba(0, 210, 106, 0.16));
  border-left: 3px solid var(--f1-green);
  border-right: 3px solid var(--f1-green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.zone-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--f1-green);
  opacity: 0.85;
}

.zone-perfect {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 14%;
  transform: translateX(-50%);
  background: rgba(255, 212, 0, 0.4);
  border-left: 2px solid var(--f1-yellow);
  border-right: 2px solid var(--f1-yellow);
}

.marker {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -54%);
  font-size: 2rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  z-index: 2;
  transition: filter 0.15s ease;
  will-change: transform;
}

.marker.locked {
  filter: drop-shadow(0 0 12px rgba(225, 6, 0, 0.9));
}

.brake-pad {
  min-height: 84px;
  background: linear-gradient(180deg, rgba(0, 210, 106, 0.18), rgba(225, 6, 0, 0.14));
  border-color: rgba(0, 210, 106, 0.6);
  color: var(--f1-green);
}

.brake-pad:active {
  background: linear-gradient(180deg, rgba(0, 210, 106, 0.4), rgba(225, 6, 0, 0.3));
}