@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Manrope:wght@700;800&display=swap');
:root{--lime:#d9ff43;--ink:#f8f6f1;--muted:#9b99a4}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#070711;color:var(--ink);font-family:'DM Sans',sans-serif}
.ambient{position:fixed;inset:-12vmax;z-index:0;overflow:hidden;background:radial-gradient(circle at 18% 22%,rgba(255,78,136,.48),transparent 26%),radial-gradient(circle at 80% 28%,rgba(109,91,245,.5),transparent 27%),radial-gradient(circle at 48% 82%,rgba(217,255,67,.3),transparent 30%),linear-gradient(135deg,#070711,#130c22 48%,#07151a);animation:drift 12s ease-in-out infinite alternate}
.ambient:before{content:"";position:absolute;width:110vmax;height:110vmax;left:50%;top:50%;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,transparent 0 9%,rgba(255,78,136,.2) 10% 13%,transparent 14% 28%,rgba(93,169,255,.22) 29% 32%,transparent 33% 49%,rgba(217,255,67,.18) 50% 53%,transparent 54% 100%);filter:blur(12px);animation:spin 24s linear infinite}
.ambient:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,transparent,black 28%,black 72%,transparent);transform:perspective(500px) rotateX(62deg) scale(1.5) translateY(22%)}
.ambient i{position:absolute;width:18vmax;height:18vmax;border-radius:50%;filter:blur(45px);opacity:.55;animation:pulse 7s ease-in-out infinite alternate}
.ambient i:nth-child(1){left:8%;top:18%;background:#ff4e88}.ambient i:nth-child(2){right:6%;top:9%;background:#6d5bf5;animation-delay:-2s}.ambient i:nth-child(3){left:38%;bottom:4%;background:#d9ff43;animation-delay:-4s}.ambient i:nth-child(4){right:24%;bottom:20%;background:#2dd4bf;animation-delay:-5s}
@keyframes drift{to{filter:hue-rotate(28deg) saturate(1.18);transform:scale(1.04)}}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes pulse{to{transform:translate(8vw,5vh) scale(1.35);opacity:.8}}
header{position:fixed;z-index:20;inset:0 0 auto;height:88px;display:flex;align-items:center;gap:18px;padding:0 clamp(24px,4vw,64px);border-bottom:1px solid rgba(255,255,255,.08);background:rgba(8,8,13,.78);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:12px;font:800 clamp(15px,1.5vw,22px) 'Manrope';letter-spacing:-.02em}.brand b{padding:5px 8px;border-radius:5px;background:var(--lime);color:#11130b;font-size:10px;letter-spacing:.12em}
.equalizer{width:27px;height:27px;display:flex;align-items:flex-end;justify-content:center;gap:3px;transform:rotate(-10deg)}.equalizer i{width:5px;border-radius:4px;background:var(--lime);animation:bounce .8s ease-in-out infinite alternate}.equalizer i:nth-child(1){height:11px}.equalizer i:nth-child(2){height:24px;animation-delay:-.3s}.equalizer i:nth-child(3){height:17px;animation-delay:-.55s}@keyframes bounce{to{height:7px}}
.status{margin-left:auto;display:flex;align-items:center;gap:8px;color:#b4b2bb;font-size:12px}.status i{width:8px;height:8px;border-radius:50%;background:#ffb35c;box-shadow:0 0 14px #ffb35c}.status.online i{background:#63e692;box-shadow:0 0 14px #63e692}.status.error i{background:#ff5f78;box-shadow:0 0 14px #ff5f78}
.screen-qr{display:flex;align-items:center;gap:8px;padding:5px 9px 5px 5px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.045)}.screen-qr img{display:block;width:52px;height:52px;padding:3px;border-radius:7px;background:#fff}.screen-qr span,.screen-qr b{display:block;font-family:'Manrope',sans-serif}.screen-qr span{color:#8f8e99;font-size:7px;font-weight:700;letter-spacing:.12em;line-height:1.25}.screen-qr b{margin-top:2px;color:var(--lime);font-size:9px}.clock{min-width:76px;text-align:right;font:800 clamp(22px,2.5vw,34px) 'Manrope';letter-spacing:-.05em}
main{position:fixed;z-index:3;inset:88px 0 0;background:#050507}
.video-frame{position:absolute;inset:0;overflow:hidden;background:#050507}.video-frame iframe{position:absolute;left:50%;top:50%;width:100vw;height:56.25vw;min-width:177.78vh;min-height:100%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.video-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(3,3,6,.94) 0,rgba(3,3,6,.28) 27%,transparent 55%),linear-gradient(90deg,rgba(3,3,6,.25),transparent 32%)}
.track-card{position:absolute;left:clamp(28px,4vw,68px);right:clamp(28px,4vw,68px);bottom:clamp(25px,4vh,50px);display:flex;align-items:flex-end;gap:20px}.track-card>div:nth-child(2){min-width:0}.eyebrow{margin:0 0 9px;color:var(--lime);font:800 10px 'Manrope';letter-spacing:.18em}.track-card h1{max-width:75vw;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 clamp(34px,4.5vw,76px)/.95 'Manrope';letter-spacing:-.055em}.track-card p:last-child{margin:11px 0 0;color:#c4c1ca;font-size:clamp(15px,1.45vw,23px)}
.playing-bars{flex:0 0 58px;width:58px;height:58px;padding:13px;display:flex;align-items:flex-end;justify-content:center;gap:4px;border-radius:13px;background:var(--lime);box-shadow:0 14px 35px rgba(217,255,67,.22)}.playing-bars i{width:5px;border-radius:4px;background:#15170d;animation:bar .55s ease-in-out infinite alternate}.playing-bars i:nth-child(1){height:12px}.playing-bars i:nth-child(2){height:25px;animation-delay:-.2s}.playing-bars i:nth-child(3){height:18px;animation-delay:-.4s}.playing-bars i:nth-child(4){height:29px;animation-delay:-.1s}.playing-bars.paused i{animation-play-state:paused}@keyframes bar{to{height:7px}}
.sync-state{margin-left:auto;align-self:flex-end;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(255,255,255,.12);border-radius:99px;background:rgba(5,5,8,.52);color:#b4b2bb;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.sync-state i{width:7px;height:7px;border-radius:50%;background:#63e692;box-shadow:0 0 12px #63e692}
.waiting{position:fixed;z-index:10;inset:88px 0 0;display:none;place-content:center;text-align:center;padding:40px}.waiting.show{display:grid}.waiting-icon{width:110px;height:110px;margin:0 auto 30px;display:grid;place-items:center;padding-left:8px;border-radius:50%;background:var(--lime);color:#111;font-size:47px;box-shadow:0 0 80px rgba(217,255,67,.18);animation:idle 1.8s ease-in-out infinite alternate}@keyframes idle{to{transform:scale(1.06);box-shadow:0 0 110px rgba(217,255,67,.33)}}.waiting h2{margin:0;font:800 clamp(44px,6vw,94px)/.9 'Manrope';letter-spacing:-.065em}.waiting>p:last-child{margin:20px 0 0;color:#aaa7b0;font-size:clamp(15px,1.5vw,22px)}
body.no-party main{display:none}body.no-party header{border:0;background:transparent;backdrop-filter:none;pointer-events:none}body.no-party header>:not(.screen-qr):not(.clock){display:none!important}body.no-party .screen-qr{display:flex;margin-left:auto;pointer-events:auto}body.no-party .waiting{inset:0}
@media(max-width:850px){header{height:70px;padding:0 16px}.brand>span:nth-child(2),.status span,.screen-qr span{display:none}.screen-qr{padding:4px}.screen-qr img{width:46px;height:46px}main{inset:70px 0 0}.track-card{left:20px;right:20px;bottom:24px}.track-card h1{max-width:82vw}.playing-bars,.sync-state{display:none}.waiting{inset:70px 0 0}}