/* DUNGEONS (dungeons.ts / dungeonCaixaTela.ts): o progresso da caixa no cartão e a abertura da caixa. */

/* ── no cartão da caçada ─────────────────────────────────────────── */
.hp-dg { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; }
.hp-dg-barra { flex: 1; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; min-width: 60px; }
.hp-dg-barra i { display: block; height: 100%; background: linear-gradient(90deg, #8b5cf6, #f5c542); border-radius: 4px; }
.hp-dg small { opacity: .8; white-space: nowrap; }
.hp-dg-abrir { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; border: 1px solid rgba(245, 197, 66, .7); background: linear-gradient(180deg, rgba(245, 197, 66, .25), rgba(139, 92, 246, .25)); color: #ffe7a3; font-weight: 700; font-size: 11px; cursor: pointer; animation: dg-pulsa 1.6s ease-in-out infinite; }
.hp-dg-abrir img { width: 20px; height: 20px; image-rendering: pixelated; }
@keyframes dg-pulsa { 50% { box-shadow: 0 0 12px rgba(245, 197, 66, .6); } }

/* ── a abertura ──────────────────────────────────────────────────── */
.dc-fundo { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px;
  background: radial-gradient(circle at 50% 42%, rgba(70, 40, 140, .55), rgba(5, 4, 12, .92) 65%); opacity: 0; transition: opacity .25s; }
.dc-fundo.on { opacity: 1; }
.dc-titulo { color: #e9ddff; font-weight: 800; letter-spacing: .04em; text-shadow: 0 2px 8px #000; font-size: 15px; text-align: center; }
.dc-caixa { position: relative; width: 192px; height: 192px; display: grid; place-items: center; }
.dc-img { width: 192px; height: 192px; image-rendering: pixelated; position: relative; z-index: 2; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); }
.dc-aura { position: absolute; inset: 18px; border-radius: 50%; background: radial-gradient(circle, rgba(190, 140, 255, .55), transparent 70%); filter: blur(6px); opacity: .5; }
.dc-caixa.treme .dc-img { animation: dc-treme .12s linear infinite; }
.dc-caixa.treme .dc-aura { animation: dc-cresce 1.3s ease-in forwards; }
@keyframes dc-treme { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-3px, 1px) rotate(-3deg); } 50% { transform: translate(2px, -2px) rotate(2deg); } 75% { transform: translate(-1px, 2px) rotate(-1deg); } 100% { transform: translate(0, 0) rotate(0); } }
@keyframes dc-cresce { to { opacity: 1; transform: scale(1.5); } }
.dc-caixa.explode .dc-img { animation: dc-pula .45s cubic-bezier(.2, 1.6, .4, 1); }
.dc-caixa.explode .dc-aura { opacity: 1; transform: scale(1.8); background: radial-gradient(circle, rgba(255, 220, 120, .7), transparent 70%); transition: transform .4s, opacity .4s; }
@keyframes dc-pula { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.dc-clarao { position: fixed; inset: 0; background: #fff; z-index: 9001; pointer-events: none; animation: dc-clarao .38s ease-out forwards; }
@keyframes dc-clarao { 0% { opacity: .95; } 100% { opacity: 0; } }
.dc-faisca { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 2px; z-index: 3; background: #ffd75e; box-shadow: 0 0 8px #ffb800;
  animation: dc-voa var(--t) cubic-bezier(.1, .8, .3, 1) forwards; }
.dc-faisca:nth-child(3n) { background: #c69bff; box-shadow: 0 0 8px #8b5cf6; }
.dc-faisca.arco { background: hsl(calc(var(--a) * 1), 95%, 65%); box-shadow: 0 0 10px hsl(calc(var(--a) * 1), 95%, 60%); }
@keyframes dc-voa { 0% { transform: rotate(var(--a)) translateX(0) scale(1.4); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(var(--d)) scale(.3); opacity: 0; } }
.dc-premios { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 560px; min-height: 120px; }
.dc-premio { width: 150px; padding: 12px 10px; border-radius: 14px; text-align: center; color: #fff; background: linear-gradient(180deg, rgba(60, 40, 110, .9), rgba(20, 16, 36, .95));
  border: 1px solid rgba(190, 150, 255, .45); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); transform: translateY(24px) scale(.6); opacity: 0; transition: transform .35s cubic-bezier(.2, 1.5, .4, 1), opacity .25s; }
.dc-premio.on { transform: none; opacity: 1; }
.dc-premio .dc-ic { height: 64px; display: grid; place-items: center; }
.dc-premio .dc-ic img, .dc-premio .dc-ic canvas { max-width: 64px; max-height: 64px; image-rendering: pixelated; }
.dc-emoji { font-size: 40px; }
.dc-premio b { display: block; margin-top: 6px; font-size: 13px; }
.dc-qtd { display: block; margin-top: 2px; color: #ffe39a; font-weight: 800; }
.dc-premio.dc-shiny { width: 190px; border-color: #ffd75e; background: linear-gradient(160deg, rgba(120, 80, 10, .95), rgba(60, 20, 90, .95)); box-shadow: 0 0 26px rgba(255, 215, 94, .6); }
.dc-premio.dc-shiny .dc-ic { height: 96px; }
.dc-premio.dc-shiny .dc-ic img, .dc-premio.dc-shiny .dc-ic canvas { max-width: 96px; max-height: 96px; }
.dc-fundo.shiny .dc-titulo::after { content: ' ✨'; }
.dc-botoes { display: flex; gap: 10px; opacity: 0; transition: opacity .3s; }
.dc-fundo.pronto .dc-botoes { opacity: 1; }
.dc-botoes button { min-width: 120px; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
@media (max-width: 480px) {
  .dc-caixa, .dc-img { width: 150px; height: 150px; }
  .dc-premio { width: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-caixa.treme .dc-img, .hp-dg-abrir { animation: none; }
}
/* O nome inteiro ("Dungeon do Fogo") quebra a linha em vez de virar "Dunge…". */
.hp-card.dungeon .hp-info b { white-space: normal; overflow: visible; line-height: 1.15; }
.hp-card.dungeon .hp-info .hp-mix { font-weight: 400; }