/* Corrida — pista urbana com faixas tracejadas verticais e painel de velocidade */

.game-view[data-game-id="corrida"] .corrida-arena {
  position: relative;
  overflow: hidden;
  min-height: min(56vh, 380px);
  height: min(56vh, 380px);
  margin: 8px 0;
  border-radius: 20px;
  border: 4px solid #343a40;
  background: linear-gradient(90deg, #3d4349 0%, #5c636a 50%, #3d4349 100%);
  box-shadow:
    0 8px 0 var(--ink),
    inset 0 0 0 2px rgb(255 255 255 / 0.06);
}

.game-view[data-game-id="corrida"] .corrida-curbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(90deg, #69db7c 0%, #69db7c 7%, transparent 7%, transparent 93%, #69db7c 93%, #69db7c 100%),
    linear-gradient(180deg, rgb(142 202 255 / 0.35) 0%, transparent 18%);
}

.game-view[data-game-id="corrida"] .corrida-lane-stripes {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7%;
  right: 7%;
  z-index: 1;
  pointer-events: none;
  --dash-gap: 22px;
  --dash-long: 18px;
  background-image:
    repeating-linear-gradient(
      180deg,
      rgb(255 255 255 / 0.82) 0,
      rgb(255 255 255 / 0.82) var(--dash-long),
      transparent var(--dash-long),
      transparent var(--dash-gap)
    ),
    repeating-linear-gradient(
      180deg,
      rgb(255 255 255 / 0.82) 0,
      rgb(255 255 255 / 0.82) var(--dash-long),
      transparent var(--dash-long),
      transparent var(--dash-gap)
    );
  background-size: 3px 100%, 3px 100%;
  background-position: calc(33.333% - 1.5px) 0, calc(66.666% - 1.5px) 0;
  background-repeat: no-repeat;
  animation: corrida-lane-dash var(--corrida-dash-duration, 1s) linear infinite;
}

@keyframes corrida-lane-dash {
  from {
    background-position:
      calc(33.333% - 1.5px) 0,
      calc(66.666% - 1.5px) 0;
  }

  to {
    background-position:
      calc(33.333% - 1.5px) var(--dash-gap),
      calc(66.666% - 1.5px) var(--dash-gap);
  }
}

.game-view[data-game-id="corrida"] .corrida-lanes {
  z-index: 2;
}

.game-view[data-game-id="corrida"] .corrida-lanes span {
  border: none;
  background: transparent;
  transition: background 0.08s ease;
}

.game-view[data-game-id="corrida"] .corrida-lanes span.is-active {
  background: rgb(255 255 255 / 0.05);
}

.game-view[data-game-id="corrida"] .corrida-arena.is-rush {
  filter: saturate(1.08) contrast(1.03);
}

.game-view[data-game-id="corrida"] .corrida-arena.is-flash-ok {
  filter: brightness(1.12);
}

.game-view[data-game-id="corrida"] .corrida-arena.is-flash-hit {
  filter: brightness(0.9);
}

.game-view[data-game-id="corrida"] .corrida-arena.is-shake {
  animation: corrida-shake 0.35s ease;
}

.game-view[data-game-id="corrida"] .corrida-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.game-view[data-game-id="corrida"] .corrida-entities {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.game-view[data-game-id="corrida"] .corrida-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: center;
  align-items: stretch;
}

.game-view[data-game-id="corrida"] .space-hud .race-stat {
  background: rgb(33 37 41 / 0.92);
  color: #fff;
  border: 2px solid #495057;
  border-radius: 14px;
  padding: 6px 12px;
}

.game-view[data-game-id="corrida"] .corrida-speed-panel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: end;
  gap: 0 8px;
  min-width: 7.5rem;
  padding: 6px 10px 8px;
  border-radius: 12px;
  border: 3px solid var(--ink);
  background: linear-gradient(180deg, #1a1d20 0%, #0d0f10 100%);
  box-shadow:
    inset 0 0 12px rgb(0 0 0 / 0.65),
    0 3px 0 var(--ink);
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
}

.game-view[data-game-id="corrida"] .corrida-speed-panel__label {
  grid-column: 1 / -1;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: #868e96;
  font-weight: 700;
}

.game-view[data-game-id="corrida"] .corrida-speed-panel__digits {
  grid-column: 1 / 3;
  font-size: clamp(1.35rem, 4.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1;
  color: #51cf66;
  text-shadow:
    0 0 8px rgb(81 207 102 / 0.55),
    0 0 2px rgb(255 255 255 / 0.35);
  font-variant-numeric: tabular-nums;
}

.game-view[data-game-id="corrida"] .corrida-speed-panel.is-boost .corrida-speed-panel__digits {
  color: #ffe14a;
  text-shadow:
    0 0 10px rgb(255 225 74 / 0.65),
    0 0 2px rgb(255 255 255 / 0.35);
}

.game-view[data-game-id="corrida"] .corrida-speed-panel.is-slow .corrida-speed-panel__digits {
  color: #74c0fc;
  text-shadow:
    0 0 8px rgb(116 192 252 / 0.5),
    0 0 2px rgb(255 255 255 / 0.25);
}

.game-view[data-game-id="corrida"] .corrida-speed-panel.is-speed-up .corrida-speed-panel__digits {
  animation: corrida-speed-pulse-up 0.42s ease;
}

.game-view[data-game-id="corrida"] .corrida-speed-panel.is-speed-down .corrida-speed-panel__digits {
  animation: corrida-speed-pulse-down 0.42s ease;
}

.game-view[data-game-id="corrida"] .corrida-speed-panel.is-speed-up {
  box-shadow:
    inset 0 0 12px rgb(0 0 0 / 0.65),
    0 3px 0 var(--ink),
    0 0 14px rgb(81 207 102 / 0.35);
}

.game-view[data-game-id="corrida"] .corrida-speed-panel.is-speed-down {
  box-shadow:
    inset 0 0 12px rgb(0 0 0 / 0.65),
    0 3px 0 var(--ink),
    0 0 14px rgb(255 107 107 / 0.35);
}

@keyframes corrida-speed-pulse-up {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.14);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes corrida-speed-pulse-down {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.game-view[data-game-id="corrida"] .corrida-speed-panel__unit {
  font-size: 0.65rem;
  color: #adb5bd;
  letter-spacing: 0.04em;
  padding-bottom: 2px;
}

.game-view[data-game-id="corrida"] .corrida-car {
  z-index: 5;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.35));
  transition: none;
}

.game-view[data-game-id="corrida"] .race-entity {
  left: calc((var(--lane, 1) * 2 + 1) * 100% / 6);
  margin-left: -26px;
}

.game-view[data-game-id="corrida"] .race-entity.is-cone,
.game-view[data-game-id="corrida"] .race-entity.is-fire {
  z-index: 3;
}

.game-view[data-game-id="corrida"] .race-entity.is-cone svg {
  width: 52px;
  height: 52px;
}

.game-view[data-game-id="corrida"] .race-entity.is-fire svg {
  width: 56px;
  height: 56px;
  margin-top: -2px;
}

.game-view[data-game-id="corrida"] .race-entity.is-fire {
  filter: drop-shadow(0 0 8px rgb(255 107 107 / 0.75));
  animation: corrida-fire-flicker 0.45s ease-in-out infinite alternate;
}

@keyframes corrida-fire-flicker {
  from {
    transform: translateY(-50%) scale(1);
  }

  to {
    transform: translateY(-50%) scale(1.06);
  }
}

.game-view[data-game-id="corrida"] .space-touch {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 6;
  pointer-events: none;
}

.game-view[data-game-id="corrida"] .space-touch-btn {
  pointer-events: auto;
  border: 0;
  background: transparent;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 100%;
}

.game-view[data-game-id="corrida"] .space-touch-btn:active {
  background: linear-gradient(90deg, rgb(255 255 255 / 0.08), transparent 45%);
}

.game-view[data-game-id="corrida"] .space-touch-btn[data-steer="right"]:active {
  background: linear-gradient(270deg, rgb(255 255 255 / 0.08), transparent 45%);
}

.game-view[data-game-id="corrida"] .corrida-arena[data-track]:focus-visible {
  outline: 3px solid #ffe14a;
  outline-offset: 2px;
}

.game-view[data-game-id="corrida"] .space-controls--corrida {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}

.game-view[data-game-id="corrida"] .space-steer {
  background: linear-gradient(180deg, #fff3bf, #ffe14a);
  border: 3px solid var(--ink);
  font-size: 1.85rem;
  min-height: 76px;
  touch-action: manipulation;
}

.game-view[data-game-id="corrida"] .space-steer:active,
.game-view[data-game-id="corrida"] .space-steer.is-steer-active {
  transform: scale(0.96);
  background: linear-gradient(180deg, #ffe14a, #ff922b);
  box-shadow: inset 0 3px 0 rgb(0 0 0 / 0.12);
}

@keyframes corrida-shake {
  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-4px, 2px);
  }

  50% {
    transform: translate(4px, -2px);
  }

  75% {
    transform: translate(-2px, -3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-view[data-game-id="corrida"] .corrida-lane-stripes {
    animation: none !important;
  }

  .game-view[data-game-id="corrida"] .corrida-arena.is-shake {
    animation: none !important;
  }

  .game-view[data-game-id="corrida"] .corrida-speed-panel.is-speed-up .corrida-speed-panel__digits,
  .game-view[data-game-id="corrida"] .corrida-speed-panel.is-speed-down .corrida-speed-panel__digits {
    animation: none !important;
  }

  .game-view[data-game-id="corrida"] .race-entity.is-fire {
    animation: none !important;
  }
}