/* Shop backdrop: Booty Bay goblin trading post (module js/ui/shopBackdrop.js, art assets/ui/shop-bd/ from tools/backdrop/).
   Layering: wall < beam/rail/floor < props < light < shade (play areas darker) < dust; .scene-vig sits above all of it.
   Positions are % of the scene box, sizes in vh so the room scales with the viewport the shop is fitted to. */
.scene > .shop-bd { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: 8px; }
.shop-bd, .shop-bd * { pointer-events: none; user-select: none; }
.shop-bd > * { position: absolute; }

/* teal-washed Booty Bay boards (jlo_bbay_woodwall), dimmed so the board and shelves read first */
.shop-bd .bd-wall { inset: 0; background: url(../assets/ui/shop-bd/wall.webp) 0 0 / auto 44vh repeat; filter: brightness(.36) saturate(.8) contrast(1.08); }
/* ceiling beams (jlo_bbay_ceiling) across the top, the lanterns hang from them */
.shop-bd .bd-beam { left: 0; right: 0; top: 0; height: 7%; background: url(../assets/ui/shop-bd/beam.webp) 0 62% / 20vh auto repeat-x;
  filter: brightness(.5) saturate(.9); box-shadow: 0 6px 14px rgba(0,0,0,.7); }
/* dado rail (js_bbay_trim) + plank floor (js_bbay_plank) laid back in perspective */
.shop-bd .bd-rail { left: 0; right: 0; bottom: 21%; height: 2.4vh; background: url(../assets/ui/shop-bd/rail.webp) 0 50% / 30vh auto repeat-x;
  filter: brightness(.55); box-shadow: 0 -4px 10px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.6); z-index: 1; }
.shop-bd .bd-floor { left: -12%; right: -12%; bottom: 0; height: 21%; transform-origin: 50% 0; transform: perspective(60vh) rotateX(34deg);
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.1) 30%, rgba(0,0,0,.5)), url(../assets/ui/shop-bd/floor.webp) 0 0 / auto 8vh repeat;
  filter: brightness(.62) saturate(.85); }

.shop-bd .bd-p { display: block; height: auto; filter: brightness(.62) saturate(.9) drop-shadow(0 6px 6px rgba(0,0,0,.7)); }
/* dock-side windows with the harbour at dusk behind them (top band, between the signs) */
.shop-bd .bd-window { top: 1.2%; height: 9.5vh; width: auto; filter: brightness(.85) saturate(.95);
  box-shadow: 0 0 0 3px #1a1008, 0 0 0 4px rgba(0,0,0,.8), 0 6px 14px rgba(0,0,0,.8); }
.shop-bd .bd-win-a { left: 19%; } .shop-bd .bd-win-b { left: 66.5%; }
.shop-bd .bd-sea { top: -6%; width: 18%; height: 30%; background: radial-gradient(closest-side, rgba(90,200,210,.30), rgba(255,170,90,.10) 60%, transparent);
  mix-blend-mode: screen; }
.shop-bd .bd-sea-a { left: calc(19% - 6%); } .shop-bd .bd-sea-b { left: calc(66.5% - 6%); }

/* hanging lanterns (Classic hanging lantern doodads) + their light pools */
.shop-bd .bd-lantern { top: 0; height: 12vh; width: auto; transform: translateX(-50%); transform-origin: 50% 0;
  filter: brightness(.95) saturate(1.05) drop-shadow(0 0 8px rgba(255,180,80,.55)); animation: bd-sway 7s ease-in-out infinite; }
.shop-bd .bd-l1 { left: 12%; } .shop-bd .bd-l2 { left: 33%; height: 10.5vh; animation-delay: -2s; }
.shop-bd .bd-l3 { left: 62.5%; height: 10.5vh; animation-delay: -4.5s; } .shop-bd .bd-l4 { left: 77.5%; animation-delay: -1.2s; }
.shop-bd .bd-glow { top: -10%; width: 26%; height: 50%; transform: translateX(-50%); mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255,190,100,.42), rgba(255,150,60,.16) 45%, transparent); animation: bd-flicker 3.1s steps(1) infinite; }
.shop-bd .bd-gl1 { left: 12%; } .shop-bd .bd-gl2 { left: 33%; animation-duration: 3.7s; animation-delay: -1s; }
.shop-bd .bd-gl3 { left: 62.5%; animation-duration: 2.9s; animation-delay: -.4s; } .shop-bd .bd-gl4 { left: 77.5%; animation-duration: 4.2s; animation-delay: -2.2s; }

