/*
 * P32 — mapowy odtwarzacz Replay z punktami etapów trasy.
 */

#map {
  position: relative;
}

.ow-p32-replay-player {
  position: absolute;
  z-index: 10020;
  left: 50%;
  bottom: 14px;
  width: min(760px, calc(100% - 420px));
  min-width: 540px;
  padding: 7px 10px 9px;
  border: 1px solid rgba(139, 168, 194, .55);
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 36px rgba(15, 44, 79, .24);
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
}

.ow-p32-replay-player[hidden] {
  display: none !important;
}

.ow-p32-player-head,
.ow-p32-player-controls,
.ow-p32-timeline {
  display: flex;
  align-items: center;
}

.ow-p32-player-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  padding: 0 3px;
}

.ow-p32-player-head strong {
  color: #087b70;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .1em;
}

.ow-p32-player-head span {
  overflow: hidden;
  color: #60788e;
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ow-p32-player-controls {
  justify-content: center;
  gap: 5px;
}

.ow-p32-player-controls button {
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #bcd0df;
  border-radius: 10px;
  color: #173650;
  background: #f7fafc;
  font: inherit;
  font-size: 10px;
  font-weight: 950;
  cursor: pointer;
}

.ow-p32-player-controls button:hover {
  border-color: #087ac1;
  background: #edf7ff;
}

.ow-p32-player-controls button.is-active {
  border-color: #075fab;
  color: #fff;
  background: #075fab;
}

.ow-p32-speed-group {
  display: flex;
  gap: 4px;
  padding: 0 2px;
}

.ow-p32-player-controls .ow-p32-nudge {
  min-width: 50px;
}

.ow-p32-player-controls .ow-p32-clear {
  min-width: 60px;
  border-color: #f0c2c2;
  color: #9f2424;
  background: #fff5f5;
}

.ow-p32-timeline {
  gap: 7px;
  margin-top: 6px;
}

.ow-p32-timeline > span {
  width: 42px;
  color: #5d748a;
  font-size: 10px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.ow-p32-timeline > span:last-child {
  text-align: right;
}

.ow-p32-timeline-main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 20px;
}

#ow-p32-replay-time {
  display: block;
  width: 100%;
  height: 18px;
  margin: 0;
  accent-color: #087ac1;
  cursor: pointer;
}

.ow-p32-stage-track {
  position: absolute;
  right: 8px;
  bottom: 0;
  left: 8px;
  height: 20px;
  pointer-events: none;
}

.ow-p32-stage {
  position: absolute;
  top: 0;
  width: 1px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}

.ow-p32-stage i {
  position: absolute;
  top: 0;
  left: -2px;
  width: 5px;
  height: 9px;
  border-radius: 3px;
  background: #087ac1;
  box-shadow: 0 0 0 2px #fff;
}

.ow-p32-stage span {
  position: absolute;
  top: 10px;
  left: 0;
  color: #60788e;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.05;
  text-shadow: 0 1px 0 #fff, 0 0 4px #fff;
  white-space: nowrap;
  transform: translateX(-50%);
}

.ow-p32-stage-label-short {
  display: none;
}

.ow-p32-stage-start i,
.ow-p32-stage-start span {
  background: #0b9b72;
  color: #08725b;
}

.ow-p32-stage-mark-1 i,
.ow-p32-stage-mark-1 span {
  background: #d18b00;
  color: #986500;
}

.ow-p32-stage-mark-2 i,
.ow-p32-stage-mark-2 span {
  background: #f97316;
  color: #bd4d0b;
}

.ow-p32-stage-gate-3 i,
.ow-p32-stage-gate-3 span {
  background: #7c3aed;
  color: #6530bd;
}

.ow-p32-stage-finish i,
.ow-p32-stage-finish span {
  background: #c23b32;
  color: #9f2924;
}

.ow-p32-stage:first-child span {
  transform: none;
}

@media (max-width: 1600px) and (min-width: 1051px) {
  .ow-p32-replay-player {
    bottom: 76px;
    width: min(660px, calc(100% - 440px));
  }
}

@media (max-width: 1050px) {
  .ow-p32-replay-player {
    width: calc(100% - 28px);
    min-width: 0;
  }

  .ow-p32-player-head {
    display: none;
  }

  .ow-p32-player-controls {
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  .ow-p32-replay-player {
    bottom: calc(
      var(--ow-final-nav-height, 68px) +
      env(safe-area-inset-bottom) +
      10px
    );
    width: calc(100% - 16px);
    padding: 6px 7px 8px;
    border-radius: 14px;
  }

  .ow-p32-player-controls {
    gap: 3px;
  }

  .ow-p32-player-controls button {
    min-width: 30px;
    height: 28px;
    padding: 0 6px;
    border-radius: 9px;
    font-size: 9px;
  }

  .ow-p32-speed-group {
    gap: 3px;
    padding: 0;
  }

  .ow-p32-player-controls .ow-p32-nudge {
    min-width: 43px;
  }

  .ow-p32-player-controls .ow-p32-clear {
    display: none;
  }

  .ow-p32-timeline {
    gap: 4px;
    margin-top: 4px;
  }

  .ow-p32-timeline > span {
    width: 33px;
    font-size: 9px;
  }

  .ow-p32-timeline-main {
    padding-bottom: 18px;
  }

  .ow-p32-stage-track {
    right: 5px;
    left: 5px;
    height: 18px;
  }

  .ow-p32-stage {
    height: 18px;
  }

  .ow-p32-stage span {
    top: 10px;
    font-size: 8px;
  }

  .ow-p32-stage-label-full {
    display: none;
  }

  .ow-p32-stage-label-short {
    display: block;
  }
}

@media (max-width: 370px) {
  .ow-p32-player-controls .ow-p32-nudge {
    min-width: 38px;
    padding-inline: 4px;
  }

  .ow-p32-player-controls button {
    min-width: 28px;
  }
}

body.ow-map-fullscreen-v1-active .ow-p32-replay-player {
  bottom: calc(env(safe-area-inset-bottom) + 10px);
}