*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#09090b;--surface:#18181b;--border:#27272a;--text:#fafafa;--text-muted:#a1a1aa;--accent:#3b82f6;--accent-hover:#2563eb}body{background:var(--bg);color:var(--text);flex-direction:column;min-height:100vh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;display:flex}#pwa-banner{background:var(--accent);color:#fff;text-align:center;justify-content:center;align-items:center;gap:1rem;padding:.75rem 1rem;font-size:.9rem;font-weight:500;display:flex}#pwa-banner.hidden{display:none}#install-btn{color:#fff;cursor:pointer;background:#0003;border:none;border-radius:6px;padding:.4rem .8rem;font-weight:700;transition:background .2s}#install-btn:hover{background:#0000004d}header{text-align:center;padding:4rem 1rem 2rem}header h1{letter-spacing:-.05em;justify-content:center;align-items:center;gap:.75rem;margin-bottom:.5rem;font-size:3rem;font-weight:800;display:flex}header h1 i{color:var(--accent)}header p{color:var(--text-muted);font-size:1.2rem}.header-nav{justify-content:center;align-items:center;gap:2rem;max-width:640px;margin:1.5rem auto 0;display:flex}.search-wrap{flex:1;max-width:360px;position:relative}.search-icon{color:var(--text-muted);pointer-events:none;font-size:.9rem;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.search-input{background:var(--surface);border:1px solid var(--border);width:100%;color:var(--text);border-radius:8px;outline:none;padding:.6rem .75rem .6rem 2.25rem;font-size:.95rem;transition:border-color .2s}.search-input:focus{border-color:var(--accent)}.search-input::placeholder{color:var(--text-muted);font-size:.85rem}.nav-links{gap:.5rem;display:flex}.nav-link{color:var(--text-muted);border-radius:8px;align-items:center;padding:.5rem 1rem;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.nav-link:hover{color:var(--text);background:#ffffff0d}.nav-link.active{color:var(--text);background:var(--accent)}#game-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem;max-width:1200px;margin:0 auto;padding:0 2rem 4rem;display:grid}.game-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;transition:transform .2s,border-color .2s;display:flex;position:relative;overflow:hidden}.game-card:hover{border-color:var(--text-muted);transform:translateY(-4px)}.game-card-img{aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--border);width:100%}.game-card-body{flex-direction:column;flex:1;padding:1.5rem;display:flex}.game-card h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:700}.game-card p{color:var(--text-muted);flex:1;margin-bottom:1.5rem;font-size:1rem;line-height:1.5}.tags{flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;display:flex}.tag{border:1px solid var(--border);color:var(--text-muted);background:#ffffff0d;border-radius:9999px;padding:.2rem .6rem;font-size:.75rem}.game-card-footer{gap:.75rem;display:flex}.btn{border-radius:6px;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.btn-primary{background:var(--text);color:var(--bg)}.btn-primary:hover{background:#e5e5e5}.btn-secondary{color:var(--text);border:1px solid var(--border);background:0 0}.btn-secondary:hover{background:#ffffff0d}.modal{z-index:1000;background:#000000b3;justify-content:center;align-items:center;display:none;position:fixed;top:0;bottom:0;left:0;right:0}.modal:not(.hidden){display:flex}.modal-content{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:12px;width:90%;max-width:400px;padding:2rem}.modal-content p{margin-bottom:1.5rem;font-size:1.1rem;line-height:1.5}.modal-actions{justify-content:center;gap:.75rem;display:flex}.btn-danger{color:#fff;background:#ef4444;border:none}.btn-danger:hover{background:#dc2626}.clear-cache-btn{color:#ef4444;cursor:pointer;background:0 0;border:1px solid #ef4444;border-radius:6px;margin-top:1.5rem;padding:.5rem 1rem;font-size:.85rem;font-weight:600;transition:all .2s}.clear-cache-btn:hover{color:#fff;background:#ef4444}footer{text-align:center;color:var(--text-muted);border-top:1px solid var(--border);padding:2rem}@media (max-width:640px){header h1{font-size:2rem}#game-grid{grid-template-columns:1fr;padding:0 1rem 2rem}#pwa-banner{flex-direction:column;gap:.5rem}}