/* =====================================================================
   4TH AVE — street.css
   The scene is a 1408×768 "stage" in painting-pixel units, scaled to
   cover the viewport. Everything inside #stage is positioned in those
   units, so the numbers in config.js map 1:1 onto the painting.
   ===================================================================== */

:root {
  --red:    #ff2f3f;
  --red-hi: #ff8a94;
  --cyan:   #37e3ff;
  --cyan-hi:#d9fbff;
  --green:  #8cff6a;
  --amber:  #ffb347;
  --cream:  #f5e6c4;
  --chrome-hi: #e9edf3;
  --chrome-lo: #5c6572;
}

html, body {
  margin: 0; height: 100%;
  background: #05060a;
  color: var(--cream);
  font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#viewport { position: fixed; inset: 0; background: #05060a; }

/* the scroller pans sideways on narrow screens; hidden scrollbar */
/* all panning / zooming is done in JS on #camera, so the browser gets no gestures here */
#scroller { position: absolute; inset: 0; overflow: hidden; touch-action: none; overscroll-behavior: none; }
#scroller.can-pan { cursor: grab; }
#scroller.is-dragging { cursor: grabbing; }

#camera, #breath, #zoom { position: absolute; left: 0; top: 0; }
#camera { will-change: transform; transform-origin: 0 0; }
#breath { transform-origin: 50% 60%; animation: breath 18s ease-in-out infinite alternate; }
#zoom   { transform-origin: 50% 50%; transition: transform .95s cubic-bezier(.7,0,.3,1), filter .95s ease; }
#zoom.is-zooming { transform: scale(2.6); filter: blur(1.5px) brightness(1.25); }
#zoom.is-following { transition: transform 1.1s cubic-bezier(.6,0,.8,.5) .3s, filter .9s ease .45s; filter: blur(3px) brightness(.75); }

#stage {
  position: relative; width: 1408px; height: 768px;
  transform-origin: 0 0; transform: scale(var(--fit, 1));
  /* --plate is set by street.js (absolute URL of the background painting) */
}
#plate {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}

@keyframes breath { from { transform: scale(1) } to { transform: scale(1.014) } }

/* ---------------------------------------------------------------------
   Hotspots (the seven links)
   --------------------------------------------------------------------- */
