/* =====================================================================
   EFEITOS — revelação da invocação, moedas voando e botão de som
   ===================================================================== */

/* ---- botão de som ---- */
.som-btn { min-width: 38px; font-size: 16px; }
.som-btn.off { opacity: .6; }

/* ---- revelação das cartas ---- */
.revelacao { perspective: 1000px; overflow: hidden; padding: 16px 8px; margin: 0 -8px; }
.revelacao.uma { max-width: 170px; margin-left: auto; margin-right: auto; }
.vira { position: relative; --brilho: rgba(255, 244, 210, .9); cursor: pointer; }
.vira.r-E { --brilho: #b07cff; } .vira.r-L { --brilho: #ff9a2a; }
.vira.r-SR { --brilho: #ff4d6a; } .vira.r-SSR { --brilho: #ffd23c; }
.vira-in {
  position: relative; transform-style: preserve-3d;
  transform: rotateY(180deg);
  transition: transform .6s cubic-bezier(.25, 1.5, .5, 1);
}
.vira.aberta .vira-in { transform: none; }
.vira-frente, .vira-verso { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.vira-frente .hcard { margin: 0; }
.vira-verso {
  position: absolute; inset: 0; transform: rotateY(180deg);
  border-radius: var(--raio-g, 10px);
  border: 2px solid #c9a227;
  background:
    repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 220, 140, .08) 0 6deg, transparent 6deg 18deg),
    radial-gradient(circle at 50% 45%, #5a4316, #1a1206 72%);
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 0 0 4px rgba(255, 230, 160, .15);
}
.vira-selo { display: grid; place-items: center; width: 56%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(255, 220, 140, .55); box-shadow: 0 0 18px rgba(255, 210, 100, .35) inset;
  animation: pulsar 1.6s ease-in-out infinite; }
.vira-selo .ico, .vira-selo img { width: 60%; height: auto; filter: drop-shadow(0 0 6px rgba(255, 210, 100, .7)); }
@keyframes pulsar { 50% { transform: scale(1.06); box-shadow: 0 0 26px rgba(255, 210, 100, .6) inset; } }

/* SR/SSR: a carta treme e brilha antes de virar */
.vira.tremendo .vira-in { animation: tremer .09s linear infinite; }
.vira.tremendo .vira-verso { box-shadow: 0 0 22px 8px var(--brilho), inset 0 0 30px var(--brilho); border-color: var(--brilho); }
@keyframes tremer {
  0%, 100% { transform: rotateY(180deg) translate(0, 0); }
  25% { transform: rotateY(180deg) translate(-3px, 1px) rotate(-1deg); }
  75% { transform: rotateY(180deg) translate(3px, -1px) rotate(1deg); }
}
.vira.aberta .hcard { animation: pousar .6s ease-out; }
@keyframes pousar { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.vira.r-SR.aberta .hcard, .vira.r-SSR.aberta .hcard { box-shadow: 0 0 18px 2px var(--brilho); }

/* raios de luz girando atrás da carta rara */
.raios {
  position: absolute; left: 50%; top: 45%; width: 260%; aspect-ratio: 1; z-index: -1; pointer-events: none;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, var(--brilho) 0 7deg, transparent 7deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 62%); mask: radial-gradient(circle, #000 8%, transparent 62%);
  opacity: .55; animation: girar 7s linear infinite, raiosEntrar .7s ease-out;
}
@keyframes girar { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes raiosEntrar { from { opacity: 1; width: 40%; } }
.revelacao .vira { z-index: 0; }
.revelacao .vira.aberta.r-SR, .revelacao .vira.aberta.r-SSR { z-index: 1; }

/* clarão de tela inteira e tremor da janela */
.clarao { position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 210, 120, .5) 40%, transparent 75%);
  animation: clarao .85s ease-out forwards; }
.clarao.r-SR { background: radial-gradient(circle, rgba(255, 240, 245, .9), rgba(255, 77, 106, .45) 40%, transparent 75%); }
@keyframes clarao { from { opacity: 1; } to { opacity: 0; } }
.modal-box.tremor { animation: tremorJanela .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes tremorJanela {
  10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); }
  30%, 50%, 70% { transform: translate(-6px, 2px); } 40%, 60% { transform: translate(6px, -1px); }
}
.rev-acoes { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.rev-acoes .de-novo { min-width: 180px; }

/* ---- moedas voando até o contador ---- */
.moeda-voa { position: fixed; left: 0; top: 0; z-index: 300; width: 26px; height: 26px; pointer-events: none; margin: -13px 0 0 -13px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.moeda-voa img, .moeda-voa .ico, .moeda-voa i { width: 100%; height: 100%; display: block; }
.coin.ganhou { animation: ganhou .35s ease-out; }
@keyframes ganhou { 40% { transform: scale(1.18); filter: brightness(1.5); } }

@media (prefers-reduced-motion: reduce) {
  .vira-in { transition-duration: .01s; }
  .vira.tremendo .vira-in, .raios, .vira-selo, .modal-box.tremor { animation: none; }
}