*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
:root{
  --bg:#0f141b; --card:#1a222e; --line:#283246; --muted:#a3b0c2;
  --text:#e7edf6; --accent:#7ad26b; --blue:#4aa4ff; --green:#22c55e;
}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial}
a{text-decoration:none;color:inherit}
.container{width:min(1200px,92%);margin-inline:auto}
.muted{color:var(--muted)}
.topbar{position:sticky;top:0;background:#121927;border-bottom:1px solid var(--line);z-index:20}
.topbar__row{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.logo{font-weight:900;letter-spacing:1px;display:flex;align-items:center;gap:.3rem}
.logo span{color:#38e5bb}
.cta{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1rem;border-radius:10px;border:1px solid transparent;font-weight:800;cursor:pointer}
.btn-primary{background:var(--blue);color:#fff}
.btn-ghost{background:transparent;border-color:#3a4a62;color:#cfe2ff}
.btn-info{background:#3170ff;color:#fff}
.btn-green{background:var(--green);color:#051207}
.btn:hover{filter:brightness(1.05)}
.w100{width:100%}
.main{padding:18px 0 60px}
.hero{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.hero__img{width:100%;display:block;filter:brightness(.92)}
.hero__overlay{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;gap:12px}
.hero__overlay .btn{align-self:flex-start;border-radius:12px}
.hero__title{font-size:clamp(16px,2.2vw,22px);font-weight:900;letter-spacing:.4px}
.hero__big{font-size:clamp(26px,4.8vw,48px);font-weight:900;color:#bfe0ff;text-shadow:0 4px 20px rgba(0,0,0,.6)}
.stats{display:grid;grid-template-columns:repeat(3,220px) 1fr 300px;gap:10px;align-items:center;margin:12px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px}
.stat__label{color:var(--muted);font-size:12px}
.stat__value{font-weight:900}
.search{display:flex;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 8px}
.search input{background:transparent;border:0;outline:0;color:#cfe2ff;width:100%}
.search button{background:transparent;border:0;color:#cfe2ff;cursor:pointer}
.tabs{display:flex;gap:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:10px 0}
.tab{padding:.5rem .8rem;border-radius:999px;background:#151c29;border:1px solid #243146;color:#cfe2ff;font-weight:800}
.tab.active{background:#0f2a22;border-color:#1f7a5e;color:#a7f5db}
.layout{display:grid;grid-template-columns:1fr 360px;gap:14px;margin-top:14px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.game{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative}
.game img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.game__title{position:absolute;left:0;right:0;bottom:0;padding:.5rem .6rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6));font-weight:800}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card__body{padding:12px}
.card__title{font-weight:900;margin:6px 0}
.providers{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:#151c29;border:1px solid #243146;border-radius:999px;padding:.4rem .8rem;color:#cfe2ff}
.seo{margin-top:22px;background:#0f141b;border:1px solid var(--line);border-radius:12px;padding:16px}
.seo h1{margin:0 0 10px}
.seo h2{margin:10px 0 6px}
.footer{border-top:1px solid var(--line);background:#121927;padding:18px 0;margin-top:22px}
.footer p{margin:0;text-align:center}
@media (max-width:1024px){ .grid{grid-template-columns:repeat(3,1fr)} .stats{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto} .layout{grid-template-columns:1fr}}
@media (max-width:680px){ .grid{grid-template-columns:repeat(2,1fr)} }