:root{
  --bg:#04050d; --panel:rgba(13,15,36,.58); --panel-2:rgba(255,255,255,.045);
  --line:rgba(160,170,255,.14); --line-2:rgba(160,170,255,.24);
  --text:#eef0ff; --muted:#a0a7d6; --faint:#6d7399;
  --violet:#8b5cf6; --cyan:#22d3ee; --pink:#f472b6; --gold:#fbbf24; --green:#34d399; --red:#fb7185;
  --grad:linear-gradient(135deg,#8b5cf6 0%,#6366f1 45%,#22d3ee 100%);
  --radius:20px;
  --font:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Orbitron','Space Grotesk',system-ui,sans-serif;
  --blur:18px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:15px/1.45 var(--font);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input,textarea{font:inherit;color:inherit}
a{color:var(--cyan)}
[hidden]{display:none!important}
::selection{background:rgba(139,92,246,.45)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(160,170,255,.18);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- cosmos ---------- */
#stars{position:fixed;inset:0;z-index:0;width:100%;height:100%}
.nebula{position:fixed;inset:-25%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.5;transition:opacity 1s}
.nebula i{position:absolute;border-radius:50%;filter:blur(70px);animation:drift 40s ease-in-out infinite alternate}
.nebula i:nth-child(1){width:60vmax;height:60vmax;left:5%;top:0;background:radial-gradient(circle,#6d28d9 0%,transparent 62%)}
.nebula i:nth-child(2){width:55vmax;height:55vmax;right:0;bottom:0;background:radial-gradient(circle,#0e7490 0%,transparent 62%);animation-duration:48s;animation-delay:-14s}
.nebula i:nth-child(3){width:38vmax;height:38vmax;left:42%;top:38%;background:radial-gradient(circle,#be185d 0%,transparent 62%);opacity:.55;animation-duration:56s;animation-delay:-27s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(7vmax,-5vmax) scale(1.18)}}
body.warping .nebula{opacity:.95}
#flash{position:fixed;inset:0;z-index:60;pointer-events:none;background:radial-gradient(circle at center,rgba(200,230,255,.55),transparent 60%);opacity:0}
body.warping #flash{animation:flash 2s ease-out}
@keyframes flash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
body.warping #app{animation:shake .5s ease-in-out 3}
@keyframes shake{0%,100%{transform:none}25%{transform:translate(1px,-1px)}75%{transform:translate(-1px,1px)}}

.screen{position:relative;z-index:2;height:100%;height:100dvh}
.glass{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(var(--blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);border-radius:var(--radius);box-shadow:0 24px 70px -24px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05)}

/* ---------- login ---------- */
#login{display:flex;align-items:center;justify-content:center;padding:28px 16px;overflow-y:auto}
.login-card{width:min(440px,100%);padding:34px 26px 24px;text-align:center;position:relative;margin:auto;animation:rise .7s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.planet{width:96px;height:96px;margin:0 auto 18px;position:relative;animation:float 6s ease-in-out infinite}
.planet .core{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ddd6fe 0%,#a78bfa 18%,#7c3aed 45%,#3b0764 78%,#1e0536 100%);box-shadow:0 0 50px rgba(139,92,246,.55),inset -14px -12px 26px rgba(0,0,0,.55)}
.planet .core::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(-18deg,transparent 0 12px,rgba(255,255,255,.07) 12px 18px);mix-blend-mode:overlay}
.planet .ring{position:absolute;left:-34px;right:-34px;top:36px;height:24px;border-radius:50%;border:3px solid rgba(34,211,238,.75);transform:rotate(-16deg);box-shadow:0 0 22px rgba(34,211,238,.45),inset 0 0 12px rgba(34,211,238,.35)}
.planet .ring.back{clip-path:inset(0 0 55% 0);z-index:0}
.planet .ring.front{clip-path:inset(50% 0 0 0);z-index:2}
.planet .core{z-index:1}
.planet .moon{position:absolute;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7d6,#fbbf24);box-shadow:0 0 14px #fbbf24;top:50%;left:50%;margin:-6.5px;animation:orbit 7s linear infinite;z-index:3}
@keyframes orbit{from{transform:rotate(0) translateX(78px) rotate(0)}to{transform:rotate(360deg) translateX(78px) rotate(-360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.logo{font-family:var(--display);font-weight:800;letter-spacing:.38em;padding-left:.38em;font-size:34px;margin:0;background:linear-gradient(90deg,#c4b5fd,#fff,#67e8f9,#c4b5fd);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 8s linear infinite}
@keyframes sheen{to{background-position:300% 0}}
.tag{color:var(--muted);margin:6px 0 24px;font-size:14px}
.field{text-align:left;margin-bottom:16px}
.field label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 8px 2px;font-weight:600}
.text-input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:13px 14px;font-size:16px;outline:0;transition:border-color .2s,box-shadow .2s}
.text-input:focus{border-color:rgba(34,211,238,.6);box-shadow:0 0 0 4px rgba(34,211,238,.12)}
.text-input::placeholder{color:var(--faint)}
.name-row{display:flex;gap:8px}
.name-row .text-input{flex:1}
.dice{width:50px;flex:none;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:22px;transition:transform .3s,background .2s}
.dice:hover{background:rgba(255,255,255,.1)}
.dice:active{transform:rotate(200deg) scale(.9)}
.avatar-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.av{aspect-ratio:1;border-radius:12px;font-size:21px;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line);transition:transform .15s,border-color .15s,box-shadow .15s}
.av:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.av.on{border-color:var(--pick);box-shadow:0 0 0 1px var(--pick),0 0 18px -2px var(--pick);transform:scale(1.08);background:rgba(255,255,255,.1)}
.color-row{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:30px;height:30px;border-radius:50%;background:var(--sw);box-shadow:0 0 14px -2px var(--sw);transition:transform .15s;position:relative}
.sw:hover{transform:scale(1.12)}
.sw.on::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #fff;opacity:.9}
.preview-chip{display:inline-flex;align-items:center;gap:8px;margin:2px 0 18px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-weight:600;max-width:100%}
.preview-chip .avatar{width:30px;height:30px;font-size:16px}
.preview-chip span:last-child{color:var(--c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.launch{width:100%;padding:15px;border-radius:16px;background:var(--grad);font-family:var(--display);font-weight:800;letter-spacing:.2em;font-size:15px;color:#fff;position:relative;overflow:hidden;box-shadow:0 14px 34px -12px rgba(99,102,241,.9);transition:transform .15s,box-shadow .2s}
.launch:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(34,211,238,.8)}
.launch:active{transform:translateY(0) scale(.99)}
.launch:disabled{opacity:.7;cursor:progress}
.launch::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shine 3.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.error{color:var(--red);min-height:20px;margin:12px 0 0;font-size:14px}
.shake{animation:nope .4s}
@keyframes nope{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.fine{color:var(--faint);font-size:12px;margin-top:6px}

/* ---------- auth tabs & persistent accounts ---------- */
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:3px;margin:0 0 18px;position:relative;isolation:isolate}
/* one glowing pill that glides between the two tabs */
.auth-tabs::before{content:'';position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:11px;background:linear-gradient(135deg,rgba(139,92,246,.55),rgba(34,211,238,.4));box-shadow:0 0 16px -2px rgba(139,92,246,.5);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.auth-tabs.reg::before{transform:translateX(100%)}
.auth-tab{padding:9px 12px;border-radius:11px;font-family:var(--display);font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--muted);transition:color .2s;text-align:center}
.auth-tab.on{color:#fff}
.error-link{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;font:inherit;padding:2px}
.auth-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.auth-tabs::before{transition:none}}
.pw-row{display:flex;position:relative}
.pw-row .text-input{padding-right:44px}
.pw-toggle{position:absolute;right:4px;top:4px;bottom:4px;width:38px;display:grid;place-items:center;border-radius:10px;font-size:16px;color:var(--muted);transition:color .15s}
.pw-toggle:hover{color:var(--text)}
.remember-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin:12px 4px 18px;cursor:pointer;user-select:none;text-align:left}
.remember-row input[type="checkbox"]{accent-color:var(--violet);width:16px;height:16px;cursor:pointer}
.reg-only{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease;overflow:hidden}
.reg-only.hide{grid-template-rows:0fr}
.reg-inner{min-height:0}
@media(prefers-reduced-motion:reduce){.reg-only{transition:none}}

/* ---------- app shell ---------- */
#app{display:grid;grid-template-columns:290px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:14px;padding:14px;padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom));padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
#app.enter{animation:rise .6s cubic-bezier(.2,.8,.2,1)}
.topbar{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;min-width:0}
.brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.mini-planet{width:34px;height:34px;border-radius:50%;flex:none;background:radial-gradient(circle at 32% 28%,#ddd6fe,#7c3aed 50%,#2e1065);box-shadow:0 0 18px rgba(139,92,246,.6);position:relative}
.mini-planet::after{content:"";position:absolute;left:-9px;right:-9px;top:12px;height:9px;border-radius:50%;border:2px solid rgba(34,211,238,.8);transform:rotate(-18deg)}
.room{font-family:var(--display);font-weight:800;letter-spacing:.12em;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 2s infinite}
#app.offline .dot{background:var(--red);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.top-actions{display:flex;gap:6px;align-items:center}
.pill{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--grad);font-weight:600;font-size:14px;box-shadow:0 8px 22px -10px rgba(99,102,241,.9);transition:transform .15s}
.pill:hover{transform:translateY(-1px)}
.icon-btn{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:19px;flex:none;transition:background .15s,transform .15s;color:var(--muted)}
.icon-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}
.icon-btn:active{transform:scale(.92)}
.only-mobile{display:none}

/* ---------- sidebar ---------- */
#sidebar{display:flex;flex-direction:column;padding:16px;overflow-y:auto;gap:4px;min-height:0}
.me-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(34,211,238,.08));border:1px solid var(--line);margin-bottom:10px}
.me-card .avatar{width:46px;height:46px;font-size:24px}
.me-card .who{min-width:0}
.me-card .who b{display:block;color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}
.me-card .who small{color:var(--muted);font-size:12px}
.side-h{font-family:var(--display);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin:14px 4px 8px;display:flex;justify-content:space-between}
#roster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
#roster li{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:12px;cursor:pointer;transition:background .15s;animation:pop .3s}
#roster li:hover{background:rgba(255,255,255,.06)}
#roster .avatar{width:32px;height:32px;font-size:16px}
.rname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.you{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.rtyping{display:none;color:var(--cyan);font-size:18px;line-height:0;letter-spacing:1px;animation:blink 1s infinite}
#roster li.typing .rtyping{display:inline}
@keyframes blink{50%{opacity:.3}}
.tips{margin:0;padding:0;list-style:none;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.tips li{padding:0 4px}
.tips code,.tips kbd{font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(255,255,255,.07);border:1px solid var(--line);padding:3px 6px;border-radius:6px;color:var(--text)}
.beam-hint{margin-top:14px;padding:14px;border-radius:16px;border:1px dashed var(--line-2);color:var(--muted);font-size:13px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.beam-hint:hover{border-color:var(--cyan);background:rgba(34,211,238,.06)}
.beam-hint b{display:block;color:var(--text);font-size:14px;margin:4px 0 2px}
.spacer{flex:1;min-height:14px}
.leave-btn{padding:11px;border-radius:14px;border:1px solid var(--line);color:var(--muted);font-size:14px;transition:.15s}
.leave-btn:hover{color:var(--red);border-color:rgba(251,113,133,.4);background:rgba(251,113,133,.06)}

/* ---------- chat ---------- */
.chat{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;overflow:hidden}
.messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:18px 18px 10px;overscroll-behavior:contain}
.messages>.msg{scroll-margin-top:12px}
.avatar{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:radial-gradient(circle at 30% 28%,color-mix(in srgb,var(--c) 50%,#1d1f45),#0b0c22 85%);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 75%,transparent),0 0 18px -2px color-mix(in srgb,var(--c) 55%,transparent);user-select:none}
.msg{display:flex;gap:10px;align-items:flex-start;margin-top:14px;animation:pop .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.msg.grouped{margin-top:3px}
.msg.grouped>.avatar{visibility:hidden;height:0}
.msg.grouped .meta{display:none}
.body{min-width:0;max-width:min(680px,78%);display:flex;flex-direction:column;align-items:flex-start}
.meta{font-size:12.5px;margin:0 4px 4px;display:flex;gap:8px;align-items:baseline;max-width:100%}
.meta .name{font-weight:700;color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta time{color:var(--faint);font-size:11px;flex:none}
.bubble-row{display:flex;align-items:center;gap:6px;max-width:100%}
.bubble{background:rgba(255,255,255,.065);border:1px solid var(--line);padding:9px 14px;border-radius:18px 18px 18px 6px;overflow-wrap:anywhere;min-width:0;max-width:100%}
.bubble.text{white-space:pre-wrap}
.msg.grouped .bubble{border-top-left-radius:8px}
.msg.mine{flex-direction:row-reverse}
.msg.mine>.avatar{display:none}
.msg.mine .body{align-items:flex-end;margin-left:auto}
.msg.mine .meta{flex-direction:row-reverse}
.msg.mine .bubble-row{flex-direction:row-reverse}
.msg.mine .bubble{background:linear-gradient(135deg,rgba(139,92,246,.92),rgba(79,70,229,.88) 55%,rgba(14,165,233,.82));border-color:transparent;border-radius:18px 18px 6px 18px;box-shadow:0 10px 26px -12px rgba(139,92,246,.85);color:#fff}
.msg.mine.grouped .bubble{border-top-right-radius:8px}
.msg.mine .bubble a{color:#e0f2fe}
.bubble.jumbo{font-size:42px;line-height:1.15;background:none!important;border-color:transparent!important;box-shadow:none!important;padding:0 4px}
.msg.mention .bubble{box-shadow:0 0 0 1.5px var(--gold),0 0 26px -6px rgba(251,191,36,.7)}
/* one quiet, one-time offer to make this device private (https) */
.private-nudge{display:flex;align-items:center;gap:10px;margin:0 12px 8px;padding:9px 10px 9px 14px;border-radius:14px;border:1px solid rgba(34,211,238,.3);background:linear-gradient(90deg,rgba(34,211,238,.08),rgba(139,92,246,.1));font-size:13px;animation:pop .25s}
.private-nudge .go{flex:1;display:flex;align-items:center;gap:8px;text-align:left;color:var(--text)}
.private-nudge .go b{font-weight:600}
.private-nudge .go > span{color:var(--cyan);white-space:nowrap}
.private-nudge .short{display:none}
@media(max-width:600px){.private-nudge .long{display:none}.private-nudge .short{display:inline}}
.private-nudge .x{flex:none;width:28px;height:28px;border-radius:50%;color:var(--muted)}
.private-nudge .x:hover{color:var(--text);background:rgba(255,255,255,.06)}
.bubble code{font:13px ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(0,0,0,.3);padding:1px 6px;border-radius:6px}
.bubble pre{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(0,0,0,.35);padding:10px 12px;border-radius:10px;margin:4px 0;overflow-x:auto;white-space:pre}
.at{color:var(--gold);font-weight:600}
.msg.mine .at{color:#fde68a}
.react-btn{opacity:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--muted);flex:none;transition:opacity .15s,background .15s,transform .15s}
.msg:hover .react-btn,.react-btn:focus-visible{opacity:1}
.react-btn:hover{background:rgba(255,255,255,.08);color:var(--text);transform:scale(1.1)}
@media (hover:none){.react-btn{opacity:.5}}
.reactions{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.reactions:empty{display:none}
.rx{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:14px;animation:pop .25s;transition:transform .12s}
.rx:hover{transform:scale(1.06)}
.rx b{font-size:12px;font-weight:600;color:var(--muted)}
.rx.on{background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.55)}
.rx.on b{color:var(--cyan)}

.receipts{display:flex;align-items:center;gap:3px;margin:5px 4px 0;font-size:11.5px;color:var(--faint);min-height:17px}
.receipts .avatar{width:17px;height:17px;font-size:10px;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 80%,transparent)}
.receipts .more{font-size:11px;margin-left:2px}
.receipts .status{margin-right:5px;white-space:nowrap}
.receipts .status.seen{color:var(--cyan)}
.event{display:flex;justify-content:center;margin:16px 0 6px;animation:pop .35s}
.event>span{font-size:13px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);padding:6px 14px;border-radius:999px;max-width:92%;text-align:center;overflow-wrap:anywhere}
.event b{font-weight:600}
.event.roll>span{color:#fde68a;border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.06)}
.event .crit{color:var(--gold);text-shadow:0 0 12px var(--gold);font-size:16px}
.event .fumble{color:var(--red)}
.event.warp>span{background:var(--grad);border:0;color:#fff;font-weight:500;box-shadow:0 8px 30px -10px rgba(34,211,238,.8)}
.event.warp b{color:#fff!important}
.event.me>span{font-style:italic;color:var(--text)}
.event.help>span{text-align:left;border-radius:16px;line-height:1.7;font-size:13.5px}
.event.help code{font:12px ui-monospace,Menlo,monospace;background:rgba(255,255,255,.08);padding:2px 6px;border-radius:5px;color:var(--text)}

/* files */
.bubble.file{padding:12px;width:min(380px,100%);white-space:normal}
.msg.mine .bubble.file{background:linear-gradient(135deg,rgba(139,92,246,.4),rgba(34,211,238,.18));border:1px solid rgba(139,92,246,.55)}
.file-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;row-gap:8px}
.factions{margin-left:auto}
.ficon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:rgba(0,0,0,.28);flex:none;position:relative}
.file-card.uploading .ficon::after{content:"";position:absolute;inset:-3px;border-radius:16px;border:2px solid transparent;border-top-color:var(--cyan);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.finfo{min-width:0;flex:1 1 120px}
.fname{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fname.split{display:flex;min-width:0}.fname.split>span{white-space:pre;overflow:hidden;text-overflow:ellipsis;min-width:0}.fname .fn-artist{flex:0 1000 auto;opacity:.8}.fname .fn-title{flex:0 1 auto;max-width:100%}
.fmeta{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.msg.mine .fmeta{color:#dbeafe}
.factions a,.factions button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;text-decoration:none;box-shadow:0 8px 20px -8px rgba(34,211,238,.9);transition:transform .15s}
.factions a:hover,.factions button:hover{transform:scale(1.08)}
.factions .cancel{background:rgba(251,113,133,.18);color:var(--red);box-shadow:none;font-size:15px}
.factions .wait{font-size:20px;animation:blink 1.2s infinite;display:block}
.fbar{height:6px;border-radius:99px;background:rgba(255,255,255,.08);margin-top:11px;overflow:hidden}
.fbar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#8b5cf6,#22d3ee,#8b5cf6);background-size:200% 100%;animation:flow 1.4s linear infinite;box-shadow:0 0 12px rgba(34,211,238,.8);transition:width .35s ease}
@keyframes flow{to{background-position:-200% 0}}
.file-card.done .fbar,.file-card.failed .fbar,.file-card.cancelled .fbar{display:none}
.file-card.failed .fmeta,.file-card.cancelled .fmeta{color:var(--red)}
.fpreview:empty{display:none}
.fpreview img,.fpreview video{display:block;max-width:100%;max-height:340px;border-radius:12px;margin-top:10px;background:rgba(0,0,0,.3)}
.fpreview img{cursor:zoom-in}
.fpreview audio{width:100%;margin-top:10px}

.typing{min-height:22px;padding:0 20px 2px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.typing b{color:var(--text);font-weight:600}
.dots{display:inline-flex;gap:3px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:bounce 1.2s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.jump{position:absolute;left:50%;bottom:88px;transform:translateX(-50%);z-index:5;padding:8px 16px;border-radius:999px;background:var(--grad);font-size:13px;font-weight:600;box-shadow:0 10px 30px -8px rgba(34,211,238,.8);animation:pop .25s}

.composer{display:flex;align-items:flex-end;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--line);position:relative}
.input-wrap{flex:1;min-width:0;display:flex;align-items:flex-end;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:16px;transition:border-color .2s,box-shadow .2s}
.input-wrap:focus-within{border-color:rgba(34,211,238,.55);box-shadow:0 0 0 4px rgba(34,211,238,.1)}
#msgInput{flex:1;min-width:0;background:none;border:0;outline:0;resize:none;padding:11px 4px 11px 15px;max-height:160px;font-size:16px;line-height:1.4;display:block;overflow-y:hidden;scrollbar-width:thin}
#msgInput::placeholder{color:var(--faint)}
.input-wrap .icon-btn{width:40px;height:44px}
.send-btn{width:48px;height:46px;border-radius:15px;background:var(--grad);display:grid;place-items:center;flex:none;color:#fff;box-shadow:0 10px 24px -10px rgba(99,102,241,1);transition:transform .15s}
.send-btn:hover{transform:translateY(-1px) rotate(-8deg)}
.send-btn:active{transform:scale(.92)}
.send-btn.fire{animation:fire .45s}
@keyframes fire{40%{transform:translate(6px,-6px) rotate(-20deg) scale(1.1)}}

.float-panel{position:fixed;z-index:40;padding:8px;border-radius:18px;animation:pop .18s}
.emoji-panel{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:min(330px,calc(100vw - 24px));max-height:240px;overflow-y:auto}
.emoji-panel button,.picker button{font-size:22px;height:38px;border-radius:10px;transition:transform .12s,background .12s}
.emoji-panel button:hover,.picker button:hover{background:rgba(255,255,255,.1);transform:scale(1.2)}
.picker{display:flex;gap:2px}
.picker button{width:40px}

/* ---------- overlays ---------- */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(2,3,10,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal-card{width:min(430px,100%);padding:26px 22px 20px;text-align:center;position:relative;max-height:calc(100dvh - 32px);overflow-y:auto;animation:rise .35s cubic-bezier(.2,.8,.2,1)}
.modal-card h2{font-family:var(--display);letter-spacing:.14em;font-size:18px;margin:0 0 6px}
.modal-card p{color:var(--muted);margin:0 0 16px;font-size:14px}
.close-x{position:absolute;top:10px;right:10px}
.qr{display:inline-block;padding:12px;background:#fff;border-radius:18px;box-shadow:0 0 50px -10px rgba(34,211,238,.7);margin-bottom:16px}
.qr img,.qr canvas{display:block;width:240px;height:240px}
.qr-lead{font-size:16px;font-weight:600;color:var(--text);margin:-4px 0 14px}
.url-row{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:6px 6px 6px 14px;margin-bottom:8px;text-align:left}
.url-row code{flex:1;min-width:0;font:600 15px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--cyan);overflow-wrap:anywhere}
.url-row.main code{font-size:17px}
.url-row .copy + .copy{margin-left:-2px}
.more-urls{margin:4px 0 0;text-align:left}
.more-urls summary{cursor:pointer;color:var(--muted);font-size:13px;padding:6px 2px;text-align:center;list-style-position:inside}
.more-urls[open] summary{margin-bottom:6px}
.more-urls .url-row code{font-size:13.5px}
.modal-card .invite-first{margin:12px 0 0}
.invite-code{margin:14px 0 0;text-align:left;font-size:13px;color:var(--muted)}
.invite-code span{display:block;margin:0 2px 8px}
.invite-code code{flex:1;font-size:15px;letter-spacing:.08em;color:var(--gold)}
.copy{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.08);font-size:13px;font-weight:600;flex:none}
.copy:hover{background:rgba(255,255,255,.14)}
.wiz-hint{margin:12px 0 0;padding:10px 12px;border-radius:12px;border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.08);font-size:13px;color:var(--text);text-align:left}
.wiz-progress{display:flex;justify-content:center;align-items:center;gap:6px;margin:6px 0 12px;font-size:12px;color:var(--muted)}
.wiz-progress i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)}
.wiz-progress i.done{background:var(--green)}.wiz-progress i.now{background:var(--a3,var(--cyan));box-shadow:0 0 10px var(--a3,var(--cyan))}
.wiz-progress span{margin-left:6px}
.wiz-step{padding:20px 18px;border-radius:20px;border:1px solid rgba(var(--glow),.45);background:rgba(var(--glow),.08);text-align:center}
.wiz-icon{font-size:42px;line-height:1;margin-bottom:8px}
.wiz-step h3{margin:0 0 6px;font-size:18px;color:var(--text)}
.wiz-step p{margin:0 0 4px;color:var(--muted);font-size:14.5px;line-height:1.5}
.wiz-step b{color:var(--text);font-weight:600}
.wiz-step .launch{display:flex;align-items:center;justify-content:center;width:100%;margin:14px 0 4px;text-decoration:none;color:#fff}
.wiz-how{list-style:none;margin:12px 0 0;padding:0;text-align:left;font-size:13.5px;color:var(--muted);counter-reset:w}
.wiz-how li{position:relative;padding:4px 0 4px 28px;counter-increment:w}
.wiz-how li::before{content:counter(w);position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;background:rgba(var(--glow),.6)}
.wiz-link.wiz-skip{display:block;margin:14px auto 0;color:var(--muted);text-decoration:none}
.wiz-link{display:inline-block;margin-top:8px;color:var(--cyan);font-size:13.5px;text-decoration:underline;background:none}
.host-unlock{display:grid;grid-template-columns:1fr auto;gap:8px;margin:-4px 0 10px}
.host-unlock .pill{width:auto}
.host-unlock .fine,.host-unlock .error{grid-column:1/-1;margin:0}
.modal-card .app-version{margin:14px -4px -6px 0;text-align:right;font-size:11.5px;color:var(--muted);opacity:.8;font-variant-numeric:tabular-nums}
.push-status{font-size:12px;color:var(--muted);margin-left:6px}
.push-status.on{color:var(--green)}
.steps{text-align:left;color:var(--muted);font-size:13.5px;margin:14px 0 0;padding-left:20px;line-height:1.7}
.lightbox{background:rgba(2,3,10,.9)}
.lightbox img{max-width:94vw;max-height:80dvh;border-radius:14px;box-shadow:0 30px 80px -20px #000;display:block}
.lightbox .lb-bar{display:flex;gap:10px;justify-content:center;margin-top:14px}
.lightbox .pill{text-decoration:none;color:#fff}

#drop{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(4,5,13,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:none;animation:fade .15s}
#drop .zone{position:absolute;inset:18px;border:2px dashed rgba(34,211,238,.7);border-radius:28px;box-shadow:inset 0 0 80px -20px rgba(34,211,238,.6)}
#drop .ufo{font-size:84px;animation:float 1.6s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(34,211,238,.7))}
#drop .beam{width:180px;height:140px;margin:-18px auto 0;background:linear-gradient(180deg,rgba(34,211,238,.55),transparent);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);animation:blink 1.2s infinite}
#drop h2{font-family:var(--display);letter-spacing:.16em;margin:10px 0 4px;text-align:center}
#drop p{color:var(--muted);text-align:center;margin:0}

#toasts{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.toast{padding:10px 16px;border-radius:14px;font-size:14px;animation:pop .25s;max-width:100%;overflow-wrap:anywhere}
.toast.out{opacity:0;transform:translateY(6px);transition:.3s}

#scrim{display:none}

/* ---------- tools menu, voice notes, polls, trivia, library ---------- */
.icon-btn{position:relative}
.badge{position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--pink);color:#fff;font:700 10px/17px var(--font);text-align:center;box-shadow:0 0 10px rgba(244,114,182,.7)}
.tools-panel{display:flex;flex-direction:column;gap:1px;width:236px;padding:6px}
.tools-panel button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-align:left;font-weight:500;transition:background .12s}
.tools-panel button:hover{background:rgba(255,255,255,.08)}
.tools-panel span{font-size:19px;width:26px;text-align:center}
.tools-panel small{margin-left:auto;color:var(--faint);font-size:11px}

.rec-bar{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:46px;padding:0 14px 0 2px;border-radius:16px;background:rgba(251,113,133,.08);border:1px solid rgba(251,113,133,.4)}
.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red);animation:blink 1s infinite;flex:none}
.rec-time{font-variant-numeric:tabular-nums;font-weight:600;min-width:38px}
.rec-wave{flex:1;min-width:0;height:28px;display:flex;align-items:center;justify-content:flex-end;gap:2px;overflow:hidden}
.rec-wave i{flex:none;width:3px;height:10%;border-radius:2px;background:linear-gradient(var(--pink),var(--violet));transition:height .1s}
.composer.recording .send-btn{background:linear-gradient(135deg,#fb7185,#f472b6)}

.bubble.voice{padding:8px 14px 8px 8px;width:min(310px,100%)}
.voice-note{display:flex;align-items:center;gap:10px}
.vplay{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:0 6px 18px -6px rgba(34,211,238,.9);transition:transform .15s}
.msg.mine .vplay{background:#fff;color:#4f46e5}
.vplay:disabled{opacity:.5;cursor:progress}
.vplay:hover:not(:disabled){transform:scale(1.08)}
.vwave{flex:1;min-width:0;height:32px;display:flex;align-items:center;gap:2px;cursor:pointer}
.vwave i{flex:1;min-width:2px;max-width:4px;border-radius:2px;background:rgba(255,255,255,.3);transition:background .15s}
.vwave i.on{background:var(--cyan)}
.msg.mine .vwave i{background:rgba(255,255,255,.4)}
.msg.mine .vwave i.on{background:#fff}
.voice-note[data-state="uploading"] .vwave i{animation:blink 1.2s infinite}
.vtime{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);min-width:36px;text-align:right}
.msg.mine .vtime{color:#e0e7ff}

.bubble.poll{width:min(380px,100%);padding:14px;white-space:normal}
.msg.mine .bubble.poll{background:linear-gradient(135deg,rgba(139,92,246,.4),rgba(34,211,238,.18));border:1px solid rgba(139,92,246,.55)}
.poll-q{font-weight:700;font-size:15.5px;margin-bottom:10px}
.poll-opts{display:flex;flex-direction:column;gap:7px}
.poll-opt{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line);text-align:left;transition:border-color .15s,transform .12s}
.poll-opt:hover{border-color:var(--line-2)}
.poll-opt:active{transform:scale(.99)}
.poll-opt.on{border-color:var(--cyan);box-shadow:0 0 16px -6px var(--cyan)}
.poll-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(139,92,246,.5),rgba(34,211,238,.38));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.poll-text,.poll-pct{position:relative}
.poll-text{flex:1;min-width:0;overflow-wrap:anywhere}
.poll-pct{font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.poll-foot{margin-top:9px;font-size:12px;color:var(--muted)}
.msg.mine .poll-foot{color:#dbeafe}

.trivia-wrap{display:flex;justify-content:center;margin:18px 0 8px;animation:pop .35s}
.folding{transition:height .55s cubic-bezier(.4,0,.2,1),opacity .4s ease,margin .55s ease,transform .55s ease;opacity:0;margin-top:0!important;margin-bottom:0!important;transform:scale(.97)}
.trivia-done small{color:var(--muted);font-weight:400}
.trivia-done.arriving{animation:pop .45s}
.trivia{width:min(540px,100%);padding:16px;border-radius:20px;background:linear-gradient(160deg,rgba(139,92,246,.24),rgba(34,211,238,.1));border:1px solid rgba(139,92,246,.5);box-shadow:0 18px 50px -20px rgba(139,92,246,.8)}
.tq-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;letter-spacing:.16em;color:var(--muted);margin-bottom:8px;text-transform:uppercase}
.tq-tag{font-family:var(--display);color:var(--gold);letter-spacing:.2em}
.tq-q{font-size:18px;font-weight:700;margin-bottom:12px;line-height:1.3}
.tq-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tq-opt{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line);text-align:left;transition:transform .12s,border-color .15s,background .15s,opacity .3s}
.tq-opt:hover:not(:disabled){border-color:var(--cyan);transform:translateY(-1px)}
.tq-opt:disabled{cursor:default}
.tq-opt b{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.1);font-size:12px}
.tq-opt span{flex:1;min-width:0;overflow-wrap:anywhere}
.tq-opt em{font-style:normal;font-size:12px;color:var(--muted);font-weight:700}
.tq-opt.picked{border-color:var(--cyan);background:rgba(34,211,238,.14)}
.tq-opt.picked b{background:var(--cyan);color:#04050d}
.trivia-wrap.revealed .tq-opt{opacity:.5}
.trivia-wrap .tq-opt.correct{opacity:1;border-color:var(--green);background:rgba(52,211,153,.2);box-shadow:0 0 22px -4px rgba(52,211,153,.7)}
.tq-opt.correct b{background:var(--green);color:#04050d}
.trivia-wrap .tq-opt.wrong{opacity:1;border-color:var(--red);background:rgba(251,113,133,.16)}
.tq-timer{height:5px;border-radius:9px;background:rgba(255,255,255,.08);margin:12px 0 8px;overflow:hidden}
.tq-timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),var(--pink));transition:width .25s linear}
.trivia-wrap.revealed .tq-timer{display:none}
.trivia-wrap.revealed .tq-foot{margin-top:12px}
.tq-foot{font-size:13px;color:var(--muted)}
.tq-foot b{color:var(--text)}
.score-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.score-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid transparent}
.score-list li:first-child{background:linear-gradient(90deg,rgba(251,191,36,.25),rgba(251,191,36,.05));border-color:rgba(251,191,36,.4)}
.score-list .rank,.leaders .rank{width:24px;text-align:center;font-size:17px;flex:none}
.score-list .avatar{width:30px;height:30px;font-size:15px}
.score-list .pts,.leaders .pts{font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.score-list .empty{justify-content:center;color:var(--muted)}
.leaders{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.leaders li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;font-size:14px}
.leaders .rank{font-size:14px}
.leaders .avatar{width:26px;height:26px;font-size:13px}
.leaders .pts{font-size:13px}

.rain{position:fixed;inset:0;pointer-events:none;z-index:65;overflow:hidden}
.rain span{position:absolute;top:-70px;animation:fall linear forwards;will-change:transform;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
@keyframes fall{to{transform:translate(var(--drift),calc(100vh + 140px)) rotate(var(--spin))}}
.rain.gentle span{opacity:0;animation:twinkle 2.6s ease-in-out both!important;animation-delay:var(--d,0s)!important}
@keyframes twinkle{25%,70%{opacity:1}}
#buzzFlash{position:fixed;inset:0;z-index:61;pointer-events:none;box-shadow:inset 0 0 160px 40px rgba(251,113,133,.85);opacity:0}
body.buzzed #buzzFlash{animation:buzzflash 1.2s ease-out}
body.buzzed #app{animation:buzz .07s linear 14}
@keyframes buzz{0%,100%{transform:none}25%{transform:translate(-8px,2px) rotate(-.5deg)}50%{transform:translate(7px,-3px) rotate(.5deg)}75%{transform:translate(-4px,-2px)}}
@keyframes buzzflash{0%,55%{opacity:1}100%{opacity:0}}

.form-card{text-align:left}
.form-card h2,.form-card>p{text-align:center}
.poll-inputs{display:flex;flex-direction:column;gap:8px}
.poll-input{display:flex;gap:6px;align-items:center}
.poll-input .text-input{flex:1}
.add-opt{margin-top:8px;padding:10px 14px;border-radius:12px;border:1px dashed var(--line-2);color:var(--muted);width:100%;font-size:14px;transition:.15s}
.add-opt:hover{color:var(--text);border-color:var(--cyan)}
.url-note{font-size:13px;color:var(--muted);margin:14px 0 6px;text-align:left}
.url-row.secure code{color:var(--green)}

.lib-card{width:min(780px,100%);text-align:left;display:flex;flex-direction:column;height:min(760px,calc(100dvh - 32px));overflow:hidden}
.lib-card h2,.lib-card>p{text-align:center}
.lib-tools{display:flex;gap:8px;margin-bottom:10px}
.lib-tools .text-input{flex:1;min-width:0;padding:10px 14px}
.lib-tools select{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;color:var(--text);padding:0 10px;font:inherit;font-size:14px}
.lib-tools select option{background:#0d0f24}
.lib-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:13px;transition:background .15s,border-color .15s}
.chip:hover{border-color:var(--line-2)}
.chip.on{background:var(--grad);border-color:transparent;color:#fff}
.chip small{opacity:.7;margin-left:4px}
.lib-list{overflow-y:auto;flex:1;min-height:0;margin:0 -8px;padding:0 8px 4px;display:flex;flex-direction:column;gap:6px}
.lib-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid transparent;transition:border-color .15s;animation:pop .25s}
.lib-row:hover{border-color:var(--line-2)}
.lib-thumb{width:50px;height:50px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:24px;background:rgba(0,0,0,.3);overflow:hidden}
.lib-thumb img{width:100%;height:100%;object-fit:cover}
.lib-thumb[data-view],.lib-thumb[data-play]{cursor:pointer}
.lib-thumb[data-play]:hover,.lib-thumb.playing{background:rgba(34,211,238,.2)}
.lib-info{flex:1;min-width:0}
.lib-del{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:16px;background:rgba(255,255,255,.07);transition:background .15s,width .2s}
.lib-del:hover{background:rgba(251,113,133,.25)}
.lib-del.armed{width:auto;padding:0 14px;border-radius:999px;background:#e11d48;color:#fff;font-weight:700;font-size:13px}
.file-card.removed .fbar,.file-card.removed .fpreview{display:none}
.file-card.removed .ficon{opacity:.45}
.file-card.removed .fmeta{color:var(--muted);font-style:italic}
.lib-dl{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;flex:none;transition:transform .15s}
.lib-dl:hover{transform:scale(1.08)}
.lib-empty{text-align:center;color:var(--muted);padding:50px 0}
.lib-tabs{display:flex;gap:4px;padding:4px;margin:0 auto 12px;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid var(--line);width:max-content;max-width:100%}
.lib-tabs button{padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;transition:background .15s,color .15s}
.lib-tabs button:hover{color:var(--text)}
.lib-tabs button[aria-selected="true"]{background:var(--grad);color:#fff;box-shadow:0 6px 18px -8px rgba(var(--glow),.9)}
.lib-tabs small{opacity:.75;margin-left:4px;font-weight:500}
.lib-day{position:sticky;top:0;z-index:1;align-self:flex-start;margin:8px 0 2px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text);background:rgba(13,15,36,.85);border:1px solid var(--line)}
.lib-day:first-child{margin-top:0}
.voice-row .lib-thumb{color:#fff;background:var(--grad);border-radius:50%;width:44px;height:44px;margin:3px}
.voice-row .lib-thumb svg{width:18px;height:18px}
.voice-row .lib-thumb[data-play]:hover,.voice-row .lib-thumb.playing{background:var(--grad);filter:brightness(1.15);box-shadow:0 0 0 3px rgba(var(--glow),.35)}
.voice-row .fname{display:flex;align-items:center;gap:6px}
.lib-vprog{height:3px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:6px;overflow:hidden}
.lib-vprog i{display:block;height:100%;width:0;background:var(--grad)}
.discard-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 18px;border-radius:999px;background:#e11d48;border:1px solid #fb7185;color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em;box-shadow:0 8px 22px -10px rgba(225,29,72,.95);transition:transform .15s,background .15s}
.discard-btn:hover{background:#be123c;transform:translateY(-1px)}
.discard-btn:focus-visible{outline:2px solid #fecdd3;outline-offset:2px}

/* ---------- phones & small tablets ---------- */
@media (max-width:820px){
  :root{--blur:12px;--radius:18px}
  #app{grid-template-columns:minmax(0,1fr);gap:10px;padding:10px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .only-mobile{display:grid}
  .topbar{padding:8px 8px 8px 6px;gap:6px}
  .brand{gap:10px}
  .room{font-size:14px}
  .pill .label{display:none}
  .hide-mobile{display:none}
  .tq-opts{grid-template-columns:1fr}
  .tq-q{font-size:16.5px}
  .pill{width:40px;padding:0;justify-content:center}
  #sidebar{position:fixed;z-index:30;top:max(10px,env(safe-area-inset-top));bottom:max(10px,env(safe-area-inset-bottom));left:10px;width:min(300px,84vw);transform:translateX(calc(-100% - 20px));transition:transform .32s cubic-bezier(.2,.8,.2,1);background:rgba(13,15,36,.92)}
  #sidebar.open{transform:none}
  #scrim{display:block;position:fixed;inset:0;z-index:25;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s}
  #scrim.show{opacity:1;pointer-events:auto}
  .messages{padding:12px 10px 8px}
  .body{max-width:86%}
  .avatar{width:32px;height:32px;font-size:17px}
  .msg{gap:8px}
  .composer{padding:8px;gap:6px}
  .composer>.icon-btn{width:38px}
  .jump{bottom:78px}
  .login-card{padding:28px 18px 20px}
  .avatar-grid{gap:5px}
  .av{font-size:19px;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* Everyday orbit: calmer surfaces, clearer controls, accessible interactions. */
:root{--panel:rgba(13,15,36,.82);--muted:#b3badc;--faint:#929abf;--line:rgba(160,170,255,.2)}
.nebula{opacity:.26}.chat{background:rgba(8,11,28,.32);backdrop-filter:none;-webkit-backdrop-filter:none}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
#msgInput:focus-visible{outline:none}.input-wrap:focus-within{box-shadow:0 0 0 2px var(--cyan)}
body.no-motion .nebula *,body.no-motion .planet *,body.no-motion .logo,body.no-motion #app,body.no-motion #flash,body.no-motion #buzzFlash{animation:none!important;transition:none!important}
body.no-effects .nebula{opacity:.16}
.command-guide{margin:14px 4px;color:var(--muted);font-size:13px}.command-guide summary{cursor:pointer;padding:8px 0}
.bubble-stack{min-width:0;max-width:100%;display:flex;flex-direction:column}.bubble-row{align-items:center}
.reply-btn{align-self:center;padding:8px;color:var(--muted);border-radius:10px;flex:none;min-width:32px}.reply-btn:hover{background:rgba(255,255,255,.08);color:var(--cyan)}
.reply-quote{display:flex;flex-direction:column;text-align:left;border-left:3px solid var(--cyan);padding:6px 10px;margin-bottom:5px;background:rgba(34,211,238,.08);border-radius:8px;font-size:12px;max-width:100%}.reply-quote span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.reply-bar{display:flex;justify-content:space-between;align-items:center;border-left:3px solid var(--cyan);padding:8px 14px;margin:0 12px;background:rgba(34,211,238,.09);font-size:13px}.reply-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reply-bar button{padding:8px}
.outbox{padding:5px 12px;max-height:150px;overflow:auto;border-top:1px solid var(--line)}.pending-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px}.pending-row .pending-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pending-row button{color:var(--cyan);padding:5px}.pending-row .failed{color:var(--red)}
.pending-row.rejected{flex-wrap:wrap;row-gap:2px}.pending-row .pending-reason{flex:1 1 100%;order:3;color:#fda4af;font-size:12.5px;line-height:1.35;overflow-wrap:anywhere}
.mention-menu{padding:8px;margin:0 12px;background:#12162e;border:1px solid var(--line);border-radius:12px;max-height:160px;overflow:auto}.mention-menu button{display:block;width:100%;padding:8px;text-align:left;border-radius:8px}.mention-menu button[aria-selected="true"]{background:rgba(34,211,238,.15)}
.day-divider{display:flex;align-items:center;gap:12px;margin:18px 4px 10px;font-family:var(--display);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.day-divider::before,.day-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.day-divider::after{background:linear-gradient(90deg,var(--line),transparent)}
.day-divider span{padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);white-space:nowrap}
.unread-divider{text-align:center;color:var(--cyan);font-size:12px;border-bottom:1px solid var(--line);margin:12px 0;padding:6px}
body.vibing .update-banner{position:fixed;top:0;left:0;right:0;z-index:97;text-align:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.update-banner{padding:8px 14px;background:rgba(251,191,36,.12);color:var(--gold);font-size:13px}.update-banner button{color:var(--text);text-decoration:underline;margin-left:8px}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);font-size:14px}.setting-row select{max-width:65%;background:#151a35;color:var(--text);font:inherit;padding:8px;border:1px solid var(--line);border-radius:10px}.setting-row input{width:20px;height:20px;accent-color:var(--cyan)}
.preview-actions{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:12px}
#transferList{margin-top:14px}.transfer-row{padding:12px;border:1px solid var(--line);border-radius:12px;margin:4px 0}.transfer-row p{margin:4px 0;font-size:12px;color:var(--muted);text-align:left}.transfer-row progress{width:100%;height:6px;accent-color:var(--cyan)}.transfer-row button{padding:8px;color:var(--cyan)}
.search-result{display:block;width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;margin:4px 0;text-align:left}.search-result small{display:block;color:var(--muted);margin-bottom:4px}.search-result span{overflow-wrap:anywhere;white-space:pre-wrap}.search-hit{outline:2px solid var(--cyan);outline-offset:5px;border-radius:12px}
.trivia-explanation{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);line-height:1.6}.trivia-explanation small{display:block;margin-top:4px;color:var(--cyan)}
#searchSummary{font-size:13px;color:var(--muted);text-align:left}.lib-thumb:focus-visible{outline:2px solid var(--cyan)}
@media(max-width:820px){.brand .mini-planet{display:none}.top-actions{gap:0}.top-actions .icon-btn{width:36px}.topbar{min-height:58px}.reply-btn{padding:5px;min-width:27px}.react-btn{opacity:1}.body{max-width:85%}.preview-actions .pill{width:auto;padding:0 16px}.modal-card{padding-top:44px}#transfersModal .pill{width:auto;padding:0 16px}.setting-row{font-size:13px}.logo{font-size:30px}}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.trivia-topics{border:0;padding:0;margin:20px 0;text-align:left;display:grid;gap:10px}.trivia-topics legend{font-size:13px;color:var(--muted);margin-bottom:10px}.trivia-topic{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;cursor:pointer;background:rgba(255,255,255,.025)}.trivia-topic:has(input:checked){border-color:var(--cyan);background:rgba(34,211,238,.08)}.trivia-topic input{accent-color:var(--cyan);width:18px;height:18px;flex-shrink:0}.trivia-topic b{display:block;font-size:14px}.trivia-topic small{display:block;color:var(--muted);font-size:12px;margin-top:5px;line-height:1.4}

/* ================= Deep-space themes, richer surfaces, lite mode ================= */
:root,[data-theme="nebula"]{--bg:#05031a;--a1:#8b5cf6;--a2:#6366f1;--a3:#22d3ee;--a4:#f472b6;--neb1:#6d28d9;--neb2:#1d4ed8;--neb3:#be185d;--tint:20,12,58;--glow:139,92,246}
[data-theme="aurora"]{--bg:#020d10;--a1:#10b981;--a2:#0d9488;--a3:#22d3ee;--a4:#a3e635;--neb1:#047857;--neb2:#0e7490;--neb3:#5b21b6;--tint:4,34,38;--glow:16,185,129}
[data-theme="supernova"]{--bg:#12030a;--a1:#f43f5e;--a2:#db2777;--a3:#f97316;--a4:#fbbf24;--neb1:#9f1239;--neb2:#c2410c;--neb3:#6d28d9;--tint:46,8,26;--glow:244,63,94}
[data-theme="abyss"]{--bg:#020617;--a1:#3b82f6;--a2:#4f46e5;--a3:#06b6d4;--a4:#38bdf8;--neb1:#1e3a8a;--neb2:#0e7490;--neb3:#312e81;--tint:6,18,52;--glow:59,130,246}
:root{--grad:linear-gradient(135deg,var(--a1) 0%,var(--a2) 50%,var(--a3) 100%);--mine:linear-gradient(135deg,var(--a1),var(--a2) 55%,var(--a3))}
html,body{background:var(--bg)}
.nebula{opacity:.44}
body.no-effects .nebula{opacity:.24}
.nebula i:nth-child(1){background:radial-gradient(circle,var(--neb1) 0%,transparent 62%)}
.nebula i:nth-child(2){background:radial-gradient(circle,var(--neb2) 0%,transparent 62%)}
.nebula i:nth-child(3){background:radial-gradient(circle,var(--neb3) 0%,transparent 62%)}
#vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 38%,transparent 52%,rgba(0,0,0,.6))}
.glass{background:linear-gradient(160deg,rgba(var(--tint),.88),rgba(5,6,20,.92));border-color:rgba(var(--glow),.2);box-shadow:0 30px 80px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07)}
.chat{background:linear-gradient(180deg,rgba(var(--tint),.28),rgba(4,5,16,.38));backdrop-filter:none;-webkit-backdrop-filter:none}
.topbar{position:relative}
.topbar::after{content:"";position:absolute;left:20px;right:20px;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--a1),var(--a3),var(--a4),transparent);opacity:.75;pointer-events:none}
.room{background:linear-gradient(90deg,#fff,color-mix(in srgb,var(--a3) 70%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.me-card{background:linear-gradient(135deg,rgba(var(--glow),.3),rgba(var(--tint),.5));border-color:rgba(var(--glow),.3)}
.logo{background:linear-gradient(90deg,color-mix(in srgb,var(--a1) 55%,#fff),#fff,color-mix(in srgb,var(--a3) 60%,#fff),color-mix(in srgb,var(--a1) 55%,#fff));background-size:300% 100%;-webkit-background-clip:text;background-clip:text}
.pill,.launch,.send-btn,.vplay,.watch-play,.lib-dl,.factions a{background:var(--grad)}
.launch{box-shadow:0 14px 34px -12px rgba(var(--glow),.95)}
.send-btn{box-shadow:0 10px 26px -10px rgba(var(--glow),1)}
.bubble{background:linear-gradient(135deg,color-mix(in srgb,var(--c,#7c83b0) 22%,#161936),#0f1129);border-color:color-mix(in srgb,var(--c,#7c83b0) 38%,transparent);box-shadow:0 10px 26px -18px color-mix(in srgb,var(--c,#7c83b0) 80%,transparent)}
.msg.mine .bubble{background:var(--mine);box-shadow:0 12px 30px -14px rgba(var(--glow),.95)}
.msg.mine .bubble.file,.msg.mine .bubble.poll{background:linear-gradient(135deg,rgba(var(--glow),.42),rgba(var(--tint),.75));border-color:rgba(var(--glow),.55)}
.msg.mine .bubble.voice{background:var(--mine)}
.input-wrap{background:rgba(255,255,255,.045);border-color:rgba(var(--glow),.24)}
.input-wrap:focus-within{box-shadow:0 0 0 2px rgba(var(--glow),.6),0 0 26px -6px rgba(var(--glow),.85)}
.event>span{background:rgba(var(--tint),.55);border-color:rgba(var(--glow),.2)}
.trivia{background:linear-gradient(160deg,rgba(var(--glow),.28),rgba(var(--tint),.6));border-color:rgba(var(--glow),.5)}
.watch-yt,.watch-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.watch-shield{position:absolute;inset:0}
.watch-stage.yt-tap .watch-shield{display:none}
.watch-stage.yt-tap .watch-tap{pointer-events:none}
.watch-tap small{display:block;margin-top:4px;font-size:12px;font-weight:600;opacity:.9}
.watch-tap small a{color:#fff;text-decoration:underline;pointer-events:auto}
#watchPickFile{display:block;margin:12px auto 0}
.link-watch{display:inline-flex;margin:6px 0 2px;padding:5px 12px;border-radius:999px;background:var(--grad);color:#fff;font-size:12.5px;font-weight:700}
.ev-btn{margin-left:8px;padding:3px 11px;border-radius:999px;background:var(--grad);color:#fff;font-size:12px;font-weight:700;vertical-align:1px}
.lite .glass,.lite .modal,.lite #drop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.lite .glass{background:linear-gradient(160deg,rgb(var(--tint)),#05061a)}
.lite .chat{background:linear-gradient(180deg,rgba(var(--tint),.35),rgba(4,5,16,.48))}
.lite .nebula i{filter:none;animation:none}
.lite .nebula{opacity:.34}
.lite #vignette{display:none}
.lite .msg,.lite .event,.lite .trivia-wrap,.lite .lib-row,.lite #roster li{animation:none}
.lite .bubble,.lite .msg.mine .bubble{box-shadow:none}

/* theme picker */
.theme-swatches{display:flex;gap:8px}
.theme-swatches button{width:34px;height:34px;border-radius:50%;border:2px solid transparent;padding:3px;transition:transform .15s,border-color .15s}
.theme-swatches button i{display:block;width:100%;height:100%;border-radius:50%}
.theme-swatches button[aria-checked="true"]{border-color:#fff;transform:scale(1.08)}
[data-theme-pick="nebula"] i{background:linear-gradient(135deg,#8b5cf6,#6366f1,#22d3ee)}
[data-theme-pick="aurora"] i{background:linear-gradient(135deg,#10b981,#0d9488,#22d3ee)}
[data-theme-pick="supernova"] i{background:linear-gradient(135deg,#f43f5e,#db2777,#f97316)}
[data-theme-pick="abyss"] i{background:linear-gradient(135deg,#3b82f6,#4f46e5,#06b6d4)}

/* vibe out (the crew-panel card keeps the old galaxy-card look) */
.galaxy-card{position:relative;height:150px;flex:none;border-radius:16px;overflow:hidden;margin:0 0 8px;border:1px solid rgba(var(--glow),.28);background:radial-gradient(circle at 50% 50%,rgba(var(--glow),.2),rgba(3,4,14,.92) 70%);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.galaxy-card:hover,.galaxy-card:focus-visible{border-color:rgba(var(--glow),.7);box-shadow:0 0 22px rgba(var(--glow),.35)}
.galaxy-card.live{border-color:rgba(var(--glow),.75);animation:livepulse 4s ease-in-out infinite}
@keyframes livepulse{50%{box-shadow:0 0 26px rgba(var(--glow),.5)}}
.galaxy-card canvas{position:absolute;inset:0;width:100%;height:100%}
.galaxy-label{position:absolute;left:10px;bottom:8px;font-size:12px;font-weight:700;text-shadow:0 1px 6px #000;pointer-events:none}
.galaxy-label small{color:var(--muted);font-weight:400;margin-left:4px}
.vibe{position:fixed;inset:0;z-index:85;background:#020209;overflow:hidden;color:#fff;cursor:none;animation:vibein 1.4s ease-out both}
.vibe[hidden]{display:none}
.vibe:focus{outline:none}
.vibe.awake{cursor:default}
@keyframes vibein{from{opacity:0}to{opacity:1}}
.vibe canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
body.vibing{overflow:hidden}
body.vibing #toasts{z-index:95}
body.vibing .player-dock{opacity:0!important;pointer-events:none!important}
.vibe-top,.vibe-bottom{position:absolute;left:0;right:0;display:flex;align-items:center;gap:12px;padding:16px max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left));opacity:0;transition:opacity .8s ease,transform .8s ease;pointer-events:none;z-index:3}
.vibe-top{top:0;padding-top:max(16px,env(safe-area-inset-top));transform:translateY(-10px);background:linear-gradient(rgba(2,2,9,.55),transparent)}
.vibe-bottom{bottom:0;padding-bottom:max(16px,env(safe-area-inset-bottom));transform:translateY(10px);background:linear-gradient(transparent,rgba(2,2,9,.6));justify-content:space-between}
.vibe.awake .vibe-top,.vibe.awake .vibe-bottom{opacity:1;transform:none;pointer-events:auto}
.vibe-title{font-family:Orbitron,"Space Grotesk",system-ui,sans-serif;font-weight:800;letter-spacing:.22em;font-size:13px;background:linear-gradient(90deg,var(--a1),var(--a4),var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent}
#vibeRoom{color:rgba(255,255,255,.6);font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#vibeClock{display:inline-flex;align-items:center;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.03em;color:#fff;text-shadow:0 0 14px rgba(var(--glow),.5),0 0 2px rgba(var(--glow),.8);font-variant-numeric:tabular-nums;line-height:1;user-select:none}
.vc-col{display:inline-flex;align-items:center}
.vc-sep{font-style:normal;opacity:.65;margin:0 1.5px;font-weight:700;color:rgba(255,255,255,.8);display:inline-block;line-height:1}
.vc-digit{display:inline-block;width:10px;height:17px;line-height:17px;text-align:center;overflow:hidden;position:relative;vertical-align:middle}
.vc-digit span{display:block;width:100%;height:100%}
.vc-digit.tick span{animation:clockDigitTick .32s cubic-bezier(.16,1,.3,1) both}
@keyframes clockDigitTick{0%{transform:translateY(65%);opacity:0;filter:blur(1.5px)}55%{transform:translateY(-6%);opacity:1;filter:none}100%{transform:translateY(0);opacity:1;filter:none}}
.vc-s{color:color-mix(in srgb,var(--a3) 60%,#fff);font-size:13px;opacity:.92}
.vc-s .vc-digit{width:9px}
.vibe button{color:#fff}
.vibe-top button,.vibe-btns button{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:17px;display:grid;place-items:center;transition:background .2s,transform .15s,opacity .2s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vibe-top button:hover,.vibe-btns button:hover{background:rgba(var(--glow),.4)}
.vibe-btns button:active,.vibe-top button:active{transform:scale(.92)}
.vibe-btns button:disabled{opacity:.35;pointer-events:none}
.vibe-stop-icon{display:block;width:11px;height:11px;border-radius:2px;background:currentColor}
.vibe-btns{display:flex;gap:8px;align-items:center}
.vibe-btns #vibeMusic{width:auto;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;line-height:1}
.vibe-btns .off{opacity:.45;text-decoration:line-through}
.vibe-now{display:flex;align-items:center;gap:12px;min-width:0}
.vibe-now b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(46vw,420px)}
.vibe-now small{display:block;color:rgba(255,255,255,.6);font-size:12px}
.vibe-eq{display:flex;gap:3px;align-items:flex-end;height:22px;flex:none}
.vibe-eq i{width:4px;height:5px;border-radius:2px;background:linear-gradient(var(--a4),var(--a1))}
.vibe.playing .vibe-eq i{animation:eq 1s ease-in-out infinite alternate}
.vibe.playing .vibe-eq i:nth-child(2){animation-duration:.7s}.vibe.playing .vibe-eq i:nth-child(3){animation-duration:1.25s}.vibe.playing .vibe-eq i:nth-child(4){animation-duration:.85s}
@keyframes eq{from{height:4px}to{height:22px}}
/* the gas cloud with the message box */
.vibe-cloud{position:absolute;left:50%;bottom:var(--cloud-b);width:min(560px,calc(100% - 32px));transform:translateX(-50%) scale(.6);opacity:0;filter:blur(18px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.9,.25,1.15),filter 1s ease;pointer-events:none;z-index:4}
.vibe.awake .vibe-cloud{opacity:1;transform:translateX(-50%) scale(1);filter:none;pointer-events:auto}
.vibe.awake.picking .vibe-cloud{opacity:0;transform:translateX(-50%) scale(.8);filter:blur(12px);pointer-events:none}
.vibe-cloud::before,.vibe-cloud::after{content:"";position:absolute;inset:-60px -90px;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(28px);
  background:radial-gradient(closest-side at 30% 55%,rgba(var(--glow),.55),transparent),radial-gradient(closest-side at 70% 45%,color-mix(in srgb,var(--a4) 45%,transparent),transparent),radial-gradient(closest-side at 52% 65%,color-mix(in srgb,var(--a3) 30%,transparent),transparent);
  animation:cloudswirl 14s ease-in-out infinite alternate}
.vibe-cloud::after{inset:-30px -50px;opacity:.7;animation-duration:9s;animation-direction:alternate-reverse}
@keyframes cloudswirl{0%{transform:rotate(0) scale(1)}50%{transform:rotate(8deg) scale(1.08,.94)}100%{transform:rotate(-6deg) scale(.96,1.06)}}
#vibeSay{display:flex;gap:8px;padding:8px;border-radius:999px;background:rgba(8,6,24,.45);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 40px rgba(var(--glow),.35)}
#vibeInput{flex:1;min-width:0;background:none;border:0;color:#fff;font:inherit;font-size:16px;padding:8px 14px;outline:none}
#vibeInput::placeholder{color:rgba(255,255,255,.55)}
#vibeSay button{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a4));font-size:16px;flex:none}
/* your message, as a puff of gas above the box */
.vibe-echoes{position:absolute;left:50%;bottom:calc(var(--cloud-b) + 78px);transform:translateX(-50%);width:min(520px,calc(100% - 48px));height:0;pointer-events:none;z-index:4}
.vibe{--cloud-b:96px}
.vibe-echo{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;animation:puff .8s cubic-bezier(.2,.9,.3,1.2) both}
.vibe-echo::before{content:"";position:absolute;inset:-26px -40px;z-index:-1;border-radius:50%;filter:blur(22px);
  background:radial-gradient(closest-side at 35% 55%,color-mix(in srgb,var(--c) 55%,transparent),transparent),radial-gradient(closest-side at 68% 45%,rgba(var(--glow),.45),transparent);
  animation:cloudswirl 7s ease-in-out infinite alternate;transition:opacity 1.4s ease,transform 1.6s ease}
.vibe-echo p{margin:0;max-width:100%;text-align:center;font-size:17px;line-height:1.4;color:#fff;text-shadow:0 0 12px color-mix(in srgb,var(--c) 80%,transparent),0 1px 3px rgba(0,0,0,.6);overflow-wrap:anywhere}
.vibe-echo .w{display:inline-block;white-space:nowrap}
.vibe-echo .w>span{display:inline-block;transition:transform 1.1s cubic-bezier(.3,.1,.4,1) var(--d),opacity 1.1s ease var(--d),filter 1.1s ease var(--d)}
.vibe-echo.poof{animation:none}
.vibe-echo.poof::before{opacity:0;transform:scale(1.5)}
.vibe-echo.poof .w>span{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.2);opacity:0;filter:blur(3px)}
@keyframes puff{from{opacity:0;transform:translateY(14px) scale(.7);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
/* incoming chats bloom out of their star, then dissolve into the theme's nebula on timeout */
.vibe-cards{position:absolute;inset:0;pointer-events:none;z-index:2}
.vibe-card{position:absolute;isolation:isolate;display:flex;gap:10px;align-items:flex-start;max-width:min(340px,calc(100vw - 32px));padding:10px 14px 10px 10px;border-radius:18px;text-align:left;pointer-events:auto;
  background:linear-gradient(135deg,rgba(var(--tint,10,8,30),.72),rgba(10,8,30,.58));border:1px solid color-mix(in srgb,var(--c) 58%,rgba(var(--glow),.45));box-shadow:0 0 30px color-mix(in srgb,var(--c) 42%,rgba(var(--glow),.35)),inset 0 0 20px color-mix(in srgb,var(--c) 15%,rgba(var(--glow),.18));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:bloom .7s cubic-bezier(.2,.9,.3,1.25) both;transition:border-color .2s,box-shadow .2s;cursor:pointer}
.vibe-card::before{content:"";position:absolute;inset:-14px -20px;z-index:-1;border-radius:28px;filter:blur(18px);pointer-events:none;opacity:.75;
  background:radial-gradient(closest-side at 30% 50%,color-mix(in srgb,var(--c) 50%,transparent),transparent),radial-gradient(closest-side at 72% 55%,rgba(var(--glow),.45),transparent);
  transition:opacity 1.5s ease,transform 1.6s ease}
.vibe-card:hover{border-color:var(--c)}
.vibe-card.leaving{pointer-events:none;animation:vibeCardFadeOut 1.6s cubic-bezier(.22,.61,.36,1) forwards}
.vibe-card.leaving::before{opacity:0;transform:scale(1.45)}
@keyframes bloom{from{opacity:0;transform:scale(.25);filter:blur(12px) brightness(3)}to{opacity:1;transform:none;filter:none}}
@keyframes vibeCardFadeOut{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none}
  32%{opacity:.86;transform:translate3d(calc(var(--dx,28px) * .28),calc(var(--dy,-16px) * .28),0) scale(1.03);filter:blur(1.5px) brightness(1.22);background:linear-gradient(135deg,rgba(var(--glow),.38),rgba(var(--tint,10,8,30),.52));border-color:color-mix(in srgb,var(--a3,#22d3ee) 65%,transparent);box-shadow:0 0 38px rgba(var(--glow),.6),inset 0 0 22px color-mix(in srgb,var(--a1,#8b5cf6) 28%,transparent)}
  100%{opacity:0;transform:translate3d(var(--dx,28px),var(--dy,-16px),0) scale(.76);filter:blur(14px) brightness(1.35);background:linear-gradient(135deg,rgba(var(--glow),0),rgba(var(--tint,10,8,30),0));border-color:transparent;box-shadow:0 0 54px rgba(var(--glow),0)}
}
.vc-av{font-size:22px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:radial-gradient(circle at 35% 30%,#fff3,var(--c))}
.vc-body{min-width:0}
.vc-body b{display:block;font-size:13px;color:var(--c);filter:brightness(1.35)}
.vc-body span{display:block;font-size:15px;line-height:1.35;overflow-wrap:anywhere;color:#fff}
/* the track time, to the millisecond */
.vibe-time{position:absolute;left:50%;top:calc(66px + env(safe-area-inset-top));transform:translateX(-50%) translateY(-24px) scale(.92);z-index:4;pointer-events:none;text-align:center;opacity:0;filter:blur(14px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.9,.25,1.15),filter .8s ease;color:#fff;text-shadow:0 0 18px rgba(var(--glow),.85),0 0 4px rgba(var(--glow),.6)}
.vibe.timed .vibe-time{opacity:1;transform:translateX(-50%) translateY(0) scale(1);filter:none}
.vibe-time b{display:inline-flex;align-items:baseline;font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:.02em}
.vibe-time span{display:inline-block;width:.78em;text-align:center}
.vibe-time em{font-style:normal;opacity:.7;margin:0 .04em}
.vibe-time i{font-style:normal;font-size:.62em;opacity:.75;display:inline-flex;align-items:baseline}
.vibe-time small{display:block;margin-top:2px;font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
@media (max-width:640px){.vibe-time b{font-size:24px}}
/* cloudlike status bar under playtime */
.vibe-bar{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:4px 8px;width:min(350px,calc(100vw - 44px));border-radius:999px;background:rgba(8,6,24,.52);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 4px 20px rgba(0,0,0,.45),0 0 24px rgba(var(--glow),.3);pointer-events:auto;position:relative;user-select:none;-webkit-user-select:none;transition:width .3s ease,opacity .3s ease;text-shadow:none}
.vibe-bar::before{content:"";position:absolute;inset:-10px -18px;z-index:-1;border-radius:999px;filter:blur(16px);pointer-events:none;background:radial-gradient(closest-side at 25% 50%,color-mix(in srgb,var(--a1) 40%,transparent),transparent),radial-gradient(closest-side at 75% 50%,rgba(var(--glow),.35),transparent);animation:cloudswirl 12s ease-in-out infinite alternate}
html.lite .vibe-bar::before{filter:none;opacity:.5}
html.lite .vibe-bar{backdrop-filter:none;-webkit-backdrop-filter:none}
.vibe-skip{flex:none;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:11px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .12s,border-color .2s,box-shadow .2s;padding:0;line-height:1}
.vibe-skip:hover{background:rgba(var(--glow),.45);border-color:rgba(255,255,255,.35);box-shadow:0 0 10px rgba(var(--glow),.5)}
.vibe-skip:active{transform:scale(.9)}
.vibe-skip:disabled{opacity:.3;pointer-events:none}
.vibe-progress{flex:1;min-width:0;height:32px;display:flex;align-items:center;cursor:pointer;position:relative;touch-action:none}
.vibe-progress-rail{width:100%;height:5px;border-radius:999px;background:rgba(255,255,255,.14);position:relative;overflow:visible;transition:height .15s ease}
.vibe-progress:hover .vibe-progress-rail,.vibe-progress.dragging .vibe-progress-rail{height:7px}
.vibe-progress-buf{position:absolute;left:0;top:0;height:100%;border-radius:999px;background:rgba(255,255,255,.16);width:0;pointer-events:none}
.vibe-progress-fill{position:absolute;left:0;top:0;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--a1),var(--a4),var(--a3));box-shadow:0 0 10px rgba(var(--glow),.8);width:0;pointer-events:none}
.vibe-progress-thumb{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff,0 0 16px var(--a1);pointer-events:none;transition:transform .12s ease}
.vibe-progress:hover .vibe-progress-thumb,.vibe-progress.dragging .vibe-progress-thumb{transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 12px #fff,0 0 20px var(--a4)}
.vibe-bar-tip{position:absolute;bottom:calc(100% + 5px);left:0;transform:translateX(-50%);padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;background:rgba(8,6,24,.92);border:1px solid rgba(255,255,255,.24);color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.6),0 0 8px rgba(var(--glow),.3);pointer-events:none;opacity:0;transition:opacity .15s ease;white-space:nowrap}
.vibe-progress:hover .vibe-bar-tip,.vibe-progress.dragging .vibe-bar-tip{opacity:1}
.vibe.following .vibe-skip{display:none}
.vibe.following .vibe-progress{cursor:default;pointer-events:none}
.vibe.following .vibe-bar{width:min(240px,calc(100vw - 48px));padding:4px 12px}
/* share play: the planet card, the floating ask/invite clouds and song reactions */
#vibeInvite{width:auto;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap}
#vibeInvite:disabled{opacity:.35;pointer-events:none}
.vibe-planet{position:absolute;left:0;top:0;z-index:4;width:250px;padding:14px 16px;border-radius:26px;color:#fff;isolation:isolate;opacity:0;filter:blur(8px);pointer-events:none;transition:opacity .45s ease,filter .45s ease;
  background:rgba(10,8,30,.4);border:1px solid color-mix(in srgb,var(--c,#8b5cf6) 40%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vibe-planet.on{opacity:1;filter:none;pointer-events:auto}
.vibe-planet::before,.vibe-ask::before{content:"";position:absolute;inset:-18px -26px;z-index:-1;border-radius:50%;filter:blur(20px);pointer-events:none;
  background:radial-gradient(closest-side at 30% 50%,color-mix(in srgb,var(--c,#8b5cf6) 50%,transparent),transparent),radial-gradient(closest-side at 72% 55%,rgba(var(--glow),.4),transparent);
  animation:cloudswirl 11s ease-in-out infinite alternate}
.vp-head{display:flex;gap:10px;align-items:center}
.vp-head b{display:block;font-size:15px;color:color-mix(in srgb,var(--c) 55%,#fff)}
.vp-head small{display:block;font-size:12px;color:rgba(255,255,255,.7)}
.va-av{font-size:20px;width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff4,var(--c,#8b5cf6))}
.vp-song{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vp-eq{display:flex;gap:2px;align-items:flex-end;height:14px;flex:none}
.vp-eq i{width:3px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--c) 60%,#fff)}
.vp-eq.on i{animation:eq .9s ease-in-out infinite alternate}.vp-eq.on i:nth-child(2){animation-duration:.6s}.vp-eq.on i:nth-child(3){animation-duration:1.1s}
.vp-act{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.vp-act button,.va-btns button{padding:9px 14px;border-radius:999px;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--c,#8b5cf6) 75%,#000),rgba(var(--glow),.75));box-shadow:0 0 18px color-mix(in srgb,var(--c,#8b5cf6) 40%,transparent);transition:transform .15s,filter .2s}
.vp-act button:hover,.va-btns button:hover{filter:brightness(1.2)}
.vp-act button:active,.va-btns button:active{transform:scale(.95)}
.vp-note{font-size:13px;color:rgba(255,255,255,.8)}
.vibe-asks{position:fixed;top:calc(68px + env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));z-index:96;display:flex;flex-direction:column;gap:22px;width:min(320px,calc(100vw - 32px));pointer-events:none}
.vibe-ask{position:relative;display:flex;gap:12px;align-items:flex-start;padding:12px 18px 12px 12px;border-radius:30px;color:#fff;isolation:isolate;pointer-events:auto;
  background:rgba(10,8,30,.42);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:askin 1.1s cubic-bezier(.2,.9,.3,1.1) both,askdrift var(--drift,8s) ease-in-out 1.1s infinite alternate}
.va-body p{margin:3px 0 0;font-size:14px;line-height:1.4}
.va-body i{font-style:normal;font-weight:700;color:color-mix(in srgb,var(--c) 45%,#fff)}
.va-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.va-btns button[data-v="no"]{background:rgba(255,255,255,.08);box-shadow:none;border:1px solid rgba(255,255,255,.18);font-weight:600}
.vibe-ask.va-gone{animation:askout 1.2s ease forwards;pointer-events:none}
@keyframes askin{from{opacity:0;transform:translateY(-8px) scale(.85);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes askdrift{0%{transform:translate(0,0)}50%{transform:translate(3px,-3px)}100%{transform:translate(-2px,2px)}}
@keyframes askout{to{opacity:0;transform:translateY(-10px) scale(1.18);filter:blur(14px)}}
.vibe-reacts{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:calc(var(--cloud-b) + 68px);max-height:calc(100dvh - var(--cloud-b) - 148px);z-index:4;display:flex;flex-direction:column;flex-wrap:wrap-reverse;align-content:flex-end;gap:4px;padding:6px;border-radius:24px;background:rgba(8,6,24,.46);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 28px rgba(0,0,0,.45),0 0 24px rgba(var(--glow),.24);opacity:0;transform:translateX(10px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.vibe.awake.playing:not(.picking) .vibe-reacts{opacity:1;transform:none;pointer-events:auto}
.vibe-reacts button{width:38px;height:38px;border-radius:50%;font-size:19px;display:grid;place-items:center;background:radial-gradient(circle,rgba(var(--glow),.24),transparent 72%);transition:transform .18s cubic-bezier(.2,.9,.3,1.4),background .18s;white-space:nowrap;flex:none}
.vibe-reacts button[data-emoji="🎶🗑️"]{font-size:14px;letter-spacing:-1px}
.vibe-reacts button:hover{transform:scale(1.2);background:radial-gradient(circle,rgba(var(--glow),.48),transparent 75%)}
.vibe-reacts button:active,.vibe-reacts button.pop{transform:scale(1.32);background:radial-gradient(circle,rgba(var(--glow),.65),transparent 78%)}
@media (max-height:660px){.vibe-reacts{left:50%;right:auto;bottom:calc(var(--cloud-b) + 64px);max-height:none;flex-direction:row;flex-wrap:nowrap;padding:4px 8px;border-radius:999px;transform:translate(-50%,8px)}.vibe.awake.playing:not(.picking) .vibe-reacts{transform:translate(-50%,0)}.vibe-reacts button{width:34px;height:34px;font-size:17px}}
.vibe-puffs{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.vibe-puff{position:absolute;width:44px;height:44px;display:grid;place-items:center;isolation:isolate;animation:puffup 3.4s cubic-bezier(.25,.6,.35,1) forwards}
.vibe-puff::before{content:"";position:absolute;inset:-14px;z-index:-1;border-radius:50%;filter:blur(12px);background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 70%,transparent),transparent)}
.vibe-puff span{font-size:28px;filter:drop-shadow(0 0 8px var(--c));white-space:nowrap}
@keyframes puffup{0%{opacity:0;transform:translate(-50%,-50%) scale(.3);filter:none}14%{opacity:1;transform:translate(-50%,-80%) scale(1.15);filter:none}70%{opacity:.95;transform:translate(calc(-50% + var(--dx)),-320%) scale(1);filter:none}100%{opacity:0;transform:translate(calc(-50% + var(--dx) * 1.5),-480%) scale(1.3);filter:blur(8px)}}
.vibe-leave{margin-left:6px;padding:1px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.25);font-size:11px;color:#fff}
/* the song list */
.vibe-songs{position:absolute;right:16px;bottom:84px;width:min(360px,calc(100% - 32px));max-height:min(60vh,480px);overflow:auto;padding:8px;border-radius:18px;z-index:5;display:flex;flex-direction:column;gap:2px;animation:bloom .35s ease both}
.vibe-songs[hidden]{display:none}
.vibe-songs button{display:block;text-align:left;padding:10px 12px;border-radius:12px;width:100%}
.vibe-songs button:hover,.vibe-songs button:focus-visible{background:rgba(var(--glow),.3)}
.vibe-songs b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vibe-songs small{color:var(--muted);font-size:12px}
.vibe-songs .vs-shuffle{font-weight:700;border-bottom:1px solid var(--line);border-radius:12px 12px 4px 4px;margin-bottom:4px}
.vibe-songs p{padding:14px;color:var(--muted);font-size:14px;margin:0}
@media (max-width:640px){.vibe-now b{max-width:38vw}.vibe-top button,.vibe-btns button{width:40px;height:40px}.vibe-btns #vibeMusic{padding:0 12px}.vibe{--cloud-b:88px}.vibe-eq{display:none}.vibe-btns #vibeMusic{width:40px;padding:0;font-size:17px}.vibe-btns #vibeMusic span{display:none}#vibeInvite{width:40px;padding:0;justify-content:center}#vibeInvite span{display:none}.vibe-planet{width:220px}.vibe-now small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}}
@media (prefers-reduced-motion:reduce){.galaxy-card.live{animation:none}.vibe,.vibe-card,.vibe-songs,.vibe-echo,.vibe-ask,.vibe-bar{animation:none}.vibe-card.leaving{animation:none;opacity:0;transition:opacity .5s ease}.vibe-puff{animation-duration:1.2s}.vibe-echo.poof .w>span,.vc-digit.tick span{transform:none;transition-delay:0s;animation:none}.vibe-cloud::before,.vibe-cloud::after,.vibe-bar::before{animation:none}}
html.lite .vibe-cloud::before,html.lite .vibe-cloud::after{filter:none;opacity:.5}
html.lite .vibe-card,html.lite #vibeSay,html.lite .vibe-top button,html.lite .vibe-btns button{backdrop-filter:none;-webkit-backdrop-filter:none}

/* watch party */
.watch{flex:none;border-bottom:1px solid rgba(var(--glow),.22);background:linear-gradient(180deg,rgba(var(--tint),.96),rgba(4,5,16,.96));animation:pop .3s}
.watch-head{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;min-width:0}
.watch-live{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 1.4s infinite;flex:none}
.watch-title{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.25}
.watch-title b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.watch-title small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.watch-viewers{display:flex;padding-left:6px}
.watch-viewers .avatar{width:24px;height:24px;font-size:12px;margin-left:-6px}
.watch .pill.watch-join{height:34px;padding:0 14px;font-size:13px;width:auto}
.watch-body{padding:0 12px 10px}
.watch-stage{position:relative;border-radius:14px;overflow:hidden;background:#000;--wv-max:min(48vh,520px);width:min(100%,calc(var(--wv-max) * var(--wv-ar,16/9)));aspect-ratio:var(--wv-ar,16/9);max-height:var(--wv-max);margin:0 auto}
.watch-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.watch-art{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle,rgba(var(--glow),.5),#05030f 70%);font-size:64px}
.watch-art span{animation:float 3s ease-in-out infinite;filter:drop-shadow(0 0 24px rgba(var(--glow),.9))}
.watch-float{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.watch-float span{position:absolute;bottom:8%;display:flex;flex-direction:column;align-items:center;font-size:34px;animation:floatup 2.6s ease-out forwards;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.watch-float span em{font-style:normal;font-size:11px;font-weight:700;padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff}
.watch-float span.still{animation:none!important;opacity:1}
@keyframes floatup{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1;transform:translateY(-20px) scale(1.1)}100%{opacity:0;transform:translateY(-220px) scale(1)}}
.watch-tap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 18px;border-radius:999px;background:var(--grad);font-weight:700;color:#fff;box-shadow:0 10px 30px -8px rgba(var(--glow),1)}
.watch-error{position:absolute;inset:0;z-index:4;display:grid;place-content:center;gap:12px;padding:16px;text-align:center;background:rgba(4,5,13,.92)}
.watch-error[hidden]{display:none}
.watch-error p{margin:0;color:var(--text);font-size:14.5px;max-width:420px}
.watch-error div{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.watch-error .pill{width:auto;color:#fff}.watch-error .chip{color:var(--text);text-decoration:none}
.watch-note{position:absolute;left:12px;top:10px;padding:5px 11px;border-radius:999px;background:rgba(0,0,0,.65);font-size:12px;opacity:0;transition:opacity .3s;pointer-events:none}
.watch-note.show{opacity:1}
.watch-bar{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.watch-play{width:42px;height:42px;border-radius:50%;color:#fff;font-size:15px;flex:none;box-shadow:0 8px 20px -8px rgba(var(--glow),1)}
.watch-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:36px}
#watchSeek{flex:1;min-width:110px;accent-color:var(--a3)}
.watch-reacts{display:flex;gap:2px}
.watch-reacts button{font-size:19px;width:34px;height:34px;border-radius:10px;transition:transform .12s,background .12s}
.watch-reacts button:hover{background:rgba(255,255,255,.08);transform:scale(1.15)}
.watch-end{padding:7px 12px;border-radius:10px;border:1px solid rgba(251,113,133,.45);color:var(--red);font-size:12.5px}
.watch.invite .watch-body,.watch.mini .watch-body{display:none}
.watch:not(.invite) .watch-join{display:none}
.watch.invite #watchLeave,.watch.invite #watchMin{display:none}
.watch.mini .watch-head{cursor:pointer}
.watch-body:fullscreen,.watch-body.theater{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:0;background:#000}
.watch-body.theater{position:fixed;inset:0;z-index:90;width:auto;height:auto;animation:fade .25s}
.watch-body:fullscreen .watch-stage,.watch-body.theater .watch-stage{flex:1;width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0}
.watch-body:fullscreen .watch-bar,.watch-body.theater .watch-bar{position:absolute;left:0;right:0;bottom:0;margin:0;padding:40px max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:linear-gradient(transparent,rgba(0,0,0,.88));transition:opacity .35s}
.watch-body:fullscreen .watch-time,.watch-body.theater .watch-time{color:#fff}
.watch-body:fullscreen .watch-note,.watch-body.theater .watch-note{top:max(14px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left))}
.watch-body.theater #watchDur{display:inline}
.watch-body.idle:fullscreen,.watch-body.idle.theater{cursor:none}
.watch-body.idle:fullscreen .watch-bar,.watch-body.idle.theater .watch-bar{opacity:0;pointer-events:none}
body.watch-theater{overflow:hidden}
body.watch-theater #app,body.watch-theater .chat,body.watch-theater .watch{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;filter:none!important;animation:none!important;contain:none!important}
/* iPhone Safari can't hide its address bar for a web page, but it does tuck it away when the page is
   swiped upward — so the full-screen party view leaves a little room to swipe and says so */
html.theater-swipe,html.theater-swipe body{height:auto;overflow:visible}
html.theater-swipe body{min-height:calc(100vh + 160px)}
.watch-swipe{position:absolute;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:3;padding:7px 14px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;pointer-events:none;transition:opacity .4s}
.watch-swipe.gone{opacity:0}
body.watch-theater #toasts{z-index:95}
.factions{display:flex;gap:6px}
.factions .watchit,.lib-watch{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);font-size:17px;flex:none;transition:transform .15s}
.factions .watchit:hover,.lib-watch:hover{transform:scale(1.08);background:rgba(var(--glow),.35)}
@media (max-width:820px){.watch-stage{--wv-max:36vh}.watch-reacts button{width:30px}#watchDur{display:none}.watch-viewers{display:none}}

/* ================= popup media player ================= */
.player-modal{background:rgba(0,0,0,.84);padding:16px}
.player{position:relative;width:min(1120px,100%);border-radius:20px;overflow:hidden;background:#000;outline:0;box-shadow:0 40px 120px -20px rgba(var(--glow),.55),0 0 0 1px rgba(var(--glow),.28);animation:rise .3s cubic-bezier(.2,.8,.2,1)}
.player-stage{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 32px);background:#000;display:grid;place-items:center;overflow:hidden;user-select:none;-webkit-user-select:none}
.player.audio .player-stage{aspect-ratio:auto;height:min(440px,72dvh)}
.player-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000}
.player.audio .player-stage video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.player-art{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(var(--glow),.6),rgba(var(--tint),.9) 45%,#03020c 78%)}
.player-disc{position:absolute;left:50%;top:40%;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;display:grid;place-items:center;font-size:64px;background:radial-gradient(circle at 50% 50%,#0b0820 0 18%,transparent 19%),repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.06) 0 2px,transparent 2px 6px),radial-gradient(circle at 35% 30%,rgba(255,255,255,.3),rgba(var(--glow),.75) 45%,#0b0820 78%);box-shadow:0 0 70px rgba(var(--glow),.75)}
.player-disc span{animation:none}
.player.playing .player-disc{animation:spin 9s linear infinite}
.player-eq{position:absolute;left:50%;top:calc(40% + 112px);transform:translateX(-50%);display:flex;align-items:flex-end;gap:4px;height:46px}
.player-eq i{width:5px;height:100%;border-radius:3px;background:linear-gradient(var(--a3),var(--a1));transform-origin:bottom;transform:scaleY(.15);animation:eq 1s ease-in-out infinite alternate;animation-play-state:paused}
.player.playing .player-eq i{animation-play-state:running}
@keyframes eq{0%{transform:scaleY(.15)}100%{transform:scaleY(1)}}
.player-top,.player-bottom{position:absolute;left:0;right:0;z-index:3;transition:opacity .25s}
.player-top{top:0;display:flex;align-items:center;gap:4px;padding:12px 12px 34px 18px;background:linear-gradient(180deg,rgba(0,0,0,.78),transparent)}
.player-bottom{bottom:0;padding:34px 14px 10px;background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.45) 62%,transparent)}
.player.idle .player-top,.player.idle .player-bottom{opacity:0;pointer-events:none}
.player.idle{cursor:none}
.player-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.player-title b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-title small{color:rgba(255,255,255,.72);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-btn{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none;position:relative;text-decoration:none;transition:background .15s,transform .12s}
.player-btn:hover{background:rgba(255,255,255,.14)}
.player-btn:active{transform:scale(.9)}
.player-btn:disabled{opacity:.35;pointer-events:none}
.player-btn small{position:absolute;left:50%;top:50%;transform:translate(-50%,-42%);font-size:8.5px;font-weight:800}
.player-btn.big{width:52px;height:52px;border-radius:50%;background:var(--grad);box-shadow:0 8px 24px -8px rgba(var(--glow),1)}
.player-btn.text{width:auto;min-width:46px;padding:0 10px;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.player-controls{display:flex;align-items:center;gap:2px;margin-top:6px}
.player-time{font-variant-numeric:tabular-nums;font-size:13.5px;color:rgba(255,255,255,.92);margin-left:8px;white-space:nowrap}
.player-spacer{flex:1}
.player-vol{display:flex;align-items:center}
.player-vol input{width:0;opacity:0;transition:width .2s,opacity .2s;accent-color:var(--a3)}
.player-vol:hover input,.player-vol:focus-within input{width:90px;opacity:1}
.player-seek{position:relative;height:20px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:0}
.seek-track{position:relative;width:100%;height:4px;border-radius:4px;background:rgba(255,255,255,.24);overflow:hidden;transition:height .15s}
.player-seek:hover .seek-track,.player-seek.drag .seek-track,.player-seek:focus-visible .seek-track{height:7px}
.seek-buffer,.seek-fill,.seek-hover{position:absolute;left:0;top:0;bottom:0;width:0}
.seek-buffer{background:rgba(255,255,255,.34)}
.seek-hover{background:rgba(255,255,255,.28);opacity:0}
.player-seek:hover .seek-hover,.player-seek.drag .seek-hover{opacity:1}
.seek-fill{background:var(--grad);box-shadow:0 0 12px rgba(var(--glow),.8)}
.seek-knob{position:absolute;top:50%;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(var(--glow),.5),0 2px 6px rgba(0,0,0,.6);transform:scale(0);transition:transform .15s;pointer-events:none}
.player-seek:hover .seek-knob,.player-seek.drag .seek-knob,.player-seek:focus-visible .seek-knob{transform:scale(1)}
.seek-preview{position:absolute;bottom:28px;left:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none;z-index:4}
.seek-preview canvas{width:192px;height:108px;border-radius:10px;border:2px solid rgba(255,255,255,.9);background:#0b0b12;box-shadow:0 12px 34px rgba(0,0,0,.65)}
.seek-preview.no-thumb canvas{display:none}
.seek-preview span{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;padding:3px 9px;border-radius:7px;background:rgba(0,0,0,.8);color:#fff}
.player-flash{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;color:#fff;opacity:0;pointer-events:none;z-index:2}
.player-flash svg{width:34px;height:34px}
.player-flash.show{animation:flashout .6s ease-out}
@keyframes flashout{0%{opacity:1;transform:scale(.7)}100%{opacity:0;transform:scale(1.35)}}
.player-ripple{position:absolute;top:0;bottom:0;width:40%;display:grid;place-items:center;opacity:0;pointer-events:none;z-index:2}
.player-ripple.left{left:0;background:radial-gradient(ellipse at 0 50%,rgba(255,255,255,.2),transparent 70%)}
.player-ripple.right{right:0;background:radial-gradient(ellipse at 100% 50%,rgba(255,255,255,.2),transparent 70%)}
.player-ripple span{font-weight:800;font-size:15px;padding:7px 14px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff}
.player-ripple.show{animation:rippleflash .6s ease-out}
@keyframes rippleflash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
.player-spinner{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px;border-radius:50%;border:4px solid rgba(255,255,255,.2);border-top-color:var(--a3);animation:spin .8s linear infinite;z-index:2;pointer-events:none}
.player-error{position:absolute;inset:0;z-index:4;display:grid;place-items:center;align-content:center;gap:14px;text-align:center;padding:30px;background:rgba(0,0,0,.8);color:#fff}
.player-error a{color:#fff}
.player-resume{position:absolute;left:16px;bottom:100px;z-index:4;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:999px;background:rgba(0,0,0,.78);font-size:13px;color:#fff;animation:pop .3s}
.player-resume button{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-weight:700}
.player-speeds{position:absolute;right:58px;bottom:66px;z-index:6;padding:6px;border-radius:14px;display:flex;flex-direction:column;min-width:110px}
.player-speeds button{padding:8px 16px;border-radius:9px;text-align:left;font-variant-numeric:tabular-nums}
.player-speeds button:hover{background:rgba(255,255,255,.1)}
.player-speeds button[aria-checked="true"]{background:rgba(var(--glow),.45)}
.player:fullscreen{width:100%;height:100%;border-radius:0;max-width:none}
.player:fullscreen .player-stage{aspect-ratio:auto;height:100%;max-height:none}
.player.audio:fullscreen .player-stage{height:100%}
@media (max-width:820px){.player-modal{padding:0}.player{border-radius:0}.player-btn{width:38px;height:38px}.player-btn.big{width:46px;height:46px}#playerPrev,#playerNext,.player-vol input{display:none}.player-time{font-size:12px;margin-left:4px}.seek-preview canvas{width:144px;height:81px}.player-top{padding-left:14px}}
@media (max-width:820px){.player:not(.audio):not(:fullscreen) .player-stage{aspect-ratio:auto;height:min(calc(56.25vw + 200px),100dvh)}}
.media-poster{position:relative;display:block;width:100%;margin-top:10px;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:16/9;cursor:pointer;border:0;padding:0;color:#fff}
.media-poster video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;max-height:none!important;margin:0!important;border-radius:0!important}
.media-poster .mp-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;border-radius:50%;display:grid;place-items:center;background:var(--grad);box-shadow:0 10px 30px -6px rgba(var(--glow),1);transition:transform .2s}
.media-poster:hover .mp-play,.media-poster:focus-visible .mp-play{transform:scale(1.12)}
.media-poster .mp-dur{position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.78);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.media-poster .mp-dur:empty{display:none}
.media-poster.audio{aspect-ratio:auto;height:62px;display:flex;align-items:center;gap:12px;padding:0 14px;background:linear-gradient(135deg,rgba(var(--glow),.45),rgba(0,0,0,.45))}
.media-poster.audio .mp-play{position:static;margin:0;width:40px;height:40px;flex:none}
.media-poster.audio .mp-label{flex:1;min-width:0;text-align:left;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-thumb video{width:100%;height:100%;object-fit:cover;pointer-events:none}

/* ================= mini player: keeps playing in a corner (or a slim bar on phones) ================= */
.player-dock{position:fixed;z-index:45;width:340px;max-width:calc(100vw - 24px);right:24px;bottom:96px;touch-action:none}
.player-dock[data-corner="br"]{right:24px;bottom:96px;left:auto;top:auto}
.player-dock[data-corner="bl"]{left:24px;bottom:24px;right:auto;top:auto}
.player-dock[data-corner="tr"]{right:24px;top:84px;left:auto;bottom:auto}
.player-dock[data-corner="tl"]{left:24px;top:84px;right:auto;bottom:auto}
.player-dock.dragging{transition:none;cursor:grabbing}
.player-dock.dragging .player{box-shadow:0 30px 70px -10px rgba(0,0,0,.9),0 0 0 2px rgba(var(--glow),.7)}
.player.mini{width:100%;border-radius:16px;animation:none;box-shadow:0 22px 56px -14px rgba(0,0,0,.85),0 0 0 1px rgba(var(--glow),.4),0 0 30px -10px rgba(var(--glow),.8)}
.player.mini .player-top,.player.mini .player-bottom,.player.mini .player-ripple,.player.mini .player-resume,.player.mini .player-speeds,.player.mini .player-flash,.player.mini .player-spinner{display:none!important}
.player.mini .player-stage{aspect-ratio:16/9;height:auto;max-height:none;cursor:grab}
.player.mini.audio .player-stage{width:0;height:0;opacity:0;pointer-events:none;overflow:hidden}
.player-minibar{display:none}
.player.mini .player-minibar{display:flex;align-items:center;gap:6px;position:relative;padding:10px 8px 10px 10px;background:linear-gradient(135deg,rgba(var(--tint),.98),#06061a);cursor:grab}
.mini-progress{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.12)}
.mini-progress i{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 8px rgba(var(--glow),.9)}
.mini-art{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:17px;background:radial-gradient(circle,#0b0820 0 16%,transparent 17%),radial-gradient(circle at 35% 30%,rgba(255,255,255,.3),rgba(var(--glow),.85) 45%,#0b0820 80%);box-shadow:0 0 16px -2px rgba(var(--glow),.9)}
.player.playing .mini-art{animation:spin 6s linear infinite}
.player:not(.audio) .mini-art{display:none}
.mini-info{flex:1;min-width:0;padding-left:2px}
.mini-info b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-info small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mini-eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.mini-eq i{width:3px;height:100%;border-radius:1px;background:var(--a3);transform-origin:bottom;transform:scaleY(.3);animation:eq .8s ease-in-out infinite alternate;animation-play-state:paused}
.mini-eq i:nth-child(2){animation-delay:-.3s;animation-duration:.6s}.mini-eq i:nth-child(3){animation-delay:-.55s;animation-duration:.9s}
.player.playing .mini-eq i{animation-play-state:running}
.player:not(.playing) .mini-eq{opacity:.45}
.mini-btn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none;transition:background .15s,transform .12s}
.mini-btn svg{width:19px;height:19px}
.mini-btn:hover{background:rgba(255,255,255,.12)}
.mini-btn:active{transform:scale(.9)}
.mini-btn.play{width:38px;height:38px;border-radius:50%;background:var(--grad);box-shadow:0 6px 16px -6px rgba(var(--glow),1)}
.media-poster.now-playing{box-shadow:0 0 0 2px var(--a3),0 0 26px -4px var(--a3)}
.media-poster.now-playing::after{content:"♪ Now playing";position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.72);font-size:11.5px;font-weight:700;color:var(--a3)}
.media-poster.audio.now-playing::after{top:auto;bottom:6px;left:auto;right:8px}
@media (max-width:820px){
  .player-dock,.player-dock[data-corner]{left:10px;right:10px;top:auto;width:auto;max-width:none;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 70px)}
  .player.mini{display:flex;align-items:center;border-radius:14px}
  .player.mini .player-stage,.player.mini:not(.audio):not(:fullscreen) .player-stage{width:68px;height:38px!important;aspect-ratio:16/9;flex:none;border-radius:8px;margin-left:8px;cursor:pointer}
  .player.mini .player-minibar{flex:1;min-width:0;padding:8px 6px 8px 10px;background:none;cursor:pointer}
  .player.mini{background:linear-gradient(135deg,rgba(var(--tint),.98),#06061a)}
  .player.mini .mini-progress{position:absolute}
  .mini-next{display:none!important}
  .bubble.file{width:100%}
  .file-top{gap:8px}
  .bubble.file .ficon{width:34px;height:34px;font-size:18px;border-radius:10px}
  .factions{gap:4px}
  .factions a,.factions button,.factions .watchit{width:34px;height:34px}
  .fname{font-size:14px}
  body.docked .messages{padding-bottom:76px}
  body.docked .jump{bottom:150px}
}
.prefs-profile{padding:12px;margin:8px 0 12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.prefs-profile-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.prefs-profile-head .preview-chip{margin:0}
.prefs-profile-custom{display:flex;align-items:center;gap:8px}
.prefs-profile-custom .text-input{padding:8px 11px;font-size:14px;width:130px;flex:none}
.prefs-profile-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.prefs-profile-actions .pill{height:36px;padding:0 16px;font-size:13px}

/* ================= Vibe Out 2.0: The Crate, Cover Art, Chapters & Apple Compat Badge ================= */
.compat-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.35);color:#fbbf24;margin-left:6px;white-space:nowrap}
.cover-thumb{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.ficon.has-cover,.lib-thumb.has-cover{padding:0;overflow:hidden;background:#09071a}
.media-poster.audio .mp-cover{width:42px;height:42px;border-radius:10px;object-fit:cover;flex:none;box-shadow:0 4px 12px rgba(0,0,0,.45)}
.player-disc.has-cover{overflow:hidden;padding:0}
.player-disc.has-cover img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.mini-art.has-cover{overflow:hidden;padding:0}
.mini-art.has-cover img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.chapter-ticks{position:absolute;inset:0;pointer-events:none;z-index:2}
.chapter-tick{position:absolute;top:50%;transform:translate(-50%,-50%);width:4px;height:11px;border-radius:2px;background:rgba(255,255,255,.78);box-shadow:0 0 6px rgba(0,0,0,.7);pointer-events:auto;cursor:pointer;transition:transform .12s,background .15s}
.chapter-tick:hover{transform:translate(-50%,-50%) scale(1.45);background:var(--a3)}
.vibe-btns #vibeCrateBtn,.vibe-btns #vibeChaptersBtn{width:auto;padding:0 12px;border-radius:999px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.crate-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--grad);color:#fff;font-size:11px;font-weight:800}
.vibe-crate{position:absolute;right:16px;bottom:84px;width:min(380px,calc(100% - 32px));max-height:min(62vh,500px);overflow:auto;padding:12px;border-radius:18px;z-index:5;display:flex;flex-direction:column;gap:8px;animation:bloom .35s ease both}
.vibe-crate[hidden]{display:none}
.crate-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 6px;border-bottom:1px solid var(--line)}
.crate-ico{vertical-align:-2px;flex:none}.crate-add-ico{display:inline-flex;align-items:center;gap:1px;line-height:1}
.crate-head b{font-size:14px;letter-spacing:.03em;display:inline-flex;align-items:center;gap:6px}
.crate-head-btns{display:flex;gap:6px}
.crate-head-btns button{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(255,255,255,.1);color:#fff}
.crate-head-btns button:hover{background:rgba(var(--glow),.35)}
.crate-list{display:flex;flex-direction:column;gap:6px}
.crate-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.crate-item:hover{background:rgba(var(--glow),.18);border-color:rgba(var(--glow),.35)}
.crate-thumb{width:38px;height:38px;border-radius:9px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.08);overflow:hidden;font-size:18px}
.crate-meta{flex:1;min-width:0}
.crate-meta b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.crate-meta small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crate-actions{display:flex;align-items:center;gap:3px;flex:none}
.crate-actions button{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:12px;color:#fff;background:rgba(255,255,255,.08)}
.crate-actions button:hover{background:rgba(var(--glow),.45)}
.crate-empty{padding:16px 8px;text-align:center;color:var(--muted);font-size:13.5px;margin:0}
.vs-row{display:flex;align-items:center;gap:6px}
.vs-row .vs-pick{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;padding:8px 10px;border-radius:12px}
.vs-row .vs-crate{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;padding:0;font-size:13px;font-weight:700;background:rgba(255,255,255,.08);color:#fff}
.vs-row .vs-crate:hover{background:rgba(var(--glow),.45)}
.chapters-list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto;margin:10px 0}
.chapter-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.06);text-align:left;width:100%;color:#fff;transition:background .15s}
.chapter-row:hover{background:rgba(var(--glow),.3)}
.chapter-row code{font-size:12px;font-weight:700;padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.45);color:var(--a3);font-variant-numeric:tabular-nums}
.chapter-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600}
.chapters-editor{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.chapters-editor summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--a3);margin-bottom:8px}
.chapters-textarea{width:100%;font-family: ui-monospace, SFMono-Regular, Menlo, monospace;font-size:13px;margin-bottom:6px}
@media (max-width:640px){.vibe-btns #vibeCrateBtn > span,.vibe-btns #vibeChaptersBtn span{display:none}.vibe-btns #vibeCrateBtn,.vibe-btns #vibeChaptersBtn{padding:0 10px}}

/* ================= Station Bulletin (Pinned Messages) & Watch Party Cinema Mode ================= */
.pin-btn{opacity:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--muted);flex:none;font-size:14px;transition:opacity .15s,background .15s,transform .15s,color .15s}
.msg:hover .pin-btn,.pin-btn:focus-visible,.pin-btn.on{opacity:1}
.pin-btn:hover{background:rgba(255,255,255,.08);color:var(--text);transform:scale(1.1)}
.pin-btn.on{color:var(--gold);background:rgba(251,191,36,.14);box-shadow:0 0 0 1px rgba(251,191,36,.35)}
@media (hover:none){.pin-btn{opacity:.55}}
.pin-note{font-size:11px;color:var(--gold);margin:0 4px 3px;display:inline-flex;align-items:center;gap:4px;opacity:.92}
.pin-note[hidden]{display:none}
.pin-note b{font-weight:700;color:#fde68a}
.msg.pinned .bubble{border-color:rgba(251,191,36,.42);box-shadow:0 6px 22px -12px rgba(251,191,36,.45)}

.pin-bar{flex:none;border-bottom:1px solid rgba(var(--glow),.24);background:linear-gradient(90deg,rgba(var(--tint),.88),rgba(14,12,34,.92));padding:6px 12px;display:flex;flex-direction:column;gap:6px;z-index:5;animation:pop .22s ease}
.pin-bar[hidden]{display:none}
.pin-bar-main{display:flex;align-items:center;gap:8px;min-width:0}
.pin-bar-badge{flex:none;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.38);color:#fde68a;font-size:12px;font-weight:700;white-space:nowrap;transition:background .15s}
.pin-bar-badge:hover{background:rgba(251,191,36,.25)}
.pin-bar-caret{font-size:11px;opacity:.8}
.pin-bar-preview{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;text-align:left;padding:4px 8px;border-radius:10px;color:var(--text);font-size:13px;transition:background .15s;overflow:hidden}
.pin-bar-preview:hover{background:rgba(255,255,255,.06)}
.pin-bar-author{font-weight:700;color:var(--cyan);white-space:nowrap;flex:none}
.pin-bar-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);flex:1;min-width:0}
.pin-bar-unpin{width:28px;height:28px;border-radius:8px;font-size:13px;flex:none}
.pin-bar-drawer{display:flex;flex-direction:column;gap:4px;max-height:210px;overflow-y:auto;padding-top:6px;border-top:1px solid var(--line)}
.pin-bar-drawer[hidden]{display:none}
.pin-item{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.pin-item:hover{background:rgba(var(--glow),.14);border-color:rgba(var(--glow),.3)}
.pin-item-jump{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left;padding:2px 4px;color:var(--text)}
.pin-item-meta{display:flex;align-items:baseline;gap:6px;font-size:12px}
.pin-item-meta small{color:var(--faint);font-size:11px}
.pin-item-body{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pin-item-unpin{width:26px;height:26px;border-radius:8px;font-size:12px;flex:none}
.confirming,.icon-btn.confirming,.pin-btn.confirming{width:auto!important;padding:0 10px;border-radius:8px;opacity:1;background:rgba(251,113,133,.2)!important;color:var(--red)!important;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 0 0 1px rgba(251,113,133,.45)}

/* Watch Party Resume Chip & Cinema Mode */
.watch .pill.watch-cinema-btn,.watch .pill.watch-chat-btn{height:32px;padding:0 12px;font-size:12.5px;width:auto;background:rgba(255,255,255,.08);box-shadow:none;border:1px solid rgba(255,255,255,.16);color:var(--text)}
.watch .pill.watch-cinema-btn:hover,.watch .pill.watch-chat-btn:hover{background:rgba(255,255,255,.15)}
.watch .pill.watch-cinema-btn.on,.watch .pill.watch-chat-btn.on{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 6px 18px -6px rgba(var(--glow),.85)}
.watch .pill.watch-cinema-btn[hidden],.watch .pill.watch-chat-btn[hidden]{display:none}

.watch-ambient{display:none;position:absolute;inset:-15%;width:130%;height:130%;object-fit:cover;filter:blur(42px) saturate(1.75) brightness(.85);opacity:.6;pointer-events:none;z-index:0}
#watchStage.cinema .watch-ambient{display:block}
body.no-motion .watch-ambient,.lite .watch-ambient{display:none!important}
@media (prefers-reduced-motion:reduce){.watch-ambient{display:none!important}}
#watchStage>video,#watchStage>.watch-yt,#watchStage>.watch-shield,#watchStage>.watch-art,#watchStage>.watch-float{z-index:1}
#watchStage>.watch-resume,#watchStage>.watch-tap,#watchStage>.watch-note{z-index:3}

.watch-resume{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:4px;padding:4px 6px 4px 4px;border-radius:999px;background:rgba(7,9,24,.88);border:1px solid rgba(var(--glow),.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 28px -8px rgba(0,0,0,.85);animation:pop .25s ease}
.watch-resume[hidden]{display:none}
.watch-resume .watch-resume-btn{height:30px;padding:0 12px;font-size:12.5px;width:auto}
.watch-resume .watch-resume-dismiss{width:26px;height:26px;border-radius:50%;font-size:12px;color:var(--muted)}

#app.cinema-mode{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);padding:8px;gap:0}
#app.cinema-mode>.topbar,#app.cinema-mode>#sidebar{display:none}
#app.cinema-mode .chat{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto auto;column-gap:0;background:rgba(3,4,14,.96);border-color:rgba(var(--glow),.3)}
#app.cinema-mode .chat>#watchPanel{grid-column:1;grid-row:1 / 12;display:flex;flex-direction:column;height:100%;min-height:0;border-bottom:0;border-right:1px solid rgba(var(--glow),.24);background:radial-gradient(circle at 50% 45%,rgba(var(--tint),.65),rgba(2,3,10,.98) 78%)}
#app.cinema-mode .chat>:not(#watchPanel){grid-column:2;min-width:0}
#app.cinema-mode .chat>.messages{grid-row:3;min-height:0}
/* every drawer row is explicit, so a hidden Bulletin can't pull the composer up above the messages */
#app.cinema-mode .chat>#updateBanner{grid-row:1}
#app.cinema-mode .chat>#pinBar{grid-row:2}
#app.cinema-mode .chat>#typing{grid-row:4}
#app.cinema-mode .chat>#privateNudge{grid-row:5}
#app.cinema-mode .chat>#outbox{grid-row:6}
#app.cinema-mode .chat>#replyBar{grid-row:7}
#app.cinema-mode .chat>#composer{grid-row:8}
#app.cinema-mode .chat>#watchPanel{grid-row:1 / -1}
/* the 360 px drawer: file cards stack their details instead of squeezing them one letter per line */
#app.cinema-mode .chat .body{max-width:100%}
#app.cinema-mode .chat .bubble-row{flex-wrap:wrap}
#app.cinema-mode .chat .bubble-stack:has(>.bubble.file){flex:1 1 210px}
#app.cinema-mode .bubble.file{width:100%;padding:10px}
#app.cinema-mode .bubble.file .ficon{width:34px;height:34px;font-size:18px;border-radius:10px}
/* ambient glow: let it spill past the stage and show through the letterbox bars */
#watchStage.cinema{overflow:visible}
#watchStage.cinema>video{background:transparent;border-radius:14px}
#watchStage.cinema>.watch-yt{border-radius:14px;overflow:hidden}
#watchStage.cinema .watch-ambient{inset:-8%;width:116%;height:116%}
body.watch-joined [data-watch-join]{display:none}
.watch-chat-btn .chat-unread{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:800;line-height:1}
#app.cinema-mode.cinema-chat-closed .chat{grid-template-columns:minmax(0,1fr) 0px}
#app.cinema-mode.cinema-chat-closed .chat>#watchPanel{border-right:0}
#app.cinema-mode.cinema-chat-closed .chat>:not(#watchPanel){display:none!important}
#watchPanel.cinema .watch-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;padding:10px 16px 14px}
#watchStage.cinema{--wv-max:calc(100vh - 136px);flex:1;width:100%;max-height:var(--wv-max);aspect-ratio:auto;box-shadow:0 0 70px -12px rgba(var(--glow),.5);border:1px solid rgba(255,255,255,.08)}
@media (max-width:820px){
  #app.cinema-mode .chat{display:flex;flex-direction:column}
  #app.cinema-mode .chat>#watchPanel{height:auto;flex:none;border-right:0;border-bottom:1px solid rgba(var(--glow),.24)}
  #app.cinema-mode.cinema-chat-closed .chat>#watchPanel{flex:1;height:100%}
  #app.cinema-mode .chat>.messages{flex:1}
  #watchStage.cinema{--wv-max:52vh}
  /* chat open: the panel sizes to its content, so the stage needs its own height (it collapsed to 2 px) */
  #app.cinema-mode:not(.cinema-chat-closed) #watchStage.cinema{--wv-max:min(40vh,52vw);flex:none;aspect-ratio:var(--wv-ar,16/9);width:min(100%,calc(var(--wv-max) * var(--wv-ar,16/9)))}
  #app.cinema-mode:not(.cinema-chat-closed) #watchPanel.cinema .watch-body{flex:none;padding:6px 10px 8px}
  /* the header buttons wrap onto their own row so the title, status and viewers keep their room */
  #watchPanel.cinema .watch-head{flex-wrap:wrap;row-gap:6px}
  #watchPanel.cinema .watch-title{flex:1 1 calc(100% - 120px)}
  #watchPanel.cinema .watch-head>.pill,#watchPanel.cinema .watch-head>.icon-btn{flex:none}
  #app.cinema-mode.cinema-chat-closed #watchStage.cinema{--wv-max:calc(100vh - 130px)}
}

/* Name That Track Audio Trivia & Crew Custom Trivia */
.tq-audio-wrap{margin:0 0 12px}
.tq-audio-wrap[hidden]{display:none}
.tq-clip-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 16px;border-radius:14px;background:linear-gradient(135deg,rgba(var(--glow),.32),rgba(34,211,238,.18));border:1px solid rgba(34,211,238,.45);color:#fff;font-weight:700;font-size:14.5px;transition:transform .14s,border-color .15s,box-shadow .2s,background .2s}
.tq-clip-btn:hover{border-color:var(--cyan);transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(34,211,238,.6)}
.tq-clip-btn.playing{border-color:var(--gold);background:linear-gradient(135deg,rgba(251,191,36,.28),rgba(244,114,182,.22));box-shadow:0 0 24px -6px rgba(251,191,36,.65)}
.tq-clip-icon{font-size:17px;line-height:1}
.tq-clip-eq{display:none;align-items:flex-end;gap:3px;height:14px}
.tq-clip-btn.playing .tq-clip-eq{display:inline-flex}
.tq-clip-eq i{width:3px;height:4px;border-radius:2px;background:var(--gold);animation:eq .75s ease-in-out infinite alternate}
.tq-clip-eq i:nth-child(2){animation-duration:.55s}
.tq-clip-eq i:nth-child(3){animation-duration:.95s}
.custom-trivia-list-wrap{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.custom-trivia-list-wrap[hidden]{display:none}
.custom-trivia-item .ct-del{width:28px;height:28px;border-radius:8px;font-size:12px;flex:none;opacity:.7}
.custom-trivia-item .ct-del:hover{opacity:1;color:var(--red)}
/* crew question bank: badge sized to its text, the question takes the rest; sets; edit state */
.custom-trivia-item>.ct-badge{flex:none;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.35);color:var(--a3);white-space:nowrap}
.custom-trivia-item>.ct-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;white-space:normal;overflow:visible}
.custom-trivia-item .ct-q{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;flex:none;font-size:13.5px;font-weight:600;line-height:1.3}
.custom-trivia-item .ct-meta{color:var(--muted);font-size:11.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.custom-trivia-item .ct-edit{width:28px;height:28px;border-radius:8px;font-size:12px;flex:none;opacity:.75}
.custom-trivia-item .ct-edit:hover{opacity:1}
.custom-trivia-item.editing{background:rgba(34,211,238,.14);box-shadow:inset 0 0 0 1px rgba(34,211,238,.5)}
.custom-trivia-list-wrap .side-h{justify-content:flex-start}
.ct-set-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ct-set-chips[hidden]{display:none}
.ct-set-chips .chip{font-size:12px;padding:4px 10px}
.ct-cancel-edit{display:block;margin:10px auto 0}
.ct-cancel-edit[hidden]{display:none}
.ct-status{min-height:0;margin:8px 0 0;font-size:13px;color:#86efac;text-align:center}
.ct-status:empty{display:none}
.modal-card.ct-editing #saveCustomTriviaBtn{background:linear-gradient(135deg,#0ea5e9,#22d3ee)}
.trivia-sets{display:grid;gap:8px;margin:-2px 0 0 26px}
.trivia-sets[hidden]{display:none}
.trivia-topic.trivia-set{padding:10px 14px}
.trivia-topic.trivia-set b{font-size:13px}

/* Vibe Out on phones: the song gets its own line and the buttons a full, evenly spread row below it.
   (On one row, seven buttons left no room for the title, which then spilled under ▶ and ■.) */
@media (max-width:640px){
  .vibe-bottom{flex-wrap:wrap;row-gap:10px}
  .vibe-now{flex:1 1 100%}
  .vibe-now > div{min-width:0;flex:1}
  .vibe-now b,.vibe-now small{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vibe-btns{flex:1 1 100%;justify-content:space-between}
  .vibe-btns button,.vibe-btns #vibeMusic{width:44px;height:44px}
  .vibe-btns #vibeCrateBtn,.vibe-btns #vibeChaptersBtn{min-width:44px;justify-content:center}
  .vibe{--cloud-b:calc(122px + env(safe-area-inset-bottom))}
  .vibe-reacts{left:50%;right:auto;bottom:calc(var(--cloud-b) + 58px);max-height:none;max-width:calc(100vw - 24px);flex-direction:row;flex-wrap:nowrap;gap:2px;padding:4px 6px;border-radius:999px;transform:translate(-50%,8px)}
  .vibe.awake.playing:not(.picking) .vibe-reacts{transform:translate(-50%,0)}
  .vibe-reacts button{width:34px;height:34px;font-size:17px}
  .vibe-reacts button[data-emoji="🎶🗑️"]{font-size:12.5px}
}
@media (max-width:360px){
  .vibe-btns{gap:4px}
  .vibe-btns button,.vibe-btns #vibeMusic{width:36px;height:36px;font-size:15px}
  .vibe-btns #vibeCrateBtn,.vibe-btns #vibeChaptersBtn{min-width:36px}
  .vibe-btns #vibeCrateBtn,.vibe-btns #vibeChaptersBtn{padding:0 6px}
  .vibe-reacts button{width:30px;height:30px;font-size:15px}
}