:root{
  --bg:#080808;
  --panel:#111;
  --panel2:#171217;
  --text:#fff;
  --muted:#b8adb4;
  --red:#ff1648;
  --red2:#e60039;
  --gold:#ffc83d;
  --line:rgba(255,255,255,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
.shell{width:min(1120px,calc(100% - 28px));margin:auto}

/* HEADER */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(8,8,8,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{height:68px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand-logos{display:flex;align-items:center}
.brand-logos img{
  width:39px;height:39px;object-fit:contain;background:#030303;
  border-radius:10px;border:1px solid rgba(255,255,255,.08)
}
.brand-logos img+img{margin-left:-8px}
.brand-name{font-size:17px;font-weight:900}
.brand-name b{color:var(--red)}
.hamburger{
  width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,22,72,.35);
  background:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px
}
.hamburger span{width:20px;height:2px;background:#fff;border-radius:5px}
.mobile-menu{
  position:absolute;left:14px;right:14px;top:74px;
  background:#151015;border:1px solid var(--line);border-radius:16px;
  padding:8px;display:none;box-shadow:0 22px 50px rgba(0,0,0,.4)
}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:12px 13px;border-radius:10px;color:#ddd;font-weight:700;font-size:14px}
.mobile-menu a:hover{background:#21131a}

/* HERO */
.hero{
  padding:44px 0 34px;
  background:
    radial-gradient(circle at 20% 8%,rgba(255,0,54,.13),transparent 32%),
    radial-gradient(circle at 80% 18%,rgba(255,180,0,.09),transparent 28%),
    linear-gradient(180deg,#10070a 0,#080808 92%);
}
.hero-heading{text-align:center;max-width:780px;margin:0 auto 25px}
.top-label{
  color:#ff5577;font-size:11px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:8px
}
.hero-heading h1{
  font-size:clamp(34px,6vw,68px);line-height:1.05;
  letter-spacing:-2.4px;margin-bottom:12px;font-weight:950
}
.hero-heading h1 span{color:var(--red)}
.hero-subtitle{color:#bfb3ba;font-size:16px;max-width:690px;margin:auto}

.game-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:12px
}
.game-tile{
  position:relative;overflow:hidden;
  min-height:230px;border-radius:22px;
  background:linear-gradient(155deg,#1b0e14,#0c090b);
  border:1px solid rgba(255,35,73,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px 12px;
  box-shadow:0 18px 50px rgba(0,0,0,.3)
}
.in-tile{border-color:rgba(255,180,0,.30)}
.tile-glow{
  position:absolute;width:180px;height:180px;border-radius:50%;
  background:rgba(255,16,67,.13);filter:blur(25px);right:-70px;top:-70px
}
.in-tile .tile-glow{background:rgba(255,183,28,.12)}
.game-tile img{
  width:min(240px,88%);max-height:135px;object-fit:contain;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));
  position:relative;z-index:2
}
.tile-title{
  position:relative;z-index:2;margin-top:14px;
  font-size:18px;font-weight:900
}

.download-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px
}
.download-btn{
  min-height:61px;padding:8px 12px;border-radius:16px;
  background:linear-gradient(135deg,#ff385c,#e60038);
  box-shadow:0 13px 30px rgba(230,0,56,.22);
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-weight:900;font-size:13px;text-align:center;transition:.2s ease
}
.download-btn:hover{transform:translateY(-2px)}
.dl-icon{font-size:22px}

.all-games{
  margin-top:14px;min-height:68px;padding:10px 17px;border-radius:18px;
  background:linear-gradient(135deg,#ffda59,#f6ad00);
  color:#181008;display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:16px;font-weight:950;box-shadow:0 15px 34px rgba(246,173,0,.15);
  transition:.2s ease
}
.all-games:hover{transform:translateY(-2px)}
.all-games small{display:block;font-size:8px;letter-spacing:.13em}
.all-games b{margin-left:auto;font-size:22px}
.gamepad{font-size:21px}

/* LATEST */
.latest{padding:58px 0;background:#0b090b;border-top:1px solid var(--line)}
.section-head{text-align:center;max-width:680px;margin:0 auto 27px}
.section-head h2{font-size:34px;line-height:1.08;letter-spacing:-1.2px;margin-bottom:8px}
.section-head h2 span{color:var(--red)}
.section-head>p:last-child{color:var(--muted);font-size:14px}
.latest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.latest-card{
  min-height:135px;border-radius:16px;padding:13px 10px;
  border:1px solid var(--line);background:#131013;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  transition:.2s ease
}
.latest-card:hover{transform:translateY(-3px);border-color:rgba(255,31,73,.45)}
.game-icon{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:9px;font-size:22px;font-weight:950;color:#fff;
  background:linear-gradient(135deg,#ff2852,#a9002c)
}
.latest-card strong{font-size:12px;line-height:1.2}
.latest-card small{font-size:10px;color:#887e84;margin-top:3px}
.c2 .game-icon,.c4 .game-icon{background:linear-gradient(135deg,#ffb921,#c55900)}
.c5 .game-icon,.c7 .game-icon{background:linear-gradient(135deg,#865cff,#4229c8)}
.c6 .game-icon,.c8 .game-icon{background:linear-gradient(135deg,#20b4ff,#0563c0)}

/* ABOUT */
.about{padding:60px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.info-card{
  background:linear-gradient(160deg,#161014,#0d0a0c);
  border:1px solid var(--line);border-radius:22px;padding:22px
}
.info-logo{height:84px;display:flex;align-items:center;margin-bottom:10px}
.info-logo img{max-width:190px;max-height:72px;object-fit:contain}
.info-card h3{font-size:23px;margin-bottom:8px}
.info-card p,.seo-copy p{color:#aaa0a6;font-size:14px}
.seo-copy{
  margin-top:18px;background:#100c0f;border:1px solid var(--line);
  border-radius:22px;padding:24px
}
.seo-copy h2{font-size:25px;margin-bottom:8px}
.seo-copy p+p{margin-top:10px}

/* CTA */
.final-cta{
  padding:48px 0;background:linear-gradient(110deg,#250a12,#0e090b 55%,#211307);
  border-top:1px solid var(--line)
}
.final-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.final-cta h2{font-size:31px;line-height:1.1;margin-bottom:5px}
.final-cta p{color:#aa9fa5}
.final-cta a{
  flex:0 0 auto;background:linear-gradient(135deg,#ffdb5b,#f3a700);color:#170f07;
  font-weight:950;padding:15px 19px;border-radius:15px
}
.final-cta a span{margin-left:10px}

/* FOOTER */
.footer{padding:30px 0;background:#050505;border-top:1px solid var(--line)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-logo-row{display:flex}.footer-logo-row img{width:38px;height:38px;object-fit:contain}.footer-logo-row img+img{margin-left:-7px}
.footer p{color:#70676c;font-size:11px;text-align:right;max-width:480px}

/* MOBILE */
@media(max-width:680px){
  .shell{width:calc(100% - 20px)}
  .hero{padding-top:30px}
  .hero-heading h1{font-size:31px;letter-spacing:-1.2px}
  .hero-subtitle{font-size:13px}
  .game-pair{gap:8px}
  .game-tile{min-height:178px;border-radius:18px;padding:14px 8px}
  .game-tile img{max-height:102px;width:94%}
  .tile-title{font-size:14px;margin-top:8px}
  .download-pair{gap:8px;margin-top:8px}
  .download-btn{min-height:56px;border-radius:14px;font-size:10px;padding:7px 6px;gap:4px}
  .dl-icon{font-size:17px}
  .all-games{min-height:60px;border-radius:15px;font-size:13px}
  .all-games b{font-size:18px}
  .latest{padding:43px 0}
  .section-head{margin-bottom:20px}
  .section-head h2{font-size:28px}
  .latest-grid{gap:8px}
  .latest-card{min-height:112px;padding:10px 5px;border-radius:13px}
  .game-icon{width:40px;height:40px;font-size:18px;border-radius:11px;margin-bottom:7px}
  .latest-card strong{font-size:10px}
  .latest-card small{font-size:8px}
  .about{padding:45px 0}
  .about-grid{grid-template-columns:1fr}
  .info-card{padding:18px}
  .final-cta-inner{display:block}
  .final-cta a{display:inline-block;margin-top:18px}
  .footer-inner{display:block;text-align:center}
  .footer-brand{justify-content:center;margin-bottom:12px}
  .footer p{text-align:center}
}
@media(max-width:360px){
  .latest-grid{grid-template-columns:repeat(2,1fr)}
  .download-btn{font-size:9px}
  .hero-heading h1{font-size:28px}
}