@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; }

:root {
    --pink-glow:   #ff007f;
    --blue-glow:   #00ccff;
    --orange-glow: #ff9900;
}

body {
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: transparent;
    overflow: hidden;
}

/* ── Outer layout ── */
.pk-layout {
    width: 1077px;
}

.pk-frame {
    position: relative;
    width: 1077px;
    background: rgba(0, 0, 0, 0.2);
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Top space for header overflow, bottom padding */
    padding: 35px 20px 20px;
}

/* Header centered on top border */
.header-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* ── pk-body: relative container housing bar + player units ── */
/*
   Internal vertical regions:
     0px  – 155px  : avatar + name-tag
     155px – 205px : score bar
     205px – 295px : gift cards
*/
.pk-body {
    position: relative;
    width: 100%;
    height: 315px;
}

/* ── Score bar ── */
.score-bar {
    position: absolute;
    top: 175px;
    left: 0;
    right: 0;
    height: 50px;
    overflow: visible;
    z-index: 2;
}

/* Inner wrapper clips the colored segments to a pill shape */
.score-bar-inner {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
}

/* Ambient Light Wave (10-15x per min) */
.ambient-light-wave {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 350px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 30%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.1) 70%,
        transparent 100%
    );
    transform: skewX(-15deg);
    z-index: 10;
    pointer-events: none;
    mix-blend-mode: color-dodge;
    animation: waveSweep 2.2s ease-in-out forwards;
}

