/* The game's street as a compact band at the top of every screen: sky
   (CSS gradient matching StreetSky), cloud bank, far skyline, near city,
   a row of restaurants and the pavement; then the road and the park. Every layer is sized as a share
   of the band's height, so the 1x rasters are drawn at about half size on
   phones (sharp on 2x/3x screens) and never above ~0.8x on desktop.
   Rasters come from css/assets-manifest.css. */
.band {
  position: relative; z-index: 1; flex: none;
  height: calc(var(--band-h) + var(--road-h) + var(--safe-t));
  overflow: hidden;
  background: linear-gradient(var(--sky-top) 0%, var(--sky-low) 62%);
}
.scene { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--band-h) + var(--safe-t)); pointer-events: none; }
.scene > div { position: absolute; left: 0; right: 0; background-repeat: repeat-x; background-size: auto 100%; }
.scene-clouds { bottom: 40%; height: 34%; background-image: var(--art-clouds); opacity: .92; animation: scene-drift 160s linear infinite; }
.scene-skyline { bottom: 16%; height: 52%; background-image: var(--art-skyline); background-position: 38% 0; }
.scene-city-close { bottom: 8%; height: 32%; background-image: var(--art-city-close); background-position: 20% 0; }
.scene-restaurants { bottom: 7%; height: 42%; background-image: var(--art-restaurants); background-position: 54% 0; }
.scene-sidewalk { bottom: 0; height: 10%; background-image: var(--art-sidewalk); }
.scene > .scene-hydrant { bottom: 5%; height: 13%; left: calc(50% + min(44vw, 400px)); right: auto; width: 20%; background: var(--art-hydrant) 0 0 / auto 100% no-repeat; }

/* The road, drawn in CSS: asphalt, dashed lane line, a zebra crossing. */
.band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--road-h);
  --zebra-w: clamp(34px, 8vw, 96px);
  --zebra-x: max(6%, calc(50% - 420px));
  --stripe: calc(var(--road-h) / 11);
  background:
    repeating-linear-gradient(180deg, var(--lane) 0 var(--stripe), transparent var(--stripe) calc(var(--stripe) * 2)) var(--zebra-x) 50% / var(--zebra-w) calc(var(--stripe) * 9) no-repeat,
    linear-gradient(var(--road), var(--road)) var(--zebra-x) 50% / calc(var(--zebra-w) + 16px) 100% no-repeat,
    repeating-linear-gradient(90deg, var(--lane) 0 calc(var(--road-h) * .42), transparent calc(var(--road-h) * .42) calc(var(--road-h) * .95)) 0 50% / 100% max(3px, calc(var(--road-h) * .055)) no-repeat,
    var(--road);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .13);
}

/* Below the road: the lower pavement, then the park lawn to the bottom of
   the page. Purely decorative and absolutely placed (no layout shift). */
.ground {
  position: absolute; z-index: 0; left: 0; right: 0; bottom: 0;
  top: calc(var(--band-h) + var(--road-h) + var(--safe-t));
  pointer-events: none; overflow: hidden;
  background: var(--art-park-tile) 20px calc(var(--pave-h) + 40px) / 520px auto repeat, var(--grass);
}
.ground::before { /* the sidewalk raster turned over: kerb towards the road */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--pave-h);
  background: var(--art-sidewalk) 0 0 / auto 100% repeat-x;
  transform: scaleY(-1);
  box-shadow: 0 -3px 0 rgba(60, 90, 30, .18);
}
@media (min-width: 700px) and (min-height: 600px) {
  .ground { /* mowing stripes on big screens */
    background:
      var(--art-park-tile) 20px calc(var(--pave-h) + 40px) / 520px auto repeat,
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 90px, transparent 90px 180px),
      var(--grass);
  }
  .ground::after { /* trees at the edges, clear of the form column */
    content: ""; position: absolute; inset: var(--pave-h) 0 0 0;
    --edge: max(2vw, calc(50% - 560px));
    --in: 0px;                     /* inner trees only where there is room */
    background:
      var(--art-tree-round) left var(--edge) top 40px / 118px auto no-repeat,
      var(--art-tree-pine) right var(--edge) top 26px / 108px auto no-repeat,
      var(--art-tree-pine) left calc(var(--edge) + var(--in)) top 330px / 96px auto no-repeat,
      var(--art-tree-round) right calc(var(--edge) + var(--in) * .75) top 300px / 124px auto no-repeat,
      var(--art-tree-round) left calc(var(--edge) - 10px) top 640px / 110px auto no-repeat,
      var(--art-tree-pine) right calc(var(--edge) + 10px) top 600px / 100px auto no-repeat;
  }
}

/* one cloud tile: 640/132 of the layer height (34% of the band) */
@keyframes scene-drift { to { background-position-x: calc((var(--band-h) + var(--safe-t)) * -1.6485); } }
@media (prefers-reduced-motion: reduce) { .scene-clouds { animation: none; } }
@media (min-width: 1200px) { .ground::after { --in: 120px; } }

/* ---------- the showpiece restaurant, centred on the pavement ---------- */
.scene > .hero {
  left: 50%; right: auto; bottom: 3.5%;
  height: min(92%, calc((100vw - 16px) * 392 / 540));
  aspect-ratio: var(--hero-ar);
  transform: translateX(-50%);
  container-type: inline-size;
}
.hero-art { position: absolute; inset: 0; background: var(--art-hero) center / 100% 100% no-repeat; }
.hero > i { position: absolute; display: block; }
.hero-name {
  display: grid !important; place-items: center; text-align: center; white-space: nowrap;
  font-family: var(--font-title); font-weight: 800; font-style: normal;
  font-size: 14px; font-size: 4.25cqw; line-height: 1; letter-spacing: .02em;
  color: #7a2318;
}
.hero-glow { /* warm light behind the lit panes */
  border-radius: 50% 50% 12% 12%;
  background: radial-gradient(closest-side, rgba(255, 236, 150, .5), rgba(255, 214, 110, 0));
  transform: scale(1.3); mix-blend-mode: screen;
  animation: hero-glow 5s ease-in-out infinite;
}
.hero-lamp {
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 190, 90, .8), rgba(255, 150, 60, 0));
  transform: scale(2.4); mix-blend-mode: screen;
  animation: hero-flicker 2.3s steps(1) infinite;
}
.hero-torch { overflow: hidden; }
.hero-torch b { display: block; height: 100%; background: var(--art-hero-torch) 0 0 / 100% 100% no-repeat; animation: hero-torch .8s steps(8) infinite; }
.hero-spark {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.200 7.800L20 10l-7.800 2.200L10 20l-2.200-7.800L0 10l7.800-2.200z' fill='%23fff7c2' stroke='%23f2b824' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: hero-twinkle 3.5s ease-in-out infinite;
}
.hero-steam {
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85) 55%, rgba(255, 255, 255, 0));
  opacity: 0; animation: hero-steam 6s ease-out infinite;
}
@keyframes hero-glow { 50% { opacity: .65; } }
@keyframes hero-flicker { 0%, 100% { opacity: 1; } 18% { opacity: .78; } 34% { opacity: .95; } 52% { opacity: .7; } 70% { opacity: .9; } }
@keyframes hero-torch { to { transform: translateX(-100%); } }
@keyframes hero-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes hero-steam { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: .6; } 100% { opacity: 0; transform: translate(70%, -300%) scale(1.8); } }
@media (prefers-reduced-motion: reduce) {
  .hero-glow, .hero-lamp, .hero-torch b, .hero-steam { animation: none; }
  .hero-spark { animation: none; opacity: .9; }
}