/* game-styles.css - responsive card grid and single layout */
.game-list-section {padding:20px;}
.game-category {margin-bottom:32px;}
.game-category .category-title {font-size:20px;margin-bottom:12px;font-weight:600;}
.game-category .category-subtitle {font-size:14px;color:#666;margin-bottom:10px;}

.game-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.game-card {
  text-align:center;
  padding:12px;
  border:1px solid #eee;
  border-radius:8px;
  background:#fff;
}
.game-card a {text-decoration:none;color:inherit;}
.game-card .game-logo {width:100%;height:120px;object-fit:contain;display:block;margin:0 auto 8px auto;}
.game-card .game-title {font-size:14px; margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

@media (max-width: 600px) {
  .game-grid {grid-template-columns: repeat(2, 1fr);}
}

.game-single-wrap {padding:20px; max-width:1100px; margin:0 auto;}
.game-single-header {display:flex; gap:20px; align-items:center; margin-bottom:20px;}
.game-single-header .game-logo {width:140px;height:140px;object-fit:contain;border-radius:6px;border:1px solid #e6e6e6;padding:8px;background:#fff;}
.game-single-content {display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;}
@media (max-width:900px){
  .game-single-content {grid-template-columns:1fr;}
}

.game-screens {display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap;}
.game-screens img{max-width:160px; max-height:100px; cursor:pointer; border:1px solid #ddd; padding:4px; border-radius:6px;}
.game-iframe {width:100%; height:480px; border:1px solid #ccc; background:#000; display:block;}
.game-description {margin-top:12px; line-height:1.6;}
.recommended-list {margin-top:18px;}
.recommended-list .game-card {display:flex; align-items:center; gap:10px; padding:8px;}
.recommended-list .game-card .game-logo {width:64px;height:48px;}