@import url(./common.css);
.home-hero { min-height:250px; margin-bottom:34px; padding:38px 42px; border-radius:20px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; background:var(--mint); }
.home-hero h1 { margin:9px 0 12px; font-family:'Space Grotesk',sans-serif; font-size:clamp(38px,5vw,62px); line-height:.98; }
.home-hero h1 em { color:var(--accent); font-style:normal; }
.home-hero p { max-width:440px; margin:0; color:#496259; font-size:15px; }
.hero-mark { width:112px; height:112px; border-radius:50%; display:grid; place-items:center; color:var(--accent); background:var(--yellow); font-size:62px; transform:rotate(15deg); }
.page-heading { margin-bottom:28px; }
.page-heading h1 { margin:8px 0 0; font-family:'Space Grotesk',sans-serif; font-size:36px; line-height:1.1; }
.search-heading { max-width:600px; }
.ad { min-height:74px; margin-bottom:28px; border:1px dashed #d9dee6; border-radius:14px; display:grid; place-items:center; color:#a7afba; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.game-category { display:flex; align-items:center; gap:10px; margin:30px 0 15px; font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:700; }
.game-category img { width:30px; height:30px; object-fit:contain; }
.category-count { margin-left:5px; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:12px; font-weight:600; }
.games { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:18px 12px; }
.game-item { min-width:0; cursor:pointer; }
.game-img { position:relative; aspect-ratio:1; overflow:hidden; border-radius:13px; background:#e9edf2; box-shadow:0 6px 16px rgba(34,49,69,.08); }
.game-img img.game-icon { width:100%; height:100%; display:block; object-fit:cover; transition:transform .28s ease; }
.game-item:hover .game-icon { transform:scale(1.06); }
.game-star { position:absolute; left:7px; bottom:7px; padding:3px 7px; border-radius:999px; display:flex; align-items:center; gap:4px; color:#fff; background:rgba(23,32,43,.82); font-size:11px; font-weight:700; }
.game-star img { width:11px; height:11px; }
.game-name { margin-top:8px; color:var(--ink); font-size:13px; line-height:1.25; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.game-item:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:13px; }
.empty-state { grid-column:1/-1; min-height:260px; border:1px dashed #d8dee6; border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.empty-state strong { font-family:'Space Grotesk',sans-serif; font-size:24px; }
.empty-state span { margin:6px 0 18px; color:var(--muted); font-size:14px; }
.empty-state a { padding:10px 16px; border-radius:9px; color:#fff; background:var(--accent); font-weight:700; font-size:13px; }
@media (max-width:1050px) { .games { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (max-width:700px) { .home-hero { min-height:220px; padding:28px 24px; } .home-hero h1 { font-size:39px; } .hero-mark { width:72px; height:72px; font-size:39px; } .page-heading h1 { font-size:30px; } .ad { min-height:56px; margin-bottom:20px; } .game-category { margin-top:26px; font-size:18px; } .games { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 10px; } .game-name { font-size:12px; } }