/* The award slide is isolated from the four existing course slides. */
html body .hero-section .hero-slider > .hero-slide.topper-slide {
    inset: 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    transform: none !important;
    background: linear-gradient(118deg, #6630dc 0%, #3863ee 25%, #bc42d7 47%, #f879a8 68%, #ffb653 84%, #43dfd3 100%);
}

.hero-slider.topper-current {
    min-height: var(--topper-scene-height, 650px);
}

.hero-section.topper-current > .platform-rail {
    display: none;
}

.hero-section.topper-current > .hero-controls {
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.topper-lights {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(255, 236, 196, 0.4), transparent 32%);
}

.topper-beam {
    position: absolute;
    top: -10%;
    width: 43%;
    height: 135%;
    clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
    transform-origin: 50% 0;
    mix-blend-mode: screen;
    background: linear-gradient(180deg, rgba(255, 247, 181, 0.65), rgba(255, 255, 255, 0.03));
}

.topper-beam-one { left: -15%; transform: rotate(-22deg); }
.topper-beam-two { left: 36%; transform: rotate(22deg); background: linear-gradient(180deg, rgba(115, 255, 244, 0.6), transparent); }
.topper-beam-three { right: -16%; transform: rotate(28deg); background: linear-gradient(180deg, rgba(255, 219, 242, 0.75), transparent); }

.topper-confetti,
.topper-sparkle {
    position: absolute;
    top: var(--y);
    left: var(--x);
    display: block;
    pointer-events: none;
}

.topper-confetti {
    width: 5px;
    height: 11px;
    background: var(--confetti-color);
    opacity: 0.75;
    transform: rotate(var(--turn));
    box-shadow: 0 0 8px rgba(255, 231, 142, 0.32);
}

.topper-sparkle {
    width: 11px;
    height: 11px;
    background: #fff8c8;
    clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
    opacity: 0.7;
}

.topper-trophy {
    position: absolute;
    left: 3%;
    top: 26%;
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(91, 28, 151, 0.22));
    pointer-events: none;
}

.topper-content {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
    min-height: 650px;
    display: grid;
    align-content: center;
    gap: 18px;
    margin-inline: auto;
    padding: 26px 48px 24px;
    text-align: center;
}

.topper-heading {
    position: relative;
    z-index: 2;
}

.topper-eyebrow {
    display: inline-block;
    margin-bottom: 9px;
    color: #ffedab;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.topper-heading h2 {
    display: grid;
    gap: 4px;
    margin: 0;
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.topper-course-title {
    font-size: 24px;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(62, 21, 139, 0.25);
}

.topper-session-title {
    font-size: 54px;
    color: #fff3ad;
    background: linear-gradient(100deg, #fffbdc, #ffe673 42%, #ffffff 63%, #adfff0);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 1px rgba(99, 28, 134, 0.17));
}

.topper-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr) minmax(0, 1fr);
    align-items: end;
    gap: 22px;
    width: min(880px, 100%);
    margin: 15px auto 0;
}

.topper-student {
    --rank-metal: #eff8ff;
    --rank-light: #83c9ff;
    --rank-shadow: rgba(69, 62, 218, 0.38);
    position: relative;
    display: grid;
    justify-items: center;
    min-width: 0;
}

.topper-rank-1 {
    --rank-metal: #ffe89b;
    --rank-light: #ffe67c;
    --rank-shadow: rgba(255, 206, 66, 0.6);
    z-index: 2;
}

.topper-rank-3 {
    --rank-metal: #ffd2a3;
    --rank-light: #ffb490;
    --rank-shadow: rgba(255, 117, 173, 0.48);
}

.topper-photo-wrap {
    --portrait-height: 235px;
    position: relative;
    width: 100%;
    height: var(--portrait-height);
    max-width: 230px;
    z-index: 1;
}

.topper-rank-1 .topper-photo-wrap { --portrait-height: 285px; max-width: 280px; }
.topper-rank-3 .topper-photo-wrap { --portrait-height: 220px; }

.topper-photo-frame {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: min(100%, calc(var(--portrait-height) * 0.666667));
    aspect-ratio: 2 / 3;
    transform: translateX(-50%);
}

.topper-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 0 16px var(--rank-shadow));
}

