/* Tela de carregamento (2026-10-21, pedido do dono do jogo): aparece toda vez que o jogo abre ou atualiza, enquanto carrega os dados, as imagens e
   a conexão com o servidor. Arte A (fogo e gelo, a mesma do login), vetorial e responsiva: preenche a tela sem deformar (slice). src/ui/boot.js */
.boot { position: fixed; inset: 0; z-index: 99999; background: var(--c-panel); color: var(--c-ink-light); overflow: hidden; transition: opacity .45s ease; font-family: Rubik, system-ui, sans-serif; }
.boot.out { opacity: 0; pointer-events: none; }
.boot-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.boot-box { position: absolute; left: 50%; bottom: max(6vh, 28px); transform: translateX(-50%); width: min(88vw, 440px); display: grid; justify-items: center; gap: 10px; text-align: center; }
.boot-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.boot-logo svg { width: clamp(34px, 9vw, 54px); height: auto; flex: none; }
.boot-logo b { font-family: "Russo One", Rubik, system-ui, sans-serif; font-weight: 400; font-size: clamp(30px, 9vw, 52px); line-height: 1; color: var(--c-ink-light); text-shadow: 0 3px 0 var(--c-panel), 0 0 14px var(--c-panel); }
.boot-logo small { align-self: flex-end; font-weight: 500; font-size: clamp(13px, 3.4vw, 18px); letter-spacing: .4em; color: var(--c-shiny); text-shadow: 0 1px 0 var(--c-panel); padding-bottom: 4px; }
.boot-bar { width: 100%; height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--c-panel) 80%, transparent); border: 2px solid color-mix(in srgb, var(--c-ink-light) 33.3%, transparent); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--type-fire), var(--c-shiny) 55%, var(--x-2c6cff)); transition: width .2s ease-out; }
.boot-pct { font-weight: 500; font-size: clamp(18px, 5vw, 24px); text-shadow: 0 2px 0 var(--c-panel), 0 0 10px var(--c-panel); }
.boot-txt { min-height: 1.3em; font-size: clamp(12px, 3.2vw, 14px); color: var(--rar-comum); text-shadow: 0 1px 0 var(--c-panel), 0 0 8px var(--c-panel); }
.boot-err { padding: 8px 14px; border-radius: 10px; background: color-mix(in srgb, var(--c-panel) 90.2%, transparent); border: 1px solid var(--rar-mitico); color: var(--c-text); font-size: 14px; }
.boot-err button { margin-left: 8px; font: inherit; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--c-shiny); background: var(--c-shiny); color: var(--c-panel-2); cursor: pointer; }
.boot-ball { animation: boot-float 2.6s ease-in-out infinite; }
@keyframes boot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-height: 460px) { .boot-box { bottom: 10px; gap: 6px; } .boot-logo { margin-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .boot-ball { animation: none; } .boot, .boot-bar i { transition: none; } }
/* arte em pé (celular): troca a arte larga por uma própria para retrato, com a bola inteira à vista */
.boot-port { display: none; }
@media (max-aspect-ratio: 1/1) { .boot-land { display: none; } .boot-port { display: block; } }