/* ============================ OVOS ============================
 * Arte 32x32 no padrão das bolas (assets/ui/ovos, gerada por
 * tools/ovos/gera_ovos.py). Tudo aqui segue o mockup "Ovos":
 *
 *  - o ícone é sempre desenhado em escala inteira (32 ou 64 px, ou o
 *    arquivo mini de 16 px) — nada de 26 ou 56 px, que come pixels do
 *    contorno. Quando a caixa em volta é menor, a imagem transborda com
 *    margem negativa: o desenho do ovo só ocupa 17x23 dos 32x32.
 *  - a chocadeira encena o que o SERVIDOR já sorteou. A linha do tempo tem
 *    3,6 s e é a mesma para qualquer ovo e qualquer resultado; o shiny só
 *    ganha festa depois que o filhote aparece.
 *
 * Linha do tempo (porcentagens de 3,6 s, iguais às do mockup):
 *   0–11%  parado · 11–36% balança ←→←→ · 36–48% racha · 48–60% racha mais
 *   60%    estoura (+ flash 59–70%) · 64–74% filhote nasce · 66–72% ovo some
 *   72–78% brilhos do shiny · 74–80% faixa SHINY e nome · 80% pronto
 * O JS (Paineis.animarOvo) usa os mesmos instantes para o som e os botões.
 * ============================================================== */

/* ---------------- ícone ---------------- */
.ovo-ico { width:32px; height:32px; flex-shrink:0; image-rendering:pixelated; image-rendering:crisp-edges; }
.ovo-ico.ovo-26 { margin:-3px; }                        /* 32 px de verdade numa caixa de 26 */
.cal-item img.ovo-ico { width:32px; height:32px; margin:-3px; }
.ovo-ico.ovo-64 { width:64px; height:64px; }             /* cash shop: 2x, na caixa de 64 */
.ovo-ico.ovo-16 { width:16px; height:16px; vertical-align:-3px; }   /* arquivo ovo_<tipo>_16.png */

