:root{
  --bg:#120f19;
  --bg2:#1f1630;
  --card:#241a39;
  --card2:#2d2147;
  --accent:#7cff7c;
  --pink:#ff5bbd;
  --yellow:#ffd24d;
  --blue:#27A7E7;
  --text:#ffffff;
  --muted:#d5cdea;
  --shadow:0 12px 30px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Arial, Helvetica, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(124,255,124,.12), transparent 30%),
    radial-gradient(circle at top right, rgba(255,91,189,.15), transparent 30%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  min-height:100vh;
}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:18px}
.nav{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:10px 0 18px; flex-wrap:wrap;
}
.brand{font-weight:900;font-size:1.4rem;text-decoration:none}
.navlinks{display:flex;gap:10px;flex-wrap:wrap}
.navlinks a{
  text-decoration:none;padding:10px 14px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)
}
.hero{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;padding:26px;box-shadow:var(--shadow)
}
.hero h1{
  text-shadow:
  0 0 10px rgba(124,255,124,.6),
  0 0 20px rgba(124,255,124,.3);
  animation: heroGlow 3s ease-in-out infinite alternate;
}
@keyframes heroGlow{
  from{
    text-shadow:
    0 0 10px rgba(124,255,124,.5),
    0 0 20px rgba(124,255,124,.2);
  }
  to{
    text-shadow:
    0 0 20px rgba(124,255,124,.9),
    0 0 40px rgba(124,255,124,.4);
  }
}
.badge{
  display:inline-block;padding:10px 14px;border-radius:999px;
  background:rgba(255,255,255,.08);color:var(--yellow);font-weight:800
}
h1{font-size:clamp(2.2rem,6vw,4.8rem);line-height:1;margin:14px 0 10px}
h2{font-size:clamp(1.4rem,4vw,2rem);margin:0 0 10px}
.sub{max-width:820px;color:var(--muted);font-size:1.08rem;line-height:1.55}
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:18px}
.card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;padding:22px;box-shadow:var(--shadow)
}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn{
  display:inline-block;text-decoration:none;font-weight:900;padding:16px 18px;
  border-radius:18px;text-align:center
}
.green{background:var(--accent);color:#111}
.pink{background:var(--pink);color:white}
.blue{background:var(--blue);color:white}
.black{background:#000;color:white}
.yellow{background:var(--yellow);color:#111}
.section{margin-top:18px}
.story p{color:var(--muted);line-height:1.65;font-size:1.05rem}
.characters{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.character{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:16px;text-align:center
}
.character-img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:18px;
  margin-bottom:10px;
  box-shadow:0 0 25px rgba(124,255,124,.25);
}
.character h3{margin:8px 0 6px}
.character p{margin:0;color:var(--muted);line-height:1.45;font-size:.96rem}
.links-grid{display:grid;grid-template-columns:1fr;gap:14px}
.link-card .label{color:var(--yellow);font-weight:800;text-transform:uppercase;font-size:.84rem;letter-spacing:.08em}
.link-card .title{font-size:1.4rem;font-weight:900;margin:8px 0}
.link-card .desc{color:var(--muted);line-height:1.5;margin-bottom:14px}
.fullbtn{
  display:block;width:100%;text-decoration:none;text-align:center;font-size:1.15rem;
  font-weight:900;padding:18px;border-radius:18px
}
.footer{padding:24px 0 40px;text-align:center;color:var(--muted)}
.game-wrap{max-width:760px;margin:0 auto;padding:18px}
.game-shell{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:16px;box-shadow:var(--shadow)}
.canvas-wrap{position:relative}
canvas{
  width:100%;max-width:100%;display:block;border-radius:18px;
  background:linear-gradient(#201833,#2c2250);
  animation: idleFloat 3s ease-in-out infinite alternate;
}
@keyframes idleFloat{
  from{ transform:translateY(-2px); }
  to{ transform:translateY(2px); }
}
.overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:14px;text-align:center;padding:24px;
  background:rgba(9,7,14,.45);border-radius:18px
}
.hidden{display:none}
.scorebar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-weight:800}
.small{color:var(--muted);font-size:.95rem}
.lb-list{padding-left:20px;color:var(--muted)}
@media (max-width: 860px){
  .grid{grid-template-columns:1fr}
  .characters{grid-template-columns:1fr}
}