/* Lightweight no-image celebration system for perfect quiz scores. */
:root{
    --quiz-party-z:2147483000;
}

.quiz-party-layer{
    position:fixed;
    inset:0;
    z-index:var(--quiz-party-z);
    pointer-events:none;
    overflow:hidden;
    direction:rtl;
    font-family:inherit;
}

.quiz-party-layer *,
.quiz-party-layer *::before,
.quiz-party-layer *::after{
    box-sizing:border-box;
}

.quiz-party-layer::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 22%, rgba(255,255,255,.72), rgba(255,255,255,0) 28%),
        linear-gradient(135deg, rgba(37,99,235,.16), rgba(20,184,166,.12), rgba(250,204,21,.16));
    opacity:0;
    animation:party-screen-glow 6.4s ease forwards;
}

.quiz-party-piece{
    position:absolute;
    display:block;
    line-height:1;
    will-change:transform, opacity;
}

.quiz-party-modal{
    position:absolute;
    left:50%;
    top:50%;
    width:min(90vw, 430px);
    min-height:250px;
    padding:28px 24px 26px;
    transform:translate(-50%, -50%) scale(.76);
    border:1px solid rgba(255,255,255,.78);
    border-radius:28px;
    background:rgba(255,255,255,.92);
    color:#0f172a;
    text-align:center;
    box-shadow:0 30px 90px rgba(15,23,42,.24);
    backdrop-filter:blur(18px);
    opacity:0;
    animation:party-modal-in .7s cubic-bezier(.2,1.35,.32,1) .1s forwards,
        party-modal-out .48s ease 5.85s forwards;
}

