.lane-runner-panel {
  max-width: 760px;
  margin-inline: auto;
  overflow: hidden;
}

.lane-runner-panel .play-panel-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.lane-runner-panel .play-panel-head h2 {
  margin: 0;
}

.lane-runner-panel .play-panel-head span {
  color: #5b3ec8;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 900;
}

.lane-runner-difficulty,
.lane-runner-move-controls,
.lane-runner-action-controls,
.lane-runner-primary-controls,
.lane-runner-secondary-controls {
  display: grid;
  gap: 10px;
  margin: 14px auto 0;
}

.lane-runner-difficulty {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 480px;
}

.lane-runner-difficulty button,
.lane-runner-move-controls button,
.lane-runner-action-controls button {
  min-height: 48px;
  border: 1px solid #d9dce3;
  border-radius: 12px;
  background: #fff;
  color: #22242a;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  -webkit-tap-highlight-color: transparent;
}

.lane-runner-difficulty button[aria-pressed="true"] {
  border-color: #5b3ec8;
  background: #eee9ff;
  color: #4328a6;
  box-shadow: inset 0 0 0 1px #5b3ec8;
}

.lane-runner-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #e1e3e9;
  border-radius: 14px;
  background: #fff;
}

.lane-runner-summary > div {
  min-width: 0;
  padding: 12px 8px;
  text-align: center;
}

.lane-runner-summary > div + div {
  border-left: 1px solid #e1e3e9;
}

.lane-runner-summary span,
.lane-runner-summary strong {
  display: block;
}

.lane-runner-summary span {
  color: #666b75;
  font-size: 12px;
  font-weight: 800;
}

.lane-runner-summary strong {
  margin-top: 3px;
  color: #202126;
  font-size: clamp(16px, 4vw, 21px);
  font-variant-numeric: tabular-nums;
}

.lane-runner-instruction {
  margin: 16px 0 10px;
  color: #50545d;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.lane-runner-track {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 5 / 4;
  min-height: 300px;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid #2d3240;
  border-radius: 18px;
  background: #c8e8ff;
  touch-action: none;
  user-select: none;
}

.lane-runner-track::before {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 27%;
  background: linear-gradient(#a7d9ff, #eaf7ff);
  content: "";
}

.lane-runner-world {
  position: absolute;
  z-index: 1;
  inset: 18% 4% 0;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      transparent 32.8%, rgba(255,255,255,.85) 33%, rgba(255,255,255,.85) 33.7%, transparent 33.9%,
      transparent 66.1%, rgba(255,255,255,.85) 66.3%, rgba(255,255,255,.85) 67%, transparent 67.2%),
    linear-gradient(180deg, #5d6370, #30343d);
  clip-path: polygon(39% 0, 61% 0, 100% 100%, 0 100%);
}

.lane-runner-world::before {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 14%, rgba(255,255,255,.12) 14.5% 15%);
  content: "";
}

.lane-runner-player,
.lane-runner-obstacle {
  position: absolute;
  z-index: 3;
  left: calc(16.667% + (var(--lane-index, 1) * 33.333%));
  transform: translateX(-50%);
}

.lane-runner-player[data-lane="0"],
.lane-runner-obstacle[data-lane="0"] { left: 16.667%; }

.lane-runner-player[data-lane="1"],
.lane-runner-obstacle[data-lane="1"] { left: 50%; }

.lane-runner-player[data-lane="2"],
.lane-runner-obstacle[data-lane="2"] { left: 83.333%; }

.lane-runner-player {
  bottom: 4%;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid #17181c;
  border-radius: 50%;
  background: #ffd93d;
  font-size: 30px;
  line-height: 1;
  transition: left 120ms ease, bottom 120ms ease, height 120ms ease;
}

.lane-runner-player[data-posture="jump"] {
  bottom: 24%;
}

.lane-runner-player[data-posture="slide"] {
  width: 66px;
  height: 34px;
  border-radius: 18px;
  font-size: 24px;
}

.lane-runner-obstacle {
  top: calc(2% + (var(--runner-depth, 0) * .82%));
  display: grid;
  min-width: 54px;
  min-height: 36px;
  padding: 5px 7px;
  place-items: center;
  border: 2px solid #17181c;
  border-radius: 8px;
  background: #fff;
  color: #17181c;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
  transform: translateX(-50%) scale(calc(.58 + (var(--runner-depth, 0) * .0042)));
  transform-origin: center bottom;
}

.lane-runner-obstacle[data-kind="block"] {
  background: #ffdf69;
}

.lane-runner-obstacle[data-kind="block"]::after {
  content: "↔ 이동";
}

.lane-runner-obstacle[data-kind="low"],
.lane-runner-obstacle[data-kind="jump"] {
  min-height: 24px;
  background: #ff9c8a;
}

.lane-runner-obstacle[data-kind="low"]::after,
.lane-runner-obstacle[data-kind="jump"]::after {
  content: "↑ 점프";
}

.lane-runner-obstacle[data-kind="high"],
.lane-runner-obstacle[data-kind="slide"] {
  min-height: 58px;
  align-content: start;
  background: #a9ddff;
}

.lane-runner-obstacle[data-kind="high"]::after,
.lane-runner-obstacle[data-kind="slide"]::after {
  content: "↓ 숙이기";
}

.lane-runner-move-controls,
.lane-runner-action-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 540px;
}

.lane-runner-action-controls button {
  border-color: #5b3ec8;
  background: #f4f1ff;
  color: #4328a6;
}

.lane-runner-primary-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lane-runner-secondary-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lane-runner-primary-controls .play-button,
.lane-runner-secondary-controls .play-button {
  width: 100%;
}

.lane-runner-panel button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.lane-runner-panel button:focus-visible,
.lane-runner-track:focus-visible {
  outline: 3px solid #4328a6;
  outline-offset: 3px;
}

.lane-runner-status {
  min-height: 48px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f1f2f5;
  color: #333740;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 600px) {
  .lane-runner-panel .play-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .lane-runner-track {
    min-height: 280px;
    aspect-ratio: 4 / 5;
  }

  .lane-runner-primary-controls {
    grid-template-columns: 1fr 1fr;
  }

  .lane-runner-primary-controls .play-button:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .lane-runner-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lane-runner-summary > div + div {
    border-left: 0;
  }

  .lane-runner-summary > div:nth-child(even) {
    border-left: 1px solid #e1e3e9;
  }

  .lane-runner-summary > div:nth-child(n + 3) {
    border-top: 1px solid #e1e3e9;
  }

  .lane-runner-track {
    min-height: 270px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .lane-runner-panel *,
  .lane-runner-panel *::before,
  .lane-runner-panel *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}