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

.site-header{

    position:sticky;

    top:0;

    z-index:999;

    backdrop-filter:blur(18px);

    background:rgba(8, 12, 24, 0.95);

    border-bottom:1px solid var(--border);

}

.header-content{

    height:80px;

    display:flex;

    align-items:center;

    gap:30px;

}

.logo{

    color:var(--text);

    text-decoration:none;

    font-size:1.8rem;

    font-weight:700;

}

.logo span{

    margin-left:6px;

}

.search-box{

    flex:1;

}

.search-box input{

    width:100%;

    height:48px;

    border:none;

    outline:none;

    background:var(--surface);

    color:var(--text);

    padding:0 20px;

    border-radius:999px;

    font-size:1rem;

}

.random-btn{

    border:none;

    cursor:pointer;

    background:var(--primary);

    color:white;

    padding:14px 22px;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

}

.random-btn:hover{

    background:var(--primary-hover);

}

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

.hero{

    padding:70px 0;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at top right,
            rgba(59,130,246,.12),
            transparent 45%
        );

}

.hero-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}

.hero-badge{

    display:inline-block;

    background:#facc15;

    color:#111827;

    padding:8px 16px;

    border-radius:999px;

    font-weight:600;

    margin-bottom:20px;

}

.hero h1{

    font-size:4rem;

    line-height:1.1;

    margin-bottom:20px;

}

.hero p{

    color:var(--text-light);

    line-height:1.8;

    margin-bottom:35px;

    font-size:1.1rem;

}

.hero-buttons{

    display:flex;

    gap:16px;

}

.primary-btn,
.secondary-btn{

    border:none;

    cursor:pointer;

    padding:16px 28px;

    border-radius:999px;

    font-size:1rem;

    font-weight:600;

    transition:var(--transition);

}

.primary-btn{

    background:var(--primary);

    color:white;

}

.primary-btn:hover{

    background:var(--primary-hover);

}

.secondary-btn{

    background:var(--surface);

    color:var(--text);

}

.hero-image{

    aspect-ratio:16/9;

    background:linear-gradient(135deg,#273549,#1E293B);

    border-radius:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--muted);

    font-size:1.4rem;

}

/* ==========================================
   SECTION TITLES
========================================== */

.section-title{
    font-size:2rem;

    margin-bottom:40px;

    display:flex;

    align-items:center;

    gap:12px;
}

/* ==========================================
   GAME GRID
========================================== */

.games-section{
    padding:80px 0;

    background:rgba(255,255,255,0.015);

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

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

.games-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:28px;
}

/* ==========================================
   GAME CARD
========================================== */

.game-card{

    background:var(--surface);

    border-radius:24px;

    overflow:hidden;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.game-card:hover{

    transform:translateY(-8px);

}

.game-thumb{

    aspect-ratio:16/9;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#334155,#1E293B);

    color:var(--muted);

    font-weight:600;

}

.game-info{

    padding:20px;

}

.game-category{

    display:inline-block;

    background:rgba(59,130,246,.15);

    color:var(--primary);

    padding:6px 12px;

    border-radius:999px;

    font-size:.85rem;

    margin-bottom:14px;

}

.game-info h3{

    margin-bottom:10px;

    font-size:1.3rem;

}

.rating{

    color:#FACC15;

    margin-bottom:20px;

}

.play-btn{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    border:none;

    cursor:pointer;

    padding:14px;

    border-radius:14px;

    background:var(--primary);

    color:white;

    font-weight:600;

    transition:var(--transition);

}

.play-btn:hover{

    background:var(--primary-hover);

}

/* ==========================================
   AD CONTAINER
========================================== */

.ad-banner{

    margin:0;
    padding:50px 0; 

}

.ad-banner span{

    display:block;

    margin-bottom:12px;

    color:var(--muted);

    font-size:.9rem;

}

.ad-placeholder{
    width:100%;
    min-height:90px;

    border:2px dashed var(--border);
    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--surface);
    color:var(--muted);

    font-size:1.05rem;
}

/* ==========================================
   SECTION DIVIDER
========================================== */

.section-divider{

    width:100%;

    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

}

/* ==========================================
   FOOTER
========================================== */

.site-footer{

    margin-top:80px;

    padding:40px 0;

    border-top:1px solid var(--border);

    background:rgba(8,12,24,.95);

}

.site-footer p{

    color:var(--muted);

    text-align:center;

    font-size:.95rem;

}