.quiz-party-modal::before{
    content:"";
    position:absolute;
    inset:-3px;
    z-index:-1;
    border-radius:31px;
    background:conic-gradient(from 140deg,#ef4444,#f59e0b,#22c55e,#2563eb,#8b5cf6,#ec4899,#ef4444);
    opacity:.78;
    filter:blur(1px);
}

.quiz-party-modal-icon{
    display:grid;
    place-items:center;
    width:88px;
    height:88px;
    margin:0 auto 12px;
    border-radius:50%;
    background:linear-gradient(135deg,#fff7ed,#fef3c7);
    font-size:52px;
    box-shadow:0 16px 38px rgba(245,158,11,.26);
    animation:party-icon-bounce 1.1s ease-in-out infinite alternate;
}

.quiz-party-modal strong{
    display:block;
    font-size:clamp(1.35rem, 4.4vw, 2rem);
    font-weight:900;
    line-height:1.45;
    color:#0f172a;
}

.quiz-party-modal span{
    display:block;
    margin:8px auto 0;
    max-width:330px;
    color:#475569;
    font-size:1rem;
    font-weight:700;
    line-height:1.7;
}

.quiz-party-modal b{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:104px;
    min-height:48px;
    margin-top:16px;
    padding:8px 18px;
    border-radius:999px;
    background:#0f172a;
    color:#fff;
    font-size:1.35rem;
    font-weight:900;
    box-shadow:0 14px 34px rgba(15,23,42,.22);
}

.party-emoji-rain{
    top:-72px;
    font-size:var(--size);
    filter:drop-shadow(0 10px 16px rgba(15,23,42,.18));
    animation:party-emoji-rain var(--duration) linear var(--delay) forwards;
}

.party-confetti-piece{
    top:-24px;
    width:10px;
    height:14px;
    border-radius:3px;
    animation:party-confetti-fall var(--duration) linear var(--delay) forwards;
}

.party-confetti-piece.circle{
    border-radius:50%;
}

.party-confetti-piece.strip{
    width:7px;
    height:26px;
    border-radius:99px;
}

.party-confetti-piece.triangle{
    width:0;
    height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:15px solid currentColor;
    background:transparent !important;
    color:#f59e0b;
}

.party-firework{
    left:var(--x);
    top:var(--y);
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--color);
    box-shadow:0 0 18px var(--color);
    animation:party-pop .82s ease-out var(--delay) forwards;
}

.party-firework::before,
.party-firework::after{
    content:"";
    position:absolute;
    inset:-34px;
    border-radius:50%;
    border:3px dotted var(--color);
    transform:scale(.05);
    opacity:.9;
    animation:party-ring 1s ease-out var(--delay) forwards;
}

.party-firework::after{
    inset:-56px;
    border-width:2px;
    animation-duration:1.22s;
}

.party-pop-emoji{
    left:var(--x);
    top:var(--y);
    font-size:var(--size);
    transform:translate(-50%, -50%) scale(.2);
    opacity:0;
    animation:party-pop-emoji 1.25s ease-out var(--delay) forwards;
}

.party-gift-stage{
    position:absolute;
    left:50%;
    top:50%;
    width:min(76vw, 380px);
    height:330px;
    transform:translate(-50%, -50%);
}

.party-gift-box{
    position:absolute;
    left:50%;
    bottom:32px;
    width:160px;
    height:120px;
    transform:translateX(-50%);
    border-radius:18px 18px 24px 24px;
    background:linear-gradient(135deg,#ef4444,#be123c);
    box-shadow:0 24px 50px rgba(190,18,60,.28);
    animation:party-gift-bounce 1s ease both;
}

.party-gift-box::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:34px;
    height:100%;
    transform:translateX(-50%);
    background:#fde047;
}

.party-gift-box::after{
    content:"";
    position:absolute;
    left:0;
    top:45%;
    width:100%;
    height:28px;
    background:#facc15;
}

.party-gift-lid{
    position:absolute;
    left:50%;
    bottom:145px;
    width:184px;
    height:44px;
    transform:translateX(-50%);
    border-radius:15px;
    background:linear-gradient(135deg,#f43f5e,#be123c);
    box-shadow:0 12px 22px rgba(190,18,60,.24);
    animation:party-gift-open 1.25s ease .55s forwards;
}

.party-gift-lid::before,
.party-gift-lid::after{
    content:"";
    position:absolute;
    top:-43px;
    width:58px;
    height:49px;
    border:12px solid #fde047;
    border-radius:50% 50% 10px 50%;
}

.party-gift-lid::before{
    right:50%;
    transform:rotate(18deg);
}

.party-gift-lid::after{
    left:50%;
    transform:scaleX(-1) rotate(18deg);
}

.party-gift-message{
    position:absolute;
    left:50%;
    bottom:154px;
    width:min(90vw, 340px);
    transform:translateX(-50%) scale(.72);
    padding:18px 20px;
    border-radius:22px;
    background:#fff;
    color:#0f172a;
    text-align:center;
    box-shadow:0 24px 66px rgba(15,23,42,.25);
    opacity:0;
    animation:party-gift-message .8s ease 1.05s forwards;
}

.party-gift-icon{
    font-size:42px;
    margin-bottom:4px;
}

.party-gift-message strong{
    display:block;
    color:#16a34a;
    font-size:1.25rem;
    font-weight:900;
    line-height:1.6;
}

.party-gift-message span{
    display:block;
    color:#475569;
    font-weight:700;
    line-height:1.7;
}

.party-spark-emoji{
    font-size:var(--size);
    transform:translate(-50%, -50%) scale(.2);
    opacity:0;
    animation:party-spark-out 1.55s ease-out var(--delay) forwards;
}

.party-spotlight{
    position:absolute;
    inset:-20%;
    background:
        radial-gradient(circle at 50% 46%, rgba(255,255,255,.72), transparent 12%),
        conic-gradient(from 0deg, transparent, rgba(250,204,21,.34), transparent, rgba(56,189,248,.34), transparent);
    animation:party-spotlight-spin 4.2s linear forwards;
}

.party-trophy-emoji{
    left:50%;
    top:50%;
    font-size:clamp(96px, 18vw, 160px);
    transform:translate(-50%, -50%) scale(.38) rotate(-14deg);
    filter:drop-shadow(0 24px 36px rgba(245,158,11,.35));
    animation:party-trophy-in 1s cubic-bezier(.2,1.35,.32,1) forwards,
        party-trophy-float 1.1s ease-in-out 1s infinite alternate;
}

.party-balloon-emoji{
    bottom:-90px;
    font-size:var(--size);
    animation:party-balloon-up var(--duration) ease-in var(--delay) forwards;
}

.party-star-emoji{
    left:var(--x);
    top:var(--y);
    font-size:var(--size);
    filter:drop-shadow(0 8px 14px rgba(15,23,42,.18));
    animation:party-star-burst 1.8s ease-out var(--delay) forwards;
}

.party-applause{
    font-size:var(--size);
    opacity:0;
    transform:scale(.4) rotate(-16deg);
    animation:party-applause-pop 1.8s ease-out var(--delay) forwards;
}

.party-cheer-wave{
    position:absolute;
    left:-8vw;
    bottom:0;
    width:116vw;
    height:22vh;
    transform:translateY(105%);
    border-radius:50% 50% 0 0 / 42% 42% 0 0;
    background:linear-gradient(135deg,rgba(34,197,94,.9),rgba(37,99,235,.9),rgba(236,72,153,.86));
    animation:party-wave-rise 4.2s ease forwards;
}

.party-score-rain{
    top:-56px;
    color:var(--color);
    font-weight:900;
    font-size:var(--size);
    text-shadow:0 8px 18px rgba(15,23,42,.24);
    animation:party-score-rain var(--duration) linear var(--delay) forwards;
}

.party-orbit{
    position:absolute;
    left:50%;
    top:50%;
    width:min(72vw, 430px);
    aspect-ratio:1;
    transform:translate(-50%, -50%) scale(.5);
    border:2px dashed rgba(37,99,235,.34);
    border-radius:50%;
    opacity:0;
    animation:party-orbit-in .7s ease forwards, party-orbit-spin 4.8s linear .7s forwards;
}

.party-orbit span{
    position:absolute;
    left:50%;
    top:50%;
    font-size:42px;
    transform:
        rotate(calc(360deg / var(--total) * var(--i)))
        translateX(min(36vw, 215px))
        rotate(calc(-360deg / var(--total) * var(--i)));
}

.party-rocket{
    bottom:-110px;
    font-size:clamp(76px, 15vw, 132px);
    transform:translateX(-50%) rotate(-8deg);
    filter:drop-shadow(0 18px 28px rgba(15,23,42,.22));
    animation:party-rocket-launch 2.7s cubic-bezier(.2,.9,.2,1) var(--delay) forwards;
}

.party-rocket-spark{
    font-size:var(--size);
    opacity:0;
    animation:party-rocket-spark 1.65s ease-out var(--delay) forwards;
}

.party-medal-emoji{
    top:-88px;
    font-size:var(--size);
    filter:drop-shadow(0 16px 22px rgba(124,45,18,.22));
    animation:party-medal-drop var(--duration) cubic-bezier(.22,1.2,.35,1) var(--delay) forwards;
}

.quiz-party-mini-layer::before{
    display:none;
}

.party-correct-pop{
    font-size:46px;
    transform:translate(-50%, -50%) scale(.35);
    filter:drop-shadow(0 12px 20px rgba(15,23,42,.2));
    animation:party-correct-pop .9s cubic-bezier(.2,1.35,.32,1) forwards;
}

.party-correct-label{
    min-width:42px;
    min-height:34px;
    padding:5px 11px;
    border-radius:999px;
    background:#16a34a;
    color:#fff;
    font-size:20px;
    font-weight:900;
    line-height:1.2;
    text-align:center;
    box-shadow:0 12px 26px rgba(22,163,74,.26);
    transform:translate(-50%, -50%) translateY(26px) scale(.7);
    animation:party-correct-label .95s ease forwards;
}

.party-correct-spark{
    font-size:var(--size);
    transform:translate(-50%, -50%) scale(.2);
    opacity:0;
    animation:party-correct-spark .85s ease-out var(--delay) forwards;
}

.party-wrong-pop{
    font-size:42px;
    transform:translate(-50%, -50%) scale(.55);
    filter:drop-shadow(0 10px 18px rgba(15,23,42,.18));
    animation:party-wrong-pop .82s ease forwards;
}

.party-wrong-label{
    min-width:76px;
    min-height:32px;
    padding:5px 12px;
    border-radius:999px;
    background:#fee2e2;
    color:#b91c1c;
    border:1px solid #fecaca;
    font-size:15px;
    font-weight:900;
    line-height:1.35;
    text-align:center;
    box-shadow:0 10px 22px rgba(185,28,28,.12);
    transform:translate(-50%, -50%) translateY(28px) scale(.8);
    animation:party-wrong-label .88s ease forwards;
}

.party-wrong-mark{
    color:#ef4444;
    font-size:22px;
    font-weight:900;
    text-shadow:0 8px 15px rgba(239,68,68,.2);
    transform:translate(-50%, -50%) scale(.4);
    opacity:0;
    animation:party-wrong-mark .72s ease-out var(--delay) forwards;
}

@keyframes party-screen-glow{
    0%{opacity:0;}
    12%{opacity:1;}
    78%{opacity:.88;}
    100%{opacity:0;}
}

@keyframes party-modal-in{
    to{opacity:1; transform:translate(-50%, -50%) scale(1);}
}

@keyframes party-modal-out{
    to{opacity:0; transform:translate(-50%, -48%) scale(.94);}
}

@keyframes party-icon-bounce{
    from{transform:translateY(0) rotate(-4deg);}
    to{transform:translateY(-9px) rotate(5deg);}
}

@keyframes party-emoji-rain{
    0%{transform:translate3d(0,-40px,0) rotate(0deg); opacity:0;}
    10%{opacity:1;}
    100%{transform:translate3d(var(--drift),112vh,0) rotate(var(--spin)); opacity:.18;}
}

@keyframes party-confetti-fall{
    0%{transform:translate3d(0,-20px,0) rotate(0deg); opacity:1;}
    100%{transform:translate3d(var(--drift),112vh,0) rotate(var(--spin)); opacity:.18;}
}

@keyframes party-pop{
    0%{transform:scale(.2); opacity:0;}
    20%{opacity:1;}
    100%{transform:scale(1); opacity:0;}
}

@keyframes party-ring{
    0%{transform:scale(.06) rotate(0deg); opacity:.95;}
    100%{transform:scale(1.18) rotate(88deg); opacity:0;}
}

@keyframes party-pop-emoji{
    0%{opacity:0; transform:translate(-50%, -50%) scale(.2) rotate(-18deg);}
    24%{opacity:1;}
    100%{opacity:0; transform:translate(-50%, -50%) scale(1.35) rotate(22deg);}
}

@keyframes party-gift-bounce{
    0%{transform:translateX(-50%) translateY(30px) scale(.82); opacity:0;}
    60%{transform:translateX(-50%) translateY(-12px) scale(1.04); opacity:1;}
    100%{transform:translateX(-50%) translateY(0) scale(1);}
}

@keyframes party-gift-open{
    to{transform:translateX(-50%) translate(-45px,-96px) rotate(-24deg);}
}

@keyframes party-gift-message{
    to{opacity:1; transform:translateX(-50%) scale(1);}
}

@keyframes party-spark-out{
    0%{transform:translate(-50%, -50%) scale(.2) rotate(0deg); opacity:0;}
    15%{opacity:1;}
    100%{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15) rotate(220deg); opacity:0;}
}

@keyframes party-spotlight-spin{
    from{transform:rotate(0deg) scale(1); opacity:0;}
    12%{opacity:1;}
    to{transform:rotate(250deg) scale(1.18); opacity:0;}
}

@keyframes party-trophy-in{
    to{opacity:1; transform:translate(-50%, -50%) scale(1) rotate(0deg);}
}

@keyframes party-trophy-float{
    from{transform:translate(-50%, -50%) translateY(0) scale(1);}
    to{transform:translate(-50%, -50%) translateY(-16px) scale(1.03);}
}

@keyframes party-balloon-up{
    0%{transform:translateY(0) translateX(0) rotate(-5deg); opacity:0;}
    8%{opacity:1;}
    100%{transform:translateY(-122vh) translateX(var(--drift)) rotate(10deg); opacity:.68;}
}

@keyframes party-star-burst{
    0%{transform:translate3d(0,0,0) scale(.18) rotate(0deg); opacity:0;}
    22%{opacity:1;}
    100%{transform:translate3d(var(--dx),var(--dy),0) scale(1.18) rotate(220deg); opacity:0;}
}

@keyframes party-applause-pop{
    0%{opacity:0; transform:scale(.4) rotate(-16deg);}
    18%{opacity:1; transform:scale(1.08) rotate(8deg);}
    55%{opacity:1; transform:scale(.92) rotate(-8deg);}
    100%{opacity:0; transform:scale(1.18) rotate(16deg);}
}

@keyframes party-wave-rise{
    0%{transform:translateY(105%);}
    22%{transform:translateY(0);}
    76%{transform:translateY(0);}
    100%{transform:translateY(110%);}
}

@keyframes party-score-rain{
    0%{transform:translateY(-46px) rotate(-8deg); opacity:0;}
    12%{opacity:1;}
    100%{transform:translateY(114vh) rotate(14deg); opacity:0;}
}

@keyframes party-orbit-in{
    to{opacity:1; transform:translate(-50%, -50%) scale(1);}
}

@keyframes party-orbit-spin{
    to{transform:translate(-50%, -50%) scale(1) rotate(360deg); opacity:0;}
}

@keyframes party-rocket-launch{
    0%{transform:translateX(-50%) translateY(0) rotate(-8deg); opacity:0;}
    12%{opacity:1;}
    100%{transform:translateX(-50%) translateY(-124vh) rotate(8deg); opacity:0;}
}

@keyframes party-rocket-spark{
    0%{transform:translate3d(0,0,0) scale(.3); opacity:0;}
    18%{opacity:1;}
    100%{transform:translate3d(var(--dx),var(--dy),0) scale(1.15); opacity:0;}
}

@keyframes party-medal-drop{
    0%{transform:translateY(0) translateX(0) rotate(-16deg); opacity:0;}
    18%{opacity:1;}
    72%{transform:translateY(55vh) translateX(var(--drift)) rotate(12deg); opacity:1;}
    100%{transform:translateY(114vh) translateX(var(--drift)) rotate(24deg); opacity:0;}
}

@keyframes party-correct-pop{
    0%{opacity:0; transform:translate(-50%, -50%) scale(.35) rotate(-12deg);}
    38%{opacity:1; transform:translate(-50%, -50%) scale(1.08) rotate(6deg);}
    100%{opacity:0; transform:translate(-50%, -50%) translateY(-44px) scale(.9) rotate(10deg);}
}

@keyframes party-correct-label{
    0%{opacity:0; transform:translate(-50%, -50%) translateY(26px) scale(.7);}
    25%{opacity:1; transform:translate(-50%, -50%) translateY(38px) scale(1);}
    100%{opacity:0; transform:translate(-50%, -50%) translateY(-6px) scale(.88);}
}

@keyframes party-correct-spark{
    0%{opacity:0; transform:translate(-50%, -50%) scale(.2) rotate(0deg);}
    20%{opacity:1;}
    100%{opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.05) rotate(180deg);}
}

