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

html,
body {
    min-height: 100%;
}

body {
    background: linear-gradient(165deg, #fffdf7 0%, #fff6e5 45%, #fdeab0 100%);
    color: #4a3a12;
    font-family: "Poppins", "Segoe UI", sans-serif;
}

/* ---- Background decorations ---- */
.bg-pattern {
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 214, 102, 0.15) 0, transparent 25%),
        radial-gradient(circle at 80% 80%, rgba(212, 167, 44, 0.12) 0, transparent 28%),
        repeating-linear-gradient(45deg, rgba(212, 167, 44, 0.03) 0, rgba(212, 167, 44, 0.03) 2px, transparent 2px, transparent 12px);
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 0;
}

.bg-stars {
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 0;
}

.bg-stars span {
    animation: twinkle 3s ease-in-out infinite;
    color: #d4a72c;
    font-size: 0.9rem;
    opacity: 0.45;
    position: absolute;
}

.bg-stars span:nth-child(2) { animation-delay: 0.5s; }
.bg-stars span:nth-child(3) { animation-delay: 1s; }
.bg-stars span:nth-child(4) { animation-delay: 1.5s; }
.bg-stars span:nth-child(5) { animation-delay: 2s; }
.bg-stars span:nth-child(6) { animation-delay: 2.5s; }

