body, html {
    overflow-x: hidden; /* yatay scrollbar tamamen kalkar */
}


/* ===== GENEL ===== */
.quiz-msg{
    display:inline-block;
    color:#ff7a00;
    text-shadow:0 0 6px #000, 0 0 12px #000;
}

/* ===== PATLAMA ===== */
.fx-pop{
    animation: fxPop .7s ease;
}
@keyframes fxPop{
    0%{transform:scale(1) rotate(0)}
    30%{transform:scale(1.4) rotate(-5deg)}
    60%{transform:scale(1.25) rotate(5deg)}
    100%{transform:scale(1)}
}

/* ===== SLIDE ===== */
.fx-slide{
    animation: fxSlide .4s ease;
}
@keyframes fxSlide{
    from{transform:translateY(20px);opacity:0}
    to{transform:translateY(0);opacity:1}
}

/* ===== NICK GLOW ===== */
.nick-glow{
    animation: nickGlow 1.2s ease-in-out infinite alternate;
}
@keyframes nickGlow{
    from{ text-shadow:0 0 4px #00ff9c }
    to{ text-shadow:0 0 14px #00ff9c,0 0 24px #00ff9c }
}

/* ===== SURE BITTI ===== */
.fx-timeup{
    animation: timeUp .8s linear 3;
    color:#ff2a2a !important;
}
@keyframes timeUp{
    0%,100%{opacity:1}
    50%{opacity:.2}
}

/* ===== TAC ===== */
.crown{
    position:relative;
}
.crown::after{
    content:"👑";
    position:absolute;
    top:-18px;
    right:-10px;
    font-size:18px;
    animation:crownPop .6s ease;
}
@keyframes crownPop{
    from{transform:scale(0) rotate(-20deg)}
    to{transform:scale(1) rotate(0)}
}







/* ===== KONFETI ===== */
/* Konfeti Taşıyıcı (Patlama Noktası) */
.confetti-container {
    position: fixed;
    top: 50%; /* Ekranın ortasında patlar */
    left: 50%;
    z-index: 9999;
    pointer-events: none;
}

/* Tek bir div'den 50 tane gölge (parçacık) üretiyoruz */
.confetti-burst {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    box-shadow: 
        -100px -80px #ff0000, 100px -100px #00ff00, -120px 100px #0000ff,
        150px 50px #ffff00, -50px 150px #ff00ff, 80px -150px #00ffff,
        -180px -20px #ffa500, 40px 120px #ff69b4, -90px -130px #7cfc00,
        110px 140px #9400d3, 160px -60px #ffffff, -140px 30px #ffd700;
    /* Buradaki shadow listesini ne kadar uzatırsan o kadar çok parça olur */
    
    animation: burstAnimation 1.5s ease-out forwards;
    opacity: 0;
}

@keyframes burstAnimation {
    0% {
        transform: scale(0);
        opacity: 1;
        filter: hue-rotate(0deg);
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(3) translate(var(--tw-translate-x), var(--tw-translate-y));
        opacity: 0;
        filter: hue-rotate(360deg); /* Renkler patlama anında değişsin */
    }
}



@keyframes bounceUpDown {
    0%   { transform: translateY(0); }
    20%  { transform: translateY(-40px); }
    40%  { transform: translateY(0); }
    60%  { transform: translateY(-25px); }
    80%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}

.winner-fly {
    position: fixed;
    z-index: 10000;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 15px #ff00ff, 0 0 30px #00ffff;
    pointer-events: none;
    white-space: nowrap;
    animation: bounceUpDown 1.2s ease-in-out forwards;
    overflow: visible;
    max-width: 100vw;
    transform-origin: center bottom;
}

@keyframes flyToCenterAndBack {
    0% {
        transform: scale(1);
    }
    30%, 70% {
        /* Ekranın tam ortasına git ve büyü */
        /* calc ile başlangıç yerinden merkeze olan farkı kapatıyoruz */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(4);
    }
    100% {
        /* Eski yerine geri dön */
        top: var(--start-y);
        left: var(--start-x);
        transform: scale(1);
        opacity: 0;
    }
}