.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.room-effects { position: absolute; inset: 0; pointer-events: none; perspective: 850px; }
.room { container-type: inline-size; }
.room .poster-lettering { font-size: 1.32cqw; }
.room .poster-lettering small { font-size: .6cqw; margin-top: .45cqw; }
.room .poster-lettering em { font-size: .53cqw; margin-top: .4cqw; }
.room-effects svg { width: 100%; height: 100%; display: block; overflow: visible; }
.room-effects > div, .room-effects > span, .room-effects > svg { position: absolute; }
.door-frame { left: 12.02%; top: 20.83%; width: 7.78%; height: 34.96%; perspective: 600px; }
.door-interior { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(100deg, #0d0d08, #4c2e15 72%, #9f7439); box-shadow: inset 0 0 18px #000; }
.door-interior span { position: absolute; top: 9%; right: 12%; width: 20%; height: 72%; border-left: 1px solid #ddb37660; background: #e4bc6723; }
.door-leaf { width: 100%; height: 100%; transform-origin: 0 50%; transform: rotateY(0deg); transition: transform .65s cubic-bezier(.2,.65,.2,1), filter .7s; backface-visibility: hidden; }
.backstage-spill { left: 12%; top: 53%; width: 21%; height: 19%; clip-path: polygon(0 0, 35% 0, 100% 88%, 15% 100%); background: linear-gradient(150deg, #ecb75b66, #c9973d00 75%); opacity: 0; transition: opacity 1s .2s; mix-blend-mode: screen; }
.room[data-active='backstage'] .door-leaf { transform: rotateY(-19deg); }
.room[data-active='backstage'][data-linger='true'] .door-leaf { transform: rotateY(-29deg); }
.room[data-active='backstage'][data-linger='true'] .backstage-spill { opacity: .8; }
.room[data-open-object='backstage'] .door-leaf { transform: rotateY(-67deg); filter: brightness(.8); }
.room[data-open-object='backstage'] .backstage-spill { opacity: 1; }
.instrument-bass { left: 55.14%; top: 22.32%; width: 5.56%; height: 25.4%; transform-origin: 50% 95%; }
.instrument-mic { left: 50.6%; top: 25.93%; width: 1.44%; height: 12.75%; transform-origin: 50% 100%; }
.instrument-cymbal { left: 65.19%; top: 31.46%; width: 5.02%; height: 3.61%; transform-origin: 48% 50%; }
.instrument-drum { left: 60.29%; top: 40.28%; width: 4.84%; height: 9.14%; transform-origin: center; }
.piano-keys { left: 31.1%; top: 38.1%; width: 9.1% !important; height: 1.16% !important; }
.bass-strings { left: 56.8%; top: 25.5%; width: 2.87% !important; height: 18% !important; }
.room[data-active='perform'][data-playing='true'] .instrument-bass { animation: bass-play 1.1s ease-in-out 3; }
.room[data-active='perform'][data-playing='true'] .instrument-mic { animation: mic-sway 1.6s ease-in-out 2; }
.room[data-active='perform'][data-playing='true'] .instrument-cymbal { animation: cymbal-hit .65s ease-out 5; }
.room[data-active='perform'][data-playing='true'] .instrument-drum { animation: drum-hit .8s ease-out 4; }
.room[data-active='perform'][data-playing='true'] .bass-strings { animation: string-pluck .3s ease-in-out 10; }
.room[data-active='perform'][data-playing='true'] .piano-keys path { animation: key-play .75s ease-in-out 4; transform-box: fill-box; transform-origin: top; }
.piano-keys path:nth-child(2) { animation-delay: .18s !important; }
.piano-keys path:nth-child(3) { animation-delay: .37s !important; }
.piano-keys path:nth-child(4) { animation-delay: .56s !important; }
.piano-keys path:nth-child(5) { animation-delay: .72s !important; }
.room[data-active='perform'] .stage-light { animation: none; opacity: .8; background-color: #ffce771c; transition: opacity .5s; filter: blur(6px); }
@keyframes bass-play { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-.8deg) translateX(-1px); } 60% { transform: rotate(.6deg); } }
@keyframes mic-sway { 0%,100% { transform: rotate(0); } 40% { transform: rotate(1.5deg); } 70% { transform: rotate(-1deg); } }
@keyframes cymbal-hit { 0%,100% { transform: rotate(0); } 15% { transform: rotate(5deg) scaleY(.91); } 35% { transform: rotate(-3deg); } 60% { transform: rotate(1.8deg); } }
@keyframes drum-hit { 0%,35%,100% { transform: scale(1); } 10% { transform: scale(.98,.96); filter: brightness(1.2); } }
@keyframes string-pluck { 0%,100% { transform: translateX(0); } 25% { transform: translateX(1.2px); } 75% { transform: translateX(-.8px); } }
@keyframes key-play { 0%,30%,100% { transform: none; fill: #efe4c8; } 12%,23% { transform: translateY(2px) scaleY(.65); fill: #a59168; } }
.handset-shadow { left: 80.2%; top: 62.1%; width: 8.95%; height: 5.95%; background: #11100c; clip-path: polygon(1% 49%, 10% 20%, 28% 0, 70% 12%, 92% 34%, 99% 75%, 96% 98%, 75% 89%, 76% 53%, 31% 40%, 21% 71%, 4% 80%); }
.phone-handset { left: 80.14%; top: 62.06%; width: 9.03%; height: 6.06%; transform-origin: 50% 65%; }
.telephone-lamp { left: 87.7%; top: 73%; width: .32%; aspect-ratio: 1; border-radius: 50%; background: #5d3c15; }
.room[data-active='message'][data-playing='true'] .phone-handset { animation: telephone-ring .14s linear 22; }
.room[data-active='message'][data-playing='true'] .telephone-lamp { animation: ring-lamp .65s ease-in-out 5; box-shadow: 0 0 6px #efbd65; }
@keyframes telephone-ring { 0%,100% { transform: translate(0,0) rotate(0); } 25% { transform: translate(-1px,-2px) rotate(-2deg); } 75% { transform: translate(1px,-1px) rotate(2deg); } }
@keyframes ring-lamp { 0%,100% { background: #735326; } 40% { background: #ffe5a3; } }
.crate-record { left: 49.34%; top: 64.08%; width: 10.4%; height: 11.48%; clip-path: inset(-150% -20% 0); }
.rising-vinyl { position: absolute; left: 7%; top: 14%; width: 83%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #181815 0 1px, #080807 2px 4px); border: 1px solid #8f877056; opacity: 0; transform: translateY(0) rotate(-7deg); transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .35s; box-shadow: inset 0 0 16px #000; }
.rising-vinyl > span { position: absolute; inset: 34%; display: grid; place-content: center; text-align: center; background: #6a2935; color: #dab87e; border-radius: 50%; font: 10px Georgia; }
.rising-vinyl small { font-size: 7px; }
.crate-front { position: absolute; inset: 0; }
.room[data-active='story'] .rising-vinyl { opacity: 1; transform: translateY(-66%) rotate(-10deg); }
.turntable-disc { left: 60.2%; top: 66.85%; width: 8.55%; height: 3.65%; perspective: 280px; }
.spinning-vinyl { position: absolute; inset: 0; border-radius: 50%; border: 1px solid #8f877075; background: repeating-radial-gradient(ellipse, #0d0d0c 0 2px, #3c3830 3px, #151513 4px); }
.spinning-vinyl span { position: absolute; left: 35%; top: 23%; width: 30%; height: 48%; border-radius: 50%; background: #a44332; }
.spinning-vinyl::after { content: ''; position: absolute; left: 20%; top: 20%; width: 14%; height: 11%; background: #d5c29a70; border-radius: 50%; }
.room[data-active='story'] .spinning-vinyl::after { animation: vinyl-groove 2.4s linear infinite; }
.room[data-active='story'] .spinning-vinyl span { animation: disc-label 2.4s linear infinite; }
.tonearm { left: 66.8%; top: 64.72%; width: 3.11%; height: 5.42%; transform-origin: 85% 8%; transition: transform .65s; }
.room[data-active='story'] .tonearm { transform: rotate(12deg); }
.player-lamp { left: 69.6%; top: 70%; width: .25%; aspect-ratio: 1; background: #5d672c; box-shadow: 0 0 3px #a5b24a66; }
.room[data-active='story'] .player-lamp { background: #decc7a; box-shadow: 0 0 6px #decc7a; }
@keyframes vinyl-groove { 0%,100% { transform: translate(0,0); } 25% { transform: translate(36px,-2px); } 50% { transform: translate(66px,12px); } 75% { transform: translate(18px,18px); } }
@keyframes disc-label { to { transform: rotate(360deg); } }
.guest-book { left: 8.55%; top: 69.1%; width: 21.3%; height: 12.65%; perspective: 450px; }
.guest-book svg { position: absolute; inset: 0; }
.book-pages { filter: drop-shadow(0 3px 2px #0008); }
.book-cover { transform-origin: 4% 50%; transform: scale(1.045,1.18); transition: transform .8s cubic-bezier(.25,.65,.3,1), opacity .4s; backface-visibility: hidden; filter: drop-shadow(0 3px 2px #000a); }
.room[data-active='rsvp'] .book-cover { transform: rotateY(-155deg); opacity: 0; transition: transform .8s cubic-bezier(.25,.65,.3,1), opacity .4s .36s; }
.room[data-active='rsvp'] .book-pages { animation: page-settle .85s ease-out; }
.guest-pen { left: 21%; top: 72.58%; width: 6.46%; height: 2.44%; transform: translate(120%,30%); transition: transform .7s; }
.room[data-active='rsvp'] .guest-pen { transform: translate(128%,35%) rotate(5deg); }
@keyframes page-settle { 0% { transform: scaleY(.87); filter: brightness(.7); } 65% { transform: scaleY(1.02); } 100% { transform: scaleY(1); } }
.record-label { display: none; }
.wall-poster { left: 80.26%; top: 7.97%; width: 11.48%; height: 29.76%; transform-origin: 50% 80%; transition: transform .45s, filter .45s; }
.poster-lettering { transition: transform .45s; transform-origin: 50% 85%; }
.room[data-active='details'] .wall-poster { transform: perspective(600px) rotateY(-3deg) translateY(-2px) scale(1.018); filter: brightness(1.13) drop-shadow(4px 6px 5px #0008); }
.room[data-active='details'] .poster-lettering { transform: translateY(-2px) scale(1.018); }
.stage-bulb { width: .42%; aspect-ratio: 1; border-radius: 50%; background: #ffe7ab; box-shadow: 0 0 8px 4px #ffc85b33; opacity: .35; animation: bulb-breathe 8s ease-in-out infinite alternate; }
.bulb-one { left: 26.55%; top: 49.5%; }
.bulb-two { left: 37.45%; top: 50.9%; animation-delay: -2s; }
.bulb-three { left: 63.65%; top: 50.9%; animation-delay: -4s; }
.bulb-four { left: 74.4%; top: 49.8%; animation-delay: -6s; }
.room[data-active='perform'] .stage-bulb { opacity: .8; animation: none; }
.curtain-breath { top: 8%; left: 28%; width: 49%; height: 39%; background: linear-gradient(95deg, #f0bb7010, #0000 20%, #00000012 75%, #0000); clip-path: polygon(0 0, 100% 0, 86% 100%, 12% 100%); mix-blend-mode: soft-light; transform-origin: top; animation: curtain-breath 12s ease-in-out infinite alternate; }
.room-grain { inset: 0; width: 100% !important; height: 100% !important; mix-blend-mode: soft-light; }
.room-caption span:first-child { animation: sign-current 19s linear infinite; }
@keyframes bulb-breathe { to { opacity: .58; box-shadow: 0 0 10px 4px #ffc85b44; } }
@keyframes curtain-breath { from { transform: scaleX(.998); opacity: .3; } to { transform: scaleX(1.003); opacity: .55; } }
@keyframes sign-current { 0%,80%,83%,100% { opacity: 1; } 81%,82% { opacity: .91; } }
.hotspot.is-preview { border-color: #d4b47b88; background: #f3cb6b0b; }
.hotspot.is-preview .hotspot-label { background: var(--burgundy); }
.sound-control { position: absolute; right: 16px; top: 12px; z-index: 3; display: flex; gap: 7px; align-items: center; min-height: 36px; padding: 8px 10px; border: 1px solid #c9a56960; border-radius: 3px; background: #0c0b0ae8; color: var(--gold); font-size: 9px; }
.sound-control svg, .dialog-sound-control svg { width: 14px; height: 14px; }
.sound-control[aria-pressed='true'], .dialog-sound-control[aria-pressed='true'] { color: #abd0c1; border-color: #357b78; }
.dialog-sound-control { margin-left: auto; margin-right: 12px; display: flex; gap: 6px; align-items: center; min-height: 34px; border: 1px solid var(--line); border-radius: 3px; padding: 6px 9px; color: var(--gold); background: transparent; font-size: 9px; }
.scene-action { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; width: max-content; max-width: calc(100% - 32px); border: 1px solid var(--gold); border-radius: 3px; background: #100d0cf5; box-shadow: 0 5px 20px #0009; }
.scene-action button { display: flex; gap: 12px; align-items: center; justify-content: center; min-height: 48px; padding: 10px 16px; border: 0; background: transparent; color: var(--cream); font-size: 12px; }
.scene-action button:first-child { flex: 1; }
.scene-action button:last-child { border-left: 1px solid var(--line); padding: 10px; }
.scene-action svg { width: 16px; height: 16px; color: var(--gold); }
.session-dialog.enter-from-room { animation: room-panel-enter .42s cubic-bezier(.2,.7,.3,1); transform-origin: var(--entry-x,50%) var(--entry-y,50%); }
.session-dialog[data-panel='story'].enter-from-room { animation-name: sleeve-enter; }
@keyframes room-panel-enter { from { opacity: 0; transform: scale(.93) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sleeve-enter { from { opacity: 0; transform: perspective(900px) rotateY(-8deg) translateX(15px); } to { opacity: 1; transform: none; } }
@media (max-width:700px) { .sound-control { top: 8px; right: 10px; min-height: 36px; } .dialog-sound-control { font-size: 8px; padding: 6px; margin-right: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .room-effects *, .room-effects *::before, .room-effects *::after, .session-dialog.enter-from-room { animation: none !important; transition: none !important; }
  .room[data-active='backstage'] .door-leaf, .room[data-active='backstage'][data-linger='true'] .door-leaf, .room[data-open-object='backstage'] .door-leaf { transform: rotateY(-14deg); }
  .room[data-active='story'] .rising-vinyl { transform: translateY(-18%) rotate(-7deg); }
  .room[data-active='rsvp'] .book-cover { transform: none; opacity: 0; }
  .room[data-active='perform'] .instrument { filter: brightness(1.16); }
  .room[data-active='message'] .telephone-lamp { background: #ffe5a3; box-shadow: 0 0 5px #efbd65; }
  .room[data-active='details'] .wall-poster, .room[data-active='details'] .poster-lettering { transform: none; }
}
