:root{--bg:#0c0c22;--surface:#17162f;--raised:#211e3b;--ink:#f4f1ff;--muted:#a29ab8;--line:#ffffff16;--pink:#ff4da6;--cyan:#46dfeb;--gold:#ffd166;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font-family:'Space Grotesk',Arial,sans-serif;background:var(--bg)}
body:before{content:'';position:fixed;z-index:-1;inset:auto 0 0;height:48vh;background:linear-gradient(transparent,rgba(255,77,166,.23)),repeating-linear-gradient(90deg,rgba(70,223,235,.12) 0 1px,transparent 1px 76px),repeating-linear-gradient(0deg,rgba(255,77,166,.12) 0 1px,transparent 1px 52px);transform:perspective(420px) rotateX(62deg);transform-origin:bottom}
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px 28px;background:rgba(12,12,34,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{color:var(--ink);text-decoration:none;font-size:20px;font-weight:700}.brand span,h1 span{color:var(--pink)}.pf-nav .duo-btn{color:var(--cyan);border-color:var(--cyan)}
.catalog-page{max-width:1240px;margin:auto;padding:42px 28px 84px}.catalog-hero{display:flex;justify-content:space-between;gap:24px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:28px}.eyebrow{margin:0 0 9px;font:10px var(--mono);letter-spacing:.14em;color:var(--muted)}h1{margin:0;font-size:52px;line-height:1}.catalog-lead{max-width:660px;margin:16px 0 0;color:var(--muted);line-height:1.6}.catalog-total{min-width:135px;text-align:right}.catalog-total b{display:block;font:700 44px var(--mono);color:var(--cyan)}.catalog-total span{font:10px var(--mono);color:var(--muted)}
.catalog-controls{display:grid;grid-template-columns:minmax(210px,1.5fr) minmax(170px,.7fr) auto auto;gap:10px;margin:26px 0 15px}.search{display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}.search span{font-size:20px;color:var(--cyan)}input,select{width:100%;min-width:0;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font:13px 'Space Grotesk',sans-serif;padding:12px;outline:none}input{border:0;background:transparent;padding:12px 0}input:focus,select:focus{border-color:var(--cyan)}.sort{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}.sort button,.random-btn{border:0;background:var(--surface);color:var(--muted);font:11px var(--mono);padding:0 11px;cursor:pointer}.sort button+button{border-left:1px solid var(--line)}.sort button.active,.sort button:hover{color:#1b1030;background:var(--cyan)}.random-btn{border:1px solid var(--pink);color:var(--pink);border-radius:6px}.random-btn:hover{background:var(--pink);color:#1b1030}.chips{display:flex;flex-wrap:wrap;gap:7px}.chips button{border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);padding:7px 10px;font:10px var(--mono);cursor:pointer}.chips button.active,.chips button:hover{color:var(--ink);border-color:var(--cyan);box-shadow:0 0 13px rgba(70,223,235,.13)}.catalog-summary{display:flex;justify-content:space-between;gap:15px;margin:27px 0 13px;font:11px var(--mono);color:var(--muted)}.catalog-summary span:first-child{color:var(--ink);font:600 15px 'Space Grotesk',sans-serif}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:13px}.game{background:var(--surface);border:1px solid var(--line);border-radius:7px;overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s}.game:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 12px 28px rgba(0,0,0,.3)}.cover{display:block;width:100%;aspect-ratio:355/512;border:0;background:var(--raised);padding:0;cursor:pointer;position:relative;overflow:hidden}.cover img,.cover canvas{width:100%;height:100%;display:block;object-fit:cover}.cover canvas{image-rendering:pixelated}.cover-badge{position:absolute;top:8px;left:8px;padding:4px 6px;background:rgba(12,12,34,.82);border:1px solid rgba(255,255,255,.15);border-radius:4px;font:9px var(--mono);color:var(--cyan)}.game-info{padding:10px}.game-title{margin:0;min-height:38px;font-size:13px;line-height:1.45}.game-meta{display:flex;justify-content:space-between;gap:5px;margin-top:7px;font:9px var(--mono);color:var(--muted)}.game-foot{display:flex;justify-content:space-between;gap:7px;margin-top:11px}.game-foot button{border:1px solid var(--line);border-radius:4px;background:var(--raised);color:var(--ink);font:10px var(--mono);padding:7px;cursor:pointer}.game-foot button:last-child{flex:1;background:var(--pink);border-color:var(--pink);color:#1b1030}.game-foot .liked{color:var(--pink)}.empty{grid-column:1/-1;padding:48px 12px;text-align:center;font:12px var(--mono);color:var(--muted)}.toasts{position:fixed;left:18px;bottom:18px;z-index:40}.toast{padding:11px 14px;background:var(--surface);border-left:3px solid var(--pink);font:11px var(--mono);box-shadow:0 10px 28px #0008}
@media(max-width:850px){.catalog-controls{grid-template-columns:1fr 1fr}.sort,.random-btn{min-height:43px}.catalog-hero{align-items:start}.top{padding:10px 14px;align-items:flex-start}.catalog-page{padding:27px 16px 62px}h1{font-size:39px}}@media(max-width:560px){.catalog-controls{grid-template-columns:1fr}.sort button{flex:1}.catalog-hero{display:block}.catalog-total{text-align:left;margin-top:22px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pf-nav{gap:5px}.pf-nav a,.pf-nav button,.pf-nav .pf-online{min-width:0;padding:0 9px;font-size:10px;height:34px}}