/* A Web — plus.css: titles (colour + glow + emoji), level card, level chip, voice-note spectrum, chat profile links. Load LAST. */

/* ===== title chips: always spaced from the name and from each other ===== */
.ttx{display:inline-flex;align-items:center;gap:5px;margin-inline-start:8px;padding:2px 9px;border-radius:99px;vertical-align:middle;white-space:nowrap;
 font:700 11px/1.5 Manrope,sans-serif;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 50%,transparent)}
.ttx i{font-style:normal}.tt-e{font-size:13px}
.tt-m{margin-inline-start:6px;color:var(--mut);font:700 11px Manrope,sans-serif;vertical-align:middle;cursor:help}
.ttx.lock{filter:grayscale(1);opacity:.55}
.pfbd .ttx,.lvr .ttx{margin:0}
.pfbd,.lvr{gap:8px}

/* glows */
.g-soft{box-shadow:0 0 10px -2px var(--c)}
.g-neon,.g-pulse{text-shadow:0 0 6px var(--c);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent),0 0 10px var(--c),0 0 22px -4px var(--c)}
.g-pulse{animation:ttp 2.2s ease-in-out infinite}
@keyframes ttp{50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 60%,transparent),0 0 18px var(--c),0 0 36px var(--c)}}
.g-rainbow{color:#fff;border:1.5px solid transparent;
 background:linear-gradient(#17102a,#17102a) padding-box,linear-gradient(90deg,#ff4fd8,#ffb703,#5dffb0,#5ee0ff,#a855f7,#ff4fd8) border-box;background-size:100% 100%,300% 100%;
 box-shadow:0 0 12px -2px #a855f7;animation:ttr 4s linear infinite}
@keyframes ttr{to{background-position:0 0,-300% 0}}
html.lite .g-pulse,html.lite .g-rainbow{animation:none}
@media(prefers-reduced-motion:reduce){.g-pulse,.g-rainbow{animation:none}}

/* ===== level chip in the header ===== */
#top .lvchip{flex:none;margin-inline-start:8px;padding:6px 11px;border-radius:99px;cursor:pointer;white-space:nowrap;color:var(--ink);
 font:800 12px Manrope,sans-serif;background:color-mix(in srgb,var(--c,#a855f7) 20%,transparent);border:1px solid color-mix(in srgb,var(--c,#a855f7) 65%,transparent)}
#top .lvchip:hover{background:color-mix(in srgb,var(--c,#a855f7) 34%,transparent)}
@media(max-width:520px){#top .lvchip{padding:5px 8px;font-size:11px;margin-inline-start:6px}}

/* ===== level card (account page + profile pop-up) ===== */
.lvc{display:grid;gap:10px;margin:12px 0 16px;padding:16px 18px;border-radius:18px;border:1px solid var(--line);
 background:linear-gradient(135deg,color-mix(in srgb,var(--c,#a855f7) 16%,transparent),transparent 70%)}
.lvt{display:flex;align-items:center;gap:14px}
.lvb{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;font:900 22px Outfit,sans-serif;
 background:linear-gradient(135deg,var(--c,#a855f7),#7b3cff);box-shadow:0 0 18px -2px var(--c,#a855f7)}
.lvt h4{margin:0;font:800 18px Outfit,sans-serif}.lvt small{color:var(--mut)}
.lvbar{height:13px;border-radius:99px;overflow:hidden;background:var(--soft);border:1px solid var(--line)}
.lvbar i{display:block;height:100%;width:var(--w);border-radius:99px;background:linear-gradient(90deg,#ff4fd8,#a855f7,#5ee0ff);box-shadow:0 0 12px #a855f7;transition:width .8s var(--ease,ease)}
html.lite .lvbar i{box-shadow:none;transition:none}
.lvm{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--mut)}
.lvr{display:flex;flex-wrap:wrap}
.lvw{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:13px}.lvw li{color:var(--mut)}.lvw b{color:var(--ink)}
.lvh2{color:var(--mut);line-height:1.5}
#lvA{margin:0 0 4px}

/* ===== voice-note spectrum (sits right under the player, inside the bubble) ===== */
canvas.vz{display:none;width:100%;height:50px;margin-top:8px;border-radius:12px;background:rgba(10,4,24,.6);border:1px solid rgba(168,85,247,.35)}
canvas.vz.on{display:block}
.m.me canvas.vz{background:rgba(0,0,0,.35)}

/* ===== chat: profile affordances ===== */
.vpl{cursor:pointer}
.cx .cwin .chd .vpb{flex:none}
.cx .rooms .rlist .rr>button.pn.vw{padding:5px 8px!important;opacity:1;font-size:13px!important}
.mr>.av.vpl:hover{filter:brightness(1.15)}