@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); body {
    font-family: Montserrat, sans-serif;
    line-height: 1.6;
    font-size: 15px;
    margin: 0px auto;
    color: rgb(25, 25, 25);
    background: url("../images/bg.jpg") center top / cover no-repeat rgb(0, 0, 0);
}

a {
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s;
}

a:hover, a:focus {
    text-decoration: none;
}

img {
    max-width: 100%;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], textarea, select {
    color: rgb(102, 102, 102);
    width: 100%;
}

.top-sec {
    position: relative;
    text-align: center;
    padding: 10px 0px 45px;
}

.max-container {
    position: relative;
    max-width: 1200px;
    margin: 0px auto;
    padding: 0px 10px;
}

.how-to-ply-sec {
    padding-top: 2rem;
}

.prize-sec {
    padding-top: 2rem;
}

.info-sec {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    padding-top: 40px;
    max-width: 670px;
    margin: auto;
}

.info-item {
    cursor: pointer;
    position: relative;
}

.info-item-content {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
    padding-left: 41%;
    line-height: 1.1;
}

.info-item-content p {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(255, 255, 255);
    margin: 0px;
}

.info-item-content span {
    font-size: 2.2rem;
    font-weight: 600;
    color: rgb(255, 195, 96);
}

.prediction-box {
    position: relative;
    background: url("../images/prediction-bg.jpg") center center / cover no-repeat;
    padding: 2rem;
    border-radius: 1rem;
    max-width: 670px;
    margin: 2rem auto 0px;
}

.prediction-box::before {
    content: "";
    position: absolute;
    inset: 0px;
    padding: 4px;
    border-radius: 1rem;
    background: linear-gradient(to top, rgb(254, 242, 188) 0%, rgb(212, 155, 70) 100%);
    mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px);
    pointer-events: none;
}

.prediction-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgb(255, 255, 255);
    text-align: center;
    margin-bottom: 1rem;
}

.prediction-grid {
    display: flex;
    gap: 1rem;
    margin: auto auto 1rem;
    justify-content: center;
}

.prediction-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    cursor: pointer;
}

.prediction-item img {
    max-width: 70px;
}

.prediction-item span {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgb(255, 255, 255);
    text-align: center;
    margin: 0px 0.5rem;
}

.prediction-item-wrap {
    background: rgba(255, 255, 255, 0.31);
    padding: 1rem 1.2rem;
    border-radius: 20px;
}

.modal_share .modal-body {
    background: url("../images/leaderboard-bg.jpg") center top / cover no-repeat;
    padding: 1rem 2rem;
}

.modal_share .modal-body::before {
    content: "";
    position: absolute;
    inset: 0px;
    padding: 2px;
    border-radius: 1rem;
    background: linear-gradient(to top, rgb(254, 242, 188) 0%, rgb(212, 155, 70) 100%);
    mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px);
    pointer-events: none;
}

.modal-dialog {
    max-width: 550px;
}

.modal-time {
    color: rgb(255, 255, 255);
    text-align: center;
}

.modal-leaderboard-title {
    text-align: center;
}

.leaderboard_ranktop {
    padding-top: 20px;
    position: relative;
}

.rank1-content-name {
    font-weight: 600;
    color: rgb(255, 255, 255);
    text-align: center;
}

.rank1-content-points {
    font-weight: 600;
    color: rgb(255, 195, 96);
    text-align: center;
}

.rank1-content {
    font-size: 0.9rem;
    line-height: 1.2;
}

.rank_share {
    position: absolute;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 23%;
}

.rank1 {
    bottom: -20%;
    left: 51%;
}

.rank2 {
    bottom: -20%;
    left: 16%;
}

