/* Boothby SoundLab unified player finish, intentionally isolated after legacy styles. */
:root{--sl-bg:#050817;--sl-panel:#0c1428;--sl-panel2:#101b32;--sl-ink:#f5f8ff;--sl-muted:#b3c7e1;--sl-cyan:#20e7f7;--sl-violet:#a263ff;--sl-line:rgba(114,175,234,.28)}
html{background:var(--sl-bg)}
body{background:#050817;color:var(--sl-ink);font-family:Inter,'Segoe UI',system-ui,sans-serif;line-height:1.5}
body:before{opacity:.16;filter:none}
.mast{padding:16px clamp(16px,3vw,42px);min-height:84px;gap:18px;background:#060d1ef5;border-bottom:1px solid var(--sl-line);backdrop-filter:blur(12px)}
.mast:before{display:none!important}
.mast h1{font-size:clamp(19px,2.25vw,29px);font-weight:850;letter-spacing:-.025em;line-height:1.18}
.mast h1 span{color:var(--sl-cyan)}
.eyebrow{color:#8adcf5;letter-spacing:.14em;font-size:10px}
.back-link{flex-shrink:0;color:#e6f5ff!important;font-size:12px;font-weight:700;text-decoration:none;border:1px solid #6286ac60;background:#13203b;padding:10px 16px;border-radius:12px}
.back-link:hover{border-color:var(--sl-cyan)}
.sl-deck-links{background:#091226e8!important;border-bottom:1px solid #4f84ad44!important;padding:10px clamp(16px,3vw,42px)!important;justify-content:flex-start!important;gap:8px!important}
.sl-deck-links a{font-size:12px!important;font-weight:650!important;color:#d7eaf8!important;border-color:transparent!important;border-radius:12px!important;padding:9px 14px!important;white-space:nowrap}
.sl-deck-links a:hover,.sl-deck-links a:focus-visible,.sl-deck-links a[aria-current=page]{color:#fff!important;border-color:#5287be90!important;background:#143255b5!important;outline:none}
.club-scene{width:calc(100% - 2*clamp(14px,3vw,48px));max-width:1440px;height:clamp(270px,32vw,450px);margin:18px auto 0;border:1px solid var(--sl-line);border-radius:20px;box-shadow:0 22px 58px #0009}
.club-sign{top:16%}.club-sign h2{font-size:clamp(30px,6.0vw,76px);letter-spacing:-.04em}.club-sign p{font-size:clamp(11px,1.5vw,17px);letter-spacing:.25em}
.club-crowd{opacity:.9;filter:saturate(.85) contrast(1.04)}
.club-bottom{bottom:14px}.visual-mode{border-color:#76bde577;background:#081b33cf}
main{max-width:1510px;padding:18px clamp(14px,3vw,48px) 32px}
.hero{position:relative;top:auto;z-index:3;display:flex;align-items:center;gap:18px;padding:17px 20px;border-radius:16px;background:linear-gradient(120deg,#101b33ec,#11152eec);border:1px solid var(--sl-line);box-shadow:0 14px 34px #0008}
.hero-txt{flex:1;min-width:220px}.hero-txt strong{color:#f1faff}.hero-txt span{color:#b9d5e8;line-height:1.5}
.transport{display:flex;gap:10px;align-items:center}.transport button{min-height:44px;border-radius:11px;padding:11px 16px;white-space:nowrap}
.decks{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-areas:'a b' 'mix mix'!important;align-items:stretch!important;gap:14px!important;margin-top:16px}
#deckA{grid-area:a!important}#deckB{grid-area:b!important}.center-panel{grid-area:mix!important;order:initial!important}
.deck{min-width:0;display:grid!important;grid-template-columns:minmax(160px,38%) minmax(0,1fr)!important;grid-template-rows:auto minmax(85px,1fr) auto auto auto!important;gap:5px 20px;align-items:center;text-align:left;padding:18px 22px;border-radius:16px;background:linear-gradient(135deg,#101a31f5,#090e20f7);border:1px solid var(--sl-line)}
.deck-top{grid-column:1/-1;grid-row:1;min-width:0;padding-bottom:8px}
.turntable{grid-column:1;grid-row:2/6;align-self:center;justify-self:center;width:min(100%,250px)!important;aspect-ratio:1;margin:0 auto!important}
.track-name{grid-column:2;grid-row:2;margin:0!important;align-self:end;min-height:unset!important;max-width:100%;font-size:clamp(17px,1.9vw,25px);line-height:1.22;overflow-wrap:anywhere}
.meta{grid-column:2;grid-row:3;min-height:unset;margin:0!important;font-size:12px;align-self:start}
.progress{grid-column:2;grid-row:4;width:100%;margin:8px 0 0!important;align-self:end}
.time{grid-column:2;grid-row:5;margin:4px 0 0!important;font-size:12px;align-self:start}
.record .center{width:58%;height:58%;overflow:hidden;border-radius:50%}.record .center img{width:100%;height:100%;object-fit:cover;display:block}
.center-panel{display:grid!important;grid-template-columns:minmax(120px,220px) 1fr!important;grid-template-rows:auto auto auto auto!important;align-items:center;justify-items:stretch;gap:12px 22px;padding:18px 22px!important;border-radius:16px;min-width:0}
.center-panel .meters{grid-column:1;grid-row:1/4;height:70px;width:100%;max-width:220px}
.center-panel .mix-label{grid-column:2;grid-row:1;text-align:left;font-size:11px}
.center-panel .cross{grid-column:2;grid-row:2;width:100%;max-width:none}
.center-panel .mix-tip{grid-column:2;grid-row:3;text-align:left}
.center-panel .sound-chips{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;min-width:0}
.sound-chip{min-width:0;padding:10px 12px;border-radius:12px}.sound-chip strong{display:block;line-height:1.3;overflow-wrap:anywhere;font-size:clamp(11px,1.1vw,15px)}
.setlist{margin-top:16px;padding:19px 22px;border-radius:16px;border:1px solid var(--sl-line);background:#0b1529ef}
.set-head{margin:0 0 13px}.set-head h2{font-size:14px;letter-spacing:.1em}.setlist ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0}
.setlist li{min-width:0;grid-template-columns:26px 42px minmax(0,1fr);min-height:67px;padding:10px 12px;border-radius:12px;transition:background .15s,border-color .15s;transform:none!important}
.setlist li .track-art{width:42px;height:42px;border-radius:9px}.setlist li .track-caption b{font-size:13px}.setlist li .track-caption small{font-size:11px}
footer{padding:22px clamp(14px,3vw,48px);border-top:1px solid #41608038}
a:focus-visible,button:focus-visible{outline:2px solid #6af1ff!important;outline-offset:3px}
@media(max-width:1100px){.deck{grid-template-columns:minmax(130px,40%) minmax(0,1fr)!important;padding:15px;gap:4px 13px}.turntable{width:min(100%,205px)!important}.setlist ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:740px){.decks{grid-template-columns:1fr!important;grid-template-areas:'a' 'b' 'mix'!important;gap:10px!important}.club-scene{height:250px;margin:10px auto 0;border-radius:13px}.hero{padding:13px 15px}.transport{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.transport button{min-width:0;padding:10px 8px;font-size:12px}.deck{grid-template-columns:minmax(120px,36%) minmax(0,1fr)!important;grid-template-rows:auto minmax(60px,1fr) auto auto auto!important;padding:14px}.turntable{width:min(100%,175px)!important}.center-panel{padding:14px!important;gap:10px 13px}.setlist ol{grid-template-columns:1fr}}
@media(max-width:480px){.mast{padding:12px 14px;min-height:0;align-items:center;flex-direction:row;gap:8px}.mast h1{font-size:17px}.mast .eyebrow{font-size:8px;letter-spacing:.07em}.back-link{padding:8px 10px;font-size:11px}.sl-deck-links{padding:8px 10px!important;justify-content:center!important;gap:3px!important}.sl-deck-links a{padding:8px!important;font-size:11px!important}.club-scene{height:220px}.club-sign{top:23%}.club-sign h2{font-size:clamp(26px,8vw,40px)}.club-sign p{font-size:10px;letter-spacing:.1em}.club-kicker{font-size:8px;letter-spacing:.1em}.live-pulse{font-size:8px;letter-spacing:.04em}.visual-mode{padding:7px 8px;font-size:9px}.deck{grid-template-columns:minmax(100px,35%) minmax(0,1fr)!important;gap:4px 10px;padding:12px}.turntable{width:min(100%,150px)!important}.track-name{font-size:16px}.meta{font-size:11px}.deck-state{font-size:9px}.center-panel{grid-template-columns:1fr!important;grid-template-rows:auto auto auto auto auto!important}.center-panel .meters{grid-column:1;grid-row:1;height:40px;max-width:none}.center-panel .mix-label{grid-column:1;grid-row:2;text-align:center}.center-panel .cross{grid-column:1;grid-row:3}.center-panel .mix-tip{grid-column:1;grid-row:4;text-align:center}.center-panel .sound-chips{grid-column:1;grid-row:5;grid-template-columns:repeat(2,minmax(0,1fr))}.sound-chip:last-child{grid-column:1/-1}.setlist{padding:13px}}
@media(prefers-reduced-motion:reduce){.club-backdrop,.club-crowd,.club-light{transform:none!important;transition:none!important;animation:none!important}.record.spinning{animation:none!important}}

/* v8.7: Play button prompt when the page was opened with ?autoplay=1 but the browser needs a click. */
.play.attention{outline:2px solid #43ddf5;outline-offset:3px;box-shadow:0 0 22px #16daff88}
@media(prefers-reduced-motion:no-preference){.play.attention{animation:play-attention 1.6s ease-in-out infinite}}
@keyframes play-attention{50%{box-shadow:0 0 34px #16daffcc;outline-offset:6px}}
