* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Noto Sans Thai', sans-serif;
    background: transparent !important;
    background-color: transparent !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sticker-container {
    width: 100%;
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 60px;
    position: relative;
}

/* ── Timer ─────────────────────────────────────── */
.pk-timer {
    font-family: 'Montserrat';
    font-size: 84px;
    font-weight: 700;
    margin-bottom: 100px;
    color: #fff;
    text-align: center;
    letter-spacing: 10px;
    line-height: 1;
    text-shadow:
        0 0 22px rgba(255,200,80,0.85),
        -2px -2px 0 #000, 2px -2px 0 #000,
        -2px  2px 0 #000, 2px  2px 0 #000;
    transition: opacity 0.4s;
    flex-shrink: 0;
}
.pk-timer.disconnected { opacity: 0.2; animation: none; }


.pk-timer.alert {
    animation: timerAlert 0.8s ease-in-out infinite !important;
}

@keyframes timerAlert {
    0%, 100% {
        color: #ffffff;
        text-shadow:
            0 0 14px #ff0000,
            0 0 32px #ff0000,
            -2px -2px 0 #000, 2px -2px 0 #000,
            -2px  2px 0 #000, 2px  2px 0 #000;
        transform: scale(1.0);
    }
    50% {
        color: #ff3300;
        text-shadow:
            0 0 28px #ff0000,
            0 0 60px #ff4400,
            0 0 90px #ff2200,
            -2px -2px 0 #000, 2px -2px 0 #000,
            -2px  2px 0 #000, 2px  2px 0 #000;
        transform: scale(1.07);
    }
}


.sticker-grid.alert-ring {
    animation: gridAlert 0.8s ease-in-out infinite;
    border-radius: 18px;
}

@keyframes gridAlert {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 0 3px rgba(255,50,0,0.7), 0 0 40px 8px rgba(255,0,0,0.3); }
}

/* ── Score blink ──────────────────── */
@keyframes scoreBlink {
    0%   { color: #ffffff; }
    25%  { color: #ffe000; text-shadow: 0 0 18px rgba(255,220,60,0.9); }
    50%  { color: #ffffff; }
    75%  { color: #ffe000; text-shadow: 0 0 18px rgba(255,220,60,0.9); }
    100% { color: #ffffff; }
}

.slot-score.blink {
    animation: scoreBlink 2.4s ease-in-out 1;
}

/* ── Grid ───────────────────────────────────────── */
.sticker-grid {
    display: grid;
    flex: 1;
    align-content: center;
    justify-content: center;
    grid-template-columns: repeat(8, 132px);
    grid-template-rows: repeat(3, 300px);
    column-gap: 15px;
    row-gap: 70px;
}

/* ── Slot card ──────────────────────────────────── */
.sticker-slot {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    color: #fff;
    padding: 0;
    gap: 0;
    overflow: visible;
    width: 280px;
    height: 300px;
    z-index: 1;

    
    box-shadow:
        0 4px 12px rgba(0,0,0,0.22),
        0 0 10px rgba(255, 255, 255, 0.06);
}

.sticker-slot.empty {
    background: transparent !important;
    border: none;
    box-shadow: none;
}


.sticker-slot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 100px;
    background: rgba(0,0,0,0.4);
    border-radius: 42px 42px 0 0;
    z-index: 0;
    pointer-events: none;
}

/* ── Gift image ─────────────────────────────────── */
.slot-gift-container {
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}



.slot-gift-container::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: conic-gradient(
        #ff0000, #ff8800, #ffee00,
        #00cc44, #0088ff, #8800ff,
        #ff0088, #ff0000
    );
    animation: rainbowSpin 3s linear infinite;
    filter: blur(10px);
    opacity: 0.35;
    z-index: -1;
}

@keyframes rainbowSpin {
    0%   { transform: rotate(0deg)   scale(1);    opacity: 0.2; }
    50%  { transform: rotate(180deg) scale(1.08); opacity: 0.3; }
    100% { transform: rotate(360deg) scale(1);    opacity: 0.2; }
}

.slot-gift-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6));
    display: block;
    animation: giftFloat 1s ease-in-out infinite;
}

@keyframes giftFloat {
    0%, 100% { transform: translateY(0px);  }
    50%       { transform: translateY(-8px); }
}

