/* =====================================================================
   BATALHA PARTY — Rodada 46: aviso de atualização na tela de carregamento (js/ui/update.js; docs/ROUND46-ATUALIZACOES.md).
   O painel fica DENTRO da .splash-layer, no lugar do "ARENA CENTRAL / barra / CARREGANDO..." (que o canvas esconde enquanto
   ele está na tela), com o mesmo jeito dos textos da splash: branco com contorno azul-escuro. Tamanhos em px do palco
   1280x720 × --sk (escala da splash, posta na camada por splash.js), então cabe no celular deitado.
   ===================================================================== */
.splash-layer .upd-panel {
  position: absolute; left: 50%; top: 60.5%; transform: translateX(-50%); z-index: 2; box-sizing: border-box;
  width: min(calc(620px * var(--sk, 1)), 94vw);
  padding: calc(13px * var(--sk, 1)) calc(22px * var(--sk, 1)) calc(11px * var(--sk, 1));
  display: flex; flex-direction: column; align-items: center; gap: calc(5px * var(--sk, 1));
  border-radius: calc(18px * var(--sk, 1)); background: rgba(8, 50, 82, 0.62);
  border: calc(3px * var(--sk, 1)) solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 calc(7px * var(--sk, 1)) 0 rgba(10, 40, 70, 0.32), 0 calc(14px * var(--sk, 1)) calc(30px * var(--sk, 1)) rgba(0, 30, 60, 0.35);
  color: #fff; text-align: center; font-weight: 900; line-height: 1.18; touch-action: manipulation;
  animation: updIn .28s cubic-bezier(.2, .9, .3, 1.2) both;
}
.splash-layer .upd-panel.req { border-color: #ffd23f; background: rgba(70, 30, 10, 0.62); }
.upd-panel .upd-title, .upd-panel .upd-q, .upd-panel .upd-ver, .upd-panel .upd-foot, .upd-panel .upd-notes {
  -webkit-text-stroke: calc(1.2px * var(--sk, 1)) #173b53; paint-order: stroke fill; text-shadow: 0 calc(2px * var(--sk, 1)) 0 #173b53;
}
.upd-panel .upd-title { font-size: calc(27px * var(--sk, 1)); letter-spacing: .5px; text-transform: uppercase; -webkit-text-stroke-width: calc(1.8px * var(--sk, 1)); }
.upd-panel.req .upd-title { color: #ffe066; }
.upd-panel .upd-ver { font-size: calc(15px * var(--sk, 1)); color: #bff2ff; }
.upd-panel .upd-notes {
  font-size: calc(14px * var(--sk, 1)); font-weight: 800; color: #f2fbff; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.upd-panel .upd-notes b { color: #ffe066; }
.upd-panel .upd-q { font-size: calc(20px * var(--sk, 1)); margin-top: calc(2px * var(--sk, 1)); }
.upd-panel .upd-btns { display: flex; gap: calc(16px * var(--sk, 1)); justify-content: center; margin: calc(4px * var(--sk, 1)) 0 calc(3px * var(--sk, 1)); }
.upd-panel .btn {
  height: calc(48px * var(--sk, 1)); min-width: calc(150px * var(--sk, 1)); padding: 0 calc(24px * var(--sk, 1));
  font-size: calc(22px * var(--sk, 1)); border-width: calc(3px * var(--sk, 1)); border-radius: calc(14px * var(--sk, 1));
  box-shadow: 0 calc(5px * var(--sk, 1)) 0 var(--ink, #1b1030), inset 0 calc(-6px * var(--sk, 1)) 0 rgba(0, 0, 0, .18), inset 0 calc(3px * var(--sk, 1)) 0 rgba(255, 255, 255, .45);
  text-transform: uppercase;
}
.upd-panel .btn:active { transform: translateY(calc(4px * var(--sk, 1))); box-shadow: 0 calc(1px * var(--sk, 1)) 0 var(--ink, #1b1030); }
.upd-panel .btn:focus-visible { outline: calc(3px * var(--sk, 1)) solid #fff; outline-offset: 2px; }
.upd-panel .upd-yes { animation: updPulse 1.5s ease-in-out .6s infinite; }
.upd-panel .upd-foot { font-size: calc(13.5px * var(--sk, 1)); color: #e6f7ff; max-width: 100%; }
.upd-panel .upd-foot.warn { color: #ffe08a; }
@keyframes updIn { from { opacity: 0; transform: translate(-50%, calc(14px * var(--sk, 1))) scale(.94); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes updPulse { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
@media (orientation: portrait) {
  .splash-layer .upd-panel { top: 57%; width: min(calc(620px * var(--sk, 1)), 92vw); }
}