/* ═══════════════════════════════════════════════════════════════════════════
   Sky and street: a pale blue gradient with a sun (or a moon and stars), and
   a lane along the bottom for the taxi.
   ═════════════════════════════════════════════════════════════════════════ */

.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, var(--sky-day-top) 0%, var(--sky-day-bot) 100%);
  overflow: hidden;
}
.sky.is-night {
  background: linear-gradient(180deg, var(--sky-night-top) 0%, var(--sky-night-bot) 100%);
}

.sky-orb { position: absolute; top: 28px; right: 28px; width: 52px; height: 52px; }
.sky-orb svg { display: block; }

.sky-stars { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.sky.is-night .sky-stars { opacity: 1; }
.sky-stars i {
  position: absolute;
  background: #ffffff;
  border-radius: 50%;
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ── The street ─────────────────────────────────────────────────────────── */
/* No road is drawn: the lane is just the bottom of the sky, and the taxi is
   what makes it a street. */
.street {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--street-h);
  z-index: 4;
  pointer-events: none;     /* never swallow a swipe meant for the content */
  overflow: hidden;
}

.taxi {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 72px;
  height: 38px;
  line-height: 0;
  transform: translateX(-90px);   /* parked off-screen until street.js starts it */
  will-change: transform;
}
.taxi svg, .dog-walker svg { display: block; }

.dog-walker {
  position: absolute;
  right: 64px;
  bottom: 6px;
  width: 68px;
  height: 42px;
  line-height: 0;
}

/* On the game screen the street is a real row in the column rather than an
   absolute band, so the tower can stand on it. Absolutely positioned, it ended
   up underneath the on-screen keyboard and the building floated. */
.play-stage {
  position: relative;
  z-index: 3;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.street-game {
  position: relative;
  flex: 0 0 var(--street-h);
}

/* On the narrowest phones a smaller sun, tucked into the corner, leaves the
   game HUD room for the timer and both chips on one line (see screens.css). */
@media (max-width: 360px) {
  .sky-orb { top: 16px; right: 12px; transform: scale(0.8); transform-origin: top right; }
}