/* ---------------- chocadeira ---------------- */
.choc-fundo { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(2,8,11,.72); backdrop-filter:blur(2px);
  --choc-cor:#4fd8e8; --choc-luz:rgba(79,216,232,.14); }
/* a cor de cada ovo: a mesma da carta da roleta */
.choc-comum   { --choc-cor:#94a3b8; --choc-luz:rgba(148,163,184,.16); }
.choc-incomum { --choc-cor:#22c55e; --choc-luz:rgba(34,197,94,.14); }
.choc-raro    { --choc-cor:#3b82f6; --choc-luz:rgba(59,130,246,.16); }
.choc-epico   { --choc-cor:#a855f7; --choc-luz:rgba(168,85,247,.16); }

.choc-caixa { width:360px; max-width:100%; border-radius:16px; overflow:hidden; background:rgba(9,25,34,.96);
  border:1px solid #1f4356; box-shadow:0 24px 70px rgba(0,0,0,.72); color:#e6f2f6; }
.choc-epico .choc-caixa { border-color:#5b3a86; box-shadow:0 0 0 1px rgba(168,85,247,.25), 0 24px 70px rgba(0,0,0,.72); }

.choc-cab { display:flex; align-items:center; gap:10px; padding:12px 16px; background:rgba(7,19,25,.5);
  border-bottom:1px solid #1f4356; box-shadow:inset 0 1px 0 rgba(79,216,232,.2); }
.choc-cab .choc-ico { font-size:15px; color:var(--choc-cor); line-height:1; }
.choc-cab b { font-size:13.5px; letter-spacing:2.2px; text-transform:uppercase; }
.choc-cab .choc-esp { flex-grow:1; }
.choc-chip { font-size:9px; font-weight:800; letter-spacing:1px; padding:2px 7px; border-radius:999px; color:#061016;
  background:var(--choc-cor); }

/* o palco: igual à cena "Ao vivo" do mockup */
.choc-palco { position:relative; height:210px; margin:12px 12px 0; border-radius:10px; overflow:hidden;
  border:1px solid rgba(31,67,86,.7);
  background:radial-gradient(60% 55% at 50% 62%, var(--choc-luz), rgba(7,19,25,0) 70%), rgba(4,14,19,.8); }

.choc-ovo { position:absolute; left:50%; bottom:22px; width:128px; height:128px; margin-left:-64px;
  background-size:768px 128px; background-repeat:no-repeat; image-rendering:pixelated; image-rendering:crisp-edges;
  animation:choc-quadros 3.6s steps(1,end) forwards, choc-some 3.6s linear forwards; }
@keyframes choc-quadros {
  0%{background-position:0 0} 11%{background-position:-128px 0} 17%{background-position:-256px 0}
  23%{background-position:-128px 0} 29%{background-position:-256px 0} 36%{background-position:-384px 0}
  48%{background-position:-512px 0} 60%,100%{background-position:-640px 0}
}
@keyframes choc-some { 0%,66%{opacity:1} 72%,100%{opacity:0} }

.choc-flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none;
  animation:choc-flash 3.6s linear forwards; }
@keyframes choc-flash { 0%,59%{opacity:0} 62%{opacity:.55} 70%,100%{opacity:0} }

/* o filhote: sprite de corpo inteiro em escala inteira (o JS escolhe 4x,
   a mesma do ovo, ou menos se não couber) */
.choc-filhote { position:absolute; left:50%; bottom:24px; transform-origin:50% 100%; opacity:0;
  image-rendering:pixelated; image-rendering:crisp-edges;
  transform:translateX(-50%) translateY(10px) scale(.55);
  animation:choc-nasce 3.6s ease-out forwards; }
.choc-filhote.choc-retrato { border-radius:8px; }   /* sem sprite de corpo: o retrato 74x74, em 2x */
@keyframes choc-nasce {
  0%,64%{opacity:0; transform:translateX(-50%) translateY(10px) scale(.55)}
  74%{opacity:1; transform:translateX(-50%) translateY(0) scale(1.06)}
  80%,100%{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}
}

/* shiny: brilhos e a faixa, só DEPOIS que ele apareceu */
.choc-brilhos { position:absolute; inset:0; opacity:0; pointer-events:none; animation:choc-brilha 3.6s linear forwards; }
.choc-brilhos i { position:absolute; width:8px; height:8px; background:#fff4b0;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:choc-pisca 1s ease-in-out 2.8s infinite; }
.choc-brilhos i:nth-child(1){left:36%;top:30%} .choc-brilhos i:nth-child(2){left:62%;top:26%;animation-delay:3s}
.choc-brilhos i:nth-child(3){left:30%;top:58%;animation-delay:3.2s} .choc-brilhos i:nth-child(4){left:68%;top:54%;animation-delay:3.4s}
.choc-brilhos i:nth-child(5){left:50%;top:18%;animation-delay:3.6s}
@keyframes choc-brilha { 0%,72%{opacity:0} 78%,100%{opacity:1} }
@keyframes choc-pisca { 50%{opacity:.3} }

.choc-fita { position:absolute; left:0; right:0; top:12px; text-align:center; opacity:0; pointer-events:none;
  animation:choc-aparece 3.6s linear forwards; }
.choc-fita span { font-family:Oxanium, sans-serif; font-weight:800; letter-spacing:2px; font-size:12px; padding:3px 12px;
  border-radius:999px; color:#061016; background:linear-gradient(90deg,#fde68a,#fbbf24,#fde68a); }
@keyframes choc-aparece { 0%,74%{opacity:0} 80%,100%{opacity:1} }

/* rodapé do palco: o ovo à esquerda; o nome do filhote só depois que nasce */
.choc-rodape { position:absolute; left:10px; right:10px; bottom:6px; display:flex; justify-content:space-between;
  font-size:10px; color:#a6c0cd; }
.choc-rodape b { color:#e6f2f6; opacity:0; animation:choc-aparece 3.6s linear forwards; }

/* o resultado por escrito e os botões entram quando a cena termina (80%) */
.choc-res, .choc-acoes { opacity:0; transition:opacity .25s; }
.choc-pronto .choc-res, .choc-pronto .choc-acoes { opacity:1; }
.choc-res { margin:0; padding:10px 16px 0; text-align:center; font-size:11.5px; line-height:1.5; color:#a6c0cd; min-height:17px; }
.choc-res b { color:#e6f2f6; }
.choc-res .choc-novo { color:#34d399; }
.choc-res .choc-shiny { color:#fbbf24; font-weight:700; }
.choc-acoes { display:flex; gap:8px; justify-content:center; padding:12px 16px 16px; min-height:40px; }
.choc-acoes button { min-height:40px; padding:0 16px; }

/* quem pediu menos movimento vê o resultado parado, sem balanço nem flash */
@media (prefers-reduced-motion: reduce){
  .choc-ovo, .choc-flash { animation:none; opacity:0; }
  .choc-filhote { animation:none; opacity:1; transform:translateX(-50%); }
  .choc-brilhos, .choc-fita, .choc-rodape b { animation:none; opacity:1; }
  .choc-brilhos i { animation:none; }
  .choc-res, .choc-acoes { transition:none; }
}

/* telas estreitas: a caixa ocupa a largura, com a margem de 16 px */
@media (max-width:420px){
  .choc-caixa { width:100%; }
}