/* ===================================================
   Sohail Academy v4.0
   Numora Game Styles
=================================================== */

body{

    background:
        radial-gradient(circle at 15% 15%, rgba(59,130,246,.22), transparent 24%),
        radial-gradient(circle at 85% 10%, rgba(236,72,153,.18), transparent 20%),
        linear-gradient(135deg, #050816 0%, #0f1635 45%, #071d36 100%);

    color:#F8FAFC;

    position:relative;

    overflow-x:hidden;

}

body::before{

    content:"";

    position:fixed;

    inset:-15%;

    background-image:
        radial-gradient(circle, rgba(255,255,255,.10) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);

    background-size: 110px 110px, 170px 170px;

    background-position: 0 0, 35px 35px;

    opacity:.16;

    pointer-events:none;

    z-index:-1;

    animation: driftGrid 14s ease-in-out infinite alternate;

}

@keyframes driftGrid{

    from{

        transform:translate3d(0, 0, 0);

    }

    to{

        transform:translate3d(0, -18px, 0);

    }

}

/* ==========================================
   Play Game Section
========================================== */

.game-section{

    padding:90px 0;

    background:transparent;

    position:relative;

    overflow:hidden;

}

/* ==========================================
   Section Heading
========================================== */

.section-heading{

    text-align:center;

    margin-bottom:45px;

}

.section-heading h2{

    color:#F8FAFC;

    font-size:2.6rem;

    font-weight:800;

    margin-bottom:15px;

    text-shadow:0 8px 24px rgba(2,6,23,.35);

}

.section-heading h2 i{

    color:#2563EB;

    margin-right:10px;

}

.section-heading p{

    color:#CBD5E1;

    font-size:1.1rem;

    max-width:700px;

    margin:auto;

    line-height:1.8;

}

/* ==========================================
   Toolbar
========================================== */

.game-toolbar{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:35px;

}

.toolbar-btn{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 28px;

    border:none;

    border-radius:50px;

    background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08));

    color:#F8FAFC;

    font-weight:700;

    box-shadow:0 12px 30px rgba(2,6,23,.25);

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

    backdrop-filter:blur(10px);

    transition:.3s;

    cursor:pointer;

}

.toolbar-btn i{

    font-size:1.2rem;

    color:#2563EB;

}

.toolbar-btn:hover{

    background:linear-gradient(135deg, #2563EB, #4F46E5);

    color:#ffffff;

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(37,99,235,.30);

}

.toolbar-btn:hover i{

    color:#ffffff;

}

.toolbar-btn.active{

    background:linear-gradient(135deg, #ff4d79, #ff1f5a);

    color:#ffffff;

    transform:translateY(-2px);

    box-shadow:0 16px 34px rgba(255,77,121,.32);

}

.toolbar-btn.active i{

    color:#ffffff;

}

/* ==========================================
   Game Window
========================================== */

/* ==========================================
   Game Window
========================================== */

.game-wrapper{

    position:relative;

    background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08));

    border-radius:28px;

    padding:20px;

    box-shadow:0 24px 60px rgba(2,6,23,.35), inset 0 1px 0 rgba(255,255,255,.25);

    overflow:hidden;

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

    backdrop-filter:blur(14px);

}

.game-wrapper::before{

    content:"";

    position:absolute;

    inset:-20% 55% 50% -10%;

    background:radial-gradient(circle, rgba(255,107,74,.22), transparent 60%);

    pointer-events:none;

}

.game-wrapper::after{

    content:"";

    position:absolute;

    inset:55% -15% -10% 45%;

    background:radial-gradient(circle, rgba(45,212,191,.16), transparent 60%);

    pointer-events:none;

}

/* ==========================================
   Game Frame
========================================== */

.game-frame-topbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:12px 16px 14px;

    background:linear-gradient(90deg, #ff8a3d 0%, #ff5e7a 45%, #4b4ee7 100%);

    border-radius:18px 18px 0 0;

    margin-bottom:10px;

    box-shadow:0 8px 18px rgba(2,6,23,.18);

}

.game-frame-badge{

    padding:8px 12px;

    border-radius:999px;

    background:rgba(255,255,255,.22);

    color:#fff;

    font-size:.86rem;

    font-weight:800;

    letter-spacing:.02em;

    backdrop-filter:blur(6px);

}

.game-frame-dots{

    display:flex;

    gap:8px;

}