.hot {
  position: absolute; left: 0; top: 0; display: block;
  text-decoration: none; color: inherit; cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.hot:focus-visible .tube { opacity: 1 !important; }

/* --- flat signs, mapped onto the painting with matrix3d ------------- */
.sign { position: absolute; left: 0; top: 0; transform-origin: 0 0; backface-visibility: hidden; }
.decor { pointer-events: none; }
.sign svg { display: block; overflow: visible; }

/* neon lettering ----------------------------------------------------- */
.neon {
  font-family: 'Lilita One', 'Passion One', Impact, 'Arial Black', sans-serif;
  paint-order: stroke fill;
  transition: filter .25s ease, fill .25s ease, stroke .25s ease;
}
.neon-red {
  fill: #ff4753; stroke: #ffd6d9; stroke-width: 1;
  filter: drop-shadow(0 0 1px #ffb9be) drop-shadow(0 0 4px #ff2f3f) drop-shadow(0 0 10px rgba(255,40,60,.75));
}
.hot:hover .neon-red, .hot.is-active .neon-red, .hot:focus-visible .neon-red {
  fill: #ff6a75; stroke: #fff;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #ff2f3f) drop-shadow(0 0 14px #ff1e33) drop-shadow(0 0 32px rgba(255,30,60,.9));
}
.neon-cyan {
  fill: #dffaff; stroke: #7deeff; stroke-width: .6;
  filter: drop-shadow(0 0 1px #9ff1ff) drop-shadow(0 0 4px #37e3ff) drop-shadow(0 0 10px rgba(30,200,255,.8));
}
.powered .neon-cyan {
  fill: #fff; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #37e3ff) drop-shadow(0 0 16px #22c9ff) drop-shadow(0 0 30px rgba(30,200,255,.9));
}
.script { font-family: 'Yellowtail', 'Brush Script MT', cursive; }

/* neon border tubes: dim glass by default, strike on when hovered ------ */
.tube {
  fill: none; stroke-width: 2.2; stroke-linejoin: round;
  opacity: .16; transition: opacity .2s;
}
.tube-red   { stroke: var(--red); }
.tube-cyan  { stroke: var(--cyan); }
.tube-green { stroke: var(--green); }
.hot:hover .tube, .hot.is-active .tube, .hot:focus-visible .tube {
  opacity: 1; animation: strike .75s steps(1, end) 1;
}
.hot:hover .tube-red, .hot.is-active .tube-red, .hot:focus-visible .tube-red {
  filter: drop-shadow(0 0 1.5px #ffb9be) drop-shadow(0 0 5px #ff2f3f) drop-shadow(0 0 14px #ff1e33) drop-shadow(0 0 26px rgba(255,30,60,.8));
}
.hot:hover .tube-cyan, .hot.is-active .tube-cyan, .hot:focus-visible .tube-cyan {
  filter: drop-shadow(0 0 1.5px #bdf6ff) drop-shadow(0 0 5px #37e3ff) drop-shadow(0 0 14px #22c9ff) drop-shadow(0 0 24px rgba(30,200,255,.8));
}
.hot:hover .tube-green, .hot.is-active .tube-green, .hot:focus-visible .tube-green {
  filter: drop-shadow(0 0 1.5px #dfffd6) drop-shadow(0 0 5px #8cff6a) drop-shadow(0 0 14px #5aff2e) drop-shadow(0 0 24px rgba(120,255,80,.8));
}
@keyframes strike {
  0% { opacity: 0 } 6% { opacity: 1 } 12% { opacity: .05 } 20% { opacity: 1 }
  27% { opacity: .3 } 34% { opacity: 1 } 55% { opacity: .85 } 100% { opacity: 1 }
}

/* intro: every tube strikes once, then settles back to dim glass */
.intro .tube { animation: intro-strike 1.1s steps(1, end) both; animation-delay: calc(var(--i, 0) * .22s + .4s); }
@keyframes intro-strike {
  0% { opacity: 0 } 8% { opacity: 1 } 14% { opacity: .05 } 22% { opacity: 1 }
  30% { opacity: .25 } 38% { opacity: 1 } 70% { opacity: .9 } 100% { opacity: .16 }
}

/* the big sign's halo bloom (an html div behind the svg) -------------- */
.halo {
  position: absolute; inset: -18% -12%; border-radius: 30px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,60,80,.55) 0%, rgba(255,40,70,.28) 35%, rgba(255,40,70,0) 72%);
  opacity: 0; transition: opacity .35s ease; filter: blur(6px); mix-blend-mode: screen;
}
.hot:hover .halo, .hot.is-active .halo, .hot:focus-visible .halo { opacity: 1; }
.halo-cyan { background: radial-gradient(ellipse at center, rgba(60,220,255,.5) 0%, rgba(40,200,255,.25) 35%, rgba(40,200,255,0) 72%); }
.halo-green{ background: radial-gradient(ellipse at center, rgba(140,255,100,.5) 0%, rgba(120,255,80,.25) 35%, rgba(120,255,80,0) 72%); }
.halo-amber{ background: radial-gradient(ellipse at center, rgba(255,190,90,.55) 0%, rgba(255,170,70,.28) 35%, rgba(255,170,70,0) 72%); }

/* slow ambient flicker on always-on neon -------------------------------- */
.flick   { animation: neonflick 7.3s infinite; }
.flick-2 { animation: neonflick 11.1s infinite; animation-delay: 2.2s; }
.flick-3 { animation: neonflick 9.4s infinite;  animation-delay: 4.7s; }
@keyframes neonflick {
  0%, 89%, 100% { opacity: 1 }
  90% { opacity: .55 } 91% { opacity: 1 } 93.5% { opacity: .8 } 94.5% { opacity: 1 }
}

/* marquee: bulbs on a dotted stroke, two phases that swap = chase ----- */
.bulbs {
  fill: none; stroke-width: 3.1; stroke-linecap: round;
  stroke-dasharray: 0 7; filter: drop-shadow(0 0 1.5px #ffcf7a);
}
.bulbs.b1 { stroke: #ffe3a3; animation: chase 1.1s steps(2, end) infinite; }
.bulbs.b2 { stroke: #ff9e45; stroke-dashoffset: 3.5; opacity: .65; animation: chase 1.1s steps(2, end) infinite; }
@keyframes chase { to { stroke-dashoffset: -7; } }
.hot:hover .bulbs, .hot.is-active .bulbs, .hot:focus-visible .bulbs { animation-duration: .28s; }
.hot:hover .bulbs.b1, .hot.is-active .bulbs.b1, .hot:focus-visible .bulbs.b1 {
  stroke: #fff7dd; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #ffcf7a) drop-shadow(0 0 12px #ff9e45);
}
.marq {
  font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif; font-weight: 600;
  fill: #d8382b; letter-spacing: .04em;
  filter: drop-shadow(0 0 1px rgba(255,120,80,.6)); transition: filter .25s, fill .25s;
}
.hot:hover .marq, .hot.is-active .marq, .hot:focus-visible .marq {
  fill: #ff5a3c; filter: drop-shadow(0 0 2px #ffb59a) drop-shadow(0 0 6px #ff5a3c) drop-shadow(0 0 12px rgba(255,80,50,.7));
}

/* blade + hotel: stacked letters that cascade on hover ----------------- */
.stack text {
  font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif; font-weight: 600;
  fill: var(--cream); transition: fill .2s, filter .2s;
}
.blade .stack text { fill: #f1d9a8; filter: drop-shadow(0 0 1px rgba(255,140,90,.5)); }
.hot:hover .blade .stack text, .hot.is-active .blade .stack text, .hot:focus-visible .blade .stack text {
  fill: #fff0d0; filter: drop-shadow(0 0 2px #ffb56a) drop-shadow(0 0 6px #ff8a3c);
  animation: cascade 1.4s ease-out both; animation-delay: calc(var(--i) * .07s);
}
.hotel-sign .stack text { fill: #fff6c8; filter: drop-shadow(0 0 1px #d6ff9a) drop-shadow(0 0 4px rgba(140,255,100,.7)); }
.hot:hover .hotel-sign .stack text, .hot.is-active .hotel-sign .stack text, .hot:focus-visible .hotel-sign .stack text {
  fill: #fff; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #8cff6a) drop-shadow(0 0 14px #5aff2e);
  animation: cascade 1.2s ease-out both; animation-delay: calc(var(--i) * .11s);
}
@keyframes cascade { 0% { opacity: .35 } 30% { opacity: 1 } 45% { opacity: .5 } 60% { opacity: 1 } 100% { opacity: 1 } }

/* drugstore / street lettering ----------------------------------------- */
.storefront {
  font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif; font-weight: 600; letter-spacing: .03em;
  fill: #efe4c8; transition: fill .2s, filter .2s;
}
.hot:hover .storefront, .hot.is-active .storefront, .hot:focus-visible .storefront {
  fill: #fff; filter: drop-shadow(0 0 2px #bdf6ff) drop-shadow(0 0 6px #37e3ff);
}
.streetname { font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif; font-weight: 600; fill: #f4f7f2; letter-spacing: .04em; }

/* --- cars ------------------------------------------------------------- */
.car { overflow: visible; }
.car-inner { position: absolute; inset: 0; transform-origin: 50% 80%; will-change: transform, filter; }
.car-body {
  position: absolute; inset: 0;
  background-image: var(--plate); background-size: 1408px 768px; background-repeat: no-repeat;
  background-position: var(--bx) var(--by);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
                      linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
              linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
.car-body.has-sprite { background: var(--sprite) center / contain no-repeat; -webkit-mask: none; mask: none; }

/* where the car was — fades in as it leaves (only needed with the painted plate) */
.car-patch {
  position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease .4s;
  background: radial-gradient(ellipse at 50% 60%, #1d2130 0%, #141824 55%, rgba(20,24,36,0) 100%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                      linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
              linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
.car.is-driving .car-patch { opacity: .6; }

/* headlight beams + light pool on the road */
.beam {
  position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,249,224,1) 0%, rgba(255,232,170,.7) 18%, rgba(255,210,130,.28) 40%, rgba(255,200,120,0) 65%);
  opacity: 0; transform: scale(.55); pointer-events: none; mix-blend-mode: screen;
}
.pool {
  position: absolute; left: 50%; bottom: -22%; width: 130%; height: 60%; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 30%, rgba(255,225,160,.45) 0%, rgba(255,210,140,.18) 40%, rgba(255,200,120,0) 70%);
  opacity: 0; pointer-events: none; mix-blend-mode: screen; transition: opacity .4s;
  filter: blur(3px);
}
.hot:hover .beam, .hot.is-active .beam, .hot:focus-visible .beam { animation: flash 1.2s ease-out forwards; }
.hot:hover .pool, .hot.is-active .pool, .hot:focus-visible .pool { opacity: 1; }
.car.is-driving .beam { animation: highbeam .35s ease-out forwards !important; }
@keyframes flash {
  0%   { opacity: 0;  transform: scale(.5) }
  9%   { opacity: 1;  transform: scale(1.15) }
  18%  { opacity: .15; transform: scale(.8) }
  30%  { opacity: 1;  transform: scale(1.2) }
  42%  { opacity: .3; transform: scale(.9) }
  100% { opacity: .9; transform: scale(1) }
}
@keyframes highbeam { to { opacity: 1; transform: scale(1.9) } }

/* license-plate style label that hangs on the car while hovered */
.car-plate {
  position: absolute; left: 50%; bottom: -6px; transform: translate(-50%, 8px) scale(.9);
  font: 600 11px/1 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: .18em;
  color: #1a1c22; background: linear-gradient(#f6f2e4, #d9d2bd); border: 1.5px solid #6a6f7a; border-radius: 3px;
  padding: 3px 7px 2px; box-shadow: 0 1px 0 #fff inset, 0 2px 6px rgba(0,0,0,.6);
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap;
}
.hot:hover .car-plate, .hot.is-active .car-plate, .hot:focus-visible .car-plate { opacity: 1; transform: translate(-50%, 0) scale(1); }
.car.is-driving .car-plate { opacity: 0; }

/* drive-off paths (one per car) */
.car-cadillac.is-driving .car-inner { animation: drive-toward 1.15s cubic-bezier(.4,0,.7,.25) forwards; }
.car-woody.is-driving   .car-inner { animation: drive-left-near 1.15s cubic-bezier(.4,0,.7,.25) forwards; }
.car-chevy.is-driving   .car-inner { animation: drive-left-far  1.2s cubic-bezier(.4,0,.7,.25) forwards; }
/* timing functions apply per keyframe segment: a quick lurch, then two accelerating legs */
@keyframes drive-toward {
  0%   { transform: translate(0,0) scale(1);                        filter: blur(0); animation-timing-function: ease-out }
  10%  { transform: translate(3px,-2px) scale(1.03) rotate(-.6deg); filter: blur(0); animation-timing-function: ease-in }
  50%  { transform: translate(-150px, 150px) scale(1.9);            filter: blur(.5px); animation-timing-function: ease-in }
  100% { transform: translate(-520px, 470px) scale(3.6);            filter: blur(6px) brightness(1.15) }
}
@keyframes drive-left-near {
  0%   { transform: translate(0,0) scale(1);                        filter: blur(0); animation-timing-function: ease-out }
  10%  { transform: translate(4px,-1px) scale(1.02);                filter: blur(0); animation-timing-function: ease-in }
  50%  { transform: translate(-210px, 85px) scale(1.45);            filter: blur(.5px); animation-timing-function: ease-in }
  100% { transform: translate(-640px, 260px) scale(2.3);            filter: blur(6px) }
}
@keyframes drive-left-far {
  0%   { transform: translate(0,0) scale(1);                        filter: blur(0); animation-timing-function: ease-out }
  10%  { transform: translate(6px,-1px) scale(1.01);                filter: blur(0); animation-timing-function: ease-in }
  50%  { transform: translate(-470px, 100px) scale(1.4);            filter: blur(1px); animation-timing-function: ease-in }
  100% { transform: translate(-1350px, 280px) scale(2.1);           filter: blur(7px) }
}

/* --- hover tags ------------------------------------------------------- */
.tag {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 3px;
  transform: translate(-50%, -100%) translateY(8px) scale(.94); opacity: 0;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.9,.3,1.3); pointer-events: none; white-space: nowrap;
  --glow: var(--red);
}
.tag.is-shown { opacity: 1; transform: translate(-50%, -100%) translateY(0) scale(1); }
.tag-label {
  font: 600 15px/1 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: .16em; color: #fff;
  padding: 7px 13px 6px; border-radius: 5px;
  background: linear-gradient(#3d424d, #171a21 55%, #23272f);
  border: 1px solid #a3aab7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 10px rgba(0,0,0,.65), 0 0 16px var(--glow);
  text-shadow: 0 0 6px var(--glow), 0 0 12px var(--glow);
}
.tag-hint {
  font: 500 9.5px/1 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: .28em; text-transform: uppercase;
  color: #ffdca8; text-shadow: 0 0 6px rgba(255,180,90,.9), 0 1px 2px #000;
}
.tag::after { /* little pin */
  content: ""; width: 1px; height: 8px; background: linear-gradient(var(--glow), transparent); opacity: .8;
}

/* ---------------------------------------------------------------------
   Ambient life
   --------------------------------------------------------------------- */
#ambient, #ambient-front { position: absolute; inset: 0; pointer-events: none; }
#ambient-front { z-index: 5; }

.lamp {
  position: absolute; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,200,.95) 0%, rgba(255,232,160,.35) 22%, rgba(255,220,140,0) 62%);
  mix-blend-mode: screen; animation: lamp 5s ease-in-out infinite alternate; filter: blur(1px);
}
@keyframes lamp { from { opacity: .55; transform: scale(.96) } to { opacity: .8; transform: scale(1.06) } }

/* windows: a dark multiply patch that occasionally "switches the light off" */
.win {
  position: absolute; background: #2a1d17; mix-blend-mode: multiply; border-radius: 2px;
  opacity: 0; filter: blur(1.2px); animation: winlife var(--dur, 30s) steps(1, end) infinite; animation-delay: var(--delay, 0s);
}
@keyframes winlife { 0%, 61% { opacity: 0 } 62%, 78% { opacity: .85 } 79%, 100% { opacity: 0 } }
.show-windows .win { animation: none; opacity: .85; outline: 1px solid #2bff88; }
#viewport.fit1 #breath { animation: none; }

/* manhole steam */
.steam {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,235,255,.55) 0%, rgba(230,235,255,.18) 45%, rgba(230,235,255,0) 70%);
  filter: blur(3px); opacity: 0; animation: rise 4.6s ease-out infinite; animation-delay: var(--delay, 0s);
  mix-blend-mode: screen;
}
@keyframes rise {
  0%   { transform: translate(0, 0) scale(.5);        opacity: 0 }
  15%  { opacity: .55 }
  100% { transform: translate(14px, -72px) scale(1.9); opacity: 0 }
}

/* wet-road sheen */
.sheen {
  position: absolute; left: 0; top: 555px; width: 940px; height: 213px; mix-blend-mode: screen; opacity: .45;
  background: linear-gradient(112deg, transparent 38%, rgba(170,195,255,.16) 47%, rgba(255,220,200,.1) 52%, transparent 62%);
  background-size: 320% 100%; animation: sheen 11s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); mask-image: linear-gradient(to bottom, transparent, #000 30%);
}
@keyframes sheen { from { background-position: 120% 0 } to { background-position: -120% 0 } }

/* birds crossing the sky now and then */
.birds { position: absolute; left: 0; top: 0; width: 70px; height: 24px; opacity: 0; animation: fly 34s linear infinite; animation-delay: 6s; }
.birds path { fill: none; stroke: #1b1622; stroke-width: 1.1; stroke-linecap: round; transform-origin: 50% 50%; animation: flap .55s ease-in-out infinite alternate; }
.birds path:nth-child(2) { animation-delay: .18s } .birds path:nth-child(3) { animation-delay: .32s }
@keyframes fly {
  0%    { transform: translate(-90px, 212px) scale(.8); opacity: 0 }
  2%    { opacity: .85 }
  38%   { opacity: .85 }
  40%   { transform: translate(760px, 128px) scale(1); opacity: 0 }
  100%  { transform: translate(760px, 128px); opacity: 0 }
}
@keyframes flap { from { transform: scaleY(.35) } to { transform: scaleY(1) } }

/* cover the generator's sparkle watermark: a copy of the plate from 60px higher up the lamppost */
.patch-corner {
  position: absolute; left: 1318px; top: 680px; width: 70px; height: 62px;
  background: var(--bg) no-repeat; background-size: 1408px 768px; background-position: -1318px -620px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 45%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 45%, transparent 72%);
}

/* --- constellation text in the sky ------------------------------------ */
#sky { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; outline: none; }
#sky .hit { fill: transparent; pointer-events: all; cursor: pointer; }
/* constellation lines: invisible until the sky is hovered / focused; click opens the map */
#sky .cl { fill: none; stroke: #cfe4ff; stroke-width: .6; stroke-linecap: round; opacity: 0; transition: opacity .9s ease; }
#sky:hover .cl, #sky:focus-visible .cl { opacity: .32; }
#sky .st { fill: #dbe9ff; transform-box: fill-box; transform-origin: center; animation: twinkle var(--dur, 4s) ease-in-out infinite alternate; animation-delay: var(--delay, 0s); }
#sky .st.big { filter: blur(.4px) drop-shadow(0 0 2px rgba(200,225,255,.6)); }
#sky:hover .st, #sky:focus-visible .st { --lo: .55; --hi: 1; animation-duration: 1.4s; }
#sky:hover .st.big, #sky:focus-visible .st.big { filter: drop-shadow(0 0 3px rgba(220,235,255,.9)); }
@keyframes twinkle { from { opacity: var(--lo, .35); transform: scale(.85) } to { opacity: var(--hi, .95); transform: scale(1.15) } }

/* ---------------------------------------------------------------------
   Viewport-level chrome: vignette, transitions, HUD, map
   --------------------------------------------------------------------- */
#vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 10;
  background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
}
#fx-fade {
  position: absolute; inset: 0; background: #020207; opacity: 0; pointer-events: none; z-index: 20;
  transition: opacity 1s ease;
}
#viewport.is-loading #fx-fade { opacity: 1; transition: none; }
#viewport.is-leaving #fx-fade { opacity: 1; transition: opacity .8s ease .55s; }
#fx-flash { position: absolute; inset: 0; background: #fff4e6; opacity: 0; pointer-events: none; z-index: 21; }
#fx-flash.go { animation: flashout .9s ease-out forwards; }
@keyframes flashout { 0% { opacity: 0 } 18% { opacity: .85 } 100% { opacity: 0 } }

#hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  padding: 14px max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  pointer-events: none;
}
#hint {
  flex: 1 1 auto; min-width: 0; max-width: 70%;
  font: 500 11.5px/1.5 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: .2em; text-transform: uppercase;
  color: #efdfc2; opacity: 0; text-shadow: 0 1px 2px #000, 0 0 10px rgba(0,0,0,.8);
  transition: opacity 1.2s ease 1.6s;
}
#viewport:not(.is-loading) #hint { opacity: .8; }
#hint b { font-weight: 600; color: #fff; }

.chip {
  flex: 0 0 auto; pointer-events: auto; cursor: pointer; border: 1px solid #a3aab7; border-radius: 999px;
  background: linear-gradient(#3d424d, #171a21 55%, #23272f); color: #fff;
  font: 600 12px/1 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: .22em; text-transform: uppercase;
  padding: 10px 16px 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 10px rgba(0,0,0,.6), 0 0 14px rgba(255,47,63,.35);
  text-shadow: 0 0 6px var(--red); transition: box-shadow .25s, transform .15s;
}
.chip:hover, .chip:focus-visible { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 12px rgba(0,0,0,.7), 0 0 24px rgba(255,47,63,.8); transform: translateY(-1px); outline: none; }

#map {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(3,4,10,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#map[hidden] { display: none; }
.menu {
  width: min(92vw, 420px); padding: 28px 30px 24px; border-radius: 14px; position: relative;
  background: linear-gradient(#2b0a0e, #150406); border: 3px solid #b8c0cc;
  box-shadow: inset 0 0 0 2px #2c3038, 0 0 0 1px #4b525c, 0 30px 80px rgba(0,0,0,.8), 0 0 60px rgba(255,47,63,.25);
}
.menu h2 {
  margin: 0 0 18px; text-align: center;
  font: 400 34px/1 'Lilita One', 'Passion One', Impact, sans-serif; letter-spacing: .04em; color: #ff5563;
  text-shadow: 0 0 2px #fff, 0 0 8px #ff2f3f, 0 0 22px #ff2f3f;
}
.menu ol { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.menu li { counter-increment: n; }
.menu a {
  display: flex; align-items: baseline; gap: 12px; padding: 9px 6px; color: #f5e6c4; text-decoration: none;
  border-bottom: 1px dashed rgba(245,230,196,.2); font: 500 16px/1.2 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: .08em;
  transition: color .15s, text-shadow .15s;
}
.menu a::before { content: counter(n, decimal-leading-zero); font-size: 11px; letter-spacing: .2em; color: #ff8a94; opacity: .8; }
.menu a small { margin-left: auto; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #8fdcff; opacity: .85; }
.menu a:hover, .menu a:focus-visible { color: #fff; text-shadow: 0 0 8px var(--red), 0 0 16px var(--red); outline: none; }
.menu .close { position: absolute; right: 12px; top: 10px; padding: 7px 10px 6px; }

/* debug overlay */
#debug { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#debug polygon, #debug rect { fill: rgba(0,255,120,.08); stroke: #2bff88; stroke-width: 1; }
#debug text { font: 11px monospace; fill: #2bff88; }
#dbg-xy { position: fixed; left: 12px; top: 10px; z-index: 50; font: 12px/1 monospace; color: #2bff88; background: rgba(0,0,0,.6); padding: 6px 8px; border-radius: 4px; }

/* ---------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */
@media (max-width: 520px) {
  #hint { font-size: 10px; letter-spacing: .14em; }
}

@media (prefers-reduced-motion: reduce) {
  #breath, .lamp, .win, .steam, .sheen, .birds, .bulbs, #sky .st { animation: none !important; }
  .tube, .beam, .stack text, .marq { animation: none !important; }
  .hot:hover .beam, .hot.is-active .beam { opacity: .9; transform: scale(1); }
  #zoom, #fx-fade { transition-duration: .35s !important; }
  .car.is-driving .car-inner { animation-duration: .5s !important; }
}