.bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
#embers{position:fixed;inset:0;z-index:-1;pointer-events:none}
#ytm{position:fixed;left:0;bottom:0;width:1px;height:1px;border:0;opacity:0;pointer-events:none}
.controls{align-items:center}
.title{animation:shine 5s linear infinite,gl 6s infinite}
@keyframes gl{0%,92%,100%{transform:none}93%{transform:translate(-5px,1px) skewX(6deg);filter:drop-shadow(5px 0 #0ff) drop-shadow(-5px 0 var(--red))}96%{transform:translate(5px,-1px);filter:drop-shadow(-5px 0 #0ff) drop-shadow(5px 0 var(--red))}}
.nc,.nc *{cursor:none!important}
#cur{position:fixed;top:0;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid var(--red-2);border-radius:50%;pointer-events:none;z-index:999;opacity:0;box-shadow:0 0 14px var(--red)}
.muted{color:var(--muted)} a.muted{display:block;margin-top:6px;text-decoration:none}
.big{font-family:"Orbitron",sans-serif;font-size:2.2rem;color:var(--red-2)}
.row{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.row b{color:var(--red-2)}
.row .btn{margin-left:auto;padding:8px 18px}
#arena{position:relative;height:300px;border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.35);overflow:hidden}
.t{position:absolute;width:44px;height:44px;border-radius:50%;border:0;background:radial-gradient(circle,#fff 0 12%,var(--red) 14% 40%,#fff 42% 55%,var(--red) 57%);box-shadow:0 0 18px var(--red);animation:pop .15s}
@keyframes pop{from{transform:scale(.3)}}
.edpi{margin:-6px 0 14px;color:var(--muted)} .edpi b{color:var(--red-2)}
.copy{margin-top:16px;width:100%}
#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,90px);padding:12px 22px;border-radius:10px;background:var(--red);color:#fff;font-weight:700;z-index:200;transition:transform .4s}
#toast.show{transform:translate(-50%,0)}
html.ee{filter:hue-rotate(140deg) saturate(1.4)}
.sub{color:var(--muted);margin:-8px 0 18px;font-size:1.05rem}
.desc{color:var(--muted);font-size:1rem;line-height:1.4;margin:-6px 0 14px}
.warn{color:#ffb020;font-size:1rem;line-height:1.4}
#apistat{font-weight:700;margin-left:8px;color:var(--text)}
.about p{line-height:1.6;font-size:1.15rem}
.about p+p{margin-top:10px;color:var(--muted)}
.thumb{width:100%;border-radius:10px;margin-top:10px;border:1px solid var(--border)}
.thumb[hidden]{display:none}
.dc-top{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.dc-av{position:relative;width:56px;height:56px;flex:none;border-radius:50%;background:var(--card)}
.dc-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--border)}
.dc-av img[hidden]{display:none}
#dc-dot{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;background:#6b7280;border:3px solid var(--solid)}
#dc-dot.online{background:#23a55a}
#dc-dot.idle{background:#f0b232}
#dc-dot.dnd{background:#f23f43}
.dc-top b{font-size:1.25rem}
.act{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin-top:8px;border:1px solid var(--border);border-radius:10px}
.act i{font-style:normal;font-size:1.3rem}
.act b{display:block}
.act small{display:block;color:var(--muted)}
/* ---- controle de volume (aparece ao passar o mouse no botão de som) ---- */
.snd{display:flex;align-items:center}
.volbox{display:flex;align-items:center;gap:10px;height:46px;max-width:0;opacity:0;overflow:hidden;padding:0;margin:0;border-radius:23px;border:1px solid transparent;background:var(--card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:max-width .3s ease,opacity .2s,padding .3s,margin .3s,border-color .3s}
.snd:hover .volbox,.snd:focus-within .volbox{max-width:190px;opacity:1;padding:0 14px;margin-right:10px;border-color:var(--border)}
#vol{-webkit-appearance:none;appearance:none;width:100px;height:6px;border-radius:99px;outline:0;cursor:pointer;background:linear-gradient(90deg,var(--red-2) var(--p,35%),rgba(255,255,255,.25) var(--p,35%))}
:root[data-theme="light"] #vol{background:linear-gradient(90deg,var(--red) var(--p,35%),rgba(0,0,0,.22) var(--p,35%))}
#vol::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--red);box-shadow:0 0 10px var(--red)}
#vol::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--red);box-shadow:0 0 10px var(--red)}
#vol::-moz-range-track{background:transparent}
#volv{min-width:2.4ch;text-align:right;font-weight:700;font-size:.95rem;color:var(--text)}
.snd.off #vol,.snd.off #volv{opacity:.5}
/* ---- se o vídeo de fundo falhar, sobra um fundo escuro com brilho ---- */
.no-video .bg video{display:none}
.no-video .bg{background:radial-gradient(circle at 30% 20%,#3a0000,#000 70%)}
/* ---- versículos que trocam sozinhos (todos empilhados: a caixa não muda de altura) ---- */
#vs{display:grid}
.vs{grid-area:1/1;opacity:0;transition:opacity .7s;pointer-events:none}
.vs.on{opacity:1;pointer-events:auto}
/* ---- música tocando agora ---- */
.np{position:fixed;left:16px;bottom:16px;z-index:50;display:flex;align-items:center;gap:10px;max-width:min(360px,calc(100vw - 32px));padding:9px 16px;border-radius:23px;border:1px solid var(--border);background:var(--card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-weight:600;font-size:.95rem;transition:opacity .3s}
.np[hidden]{display:none}
.np.off{opacity:.6}
.np-t{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap}
.np-t span{display:inline-block}
.np-t span.scroll{animation:npm var(--d,10s) ease-in-out infinite alternate}
@keyframes npm{0%,15%{transform:translateX(0)}85%,100%{transform:translateX(var(--shift,0))}}
.eq{display:inline-flex;align-items:flex-end;gap:3px;height:16px;flex:none}
.eq b{display:block;width:3px;height:100%;border-radius:2px;background:var(--red-2);transform-origin:bottom;animation:eq 1s ease-in-out infinite}
.eq b:nth-child(2){animation-delay:-.4s}
.eq b:nth-child(3){animation-delay:-.75s}
.np.off .eq b{animation-play-state:paused}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}