/* Modo streamer (Leo, 06/10/2026). Botão com o ícone da Twitch, só na tela de combate; quando ligado, brilho rosa no botão e uma névoa rosa suave nas bordas da tela. */
.srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#streamer{display:none}
body[data-screen=game] #streamer:not([hidden]){display:inline-flex;align-items:center;justify-content:center}
.streamerBtn{width:46px;height:46px;padding:0;border-radius:12px;border:1px solid #ffffff2a;background:#ffffff0d;color:#c9b3f2;opacity:.62;cursor:pointer;transition:opacity .2s,color .2s,box-shadow .25s,background .25s,transform .15s}
.streamerBtn svg{width:26px;height:26px}
.streamerBtn:hover,.streamerBtn:focus-visible{opacity:1;color:#fff;transform:translateY(-1px)}
.streamerBtn:focus-visible{outline:2px solid #ff7ac3;outline-offset:2px}
.streamerBtn.on{opacity:1;color:#fff;background:linear-gradient(180deg,#ff5fae,#c4287f);border-color:#ffb3dc;box-shadow:0 0 0 1px #ff7ac3aa,0 0 20px #ff4fa3cc;animation:strBtnGlow 2.6s ease-in-out infinite}
@keyframes strBtnGlow{0%,100%{box-shadow:0 0 0 1px #ff7ac3aa,0 0 16px #ff4fa3aa}50%{box-shadow:0 0 0 1px #ffb3dc,0 0 30px #ff4fa3}}
/* névoa rosa nas bordas: elemento próprio (NUNCA body::after: o arena.css usa body::before/::after como o cenário do combate e a regra anterior o jogava por cima de tudo) */
#streamMist{display:none;position:fixed;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 90px 10px #ff4fa338,inset 0 0 220px 30px #c4287f24;animation:strMist 4.2s ease-in-out infinite}
body.streamerOn[data-screen=game] #streamMist{display:block}
@keyframes strMist{0%,100%{opacity:.55}50%{opacity:1}}
/* faixa da mana: fixa no topo do modal, sem ocupar espaço no layout */
.streamHud{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;justify-content:center;max-width:min(94vw,640px);padding:8px 18px;border-radius:16px;border:1px solid #ff7ac3aa;background:linear-gradient(90deg,#3a0f2acc,#1d0a1ecc);box-shadow:0 0 26px #ff4fa344,0 8px 24px #000a;pointer-events:none}
.streamHud[hidden]{display:none}
.shMana{position:relative;display:flex;align-items:baseline;gap:10px}
.shMana small{font-size:13px;letter-spacing:.3em;color:#ffc2e2}
.shMana b{font:800 44px/1 Georgia,serif;color:#fff;text-shadow:0 0 18px #ff7ac3;min-width:1.2ch;text-align:center}
.shRing{position:absolute;right:-6px;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;border:2px solid #ff7ac3;opacity:0;pointer-events:none}
.shMana.hit .shRing{animation:strRing .55s ease-out}
.shMana.hit b{animation:strPop .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes strRing{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(2.1)}}
@keyframes strPop{0%{transform:scale(1.4)}100%{transform:scale(1)}}
.shFlags{display:flex;gap:8px}
.shFlag{padding:4px 12px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.14em;border:1px solid #ffffff22;color:#ffffff55;background:#ffffff0a;transition:background .2s,color .2s,box-shadow .2s}
.shFlag.hit{animation:strPop .32s cubic-bezier(.3,1.6,.5,1)}
.shFlag.fury.on{color:#2a1200;background:linear-gradient(180deg,#ffb27a,#ff6a2b);border-color:#ffd0a8;box-shadow:0 0 14px #ff6a2b99}
.shFlag.pact.on{color:#fff;background:linear-gradient(180deg,#c43a52,#7a1328);border-color:#ff8aa0;box-shadow:0 0 14px #c43a5299}
.shKeys{flex:1 1 100%;margin:0;text-align:center;font-size:12.5px;color:#ffc2e2;line-height:1.5}
.shKeys kbd{display:inline-block;min-width:1.5em;padding:0 5px;margin:0 1px;border-radius:5px;border:1px solid #ff7ac3aa;background:#2a0a1e;color:#fff;font:700 12px/1.5 system-ui,sans-serif;text-align:center}
/* aviso de comando: selo que aparece e some (sutil) */
.streamPing{position:fixed;left:50%;bottom:11%;z-index:31;transform:translate(-50%,10px) scale(.9);opacity:0;padding:8px 22px;border-radius:999px;border:1px solid #ff7ac3aa;background:#2a0a1ee6;color:#fff;font:800 20px/1.1 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 22px #ff4fa366;pointer-events:none;white-space:nowrap}
.streamPing.go{animation:strPing 1.05s ease-out forwards}
.streamPing.fury{border-color:#ffd0a8;box-shadow:0 0 24px #ff6a2bcc}
.streamPing.pact{border-color:#ff8aa0;box-shadow:0 0 24px #c43a52cc}
.streamPing.warn{border-color:#ffd36b;color:#ffe9a8;box-shadow:0 0 18px #ffd36b66}
@keyframes strPing{0%{opacity:0;transform:translate(-50%,12px) scale(.85)}18%{opacity:1;transform:translate(-50%,0) scale(1.06)}30%{transform:translate(-50%,0) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-8px) scale(1)}}
@media (max-height:700px){.shMana b{font-size:40px}.shKeys{display:none}.streamHud{padding:6px 14px}}
@media (prefers-reduced-motion:reduce){.streamerBtn.on,#streamMist{animation:none}.streamPing.go{animation:none;opacity:1;transform:translate(-50%,0)}}
.reduced .streamerBtn.on,.reduced #streamMist{animation:none}

/* Modo streamer: as caixas de Fúria e Pacto ficam escondidas (as teclas F e P continuam valendo); nada na tela mostra se foram usados */
body.streamerOn #pickDialog :is(#furyBox,#pactBox){display:none!important}