*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:linear-gradient(180deg,#f5f6fa,#d5d9e2);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body.transparent,body.transparent html{background:transparent}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
#hud{position:fixed;inset:0;pointer-events:none;font-size:clamp(11px,2.3vmin,22px)}
#title{position:absolute;left:3%;top:2%;width:50%;background:linear-gradient(90deg,#ff2d78,#ff5c93);color:#fff;border-radius:12px;padding:.6em .9em;display:flex;flex-direction:column;gap:.2em;box-shadow:0 .2em .8em rgba(255,45,120,.35)}
#title b{font-size:1.15em;letter-spacing:.05em}
#title span{font-size:.85em;opacity:.95}
#queue{position:absolute;right:3%;top:2%;width:42%;background:rgba(45,49,64,.88);color:#fff;border-radius:14px;padding:.7em .8em;display:flex;flex-direction:column;gap:.45em}
#queue .lbl{font-size:.75em;opacity:.6}
#queue .row{display:flex;align-items:center;gap:.55em;min-width:0}
#queue .row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#queue img{width:2.1em;height:2.1em;border-radius:50%;object-fit:cover;flex:none;background:#777}
#queue .cur{font-weight:700}
#queue .bar{height:.35em;border-radius:1em;background:rgba(255,255,255,.18);overflow:hidden}
#queue .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff2d78,#ffb44d)}
#queue .more{font-size:.8em;opacity:.7}
#top{position:absolute;left:3%;top:14%;width:50%;background:rgba(45,49,64,.88);color:#fff;border-radius:14px;padding:.6em .7em}
#top .lbl{font-size:.75em;opacity:.7;margin-bottom:.4em;text-align:center}
#top .g{display:flex;justify-content:space-around;gap:.4em}
#top .p{display:flex;flex-direction:column;align-items:center;gap:.25em;min-width:0;flex:1}
#top .p img{width:3em;height:3em;border-radius:50%;object-fit:cover;border:.2em solid var(--c);background:#777}
#top .p span{font-size:.7em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#thanks{position:absolute;left:0;right:0;top:34%;text-align:center;font-size:1.9em;font-weight:800;color:#e2323f;text-shadow:0 .08em 0 #fff,0 0 .5em #fff;opacity:0;transition:opacity .4s;padding:0 4%}
#thanks.on{opacity:1}
#stat{position:absolute;left:3%;bottom:2.5%;color:#3b4054;background:rgba(255,255,255,.7);border-radius:999px;padding:.35em .9em;font-size:.85em;font-weight:600}
#fs{position:fixed;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.35);color:#fff;font-size:20px;cursor:pointer;opacity:.25;transition:opacity .2s}
#fs:hover{opacity:1}
body.clean #fs{display:none}
