/* SAIKAI CARD CHALLENGE — 0.3.2
   Mesa arcana desenhada apenas com CSS + SVG inline criado em game.js.
   Nenhum asset animado, nenhuma mudança de layout, nenhum bloqueio de cliques. */

.mystic-table {
  isolation: isolate;
  --mystic-ink: #e3c687;
  --mystic-glow: rgba(174, 205, 158, .13);
}
.truco-game-main .mystic-table {
  --mystic-ink: #e7b77d;
  --mystic-glow: rgba(203, 114, 84, .115);
}
.poker-table.mystic-table {
  --mystic-ink: #a9d9bd;
  --mystic-glow: rgba(75, 210, 171, .15);
}
.bj-table.mystic-table {
  --mystic-ink: #ead8ae;
  --mystic-glow: rgba(227, 210, 150, .11);
}

/* A camada é absoluta e não faz parte da geometria do tabuleiro. */
.mystic-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  border-radius: inherit;
}
.mystic-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 47%, var(--mystic-glow) 0%, transparent 54%),
    radial-gradient(ellipse at 13% 82%, rgba(183, 140, 80, .12), transparent 38%),
    radial-gradient(ellipse at 87% 19%, rgba(112, 198, 168, .12), transparent 43%);
  opacity: .72;
  animation: mysticLight 11s ease-in-out infinite alternate;
}
.mystic-glow {
  position: absolute;
  width: min(88%, 550px);
  aspect-ratio: 1;
  top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scaleY(.75);
  background: radial-gradient(circle,
      rgba(203, 177, 122, .105) 0 9%,
      rgba(187, 174, 115, .038) 32%,
      transparent 66%);
  box-shadow: 0 0 45px 5px rgba(180, 145, 83, .032);
  animation: mysticLight 10s ease-in-out infinite alternate-reverse;
}
.mystic-sigil {
  position: absolute;
  width: min(86%, 540px);
  height: auto;
  aspect-ratio: 1;
  left: 50%; top: 50%;
  color: var(--mystic-ink);
  opacity: .31;
  filter: drop-shadow(0 0 3px rgba(228, 198, 122, .26));
  transform: translate(-50%, -50%) scaleY(.76);
  transform-origin: center center;
  animation: mysticSigil 13s ease-in-out infinite alternate;
}
.mystic-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .30;
  background:
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(222, 189, 127, .023) 49px, transparent 50px),
    repeating-linear-gradient(0deg, transparent 0 48px, rgba(222, 189, 127, .023) 49px, transparent 50px);
  mask-image: radial-gradient(ellipse at center, #000, transparent 77%);
}
.mystic-star {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--mystic-ink);
  box-shadow: 0 0 7px 1px rgba(239, 211, 155, .45);
  opacity: 0;
  animation: mysticTwinkle 8s ease-in-out infinite;
}
.mystic-star-a { top: 27%; left: 19%; animation-delay: -1.1s; }
.mystic-star-b { top: 65%; left: 83%; animation-delay: -3.4s; }
.mystic-star-c { top: 76%; left: 28%; animation-delay: -5.7s; }
.mystic-star-d { top: 19%; left: 78%; animation-delay: -7.5s; }

/* Todo o conteúdo clicável continua acima do selo. */
.poker-table.mystic-table > :not(.mystic-stage),
.bj-table.mystic-table > :not(.mystic-stage) {
  position: relative;
  z-index: 1;
}
.truco-game-main .mystic-table > .board-interior { position: relative; z-index: 1; }

@keyframes mysticLight {
  from { opacity: .55; }
  to   { opacity: .9; }
}
@keyframes mysticSigil {
  from { opacity: .23; transform: translate(-50%, -50%) scaleY(.76) scale(.98); }
  to   { opacity: .36; transform: translate(-50%, -50%) scaleY(.76) scale(1.02); }
}
@keyframes mysticTwinkle {
  0%, 24%, 71%, 100% { opacity: 0; transform: scale(.6); }
  42%, 48% { opacity: .65; transform: scale(1); }
}
@media (max-width: 660px) {
  .mystic-sigil { width: min(108%, 430px); opacity: .23; }
  .mystic-glow { width: min(110%, 440px); }
  .mystic-stage::after { opacity: .19; }
}
@media (prefers-reduced-motion: reduce) {
  .mystic-stage::before,
  .mystic-glow,
  .mystic-sigil,
  .mystic-star { animation: none !important; }
  .mystic-sigil { opacity: .24; }
  .mystic-star { opacity: .15; }
}

/* Identidade mística própria do Pife, sem afetar posicionamento ou cliques. */
.pife-table.mystic-table{--mystic-ink:#9ad9ad;--mystic-glow:rgba(41,172,110,.15)}
.pife-table.mystic-table > :not(.mystic-stage){position:relative;z-index:1}
