:root{
  --bg:#0c0918; --ring:#2e2650; --text:#fff; --dim:rgba(255,255,255,.76); --faint:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.22); --accent:#a855f7; --accent-rgb:168,85,247; --spotify:#1ed760;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --vampyre:'Grenze Gotisch','UnifrakturCook',Georgia,serif; /* stand-in for Discord's Vampyre font */
  --body:'Instrument Sans','gg sans','Noto Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--body);display:grid;place-items:center;padding:24px;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-shadow:0 1px 14px rgba(20,8,50,.35)}
canvas{position:fixed;inset:0;pointer-events:none}
#fx{z-index:0}
a,button{font:inherit;color:inherit}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:10px}

/* Video background (falls back to the orbs when no video is available) */
.bgvideo{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(1.1) brightness(.8)}
.bgyt{position:fixed;top:50%;left:50%;width:max(100vw,177.78vh);height:max(56.25vw,100vh);transform:translate(-50%,-50%);border:0;pointer-events:none;z-index:0;opacity:0;transition:opacity 1s}
html.has-video .bgyt{opacity:1}
.scrim{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s;background:radial-gradient(90% 70% at 50% 40%,rgba(12,9,24,.3),rgba(12,9,24,.68))}
html.has-video .scrim{opacity:1}
html.has-video .orbs{display:none}
html.has-video #fx{opacity:1}

/* Backdrop the glass refracts */
.orbs{position:fixed;inset:0;overflow:hidden;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.8;animation:drift 22s ease-in-out infinite alternate}
.o1{width:52vmax;height:52vmax;left:-14vmax;top:-18vmax;background:#7c3aed}
.o2{width:42vmax;height:42vmax;right:-10vmax;bottom:-14vmax;background:#ec4899;animation-duration:27s}
.o3{width:34vmax;height:34vmax;right:14vmax;top:-6vmax;background:#38bdf8;opacity:.5;animation-duration:31s}
.o4{width:30vmax;height:30vmax;left:8vmax;bottom:-12vmax;background:#6366f1;opacity:.6;animation-duration:25s}
@keyframes drift{to{transform:translate(7vmax,5vmax) scale(1.12)}}

/* Glass surface (blur only on the outer card + toast; inner panels stay cheap) */
.card,#toast{
  background:linear-gradient(140deg,rgba(255,255,255,.2),rgba(255,255,255,.08) 55%,rgba(255,255,255,.13));
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.1),0 24px 48px -24px rgba(10,4,32,.7)}
.dc,.player,.link{
  background:linear-gradient(140deg,rgba(255,255,255,.2),rgba(255,255,255,.09) 55%,rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.08)}
.card{position:relative}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 28%)}
.dc::before,.player::before,.link::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,30%) var(--my,0%),rgba(255,255,255,.2),transparent 60%)}
.dc,.player,.link{position:relative}

/* Enter gate */
#gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(12,9,24,.5);-webkit-backdrop-filter:blur(34px);backdrop-filter:blur(34px);border:0;cursor:pointer;transition:opacity .6s}
#gate.out{opacity:0;pointer-events:none}
#gate span{font-family:var(--display);font-weight:800;font-size:clamp(30px,7vw,56px);letter-spacing:-.02em}
#gate small{display:block;margin-top:10px;color:var(--dim);font-size:14px;text-align:center}

.card{z-index:1;width:100%;max-width:900px;border-radius:32px;padding:32px;display:grid;grid-template-columns:1.15fr 1fr;gap:32px;will-change:transform}
.col{display:flex;flex-direction:column;gap:20px;min-width:0}
.meta{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;color:var(--dim);font-size:13px;margin-bottom:-8px}
.meta i{margin-right:6px}

.who{display:flex;align-items:center;gap:20px}
.avatar{position:relative;width:88px;height:88px;flex:none}
.avatar>img.pic{width:100%;height:100%;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.12)}
.deco{position:absolute;left:50%;top:50%;width:120%;height:120%;max-width:none;transform:translate(-50%,-50%);pointer-events:none}
.deco[hidden]{display:none}
.dot{line-height:0}
h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,5vw,42px);letter-spacing:-.03em;line-height:1;display:flex;align-items:center;gap:10px}
h1 i{font-size:.55em}
.handle{color:var(--dim);font-size:14px;margin-top:8px}
.bio{color:var(--dim);line-height:1.6;font-size:15px;max-width:52ch}

.dc{border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:14px}
.dc-head{display:flex;align-items:center;gap:12px}
.dc-head .avatar{width:48px;height:48px}
.dc-names{min-width:0;flex:1}
.dc-name{font-weight:600;font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-name.vampyre{font-family:var(--vampyre);font-size:19px;font-weight:700;letter-spacing:.01em}
.dc-user{color:var(--faint);font-size:13px}
.clan{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.16);color:#fff;font-size:12px;font-weight:600;vertical-align:middle}
.clan[hidden]{display:none}.clan img{width:14px;height:14px}
.emoji{width:18px;height:18px;vertical-align:-4px}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badges:empty{display:none}
.badge{position:relative;width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:0}
.badge img{width:18px;height:18px;object-fit:contain}
.badge:hover,.badge:focus-visible{background:rgba(255,255,255,.24)}
.badge::after,.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);background:rgba(18,12,40,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:12px;font-weight:500;padding:6px 10px;border-radius:9px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;z-index:20;text-shadow:none}
.badge:hover::after,.badge:focus-visible::after,.tip:hover::after{opacity:1;transform:translate(-50%,0)}
.tip{position:relative}
.avatar>.dot{position:absolute;right:-4px;bottom:-4px;z-index:2}
.dot svg{display:block;width:20px;height:20px}

