:root{--saloon-ink: #1b100e;--saloon-cream: #f6ece0;--saloon-gold: #e8a44c;--saloon-rose: #d98a8a;--saloon-red: #c0261f;--saloon-blue: #2e6fa8;--saloon-glass: rgb(255 255 255 / .1);--saloon-glass-line: rgb(255 255 255 / .22);--saloon-shadow: 0 1px 8px rgb(0 0 0 / .55)}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;background:#140c0b;color:var(--saloon-cream);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior:none}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.shopfront{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#140c0b}.shopfront img{width:100%;height:100%;object-fit:cover;object-position:52% 62%;transform-origin:52% 62%;animation:saloon-drift 64s ease-in-out infinite alternate}@keyframes saloon-drift{0%{transform:scale(1.06) translate3d(-.6%,.4%,0)}to{transform:scale(1.14) translate3d(.8%,-.8%,0)}}.shopfront:after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 42%,#0000 38%,#140c0b9e),linear-gradient(to bottom,#140c0b85,#140c0b0f 26%,#140c0b2e 58%,#140c0bdb)}.glow{position:fixed;inset:-20%;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(46% 40% at 50% 74%,var(--saloon-gold) 0%,transparent 70%);mix-blend-mode:soft-light;transition:opacity 1.2s ease}body[data-playing=true] .glow{opacity:.85}.room{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:100dvh;padding:clamp(14px,2.6vw,22px);gap:24px}.hud{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;font-size:13px;font-weight:500;text-shadow:var(--saloon-shadow)}.clock{font-variant-numeric:tabular-nums;letter-spacing:.02em;opacity:.92;white-space:nowrap}.clock small{font-size:11px;opacity:.6;margin-left:6px;letter-spacing:.08em;text-transform:uppercase}.onair{display:inline-flex;align-items:center;gap:8px;margin:0;font-family:"Baloo 2",ui-sans-serif,system-ui,sans-serif;font-weight:600;letter-spacing:.06em;font-size:13px}.pulse{position:relative;display:inline-flex;width:9px;height:9px}.pulse i,.pulse b{position:absolute;inset:0;border-radius:999px;background:#4ade80}.pulse i{animation:saloon-ping 1.6s cubic-bezier(0,0,.2,1) infinite;opacity:.75}.pulse b{box-shadow:0 0 9px #4ade80e6}@keyframes saloon-ping{75%,to{transform:scale(2.4);opacity:0}}.hud-links{display:flex;align-items:center;gap:4px}.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;transition:opacity .18s ease,transform .18s ease,background-color .18s ease}.pill:hover{background:#ffffff1f}.pill:active{transform:scale(.95)}.pill svg{flex:none}.pill .arrow{opacity:.45;transform:rotate(-45deg);transition:opacity .18s ease}.pill:hover .arrow{opacity:.9}.sign{text-align:center;margin-top:clamp(2vh,8vh,12vh);padding:0 16px;text-shadow:0 2px 20px rgb(0 0 0 / .6)}.sign-name{margin:0;font-family:"Baloo 2",ui-sans-serif,system-ui,sans-serif;font-size:clamp(40px,9vw,104px);font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--saloon-cream)}.sign-sub{margin:clamp(6px,1.4vh,14px) 0 0;font-family:"Baloo 2",ui-sans-serif,system-ui,sans-serif;font-size:clamp(13px,2vw,19px);font-weight:600;letter-spacing:.04em;color:#f6ece0a8}.deck{width:100%;max-width:620px;margin-bottom:clamp(10px,4vh,42px);display:flex;flex-direction:column;gap:10px}.bar{display:flex;align-items:center;gap:14px;padding:12px 18px 12px 12px;border-radius:999px;border:1px solid var(--saloon-glass-line);background:var(--saloon-glass);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);box-shadow:0 10px 42px #00000073,inset 0 1px #ffffff3d}.record{position:relative;flex:none;width:76px;height:76px}.record-disc{width:100%;height:100%;border-radius:999px;overflow:hidden;box-shadow:0 6px 18px #00000080,0 0 0 1px #fff3 inset;animation:saloon-spin 8s linear infinite;animation-play-state:paused;background:#241614}body[data-playing=true] .record-disc{animation-play-state:running}.record-disc img{width:100%;height:100%;object-fit:cover}.record-pin{position:absolute;top:50%;left:50%;width:13px;height:13px;translate:-50% -50%;border-radius:999px;background:#000000b8;box-shadow:0 0 0 2px #ffffff6b;pointer-events:none}@keyframes saloon-spin{to{rotate:1turn}}.meta{flex:1;min-width:0}.meta-title,.meta-artist{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meta-title{font-size:15px;font-weight:600;text-shadow:0 1px 2px rgb(0 0 0 / .4)}.meta-artist{margin-top:2px;font-size:13px;color:#f6ece0a8}.seek{position:relative;height:14px;margin-top:8px;cursor:pointer;touch-action:none}.seek-track{position:absolute;inset-inline:0;top:50%;height:4px;translate:0 -50%;border-radius:999px;background:#ffffff38;overflow:hidden}.seek-fill{height:100%;width:0%;border-radius:999px;background:#ffffffe6}.seek-knob{position:absolute;top:50%;left:0%;width:12px;height:12px;translate:-50% -50%;border-radius:999px;background:#fff;box-shadow:0 1px 4px #00000080;opacity:0;transition:opacity .15s ease}.seek:hover .seek-knob,.seek:focus-visible .seek-knob{opacity:1}.times{margin-top:5px;display:flex;justify-content:space-between;font-size:11px;font-variant-numeric:tabular-nums;color:#f6ece094}.controls{display:flex;align-items:center;gap:4px;flex:none}.ctl{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;color:#f6ece0d1;transition:background-color .16s ease,color .16s ease,transform .16s ease}.ctl:hover{background:#ffffff29;color:#fff}.ctl:active{transform:scale(.94)}.ctl[aria-pressed=true]{color:var(--saloon-gold)}.ctl-play{width:46px;height:46px;background:var(--saloon-cream);color:#1b100e;box-shadow:0 4px 16px #0006}.ctl-play:hover{background:#fff;color:#1b100e;transform:scale(1.05)}.ctl-play:disabled{opacity:.5;cursor:default;transform:none}.queue-toggle{align-self:center;display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#f6ece0ad;text-shadow:var(--saloon-shadow);transition:color .16s ease,background-color .16s ease}.queue-toggle:hover{color:var(--saloon-cream);background:#ffffff1a}.queue-toggle svg{transition:rotate .24s ease}.queue-toggle[aria-expanded=true] svg{rotate:180deg}.queue{max-height:0;opacity:0;overflow:hidden;border-radius:20px;border:1px solid transparent;transition:max-height .34s cubic-bezier(.4,0,.2,1),opacity .24s ease,border-color .24s ease}.queue[data-open=true]{max-height:min(46dvh,340px);opacity:1;overflow-y:auto;border-color:var(--saloon-glass-line);background:#140c0b6b;backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);box-shadow:0 10px 42px #00000073;scrollbar-width:thin;scrollbar-color:rgb(255 255 255 / .25) transparent}.queue-row{display:flex;align-items:center;gap:12px;width:100%;padding:9px 16px;text-align:left;transition:background-color .14s ease}.queue-row:hover{background:#ffffff17}.queue-row[aria-current=true]{background:#ffffff21}.queue-row[aria-current=true] .queue-num{color:var(--saloon-gold)}.queue-num{flex:none;width:22px;font-size:11px;font-variant-numeric:tabular-nums;color:#f6ece073}.queue-text{min-width:0;flex:1}.queue-title,.queue-artist{display:block;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-title{font-size:13px;font-weight:500}.queue-artist{font-size:11px;color:#f6ece08c}.queue-len{flex:none;font-size:11px;font-variant-numeric:tabular-nums;color:#f6ece06b}#saloon-audio{position:fixed;width:1px;height:1px;bottom:0;left:0;opacity:0;pointer-events:none;border:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:focus-visible{outline:2px solid var(--saloon-gold);outline-offset:3px;border-radius:8px}@media(max-width:560px){.hud{font-size:12px}.pill span{display:none}.bar{gap:11px;padding:10px 12px 10px 10px}.record{width:62px;height:62px}.controls{gap:0}.ctl{width:34px;height:34px}.ctl-play{width:42px;height:42px}}@media(prefers-reduced-motion:reduce){.shopfront img,.record-disc,.pulse i{animation:none!important}}