:root {
    --bg: #070410;
    --bg2: #0b0715;

    /* โทนภาพ: ม่วงเข้ม + ทอง */
    --purple: #6b1cff;
    --purple2: #2b0b7a;

    --gold: #f7d47a;
    --gold2: #c9962b;

    --text: #f4f2ff;
    --muted: rgba(244, 242, 255, .72);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(900px 700px at 20% 10%, rgba(107, 28, 255, .18), transparent 55%),
        radial-gradient(900px 700px at 80% 25%, rgba(247, 212, 122, .10), transparent 55%),
        linear-gradient(180deg, var(--bg), var(--bg2));
}

/* Center stage */
.page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 18px 0;
}

.posterWrap {
    width: min(520px, 100vw);
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    position: relative;
    box-shadow: 0 28px 110px rgba(0, 0, 0, .60);
    border: 1px solid rgba(247, 212, 122, .14);

    /* กันพื้นที่ไว้ด้านล่างให้ปุ่ม fixed ทับรูป “น้อยลง” */
    padding-bottom: 128px;
}

.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: 900;
    font-size: 26px;
    letter-spacing: .3px;
    color: #f6e6b8;
    /* ทองอ่อน */

    /* พื้นปุ่ม: ดำอมม่วง */
    background:
        radial-gradient(140% 180% at 20% 0%, rgba(255, 255, 255, .08), transparent 45%),
        linear-gradient(180deg,
            #1a0f2e 0%,
            #0d0718 55%,
            #07040f 100%);

    /* ขอบทองชัด */
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 18px 60px rgba(0, 0, 0, .65),
        0 0 0 2px #d4af37,
        /* ขอบทองหลัก */
        0 0 18px rgba(212, 175, 55, .35);
    /* แสงทองบาง ๆ */

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


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

    40% {
        opacity: .90;
    }

    100% {
        transform: translateX(65%);
        opacity: .40;
    }
}

/* pulse แบบ “ไม่เรืองฟุ้ง” */
@keyframes pulseGold {
    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: pulseGold 2.7s ease-in-out infinite;
}

/* ตอนเลื่อน ให้คง translateX(-50%) เสมอ */
.cta.is-down {
    transform: translateX(-50%) translateY(10px) scale(.985);
    opacity: .93;
}

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

/* ตอนกด */
.cta:active {
    transform: translateX(-50%) scale(.985);
    filter: brightness(1.08);
}

@media (min-width: 820px) {
    .page {
        padding: 22px 0;
    }
}