/* Booty Bay trophy shark hangs in the gap between the backpack and the shelves */
.shop-bd .bd-shark { left: 50.6%; top: 6%; height: 35vh; width: auto; transform: translateX(-50%) rotate(2deg); transform-origin: 50% 0;
  filter: brightness(.5) saturate(.85) drop-shadow(0 10px 10px rgba(0,0,0,.75)); animation: bd-sway 11s ease-in-out infinite; }
/* left wall: fish rack + crossed harpoons; floor corner: crates */
.shop-bd .bd-fishrack { left: .2%; top: 34%; height: 25vh; width: auto; }
.shop-bd .bd-harpoon { left: -1%; top: 22%; width: 17vh; }
.shop-bd .bd-h1 { transform: rotate(-24deg); } .shop-bd .bd-h2 { transform: rotate(24deg) translateY(2vh); }
.shop-bd .bd-crate { left: .4%; bottom: 4%; height: 19vh; width: auto; }
.shop-bd .bd-crate2 { left: 3%; bottom: calc(4% + 16.5vh); height: 12vh; width: auto; transform: rotate(-3deg); }
/* right: a goblin gear turning behind the Vendor sign, machinery and kegs on the floor around the goblin */
.shop-bd .bd-gear { right: -3.5%; top: -5%; height: 22vh; width: auto; filter: brightness(.45) saturate(.8); animation: bd-spin 80s linear infinite; }
.shop-bd .bd-machinery { right: .3%; bottom: 3%; height: 10vh; width: auto; }
.shop-bd .bd-barrel { left: 77.6%; bottom: 3.5%; height: 12.5vh; width: auto; transform: translateX(-50%); }
.shop-bd .bd-keg { left: 81.5%; bottom: 3%; height: 7vh; width: auto; }

/* keep the play areas calm: darker behind the backpack, the shelves and the floor line */
.shop-bd .bd-shade { inset: 0; background:
  radial-gradient(ellipse 27% 34% at 27% 42%, rgba(5,3,2,.62), rgba(5,3,2,.25) 70%, transparent),
  radial-gradient(ellipse 27% 32% at 75% 42%, rgba(5,3,2,.55), rgba(5,3,2,.2) 70%, transparent),
  linear-gradient(180deg, transparent 72%, rgba(0,0,0,.35)); }

/* dust drifting up through the lantern light */
.shop-bd .bd-dust { inset: 0; mix-blend-mode: screen; }
.shop-bd .bd-dust i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255,228,170,.85);
  box-shadow: 0 0 4px rgba(255,200,120,.7); opacity: 0; animation: bd-mote var(--d) linear var(--dl) infinite; }

@keyframes bd-mote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .65; } 80% { opacity: .45; } 100% { transform: translate(var(--dx), -11vh); opacity: 0; } }
@keyframes bd-flicker { 0% { opacity: .9; } 9% { opacity: .74; } 14% { opacity: .95; } 31% { opacity: .82; } 44% { opacity: 1; } 58% { opacity: .78; } 66% { opacity: .9; } 81% { opacity: .7; } 88% { opacity: .92; } }
@keyframes bd-sway { 50% { rotate: 1.6deg; } }
@keyframes bd-spin { to { rotate: 360deg; } }

@media (max-width: 900px) {
  /* stacked mobile shop: textured wall + beam + lanterns + light only; floor and edge props would land mid-column */
  .shop-bd .bd-rail, .shop-bd .bd-floor, .shop-bd .bd-shade, .shop-bd .bd-sea,
  .shop-bd .bd-p:not(.bd-lantern) { display: none; }
  .shop-bd .bd-beam { height: 54px; }
  .shop-bd .bd-lantern { height: 70px; } .shop-bd .bd-glow { top: -60px; height: 260px; }
  .shop-bd .bd-l2, .shop-bd .bd-l3, .shop-bd .bd-gl2, .shop-bd .bd-gl3 { display: none; }
  .shop-bd .bd-wall { background-size: auto 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-bd *, .shop-bd .bd-dust i { animation: none !important; }
  .shop-bd .bd-dust { display: none; }
}