body {
  margin: 0;
  background: #111;
  color: #fff;
  font-family: Arial;
}

#taxi-container {
  position: fixed;
  bottom: 20px;
  width: 100%;
  height: 150px;
  z-index: 9999;
}

/* bakgrunn */
.bg {
  position: absolute;
  bottom: 80px;
  width: 200%;
  height: 40px;
  background: repeating-linear-gradient(#222, #222 40px, #1a1a1a 40px, #1a1a1a 80px);
  animation: moveBg 6s linear infinite;
  opacity: 0.3;
}

/* vei */
.road {
  position: absolute;
  bottom: 40px;
  left: 10%;
  width: 80%;
  height: 28px;
  background: #2a2a2a;
  border-radius: 14px;
  overflow: hidden;
}

.road::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 2px;
  top: 50%;
  background: repeating-linear-gradient(
    to right,
    #fff 0px,
    #fff 10px,
    transparent 10px,
    transparent 20px
  );
  animation: roadMove 1s linear infinite;
}

.road.active {
  box-shadow: 0 0 10px #0f0;
}

/* taxi */
#taxi {
  position: absolute;
  left: 10%;
  bottom: 40px;
  cursor: grab;
  transition: transform 0.1s;
}

#taxi svg {
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.4));
}

.wheel {
  fill: #111;
  transform-origin: center;
}

#taxi.moving .wheel {
  animation: spin 0.4s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* røyk */
#smoke-container {
  position: absolute;
  left: 10%;
  bottom: 50px;
}

.smoke {
  width: 8px;
  height: 8px;
  background: rgba(200,200,200,0.4);
  border-radius: 50%;
  position: absolute;
  animation: smoke 1s forwards;
}

@keyframes smoke {
  to {
    transform: translate(-20px, -20px);
    opacity: 0;
  }
}

/* progress */
#progress-bar {
  position: absolute;
  bottom: 10px;
  left: 10%;
  width: 80%;
  height: 5px;
  background: #222;
}

#progress-fill {
  height: 100%;
  width: 0%;
  background: #0f0;
}

/* login skilt */
#taxi-stop {
  position: absolute;
  right: 10%;
  bottom: 65px;
}

.sign-box {
  background: #007bff;
  padding: 6px;
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
}

/* hint */
#swipe-hint {
  position: absolute;
  bottom: -5px;
  left: 10%;
  font-size: 12px;
  color: #aaa;
}

/* overlay */
#success-overlay {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,255,0,0.2);
}

#success-overlay.show {
  display: flex;
}

.success-text {
  font-size: 20px;
  color: #0f0;
}

/* animasjoner */
@keyframes moveBg {
  to { transform: translateX(-50%); }
}

@keyframes roadMove {
  to { transform: translateX(-50%); }
}

/* mobil only */
@media (min-width: 769px) {
  #taxi-container {
    display: none;
  }
}