@keyframes party-wrong-pop{
    0%{opacity:0; transform:translate(-50%, -50%) scale(.55) rotate(-8deg);}
    22%{opacity:1; transform:translate(-50%, -50%) scale(1.02) rotate(6deg);}
    54%{opacity:1; transform:translate(-50%, -50%) translateX(-5px) scale(.96) rotate(-4deg);}
    76%{opacity:.8; transform:translate(-50%, -50%) translateX(5px) scale(.94) rotate(4deg);}
    100%{opacity:0; transform:translate(-50%, -50%) translateY(-28px) scale(.82) rotate(0deg);}
}

@keyframes party-wrong-label{
    0%{opacity:0; transform:translate(-50%, -50%) translateY(28px) scale(.8);}
    26%{opacity:1; transform:translate(-50%, -50%) translateY(38px) scale(1);}
    100%{opacity:0; transform:translate(-50%, -50%) translateY(8px) scale(.9);}
}

@keyframes party-wrong-mark{
    0%{opacity:0; transform:translate(-50%, -50%) scale(.4) rotate(0deg);}
    24%{opacity:1;}
    100%{opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(16deg);}
}

@media (max-width:700px){
    .quiz-party-modal{
        width:min(92vw, 360px);
        min-height:230px;
        padding:24px 18px 22px;
        border-radius:24px;
    }

    .quiz-party-modal-icon{
        width:76px;
        height:76px;
        font-size:44px;
    }
}

@media (prefers-reduced-motion: reduce){
    .quiz-party-layer{
        display:none;
    }
}