.elementor-1623 .elementor-element.elementor-element-9ce5f53{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1623 .elementor-element.elementor-element-9ce5f53:not(.elementor-motion-effects-element-type-background), .elementor-1623 .elementor-element.elementor-element-9ce5f53 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}/* Start custom CSS for html, class: .elementor-element-eab929f *//* --- Container --- */
.fortune-container {
  text-align: center;
  padding: 30px;
}

/* --- Fortune Button (Shockwave Supreme) --- */
.fortune-button {
  position: relative;
  overflow: hidden;

  padding: 14px 28px;
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(145deg, #1a1a1a, #000000, #1a1a1a);
  color: #ffe8a3;
  border: 1px solid #98e4a7;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1;
  perspective: 1000px;
  animation: lightningStrike 1.5s infinite linear, softPulse 4s infinite ease-in-out;
}

.fortune-button:hover {
  background: linear-gradient(145deg, #000000, #1a1a1a, #000000);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  color: #fff8dc;
  animation: ani 0.7s steps(22) forwards;
}

/* ฝุ่นทอง + ขาว (เต็มปุ่ม) */
.fortune-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: 
    radial-gradient(circle, rgba(255, 255, 255, 0.12) 2px, transparent 3px),
    radial-gradient(circle, rgba(255, 215, 0, 0.1) 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 2px);
  background-size: 8px 8px, 12px 12px, 20px 20px;
  background-repeat: repeat;
  background-position: center;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: dustSpin 30s linear infinite, dustPulse 8s ease-in-out infinite;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* ตอน Hover กระจายฝุ่นเร็วขึ้น */
.fortune-button:hover::after {
  animation: dustSpinFast 12s linear infinite, dustPulse 5s ease-in-out infinite;
  opacity: 0.6;
}

/* Flash ตอนกด */
.fortune-button.flash::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  opacity: 1;
  pointer-events: none;
  animation: flashBurst 0.6s ease-out forwards;
  z-index: 1;
}

/* หมุนละอองปกติ */
@keyframes dustSpin {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); }
}

/* หมุนละอองเร็วขึ้นตอน hover */
@keyframes dustSpinFast {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(720deg); }
}

/* พริ้วหายใจ */
@keyframes dustPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.25; }
}

/* Flash Burst ตอนกด */
@keyframes flashBurst {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  60% { transform: translate(-50%, -50%) scale(5); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(8); opacity: 0; }
}
/* --- Coin Area --- */
.coin-area {
  position: relative;
  height: 260px;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .animated-coin,
  .chosen-coin,
  .bouncy-coin {
    filter: contrast(140%) brightness(120%) drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
    image-rendering: crisp-edges; /* ✅ ชัดที่สุด */
    transform: translate(-50%, -50%) scale(1);
  }
}
/* --- Coin Animation --- */
.animated-coin {
  width: 90px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7) rotate(0deg);
  animation: coinBounceSpread 1.3s ease-out forwards;
  opacity: 0.9;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3)); /* ❌ เอา blur(1px) ออก */
}

.chosen-coin {
  width: 150px; /* ใหญ่ขึ้นจาก 120px */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  animation: chosenPop 0.7s ease-out forwards;
  opacity: 1;
  filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.7));
  z-index: 10;
}

.bouncy-coin {
  width: 90px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  animation: bounceAndSpread 1.4s ease-out forwards;
  opacity: 0.9;
  filter: blur(1px) drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
}
/* --- Animations --- */
@keyframes coinScatter {
  0% { transform: translate(-50%, -50%) scale(0.6) rotate(0deg); opacity: 0.6; }
  30% { transform: translate(-50%, -50%) scale(1.2) rotate(180deg); opacity: 0.9; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.75) rotate(720deg); opacity: 0.8; }
}

