/* Layered CSS scenery; all decorative surfaces are inert. */
body { background: radial-gradient(ellipse at 15% 0, #42301a24, transparent 50%), #080a0e; }
.room-shell { border-radius: 16px; border-color: #bc94583b; box-shadow: 0 28px 75px #0008, 0 0 0 5px #ffffff02; }
.room-viewport { isolation: isolate; container-type: inline-size; perspective: 1100px; --scene-warm: 255, 193, 112; --scene-cool: 101, 174, 163; }
.room-viewport[data-theme="collectors_gallery"] { --scene-warm: 213, 181, 255; --scene-cool: 114, 191, 231; }
.room-viewport[data-theme="clothing_loft"] { --scene-warm: 255, 214, 153; --scene-cool: 140, 194, 166; }
.room-viewport[data-theme="miscellaneous_backroom"] { --scene-warm: 255, 172, 98; --scene-cool: 158, 187, 128; }
.cinema-world { position: absolute; inset: 0; z-index: 0; pointer-events: none; perspective: 1100px; }
.cinema-backdrop { position: absolute; inset: -3%; background: var(--room-image) center / cover; transform: scale(1.015); transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.depth-mode .cinema-backdrop { transform: scale(1.04) rotateX(calc(var(--depth-tilt-x) * -.4)) rotateY(calc(var(--depth-tilt-y) * -.4)); }
.cinema-light { position: absolute; inset: 0; background: conic-gradient(from 155deg at 69% -12%, transparent 0deg, rgba(var(--scene-warm), .02) 4deg, rgba(var(--scene-warm), .22) 16deg, transparent 32deg), radial-gradient(ellipse at 70% 73%, rgba(var(--scene-warm), .13), transparent 45%); mix-blend-mode: screen; }
.cinema-light::after { content: ''; position: absolute; inset: 0; background: linear-gradient(118deg, transparent 19%, #fff1c00c 20%, transparent 22%, transparent 35%, #fff1c013 36%, transparent 40%); }
.cinema-floor { position: absolute; left: -10%; right: -10%; bottom: -22%; height: 45%; border-radius: 50%; background: radial-gradient(ellipse at 62% 0, rgba(var(--scene-warm), .17), transparent 62%); filter: blur(10px); transform: rotateX(58deg); }
.cinema-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 80px #100b0770, inset 0 -65px 60px #06080770; }
.cinema-motes { position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(circle, #fff2ccbb 0 1px, transparent 1.7px), radial-gradient(circle, #fff2cc66 0 .7px, transparent 1.4px); background-size: 131px 113px, 197px 163px; background-position: 23px 9px, 89px 54px; mask-image: radial-gradient(ellipse at 68% 28%, #000, transparent 62%); }
.cinema-props { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s ease; }
.depth-mode .cinema-props { transform: rotateX(var(--depth-tilt-x)) rotateY(var(--depth-tilt-y)); }
.cinema-print { position: absolute; left: 33%; top: 23%; width: 24%; aspect-ratio: 1.05; padding: 2%; background: #22291f; border: 7px solid #63452b; outline: 1px solid #c3a06b77; box-shadow: 8px 12px 9px #0006, inset 0 0 15px #0008; transform: translateZ(8px) rotate(-2deg); display: flex; flex-direction: column; justify-content: center; text-align: center; color: #eed4a0; }
.cinema-print small { font-size: clamp(5px, .65vw, 10px); letter-spacing: .25em; }
.cinema-print strong { font: 700 clamp(14px, 2.3cqw, 30px)/1.04 Georgia, serif; margin: 7% 0; }
.room-viewport[data-theme="vintage_den"] .cinema-print { top: 20%; width: 22%; aspect-ratio: 1.25; }
.room-viewport[data-theme="vintage_den"] .cinema-crate { left: 51%; }
.cinema-print i { font: italic clamp(7px, .8vw, 12px) Georgia, serif; }
.cinema-print::after { content: ''; position: absolute; inset: 0; background: linear-gradient(130deg, #fff5 0, #fff0 33%, #fff1 34%, #fff0 60%); }
.cinema-pendant { position: absolute; top: 0; left: 69%; width: 13%; height: 23%; transform: translateZ(45px); filter: drop-shadow(4px 7px 7px #0006); }
.cinema-pendant::before { content: ''; position: absolute; top: 0; bottom: 28%; left: 50%; width: 2px; background: #39342c; }
.cinema-pendant::after { content: ''; position: absolute; bottom: 0; width: 100%; height: 35%; border-radius: 60% 60% 12% 12%; background: linear-gradient(100deg, #32281b, #bb9560 45%, #5a4327 90%); border-bottom: 4px solid #ffe3a5; box-shadow: 0 8px 18px #ffce7755; }
.cinema-crate { position: absolute; left: 35%; bottom: 19%; width: 17%; height: 12%; transform-style: preserve-3d; transform: translateZ(50px) rotateY(-15deg); }
.cinema-crate::before { content: ''; position: absolute; inset: -16% -25% -35%; background: #0008; filter: blur(12px); transform: rotateX(76deg) translateZ(-25px); }
.crate-front { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #65432b 0 26%, #39291e 27% 29%); border: 2px solid #b38b5755; box-shadow: inset 0 0 14px #0007; transform: translateZ(15px); display: grid; place-items: center; color: #d5ba8c; font: 700 clamp(6px,.7vw,10px) monospace; letter-spacing: .2em; }
.crate-side { position: absolute; width: 30px; height: 100%; right: -15px; background: #38271b; transform: rotateY(90deg); }
.crate-record { position: absolute; bottom: 70%; width: 71%; aspect-ratio: 1; left: 8%; background: #c2995b; border: 4px solid #d2b780; transform: rotate(-9deg); box-shadow: 3px 1px 0 #2b382f, 6px -4px 0 #af7447, 9px -7px 0 #d9cbb0; }
.crate-record::after { content: ''; position: absolute; inset: 9%; border-radius: 50%; background: repeating-radial-gradient(circle, #1d211c 0 2px, #30332b 3px 4px); border: 7px solid #22271f; box-shadow: inset 0 0 0 12px #242821; }
.crate-record::before { content: ''; position: absolute; z-index: 1; inset: 37%; border-radius: 50%; background: #c37c46; border: 3px solid #b3955e; }
.cinema-decor-note { position: absolute; bottom: 99px; left: 20px; z-index: 3; color: #f0e2c8c9; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; text-shadow: 0 2px 5px #000; pointer-events: none; }
[data-theme="clothing_loft"] .cinema-print { left: 7%; top: 25%; width: 15%; background: #44312e; transform: rotate(-4deg); }
[data-theme="clothing_loft"] .cinema-print strong { font-size: clamp(12px, 1.5vw, 25px); }
[data-theme="clothing_loft"] .cinema-crate { display: none; }
[data-theme="collectors_gallery"] .cinema-print { display: none; }
[data-theme="collectors_gallery"] .cinema-crate { left: 76%; bottom: 20%; width: 13%; height: 10%; }
[data-theme="miscellaneous_backroom"] .cinema-print { left: 39%; top: 14%; width: 19%; aspect-ratio: 1.6; background: #532e20; border-width: 4px; }
[data-theme="miscellaneous_backroom"] .cinema-print strong { font-size: clamp(12px, 1.6vw, 25px); }
[data-theme="miscellaneous_backroom"] .cinema-crate { left: 64%; bottom: 23%; }
.room-viewport:not(.map-mode) .room-zone { border-color: transparent; background: transparent; opacity: 0; box-shadow: none; }
.room-viewport:not(.map-mode) .room-zone:hover, .room-viewport:not(.map-mode) .room-zone:focus-visible, .room-viewport:not(.map-mode) .room-zone.active { opacity: 1; border-color: #ffce7766; background: #ffcf7708; }
.room-zone:focus-visible, .hotspot-pin:focus-visible, .cinema-toolbar button:focus-visible { outline: 2px solid #ffdc93; outline-offset: 4px; }
.room-bg-label { top: 18px; font-size: 10px; max-width: 42%; border-radius: 30px; letter-spacing: .12em; backdrop-filter: blur(8px); }
.room-stage-hud { width: min(245px, 44%); padding: 12px 14px; background: #0b100fc9; border-color: #ead0a62b; border-radius: 12px; }
.room-stage-hud span { font-size: 11px; line-height: 1.45; }
.room-stage-hud strong { font-size: 12px; }
.zone-dock { padding: 7px; left: 12px; right: 12px; bottom: 12px; gap: 4px; border: 1px solid #e2c69626; border-radius: 13px; background: #0c100ddd; backdrop-filter: blur(16px); }
.zone-chip { border-color: transparent; background: transparent; padding: 7px 3px; font-size: 8px; min-height: 44px; }
.zone-chip strong { font-size: 13px; margin-bottom: 4px; }
.cinema-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 11px 16px; border-bottom: 1px solid #e2c69624; background: linear-gradient(90deg,#1b211c,#151914); }
.cinema-toolbar p { font-size: 10px; color: #c5bfae; letter-spacing: .08em; text-transform: uppercase; }
.cinema-toolbar p::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 8px; background: #dec598; box-shadow: 0 0 8px #dec598; }
.cinema-toolbar > div { display: flex; gap: 6px; }
.cinema-toolbar button { color: #e9dcc5; background: #ffffff06; border: 1px solid #e2c69630; border-radius: 6px; padding: 8px 11px; min-height: 36px; font-size: 11px; }
.cinema-toolbar button:hover { background: #e2c69618; }
.room-wide .marketplace { grid-template-columns: minmax(0, 1fr); }
.room-wide .marketplace > .section { width: 100%; }
.room-wide .room-viewport { max-height: 78vh; min-height: 500px; aspect-ratio: 16/9; }
.room-wide .side-stack { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
.hotspot-pin.pin-active { width: clamp(48px, 7vw, 85px); height: clamp(54px, 8vw, 96px); border: 1px solid #f5d49a88; background: #171a16e6; border-radius: 5px; }
.hotspot-pin.pin-active::after { inset: -5px; border-radius: 8px; opacity: .35; }
.hotspot-pin.pin-active:has(.pin-object-cutout) { border-color: transparent; background: transparent; box-shadow: none; }
.hotspot-pin.pin-active:has(.pin-object-cutout)::after { border-style: dashed; opacity: 0; }
.hotspot-pin.pin-active:has(.pin-object-cutout):is(:hover,:focus-visible,.selected)::after { opacity: 1; }
.pin-object { width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 3px; }
.pin-object img { object-fit: contain; }
.pin-object-cutout { overflow: visible; box-shadow: none; }
.pin-object-cutout img { filter: drop-shadow(7px 12px 5px #0008); }
.hotspot-pin.pin-furniture { width: clamp(75px, 13vw, 150px); height: clamp(60px, 9vw, 110px); }
.pin-furniture .pin-object-cutout img { filter: drop-shadow(5px 17px 6px #0009); object-position: center bottom; }
.hotspot-pin.pin-art, .hotspot-pin.pin-mirror { width: clamp(50px, 7vw, 84px); height: clamp(64px, 9vw, 108px); border-radius: 1px; box-shadow: 6px 7px 4px #0007; }
.pin-art .pin-object-cutout img, .pin-mirror .pin-object-cutout img { filter: drop-shadow(4px 4px 2px #0007); }
.hotspot-pin.pin-record { width: clamp(46px, 6vw, 72px); height: clamp(46px, 6vw, 72px); }
.hotspot-pin.pin-collectible { width: clamp(44px, 5vw, 64px); height: clamp(52px, 7vw, 80px); }
.pin-price { opacity: 1; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); font-size: 10px; border-color: #e5c78a66; }
.hotspot-pin:is(:hover,:focus-visible,.selected) .pin-price { transform: translateX(-50%); }
.hotspot-pin:focus-visible .pin-origin { opacity: 1; }
.pin-origin { bottom: calc(100% + 7px); right: 0; }
.room-viewport.map-mode .cinema-world, .room-viewport.map-mode .cinema-decor-note { display: none; }
.seller-mode .cinema-props { opacity: .5; transform: none; }
.seller-mode .cinema-backdrop { transform: none; inset: 0; }
.seller-mode .room-viewport.depth-mode .hotspot-pin { transform: translate(-50%, -50%); }
.room-viewport.motion-paused .cinema-backdrop, .room-viewport.motion-paused .cinema-props { transform: none; }
.room-viewport.motion-paused .room-zone { transform: none; }
.room-viewport.motion-paused .hotspot-pin { transform: translate(-50%, -50%); }
.room-viewport.motion-paused *, .room-viewport.motion-paused::after { animation: none !important; transition: none !important; }
body.motion-paused .loft-swing { animation: none !important; transition: none; transform: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .room-viewport:not(.motion-paused) .cinema-motes { animation: cinema-drift 5s ease-out 1 both; }
  .room-viewport.room-switching .cinema-world { animation: cinema-arrive .55s ease-out both; }
}
@keyframes cinema-drift { from { transform: translate3d(0, 9px, 0); opacity: 0; } to { transform: translate3d(4px, 0, 0); opacity: .55; } }
@keyframes cinema-arrive { from { opacity: .25; filter: brightness(1.35); } to { opacity: 1; filter: brightness(1); } }
@media (max-width: 700px) {
  .public-room-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .public-room-tab { grid-template-columns: 40px minmax(0,1fr); gap: 7px; padding: 7px; }
  .public-room-preview { min-height: 58px; width: 40px; }
  .public-room-copy > span { font-size: 9px; }
  .public-room-copy strong { font-size: 12px; }
  .shopper-summary { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
  .summary-stat { padding: 10px 5px; }
  .summary-stat strong { font-size: 17px; }
  .summary-stat span { font-size: 9px; letter-spacing: .02em; }
  .room-viewport { min-height: 440px; }
  .room-stage-hud { top: 54px; right: 12px; width: 190px; max-width: 52%; padding: 9px; }
  .room-stage-hud span:nth-child(2) { display: none; }
  .room-bg-label { left: 12px; top: 14px; max-width: 90%; }
  .zone-dock { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .zone-chip { font-size: 8px; min-height: 44px; padding: 4px; }
  .zone-chip strong { display: inline; margin-right: 5px; }
  .cinema-decor-note { bottom: 128px; left: 15px; font-size: 8px; }
  .cinema-print { left: 29%; top: 32%; width: 32%; }
  .room-viewport[data-theme="vintage_den"] .cinema-print { top: 32%; width: 32%; }
  .cinema-print strong { font-size: 14px; }
  [data-theme="clothing_loft"] .cinema-print { display: none; }
  [data-theme="miscellaneous_backroom"] .cinema-print { width: 25%; }
  .cinema-crate { bottom: 30%; }
  [data-theme="collectors_gallery"] .cinema-crate, [data-theme="miscellaneous_backroom"] .cinema-crate { bottom: 32%; }
  .cinema-toolbar { padding: 9px 12px; }
  .cinema-toolbar p { font-size: 8px; }
  .cinema-toolbar button { min-height: 44px; padding: 8px; }
  .room-wide .room-viewport { min-height: 440px; max-height: none; }
  .room-wide .side-stack { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-world *, .room-viewport::after, .room-viewport .pin-object, .room-viewport .pin-object img, .loft-swing { animation: none !important; transition: none !important; }
  .depth-mode .cinema-backdrop, .depth-mode .cinema-props, .depth-mode .room-zone { transform: none; }
  .room-viewport.depth-mode .hotspot-pin { transform: translate(-50%, -50%); }
  .loft-piece:hover .loft-swing { transform: none; }
}