@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');

/* ทุก overlay ต้องไม่แสดง scrollbar ใน OBS/CEF — ซ่อน scrollbar ทุก browser (ไม่แตะ overflow/layout) */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; }

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

html {
    overflow: hidden;
    /* An iframe has a white fallback canvas in Chromium/WebView2 unless the
       root element is explicitly transparent. OBS was already transparent
       because its browser source supplies a transparent backing surface, but
       the in-app preview did not, leaving a solid white rectangle. */
    background: transparent !important;
    background-color: transparent !important;
}

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 ───────────────────────────────────────── */
/* Row-based flex: the board is a vertical stack of horizontal rows. Each row
   (.sticker-row) centers its own cells, so a partial row (fewer stickers than
   the grid width) sits CENTERED under the timer instead of left-aligned, and a
   full row never wraps to a phantom extra line. See buildStickerUpdate() /
   updateStickerView() in sticker.js. */
.sticker-grid {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;       /* center every row horizontally */
    justify-content: center;   /* center the stack of rows vertically */
    row-gap: 70px;
}

/* Grid row container — uses CSS grid with --sticker-cols columns so cells land at
   their exact column position (leaving unassigned cells as empty spaces). */
.sticker-row {
    display: grid;
    grid-template-columns: repeat(var(--sticker-cols, 6), max-content);
    justify-content: center;
    align-items: flex-start;
    column-gap: 15px;
}

/* ── 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 !important;
    box-shadow: none !important;
    pointer-events: none;
}
.sticker-slot.empty::before {
    display: none !important;
}

/* EMBED preview (in-app Operation Area): cells are clickable → Adjust Score. */
body.embed .sticker-slot { cursor: pointer; }


.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 {
    /* Same font as the timer (MC-picked --timer-font, e.g. Fredoka). */
    font-family: var(--timer-font, 'Fredoka'), '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;
    /* Same font as the timer + score (MC-picked --timer-font). */
    font-family: var(--timer-font, 'Fredoka'), '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 */
}

/* No name text under a cell → drop the empty name band and let the score fill
   the card so it sits VERTICALLY CENTRED in the cell (like the hide-score
   layout), instead of floating above an empty gap. */
.sticker-slot.no-label .slot-name {
    display: none;
}
/* Centre the score (padding-top:0) ONLY on a MIXED board — a nameless cell then
   lines up with the labelled ones. When EVERY cell is nameless there's nothing
   to line up with, so keep the base padding (score sits lower, clear of the
   gift): the :not(.all-no-label) guard drops the override for that case. */
.sticker-grid:not(.all-no-label) .sticker-slot.no-label .slot-score {
    padding-top: 0;
}

/* 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;
}