/* css/game-stage.css */
:root {
    --card-bg: #0b111a;
    --cyan: #00d4ff;
    --magenta: #e21dff;
    --ice-blue: #b8eaff;
    --border-inner: #1a2633;
    --gradient: linear-gradient(90deg, #00d4ff 0%, #e21dff 100%);
}

.wheel-panel,
.quiz-panel,
.panel-stage {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-inner);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.quiz-panel {
    max-height: 85vh;
    overflow-y: auto;
}

/* Sleek Scrollbar for the Game Stage */
.quiz-panel::-webkit-scrollbar {
    width: 5px;
}

.quiz-panel::-webkit-scrollbar-track {
    background: transparent;
}

.quiz-panel::-webkit-scrollbar-thumb {
    background: var(--border-inner);
    border-radius: 10px;
}

.quiz-panel::-webkit-scrollbar-thumb:hover {
    background: var(--cyan);
}

/* Typography */
.stats-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    color: var(--cyan);
    font-size: 0.7rem;
    font-weight: 700;
}

.stats-bar .lives-display {
    padding-top: 3px;
}

.stats-bar .stat-group strong,
.stats-bar #streak-number {
    color: var(--ice-blue);
}

.stats-bar #streak-number {
    font-weight: bolder;
}

.question-text {
    font-size: 1.3rem;
    line-height: 1.5;
    margin-bottom: 2rem;
    word-wrap: break-word;
}

/* Interactive Elements */
.btn-primary {
    width: 100%;
    background: var(--gradient);
    border: none;
    padding: 1.1rem;
    border-radius: 50px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
}

.btn-answer {
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-inner);
    padding: 1.1rem;
    border-radius: 10px;
    color: #fff;
    text-align: left;
    margin-bottom: 0.75rem;
    cursor: pointer;
}

.question-answer-block.transition-in-zero .question-text {
    opacity: 0;
}

.question-answer-block.transition-in-zero .btn-answer {
    opacity: 0;
    transform: translateX(30px);
    transition: background-color 0.2s;
    /* Keep your hover effects smooth */
}

/* ANIMATE IN AND OUT QUESTIONS */
/* The Animation Trigger Class */
.animate-drop {
    animation: dropIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.animate-slide {
    animation: slideInRight 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Keyframes */
@keyframes dropIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Utility to trigger the staggered animation via JS */
.animate-entrance {
    animation: slideInRight 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ANIMATE IN AND OUT QUESTIONS END */




.btn-answer:hover {
    border-color: var(--cyan);
}

.btn-answer.selected {
    background: var(--gradient);
    color: #000;
    font-weight: 700;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    border: none;
}

.btn-answer.correct {
    background: var(--cyan);
    color: #000;
    font-weight: bold;
    box-shadow: 0 0 25px var(--cyan);
    border-color: var(--cyan);
}

.btn-answer.selected.wrong {
    opacity: 0.5;
    border-color: var(--magenta);
}

/* Wheel Canvas Wrapper */
.wheel-wrapper {
    position: relative;
    /* width: 260px;
    height: 260px; */
    margin: 0 auto 2rem;
}

#wheelCanvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* ads to css/game-stage.css */

.sync-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 17, 26, 0.8);
    /* Match your card-bg */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
    border-radius: 16px;
    backdrop-filter: blur(4px);
    /* Modern tech feel */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sync-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* A small pulse animation for the waiting icon */
.pulse-loader {
    width: 40px;
    height: 40px;
    border: 3px solid var(--cyan);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Shake the whole life-container */
.shake-damage {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* Make the specific heart shatter and fade */
.heart-lost {
    transition: all 0.6s ease;
    transform: scale(2);
    filter: grayscale(1) blur(2px);
    opacity: 0;
}

/* The container */
.streak-display {
    display: inline-block;
    font-weight: bold;
    position: relative;
}

/* Smoke/Extinguish Animation */
.extinguish {
    animation: puff-out 0.8s ease-out forwards;
}

@keyframes puff-out {
    0% {
        transform: scale(1);
        filter: brightness(1) blur(0);
    }

    30% {
        transform: scale(1.5);
        filter: brightness(0.5) blur(2px) grayscale(1);
        color: #555;
    }

    100% {
        transform: translateY(-20px) scale(2);
        filter: blur(10px) opacity(0);
    }
}

/* The Number Fall */
.number-fall {
    display: inline-block;
    animation: drop-off 0.6s ease-in forwards;
}

@keyframes drop-off {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(50px) rotate(-15deg);
        opacity: 0;
    }
}

/* The Fire Smoke Effect */
.extinguish {
    display: inline-block;
    animation: puff-out 0.8s ease-out forwards;
}

@keyframes puff-out {
    0% {
        transform: scale(1);
        filter: blur(0);
    }

    30% {
        transform: scale(1.6);
        filter: blur(2px) grayscale(1);
        color: #555;
    }

    100% {
        transform: translateY(-30px) scale(2);
        filter: blur(12px) opacity(0);
    }
}

/* The Number Falling Effect */
.number-fall {
    display: inline-block;
    animation: drop-off 0.7s ease-in forwards;
}

@keyframes drop-off {
    0% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-5px);
    }

    /* Slight hop before fall */
    100% {
        transform: translateY(60px) rotate(-20deg);
        opacity: 0;
    }
}

/* The Fire "Ignition" */
.fire-boost {
    display: inline-block;
    animation: fire-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

@keyframes fire-pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.8) rotate(-15deg);
        filter: brightness(1.5);
    }

    100% {
        transform: scale(1);
    }
}

/* The Number "Punch" */
.number-inc {
    display: inline-block;
    animation: num-punch 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.5);
}

@keyframes num-punch {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.6);
        color: #ffeb3b;
        text-shadow: 0 0 10px rgba(255, 235, 59, 0.8);
    }

    100% {
        transform: scale(1);
    }
}

/* Ensure the container doesn't clip the particles */
#streak-container {
    position: relative;
    display: inline-block;
    overflow: visible !important;
}