@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Poppins:wght@600;700;800&family=Russo+One&family=Orbitron:wght@600;700;800&family=Montserrat:wght@600;700&display=swap');

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

html {
    overflow: hidden;
}

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;
    overflow: hidden;
}

.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: var(--timer-font, 'Fredoka'), 'Noto Sans Thai', sans-serif;
    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: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 42px;
    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: 5;   /* always on top so nothing (gold frame / name band) covers the sticker */
}



/* ── MC-picked decorative ring (replaces the old rainbow glow) ────
   An optional frame drawn AROUND the gift image, chosen per-page in
   Sticker settings from the special_sticker_ring collection. Sits
   BEHIND the gift (z-index:0 vs img z-index:1) and slightly larger
   (inset:-12px) so it haloes the sticker. Video or image — see
   applyRing() in sticker.js. No ring picked → element absent. */
.slot-gift-ring {
    position: absolute;
    inset: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
}

.slot-gift-img {
    position: relative;
    z-index: 1;
    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: transparent;  /* no dark box behind the TEST text — just the text */
    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;
    /* readable over the bare card now that there's no dark band behind it */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.7);
    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: var(--timer-font, 'Fredoka'), '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; }
}

/* ── Overlay customization: Show Score / Focus / Item Countdown ── */

/* Show Score = off → drop the score and collapse the card down to just the
   gift + name band, anchored to the bottom of the grid row, so there's no big
   empty body left behind. */
.sticker-grid.hide-score .slot-score {
    /* drop the score entirely and vertically centre the name band so the text
       sits in the middle of the card (the gift stays on top via its higher
       z-index). Card size is unchanged. */
    display: none;
}
.sticker-grid.hide-score .sticker-slot {
    justify-content: flex-start;
}
.sticker-grid.hide-score .slot-name {
    margin-top: 150px;   /* a bit below centre so the text isn't too high */
}

/* Focus-setting highlight (latest/highest, only when score is shown) — a bright
   vivid-gold treatment: a spinning gold ring + a bigger pulsing glow + a slight
   pop-out scale, with the score picking up a warm gold glow. The name band is
   left untouched so the TEST text colour stays identical to non-focused cards. */
.sticker-slot.is-focused {
    /* Accent (was bright gold) — frame + filled body in the chosen colour. */
    border: 3px solid var(--sticker-accent, #ffd64a);
    z-index: 4;
    transform: scale(1.06);     /* pop the focused card clearly out from neighbours */
    animation: focusPulse 1.8s ease-in-out infinite;
}
/* Focused body = the same translucent accent wash as the countdown (over the
   normal dark base), so the focus fill isn't darker/heavier than countdown. */
.sticker-slot.is-focused::before {
    background:
        linear-gradient(165deg,
            rgba(var(--sticker-accent-rgb, 255, 236, 170), 0.52),
            rgba(var(--sticker-accent-rgb, 246, 190, 80), 0.42)),
        rgba(0, 0, 0, 0.4);
}

/* Spinning gold ring hugging the frame — masked to a thin ring so it never
   covers the sticker/score. Rotating the element sweeps the bright highlight
   around the card. Sits above the dark wash but below the gift (z-index 5). */
.sticker-slot.is-focused::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 46px;
    padding: 4px;               /* ring thickness */
    background: conic-gradient(from 0deg,
        rgba(255, 255, 255, 0)                              0deg,
        rgba(var(--sticker-accent-rgb, 255, 233, 138), 1)  45deg,
        #ffffff                                             75deg,
        rgba(var(--sticker-accent-rgb, 255, 207, 61), 1)  105deg,
        rgba(255, 255, 255, 0)                            165deg,
        rgba(255, 255, 255, 0)                            225deg,
        rgba(var(--sticker-accent-rgb, 255, 207, 61), 1)  285deg,
        #ffffff                                           315deg,
        rgba(255, 255, 255, 0)                            360deg);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    filter: drop-shadow(0 0 7px rgba(var(--sticker-accent-rgb, 255, 206, 80), 0.9));
    animation: focusRingSpin 3.2s linear infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes focusRingSpin {
    to { transform: rotate(360deg); }
}

/* Brighter, bigger gold pulse than the old steady glow. */
@keyframes focusPulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(var(--sticker-accent-rgb, 255, 206, 70), 0.65),
            0 0 22px 4px rgba(var(--sticker-accent-rgb, 255, 184, 40), 0.50),
            0 4px 14px rgba(0, 0, 0, 0.25);
    }
    50% {
        box-shadow:
            0 0 0 4px rgba(var(--sticker-accent-rgb, 255, 216, 90), 1),
            0 0 54px 18px rgba(var(--sticker-accent-rgb, 255, 184, 40), 0.85),
            0 4px 14px rgba(0, 0, 0, 0.25);
    }
}

/* Score picks up a warm gold glow while its card is focused. */
.sticker-slot.is-focused .slot-score {
    color: #fff;
    text-shadow:
        0 0 10px rgba(var(--sticker-accent-rgb, 255, 214, 90), 0.95),
        0 0 24px rgba(var(--sticker-accent-rgb, 255, 176, 32), 0.70),
        0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Item Countdown = a gold frame overlay (border + glow + faint wash) that
   appears at full strength on each new gift and fades out over N seconds
   (JS animates its opacity). Each slot is independent, so several frames can be
   fading at the same time. */
/* Animatable angle so the conic ring can be transitioned smoothly. */
@property --cd {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.slot-gold {
    position: absolute;
    inset: -5px;
    border-radius: 47px;
    padding: 12px;              /* ring thickness — chunky so it reads clearly */
    /* gold from the top clockwise up to --cd, transparent past it. As --cd
       goes 360deg → 0deg the gold ring drains around the frame bit by bit. */
    background: conic-gradient(rgba(var(--sticker-accent-rgb, 255, 207, 61), 1) var(--cd, 0deg), rgba(255, 184, 40, 0) var(--cd, 0deg));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    filter: drop-shadow(0 0 16px rgba(var(--sticker-accent-rgb, 255, 198, 64), 0.95));
    pointer-events: none;
    z-index: 1;   /* behind the gift (z-index:2) so the ring never covers the sticker */
}

/* Gold body wash that fades out alongside the draining ring (the "gold
   background"). Sits behind the score/gift/name so it tints the card body only. */
.slot-gold-fill {
    position: absolute;
    inset: 0;                   /* whole card → uniform accent wash */
    border-radius: 42px;
    background: linear-gradient(165deg,
        rgba(var(--sticker-accent-rgb, 255, 236, 170), 0.52),
        rgba(var(--sticker-accent-rgb, 246, 190, 80), 0.42));
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
/* Keep the score above the gold wash so the number colour stays clean. */
.slot-score {
    position: relative;
    z-index: 3;
}