:root {
  --bg: #05030b;
  --bg2: #10051b;

  --purple: #8b35ff;
  --purple2: #4b168f;
  --violet: #c342ff;

  --gold1: #fff2a3;
  --gold2: #ffd23c;
  --gold3: #d99700;
  --gold4: #8f5b00;

  --textDark: #180d00;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 18px 0;
  background:
    radial-gradient(900px 700px at 18% 10%, rgba(139, 53, 255, .16), transparent 55%),
    radial-gradient(900px 700px at 82% 24%, rgba(255, 210, 60, .10), transparent 55%),
    radial-gradient(900px 700px at 50% 90%, rgba(195, 66, 255, .12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.posterWrap {
  width: min(560px, 100vw);
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 30px 120px rgba(0, 0, 0, .68),
    0 0 44px rgba(139, 53, 255, .12);
  position: relative;

  /* กันปุ่ม fixed ทับเนื้อหาล่าง */
  padding-bottom: 124px;
}

.posterImg {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* =========================================
   BGODGAMES — THUNDER GOLD CTA
========================================= */

.cta {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));

  width: min(520px, 92vw);
  height: 76px;

  z-index: 100;

  display: flex;
  align-items: center;

  padding: 7px 20px 7px 10px;

  border-radius: 999px;

  text-decoration: none;
  -webkit-tap-highlight-color: transparent;

  color: #fff4c7;

  /*
     Transparent border +
     2-layer background
     = Gold / Purple electric border
  */
  border: 2px solid transparent;

  background:

    linear-gradient(180deg,
      #1a1023 0%,
      #100916 46%,
      #07050b 100%) padding-box,

    linear-gradient(110deg,
      #fff0a3 0%,
      #ffd84f 25%,
      #ba7c16 48%,
      #8c32ff 72%,
      #d052ff 86%,
      #ffd84f 100%) border-box;

  box-shadow:

    0 20px 58px rgba(0, 0, 0, .72),

    0 0 16px rgba(255, 216, 79, .22),

    0 0 25px rgba(162, 53, 255, .19),

    inset 0 1px 0 rgba(255, 255, 255, .11),

    inset 0 -7px 18px rgba(0, 0, 0, .36);

  transform: translateX(-50%);

  overflow: hidden;
  isolation: isolate;

  animation:
    thunderPulse 4.8s ease-in-out infinite;

  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease;
}


/* =========================================
   GOLD SWEEP
========================================= */

.cta::before {
  content: "";

  position: absolute;

  top: -30%;
  bottom: -30%;

  left: -40%;

  width: 26%;

  z-index: 0;

  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255, 216, 79, .08) 15%,
      rgba(255, 248, 194, .78) 48%,
      rgba(255, 216, 79, .23) 68%,
      transparent 100%);

  transform:
    skewX(-22deg) translateX(-260%);

  filter: blur(1px);

  opacity: 0;

  pointer-events: none;

  animation:
    goldSweep 4.1s ease-in-out infinite;
}


/* =========================================
   PURPLE ELECTRIC AURA
========================================= */

.cta::after {
  content: "";

  position: absolute;

  inset: -7px;

  z-index: -1;

  border-radius: inherit;

  background:
    linear-gradient(90deg,
      rgba(255, 216, 79, .55),
      rgba(147, 44, 255, .82),
      rgba(208, 82, 255, .62),
      rgba(255, 216, 79, .45));

  filter: blur(15px);

  opacity: .11;

  pointer-events: none;

  animation:
    electricAura 4.8s ease-in-out infinite;
}


/* =========================================
   POWER CORE
========================================= */

.powerCore {
  position: relative;

  z-index: 2;

  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  display: grid;
  place-items: center;

  margin-right: 12px;

  border-radius: 50%;

  background:

    radial-gradient(circle at 35% 25%,
      #fff8bf 0%,
      #ffd83f 16%,
      #bd7910 45%,
      #28120a 73%,
      #09060c 100%);

  border: 1px solid rgba(255, 226, 111, .85);

  box-shadow:

    0 0 0 3px rgba(108, 22, 158, .28),

    0 0 12px rgba(255, 215, 64, .55),

    0 0 23px rgba(151, 48, 255, .42),

    inset 0 2px 4px rgba(255, 255, 255, .35),

    inset 0 -5px 9px rgba(0, 0, 0, .42);

  animation:
    corePower 4.1s ease-in-out infinite;
}


/* วงพลังรอบ Core */

.powerCore::before {
  content: "";

  position: absolute;

  inset: -5px;

  border-radius: 50%;

  border:
    1px solid rgba(180, 73, 255, .48);

  box-shadow:
    0 0 13px rgba(174, 59, 255, .40);

  opacity: .45;

  animation:
    coreRing 3.1s ease-in-out infinite;
}


/* =========================================
   THUNDER
========================================= */

.thunder {
  position: relative;
  z-index: 2;

  font-size: 27px;
  line-height: 1;

  color: #fff044;

  text-shadow:

    0 0 5px rgba(255, 255, 255, .95),

    0 0 10px rgba(255, 226, 46, .95),

    0 0 20px rgba(255, 181, 26, .75),

    0 0 28px rgba(164, 47, 255, .55);

  filter:
    drop-shadow(0 0 4px rgba(255, 222, 45, .9));

  animation:
    thunderFlash 4.1s ease-in-out infinite;
}


/* =========================================
   TEXT
========================================= */

.ctaCopy {
  position: relative;

  z-index: 2;

  display: flex;
  flex-direction: column;

  line-height: 1.06;
}


.ctaCopy small {
  margin-bottom: 4px;

  color:
    rgba(255, 227, 142, .61);

  font-size: 9px;

  font-weight: 850;

  letter-spacing: 1.8px;
}


.ctaCopy strong {
  color: #fff3c0;

  font-size: 22px;

  font-weight: 950;

  letter-spacing: -.25px;

  text-shadow:

    0 2px 0 rgba(0, 0, 0, .55),

    0 0 10px rgba(255, 214, 68, .24);
}


/* =========================================
   ARROW
========================================= */

.ctaArrow {
  position: relative;

  z-index: 2;

  margin-left: auto;

  padding-bottom: 4px;

  color: #ffe05d;

  font-size: 37px;

  font-weight: 300;

  line-height: 1;

  text-shadow:

    0 0 8px rgba(255, 215, 64, .65),

    0 0 16px rgba(154, 53, 255, .25);

  animation:
    thunderArrow 2.5s ease-in-out infinite;
}


/* =========================================
   GOLD SWEEP ANIMATION
========================================= */

@keyframes goldSweep {

  0%,
  25% {
    transform:
      skewX(-22deg) translateX(-260%);

    opacity: 0;
  }

  31% {
    opacity: .35;
  }

  43% {
    transform:
      skewX(-22deg) translateX(720%);

    opacity: .90;
  }

  49%,
  100% {
    transform:
      skewX(-22deg) translateX(720%);

    opacity: 0;
  }

}


/* =========================================
   THUNDER FLASH
========================================= */

@keyframes thunderFlash {

  0%,
  26%,
  39%,
  100% {

    transform:
      rotate(-5deg) scale(1);

    filter:
      brightness(1);

  }

  30% {

    transform:
      rotate(5deg) scale(1.18);

    filter:
      brightness(1.55);

  }

  33% {

    transform:
      rotate(-3deg) scale(1.05);

    filter:
      brightness(1.1);

  }

  35% {

    transform:
      rotate(3deg) scale(1.12);

    filter:
      brightness(1.40);

  }

}


/* =========================================
   POWER CORE ANIMATION
========================================= */

@keyframes corePower {

  0%,
  25%,
  100% {

    transform:
      scale(1);

    box-shadow:

      0 0 0 3px rgba(108, 22, 158, .28),

      0 0 12px rgba(255, 215, 64, .45),

      0 0 22px rgba(151, 48, 255, .35),

      inset 0 2px 4px rgba(255, 255, 255, .35),

      inset 0 -5px 9px rgba(0, 0, 0, .42);

  }

  33% {

    transform:
      scale(1.08);

    box-shadow:

      0 0 0 4px rgba(126, 34, 180, .36),

      0 0 18px rgba(255, 217, 64, .78),

      0 0 33px rgba(165, 50, 255, .60),

      inset 0 2px 5px rgba(255, 255, 255, .45),

      inset 0 -5px 9px rgba(0, 0, 0, .42);

  }

}


/* =========================================
   CORE ENERGY RING
========================================= */

@keyframes coreRing {

  0%,
  100% {

    transform:
      scale(.94);

    opacity:
      .25;

  }

  50% {

    transform:
      scale(1.08);

    opacity:
      .65;

  }

}


/* =========================================
   PURPLE AURA
========================================= */

@keyframes electricAura {

  0%,
  25%,
  100% {
    opacity: .09;
  }

  35% {
    opacity: .30;
  }

  48% {
    opacity: .15;
  }

}


/* =========================================
   BUTTON PULSE
========================================= */

@keyframes thunderPulse {

  0%,
  26%,
  100% {

    transform:
      translateX(-50%) scale(1);

    filter:
      brightness(1);

  }

  35% {

    transform:
      translateX(-50%) scale(1.019);

    filter:
      brightness(1.07);

  }

  45% {

    transform:
      translateX(-50%) scale(1);

    filter:
      brightness(1);

  }

}


/* =========================================
   ARROW
========================================= */

@keyframes thunderArrow {

  0%,
  100% {
    transform:
      translateX(0);
  }

  50% {
    transform:
      translateX(4px);
  }

}


/* =========================================
   PRESS
========================================= */

.cta:active {

  transform:
    translateX(-50%) scale(.982);

  filter:
    brightness(1.16);

  box-shadow:

    0 11px 34px rgba(0, 0, 0, .62),

    0 0 24px rgba(255, 214, 68, .40),

    0 0 34px rgba(164, 48, 255, .38);

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 390px) {

  .cta {
    width: 94vw;

    height: 70px;

    padding:
      6px 17px 6px 9px;
  }


  .powerCore {
    width: 47px;
    height: 47px;

    flex-basis: 47px;

    margin-right: 10px;
  }


  .thunder {
    font-size: 24px;
  }


  .ctaCopy strong {
    font-size: 20px;
  }


  .ctaArrow {
    font-size: 33px;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

  .cta,
  .cta::before,
  .cta::after,
  .powerCore,
  .powerCore::before,
  .thunder,
  .ctaArrow {

    animation: none;

  }

}