@keyframes waveSweep {
    0%   { left: -30%; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { left: 110%; opacity: 0; }
}

.score-segment {
    position: relative;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: max-content;
    padding: 0 10px;
}

.score-segment.s1 { background: linear-gradient(90deg, #9b28b0, #e91e63); border-radius: 25px 0 0 25px;}
.score-segment.s2 { background: linear-gradient(90deg, #0088ff, #00c880);}
.score-segment.s3 { background: linear-gradient(90deg, #e67e22, #f39c12); border-radius: 0 25px 25px 0;}

.bar-divider {
    width: 3px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.6);
}

/* Score number inside bar */
.score {
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.55);
    display: inline-block;
    white-space: nowrap;
    pointer-events: none;
    position: relative;
    z-index: 2;
}

/* ── Rank Indicator Canvas ── */
.rank-indicator-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.score-segment.bar-leading .rank-indicator-canvas {
    opacity: 1;
}


/* Score shine animation */
.score-segment::after {
    content: '';
    position: absolute;
    top: 0; left: -60%; width: 40%; height: 100%;
    background: rgba(255, 255, 255, 0.35);
    transform: skewX(-20deg);
    opacity: 0;
    pointer-events: none;
}
@keyframes barShine {
    0%   { left: -60%; opacity: 0; }
    30%  { opacity: 0.5; }
    100% { left: 120%; opacity: 0; }
}
.score-segment.shine-active::after { animation: barShine 0.6s ease-out; }

/* Score pulse */
@keyframes scorePulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); color: #ffffaa; text-shadow: 0 0 12px #ffff00; }
    100% { transform: scale(1); }
}
.pulse-anim { animation: scorePulse 0.4s ease-out; }

/* ── Player unit — absolutely positioned within pk-body ── */
.player-unit {
    position: absolute;
    top: 0;
    /* left is set dynamically by JS */
    transform: translateX(-50%);
    transition: left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px; /* nominal width for collision reference */
}

.player-unit.no-transition { transition: none !important; }

/* Avatar + name fills the top 155px */
.avatar-name-group {
    height: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;           /* tighter gap between avatar and name-tag */
    padding-bottom: 14px;
    position: relative;
}

/* Gentle float on avatar + frame */
@keyframes floatAvatar {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

.avatar-box {
    position: relative;
    width: 158px;  /* 113 * 1.4 */
    height: 99px;  /* 71  * 1.4 */
    flex-shrink: 0;
    animation: floatAvatar 3.5s ease-in-out infinite;
    filter: drop-shadow(0 0 16px var(--team-color)) drop-shadow(0 0 32px var(--team-color));
}

.user-image {
    position: absolute;
    top: 13px;    /* 9  * 1.4 */
    left: 41px;   /* 29.5 * 1.4 */
    width: 76px;  /* 54 * 1.4 */
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
}

.frame-svg-full {
    position: absolute;
    top: 0; left: 0;
    width: 158px;  /* scale SVG via CSS */
    height: 99px;
    z-index: 2;
    pointer-events: none;
    opacity: 1;
}

/* Name tag — fixed neutral color, never changes */
.name-tag {
    background: rgba(17, 17, 17, 0.6);
    color: #fff;
    padding: 5px 14px;
    border-radius: 8px;
    font-weight: 700;
    border: 2px solid rgba(200, 200, 200, 0.5);
    position: relative;
    max-width: 170px;
    overflow: hidden;
    z-index: 8;
}

/* Downward arrow matches team color */
.name-tag::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid;
}

/* Team colors — match progress bar colors */
.pink-team { --team-color: #e91e63; }
.pink-team   .name-tag { border-color: var(--team-color); box-shadow: 0 0 16px var(--team-color), 0 0 32px var(--team-color); }
.pink-team   .name-tag::after { border-top-color: var(--team-color); }

.blue-team { --team-color: #00aaff; }
.blue-team   .name-tag { border-color: var(--team-color); box-shadow: 0 0 16px var(--team-color), 0 0 32px var(--team-color); }
.blue-team   .name-tag::after { border-top-color: var(--team-color); }

.orange-team { --team-color: #f39c12; }
.orange-team .name-tag { border-color: var(--team-color); box-shadow: 0 0 16px var(--team-color), 0 0 32px var(--team-color); }
.orange-team .name-tag::after { border-top-color: var(--team-color); }

/* Name marquee */
.name-container {
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.name-container.is-scrolling {
    justify-content: flex-start;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.name-track {
    display: inline-flex;
    white-space: nowrap;
}

.idol-name {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    padding: 0 3px;
}

@keyframes slideName {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.name-marquee-anim { animation: slideName linear infinite; }

/* ── Gift cards group (below score bar) ── */
/* top margin = score bar height (50px) to clear the bar */
.gifts-group {
    margin-top: 50px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gift-card-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.gift-card {
    width: 66px;
    height: 66px;
    background: rgba(45, 45, 50, 0.75);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}

.gift-icon {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

/* Carousel zoom-in animation only */
@keyframes giftPageIn {
    0%   { transform: scale(0.4); opacity: 0; }
    70%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.gift-anim-in { animation: giftPageIn 0.4s ease-out both; }

/* Carousel cycle: zoom-in, hold, zoom-out */
@keyframes giftCycle {
    0%   { transform: scale(0.2); opacity: 0; animation-timing-function: ease-out; }
    15%  { transform: scale(1.1); opacity: 1; animation-timing-function: ease-in-out; }
    25%  { transform: scale(1); opacity: 1; animation-timing-function: linear; }
    75%  { transform: scale(1); opacity: 1; animation-timing-function: ease-in-out; }
    85%  { transform: scale(1.1); opacity: 1; animation-timing-function: ease-in; }
    100% { transform: scale(0.2); opacity: 0; }
}
.gift-anim-cycle { animation: giftCycle 2.2s both; }

/* ── Particles (appended to .pk-body, absolute) ── */
.burst-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100;
    transform: translate(-50%, -50%);
    animation: burstOut 0.8s ease-out forwards;
    box-shadow: 0 0 12px currentColor;
}
@keyframes burstOut {
    0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ── Gift Score Indicator ── */
.gift-score-indicator {
    position: absolute;
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px currentColor;
    z-index: 100;
    pointer-events: none;
    animation: indicatorPop 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes indicatorPop {
    0%   { transform: translateX(-50%) translateY(0) scale(0.5); opacity: 0; }
    20%  { transform: translateX(-50%) translateY(-40px) scale(1.6); opacity: 1; text-shadow: 0 0 30px #fff, 0 0 40px currentColor; }
    80%  { transform: translateX(-50%) translateY(-80px) scale(1.2); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-100px) scale(1); opacity: 0; }
}

/* ── Epic Bar Flash ── */
.bar-flash-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    z-index: 2;
    pointer-events: none;
    animation: barEpicFlash 0.7s ease-out forwards;
}
@keyframes barEpicFlash {
    0%   { opacity: 1; transform: scaleX(0); filter: brightness(2); }
    50%  { opacity: 0.8; transform: scaleX(1); filter: brightness(1.5); }
    100% { opacity: 0; transform: scaleX(1.5); filter: brightness(1); }
}

/* ── Epic Shockwave ── */
.epic-shockwave {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
    border: 4px solid currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    pointer-events: none;
    z-index: 3;
    animation: shockwaveExpand 0.6s ease-out forwards;
    filter: drop-shadow(0 0 10px currentColor);
}
@keyframes shockwaveExpand {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.2); border-width: 8px; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(3); border-width: 0px; }
}

/* Overtake flash */
.overtake-flash {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 200, 0, 0.92);
    color: #000;
    font-weight: 900;
    font-size: 13px;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 50;
    pointer-events: none;
    animation: overtakePop 1.5s ease-out forwards;
}
@keyframes overtakePop {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    70%  { opacity: 1; transform: translateX(-50%) translateY(-18px); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-28px); }
}

/* ── Leader Ripple / Wave (replaces frame glow) ── */
.player-unit.is-leading .avatar-box::after {
    content: '';
    position: absolute;
    left: 79px;    /* Center of avatar box (158/2) */
    top: 51.5px;   /* Center of user image (13 + 76/2 == 51) */
    width: 76px;
    height: 76px;
    background: transparent;
    border: 3px solid var(--team-color, #ffdd00);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    z-index: 0;    /* behind the user image */
    pointer-events: none;
}

.player-unit.is-leading .avatar-box::after { animation: rippleNormal 1.5s infinite ease-out; }
.player-unit.is-leading.lead-intensity-1 .avatar-box::after { animation: ripple60 1s infinite ease-out; }
.player-unit.is-leading.lead-intensity-2 .avatar-box::after { animation: ripple30 0.6s infinite ease-out; }
.player-unit.is-leading.lead-intensity-3 .avatar-box::after { animation: rippleQueen 0.5s infinite ease-out; }

@keyframes rippleNormal {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}
@keyframes ripple60 {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}
@keyframes ripple30 {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}
@keyframes rippleQueen {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; border-width: 4px; }
    100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; border-width: 1px; }
}

/* ── JS Managed Fireflies ── */
.fireflies-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10; /* Render behind player units, inside pk-frame */
    border-radius: 15px; /* match pk-frame inner curve */
    overflow: hidden;
}

/* Crown removed */

/* Scared shake */
.player-unit.is-scared .avatar-box { 
    animation: scared 0.1s infinite !important; 
    filter: grayscale(0.6) drop-shadow(0 0 16px var(--team-color)) drop-shadow(0 0 32px var(--team-color)); 
}
@keyframes scared {
    0%   { transform: translate(2px,  1px); }
    25%  { transform: translate(-2px, -1px); }
    50%  { transform: translate(-2px, 0px); }
    75%  { transform: translate(1px,  2px); }
    100% { transform: translate(2px, -1px); }
}

/* ── Timer animations (SVG <text> element) ── */
#timer.disconnected { opacity: 0.3; }

/* Normal base: font-size 38 (set by JS) */
@keyframes pulseWarning { 0%,100% { font-size: 35px; } 50% { font-size: 42px; } }
.timer-warning-anim { animation: pulseWarning 1.5s infinite ease-in-out; }

@keyframes pulseAlert { 0%,100% { font-size: 35px; } 50% { font-size: 44px; } }
.timer-alert-anim { animation: pulseAlert 0.8s infinite ease-in-out; }

/* last 10s: JS sets font-size 68; pulse around that */
@keyframes pulseDanger { 0%,100% { font-size: 62px; } 40%,60% { font-size: 74px; } }
.timer-danger-anim { animation: pulseDanger 0.4s infinite ease-in-out; }

/* winner state */
@keyframes pulseWinner {
    0%,100% { font-size: 36px; opacity: 1; }
    50%      { font-size: 42px; opacity: 0.8; }
}
.timer-winner-anim { animation: pulseWinner 1.2s infinite ease-in-out; }

/* ── Winner Overlay ── */
.winner-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
}
.winner-overlay.show { opacity: 1; }

/* Dim layer removed — winner stands out via its own glow/ring */
.winner-dim { display: none; }

/* pk-frame background unchanged, but inner components blur & dim */
.pk-frame.winner-dim-frame .header-container,
.pk-frame.winner-dim-frame .pk-body,
.pk-frame.winner-dim-frame .fireflies-layer {
    filter: blur(8px);
    opacity: 0.6;
}

.header-container,
.pk-body,
.fireflies-layer {
    transition: filter 0.45s ease, opacity 0.45s ease;
}

.winner-slots-wrap {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
    transform: scale(var(--winner-scale, 1));
    transform-origin: center center;
}

.winner-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    --team-color: #ffdd00;
    /* Subtle glow — 2 layers, toned down so it enhances not overwhelms */
    filter:
        drop-shadow(0 0 12px var(--team-color))
        drop-shadow(0 0 28px var(--team-color));
}

/* Ring border removed — was causing the strange rectangular background frame */

/* Brief flash on overlay entrance to draw the eye, no persistent background */
.winner-overlay.show::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.18);
    pointer-events: none;
    animation: winnerEntranceFlash 0.5s ease-out forwards;
    z-index: 1;
}
@keyframes winnerEntranceFlash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* Aura canvas — position/size fully set by JS to align with avatar-box */
.winner-aura-canvas {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.winner-ang-clone {
    position: relative;
    z-index: 1;
    height: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding-bottom: 14px;
}

/* Name tag stays normal size — wrap scale handles magnification */
.winner-ang-clone .name-tag {
    font-size: 13px;
    max-width: 158px;
}

.winner-label {
    position: relative;
    z-index: 10;
    margin-top: 24px;
    font-size: 72px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 5px;
    color: transparent;
    background: linear-gradient(to bottom, #ffffff 0%, #ffe066 35%, #ffaa00 70%, #ff6600 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-transform: uppercase;
    filter: drop-shadow(0 5px 14px rgba(255,170,0,0.9)) drop-shadow(0 0 30px rgba(255,220,0,0.6));
    opacity: 0;
    transform: scale(0.4) translateY(16px);
}
.winner-overlay.show .winner-label {
    animation: winnerLabelPop 0.55s 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes winnerLabelPop {
    0%   { opacity: 0; transform: scale(0.4) translateY(16px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}