:root{
  /* โทน MEGASPIN: ดาร์ก + ไซยัน/น้ำเงิน + ม่วง + แต้มแดง */
  --bg:#05060b;
  --c1:#00e5ff;   /* cyan neon */
  --c2:#2d7bff;   /* electric blue */
  --c3:#8a3dff;   /* purple */
  --hot:#ff2a4a;  /* red accent */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

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

/* ฉากหลังแบบเบา ๆ (ไม่หนักเครื่อง) */
.page{
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:18px 0;
  background:
    radial-gradient(900px 700px at 15% 10%, rgba(0,229,255,.12), transparent 55%),
    radial-gradient(900px 700px at 85% 25%, rgba(138,61,255,.10), transparent 55%),
    radial-gradient(900px 700px at 70% 80%, rgba(255,42,74,.08), transparent 60%),
    #05060b;
}

.posterWrap{
  width:min(520px, 100vw);
  border-radius:18px;
  overflow:hidden;
  background:#000;
  box-shadow:0 30px 120px rgba(0,0,0,.55);
  position:relative;

  /* กันพื้นที่ให้ปุ่ม fixed ไม่ทับรูป */
  padding-bottom:118px;
}

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

/* CTA */
.cta{
  position:fixed;
  left:50%;
  bottom:16px;
  width:min(520px, 92vw);
  height:74px;
  z-index:50;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;

  font-weight:1000;
  font-size:26px;
  letter-spacing:.2px;
  color:#071018;

  /* ปุ่ม: ไซยัน -> น้ำเงิน -> ม่วง และแต้มแดงนิด ๆ ให้เข้าภาพ */
  background:
    radial-gradient(120% 180% at 20% 0%, rgba(255,255,255,.28), transparent 45%),
    linear-gradient(90deg, var(--c1) 0%, var(--c2) 48%, var(--c3) 92%);
  border:1px solid rgba(255,255,255,.18);

  box-shadow:
    0 18px 70px rgba(0,0,0,.58),
    0 0 0 3px rgba(0,229,255,.20) inset,
    0 0 0 7px rgba(255,42,74,.10) inset;

  transform:translateX(-50%);
  transition: transform .22s ease, opacity .22s ease, filter .22s ease;
}

/* shine เบา ๆ */
.cta::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:999px;
  background:linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,.62) 22%,
    rgba(255,255,255,.16) 40%,
    transparent 62%);
  transform:translateX(-60%);
  opacity:.70;
  filter: blur(1px);
  animation: shine 2.1s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: overlay;
}

@keyframes shine{
  0%{ transform:translateX(-60%); opacity:.35; }
  40%{ opacity:.90; }
  100%{ transform:translateX(65%); opacity:.40; }
}

@keyframes cyberPulse{
  0%{ transform:translateX(-50%) scale(1); filter:brightness(1); }
  50%{ transform:translateX(-50%) scale(1.03); filter:brightness(1.10); }
  100%{ transform:translateX(-50%) scale(1); filter:brightness(1); }
}

.cta.pulse{ animation: cyberPulse 2.7s ease-in-out infinite; }

.cta.is-down{
  transform:translateX(-50%) translateY(10px) scale(.985);
  opacity:.92;
}

.cta.is-up{
  transform:translateX(-50%) translateY(0) scale(1);
  opacity:1;
}

.cta:active{
  transform:translateX(-50%) scale(.992);
  filter:brightness(1.10);
}