/* tela de carregamento (carregando.js): entrada no mundo, ida e volta da cacada. Painel no estilo do Huntera com a nossa
   cara: moldura fina dourada com cantos trabalhados (SVG), o dragao no brasao, titulo em versalete espacado, barra de
   fogo e ouro com brilho e a porcentagem embaixo; a fornalha do fogo.js no fundo */
.carga { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; background: #07060a; opacity: 0; transition: opacity .3s ease; }
.carga.on { opacity: 1; }
.carga.sai { opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.carga .fogo { position: absolute; inset: 0; width: 100%; height: 100%; }
/* o fogo fica atras, mais escuro: o olho vai para o painel */
.carga::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 50% 48%, rgba(6, 4, 8, .55), rgba(4, 3, 6, .2) 70%, rgba(0, 0, 0, .55)); }

.carga-painel {
  position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 540px; padding: 58px 36px 26px; text-align: center;
  /* pedra escura com textura fina (ruido em SVG) e o calor do brasao em cima */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .6 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 128, 40, .13), transparent 62%),
    linear-gradient(180deg, #19120f 0%, #0f0b0d 58%, #0a0809 100%);
  border: 1px solid #a07a3a;
  box-shadow:
    inset 0 0 0 4px #0b0809,
    inset 0 0 0 5px rgba(216, 166, 74, .36),
    inset 0 0 44px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(0, 0, 0, .85),
    0 26px 70px rgba(0, 0, 0, .78),
    0 0 50px rgba(255, 110, 30, .12);
  transform: translateY(8px) scale(.985); transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.carga.on .carga-painel { transform: none; }

/* cantos: o mesmo desenho virado; a quina do desenho (7, 7) cai na quina da borda */
.carga .cq { position: absolute; width: 54px; height: 54px; color: #d8a64a; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8)); }
.carga .cq svg { display: block; width: 100%; height: 100%; overflow: visible; }
.carga .cq-a { top: -8px; left: -8px; }
.carga .cq-b { top: -8px; right: -8px; transform: scaleX(-1); }
.carga .cq-c { bottom: -8px; left: -8px; transform: scaleY(-1); }
.carga .cq-d { bottom: -8px; right: -8px; transform: scale(-1, -1); }

/* brasao: o dragao num medalhao de ouro em cima da borda, com ramos dos dois lados */
.carga-brasao { position: absolute; left: 50%; top: -44px; width: 220px; height: 86px; margin-left: -110px; display: grid; place-items: center; pointer-events: none; }
.carga-ramos { position: absolute; inset: 0; width: 100%; height: 100%; color: #d8a64a; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .9)); }
.carga-medalha {
  position: relative; width: 80px; height: 80px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #4a1c0e, #160907 72%);
  box-shadow: 0 0 0 2px #0c0807, 0 0 0 3.5px #d1a14b, 0 0 0 5px #4b3313, 0 0 0 6.5px #f0cd7e, 0 0 0 7.5px #2a1c0b,
    0 8px 20px rgba(0, 0, 0, .85), 0 0 28px rgba(255, 120, 40, .4);
  animation: cargaBrasa 2.6s ease-in-out infinite;
}
.carga-medalha img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carga-medalha::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 14px rgba(0, 0, 0, .75), inset 0 -6px 14px rgba(255, 120, 40, .18); }
@keyframes cargaBrasa { 50% { box-shadow: 0 0 0 2px #0c0807, 0 0 0 3.5px #d1a14b, 0 0 0 5px #4b3313, 0 0 0 6.5px #f0cd7e, 0 0 0 7.5px #2a1c0b, 0 8px 20px rgba(0, 0, 0, .85), 0 0 40px rgba(255, 140, 50, .62); } }

.carga-t {
  margin: 0; color: #f2dba6; font: 600 21px/1.3 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, 'Times New Roman', serif;
  letter-spacing: .2em; text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance;
  text-shadow: 0 1px 0 #000, 0 2px 6px rgba(0, 0, 0, .9), 0 0 16px rgba(255, 150, 60, .3);
}
.carga-sub { margin-top: 4px; color: #c9a464; font: italic 15px/1.3 Georgia, 'Times New Roman', serif; letter-spacing: .05em; overflow-wrap: anywhere; }

/* barra larga e redonda: trilho fundo com aro de bronze, fogo do vermelho ao ouro, brilho em cima e um reflexo que corre */
.carga-bar {
  position: relative; height: 20px; margin: 20px 2px 0; border-radius: 999px; overflow: hidden;
  background: linear-gradient(180deg, #040304, #161110);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .95), 0 0 0 1px #6a4d22, 0 0 0 2px #0d0908, 0 0 0 3px rgba(231, 192, 113, .16);
}
.carga-bar i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; min-width: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, #7d1708 0%, #c63b14 30%, #ef7a24 62%, #ffc35e 86%, #ffe7a6 100%);
  box-shadow: inset 0 -3px 5px rgba(90, 10, 0, .45), 0 0 14px rgba(255, 120, 40, .55);
}
.carga-bar i::before { content: ''; position: absolute; left: 4px; right: 4px; top: 2px; height: 42%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .04)); }
.carga-bar i::after { content: ''; position: absolute; top: 0; bottom: 0; left: -70px; width: 70px; background: linear-gradient(90deg, transparent, rgba(255, 246, 214, .6), transparent); animation: cargaReflexo 1.7s linear infinite; }
@keyframes cargaReflexo { to { left: 100%; } }

.carga-pct {
  margin-top: 10px; color: #f7e3b2; font: 700 21px/1 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, 'Times New Roman', serif; letter-spacing: .06em;
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 1px 0 #000, 0 0 12px rgba(255, 160, 70, .45);
}
.carga-dica { margin-top: 10px; min-height: 1.35em; color: #a39684; font: 12px/1.35 Verdana, sans-serif; overflow-wrap: anywhere; }
/* joia no meio da borda de baixo */
.carga-joia { position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: linear-gradient(135deg, #fff0bd, #d8a64a 45%, #7a5420); box-shadow: 0 0 0 1.5px #1a120a, 0 0 12px rgba(255, 150, 60, .55); }

/* celular: o painel ocupa a largura (16 px de cada lado), tudo um pouco menor */
@media (max-width: 480px) {
  .carga-painel { padding: 50px 18px 20px; }
  .carga-brasao { transform: scale(.86); transform-origin: 50% 50%; }
  .carga-t { font-size: 17px; letter-spacing: .14em; }
  .carga-sub { font-size: 14px; }
  .carga-bar { height: 18px; margin-top: 16px; }
  .carga-pct { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .carga-medalha, .carga-bar i::after { animation: none; }
  .carga-painel { transition: none; transform: none; }
}