@keyframes twinkle {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

.bg-confetti {
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    z-index: 0;
}

.bg-confetti span {
    animation: confetti-fall 8s linear infinite;
    border-radius: 2px;
    height: 8px;
    opacity: 0.5;
    position: absolute;
    width: 4px;
}

.bg-confetti .c1 { background: #d4a72c; left: 10%; animation-delay: 0s; }
.bg-confetti .c2 { background: #f5c542; left: 25%; animation-delay: 1.5s; height: 6px; width: 6px; }
.bg-confetti .c3 { background: #e8b86d; left: 40%; animation-delay: 3s; }
.bg-confetti .c4 { background: #d4a72c; left: 55%; animation-delay: 0.8s; }
.bg-confetti .c5 { background: #f0c84a; left: 70%; animation-delay: 2.2s; height: 6px; width: 6px; }
.bg-confetti .c6 { background: #c98a2e; left: 85%; animation-delay: 4s; }
.bg-confetti .c7 { background: #ffe082; left: 15%; animation-delay: 5s; }
.bg-confetti .c8 { background: #d4a72c; left: 90%; animation-delay: 1s; }

@keyframes confetti-fall {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
    10% { opacity: 0.5; }
    90% { opacity: 0.5; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

.top-performers-screen {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    position: relative;
}

.bg-glow {
    border-radius: 50%;
    filter: blur(60px);
    height: 280px;
    opacity: 0.35;
    pointer-events: none;
    position: absolute;
    width: 280px;
    z-index: 0;
}

.bg-glow-left { background: #ffe9a8; left: 5%; top: 15%; }
.bg-glow-right { background: #f5c542; bottom: 10%; right: 5%; }

.top-performers-carousel {
    max-width: 1000px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.top-performers-carousel .owl-stage-outer {
    overflow: hidden;
}

/* Swipe + fade transition */
@keyframes tp-swipeFadeOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-70px); }
}

@keyframes tp-swipeFadeIn {
    from { opacity: 0; transform: translateX(70px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes tp-swipeFadeOutRev {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(70px); }
}

@keyframes tp-swipeFadeInRev {
    from { opacity: 0; transform: translateX(-70px); }
    to { opacity: 1; transform: translateX(0); }
}

.top-performers-carousel .animated.swipeFadeOut {
    animation: tp-swipeFadeOut 0.75s ease both;
    z-index: 1;
}

.top-performers-carousel .animated.swipeFadeIn {
    animation: tp-swipeFadeIn 0.75s ease both;
    z-index: 2;
}

.top-performers-carousel.is-prev .animated.swipeFadeOut {
    animation-name: tp-swipeFadeOutRev;
}

.top-performers-carousel.is-prev .animated.swipeFadeIn {
    animation-name: tp-swipeFadeInRev;
}

/* ---- Slide card ---- */
.performer-slide {
    background: #fff;
    border: 2px solid #e5c76b;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(166, 124, 0, 0.12);
    overflow: hidden;
    padding: 22px 20px 18px;
    position: relative;
}

.slide-shine {
    animation: shine-sweep 4s ease-in-out infinite;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%);
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

@keyframes shine-sweep {
    0%, 100% { transform: translateX(-120%); }
    50% { transform: translateX(120%); }
}

.corner-star {
    color: #e8c96a;
    font-size: 0.75rem;
    opacity: 0.6;
    position: absolute;
    z-index: 2;
}

.cs-tl { left: 14px; top: 14px; }
.cs-tr { right: 14px; top: 14px; }
.cs-bl { bottom: 14px; left: 14px; }
.cs-br { bottom: 14px; right: 14px; }

/* ---- Header ---- */
.slide-head {
    border-bottom: 1px solid #f0dfa0;
    margin-bottom: 20px;
    padding-bottom: 16px;
    position: relative;
    text-align: center;
    z-index: 2;
}

.head-trophy {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 6px;
}

.slide-head h2 {
    color: #3f3210;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    margin-bottom: 10px;
}

.slide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.slide-meta span {
    background: #fff9e6;
    border: 1px solid #efd98d;
    border-radius: 999px;
    color: #7a6528;
    font-size: 0.8rem;
    padding: 5px 11px;
}

.slide-counter {
    color: #a68b3a;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 8px;
}

/* ---- Podium ---- */
.podium-wrap {
    padding: 0 4px;
    position: relative;
    z-index: 2;
}

.podium {
    align-items: flex-end;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1.15fr 1fr;
}

.podium-card {
    align-items: center;
    background: linear-gradient(180deg, #fffdf8, #fff6dd);
    border: 1px solid #e8d08a;
    border-radius: 18px 18px 12px 12px;
    display: flex;
    flex-direction: column;
    padding: 14px 10px 0;
    position: relative;
    text-align: center;
}

.podium-card.rank-1 {
    background: linear-gradient(180deg, #fff9e6, #ffefb8);
    border-color: #d4a72c;
    box-shadow: 0 12px 30px rgba(212, 167, 44, 0.2);
    order: 2;
    padding-top: 22px;
}

.podium-card.rank-2 { order: 1; }
.podium-card.rank-3 { order: 3; }

.crown {
    animation: crown-float 2.5s ease-in-out infinite;
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 4px;
}

@keyframes crown-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.rank-ribbon {
    align-items: center;
    background: linear-gradient(135deg, #d4a72c, #f0c84a);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 700;
    gap: 4px;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    padding: 4px 10px;
    text-transform: uppercase;
}

.rank-2 .rank-ribbon { background: linear-gradient(135deg, #9a8b6f, #c4b08d); }
.rank-3 .rank-ribbon { background: linear-gradient(135deg, #b87333, #d49a5a); }

.medal-emoji { font-size: 0.85rem; }

/* ---- Photo (always perfect circle) ---- */
.photo-frame {
    flex-shrink: 0;
    height: 76px;
    margin-bottom: 10px;
    position: relative;
    width: 76px;
}

.rank-1 .photo-frame {
    height: 110px;
    width: 110px;
}

.rank-2 .photo-frame {
    height: 72px;
    width: 72px;
}

.rank-3 .photo-frame {
    height: 68px;
    width: 68px;
}

.star-burst {
    animation: burst-spin 12s linear infinite;
    background: conic-gradient(from 0deg, transparent, rgba(255, 214, 102, 0.35), transparent, rgba(255, 214, 102, 0.35), transparent);
    border-radius: 50%;
    height: 130px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    z-index: 0;
}

@keyframes burst-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.student-photo {
    aspect-ratio: 1 / 1;
    border: 3px solid #e8c96a;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    object-fit: cover;
    object-position: center top;
    position: relative;
    width: 100%;
    z-index: 1;
}

/* Override owl-carousel img { width: 100% } which stretches photos */
.top-performers-carousel .owl-item img.student-photo {
    height: 76px;
    max-height: 76px;
    max-width: 76px;
    min-height: 76px;
    min-width: 76px;
    width: 76px;
}

.rank-1 .student-photo {
    border-color: #d4a72c;
    border-width: 4px;
    box-shadow: 0 0 0 3px rgba(212, 167, 44, 0.2);
}

.top-performers-carousel .owl-item .rank-1 img.student-photo {
    height: 110px;
    max-height: 110px;
    max-width: 110px;
    min-height: 110px;
    min-width: 110px;
    width: 110px;
}

.top-performers-carousel .owl-item .rank-2 img.student-photo {
    height: 72px;
    max-height: 72px;
    max-width: 72px;
    min-height: 72px;
    min-width: 72px;
    width: 72px;
}

.top-performers-carousel .owl-item .rank-3 img.student-photo {
    height: 68px;
    max-height: 68px;
    max-width: 68px;
    min-height: 68px;
    min-width: 68px;
    width: 68px;
}

.rank-medal {
    align-items: center;
    background: linear-gradient(135deg, #ffe082, #f5b800);
    border: 2px solid #fff;
    border-radius: 50%;
    bottom: 2px;
    box-shadow: 0 3px 10px rgba(180, 134, 11, 0.3);
    color: #5c4200;
    display: flex;
    font-size: 0.75rem;
    font-weight: 800;
    height: 26px;
    justify-content: center;
    position: absolute;
    right: -2px;
    width: 26px;
    z-index: 2;
}

.rank-1 .rank-medal { font-size: 0.85rem; height: 30px; width: 30px; }
.rank-2 .rank-medal { background: linear-gradient(135deg, #e8e0d0, #b8a88a); }
.rank-3 .rank-medal { background: linear-gradient(135deg, #e8b86d, #c98a2e); color: #fff; }

.student-name {
    color: #3f3210;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 2px;
    max-width: 100%;
    overflow: hidden;
    padding: 0 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-1 .student-name { font-size: 0.98rem; }

.student-roll {
    color: #8a7640;
    font-size: 0.72rem;
    margin-bottom: 8px;
}

.score-pill {
    background: #fff9e6;
    border: 1px solid #efd98d;
    border-radius: 999px;
    color: #a67c00;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 6px;
    padding: 5px 12px;
}

.rank-1 .score-pill { font-size: 1rem; }

.score-pill small {
    color: #8a7640;
    font-size: 0.78rem;
    font-weight: 500;
}

.percent-badge {
    background: #d4a72c;
    border-radius: 6px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 12px;
    padding: 3px 8px;
}

.rank-2 .percent-badge { background: #9a8b6f; }
.rank-3 .percent-badge { background: #b87333; }

.podium-block {
    background: linear-gradient(180deg, #f0d078, #d4a72c);
    border-radius: 6px 6px 0 0;
    margin-top: auto;
    width: 100%;
}

.block-1 { height: 28px; }
.block-2 { height: 16px; }
.block-3 { height: 10px; }

.slide-footer {
    border-top: 1px solid #f0dfa0;
    color: #8a6518;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 16px;
    padding-top: 12px;
    position: relative;
    text-align: center;
    z-index: 2;
}

.footer-star {
    color: #d4a72c;
    font-size: 0.7rem;
    margin: 0 6px;
}

/* Carousel controls */
.top-performers-carousel .owl-nav button {
    background: #fff !important;
    border: 1px solid #d4a72c !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    color: #a67c00 !important;
    font-size: 1.2rem !important;
    height: 40px;
    line-height: 38px !important;
    width: 40px;
}

.top-performers-carousel .owl-dots {
    margin-top: 16px;
    text-align: center;
}

.top-performers-carousel .owl-dot span {
    background: #e0c068 !important;
}

.top-performers-carousel .owl-dot.active span {
    background: #c98a2e !important;
}

/* Empty state */
.empty-screen {
    max-width: 480px;
    text-align: center;
    z-index: 1;
}

.empty-trophy { font-size: 3.5rem; margin-bottom: 14px; }
.empty-screen h2 { font-size: 1.5rem; margin-bottom: 8px; }
.empty-screen p { color: #7a6528; font-size: 0.9rem; line-height: 1.5; }

/* Mobile */
@media (max-width: 700px) {
    .podium {
        gap: 10px;
        grid-template-columns: 1fr 1.1fr 1fr;
    }

    .rank-1 .photo-frame { height: 90px; width: 90px; }
    .rank-2 .photo-frame { height: 62px; width: 62px; }
    .rank-3 .photo-frame { height: 58px; width: 58px; }

    .top-performers-carousel .owl-item .rank-1 img.student-photo {
        height: 90px;
        max-height: 90px;
        max-width: 90px;
        min-height: 90px;
        min-width: 90px;
        width: 90px;
    }

    .top-performers-carousel .owl-item .rank-2 img.student-photo {
        height: 62px;
        max-height: 62px;
        max-width: 62px;
        min-height: 62px;
        min-width: 62px;
        width: 62px;
    }

    .top-performers-carousel .owl-item .rank-3 img.student-photo {
        height: 58px;
        max-height: 58px;
        max-width: 58px;
        min-height: 58px;
        min-width: 58px;
        width: 58px;
    }

    .star-burst { height: 110px; width: 110px; }

    .student-name {
        font-size: 0.78rem;
        white-space: normal;
    }

    .slide-meta span { font-size: 0.72rem; }
}

@media (max-width: 480px) {
    .podium {
        grid-template-columns: 1fr;
        margin: 0 auto;
        max-width: 280px;
    }

    .podium-card.rank-1,
    .podium-card.rank-2,
    .podium-card.rank-3 {
        order: initial;
    }

    .podium-block { display: none; }
}