/* BAGWORK identity: asphalt-navy night, streetlight amber, one neon colour per game, money always gold. */
:root { --street-h: calc(100svh - 64px); }
body { background: var(--base); font-family: var(--body); }

/* ---------- top bar ---------- */
#pad .top { position: sticky; top: 0; z-index: 30; height: 64px; padding: 0 clamp(12px, 3vw, 28px); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, rgba(7,10,22,.95), rgba(7,10,22,.75)); border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.wordmark .sign { font: 400 clamp(24px, 3vw, 32px)/1 var(--brand); color: var(--gold); letter-spacing: .5px; transform: rotate(-3deg); display: inline-block;
  -webkit-text-stroke: 1.5px #2a1300; text-shadow: 0 3px 0 #e0343f, 0 6px 0 #2a1300, 0 0 22px rgba(255,200,61,.35); padding: 2px 4px; }
.wordmark small { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; max-width: 160px; line-height: 1.2; }
@media (max-width: 700px) { .wordmark small { display: none; } }

/* ---------- the street: a Miami night strip, full-bleed (the top bar floats over the sky) ---------- */
#pad .top { position: fixed; left: 0; right: 0; background: linear-gradient(180deg, rgba(10,4,26,.82), rgba(10,4,26,0)); backdrop-filter: none; border-bottom: 0; }
.street { position: relative; flex: none; height: 100svh; min-height: 560px; overflow: hidden; background: #0a0420; max-width: none; margin: 0; padding: 0; width: 100%; }
.street .sky { position: absolute; inset: 0; background: linear-gradient(180deg, #07031a 0%, #1a0838 22%, #4a1250 40%, #a8285e 54%, #ff6a5a 62%, #ffb06a 66%, #3a1550 67%, #120828 100%); }
.street .stars { position: absolute; inset: 0 0 55% 0; background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 12%, #fff, transparent), radial-gradient(1px 1px at 72% 30%, #fff, transparent), radial-gradient(1px 1px at 88% 18%, #fff, transparent), radial-gradient(1px 1px at 45% 55%, #fff, transparent), radial-gradient(1.5px 1.5px at 20% 60%, #fff, transparent), radial-gradient(1px 1px at 92% 52%, #fff, transparent), radial-gradient(1px 1px at 65% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 4% 44%, #fff, transparent); opacity: .8; animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .35; } }
/* the setting sun, sliced like a synthwave poster, sinking behind the bay */
.street .sun { position: absolute; left: 50%; bottom: 33%; width: min(46vh, 420px); aspect-ratio: 1; transform: translate(-50%, 50%); border-radius: 50%;
  background: linear-gradient(180deg, #fff1a8 0%, #ffc36a 35%, #ff6a7a 70%, #ff3d9a 100%); box-shadow: 0 0 90px 30px rgba(255,110,110,.35);
  --sunmask: linear-gradient(180deg, #000 0 30%, transparent 30% 32.5%, #000 32.5% 38%, transparent 38% 41%, #000 41% 45.5%, transparent 45.5% 49%, #000 49% 52%, transparent 52%); -webkit-mask: var(--sunmask); mask: var(--sunmask); }
.street .layer { position: absolute; left: -8%; width: 116%; will-change: transform; }
.street .far { bottom: 22%; height: 44%; }
.street .mid { bottom: 21%; height: 34%; opacity: .95; }
.street .glint { animation: glint 3s ease-in-out infinite; animation-delay: var(--d); }
@keyframes glint { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
.street .neonline { filter: drop-shadow(0 0 3px currentColor); }

.street .track { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth; }
.street .track::-webkit-scrollbar { display: none; }
.street .shops { position: absolute; left: 0; bottom: 22%; height: 61%; display: flex; align-items: flex-end; gap: clamp(80px, 8vw, 140px); padding: 0 clamp(40px, 6vw, 120px); min-width: 100%; width: max-content; z-index: 2; }
/* a pink deco sidewalk */
.street .sidewalk { position: absolute; left: 0; bottom: 14%; height: 8%; width: max(100%, var(--track-w, 100%)); z-index: 3;
  background: linear-gradient(180deg, rgba(255,150,200,.18), rgba(0,0,0,.25)), repeating-linear-gradient(90deg, #c45c8a 0 38px, #b0507c 38px 40px), #c45c8a; border-top: 5px solid #f4d0e4; box-shadow: inset 0 6px 14px rgba(0,0,0,.35); }
/* the wet road: neon smeared on the asphalt */
.street .road { position: absolute; left: 0; bottom: 0; height: 14%; width: max(100%, var(--track-w, 100%)); background: linear-gradient(180deg, #120a24, #070412); z-index: 3; }
.street .road .wet i { position: absolute; top: 0; height: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, transparent), transparent 80%); filter: blur(5px); opacity: .85; }
.street .lane { position: absolute; left: 0; right: 0; top: 52%; height: 3px; background: repeating-linear-gradient(90deg, #ffd27a 0 46px, transparent 46px 92px); opacity: .45; }

.shop { position: relative; height: 100%; flex: none; display: flex; flex-direction: column; justify-content: flex-end; }
.shop-btn { position: relative; padding: 0; border: 0; background: none; width: 100%; height: 100%; display: block; cursor: pointer; color: inherit; border-radius: 8px; }
.shop.soon .shop-btn { cursor: default; }
.shop-btn:focus-visible { outline: 3px solid var(--neon); outline-offset: 4px; }
.facade { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; overflow: visible; filter: brightness(.9) saturate(1); transition: filter .35s, transform .35s; }
.shop.lit .facade, .shop:not(.soon) .shop-btn:hover .facade, .shop-btn:focus-visible .facade { filter: brightness(1.12) saturate(1.2) drop-shadow(0 0 26px color-mix(in srgb, var(--neon) 50%, transparent)); transform: translateY(-3px); }
.facade .neon { filter: drop-shadow(0 0 6px var(--glow)); }
.facade .tube { filter: drop-shadow(0 0 5px var(--glow)); }
.facade .chase { animation: chase .9s steps(1) infinite; } .facade .chase.b { animation-delay: .45s; }
@keyframes chase { 50% { opacity: .15; } }
.facade .flicker { animation: flicker 2.6s steps(1) infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 7% { opacity: .15; } 9% { opacity: 1; } 47% { opacity: .2; } 49% { opacity: .9; } 51% { opacity: .1; } 53% { opacity: 1; } }
.facade .blink { animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
/* the bouncer breathes and looks about; at the door he nods and the rope lifts */
.facade .bouncer .b-body { animation: breathe 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: scaleY(1.025); } }
.facade .bouncer .b-head { animation: look 6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes look { 0%, 40%, 100% { transform: none; } 50%, 70% { transform: translateX(-1.5px); } }
.shop.checking .facade .b-head { animation: nod .4s ease-in-out; }
@keyframes nod { 40% { transform: translateY(2px) rotate(-4deg); } }
.facade .rope { transform-box: view-box; transform-origin: 166px 386px; transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
.shop.checking .facade .rope, .shop.opened .facade .rope { transform: rotate(-58deg); }
.shop .say { position: absolute; right: -6%; bottom: 32%; max-width: 210px; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #fff; color: #1a1030; font: 700 13px/1.3 var(--body); box-shadow: 0 6px 20px rgba(0,0,0,.4); opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .2s, transform .2s; pointer-events: none; z-index: 6; }
.shop .say.on { opacity: 1; transform: none; }
.facade .side { transform-box: fill-box; transition: transform .3s ease-out; }
.facade .side.r { transform-origin: 0 50%; transform: scaleX(var(--sr, 0)); }
.facade .side.l { transform-origin: 100% 50%; transform: scaleX(var(--sl, 0)); }
.shop-window { display: none; position: absolute; left: 10%; bottom: 13.5%; width: 47.7%; height: 33.3%; border-radius: 6px; pointer-events: none; }

.sign-live { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; text-align: center; padding: 6px 12px; border-radius: 12px; background: rgba(10,4,26,.82); border: 1px solid color-mix(in srgb, var(--neon) 55%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--neon) 30%, transparent); pointer-events: none; }
.sign-live b { display: block; font: 400 15px/1.1 var(--brand); color: var(--neon); letter-spacing: .3px; }
.sign-live .live { font-size: 12px; font-weight: 700; color: #e9e6f5; }
.sign-live .live .money, .sign-live .live b { color: var(--gold); font-family: inherit; display: inline; font-size: inherit; }
.shop.busy .sign-live { border-color: var(--neon); }
.shop.soon .sign-live b { color: var(--muted); }
.crowd { position: absolute; left: 50%; bottom: -10%; transform: translateX(-50%); height: 15%; pointer-events: none; z-index: 4; }
.crowd svg { height: 100%; }
.crowd .fan { animation: bob 1.1s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; }
@keyframes bob { 50% { transform: translateY(-3px); } }

.street { --m: 50px; }
/* palms in planters between the clubs */
.street .palmtree { position: absolute; bottom: 30%; left: var(--x); width: calc(var(--m) * 3.6); height: calc(var(--m) * 6.8); transform: translateX(-50%); pointer-events: none; }
.street .palmtree svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 10px rgba(255,79,163,.25)); }
.street .palmtree .uplight { position: absolute; left: 50%; bottom: 0; width: 60%; height: 90%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 100%, rgba(59,232,255,.35), transparent 65%); }
.street .palmtree .planter { position: absolute; left: 50%; bottom: -4%; width: 34%; height: 9%; transform: translateX(-50%); border-radius: 4px 4px 8px 8px; background: linear-gradient(#f4d0e4, #c88aa8); }

/* cars: original designs; headlight beams, neon underglow, and a reflection on the wet road */
.street .cars { position: absolute; inset: 0; }
.street .car { position: absolute; left: var(--x, 0); bottom: 34%; width: calc(var(--m) * 4.8); height: calc(var(--m) * 1.5); z-index: 2; }
.street .car .body, .street .car .refl { position: absolute; inset: 0; }
.street .car svg, .street .car img { width: 100%; height: 100%; display: block; overflow: visible; }
.street .car .body { filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.street .car .refl { top: 100%; transform: scaleY(-1); transform-origin: 50% 0; opacity: .28; filter: blur(1.5px); -webkit-mask: linear-gradient(180deg, transparent 30%, #000 100%); mask: linear-gradient(180deg, transparent 30%, #000 100%); }
.street .car .under { position: absolute; left: 8%; right: 8%; bottom: -14%; height: 34%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--glow) 85%, transparent), transparent 70%); filter: blur(4px); }
.street .car .beam { position: absolute; left: 96%; top: 38%; width: 90%; height: 46%; background: linear-gradient(90deg, rgba(255,246,214,.55), transparent); clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%); filter: blur(3px); }
.street .car.left { transform: scaleX(-1); }
.street .car .plate { position: absolute; left: 50%; bottom: 110%; transform: translateX(-50%); white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: #ffd23f; color: #2a1600; font: 400 13px var(--brand); }
.street .car.left .plate { transform: translateX(-50%) scaleX(-1); }
.street .car.cruise { left: 0; animation: cruise var(--dur) linear var(--delay) infinite; transform: translateX(-120%); }
.street .car.cruise.far { bottom: 46%; z-index: 1; }
.street .car.cruise.near { bottom: 8%; z-index: 4; }
.street .car.cruise.left { animation-name: cruiseL; }
.street .car.once { animation-iteration-count: 1; }
@keyframes cruise { from { transform: translateX(-120%); } to { transform: translateX(calc(var(--track-w, 100vw) + 20px)); } }
@keyframes cruiseL { from { transform: translateX(calc(var(--track-w, 100vw) + 20px)) scaleX(-1); } to { transform: translateX(-120%) scaleX(-1); } }

/* your character */
.walker { position: absolute; left: 0; bottom: 16%; height: calc(var(--m, 8px) * 3.1); aspect-ratio: 68 / 150; z-index: 4; transition: transform 1s linear; pointer-events: none; filter: drop-shadow(0 0 3px rgba(255, 79, 163, .4)); }
.walker svg { width: 100%; height: 100%; }
.walker.left svg { transform: scaleX(-1); }
.walker.walking svg { animation: walkbob .32s ease-in-out infinite; }
.walker.walking .leg { animation-duration: .64s !important; }
.walker.walking .leg.l { animation: leg .32s ease-in-out infinite; transform-origin: top; transform-box: fill-box; }
.walker.walking .leg.r { animation: leg .32s ease-in-out infinite reverse; transform-origin: top; transform-box: fill-box; }
.walker.walking .arm.l { animation: arm .64s ease-in-out infinite; transform-origin: 50% 0; transform-box: fill-box; }
.walker.walking .arm.r { animation: arm .64s ease-in-out infinite reverse; transform-origin: 50% 0; transform-box: fill-box; }
.walker:not(.walking) svg { animation: fidget 4s ease-in-out infinite; transform-origin: 50% 100%; }
.walker.hop svg { animation: hop .42s ease-out; }
@keyframes walkbob { 50% { translate: 0 -4px; } }
@keyframes leg { 0% { transform: rotate(14deg); } 50% { transform: rotate(-14deg); } 100% { transform: rotate(14deg); } }
@keyframes arm { 0% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } 100% { transform: rotate(-12deg); } }
@keyframes fidget { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-3deg); } 86% { transform: rotate(3deg); } }
@keyframes hop { 40% { transform: translateY(-22%) scaleY(1.05); } 70% { transform: scaleY(.92); } }

.bus { position: absolute; left: 0; bottom: 30%; width: 300px; height: 90px; z-index: 5; }
.bus svg { width: 100%; height: 100%; filter: drop-shadow(0 0 14px rgba(255,79,163,.5)); }
.bus .led { position: absolute; left: 22px; top: 18px; right: 22px; height: 22px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 4px; background: #0a0d18; color: var(--gold); font: 700 11px/1 var(--body); white-space: nowrap; letter-spacing: .02em; }
.bus.drive { animation: drive 11s linear forwards; }
@keyframes drive { from { transform: translateX(-320px); } to { transform: translateX(calc(100vw + 40px)); } }
.bus.parked { left: auto; right: 4%; }

/* ---------- lobby panel ---------- */
.lobby { position: fixed; z-index: 25; top: 64px; right: 0; bottom: 0; width: min(460px, 100%); display: flex; flex-direction: column; background: rgba(12,16,32,.97); border-left: 1px solid var(--line); box-shadow: -20px 0 50px rgba(0,0,0,.45); transform: translateX(104%); transition: transform .15s cubic-bezier(.2,.9,.3,1), visibility .15s; visibility: hidden; }
.lobby.open { transform: none; visibility: visible; }
.lobby-head { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 4px 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.lobby-head h2 { font: 400 30px/1.05 var(--brand); color: var(--neon, var(--gold)); text-shadow: 0 0 18px color-mix(in srgb, var(--neon, #ffc83d) 45%, transparent); margin: 0; }
.lobby-kicker { grid-column: 1; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lobby-head .x { grid-row: 1 / span 2; grid-column: 2; }
.lobby-panes { flex: 1; overflow: auto; padding: 14px 20px; }
.lobby-panes > section[hidden] { display: none; }
.lobby-panes .tile { display: block; border: 0; background: none; box-shadow: none; padding: 0; opacity: 1; grid-template-columns: none; }
.lobby-panes .tile > :first-child:not(.bh-body):not(.bs-body):not(.rr-body):not(.hp-body) { border-radius: 14px; overflow: hidden; margin-bottom: 14px; max-height: 190px; }
.lobby-panes .bh-body, .lobby-panes .bs-body, .lobby-panes .rr-body, .lobby-panes .hp-body { padding: 0; }
.lobby-panes .bs-title h3, .lobby-panes .rrt-title h3 { display: none; }
.lobby-panes .slither-pane .lede { margin-bottom: 14px; color: #dcd9ee; }
/* the stake chips + Play / Practice bar stays pinned to the bottom of the scrolling pane */
.lobby-panes .lobby-act { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 10px; margin: 0 -20px; padding: 18px 20px 14px; background: linear-gradient(180deg, rgba(12,16,32,0), #0c1020 16px); }
.lobby-panes .lobby-act .cta { margin: 0; }
/* lobby cards keep their content inside rounded corners: let the last line (a link) breathe instead of being clipped */
.lobby-panes .tile { overflow: visible; padding-bottom: 6px; }
/* the game picture at the top of a lobby: a fixed height (the cards' own min-heights are for the old launch pad) */
.lobby-panes .tile > :is(.bh-art, .rr-art, .bs-art, .hp-art) { min-height: 0; height: 190px; }
@media (max-height: 760px) and (min-width: 720px) { .lobby-panes .tile > :is(.bh-art, .rr-art, .bs-art, .hp-art) { height: 110px; } }
.lobby-foot { padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 6px; }
.lobby-foot .nick { display: flex; align-items: center; gap: 10px; }
.friends { display: grid; gap: 6px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.friends b { font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.friends-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.friends-row input { width: 120px; text-transform: uppercase; letter-spacing: .12em; background: var(--raised); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 7px 10px; font: 600 14px var(--body); }
.friends-or { font-size: 12px; color: var(--muted); }
.priv-pill { position: fixed; z-index: 95; top: calc(var(--gbar-h, 32px) + 10px + env(safe-area-inset-top)); right: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 14px; background: rgba(11, 16, 32, .9); border: 1px solid var(--gold, #ffc83d); color: #fff; font: 600 13px var(--body); box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.priv-pill b { font: 400 20px var(--display, sans-serif); letter-spacing: .14em; color: var(--gold, #ffc83d); }
@media (max-width: 520px) { .priv-pill { left: 12px; right: 12px; justify-content: space-between; } .priv-pill span { display: none; } }
.lobby-foot .nick span { font-size: 13px; color: var(--muted); }
.lobby-foot .nick input { flex: 1; }
.lobby-rules { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.lobby-rules a { color: var(--cyan); font-weight: 700; }

#pad > footer { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; align-items: center; padding: 14px clamp(12px, 3vw, 28px) 90px; color: var(--muted); font-size: 13px; background: #070a18; }
#pad > footer .tag { font: 400 16px var(--brand); color: var(--amber); }

/* ---------- phones: a vertical stack of storefronts ---------- */
@media (max-width: 719px) {
  .street { height: auto; min-height: 0; overflow: visible; }
  .street .layer, .street .sun { display: none; }
  #pad .top { position: sticky; background: rgba(10,4,26,.92); }
  .street .palmtree, .street .cars { display: none; }
  .shop .say { right: 0; bottom: 70%; }
  .street .track { position: relative; overflow: visible; }
  .street .shops { position: relative; bottom: auto; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 12px; padding: 18px 12px 24px; width: auto; align-items: end; }
  .shop { width: auto !important; height: auto; display: flex; flex-direction: column; gap: 8px; }
  .shop .shop-btn { height: 210px; order: 2; }
  .sign-live { position: static; transform: none; order: 1; align-self: center; white-space: normal; }
  .crowd { bottom: -6px; height: 34px; }
  .shop-window { display: none; }
  .shop.shop-blockside { grid-column: span 1; }
  .street .sidewalk, .street .road, .walker { display: none; }
  .lobby-panes .tile > :first-child:not(.bh-body):not(.bs-body):not(.rr-body):not(.hp-body) { max-height: 96px; margin-bottom: 10px; }
  .lobby-panes .bs-lede, .lobby-panes .rr-lede { font-size: 14px; }
  .lobby-head h2 { font-size: 26px; }
  .lobby { top: auto; height: min(84svh, 680px); width: 100%; border-left: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; transform: translateY(104%); }
  .lobby.open { transform: none; }
  .sign-live b { font-size: 13px; }
  .facade .neon { filter: drop-shadow(0 0 2px var(--glow)); }
  .sign-live .live { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .street *, .lobby { animation: none !important; transition: none !important; }
}

/* storefront window previews */
.facade .bscross { animation: bscross 3.2s ease-in-out infinite; }
@keyframes bscross { 0% { transform: translate(-22px, 10px); } 40% { transform: translate(14px, 18px); } 55%, 70% { transform: translate(14px, 16px); } 100% { transform: translate(-22px, 10px); } }
.facade .bstarget { animation: bstarget 3.2s steps(1) infinite; }
@keyframes bstarget { 0%, 30% { opacity: 0; } 31%, 62% { opacity: 1; } 63%, 100% { opacity: 0; } }
.facade .bsflash { opacity: 0; animation: bsflash 3.2s steps(1) infinite; }
@keyframes bsflash { 0%, 58% { opacity: 0; } 59%, 61% { opacity: 1; } 62%, 100% { opacity: 0; } }
.facade .orb { animation: orb 1.6s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
@keyframes orb { 50% { transform: scale(1.6); opacity: .6; } }
.facade .side { transform-box: fill-box; transition: transform .3s ease-out; }
.facade .side.r { transform-origin: 0 50%; transform: scaleX(var(--sr, 0)); }
.facade .side.l { transform-origin: 100% 50%; transform: scaleX(var(--sl, 0)); }
.facade .bkdrop { transform-box: fill-box; transform-origin: center; animation: bkdrop 4.2s infinite; animation-delay: var(--d); }
@keyframes bkdrop { 0%, 6% { transform: none; opacity: 1; } 8%, 12% { fill: #ff4d9a; stroke: #ff4d9a; } 24% { transform: translateY(26px) scale(.7); opacity: 0; } 90% { transform: none; opacity: 0; } 100% { opacity: 1; } }
.facade .bkgood { animation: bkgood 4.2s infinite; animation-delay: var(--d); }
@keyframes bkgood { 0%, 4% { fill: #2cf58c; stroke: #2cf58c; fill-opacity: .9; } 70% { fill: #2cf58c; stroke: #2cf58c; fill-opacity: .7; } 85%, 100% { } }
.facade .bkend { animation: blink 1.2s steps(2) infinite; }

/* ---------- smoothness (owner, 2026-10-25: "butter smooth") ----------
   Measured on the hub: 31 fps with everything on, 46 without the blur layers, 60 with the SVG light animations calmed.
   Animated opacity on elements inside an SVG repaints the whole drawing every frame, and backdrop blurs re-blur
   everything behind them every frame. So: the water glints step instead of fading, the marquee bulbs only chase on the
   storefront you hover, and nothing on the hub blurs what's behind it (solid backgrounds look the same). */
.street .glint { animation: glint 3s steps(3) infinite; animation-delay: var(--d); }
.facade .chase { animation: none; }
.shop:hover .facade .chase, .shop:focus-within .facade .chase { animation: chase .9s steps(1) infinite; }
.shop:hover .facade .chase.b, .shop:focus-within .facade .chase.b { animation-delay: .45s; }
#pad, #pad * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#pad .top { background: linear-gradient(180deg, rgba(10, 4, 26, .96), rgba(10, 4, 26, .82)); }
.daily { background: rgba(11, 16, 32, .97); }
.lobby { background: rgba(14, 10, 32, .98); }
.online-pill i { animation: none; box-shadow: none; }
.online-pill i::after { content: ''; }
@media (prefers-reduced-motion: reduce) { .street .glint, .facade .chase { animation: none !important; } }
.street .car.cruise.mid { bottom: 27%; z-index: 2; }
.street .walker { pointer-events: auto; cursor: pointer; }
.walker:focus-visible { outline: 2px solid #ffd23f; outline-offset: 4px; border-radius: 8px; }

/* 120 fps: only the lit club animates (SVG animations repaint the whole drawing every frame), the water glints hold still */
.shop:not(.lit) .facade, .shop:not(.lit) .facade * { animation-play-state: paused !important; }
.street .glint { animation: none !important; opacity: .5; }