/* ==========================================
   GAME CATEGORIES
========================================== */

.categories{

    padding:100px 0;

}

.categories__header{

    text-align:center;

    max-width:700px;

    margin:0 auto 60px;

}

.categories__badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    background:var(--accent);

    border:var(--border);

    border-radius:999px;

    font-weight:700;

    box-shadow:var(--shadow);

    margin-bottom:22px;

}

.categories__title{

    font-size:48px;

    font-weight:800;

    margin-bottom:18px;

}

.categories__description{

    color:var(--gray);

    font-size:18px;

    line-height:1.7;

}

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

.categories__grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

}

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

.game-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:40px 25px;

    background:#fff;

    border:var(--border);

    border-radius:32px;

    box-shadow:var(--shadow);

    text-decoration:none;

    color:var(--dark);

    transition:.3s ease;

    overflow:hidden;

}

.game-card:hover{

    transform:translateY(-10px);

    box-shadow:0 16px 0 var(--dark);

}

.game-card img{

    width:90px;

    height:90px;

    object-fit:contain;

    margin-bottom:24px;

    transition:.3s ease;

}

.game-card:hover img{

    transform:scale(1.08);

}

.game-card h3{

    text-align:center;

    font-size:20px;

    font-weight:700;

}

/* ==========================================
   BADGE
========================================== */

.game-card__badge{

    position:absolute;

    top:18px;

    right:18px;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    color:#fff;

}

.hot{

    background:#ff5d73;

}

.new{

    background:#00c2a8;

}

.promo{

    background:#6c63ff;

}

/* ==========================================
   ACCENT
========================================== */

.game-card__accent{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:8px;

}

.accent-blue{

    background:#3b82f6;

}

.accent-orange{

    background:#f97316;

}

.accent-green{

    background:#22c55e;

}

.accent-purple{

    background:#8b5cf6;

}

.accent-red{

    background:#ef4444;

}

.accent-cyan{

    background:#06b6d4;

}