.rank3 {
    bottom: -20%;
    right: -7%;
}
.leaderboard_table{
    padding-top: 20px;
}
.table_share{
    width: 100%;
}
.table_share td{
    color: #fff;
    font-weight: 600;
    padding: 5px;
    font-size: 12px;
}
.table_share tr:nth-child(odd){
    background: rgb(11 24 51);
}
.table_share tr td:first-child{
    text-align: left;
    width: 33%;
}
.table_share tr td:nth-child(2){
    text-align: center;
    width: 33%;
}
.table_share tr td:last-child{
    text-align: right;
    width: 33%;
    color: rgb(255, 195, 96);
}
.modal-leaderboard-close {
    color: #fff;
    position: absolute;
    right: 20px;
    cursor: pointer;
    font-size: 19px;
}
.modal-sportbetting-tnc{
    color: #41ccff;
    text-align: center;
    cursor: pointer;
}
.modal-time-sportbetting{
    color: #fff;
    text-align: center;
    margin-bottom: 0;
}
.modal-sportbetting-content{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-top: 2rem;
}
.team-name{
    font-weight: 600;
    color: #fff;
    text-align: center;
    font-size: 2.2rem;
}
.team-logo{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.team-logo img{
    max-width: 90px;
}
.vs-content{
    font-size: 1.7rem;
    color: #fff;
    font-weight: 600;
}
.sp-pm-score-cell {
    width: 68px;
    height: 50px;
    background: url(../images/countdown.png) center center no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: 5px;
}

.sp-pm-score-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    color: #f5f5f5;
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    width: 100%;
    text-align-last: center;
    padding: 0;
}

.sp-pm-score-select option {
    background: #2c2c2c;
    color: #f5f5f5;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.sp-pm-score-select:focus {
    outline: none;
}
.right-content,.left-content{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.modal-sportbetting-btn{
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: flex;
    justify-content: center;
}
.modal-sportbetting-btn-submit{
    background: none;
    border: none;
    cursor: pointer;
}
.modal-sportbetting-btn-cancel{
    background: none;
    border: none;
    cursor: pointer;
}
.modal-sportbetting-btn button:hover{
    transform: scale(1.05);
    transition: transform 0.3s ease;
    cursor: pointer;
}
.modal-sportbetting-alert{
    color: #ffffffa6;
    text-align: center;
    font-size: 12px;
    font-style: italic;
}
.tnc_wrapper{
    padding-top: 0rem;
}
.tnc_title{
    color: #fff;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
}
.tnc_wrapper ul{
    padding-left: 20px;
}
.tnc_wrapper ul li{
    color: #ffffff;
    font-size: 12px;
}
.tnc_list{
    list-style: text-list-number;
}
.tnc_list li{
    margin: 5px 0;
}
@media (max-width: 999px) {
    .info-item-content p {
        font-size: 2vw;
    }

    .info-item-content span {
        font-size: 4vw;
    }

    .prediction-item img {
        max-width: 30%;
    }

    .prediction-item-wrap {
        padding: 9px;
        border-radius: 10px;
    }

    .prediction-box {
        padding: 1rem;
    }

    .prediction-item span {
        font-size: 12px;
    }

    .rank1-content {
        font-size: 0.7rem;
    }

    .rank1 {
        bottom: -20%;
        left: 51%;
    }
    .team-name {
        font-size: 5vw;
    }
}

/* ========== Fireworks Background ========== */
.fireworks-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}


.firework {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 6px;
    height: 6px;
}

.firework::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 10px 2px var(--c);
    animation: fw-rise 4.5s var(--d) infinite ease-out;
}

.firework::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow:
        110px 0 var(--c), 95px 55px var(--c), 55px 95px var(--c),
        0 110px var(--c), -55px 95px var(--c), -95px 55px var(--c),
        -110px 0 var(--c), -95px -55px var(--c), -55px -95px var(--c),
        0 -110px var(--c), 55px -95px var(--c), 95px -55px var(--c),
        78px 78px var(--c), -78px 78px var(--c), -78px -78px var(--c), 78px -78px var(--c),
        60px 30px var(--c), -60px 30px var(--c), 60px -30px var(--c), -60px -30px var(--c),
        30px 60px var(--c), -30px 60px var(--c), 30px -60px var(--c), -30px -60px var(--c);
    animation: fw-explode 4.5s var(--d) infinite ease-out;
    opacity: 0;
}

@keyframes fw-rise {
    0%   { transform: translateY(70vh) scale(1);   opacity: 1; }
    32%  { transform: translateY(0)    scale(1);   opacity: 1; }
    34%, 100% { transform: translateY(0) scale(0); opacity: 0; }
}

@keyframes fw-explode {
    0%, 33%  { opacity: 0; transform: scale(0); }
    36%      { opacity: 1; transform: scale(0.25); }
    55%      { opacity: 1; transform: scale(1); }
    85%      { opacity: 0.5; transform: scale(1.3); }
    100%     { opacity: 0; transform: scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
    .fireworks-bg { display: none; }
}