.game-frame-dots span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#fff;

    box-shadow:0 0 8px rgba(255,255,255,.65);

}

.game-frame{

    width:100%;

    height:800px;

    border:none;

    border-radius:0 0 22px 22px;

    background:
        radial-gradient(circle at top left, rgba(255,255,255,.22), transparent 26%),
        linear-gradient(135deg, #1d2f65 0%, #4b4ee7 50%, #ff8a3d 100%);

    display:block;

    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 20px 35px rgba(2,6,23,.24);

    border:2px solid rgba(255,255,255,.20);

    border-top:none;

}

/* ==========================================
   Bottom Info
========================================== */

.game-bottom-info{

    margin-top:35px;

    display:grid;

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

    gap:20px;

}

.info-box{

    background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06));

    padding:20px;

    text-align:center;

    border-radius:18px;

    box-shadow:0 12px 32px rgba(2,6,23,.24);

    transition:.3s;

    font-weight:700;

    color:#F8FAFC;

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

    backdrop-filter:blur(10px);

}

.info-box:hover{

    transform:translateY(-8px);

}

.info-box i{

    display:block;

    font-size:2rem;

    margin-bottom:12px;

    color:#F59E0B;

}

/* ==========================================
   Related Games
========================================== */

.related-games{

    padding:90px 0;

    background:linear-gradient(135deg, rgba(6, 12, 28, 0.95), rgba(15, 25, 49, 0.9));

    text-align:center;

}

.related-games h3{

    font-size:2rem;

    color:#ffffff;

    font-weight:700;

    margin-bottom:15px;

}

.related-empty{

    color:#CBD5E1;

    font-size:1.05rem;

}

/* ==========================================
   Footer
========================================== */

.site-footer{

    padding:30px 0;

    background:linear-gradient(135deg, #07111F, #111d3d);

    color:#CBD5E1;

    text-align:center;

    font-size:.95rem;

    border-top:1px solid rgba(255,255,255,.08);

}

/* ==========================================
   Breadcrumb
========================================== */

.breadcrumb-bar{

    background:rgba(255,255,255,.04);

    padding:18px 0;

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

    backdrop-filter:blur(10px);

}

.breadcrumb-bar .container{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

.breadcrumb-bar a{

    color:#2563EB;

    text-decoration:none;

    font-weight:600;

}

.breadcrumb-bar a:hover{

    color:#F59E0B;

}

.breadcrumb-bar .current{

    color:#CBD5E1;

}

/* ==========================================
   Pause Overlay
========================================== */

.pause-overlay{

    position:absolute;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    background:rgba(8,17,31,.75);

    backdrop-filter:blur(6px);

    border-radius:24px;

}

.pause-overlay.active{

    display:flex;

}

.pause-label{

    color:#ffffff;

    font-size:2rem;

    font-weight:700;

    margin-bottom:25px;

}

.resume-btn{

    padding:14px 35px;

    border:none;

    border-radius:50px;

    background:#F59E0B;

    color:#08111F;

    font-weight:700;

    transition:.3s;

}

.resume-btn:hover{

    transform:translateY(-3px);

}

/* ==========================================
   Fullscreen
========================================== */

.game-wrapper:fullscreen{

    padding:0;

    border-radius:0;

}

.game-wrapper:fullscreen .game-frame{

    width:100vw;

    height:100vh;

    border-radius:0;

}

/* ==========================================
   Tablet
========================================== */

@media(max-width:992px){

    .game-frame{

        height:650px;

    }

    .game-bottom-info{

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

    }

}

/* ==========================================
   Mobile
========================================== */

@media(max-width:576px){

    .section-heading h2{

        font-size:2rem;

    }

    .game-frame{

        height:520px;

    }

    .game-bottom-info{

        grid-template-columns:1fr;

    }

    .toolbar-btn{

        width:100%;

        justify-content:center;

    }

}
/* ===================================================
   RELATED GAMES
=================================================== */

.related-card{

    background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06));

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 18px 40px rgba(2,6,23,.24);

    transition:.35s;

    height:100%;

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

    backdrop-filter:blur(10px);

}

.related-card:hover{

    transform:translateY(-10px);

}

.related-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.related-body{

    padding:30px;

}

.related-body h4{

    margin:18px 0 12px;

    font-weight:700;

    color:#ffffff;

}

