/**
 * Keyboard Race — 통합 배경 스크롤 + 기존 도로 스타일 유지
 * 배경: #krRaceBackgroundScroll (transform)
 * 배경: .kr-track-surface + --kr-road-shift (레인 도로는 고정, 차만 translate)
 */
.keyboard-race-track.race-track-area {
  --race-bg-scroll-speed: 2.4s;
  --kr-lane-dash-size: 26px;
  --kr-lane-dash-period: 0.45s;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

@keyframes krLaneDashScroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -26px 0;
  }
}

/* 레인 차선: 전체 폭 고정 + 주행 중 background-position만 스크롤 */
.race-track-area.is-running .kr-lane__track-lines {
  animation: krLaneDashScroll var(--kr-lane-dash-period, 0.45s) linear infinite;
  will-change: background-position;
}

.race-track-area.is-bg-stopped .kr-lane__track-lines,
.race-track-area.is-paused .kr-lane__track-lines,
.race-track-area.is-finished .kr-lane__track-lines,
.race-track-area:not(.is-running) .kr-lane__track-lines {
  animation: none !important;
  background-position: 0 0;
}

.kr-race-scene {
  position: relative;
  overflow: hidden;
  min-height: 260px;
}

.race-background-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.race-background-scroll {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 200%;
  height: 100%;
  min-height: 260px;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.race-background-segment {
  position: relative;
  flex: 0 0 50%;
  width: 50%;
  min-height: 260px;
  overflow: hidden;
}

.race-background-segment .kr-stadium-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* 기존 트랙 면 — keyboard_race.css 스타일 그대로, 스크롤과 함께 이동 */
.race-background-segment .kr-track-surface {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 126px;
  bottom: 10px;
  z-index: 2;
  pointer-events: none;
}

.race-background-segment--tile:not([data-cloned]) {
  background:
    radial-gradient(circle at 50% -10%, rgba(0, 229, 255, 0.14), transparent 45%),
    linear-gradient(180deg, rgba(26, 30, 54, 0.98), rgba(10, 14, 30, 0.98)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08) 0 26px,
      rgba(255, 255, 255, 0.02) 26px 52px
    );
}

.kr-race-foreground {
  position: relative;
  z-index: 5;
  pointer-events: none;
}

.kr-race-foreground .kr-lane,
.kr-race-foreground .kr-car,
.kr-race-foreground .kr-finish-line-wrap {
  pointer-events: auto;
}

.kr-lanes {
  position: relative;
  z-index: 1;
}

/* 주행 중: 배경 코스만 parallax — 레인 도로는 고정 폭 */
.race-track-area.is-running .kr-track-surface,
.race-track-area.is-running .kr-track-markings {
  will-change: background-position;
}

.kr-track-overlay {
  z-index: 20;
  pointer-events: none;
}

/* 정지 */
.race-track-area.is-bg-stopped .race-background-scroll,
.race-track-area.is-paused .race-background-scroll,
.race-track-area.is-finished .race-background-scroll {
  animation: none !important;
  -webkit-animation: none !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
}

.race-track-area.is-running .race-background-scroll {
  animation: none !important;
  -webkit-animation: none !important;
}

/* 스크롤 레이어 안 경기장만 transform — bg-position은 JS에서 0 유지 */
.race-background-layer .kr-layer {
  background-position: 0 0 !important;
}

.race-background-layer .kr-track-markings {
  background-position: 0 0 !important;
}

@media (max-width: 768px) {
  .keyboard-race-container,
  .race-game-container,
  .race-content,
  .race-track-area,
  .kr-race-scene,
  .kr-race-foreground {
    transform: none !important;
    -webkit-transform: none !important;
  }

  .race-track-area {
    position: relative !important;
    overflow: hidden !important;
    min-height: 190px !important;
  }

  .race-background-scroll {
    will-change: transform;
  }

  .race-track-area.is-bg-stopped .race-background-scroll {
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
  }
}

@supports (-webkit-touch-callout: none) {
  .race-background-scroll {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .race-track-area .race-background-scroll {
    animation: none !important;
    -webkit-animation: none !important;
  }

  .race-track-area .kr-lane__track-lines {
    animation: none !important;
    background-position: 0 0;
  }
}