:root{--bg:#0b0f19;--card:#141b2b;--text:#fff;--muted:#8c9fb5}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',Roboto,Arial,sans-serif}
body{background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}

header{background:#0b0f19f2;position:sticky;top:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.9rem 1.5rem;border-bottom:2px solid var(--p)}
.brand-wrap{display:flex;align-items:center;gap:10px}
.brand{font-size:1.7rem;font-weight:900;letter-spacing:2px}
.badge{background:var(--p);color:var(--on,#fff);font-size:.75rem;font-weight:800;padding:4px 10px;border-radius:6px;letter-spacing:1px}

nav{display:flex;gap:8px;flex-wrap:wrap}
.nav-btn{font-size:.9rem;font-weight:700;padding:.5rem 1rem;border-radius:10px;background:#ffffff0d;border:1px solid #ffffff1f;transition:background .2s,border-color .2s}
.nav-btn:hover,.nav-btn.active{border-color:var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 18%,transparent)}

.search{flex:0 1 300px}
.search input{width:100%;padding:.6rem 1.1rem;border-radius:20px;border:1px solid #ffffff26;background:var(--card);color:var(--text);outline:none;font-size:.9rem}
.search input:focus{border-color:var(--p)}

main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem 1.5rem}
.section-title{font-size:1.25rem;font-weight:700;margin-bottom:1.4rem;color:#e2e8f0}
.section-title small{font-size:.8rem;color:var(--muted);font-weight:600;margin-left:6px}

.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.2rem}
.game-card{background:var(--card);border-radius:14px;overflow:hidden;cursor:pointer;position:relative;aspect-ratio:1/1;
  border:1px solid #ffffff0d;transition:transform .15s,border-color .15s;outline:none}
.game-card:hover,.game-card:focus-visible{transform:translateY(-4px);border-color:var(--p)}
.game-card img{width:100%;height:100%;object-fit:cover;display:block}
.ph{width:100%;height:100%;display:grid;place-items:center;font-size:2.5rem;font-weight:900;background:linear-gradient(135deg,var(--p),#0b0f19)}
.game-title{position:absolute;inset:auto 0 0;padding:.7rem;text-align:center;font-size:.88rem;font-weight:700;
  background:linear-gradient(to top,#000000f2,#00000080 60%,transparent)}
.empty{grid-column:1/-1;color:var(--muted);text-align:center;padding:2rem 0}

.ad-wrapper{margin-top:2.5rem;padding:1.2rem;background:#141b2b99;border:1px solid #ffffff14;border-radius:14px;
  text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ad-tag{font-size:.7rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:.7rem}

.modal{display:none;position:fixed;inset:0;background:#000000eb;z-index:1000;align-items:center;justify-content:center;padding:1rem}
.modal.open{display:flex}
.modal-content{width:95%;max-width:920px;height:85vh;background:#000;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--p)}
.modal-content.fullscreen{width:100vw;max-width:100vw;height:100vh;border-radius:0}
.modal-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1.1rem;background:var(--card)}
.modal-header h3{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-actions{display:flex;gap:10px}
.btn-action{background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;padding:4px}
.btn-action:hover{color:var(--p)}
.modal-content iframe{flex:1;width:100%;border:0;background:#000}

@media(max-width:600px){header,main{padding-left:1rem;padding-right:1rem}.games-grid{grid-template-columns:repeat(2,1fr);gap:.9rem}}