/* Rover street game (Coral). Idle: the looping scene. Playing: a taller road with three lanes. */

.street { transition: height 0.5s ease; }
.street.playing { height: 410px; }
.street.playing .street-sky { bottom: 132px; }
.street.playing .street-road { height: 132px; transition: height 0.5s ease; }
.street.playing .street-lane { display: none; }
.street.playing .skyline { animation: none; }

.street-road { transition: height 0.5s ease; }
.street-sky { transition: bottom 0.5s ease; }

/* the rover moves to the left of the road so oncoming things have room to be seen */
.street.playing .street-rover {
  left: 25%;
  width: 118px;
  transition: left 0.6s ease, width 0.4s ease, bottom 0.15s ease;
}

/* painted dashes between the three lanes (moved by the game) */
.sg-lanes { position: absolute; left: 0; right: 0; bottom: 0; height: 132px; display: none; pointer-events: none; }
.street.playing .sg-lanes { display: block; }
.sg-lanes i {
  position: absolute; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(to right, rgba(255,255,255,0.8) 0 40px, transparent 40px 96px);
  background-size: 192px 3px;
}
.sg-lanes i:nth-child(1) { bottom: 86px; }
.sg-lanes i:nth-child(2) { bottom: 46px; }

.sg-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sg-obs { position: absolute; left: 0; will-change: transform; }
.sg-pothole {
  width: 84px; height: 24px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 55%, #05070b 0 52%, #1b222d 58%, rgba(255,255,255,0.22) 63%, transparent 68%);
}
.sg-dump { width: 62px; height: 52px; }
.sg-dump svg { display: block; width: 100%; height: 100%; }

.street-rover.sg-hit img { animation: sgShake 0.35s linear 1; filter: drop-shadow(0 0 8px #ef4444) saturate(1.6); }
.street-rover.sg-blink img { opacity: 0.55; }
@keyframes sgShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px) rotate(-3deg); }
  75% { transform: translateX(6px) rotate(3deg); }
}

/* start button, HUD, messages */
.sg-start {
  position: absolute; left: 50%; top: 56px; transform: translateX(-50%);
  z-index: 40; cursor: pointer; border: 0;
}
.street.playing .sg-start { display: none; }

.sg-hud {
  position: absolute; left: 18px; top: 14px; z-index: 40; display: none; gap: 18px; align-items: center;
  padding: 8px 16px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border2); backdrop-filter: blur(8px);
  font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.08em; color: var(--text);
}
.street.playing .sg-hud { display: flex; }
.sg-hud b { color: var(--accent); font-weight: 700; }
.sg-hearts { color: #ef4444; letter-spacing: 2px; }

.sg-help {
  position: absolute; right: 18px; top: 14px; z-index: 40; display: none;
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.06em; color: var(--muted);
  padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--border);
}
.street.playing .sg-help { display: block; }

.sg-over {
  position: absolute; inset: 0; z-index: 50; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(9, 14, 26, 0.55); color: #fff; text-align: center;
  -webkit-mask-image: none; mask-image: none;
}
.sg-over.show { display: flex; }
.sg-over h3 { font-family: var(--font-display, serif); font-size: 2.6rem; margin: 0; color: #fff; }
.sg-over p { margin: 0; font-family: var(--font-mono, monospace); font-size: 13px; letter-spacing: 0.08em; }
.sg-over .sg-row { display: flex; gap: 12px; margin-top: 8px; }

.sg-pad { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 45; display: none; justify-content: space-between; padding: 0 14px; pointer-events: none; }
.sg-pad button {
  pointer-events: auto; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border2);
  background: var(--card); color: var(--accent); font-size: 20px; cursor: pointer; touch-action: manipulation;
}
.sg-pad .sg-pad-group { display: flex; gap: 10px; }
@media (hover: none) and (pointer: coarse) { .street.playing .sg-pad { display: flex; } }

@media (max-width: 768px) {
  .street.playing { height: 380px; }
  .sg-help { display: none !important; }
  .sg-hud { gap: 10px; font-size: 11px; padding: 6px 12px; }
}