/* เพิ่มความโค้งมนและเงาให้ดูเป็นเกม */
.rounded-2xl { border-radius: 1.5rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3); }

/* ทำให้กล่อง Rewards ดูมีมิติ */
.bg-red-500 { background-color: #ef4444; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); } /* ระยะดึ๋ยขึ้นไป 15px */
}

.animate-float {
    animation: float 3s ease-in-out infinite; /* 3 วินาทีต่อ 1 รอบ */
}

.zoom-dots{
    width: 100%;
    height: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.zoom-dots span{
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 9999px;
    opacity: .7;
    transition: all .25s ease;
}

.zoom-dots span.active{
    transform: scale(1.15);
    opacity: 1;
}

.zoom-knob{
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    background: white;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
    transition: top .35s ease;
    z-index: 5;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
}

.selected {
    background-color: #facc15;
    color: #1e3a8a;
}

#tabsWrapper::-webkit-scrollbar {
    display: none;
}

#tabsWrapper {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@keyframes popIn {

    0%{
        transform:scale(.3);
        opacity:0;
    }

    60%{
        transform:scale(1.15);
        opacity:1;
    }

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

.countdown-pop{
    animation:.45s popIn;
}

/* ปรับปรุง main-reveal ให้เลื่อนแค่ในขอบเขตที่กำหนด */
.main-reveal {
    animation: slideReveal 0.8s cubic-bezier(.25, .8, .25, 1) forwards;
}

@keyframes slideReveal {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}

.go-big {
    transform: scale(2);
    transition: transform 0.3s ease;
}

@keyframes scorePop {

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.2);
    }

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

.score-pop{

    animation:
        scorePop .5s ease;
}

@keyframes curtainClose {

    from{
        transform: translateY(-100%);
    }

    to{
        transform: translateY(0);
    }
}

.main-close{
    animation: curtainClose 0.8s cubic-bezier(.25, .8, .25, 1) forwards;
}

@keyframes titleFloat {

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }
}

#curtainTitle{

    animation:
        titleFloat 1.5s ease-in-out infinite;
}