/* ==========================================================
   HERO SECTION
========================================================== */

.hero{

    position:relative;

    padding:48px 0 40px;

    background:
        radial-gradient(circle at left top, rgba(0,132,255,.18), transparent 35%),
        radial-gradient(circle at right top, rgba(0,132,255,.18), transparent 35%),
        linear-gradient(180deg,#0A1D4A 0%,#081838 100%);

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    top:-120px;
    left:-120px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:rgba(0,140,255,.08);

    filter:blur(80px);

}

.hero::after{

    content:"";

    position:absolute;

    top:-120px;
    right:-120px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:rgba(0,140,255,.08);

    filter:blur(80px);

}

/* ==========================================================
   HERO CONTENT
========================================================== */

.hero-content{

    position:relative;

    z-index:2;

    text-align:center;

    margin-bottom:42px;

}

.hero-title{

    margin:0;

    color:#fff;

    font-size:3.6rem;

    font-weight:800;

    line-height:1.1;

}

.hero-subtitle{

    margin:18px 0 0;

    color:#C7D5F4;

    font-size:1.6rem;

    font-weight:400;

}

/* ==========================================================
   HERO GRID
========================================================== */

.hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

    align-items:stretch;

}

/* ==========================================================
   BASE PANEL CARD
========================================================== */

.panel-card{

    position:relative;

    background:linear-gradient(
        180deg,
        rgba(12,39,92,.96) 0%,
        rgba(8,27,63,.98) 100%
    );

    border:1px solid rgba(41,122,255,.45);

    border-radius:18px;

    padding:32px;

    min-height:330px;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03),
        0 18px 45px rgba(0,0,0,.30);

}

/* ==========================================================
   CARD HEADER
========================================================== */

.card-header{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-bottom:22px;

}

.card-icon{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ffffff;

    font-size:1.15rem;

    border:2px solid rgba(46,138,255,.55);

    background:rgba(34,120,255,.10);

    box-shadow:
        inset 0 0 10px rgba(255,255,255,.06),
        0 0 12px rgba(34,120,255,.20);

}

.card-header h2{

    margin:0;

    color:#FFD33F;

    font-size:2rem;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.5px;

}
/* ==========================================================
   COUNTDOWN
========================================================== */

.countdown{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-bottom:30px;

    padding-bottom:26px;

    border-bottom:1px solid rgba(255,255,255,.12);

}

.count-item{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.time-box{

    width:108px;

    height:128px;

    display:flex;

align-items:center;

justify-content:center;

    background:linear-gradient(
        180deg,
        #FFE36B 0%,
        #FFD53D 45%,
        #F4BF16 100%
    );

    border-radius:10px;

    border:1px solid rgba(255,255,255,.25);

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.45),
        inset 0 -2px 4px rgba(0,0,0,.08),
        0 10px 18px rgba(0,0,0,.28);

}

.time-value{

    color:#111;

    font-size:4.2rem;

    font-weight:900;

    line-height:1;

}

.time-label{

    display:block;

    margin-top:14px;

    color:#ffffff;

    font-size:.90rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.separator{

    color:#FFD84A;

    font-size:3.4rem;

    font-weight:800;

    margin-top:-26px;

}

/* ==========================================================
   DRAW SCHEDULE
========================================================== */

.draw-schedule{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:24px;

    color:#C8D5F2;

    font-size:1rem;

}

.draw-schedule i{

    color:#FFD33F;

}

/* ==========================================================
   LATEST RESULT
========================================================== */
.latest-number-wrap{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    margin:22px 0 28px;

}

.latest-number{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:max-content;

    margin:0 auto;

    font-family:"Poppins",sans-serif;

    font-size:6.7rem;

    font-weight:900;

    line-height:1;

    letter-spacing:2px;

    text-align:center;

    background:linear-gradient(
        180deg,
        #FFFFFF 0%,
        #FFF9D5 12%,
        #FFE978 30%,
        #FFD63D 55%,
        #FFBF00 78%,
        #E59B00 100%
    );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    filter:

        drop-shadow(0 0 2px rgba(255,255,255,.55))
        drop-shadow(0 0 8px rgba(255,220,80,.30))
        drop-shadow(0 0 14px rgba(255,190,20,.20));

    animation:heroGlow 4.8s ease-in-out infinite;

    transition:.35s;

}

.latest-number::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:72%;

    height:55%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(255,222,80,.22) 0%,

        rgba(255,190,20,.10) 45%,

        transparent 100%

    );

    filter:blur(12px);

    opacity:.22;

    z-index:-1;

}
/* ==========================================================
   INFO BOX
========================================================== */

.latest-info{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;

}

.info-box{

    text-align:center;

    padding:18px 12px;

    border-radius:12px;

    border:1px solid rgba(58,145,255,.45);

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02)
    );

}

.info-title{

    display:block;

    margin-bottom:8px;

    color:#AFC4F3;

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:1px;

}

.info-box strong{

    display:block;

    color:#FFFFFF;

    font-size:1.05rem;

    font-weight:700;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){

    .hero-title{

        font-size:2.8rem;

    }

    .hero-subtitle{

        font-size:1.25rem;

    }

    .hero-grid{

        grid-template-columns:1fr;

    }

    .latest-number{

        font-size:4rem;

    }

}

@media(max-width:576px){

    .hero{

        padding:40px 0 30px;

    }

    .hero-title{

        font-size:2.1rem;

    }

    .hero-subtitle{

        font-size:1rem;

    }

    .countdown{

        gap:10px;

    }

    .time-box{

        min-width:65px;

    }

    .time-value{

        font-size:2.2rem;

    }

    .separator{

        font-size:1.6rem;

    }

    .latest-info{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   LATEST RESULT ANIMATION
========================================================== */

.number-pop{

    animation:numberPop .45s ease;

}

.number-glow{

    animation:numberGlow 1.2s ease;

}

.number-shine{

    position:relative;

    overflow:hidden;

}

.number-shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.65),
        transparent
    );

    transform:skewX(-20deg);

    animation:numberShine 1.2s ease;

}
/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes numberPop{

    0%{

        transform:scale(.88);

    }

    60%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes numberGlow{

    0%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.45);

    }

    100%{

        filter:brightness(1);

    }

}

@keyframes numberShine{

    from{

        left:-120%;

    }

    to{

        left:130%;

    }

}

/* ==========================================================
   HERO GLOW
========================================================== */

@keyframes heroGlow{

    0%{

        transform:translateY(0);

        filter:
            drop-shadow(0 0 2px rgba(255,255,255,.45))
            drop-shadow(0 0 6px rgba(255,225,80,.25))
            drop-shadow(0 0 12px rgba(255,190,20,.18));

    }

    50%{

        transform:translateY(-1px);

        filter:
            drop-shadow(0 0 4px rgba(255,255,255,.65))
            drop-shadow(0 0 10px rgba(255,225,80,.35))
            drop-shadow(0 0 18px rgba(255,190,20,.25));

    }

    100%{

        transform:translateY(0);

        filter:
            drop-shadow(0 0 2px rgba(255,255,255,.45))
            drop-shadow(0 0 6px rgba(255,225,80,.25))
            drop-shadow(0 0 12px rgba(255,190,20,.18));

    }

}

/* ==========================================================
   SPARKLE
========================================================== */

@keyframes sparkle{

    0%{

        transform:scale(.8) rotate(0deg);

        opacity:.35;

    }

    50%{

        transform:scale(1.15) rotate(20deg);

        opacity:.8;

    }

    100%{

        transform:scale(.8) rotate(0deg);

        opacity:.35;

    }

}