:root{--bg:#07071a;--bg2:#0d0d26;--card:#12122e;--line:#25254d;--tx:#eef0ff;--sub:#a8acd6;--dim:#6d71a3;--cy:#38d6d6;--vi:#9b6bff;--or:#ffb05a;--pk:#ff5ac8;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.6 var(--ui);-webkit-font-smoothing:antialiased}
a{color:var(--cy);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
header.top{position:sticky;top:0;z-index:20;background:rgba(7,7,26,.82);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
header.top .wrap{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--tx);font:800 15px/1 var(--ui);letter-spacing:.14em;text-decoration:none!important}
.brand img{width:38px;height:38px;border-radius:10px}
.brand b{background:linear-gradient(90deg,var(--cy),var(--vi));-webkit-background-clip:text;background-clip:text;color:transparent}
nav.links{margin-left:auto;display:flex;gap:22px}nav.links a{color:var(--sub);font-weight:700;font-size:14px}nav.links a:hover{color:var(--tx);text-decoration:none}
.hero{position:relative;overflow:hidden;padding:84px 0 70px;text-align:center}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 30%,rgba(155,107,255,.28),transparent 70%),radial-gradient(ellipse 40% 40% at 50% 60%,rgba(255,176,90,.12),transparent 70%)}
.hero .grid{position:absolute;left:-40%;right:-40%;bottom:-2px;height:45%;transform:perspective(360px) rotateX(62deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(56,214,214,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(155,107,255,.45) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 90%);mask-image:linear-gradient(to top,#000 10%,transparent 90%);animation:grid 4s linear infinite}
@keyframes grid{to{background-position:0 56px,0 0}}
.hero .in{position:relative}
.hero .eye{width:132px;height:132px;margin:0 auto 22px;border-radius:30px;box-shadow:0 18px 60px rgba(155,107,255,.35)}
.hero h1{margin:0;font:900 clamp(40px,7vw,78px)/1 var(--ui);letter-spacing:.04em}
.hero h1 span{background:linear-gradient(90deg,var(--cy),#7aa2ff 50%,var(--vi));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 small{display:block;margin-top:12px;font:800 clamp(14px,2vw,18px)/1 var(--ui);letter-spacing:.7em;padding-left:.7em;color:var(--or)}
.hero p.lead{margin:22px auto 0;max-width:620px;font-size:clamp(16px,2vw,19px);color:#d4d6f5}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:12px;padding:13px 22px;font:800 14px/1 var(--ui);letter-spacing:.06em;cursor:pointer;text-decoration:none!important;transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn.main{background:linear-gradient(90deg,var(--cy),var(--vi));color:#0a0a1f}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--vi)}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
section{padding:56px 0}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:22px}
.sec-h h2{margin:0;font:900 28px/1.1 var(--ui)}.sec-h p{margin:4px 0 0;color:var(--sub)}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px}
.gc{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;color:var(--tx);text-decoration:none!important;transition:transform .18s,border-color .18s,box-shadow .18s}
.gc:hover{transform:translateY(-4px);border-color:var(--a);box-shadow:0 18px 50px -18px var(--a)}
.gc .cv{aspect-ratio:630/500;background:#000 center/cover no-repeat;position:relative}
.gc .cv img{width:100%;height:100%;object-fit:cover}
.gc .bd{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.gc h3{margin:0;font:900 21px/1.15 var(--ui)}
.gc p{margin:0;color:var(--sub);font-size:14.5px;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.chip{font:700 11.5px/1 var(--ui);letter-spacing:.04em;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--sub)}
.badge{position:absolute;top:12px;left:12px;font:900 11px/1 var(--ui);letter-spacing:.14em;padding:7px 10px;border-radius:8px;background:var(--a);color:#06061a}
.play-pill{position:absolute;right:12px;bottom:12px;font:900 12px/1 var(--ui);letter-spacing:.1em;padding:9px 13px;border-radius:10px;background:rgba(6,6,26,.86);border:1px solid var(--a);color:var(--a)}
.about{display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center}
.about h2{font:900 30px/1.15 var(--ui);margin:0 0 12px}.about p{color:#cfd2f2}
.pillars{display:grid;gap:12px}
.pillar{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}.pillar b{display:block;margin-bottom:2px}.pillar span{color:var(--sub);font-size:14.5px}
footer{border-top:1px solid rgba(255,255,255,.06);padding:34px 0 46px;color:var(--dim);font-size:13.5px}
footer .wrap{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap}
footer a{color:var(--sub)}
/* game page */
.ghero{position:relative;padding:34px 0 10px}
.ghero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 20% 0%,color-mix(in srgb,var(--a) 22%,transparent),transparent 70%);pointer-events:none}
.crumbs{position:relative;font-size:13.5px;color:var(--dim);margin-bottom:12px}.crumbs a{color:var(--sub)}
.ghead{position:relative;display:flex;align-items:end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.ghead h1{margin:0;font:900 clamp(34px,5vw,52px)/1.05 var(--ui)}
.ghead p{margin:8px 0 0;color:#d4d6f5;font-size:17px;max-width:720px}
.stage{position:relative;aspect-ratio:16/9;width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 30px 80px -30px var(--a)}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;background:#000 center/cover no-repeat;border:0;color:#fff;width:100%;padding:0}
.poster:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.25),rgba(0,0,0,.7))}
.poster .pb{position:relative;z-index:1;display:flex;align-items:center;gap:12px;font:900 20px/1 var(--ui);letter-spacing:.12em;padding:20px 34px;border-radius:16px;background:var(--a);color:#06061a;box-shadow:0 12px 40px rgba(0,0,0,.5);transition:transform .15s}
.poster:hover .pb{transform:scale(1.05)}
.poster small{position:relative;z-index:1;font:700 13px/1.4 var(--ui);color:#e6e8ff;text-shadow:0 2px 10px #000}
.stage-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.stage-bar .sp{flex:1}
.meta{display:flex;gap:8px;flex-wrap:wrap}
.cols{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;margin-top:34px}
.cols h2{font:900 22px/1.2 var(--ui);margin:0 0 10px}
.cols p{color:#cfd2f2;margin:0 0 14px}
ul.feats{list-style:none;padding:0;margin:0;display:grid;gap:9px}
ul.feats li{position:relative;padding-left:24px;color:#d4d6f5}ul.feats li:before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--a);transform:rotate(45deg)}
.box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.box+.box{margin-top:14px}
.box h3{margin:0 0 8px;font:900 14px/1 var(--ui);letter-spacing:.14em;color:var(--sub)}
.box p{margin:0;color:#d4d6f5;font-size:15px}
.note{border-color:rgba(255,201,77,.35);background:rgba(255,201,77,.06)}.note p{color:#efdca0}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:6px}
.shots a{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.shots img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .25s}.shots a:hover img{transform:scale(1.03)}
.more{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.more .gc .bd{padding:12px 14px 14px}.more .gc h3{font-size:16px}.more .gc p{font-size:13px}
.lb{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.lb.on{display:flex}.lb img{max-height:100%;border-radius:10px}
@media (max-width:860px){.about,.cols{grid-template-columns:1fr}nav.links{display:none}.hero{padding:60px 0 50px}.games{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.hero .grid{animation:none}}