:root{
    --bg:#0f0f10; --surface:#1a1a1c; --surface2:#242427; --border:#2a2a2d;
    --text:#f2f2f4; --muted:#8a8a90; --accent:#ff2e54; --accent2:#ff7a2f;
    --grad:linear-gradient(120deg,var(--accent),var(--accent2));
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; }
.wrap{ width:min(100% - 32px, 1200px); margin:0 auto; }
a{ color:inherit; text-decoration:none; }

.top{ border-bottom:1px solid var(--border); background:rgba(0,0,0,.2); position:sticky; top:0; z-index:5; backdrop-filter:blur(6px); }
.top__in{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; align-items:center; gap:10px; font-size:1.05rem; font-weight:700; }
.brand b{ color:var(--accent); }
.brand__logo{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--grad); color:#fff; font-weight:900; font-size:.8rem; }
.ghost{ font-size:.82rem; color:var(--muted); border:1px solid var(--border); padding:8px 12px; border-radius:9px; }
.ghost:hover{ color:var(--text); border-color:var(--accent); }

.bar{ display:flex; align-items:center; gap:14px; margin:28px 0 18px; flex-wrap:wrap; }
.search{ flex:1; min-width:220px; display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:13px; background:var(--surface); border:1px solid var(--border); color:var(--muted); }
.search:focus-within{ border-color:var(--accent); }
.search svg{ width:18px; height:18px; flex:0 0 auto; }
.search input{ flex:1; border:0; background:none; color:var(--text); font:inherit; font-size:.95rem; outline:none; min-width:0; }
.count{ font-size:.85rem; color:var(--muted); }

.state{ padding:60px 20px; text-align:center; color:var(--muted); }
.state.err{ color:#ff6b81; }

.game{ margin-bottom:30px; }
.game__head{ display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.game__name{ font-size:1.05rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; }
.game__tag{ font-size:.72rem; color:var(--muted); background:var(--surface2); border:1px solid var(--border); padding:3px 9px; border-radius:999px; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:border-color .2s, transform .2s; }
.card:hover{ border-color:var(--accent); transform:translateY(-3px); }
.card__thumb{ aspect-ratio:1/1; background:var(--surface2); overflow:hidden; }
.card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.card__foot{ display:flex; align-items:center; gap:8px; padding:10px 12px; }
.card__name{ flex:1; min-width:0; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card__copy{ flex:0 0 auto; border:1px solid var(--border); background:var(--surface2); color:var(--text); font:inherit; font-size:.72rem; font-weight:700; padding:6px 10px; border-radius:8px; cursor:pointer; }
.card__copy:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.card__copy.ok{ background:#28c76f; border-color:#28c76f; color:#fff; }

.foot{ padding:30px 0 40px; color:var(--muted); font-size:.82rem; text-align:center; }
@media (max-width:520px){ .grid{ grid-template-columns:repeat(2,1fr); } }