/* Home page styles - matching detail page layout */
body{background-color:#fff;min-height:100vh;padding:0;width:100%}

.container{max-width:1200px;margin:0 auto;padding:4px 15px 15px;width:100%}


/* Section titles */
.section-label{font-size:18px;font-weight:700;color:#1a1a1a;margin:20px 0 0;padding:10px 0;display:block}

/* Games container */
.games-container{background:#fff;border-radius:12px;padding:0;margin:10px 0}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}

/* Game cards - clean flat style */
.game-card{background:#fff;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s;cursor:pointer;display:flex;flex-direction:column}
.game-card:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.1)}
.game-icon-wrapper{position:relative;width:100%;padding-top:100%;overflow:hidden;background:#f5f5f5}
.game-icon{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.game-card:hover .game-icon{transform:scale(1.05)}
.game-info{padding:7px 10px 8px;background:#fff}
.game-name{font-size:12px;font-weight:600;color:#1a1a1a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3;margin-bottom:3px}
.game-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px}
.game-rating{display:flex;align-items:center;gap:2px;color:#333;font-weight:600}
.star{color:#ffb400;font-size:11px}
.game-category{color:#aaa;font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:0.3px;overflow:hidden;white-space:nowrap;max-width:60px}

/* Ad break between game grids */
.ad-break{margin:0}


/* Mobile responsive */
@media(max-width:480px){
    .container{padding:10px 12px}
    .games-container{border-radius:10px}
    .games-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
    .game-info{padding:8px 10px}
    .game-name{font-size:12px}
}
@media(min-width:481px) and (max-width:767px){
    .container{padding:12px 15px}
    .games-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
}
@media(min-width:768px){
    .container{padding:4px 20px 15px}
    .games-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
    .game-info{padding:12px 14px}
    .game-name{font-size:14px}
}
@media(min-width:1024px){
    .games-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
}