.act{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);padding-top:14px}
.act[hidden]{display:none}
.act img{width:52px;height:52px;border-radius:12px;object-fit:cover;flex:none;background:rgba(255,255,255,.12)}
.act-text{min-width:0;flex:1;font-size:13px;line-height:1.45}
.act-text b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-text span{display:block;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-kind{color:var(--faint);font-size:12px;margin-bottom:2px}
.act-kind.spotify{color:#6dffa4}
.bar{height:4px;border-radius:4px;background:rgba(255,255,255,.2);margin-top:8px;overflow:hidden}
.bar div{height:100%;width:0;background:#fff}
.bar[hidden]{display:none}
.idle-line{color:var(--dim);font-size:13px}

.player{border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:12px}
.p-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.p-top b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-top small{color:var(--dim);font-size:12px}
.p-top>div{min-width:0}
#play{position:relative;z-index:1;width:44px;height:44px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.65));color:#3b1d70;cursor:pointer;box-shadow:0 8px 20px -6px rgba(var(--accent-rgb),.7),inset 0 1px 0 #fff;text-shadow:none;transition:transform .15s,filter .15s}
#play:hover{filter:brightness(1.06)}#play:active{transform:scale(.92)}
.eq{display:flex;align-items:center;gap:3px;height:30px}
.eq i{flex:1;height:100%;border-radius:2px;background:#fff;opacity:.4;transform:scaleY(.15);transform-origin:center}
.playing .eq i{opacity:.95;animation:eq var(--d) ease-in-out infinite alternate}
@keyframes eq{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
.times{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
input[type=range]{position:relative;z-index:1;-webkit-appearance:none;appearance:none;width:100%;height:14px;background:transparent;--p:0%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#fff var(--p),rgba(255,255,255,.25) var(--p))}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.25)}
input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:#fff}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;margin-top:-4.5px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff}
.vol{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:12px}

.links{display:flex;flex-direction:column;gap:10px}
.link{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:18px;text-decoration:none;text-align:left;width:100%;transition:transform .2s,box-shadow .2s,border-color .2s}
.link>*{position:relative;z-index:1}
.link:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 18px 36px -16px rgba(var(--accent-rgb),.65)}
.link .ic{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;font-size:17px;flex:none}
.link .ic svg{width:18px;height:18px;fill:currentColor}
.link .tx{flex:1;min-width:0}
.link b{display:block;font-size:14px;font-weight:600}
.link small{display:block;color:var(--faint);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link .go{color:var(--faint);font-size:13px}
.foot{grid-column:1/-1;text-align:center;color:var(--faint);font-size:12px;border-top:1px solid var(--line);padding-top:18px}

#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);font-weight:600;font-size:14px;padding:10px 18px;border-radius:999px;opacity:0;transition:.25s;z-index:60;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* TV-static name */
.static{position:relative;display:inline-block;text-shadow:none;
  background:var(--noise,none) 0 0/64px 64px,repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),#fff;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:snow .4s steps(1) infinite}
@keyframes snow{0%{background-position:0 0,0 0,0 0}20%{background-position:-23px 11px,0 0,0 0}40%{background-position:17px -19px,0 0,0 0}60%{background-position:-9px 27px,0 0,0 0}80%{background-position:29px 5px,0 0,0 0}}
.static::before,.static::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;pointer-events:none;background:none;-webkit-text-fill-color:currentColor;mix-blend-mode:screen;clip-path:inset(0 0 100% 0)}
.static::before{color:#4ff;animation:glA 3.4s steps(1) infinite}
.static::after{color:#f4f;animation:glB 2.9s steps(1) infinite}
@keyframes glA{0%,86%,100%{clip-path:inset(0 0 100% 0)}87%{clip-path:inset(12% 0 58% 0);transform:translate(-4px,0)}90%{clip-path:inset(58% 0 15% 0);transform:translate(3px,0)}93%{clip-path:inset(30% 0 42% 0);transform:translate(-2px,0)}96%{clip-path:inset(0 0 100% 0)}}
@keyframes glB{0%,80%,100%{clip-path:inset(0 0 100% 0)}81%{clip-path:inset(40% 0 35% 0);transform:translate(4px,0)}84%{clip-path:inset(5% 0 70% 0);transform:translate(-3px,0)}88%{clip-path:inset(65% 0 10% 0);transform:translate(2px,0)}91%{clip-path:inset(0 0 100% 0)}}
.vbadge{display:inline-flex;line-height:0;flex:none}
.vbadge svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
#verified::after{font-family:'Antonio','Oswald','Arial Narrow',sans-serif;font-size:16px;font-weight:300;letter-spacing:.03em;text-transform:uppercase;-webkit-text-stroke:.3px #fff;background:#1c1432;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:7px 15px;color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 8px 20px rgba(0,0,0,.35)}
#verified:focus-visible::after{opacity:1;transform:translate(-50%,0)}

/* Custom cursor (transform-only for smoothness) */
html.cursor-on,html.cursor-on *{cursor:none!important}
#cRing,#cDot{position:fixed;left:0;top:0;pointer-events:none;z-index:100;border-radius:50%;opacity:0;transition:opacity .25s;will-change:transform;contain:layout paint style}
html.moved #cRing,html.moved #cDot{opacity:1}
#cRing{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid rgba(255,255,255,.9);background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(0,0,0,.18),0 4px 14px rgba(var(--accent-rgb),.35);transition:opacity .25s,background-color .2s}
#cRing.hov{background:rgba(255,255,255,.24)}
#cDot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff;box-shadow:0 0 8px rgba(var(--accent-rgb),.9)}

@media(max-width:780px){
  body{place-items:start center;padding:14px}
  .card{grid-template-columns:1fr;padding:22px;gap:22px;border-radius:26px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}