/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =========================
   BODY
========================= */

body{

    font-family:Arial,sans-serif;

    background:#06061b;

    color:white;

    overflow-x:hidden;

}

body::before{

    content:"";

    position:fixed;

    inset:0;

    z-index:-1;

    background-image:
    url("../assets/images/ForeGround.png");

    background-position:center;

    background-size:cover;

    background-repeat:no-repeat;

}

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

.site-header{

    position:fixed;

    top:0;

    width:100%;

    z-index:9999;

    background:rgba(8,10,35,.65);

    backdrop-filter:blur(18px);

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

}

.header-container{

    max-width:1450px;

    margin:auto;

    height:80px;

    padding:0 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo a{

    color:white;

    text-decoration:none;

    font-size:28px;

    font-weight:bold;

}

.nav-menu{

    display:flex;

    gap:35px;

}

.nav-menu a{

    text-decoration:none;

    color:#d7d7d7;

}

.nav-menu a:hover{

    color:#9d7cff;

}

.header-btn{

    background:
    linear-gradient(
    90deg,
    #8a4dff,
    #2e8cff);

    padding:12px 22px;

    border-radius:999px;

    text-decoration:none;

    color:white;

    font-weight:bold;

}

/* =========================
   PAGE
========================= */

.games-page{

    max-width:1450px;

    margin:auto;

    padding:120px 30px 60px;

}

.breadcrumb{

    margin-bottom:25px;

    color:#b694ff;

}

/* =========================
   MAIN LAYOUT
========================= */

.games-layout{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:30px;

    align-items:start;

}

/* =========================
   SIDEBAR
========================= */

.games-sidebar{

    background:rgba(20,24,60,.45);

    backdrop-filter:blur(16px);

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

    border-radius:24px;

    padding:30px;

    position:sticky;

    top:120px;

}

.games-icon{

    width:120px;

    display:block;

    margin-bottom:25px;

}

.games-sidebar h1{

    font-size:58px;

    line-height:.95;

    margin-bottom:25px;

}

.games-sidebar p{

    color:#dddddd;

    line-height:1.8;

    margin-bottom:30px;

}

/* =========================
   TECH GRID
========================= */

.tech-grid{

    display:grid;

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

    gap:12px;

}

.tech-card{

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

    border-radius:18px;

    padding:18px;

    text-align:center;

}

.tech-card h3{

    color:#8db3ff;

    margin-bottom:8px;

}

.tech-card span{

    color:#dddddd;

    font-size:14px;

}

/* =========================
   RIGHT COLUMN
========================= */

.games-column{

    display:flex;

    flex-direction:column;

    gap:30px;

}

/* =========================
   GAME CONTAINER
========================= */

.game-container{

    background:
    rgba(20,24,60,.45);

    backdrop-filter:blur(16px);

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

    border-radius:24px;

    padding:25px;

}

.status{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    margin-bottom:20px;

    font-size:14px;

    font-weight:bold;

}

.playable{

    background:
    rgba(0,255,120,.15);

    color:#74ff9f;

}

.playable-pc{

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

    color:#6fb5ff;

}

.archived{

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

    color:#ffbe6f;

}

.game-container h2{

    font-size:42px;

    margin-bottom:10px;

}

.game-description{

    color:#dddddd;

    line-height:1.8;

    margin-bottom:25px;

}

/* =========================
   VIDEO
========================= */

.video-wrapper{

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

    border-radius:20px;

}

.video-wrapper iframe{

    width:100%;

    height:100%;

    border:none;

}

/* =========================
   PLATFORMS
========================= */

.platforms{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:25px;

}

.platforms span{

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

    padding:10px 16px;

    border-radius:999px;

    color:white;

}

/* =========================
   DOWNLOAD BUTTONS
========================= */

.download-row{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-top:25px;

}

.download-btn{

    text-decoration:none;

    color:white;

    font-weight:bold;

    padding:14px 24px;

    border-radius:14px;

    transition:.25s;

}

.download-btn:hover{

    transform:translateY(-2px);

}

.apk{

    background:
    linear-gradient(
    90deg,
    #1ea44b,
    #4ee178);

}

.pc{

    background:
    linear-gradient(
    90deg,
    #2d72ff,
    #61a7ff);

}

.trailer{

    background:
    linear-gradient(
    90deg,
    #7a3fff,
    #b84dff);

}

/* =========================
   ARCHIVED WARNING
========================= */

.archive-warning{

    margin-top:20px;

    padding:16px;

    border-radius:16px;

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

    border:
    1px solid rgba(255,140,0,.3);

    color:#ffbe6f;

    line-height:1.6;

}

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

@media(max-width:1100px){

    .games-layout{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .header-container{

        flex-direction:column;

        height:auto;

        padding:20px;

        gap:15px;

    }

    .nav-menu{

        flex-wrap:wrap;

        justify-content:center;

    }

    .games-sidebar{

        position:relative;

        top:auto;

    }

    .games-sidebar h1{

        font-size:48px;

    }

    .game-container h2{

        font-size:32px;

    }

}