.topper-crown {
    position: absolute;
    z-index: 2;
    top: -22px;
    left: 50%;
    width: 65px;
    height: 50px;
    transform: translateX(-50%) rotate(-6deg);
    background: linear-gradient(145deg, #fff4b5, #ffe363 40%, #dd970b);
    mask: url('../icons/topper-crown.svg') center / contain no-repeat;
    -webkit-mask: url('../icons/topper-crown.svg') center / contain no-repeat;
    filter: drop-shadow(0 0 12px #ffe47e);
}

.topper-podium {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    min-height: 138px;
    padding: 15px 10px 14px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.91), rgba(235, 234, 255, 0.82)) padding-box,
        linear-gradient(130deg, #ffffff, var(--rank-metal), var(--rank-light), #ffffff) border-box;
    box-shadow: 0 12px 28px rgba(68, 28, 133, 0.18), 0 0 28px var(--rank-shadow), inset 0 1px 0 #ffffff;
    backdrop-filter: blur(16px);
    color: #35205a;
}

.topper-podium::before {
    content: '';
    position: absolute;
    top: -9px;
    left: -2px;
    right: -2px;
    height: 15px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: linear-gradient(90deg, var(--rank-metal), #ffffff, var(--rank-light));
    box-shadow: 0 0 20px var(--rank-shadow);
}

.topper-rank-1 .topper-podium {
    min-height: 160px;
    padding-top: 19px;
    background: linear-gradient(145deg, rgba(255, 251, 223, 0.94), rgba(255, 231, 151, 0.9)) padding-box,
        linear-gradient(130deg, #ffffff, #fff2ac, #ffc229, #ffffff) border-box;
}

.topper-medal {
    position: absolute;
    top: -21px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    transform: translateX(-50%);
    border: 2px solid #fff7d8;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff, var(--rank-metal), var(--rank-light));
    box-shadow: 0 3px 10px var(--rank-shadow);
    color: #634322;
    font-size: 16px;
    font-weight: 900;
}

.topper-rank-label {
    display: block;
    margin: 4px 0 5px;
    color: #6b477a;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.topper-podium h3 {
    margin: 0;
    color: #302051;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.topper-marks { margin: 8px 0 0; line-height: 1.2; overflow-wrap: anywhere; }
.topper-marks strong { font-size: 26px; font-weight: 900; color: #6a36b8; }
.topper-rank-1 .topper-marks strong { color: #76500d; }
.topper-marks > span { font-size: 16px; color: #674d7d; }
.topper-marks-label { font-size: 10px; color: #684a7b; }
.topper-demo-note { margin: 0; color: #ffffff; font-size: 11px; text-shadow: 0 1px 5px #6d34ab; }

.admin-toppers-grid { margin-top: 1.5rem; }
.admin-gallery-item .admin-topper-photo { height: 190px; object-fit: contain; background: rgba(255, 255, 255, 0.08); }
.admin-gallery-form .admin-topper-demo-toggle { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.admin-topper-demo-toggle input[type='checkbox'] { width: 18px; height: 18px; min-height: 0; accent-color: #f1c40f; }

/* Retain the exact background framing of the original four slides after insertion. */
.hero-slider.has-topper-slide > .hero-slide:nth-child(2),
.hero-slider.has-topper-slide > .hero-slide:nth-child(4) { background-position: center top; }
.hero-slider.has-topper-slide > .hero-slide:nth-child(3),
.hero-slider.has-topper-slide > .hero-slide:nth-child(5) { background-position: center center; }

@media (max-width: 1080px) {
    .hero-slider.has-topper-slide > .hero-slide:nth-child(5) { background-position: 58% center; }
    .topper-trophy { width: 75px; height: 75px; left: 1%; }
}

@media (max-width: 680px) {
    .topper-content { min-height: 580px; padding: 28px 12px 24px; gap: 20px; }
    .hero-slider.topper-current { min-height: var(--topper-scene-height, 580px); }
    .topper-course-title { font-size: 17px; }
    .topper-session-title { font-size: 30px; }
    .topper-eyebrow { font-size: 9px; }
    .topper-stage { gap: 7px; margin-top: 25px; }
    .topper-photo-wrap { --portrait-height: 175px; }
    .topper-rank-1 .topper-photo-wrap { --portrait-height: 220px; }
    .topper-rank-3 .topper-photo-wrap { --portrait-height: 165px; }
    .topper-podium { min-height: 125px; padding: 16px 4px 10px; }
    .topper-rank-1 .topper-podium { min-height: 145px; padding-top: 20px; }
    .topper-podium h3 { font-size: 14px; }
    .topper-marks strong { font-size: 19px; }
    .topper-marks > span { font-size: 12px; }
    .topper-marks-label { font-size: 9px; }
    .topper-rank-label { font-size: 10px; }
    .topper-crown { width: 50px; height: 40px; top: -18px; }
    .topper-trophy { width: 50px; height: 50px; top: 27%; left: 0; }
    .topper-demo-note { font-size: 9px; }
    .hero-slider.has-topper-slide > .hero-slide:nth-child(2) { background-position: 52% top; }
    .hero-slider.has-topper-slide > .hero-slide:nth-child(3),
    .hero-slider.has-topper-slide > .hero-slide:nth-child(4) { background-position: 50% top; }
    .hero-slider.has-topper-slide > .hero-slide:nth-child(5) { background-position: 62% top; }
}

@media (max-width: 380px) {
    .hero-slider.has-topper-slide > .hero-slide:nth-child(2) { background-position: 55% top; }
    .hero-slider.has-topper-slide > .hero-slide:nth-child(5) { background-position: 66% top; }
    .topper-session-title { font-size: 27px; }
    .topper-podium h3 { font-size: 13px; }
}