/* 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)); backdrop-filter: blur(8px); 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 4px var(--glow)) drop-shadow(0 0 12px var(--glow)); }
.facade .tube { filter: drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 8px 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(-2px 0 3px rgba(255, 79, 163, .35)) drop-shadow(2px 0 3px rgba(59, 232, 255, .3)); }
.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; }
.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; }