@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root { --cream:#f2e5cb; --amber:#efc57c; --ink:#130e0b; --mono:"DM Mono",monospace; --serif:"Libre Baskerville",Georgia,serif; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:var(--ink); }
body { color:var(--cream); font-family:var(--serif); }
.scene { position:relative; min-height:100svh; overflow:hidden; isolation:isolate; }
.scene__image,.scene__scrim { position:absolute; inset:0; }
.scene__image { z-index:-3; background:center/cover no-repeat; transform:scale(1.015); transition:transform 1.25s cubic-bezier(.2,.75,.15,1),filter .9s ease; }
.scene__image--door { background-image:url('assets/bar-exterior.png'); }
.scene__image--lobby { background-image:url('assets/bar-interior-v3.png'); background-position:right top; }
.scene__scrim { z-index:-2; background:linear-gradient(90deg,rgba(8,5,4,.88),rgba(8,5,4,.38) 43%,rgba(8,5,4,.14) 68%,rgba(8,5,4,.5)); }
.scene__scrim--lobby { background:linear-gradient(90deg,rgba(7,4,3,.73),transparent 48%,rgba(7,4,3,.54)); }
.door-copy { position:absolute; left:clamp(1.4rem,7vw,8rem); top:clamp(5.8rem,19vh,13rem); max-width:min(36rem,73vw); text-shadow:0 2px 20px rgba(0,0,0,.8); }
.eyebrow { margin:0 0 1rem; color:#f0bd72; font:500 clamp(.67rem,.8vw,.83rem)/1.5 var(--mono); letter-spacing:.17em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(3.5rem,8.5vw,8.2rem); font-weight:400; letter-spacing:-.04em; line-height:.99; }
.lede { margin:1.5rem 0 .4rem; font-size:clamp(1.15rem,2vw,1.7rem); font-style:italic; }
.note { max-width:28rem; margin:0; color:rgba(242,229,203,.75); font-size:clamp(.85rem,1.2vw,1.05rem); line-height:1.65; }
.door-hit { position:absolute; z-index:2; top:7%; bottom:17%; left:44%; width:23%; border-radius:8px; }
.door-hit:hover,.door-hit:focus-visible { background:rgba(235,158,61,.09); box-shadow:inset 0 0 44px 12px rgba(236,156,56,.38); outline:2px solid rgba(242,229,203,.7); outline-offset:5px; }
.invitation { position:absolute; z-index:2; left:53%; bottom:10%; transform:translateX(-50%); color:#f7d99e; font-size:clamp(1rem,1.5vw,1.3rem); font-style:italic; text-shadow:0 1px 13px #000; }
.skip { position:absolute; z-index:2; right:1.5rem; bottom:1.4rem; color:rgba(242,229,203,.77); font:.72rem var(--mono); letter-spacing:.06em; text-underline-offset:.32em; }
.front-house--door.is-entering .scene__image { transform:scale(1.34); filter:brightness(1.38) saturate(1.1); }
.front-house--door.is-entering .door-copy,.front-house--door.is-entering .door-hit,.front-house--door.is-entering .invitation,.front-house--door.is-entering .skip { opacity:0; transition:opacity .4s ease; }
.lobby-copy { position:absolute; z-index:1; left:clamp(1.25rem,4.5vw,5rem); top:clamp(1.5rem,4.6vh,4rem); text-shadow:0 2px 20px rgba(0,0,0,.8); }
.lobby-copy h1 { max-width:min(38rem,57vw); font-size:clamp(2.4rem,5vw,5.6rem); }
.lobby-nav { position:absolute; z-index:2; inset:0; }
.object { position:absolute; display:grid; gap:.35rem; min-width:8.8rem; color:var(--cream); opacity:.92; text-decoration:none; text-shadow:0 1px 12px #000; transition:transform .25s,color .25s,opacity .25s; }
.object span { font-size:clamp(1.12rem,1.75vw,1.65rem); font-style:italic; }
.object small { color:var(--amber); font:.61rem/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.object em { max-width:13rem; color:var(--amber); font-size:clamp(.74rem,1vw,.92rem); line-height:1.38; }
.object:hover,.object:focus-visible { color:#fff6e3; opacity:1; outline:0; transform:translateY(-5px); }
.object--jukebox { left:5.5%; bottom:26%; }.object--memories { right:6%; bottom:16%; }.object--shop { left:56%; top:38%; }
.top-nav { position:absolute; z-index:3; top:1.3rem; right:clamp(1rem,3vw,3rem); display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; font:.68rem var(--mono); letter-spacing:.08em; text-shadow:0 1px 9px #000; text-transform:uppercase; }
.top-nav a { color:rgba(242,229,203,.84); text-decoration:none; }.top-nav a:hover,.top-nav a:focus-visible { color:#fff; text-decoration:underline; text-underline-offset:.35em; }
@media (max-width:760px) { .scene__image--door { background-position:56% center; }.scene__scrim { background:linear-gradient(180deg,rgba(8,5,4,.45),rgba(8,5,4,.2) 40%,rgba(8,5,4,.91)); }.door-copy { top:auto; bottom:23%; max-width:min(30rem,calc(100vw - 2.8rem)); }.note,.invitation { display:none; }.door-hit { top:4%; bottom:37%; left:18%; width:69%; }.top-nav { left:1rem; right:1rem; justify-content:center; gap:.55rem 1rem; font-size:.59rem; }.lobby-copy { max-width:16rem; }.lobby-copy h1 { font-size:2.1rem; }.scene__image--lobby { background-position:58% center; }.object { min-width:0; }.object span { font-size:.96rem; }.object small { font-size:.54rem; }.object em { max-width:8rem; font-size:.7rem; }.object--jukebox { left:5%; bottom:34%; }.object--memories { right:3%; bottom:19%; }.object--shop { left:43%; top:47%; max-width:7rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* The jukebox is its own freestanding front-house room, not a modal. */
.scene--jukebox { min-height:100svh; overflow:auto; padding:clamp(7rem,12vh,9.5rem) clamp(1rem,5vw,5rem) clamp(2rem,5vh,4rem); }
.scene__scrim--jukebox { background:linear-gradient(90deg,rgba(7,4,3,.88),rgba(7,4,3,.58) 47%,rgba(7,4,3,.78)); }
.jukebox-copy { position:relative; z-index:1; max-width:38rem; text-shadow:0 2px 20px rgba(0,0,0,.8); }
.jukebox-copy h1 { font-size:clamp(2.8rem,6vw,6.3rem); }
.jukebox-back { position:absolute; z-index:3; top:1.3rem; left:clamp(1rem,3vw,3rem); color:rgba(242,229,203,.84); font:.68rem var(--mono); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.jukebox-back:hover,.jukebox-back:focus-visible { color:#fff; text-decoration:underline; text-underline-offset:.35em; }
.jukebox-room { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(17rem,.85fr); gap:clamp(1rem,3vw,3rem); width:min(76rem,100%); margin:clamp(2.5rem,5vh,4.5rem) auto 0; align-items:start; }
.quarter-prompt { grid-column:1/-1; display:flex; align-items:center; gap:1rem; max-width:27rem; padding:.65rem 1rem .65rem .4rem; border:1px solid rgba(239,197,124,.35); background:linear-gradient(90deg,rgba(46,23,12,.84),rgba(25,14,10,.34)); box-shadow:0 .8rem 2rem rgba(0,0,0,.28); }
.quarter-prompt img { width:clamp(4.5rem,8vw,7rem); height:clamp(4.5rem,8vw,7rem); object-fit:contain; }
.quarter-prompt p { margin:0; color:var(--amber); font-size:clamp(1rem,1.5vw,1.22rem); font-style:italic; }
.quarter-prompt small { display:block; margin-top:.28rem; color:rgba(242,229,203,.72); font:.63rem/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.record-selector,.now-playing { border:1px solid rgba(239,197,124,.38); background:linear-gradient(145deg,rgba(43,23,15,.92),rgba(17,10,8,.92)); box-shadow:0 1.25rem 3rem rgba(0,0,0,.42); }
.record-selector { padding:clamp(1.1rem,2.4vw,2rem); border:clamp(3.2rem,5vw,5.5rem) solid transparent; border-image:url('assets/jukebox-cabinet-frame-v1.png') 205 185 145 185 fill stretch; background:linear-gradient(145deg,rgba(43,23,15,.92),rgba(17,10,8,.92)); }
.record-selector__header { display:grid; grid-template-columns:1fr; gap:1.25rem; padding-bottom:1.25rem; border-bottom:1px solid rgba(239,197,124,.22); }
.record-selector .quarter-prompt { display:grid; grid-template-columns:auto minmax(0,1fr); grid-column:auto; max-width:none; padding:0; border:0; background:none; box-shadow:none; }
.quarter-prompt__copy p { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .55rem; }
.quarter-prompt__youtube { color:var(--amber); font:.64rem/1.15 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.quarter-prompt__message { color:#fff0cd; font:italic clamp(1.05rem,1.55vw,1.42rem)/1.1 var(--serif); }
.quarter-prompt__copy small { position:relative; display:flex; align-items:center; gap:.55rem; margin-top:.42rem; color:rgba(242,229,203,.74); font:.57rem/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.quarter-prompt__copy small::before { width:1.8rem; height:1px; background:var(--amber); content:""; }
.panel-kicker { margin:0 0 .45rem; color:var(--amber); font:.62rem/1.4 var(--mono); letter-spacing:.13em; text-transform:uppercase; }
.record-selector h2,.now-playing h2 { font-size:clamp(1.55rem,2.5vw,2.35rem); }
.record-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.55rem; margin-top:1.25rem; }
.record-button { display:grid; grid-template-columns:2rem minmax(0,1fr) auto; gap:.22rem .5rem; align-items:start; min-height:5.15rem; padding:.65rem; border:1px solid rgba(242,229,203,.16); color:var(--cream); background:rgba(5,3,2,.28); cursor:pointer; font-family:var(--serif); text-align:left; transition:background .2s,border-color .2s,transform .2s; }
.record-button b { grid-row:1/3; display:grid; place-items:center; align-self:center; width:1.82rem; aspect-ratio:1; border:1px solid #f2c66f; border-radius:50%; color:#2a1408; background:radial-gradient(circle at 35% 28%,#fff0bb 0 9%,#f6c864 26%,#b86722 63%,#4d210e 100%); box-shadow:inset 0 0 0 2px rgba(62,25,9,.55),0 .12rem .24rem rgba(0,0,0,.52); font:.61rem var(--mono); letter-spacing:0; text-shadow:0 1px rgba(255,241,190,.42); }
.record-button span { min-width:0; color:rgba(242,229,203,.84); font:.62rem/1.25 var(--mono); letter-spacing:.025em; overflow-wrap:anywhere; }
.record-button em { min-width:0; color:#fff0cd; font-size:clamp(.82rem,1vw,.96rem); line-height:1.18; overflow-wrap:anywhere; }
.record-button small { grid-column:3; grid-row:1/3; align-self:center; color:rgba(242,229,203,.56); font:.58rem var(--mono); }
.record-button:hover,.record-button:focus-visible,.record-button.is-selected { border-color:var(--amber); background:rgba(203,133,45,.16); outline:0; transform:translateY(-2px); }
.record-button:hover b,.record-button:focus-visible b,.record-button.is-selected b { background:radial-gradient(circle at 35% 28%,#fffbe4 0 11%,#ffe28a 29%,#e9892d 64%,#6b2d0e 100%); box-shadow:inset 0 0 0 2px rgba(72,27,8,.52),0 0 .7rem rgba(239,197,124,.48); }
.now-playing { position:sticky; top:1rem; padding:clamp(1.1rem,2.4vw,2rem); }
.now-playing__artist { min-height:2.5em; margin:.55rem 0 1rem; color:var(--amber); font-size:.93rem; }
.youtube-shell { aspect-ratio:16/9; overflow:hidden; border:1px solid rgba(239,197,124,.32); background:#090604; }
.youtube-shell iframe { width:100%; height:100%; border:0; }
.jukebox-status { display:grid; gap:.24rem; min-height:3.6em; margin:1rem 0 .7rem; padding:.72rem .8rem; border-left:2px solid var(--amber); background:linear-gradient(90deg,rgba(203,133,45,.15),transparent); color:rgba(242,229,203,.82); font-size:.84rem; line-height:1.45; }
.jukebox-status__kicker { color:var(--amber); font:.58rem/1.25 var(--mono); letter-spacing:.13em; text-transform:uppercase; }
.jukebox-status strong { color:#fff0cd; font-size:.94rem; font-weight:400; line-height:1.3; }
.now-playing__controls { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.jukebox-button,.youtube-link { border:1px solid rgba(239,197,124,.54); padding:.63rem .78rem; color:var(--cream); background:rgba(15,8,5,.72); font:.62rem var(--mono); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.jukebox-button { cursor:pointer; }.jukebox-button:disabled,.youtube-link[aria-disabled="true"] { cursor:not-allowed; opacity:.43; }
.jukebox-button:not(:disabled):hover,.jukebox-button:not(:disabled):focus-visible,.youtube-link:not([aria-disabled="true"]):hover,.youtube-link:not([aria-disabled="true"]):focus-visible { border-color:var(--amber); color:#fff6e3; outline:0; }
.music-note { margin:1rem 0 0; color:rgba(242,229,203,.5); font:.62rem/1.5 var(--mono); }
@media (max-width:760px) { .scene--jukebox { padding-top:5.5rem; }.jukebox-back { top:1rem; }.front-house--jukebox .top-nav { top:3.25rem; }.jukebox-copy h1 { font-size:3rem; }.jukebox-room { grid-template-columns:1fr; margin-top:2rem; }.quarter-prompt { grid-column:auto; }.record-selector { border-width:3.8rem 2.1rem 2.8rem; border-image-slice:205 185 145 185; padding:.95rem .7rem; }.record-selector__header { grid-template-columns:1fr; }.record-selector .quarter-prompt { grid-template-columns:auto minmax(0,1fr); }.now-playing { position:relative; top:auto; }.record-list { grid-template-columns:repeat(auto-fit,minmax(8.6rem,1fr)); } }