.slot-gift-img.new {
    animation:
        giftPop   0.48s cubic-bezier(0.175, 0.885, 0.32, 1.3) forwards,
        giftFloat 1s ease-in-out 0.48s infinite;
}

@keyframes giftPop {
    0%   { opacity: 0; transform: scale(0.2) rotate(-10deg); }
    55%  { opacity: 1; transform: scale(1.18) rotate(4deg);  }
    80%  { transform: scale(0.92) rotate(-1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg);     }
}

/* ── Score Pop + Glow ───────────────────────────── */
@keyframes scorePop {
    0%   { transform: scale(1);    text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
    30%  { transform: scale(1.35); text-shadow: 0 0 20px #ffe000, 0 0 40px #ffaa00, 0 0 60px #ff8800; }
    60%  { transform: scale(1.2);  text-shadow: 0 0 14px #ffe000, 0 0 28px #ffaa00; }
    100% { transform: scale(1);    text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
}

.slot-score.pop {
    animation: scorePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.3) forwards;
}

/* ── Score ──────────────────────────────────────── */
.slot-score {
    font-family: 'Montserrat', sans-serif;
    font-size: 84px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    line-height: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 120px;
    background: transparent;
    border: none;
    min-width: unset;
    width: 100%;
    transition: font-size 0.2s ease;
    position: relative;
    z-index: 3; 
}

/* ── Name bar ───────────────────────────────────── */
.slot-name {
    width: 100%;
    height: 100px;
    background: rgba(0,0,0,0.4);
    border-radius: 0 0 42px 42px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 4; 
}


.slot-name span {
    display: inline-block;
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif;
    font-size: 50px;
    font-weight: 700;
    color: #fff;
    padding: 0 10px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}


.slot-name span.marquee {
    padding-left: 0;
    overflow: visible;
    text-overflow: unset;
    position: absolute;
    animation: marqueeScroll linear infinite;
    will-change: transform;
}

@keyframes marqueeScroll {
    0%   { transform: translateX(100%);  }
    100% { transform: translateX(-100%); }
}

/* ── Cast avatar ────────────────────────────────── */
.cast-avatar-img {
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(100,240,130,0.75);
    object-fit: cover;
    box-shadow: 0 0 0 3px rgba(76,175,80,0.2), 0 4px 14px rgba(0,0,0,0.5);
}

/* ════════════════════════════════════════════════
   TIME'S UP overlay
   ════════════════════════════════════════════════ */
#timesup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    align-items: center;
    justify-content: center;
    background: transparent;
}

#timesup-overlay.visible {
    display: flex;
    animation: overlayFadeIn 0.4s ease forwards;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.timesup-text {
    font-family: 'Montserrat', 'Rajdhani', sans-serif;
    font-size: 140px;
    font-weight: 900;
    letter-spacing: 6px;
    text-transform: uppercase;

    
    background: linear-gradient(
        180deg,
        #fff0f0 0%,
        #ff4444 45%,
        #cc0000 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    
    filter:
        drop-shadow(0 0 8px rgba(255,143,163,0.75))
        drop-shadow(0 0 18px rgba(255,143,163,0.45))
        drop-shadow(0 3px 6px rgba(0,0,0,0.6));

    animation: timesupPulse 1.2s ease-in-out infinite;
    text-align: center;
    padding: 0 40px;
}

@keyframes timesupPulse {
    0%, 100% {
        transform: scale(1);
        filter:
            drop-shadow(0 0 8px rgba(255,0,0,0))
            drop-shadow(0 0 18px rgba(255,143,163,0.45))
            drop-shadow(0 3px 6px rgba(0,0,0,0.6));
    }

    50% {
        transform: scale(1.05);  /*1.04*/
        filter:
            drop-shadow(0 0 14px rgba(255,143,163,0.9))
            drop-shadow(0 0 28px rgba(255,143,163,0.6))
            drop-shadow(0 3px 8px rgba(0,0,0,0.6));
    }
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1100px) {
    .pk-timer { font-size: 48px; letter-spacing: 7px; }
    .slot-gift-container { width: 200px; height: 200px; top: -70px; }
    .slot-score { font-size: 48px; }
    .timesup-text { font-size: 80px; }
}
@media (max-width: 800px) {
    .pk-timer { font-size: 36px; letter-spacing: 5px; }
    .sticker-grid { gap: 2px; }
    .timesup-text { font-size: 56px; letter-spacing: 2px; }
}