.related-body p{

    color:#CBD5E1;

    line-height:1.8;

    margin-bottom:25px;

}

.related-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    font-size:.8rem;

    font-weight:700;

}

.live{

    background:#DCFCE7;

    color:#166534;

}

.coming{

    background:#DBEAFE;

    color:#1E40AF;

}

.related-card .btn{

    width:100%;

    border-radius:40px;

}

.active-game{

    border:3px solid #2563EB;

}
/* ===================================================
   GAME FEATURES
=================================================== */

.game-features{

    padding:100px 0;

    background:linear-gradient(135deg, rgba(6, 12, 28, 0.95), rgba(15, 25, 49, 0.9));

}

.feature-box{

    background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06));

    border-radius:24px;

    padding:35px;

    text-align:center;

    height:100%;

    transition:.35s;

    box-shadow:0 18px 40px rgba(2,6,23,.24);

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

    backdrop-filter:blur(10px);

}

.feature-box:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(15,23,42,.15);

}

.feature-icon{

    width:90px;

    height:90px;

    margin:auto auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #2563EB,
        #3B82F6
    );

}

.feature-icon i{

    font-size:2.5rem;

    color:#ffffff;

}

.feature-box h4{

    margin-bottom:15px;

    color:#ffffff;

    font-weight:700;

}

.feature-box p{

    color:#CBD5E1;

    line-height:1.8;

}
/* ===================================================
   TESTIMONIALS
=================================================== */

.game-testimonials{

    padding:100px 0;

    background:linear-gradient(135deg, rgba(6, 12, 28, 0.95), rgba(15, 25, 49, 0.9));

}

.testimonial-card{

    background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06));

    border-radius:24px;

    padding:35px;

    height:100%;

    transition:.35s;

    box-shadow:0 18px 40px rgba(2,6,23,.24);

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

    backdrop-filter:blur(10px);

}

.testimonial-card:hover{

    transform:translateY(-8px);

}

.testimonial-stars{

    color:#F59E0B;

    font-size:1.2rem;

    margin-bottom:20px;

}

.testimonial-card p{

    color:#E2E8F0;

    line-height:1.9;

    margin-bottom:25px;

    font-style:italic;

}

.testimonial-user{

    display:flex;

    align-items:center;

    gap:15px;

}

.testimonial-user img{

    width:60px;

    height:60px;

    border-radius:50%;

    object-fit:cover;

}

.testimonial-user h5{

    margin:0;

    font-weight:700;

}

.testimonial-user span{

    color:#CBD5E1;

    font-size:.9rem;

}
/* ===================================================
   LEARNING STATISTICS
=================================================== */

.game-statistics{

    padding:100px 0;

    background:linear-gradient(
        135deg,
        #08111F,
        #102347
    );

}

.game-statistics .section-heading h2{

    color:#ffffff;

}

.game-statistics .section-heading p{

    color:#CBD5E1;

}

.stat-box{

    background:rgba(255,255,255,.06);

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

    backdrop-filter:blur(12px);

    border-radius:24px;

    padding:40px;

    text-align:center;

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,.12);

}

.stat-box i{

    font-size:3rem;

    color:#F59E0B;

    margin-bottom:20px;

}

.stat-box h2{

    color:#ffffff;

    font-size:3rem;

    font-weight:800;

    margin-bottom:12px;

}

.stat-box p{

    color:#CBD5E1;

    font-size:1rem;

    margin:0;

}
/* ===================================================
   FAQ
=================================================== */

.game-faq{

    padding:100px 0;

    background:linear-gradient(135deg, rgba(6, 12, 28, 0.95), rgba(15, 25, 49, 0.9));

}

.accordion{

    max-width:900px;

    margin:auto;

}

.accordion-item{

    border:none;

    margin-bottom:20px;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 18px 40px rgba(2,6,23,.24);

    background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.05));

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

}

.accordion-button{

    padding:22px 28px;

    font-weight:700;

    color:#F8FAFC;

    background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06));

}

.accordion-button:not(.collapsed){

    background:#2563EB;

    color:#ffffff;

}

.accordion-button::after{

    filter: brightness(1.2);

}

.accordion-button:focus{

    box-shadow:none;

}

.accordion-body{

    padding:25px 28px;

    color:#CBD5E1;

    line-height:1.8;

    background:rgba(255,255,255,.06);

}