/* ==================================================
   RESPONSIVE.CSS
================================================== */


/* ==================================================
   1200px
================================================== */

@media (max-width:1200px){

    .container{

        width:min(94%,1200px);

    }

    .hero-content{

        max-width:600px;

    }

    .hero-content h1{

        font-size:clamp(3.5rem,7vw,5.8rem);

    }

    .featured-games-grid{

        gap:25px;

    }

}


/* ==================================================
   992px
================================================== */

@media (max-width:992px){

    section{

        padding:90px 0;

    }

    #navigation{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

    .header-container{

        gap:20px;

    }

    .hero-content{

        max-width:100%;

        text-align:center;

        margin:auto;

        padding-top:120px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-platforms{

        justify-content:center;

    }

    .about-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-image{

        order:-1;

    }

    .why-grid{

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

    }

    .featured-games-grid{

        grid-template-columns:1fr;

    }

    .library-grid{

        grid-template-columns:1fr;

    }

    .news-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

        gap:40px;

    }

}
/* ==================================================
   768px
================================================== */

@media (max-width:768px){

    .logo img{

        width:58px;

    }

    .logo-title{

        font-size:1rem;

    }

    .logo-subtitle{

        font-size:.72rem;

        letter-spacing:2px;

    }

    .header-container{

        padding:0 10px;

    }

    #hero{

        min-height:auto;

        padding:140px 0 90px;

    }

    .hero-content{

        padding-top:0;

    }

    .hero-badge{

        font-size:.72rem;

        letter-spacing:1.5px;

        padding:8px 16px;

    }

    .hero-content h1{

        font-size:clamp(3rem,9vw,4.5rem);

    }

    .hero-content h2{

        font-size:1.3rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-platforms{

        justify-content:center;

    }

    .platform{

        flex:1 1 140px;

        justify-content:center;

    }

    .why-grid{

        grid-template-columns:1fr;

    }

    .section-title{

        margin-bottom:50px;

    }

    .section-title h2{

        font-size:2.2rem;

    }

    .featured-overlay{

        padding:30px;

    }

    .featured-overlay h3{

        font-size:1.6rem;

    }

    .library-category{

        padding:28px;

    }

    .news-content{

        padding:25px;

    }

    .discord-wrapper{

        padding:60px 35px;

    }

    .discord-icon{

        font-size:4rem;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-brand p{

        margin:0 auto;

    }

    .footer-network{

        justify-content:center;

    }

}
/* ==================================================
   480px
================================================== */

@media (max-width:480px){

    .container{

        width:92%;

    }

    section{

        padding:70px 0;

    }

    #header{

        padding:18px 0;

    }

    .logo{

        gap:.7rem;

    }

    .logo img{

        width:50px;

    }

    .logo-title{

        font-size:.9rem;

    }

    .logo-subtitle{

        font-size:.65rem;

        letter-spacing:1.5px;

    }

    .header-container .btn{

        display:none;

    }

    .hero-badge{

        font-size:.65rem;

        padding:8px 14px;

        text-align:center;

    }

    .hero-content h1{

        font-size:2.6rem;

        line-height:1;

    }

    .hero-content h2{

        font-size:1.15rem;

    }

    .hero-content p{

        font-size:.95rem;

    }

    .platform{

        width:100%;

    }

    .featured-game{

        min-height:320px;

    }

    .featured-overlay{

        padding:22px;

    }

    .featured-overlay h3{

        font-size:1.35rem;

    }

    .featured-overlay p{

        font-size:.95rem;

    }

    .library-category{

        padding:22px;

    }

    .library-tags{

        gap:10px;

    }

    .library-tags span{

        font-size:.85rem;

        padding:8px 14px;

    }

    .news-image img{

        height:200px;

    }

    .news-content{

        padding:20px;

    }

    .news-content h3{

        font-size:1.25rem;

    }

    .discord-wrapper{

        padding:45px 22px;

    }

    .discord-wrapper h2{

        font-size:2rem;

    }

    .discord-icon{

        font-size:3.5rem;

    }

    .footer-grid{

        gap:35px;

    }

    .footer-brand img{

        width:70px;

        margin:0 auto 20px;

    }

    .footer-network img{

        width:150px;

    }

    .cookie-banner{

        width:95%;

        bottom:15px;

        padding:18px;

    }

    .cookie-content{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .cookie-content .btn{

        width:100%;

    }

    #topButton{

        right:20px;

        bottom:20px;

        width:48px;

        height:48px;

    }

}


/* ==================================================
   MOBILE NAVIGATION
================================================== */

@media (max-width:992px){

    #navigation{

        position:fixed;

        top:85px;

        right:-100%;

        width:280px;

        height:calc(100vh - 85px);

        display:flex;

        flex-direction:column;

        gap:0;

        background:rgba(5,10,18,.98);

        backdrop-filter:blur(20px);

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

        transition:.35s ease;

        padding:35px 0;

        z-index:999;

    }

    #navigation.active{

        right:0;

    }

    #navigation a{

        padding:18px 30px;

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

        font-size:1rem;

    }

    #navigation a:hover{

        background:rgba(0,174,239,.08);

        padding-left:40px;

    }

}


/* ==================================================
   LANDSCAPE PHONES
================================================== */

@media (max-height:700px){

    #hero{

        min-height:auto;

        padding:140px 0 90px;

    }

}



/* ==================================================
   END OF FILE
================================================== */