/* Prism Blocks — deep-space theme, matched to the game's palette. */
:root{
  --bg-top:#141A3D; --bg-mid:#0B0F2A; --bg-bot:#070A1C;
  --accent:#6C5CE7; --accent-glow:#A29BFE; --gold:#FFD66B;
  --aqua:#23D6E8; --violet:#8B5CF6; --rose:#FF5C8A; --amber:#FFB347; --lime:#54D964;
  --text:#FFFFFF; --dim:#8B93C7; --faint:#5A6196;
  --panel:rgba(28,35,82,.55); --border:rgba(140,150,220,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 50%,var(--bg-bot) 100%);
  background-attachment:fixed; overflow-x:hidden;
}
/* soft nebula glows, like the in-game background */
body::before,body::after{
  content:""; position:fixed; width:620px; height:620px; border-radius:50%;
  filter:blur(20px); pointer-events:none; z-index:0;
}
body::before{top:-280px; left:-200px; background:rgba(108,92,231,.20)}
body::after{bottom:-300px; right:-220px; background:rgba(35,214,232,.14)}
.wrap{position:relative; z-index:1; max-width:1020px; margin:0 auto; padding:0 24px}

header{padding:72px 0 8px; text-align:center}
.icon{width:104px;height:104px;border-radius:24px;box-shadow:0 18px 44px rgba(0,0,0,.55);margin-bottom:26px}
h1{
  margin:0; font-size:clamp(44px,9vw,78px); font-weight:900; letter-spacing:4px; line-height:1;
  text-shadow:0 0 26px rgba(162,155,254,.45);
}
.sub{
  margin:6px 0 0; font-size:clamp(17px,3.4vw,27px); font-weight:800;
  letter-spacing:11px; color:var(--accent-glow);
}
.tag{margin:26px auto 0; max-width:600px; font-size:19px; color:var(--dim)}

.cta{display:inline-flex;align-items:center;gap:10px;margin-top:34px;padding:16px 34px;
  border-radius:999px; text-decoration:none; font-weight:800; font-size:18px; color:#fff;
  background:linear-gradient(180deg,#A192FF,#7257F0 55%,#5836CE);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 30px rgba(98,68,232,.5); transition:transform .15s, box-shadow .15s}
.cta:hover{transform:translateY(-2px); box-shadow:0 14px 38px rgba(98,68,232,.62)}

.gems{display:flex;gap:10px;justify-content:center;margin:44px 0 0}
.gem{width:30px;height:30px;border-radius:9px;box-shadow:0 6px 16px rgba(0,0,0,.45)}

section{padding:64px 0}
h2{font-size:clamp(26px,4.6vw,36px);font-weight:900;text-align:center;margin:0 0 14px}
.lead{text-align:center;color:var(--dim);max-width:620px;margin:0 auto 42px}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.card{background:var(--panel);border:1px solid var(--border);border-top-color:rgba(255,255,255,.16);
  border-radius:20px;padding:26px;backdrop-filter:blur(8px)}
.card h3{margin:0 0 8px;font-size:19px;font-weight:800}
.card p{margin:0;color:var(--dim);font-size:15px}
.card .ico{font-size:27px;display:block;margin-bottom:12px}

.shots{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.shots img{width:236px;border-radius:18px;box-shadow:0 18px 44px rgba(0,0,0,.55)}

footer{padding:52px 0 64px;text-align:center;color:var(--faint);font-size:14px;
  border-top:1px solid var(--border);margin-top:40px}
footer a{color:var(--dim);text-decoration:none;margin:0 11px}
footer a:hover{color:var(--accent-glow)}
.back{display:inline-block;margin:34px 0 0;color:var(--dim);text-decoration:none;font-weight:700}
.back:hover{color:var(--accent-glow)}
@media (max-width:560px){header{padding-top:52px} .shots img{width:min(78vw,260px)}}