:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #100a06; }
body { font-family: Georgia, "Times New Roman", serif; }
button { font: inherit; }
.entry-screen { position:fixed; inset:0; z-index:100; display:grid; place-items:center; overflow:auto hidden; scrollbar-width:none; background:#100a06; transition:opacity .7s ease,filter .7s ease; }
.entry-screen:not(.ready) .entry-stage { visibility:hidden; }
.entry-screen::-webkit-scrollbar { display:none; }
.entry-screen.opening { opacity:0; filter:brightness(2); pointer-events:none; }
.entry-stage { position:relative; width:min(100vw,calc(100svh * 1.776833)); aspect-ratio:1672 / 941; margin:0 auto; overflow:hidden; }
.entry-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; user-select:none; pointer-events:none; }
.entry-door { position:absolute; left:36.8%; top:4.5%; width:26.8%; height:80%; border:0; border-radius:3%; cursor:pointer; background:transparent; }
.entry-door::after { content:""; position:absolute; inset:15% 12% 8%; opacity:0; border-radius:10%; background:radial-gradient(ellipse,#ffe8ae88 0,#f0a33c38 50%,transparent 78%); box-shadow:0 0 22px #efac4888; mix-blend-mode:screen; }
.entry-door:hover::after,.entry-door:focus-visible::after { animation:linked-gold-flash 1.15s ease-out forwards; }
.viewport { display: grid; place-items: center; width: 100vw; height: 100svh; overflow: auto hidden; scrollbar-width: none; background: #100a06; }
.viewport::-webkit-scrollbar { display: none; }
.phone-pan-controls { display:none; }
.room { position: relative; width: min(100vw, calc(100svh * 1.776833)); aspect-ratio: 1672 / 941; margin: 0 auto; overflow: hidden; flex: none; }
.room-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }
.linked-hotspot { position:absolute; z-index:4; display:block; padding:0; border:0; outline:0; cursor:pointer; background:transparent; text-decoration:none; }
.linked-hotspot::after { content:""; position:absolute; inset:-5%; opacity:0; border-radius:8%; pointer-events:none; background:radial-gradient(ellipse,#ffe8ae88 0,#f0a33c42 48%,transparent 76%); box-shadow:0 0 13px 3px #efac4866; mix-blend-mode:screen; }
.linked-hotspot:hover::after,.linked-hotspot:focus-visible::after { animation:linked-gold-flash 1.15s ease-out forwards; }
.youtube-mirror { left:36.3%; top:1.1%; width:29%; height:30.8%; border-radius:3%; }
.tiktok-frame { left:38.45%; top:33.5%; width:4.75%; height:10.2%; }
.instagram-frame { left:44.2%; top:32.1%; width:9.6%; height:11.8%; }
.facebook-frame { left:57.25%; top:33%; width:4.55%; height:10.5%; }
.merch-display { left:87.3%; top:1.8%; width:12.5%; height:39%; border-radius:4%; }
.gigs-poster { left:68.25%; top:4.7%; width:13.8%; height:30.5%; border-radius:2%; }
.contact-phone { left:83.2%; top:44.1%; width:7.7%; height:10.8%; border-radius:45%; }
.toilet-sign { left:17.7%; top:13.1%; width:9.2%; height:7.8%; border-radius:4%; }
.table-menu { position:absolute; left:40.5%; top:73.5%; z-index:5; width:7.2%; height:18%; padding:0; border:0; border-radius:5%; cursor:pointer; background:transparent; }
.table-menu::after { content:""; position:absolute; inset:-6%; opacity:0; border-radius:12%; pointer-events:none; background:radial-gradient(ellipse,#ffe8ae70 0,#f0a33c38 46%,transparent 76%); box-shadow:0 0 13px 3px #efac4855; mix-blend-mode:screen; }
.table-menu:hover,.table-menu:focus-visible { outline:none; }
.table-menu:hover::after,.table-menu:focus-visible::after { animation:linked-gold-flash 1.15s ease-out forwards; }
.donation-pint { position:absolute; left:58.1%; top:74.6%; z-index:5; width:5.2%; height:16%; padding:0; border:0; border-radius:25% 25% 12% 12%; cursor:pointer; background:transparent; }
.donation-pint::after { content:""; position:absolute; inset:-9%; opacity:0; border-radius:28%; pointer-events:none; background:radial-gradient(ellipse,#ffe8ae78 0,#f0a33c40 48%,transparent 76%); box-shadow:0 0 14px 3px #efac4860; mix-blend-mode:screen; }
.donation-pint:hover,.donation-pint:focus-visible { outline:none; }
.donation-pint:hover::after,.donation-pint:focus-visible::after { animation:linked-gold-flash 1.15s ease-out forwards; }

.jukebox-hotspot { position: absolute; left: 13.15%; top: 29.2%; width: 16.4%; height: 47.6%; border: 0; padding: 0; cursor: pointer; background: transparent; border-radius: 48% 48% 15% 15% / 27% 27% 8% 8%; outline: none; }
.hotspot-shine { position:absolute; left:24%; right:24%; top:16%; bottom:58%; border-radius:12%; opacity:0; background:radial-gradient(ellipse,#ffe7a7aa 0,#ef9f3a55 45%,transparent 76%); box-shadow:0 0 14px 3px #f6b74777; mix-blend-mode:screen; }
.jukebox-hotspot:hover .hotspot-shine, .jukebox-hotspot:focus-visible .hotspot-shine { animation:linked-gold-flash 1.15s ease-out forwards; }

.selector { position: absolute; left: 4.5%; top: 21%; width: 36%; padding: 1.2% 1.2% 1.1%; color: #3a1807; background: linear-gradient(145deg,#f3d899,#a96321 44%,#e8bf6a 54%,#673010); border: min(.45vh,4px) solid #341406; border-radius: 24% 24% 7% 7% / 18% 18% 6% 6%; box-shadow: 0 10px 25px #000c, inset 0 0 0 min(.45vh,4px) #ffd983, 0 0 36px rgba(255,172,45,.6); opacity: 0; transform: scale(.5) translateY(18%); transform-origin: 50% 70%; pointer-events: none; z-index: 5; }
.selector.open { animation: selectorOpen .65s cubic-bezier(.17,.89,.25,1.2) forwards; pointer-events: auto; }
.selector.closing { animation: selectorClose .32s ease forwards; }
.selector-heading { margin: 4% 7% 5%; padding: 2.5% 2%; text-align: center; color: #fff3cf; background: #411707; border: 1px solid #f5c670; font: 700 clamp(10px,1.6vh,20px)/1 sans-serif; letter-spacing: .12em; }
.selector-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4%; padding: 0 7% 10%; }
.selection { position:relative; aspect-ratio:1; padding:0; border:2px solid #f2d69c; background:#261107; cursor:pointer; box-shadow:0 3px 7px #0009; overflow:visible; transition:transform .18s ease,filter .18s ease; }
.selection:hover, .selection:focus-visible { transform: translateY(-7%) scale(1.06); filter: brightness(1.3) drop-shadow(0 0 8px #ffd46a); outline: none; }
.selection img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.selection > span:last-child { position: absolute; left: 50%; bottom: -23%; translate: -50% 0; padding: .08em .3em; color: #fff0c4; background: #441b08; border-radius: 2px; font: 700 clamp(8px,1.15vh,15px)/1 sans-serif; }
.coming-art { display:grid; place-items:center; width:100%; height:100%; color:#f6d690; background:radial-gradient(circle,#8b310f,#241006 70%); font:700 clamp(5px,.75vh,10px)/1.05 Georgia,serif; }
.close-selector { position: absolute; right: 4%; top: 6%; width: 7%; aspect-ratio: 1; border: 0; border-radius: 50%; color: #fbe4ac; background: #5a2109; cursor: pointer; font: 700 clamp(10px,1.6vh,20px)/1 sans-serif; }

.play-animation { position: absolute; left: 15.55%; top: 43.4%; width: 11.6%; height: 24.5%; z-index: 7; pointer-events: none; opacity: 0; }
.play-animation.playing { opacity: 1; }
.mechanism-window { position:absolute; inset:0; overflow:hidden; border:min(.35vh,3px) solid #d69d48; border-radius:7%; background:linear-gradient(#120c08f2,#020202fa); box-shadow:inset 0 0 18px #000,0 0 12px #7f542f88; }
.mechanism-window > * { display:none; }
.record-carousel { position: absolute; left: -16%; bottom: -26%; width: 78%; aspect-ratio: 1; border-radius: 50%; border: min(.65vh,6px) solid #68503d; background: radial-gradient(circle,#2d211a 0 18%,#8b7358 19% 24%,#17110d 25% 100%); }
.record-carousel i { position: absolute; left: 48%; top: 0; width: 4%; height: 52%; border-radius: 50%; background: #151515; border-left: 1px solid #777; transform-origin: 50% 96%; }
.record-carousel i:nth-child(1){rotate:-64deg}.record-carousel i:nth-child(2){rotate:-48deg}.record-carousel i:nth-child(3){rotate:-32deg}.record-carousel i:nth-child(4){rotate:-16deg}.record-carousel i:nth-child(5){rotate:0deg}.record-carousel i:nth-child(6){rotate:16deg}.record-carousel i:nth-child(7){rotate:32deg}.record-carousel i:nth-child(8){rotate:48deg}.record-carousel i:nth-child(9){rotate:64deg}
.turntable { position:absolute; right:5%; bottom:11%; width:42%; height:14%; border-radius:50%; background:radial-gradient(ellipse,#d5b071 0 10%,#26211d 12% 63%,#8d7351 65% 73%,#201712 75%); box-shadow:0 3px 4px #000; }
.turntable b { position:absolute; inset:41% 47%; border-radius:50%; background:#e7c98e; }
.selected-record { position:absolute; left:20%; top:56%; width:45%; aspect-ratio:1; border-radius:50%; background:repeating-radial-gradient(circle,#101010 0 6%,#292929 6.8% 8%); box-shadow:0 3px 6px #000; opacity:0; }
.selected-record:before { content:""; position:absolute; inset:35%; border-radius:50%; background:#cf8422; }
.selected-record i { position:absolute; inset:47%; z-index:2; border-radius:50%; background:#100b08; }
.artwork-display { position:absolute; left:3%; top:2%; width:94%; aspect-ratio:1; z-index:3; opacity:0; border:min(.35vh,3px) solid #d6a553; border-radius:3%; overflow:hidden; background:#080604; box-shadow:0 0 13px #ffbd4388,inset 0 0 8px #000; }
.artwork-display img { width:100%; height:100%; object-fit:cover; display:block; }
.artwork-display span { display:none; }
#goldFlash { position:absolute; left:14.1%; top:40%; width:14.8%; height:32%; z-index:6; pointer-events:none; opacity:0; border-radius:42%; background:radial-gradient(ellipse,#ffe6b0 0,#f5a34472 25%,#c7621a20 52%,transparent 74%); mix-blend-mode:screen; }
#goldFlash.gold { animation:warm-flash 4.8s ease forwards; }
.playing .artwork-display { opacity:1; }
.hidden { display:none !important; }
.sound-toggle { position:fixed; left:50%; bottom:max(14px,env(safe-area-inset-bottom)); z-index:110; display:flex; align-items:center; gap:7px; translate:-50% 0; padding:9px 15px 8px; border:1px solid #d7ae63; border-radius:22px; color:#f6e5bd; background:linear-gradient(#365046,#17251f); box-shadow:0 4px 16px #000b,inset 0 0 0 1px #f0cc7955; cursor:pointer; font:700 11px/1 Arial,sans-serif; letter-spacing:.08em; white-space:nowrap; }
.sound-toggle span { color:#f0c76e; font:700 18px/1 Georgia,serif; }
.sound-toggle:hover,.sound-toggle:focus-visible { outline:none; filter:brightness(1.18); box-shadow:0 0 15px #e3a74499,0 4px 16px #000b; }
.sound-toggle.sound-on { color:#25160d; background:linear-gradient(#f0cf83,#b8762d); }
.sound-toggle.sound-on span { color:#40220d; }
.player-panel { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:18px; background:#080402a8; }
.site-menu-case { position:relative; width:min(680px,94vw); max-height:90svh; overflow:auto; padding:34px 30px 30px; border:6px solid #78502c; border-radius:8px; color:#f1dfb4; background:linear-gradient(150deg,#30443e,#17241f); box-shadow:0 22px 90px #000,inset 0 0 0 2px #c4a66d; }
.site-menu-case::before { content:""; position:absolute; inset:12px; border:1px solid #c8aa6a66; pointer-events:none; }
.menu-kicker { margin:0 0 4px; text-align:center; font:700 12px/1 Arial,sans-serif; letter-spacing:.24em; }
.site-menu-case h2 { margin:0 0 24px; text-align:center; font:700 clamp(34px,7vw,58px)/1 Georgia,serif; letter-spacing:.12em; }
#closeSiteMenu { position:absolute; right:15px; top:10px; z-index:2; border:0; color:#f0d8a1; background:transparent; cursor:pointer; font:30px/1 Arial,sans-serif; }
.site-menu-list { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.site-menu-list > button,.site-menu-list > a,.site-menu-list > div { display:flex; flex-direction:column; justify-content:center; min-height:72px; padding:12px 15px; border:1px solid #c6a76866; color:inherit; text-align:left; background:#0d171380; text-decoration:none; }
.site-menu-list > button { width:100%; cursor:pointer; font:inherit; }
.site-menu-list strong { font:700 18px/1 Arial,sans-serif; letter-spacing:.08em; }
.site-menu-list span { margin-top:7px; color:#d8c79e; font:400 14px/1.25 Georgia,serif; }
.site-menu-list > button:hover,.site-menu-list > button:focus-visible,.site-menu-list > a:hover,.site-menu-list > a:focus-visible,.menu-socials a:hover,.menu-socials a:focus-visible { outline:none; color:#fff3c9; background:#7d542e; box-shadow:0 0 14px #d99b3588; }
.menu-socials a { color:#e6c978; }
.menu-coming { opacity:.62; }
.donation-case { position:relative; width:min(520px,92vw); padding:42px 32px 36px; border:6px solid #78502c; border-radius:8px; color:#f1dfb4; text-align:center; background:linear-gradient(150deg,#30443e,#17241f); box-shadow:0 22px 90px #000,inset 0 0 0 2px #c4a66d; }
.about-case { position:relative; width:min(760px,94vw); max-height:90svh; overflow:auto; padding:38px 38px 34px; border:6px solid #78502c; border-radius:8px; color:#f1dfb4; background:linear-gradient(150deg,#30443e,#17241f); box-shadow:0 22px 90px #000,inset 0 0 0 2px #c4a66d; }
.about-case::before { content:""; position:absolute; inset:12px; border:1px solid #c8aa6a66; pointer-events:none; }
.about-kicker { margin:0 0 8px; text-align:center; font:700 12px/1 Arial,sans-serif; letter-spacing:.24em; }
.about-case h2 { margin:0 0 24px; color:#e6c978; text-align:center; font:700 clamp(25px,6vw,47px)/1 Georgia,serif; letter-spacing:.06em; }
.about-copy { position:relative; max-width:62ch; margin:auto; font:400 16px/1.5 Georgia,serif; }
.about-copy p { margin:0 0 16px; }
.about-copy em { color:#edce83; }
.about-signoff { color:#edce83; font-weight:700; }
.old-bio { margin-top:28px; padding-top:18px; border-top:1px solid #c8aa6a66; }
.old-bio summary { color:#edce83; cursor:pointer; font:700 14px/1.2 Arial,sans-serif; letter-spacing:.12em; }
.old-bio[open] summary { margin-bottom:20px; }
.old-bio p { color:#dfd0ab; }
#closeAbout { position:absolute; right:15px; top:10px; z-index:2; border:0; color:#f0d8a1; background:transparent; cursor:pointer; font:30px/1 Arial,sans-serif; }
.donation-case::before { content:""; position:absolute; inset:12px; border:1px solid #c8aa6a66; pointer-events:none; }
.donation-kicker { margin:0 0 10px; font:700 12px/1 Arial,sans-serif; letter-spacing:.22em; }
.donation-case h2 { margin:0 0 16px; font:700 clamp(34px,8vw,56px)/1 Georgia,serif; }
.donation-case p:not(.donation-kicker) { margin:0 auto 25px; max-width:34ch; font:400 17px/1.45 Georgia,serif; }
.donation-case a { position:relative; display:inline-block; padding:13px 24px; border:1px solid #e2c37e; border-radius:24px; color:#27160d; background:#e0b75c; text-decoration:none; font:700 15px/1 Arial,sans-serif; letter-spacing:.08em; }
.donation-case a:hover,.donation-case a:focus-visible { outline:none; filter:brightness(1.25); box-shadow:0 0 16px #f0b44c; }
#closeDonation { position:absolute; right:15px; top:10px; z-index:2; border:0; color:#f0d8a1; background:transparent; cursor:pointer; font:30px/1 Arial,sans-serif; }
.player-case { width:min(560px,92vw); padding:13px; border:3px solid #714521; border-radius:8px; background:linear-gradient(145deg,#2d1d13,#130c08); box-shadow:0 18px 70px #000; }
.player-topline { height:34px; display:flex; align-items:center; justify-content:space-between; color:#eacb8f; font:700 12px/1 Georgia,serif; letter-spacing:.08em; }
#closePlayer { border:0; background:transparent; color:#f2d6a2; font:28px/1 Arial,sans-serif; cursor:pointer; }
#playerFrame { min-height:152px; background:#0c0907; }
#playerFrame iframe { display:block; width:100%; border:0; }
.spotify-player { height:352px; }
.bandcamp-player { height:240px; }
.video-case { position:relative; width:min(920px,94vw); aspect-ratio:16/9; border:10px solid #5a321b; border-radius:18px; background:#050505; box-shadow:0 20px 80px #000; }
#closeYouTube { position:absolute; right:-4px; top:-42px; z-index:2; border:0; background:transparent; color:#f2d6a2; font:28px/1 Arial,sans-serif; cursor:pointer; text-shadow:0 2px 3px #000; }
#youtubeFrame { display:block; width:100%; height:100%; border:0; border-radius:7px; }
.gigs-case { width:min(720px,94vw); max-height:min(690px,88svh); overflow:auto; padding:18px; border:5px solid #70451f; border-radius:8px; color:#2b170c; background:#ead9ae; box-shadow:0 20px 80px #000; }
.gigs-topline { display:flex; align-items:center; justify-content:space-between; padding:2px 4px 15px; border-bottom:2px solid #6d4a2e; font:700 22px/1 Georgia,serif; letter-spacing:.12em; }
#closeGigs { border:0; background:transparent; color:#442612; font:30px/1 Arial,sans-serif; cursor:pointer; }
.contact-case { position:relative; width:min(520px,92vw); padding:38px 30px 34px; border:5px solid #70451f; border-radius:8px; color:#2b170c; text-align:center; background:linear-gradient(145deg,#f1e1b9,#d1ad73); box-shadow:0 20px 80px #000, inset 0 0 0 2px #fff2c7; }
.contact-case::before { content:""; position:absolute; inset:10px; border:1px solid #8b5a2b; pointer-events:none; }
.contact-kicker { margin:0 0 12px; font:700 12px/1 Arial,sans-serif; letter-spacing:.18em; }
.contact-case h2 { margin:0 0 24px; font:700 clamp(24px,5vw,38px)/1.1 Georgia,serif; }
.contact-email { position:relative; display:inline-block; max-width:100%; padding:13px 18px; border:1px solid #6f431e; border-radius:22px; color:#f4dfad; background:#3b210f; font:700 clamp(12px,3.5vw,17px)/1 Arial,sans-serif; text-decoration:none; overflow-wrap:anywhere; transition:filter .18s ease,box-shadow .18s ease; }
.contact-email:hover,.contact-email:focus-visible { filter:brightness(1.3); box-shadow:0 0 14px #d99b35; outline:none; }
#closeContact { position:absolute; right:14px; top:10px; z-index:2; border:0; color:#442612; background:transparent; font:30px/1 Arial,sans-serif; cursor:pointer; }
.toilet-room { isolation:isolate; }
.graffiti-link,.back-to-bar { position:absolute; z-index:4; border:0; cursor:pointer; color:#201813; background:transparent; text-shadow:1px 1px 0 #e7d8ad; transform:rotate(-4deg); font:900 clamp(12px,2.6vh,34px)/.95 "Arial Black",Impact,sans-serif; letter-spacing:.04em; }
.graffiti-link::after,.back-to-bar::after { content:""; position:absolute; inset:-18%; z-index:-1; opacity:0; border-radius:45%; background:radial-gradient(ellipse,#ffd56966,transparent 72%); }
.graffiti-link:hover::after,.graffiti-link:focus-visible::after,.back-to-bar:hover::after,.back-to-bar:focus-visible::after { animation:linked-gold-flash 1.15s ease-out forwards; }
.graffiti-blog { left:20%; top:19%; width:23%; height:18%; color:#273e2d; }
.graffiti-testimonials { left:51%; top:47%; width:22%; height:12%; color:#77251f; transform:rotate(5deg); }
.graffiti-bio { left:51.5%; top:10%; width:20%; height:18%; color:#e3cf94; text-shadow:1px 2px 2px #000; transform:rotate(-2deg); font-size:clamp(10px,1.8vh,24px); }
.back-to-bar { left:51%; top:68%; width:22%; height:10%; color:#e3cf94; text-shadow:1px 2px 2px #000; transform:rotate(-5deg); font-size:clamp(10px,1.8vh,24px); }
.wall-case { position:relative; width:min(620px,92vw); max-height:88svh; overflow:auto; padding:42px 34px 36px; border:5px solid #314a37; border-radius:5px; color:#2b2015; text-align:center; background:linear-gradient(150deg,#e3d6aa,#b7b18b); box-shadow:0 20px 80px #000,inset 0 0 22px #665c3c66; transform:rotate(-1deg); }
.wall-case::before { content:""; position:absolute; inset:9px; border:1px dashed #665943; pointer-events:none; }
.wall-kicker { margin:0 0 10px; font:900 12px/1 Arial,sans-serif; letter-spacing:.18em; }
.wall-case h2 { margin:0 0 18px; color:#273e2d; font:900 clamp(22px,5vw,42px)/1 "Arial Black",Impact,sans-serif; transform:rotate(-2deg); }
.wall-case p:last-child { margin:0 auto; max-width:48ch; font:700 16px/1.45 Georgia,serif; }
.wall-quote { display:block; margin:0 auto 20px; max-width:46ch; font:700 16px/1.4 Georgia,serif; transform:rotate(-1deg); }
.wall-quote:nth-child(2) { color:#273e2d; transform:rotate(1deg); }
.wall-quote:nth-child(3) { color:#77251f; transform:rotate(-.5deg); }
.wall-quote b { display:block; margin-top:7px; font:900 12px/1.25 "Arial Black",Impact,sans-serif; letter-spacing:.04em; }
#closeWallPanel { position:absolute; right:13px; top:8px; z-index:2; border:0; color:#332719; background:transparent; font:30px/1 Arial,sans-serif; cursor:pointer; }
.gig-list { display:grid; }
.bandsintown-gigs { display:block; min-height:150px; padding-top:12px; }
.bandsintown-gigs .bit-widget { font-family:Arial,sans-serif !important; }
.bandsintown-gigs .bit-event { border-color:#80634488 !important; }
.bandsintown-gigs .bit-button { border-radius:18px !important; }
.gig-row { display:grid; grid-template-columns:78px minmax(150px,1.4fr) minmax(110px,1fr) 150px; gap:12px; align-items:center; padding:16px 4px; border-bottom:1px solid #80634488; font:700 13px/1.2 Arial,sans-serif; }
.gig-row strong { font-weight:700; }
.gig-row button { border:1px solid #6f431e; border-radius:18px; padding:9px 11px; color:#ead9ae; background:#3b210f; font:700 11px/1 Arial,sans-serif; letter-spacing:.05em; }
.gig-row button:disabled { opacity:.55; cursor:default; }
@media (max-width:650px) {
  .gig-row { grid-template-columns:68px 1fr; gap:7px 12px; }
  .gig-row button { grid-column:2; width:max-content; }
  .site-menu-list { grid-template-columns:1fr; }
  .site-menu-list > button,.site-menu-list > a,.site-menu-list > div { min-height:60px; }
}

@keyframes linked-gold-flash { 0%{opacity:0;transform:scale(.96)} 18%{opacity:.8;transform:scale(1.03)} 42%{opacity:.18;transform:scale(1)} 66%{opacity:.5} 100%{opacity:.28;transform:scale(1)} }
@keyframes warm-flash { 0%,52%{opacity:0} 61%{opacity:.58} 73%{opacity:.12} 100%{opacity:0} }
@keyframes selectorOpen { 0%{opacity:0;transform:scale(.5) translateY(18%)} 62%{opacity:1;transform:scale(1.05) translateY(-3%)} 100%{opacity:1;transform:scale(1) translateY(0)} }
@keyframes selectorClose { to{opacity:0;transform:scale(.65) translateY(18%)} }
@keyframes carouselFind { 0%{rotate:0deg;filter:brightness(.75)} 25%{rotate:-46deg;filter:brightness(1.35)} 86%{opacity:1} 100%{rotate:-46deg;opacity:0} }
@keyframes recordTransfer {
  0%,23% { opacity:0; left:10%; top:75%; width:30%; transform:scale(.6); }
  28% { opacity:1; left:8%; top:28%; width:38%; transform:scale(.75); }
  47% { opacity:1; left:55%; top:28%; width:38%; transform:scale(.75); }
  66% { opacity:1; left:55%; top:66%; width:38%; transform:scaleY(.22); }
  84%,100% { opacity:1; left:55%; top:66%; width:38%; transform:scaleY(.2); }
}
@keyframes platterStart { 0%,63%{filter:brightness(.65)} 72%,100%{filter:brightness(1.35);box-shadow:0 0 12px #e7aa47} }
@keyframes artworkOn { 0%,82%{opacity:0;transform:scale(.55)} 92%{opacity:1;transform:scale(1.07)} 100%{opacity:1;transform:scale(1)} }

@media (max-aspect-ratio: 1.25/1) {
  .viewport { display: block; }
  .room { width: calc(100svh * 1.776833); height: 100svh; aspect-ratio: auto; }
  .entry-screen { display:block; }
  .entry-stage { width:calc(100svh * 1.776833); height:100svh; }
  .phone-pan-controls { position:fixed; inset:0; z-index:85; display:block; pointer-events:none; }
  .pan-arrow { position:absolute; top:50%; translate:0 -50%; width:46px; height:72px; padding:0 0 7px; border:1px solid #f0c66e99; border-radius:24px; color:#ffe8ad; background:#1d1009a6; box-shadow:0 0 16px #d9903266,inset 0 0 10px #e8b45b22; backdrop-filter:blur(2px); pointer-events:auto; cursor:pointer; font:700 56px/1 Georgia,serif; text-shadow:0 1px 5px #000; transition:opacity .2s ease,filter .2s ease,transform .2s ease; }
  .pan-arrow:active { transform:scale(.92); filter:brightness(1.35); }
  .pan-arrow:disabled { opacity:.16; pointer-events:none; }
  .pan-left { left:10px; }
  .pan-right { right:10px; }
  .sound-toggle { bottom:max(10px,env(safe-area-inset-bottom)); padding:8px 13px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}