:root{
    --bg:#0f1117;
    --surface:#1b1d27;
    --glass:rgba(30,33,45,.6);

    --primary:#8b5cf6;
    --primary2:#6d7cff;

    --text:#ffffff;
    --sub:#b9bdd1;

    --border:rgba(255,255,255,.08);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Lexend",sans-serif;
}

body{

    min-height:100vh;

    color:var(--text);

    background:
    radial-gradient(circle at top,
    #4b2fa8 0%,
    #241b44 35%,
    #13151c 100%);

}

#topbar {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    gap: 8px;
    padding: 8px;

    background: var(--glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 18px;

    box-shadow: 0 15px 40px rgba(0,0,0,.35);

    z-index: 9999;
}

.tabButton{

    border: 10px;

    background:none;

    color:var(--sub);

    padding:11px 20px;

    border-radius:10px;

    cursor:pointer;

    transition:.2s;

    font-size:15px;

}

.tabButton:hover{

    color:white;

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

}

.tabButton.active{

    color:white;

    background:linear-gradient(135deg,var(--primary),var(--primary2));

}

#main{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:100px 20px;

}

.hero{

    max-width:800px;

}

h1{

    font-size:72px;

    font-weight:700;

    margin-bottom:18px;

}

.accent{

    background:linear-gradient(
    90deg,
    #d6c3ff,
    #8b5cf6,
    #6d7cff);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

p{

    color:var(--sub);

    font-size:20px;

    line-height:1.7;

    margin-bottom:35px;

}

.primary{

    border:none;

    padding:14px 26px;

    border-radius:14px;

    cursor:pointer;

    font-size:16px;

    color:white;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--primary2));

    transition:.2s;

}

.primary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.primary img {
    border-radius: 8px;  /* rounded corners */
    object-fit: cover;    /* prevents stretching */
}

.primary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 12px;
    background: #031c57;
    color: white;
    text-decoration: none;
    border-radius: 20px;
}

.primary img {
    object-fit: cover;
    border-radius: 14px;
}

.game-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.game-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
    background: #00122f;
    color: white;

    transition: transform 0.15s ease, background 0.15s ease;
}

.game-btn:hover {
    transform: scale(1.05);
    background: #001344;
}

.game-btn img {
    width: 250px;
    object-fit: cover;
    border-radius: 14px;
}

.primary:hover{

    transform:translateY(-2px);

    box-shadow:
        0 0 25px rgba(139,92,246,.4);

}