/* =====================================================================
   ORBO v5.3: avisos de poder (começo / acabando / fim) e chips com segundos.
   ===================================================================== */

.pw-call {
  position: absolute; left: 50%; top: calc(162px + var(--sat)); z-index: 6; display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px; border-radius: 999px; --c: #ffffff; white-space: nowrap; pointer-events: none;
  background: rgba(4,6,14,0.8); box-shadow: inset 0 0 0 2px var(--c), 0 10px 30px rgba(0,0,0,0.45);
  opacity: 0; transform: translate(-50%, -8px) scale(0.9); transition: opacity 0.2s, transform 0.28s cubic-bezier(0.2,0.9,0.25,1.3);
}
.pw-call.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.pc-ic { position: relative; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #08131c; background: var(--c); box-shadow: 0 0 18px var(--c); }
.pc-ic .i { width: 23px; height: 23px; }
.pc-main { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.pc-main b { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--c); }
.pc-main small { font-size: 12px; font-weight: 700; color: var(--text); }
.pc-sec { display: none; width: 36px; height: 36px; margin-left: 2px; border-radius: 50%; align-items: center; justify-content: center; flex: none; font-family: var(--display); font-size: 21px; font-weight: 700; color: #08131c; background: #ffffff; }

/* acabando: fica na tela com a contagem e a borda pulsando */
.pw-call.ending .pc-sec { display: inline-flex; }
.pw-call.ending { animation: pc-alert 0.45s ease-in-out infinite alternate; }
.pw-call.ending .pc-main small { color: #ffffff; }
@keyframes pc-alert { from { box-shadow: inset 0 0 0 2px var(--c), 0 0 8px rgba(255,255,255,0.1); } to { box-shadow: inset 0 0 0 3px #ffffff, 0 0 34px var(--c); } }

/* acabou: cinza, ícone riscado */
.pw-call.end { box-shadow: inset 0 0 0 2px rgba(201,211,238,0.55), 0 10px 30px rgba(0,0,0,0.45); }
.pw-call.end .pc-ic { color: #c9d3ee; background: rgba(255,255,255,0.12); box-shadow: none; }
.pw-call.end .pc-ic::after { content: ''; position: absolute; left: 7px; right: 7px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: #ff6b7e; transform: rotate(-40deg); box-shadow: 0 0 0 2px rgba(4,6,14,0.8); }
.pw-call.end .pc-main b { color: #ffffff; }
.pw-call.end.warn .pc-main small { color: #ffcf4a; }

@media (max-height: 720px) { .pw-call { top: calc(146px + var(--sat)); } .pc-ic { width: 34px; height: 34px; } .pc-main b { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .pw-call.ending { animation: none; box-shadow: inset 0 0 0 3px #ffffff, 0 0 24px var(--c); } }

/* chips dos poderes: segundos restantes e pulso no fim */
.hud-power .hp-sec { min-width: 12px; font-family: var(--display); font-size: 12px; font-weight: 700; text-align: right; color: var(--c); }
.hud-power.ending { animation: hp-pulse 0.4s ease-in-out infinite alternate; }
.hud-power.ending .hp-sec { color: #ffffff; }
@keyframes hp-pulse { to { box-shadow: inset 0 0 0 2px #ffffff, 0 0 18px var(--c); } }

/* ---------- v5.3.1: nada no meio do topo (pontuação e fase ficam livres) ----------
   tempos dos poderes: círculos no canto esquerdo, abaixo das vidas
   aviso de começo / acabando / fim: lado esquerdo, abaixo dos círculos
   avisos da partida (poder escolhido etc.): canto direito, abaixo de controle e pausa */
.hud-powers { left: calc(12px + var(--sal)); right: auto; top: calc(86px + var(--sat)); transform: none; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 8px; max-width: none; }
@media (max-height: 720px) { .hud-powers { top: calc(78px + var(--sat)); } }
.hud-power {
  position: relative; width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; border-radius: 50%;
  background: rgba(255,255,255,0.14);
  background: conic-gradient(var(--c) calc(var(--p, 1) * 360deg), rgba(255,255,255,0.14) 0);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.hud-power::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: rgba(4,6,14,0.9); }
.hud-power .hp-ic { position: relative; }
.hud-power .hp-ic .i { width: 18px; height: 18px; }
.hud-power .hp-name, .hud-power .hp-bar { display: none; }
.hud-power .hp-sec { position: absolute; right: -7px; bottom: -5px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #08131c; background: var(--c); box-shadow: 0 0 0 2px rgba(4,6,14,0.95); }
.hud-power.ending .hp-sec { color: #08131c; background: #ffffff; }
.hud-power.ending { animation: hp-pulse2 0.4s ease-in-out infinite alternate; }
@keyframes hp-pulse2 { to { box-shadow: 0 0 0 2px #ffffff, 0 0 18px var(--c); } }

.pw-call { left: calc(12px + var(--sal)); top: calc(196px + var(--sat)); gap: 8px; padding: 5px 12px 5px 5px; max-width: calc(100% - 24px); transform: translateX(-14px) scale(0.96); transform-origin: left center; }
.pw-call.show { transform: none; }
.pc-ic { width: 32px; height: 32px; }
.pc-ic .i { width: 18px; height: 18px; }
.pc-main b { font-size: 13px; letter-spacing: 0.6px; }
.pc-main small { font-size: 11px; }
.pc-sec { width: 28px; height: 28px; font-size: 16px; }
.pw-call.end .pc-ic::after { left: 6px; right: 6px; }
@media (max-height: 720px) { .pw-call { top: calc(176px + var(--sat)); } .pc-ic { width: 30px; height: 30px; } .pc-main b { font-size: 12px; } }

#toast-host.ingame { left: auto; right: calc(12px + var(--sar)); top: calc(196px + var(--sat)); align-items: flex-end; max-width: 62%; }
@media (max-height: 720px) { #toast-host.ingame { top: calc(176px + var(--sat)); } }
/* aviso central (fase, direção) um pouco mais abaixo, longe dos cantos */
.hud-banner { top: 37%; }