@keyframes chosenPop {
  0% { transform: translate(-50%, -50%) scale(0.7) rotate(0deg); }
  30% { transform: translate(-50%, -50%) scale(1.2) rotate(30deg); }
  60% { transform: translate(-50%, -50%) scale(0.95) rotate(-20deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

@keyframes coinBounceSpread {
  0% {
    transform: translate(-50%, -50%) scale(0.7) rotate(0deg);
    opacity: 0.5;
  }
  20% {
    transform: translate(-50%, -50%) scale(1.1) rotate(90deg);
    opacity: 0.8;
  }
  40% {
    transform: translate(calc(-50% + var(--x) * 0.7), calc(-50% + var(--y) * 0.7)) scale(0.8) rotate(180deg);
  }
  60% {
    transform: translate(calc(-50% + var(--x) * 1.1), calc(-50% + var(--y) * 1.1)) scale(1) rotate(270deg);
  }
  100% {
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.75) rotate(360deg);
    opacity: 1;
  }
}

/* --- Animation กระเด้ง + กระจาย --- */
@keyframes bounceAndSpread {
  0% {
    transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
  }
  20% {
    transform: translate(-50%, -60%) scale(1) rotate(60deg);
  }
  40% {
    transform: translate(-50%, -40%) scale(0.95) rotate(120deg);
  }
  60% {
    transform: translate(-50%, -55%) scale(1.02) rotate(180deg);
  }
  80% {
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.98) rotate(270deg);
  }
  100% {
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(360deg);
  }
}
/* --- Result Card --- */
.result-card {
  width: 350px;
  height: 400px;
  background: url('/wp-content/uploads/2025/04/BG-001.webp') center center / cover no-repeat;
  border: 1px solid #d4af37;
  border-radius: 20px;
  padding: 20px 15px;
  color: #3a2c1c;
  margin: 10px auto 0 auto;
  text-align: center;
  font-family: 'Prompt', sans-serif;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.1);
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(90deg);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* --- Shine และ Sparkle --- */
.result-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  filter: blur(40px);
  opacity: 0.7;
  animation: cardGlowPulse 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes cardGlowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.9; }
}

.result-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 300%;
  background: repeating-radial-gradient(circle, rgba(255, 215, 0, 0.04) 0px, rgba(255, 215, 0, 0.04) 1px, transparent 2px, transparent 6px);
  background-size: 5px 5px;
  animation: sparkleMove 18s linear infinite;
  opacity: 0.06;
  pointer-events: none;
}

/* --- Animations เพิ่มเติม --- */
@keyframes flipCard {
  0% { transform: perspective(1000px) rotateY(90deg); opacity: 0; }
  100% { transform: perspective(1000px) rotateY(0deg); opacity: 1; }
}
@keyframes softShine {
  0% { transform: translate(-30%, -30%) rotate(10deg); }
  100% { transform: translate(30%, 30%) rotate(10deg); }
}
@keyframes sparkleMove {
  0% { background-position: 0 0; }
  100% { background-position: 300px 300px; }
}
@keyframes lightningStrike {
  0%, 96%, 100% { box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.2), 0 0 12px rgba(191, 163, 0, 0.3); }
  97% { box-shadow: inset 0 0 30px rgba(255, 255, 150, 0.9), 0 0 50px rgba(255, 255, 200, 0.8), 0 0 80px rgba(255, 255, 255, 0.5); }
  98% { box-shadow: inset 0 0 20px rgba(255, 255, 200, 0.6), 0 0 30px rgba(255, 255, 170, 0.5); }
}
@keyframes softPulse {
  0%, 100% { box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.2), 0 0 10px rgba(191, 163, 0, 0.3); }
  50% { box-shadow: inset 0 0 16px rgba(255, 215, 0, 0.35), 0 0 16px rgba(191, 163, 0, 0.45); }
}
@keyframes ani {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* --- Text บนการ์ด --- */
.result-card .number {
  font-size: 54px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #2b1d00;
}
.result-card .fortune-thai,
.result-card .fortune-eng {
  font-size: 20px;
  margin-bottom: 6px;
  color: #3a2c1c;
}

.smoke-background {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08) 0%, transparent 50%),
              radial-gradient(circle at 70% 70%, rgba(255, 215, 0, 0.06) 0%, transparent 60%);
  background-size: 200% 200%;
  animation: smokeRealFlow 25s linear infinite alternate;
  opacity: 0.6; 
  pointer-events: none;
  z-index: 0; /* ให้อยู่ข้างหลังของ Shine + Content */
  filter: blur(12px);
  mix-blend-mode: lighten; /* ทำให้ควันดูเบา */
}

@keyframes smokeRealFlow {
  0% {
    background-position: 0% 0%;
    transform: rotate(0deg) scale(1);
  }
  50% {
    background-position: 50% 50%;
    transform: rotate(3deg) scale(1.1);
  }
  100% {
    background-position: 100% 100%;
    transform: rotate(-2deg) scale(1);
  }
}

@media (max-width: 768px) {
  .result-card {
    width: 320px;
    height: 250px;
    padding: 15px -20px;
    border-radius: 16px;
    margin: 0 auto 0 auto;
    background-size: cover; /* เผื่อแก้ขนาดรูปพื้นหลัง */
  }

  .result-card .number {
    font-size: 42px;
    margin-bottom: 8px;
  }

  .result-card .fortune-thai,
  .result-card .fortune-eng {
    font-size: 18px;
  }
}

.limit-width {
  display: block;
  max-width: 90%;
  margin: 0 auto;
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: center;
}/* End custom CSS */