.catalog-page { min-height: 100vh; }
.catalog-hero { min-height: 360px; padding: 78px 4vw 55px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; background: radial-gradient(circle at 78% 42%,rgba(61,205,96,.18),transparent 25%),linear-gradient(120deg,#07140c,#0b2114); border-bottom: 1px solid rgba(134,213,151,.1); }
.catalog-hero h1 { margin-top: 13px; font-size: clamp(47px,5vw,72px); }
.catalog-hero p { max-width: 520px; margin: 20px 0 0; color: #8ba095; font-size: 14px; line-height: 1.7; }
.catalog-stat { width: 190px; height: 190px; margin-right: 8vw; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(112,229,140,.2); border-radius: 50%; background: radial-gradient(circle,rgba(70,191,99,.18),rgba(10,27,17,.85)); box-shadow: 0 0 80px rgba(57,207,94,.12); }
.catalog-stat span { color: #70e58c; font-size: 22px; }
.catalog-stat strong { margin-top: 5px; font: 700 50px "Space Grotesk",sans-serif; }
.catalog-stat small { color: #73887b; font-size: 9px; }
.catalog-content { padding: 42px 30px 100px; }
.catalog-tools { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.catalog-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.catalog-filters button { flex: 0 0 auto; padding: 10px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: #0b1b12; color: #84998d; font: 700 10px Manrope; cursor: pointer; }
.catalog-filters button.active { border-color: rgba(112,229,140,.3); background: #173c25; color: #8dec9f; }
.game-search { width: 240px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: #08170f; color: #6d8275; }
.game-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #eff8f0; font: 600 10px Manrope; }
.catalog-grid { display: grid; grid-template-columns: repeat(8,minmax(105px,1fr)); gap: 14px; }
.catalog-game { width: 100%; }
.catalog-game.api-game { display:block; aspect-ratio:.72; margin:0; min-width:0; }
.catalog-game.api-game .compact-game { width:100%; height:100%; aspect-ratio:auto; }
.api-game-cover { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.catalog-game.api-game .compact-game::before { z-index:1; top:auto; right:0; bottom:0; left:0; width:100%; height:68%; border:0; border-radius:0; background:linear-gradient(transparent,rgba(2,7,4,.97)); transform:none; }
.catalog-game.api-game .compact-game::after { display:none; }
.catalog-game.api-game .compact-game > strong,.catalog-game.api-game .compact-game > small,.catalog-game.api-game .game-badge { z-index:2; }
.catalog-game[hidden] { display: none; }
.empty-games { display: none; padding: 80px 0; color: #718579; text-align: center; font-size: 12px; }
.empty-games.show { display: block; }
@media(max-width:1200px){.catalog-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:900px){.catalog-grid{grid-template-columns:repeat(4,1fr)}.catalog-stat{margin-right:2vw}}
@media(max-width:620px){.catalog-hero{min-height:290px;padding:50px 18px 35px}.catalog-hero h1{font-size:42px}.catalog-hero p{font-size:11px}.catalog-stat{display:none}.catalog-content{padding:25px 10px 80px}.catalog-tools{align-items:stretch;flex-direction:column}.game-search{width:100%}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.catalog-game{flex:none}.catalog-filters{margin-right:-10px;padding-right:10px}}