* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #0b1024; color: #dfe6ff; font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif; }
#nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; }
.logo { font-weight: 800; letter-spacing: 4px; color: #ffd985; }
.nav-play { color: #7fe8ff; text-decoration: none; border: 1px solid #2e3c68; border-radius: 8px; padding: 7px 16px; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center;
  padding: 30px 26px 54px; max-width: 1180px; margin: 0 auto; }
.kicker { color: #ff8fb4; letter-spacing: 4px; font-size: 12px; font-weight: 700; margin-bottom: 14px; }
h1 { font-size: clamp(40px, 7vw, 72px); letter-spacing: 8px; color: #fff;
  text-shadow: 0 0 28px #66f2ff66, 0 0 90px #ff4f8b44; margin-bottom: 14px; }
.tagline { color: #a9b8e6; font-size: 17px; line-height: 1.6; max-width: 46ch; margin-bottom: 24px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
#play-now, .play2 { display: inline-block; text-decoration: none; font-weight: 800; letter-spacing: 2px;
  color: #101830; background: linear-gradient(#ffe28a, #ffb46e); padding: 15px 34px;
  border-radius: 14px; box-shadow: 0 10px 40px #ffb46e55; font-size: 17px; }
#play-now:active, .play2:active { transform: translateY(2px); }
.ghost { align-self: center; color: #7fe8ff; text-decoration: none; border: 1px solid #2e3c68;
  border-radius: 14px; padding: 14px 22px; }
#hero-preview { width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; border: 1px solid #273458;
  box-shadow: 0 30px 80px #0006, inset 0 0 60px #0004; background: #0b1024; }
main { max-width: 1180px; margin: 0 auto; padding: 10px 26px 40px; }
h2 { font-size: 22px; letter-spacing: 3px; color: #7fe8ff; margin: 26px 0 16px; }
#gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
#gallery img { width: 100%; border-radius: 14px; border: 1px solid #273458; }
.cap { color: #7586b8; font-size: 12px; margin-top: 10px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 12px; }
#features { list-style: none; }
#features li { padding: 11px 0 11px 26px; position: relative; color: #b9c6ec; line-height: 1.5; }
#features li::before { content: "✦"; position: absolute; left: 0; color: #ffd985; }
#features b { color: #fff; }
#controls p { color: #b9c6ec; line-height: 1.65; margin-bottom: 11px; }
#controls b { color: #fff; }
kbd { background: #1c2544; border: 1px solid #3a4a7a; border-bottom-width: 3px; border-radius: 6px;
  padding: 2px 7px; font-size: 12px; color: #ffe28a; }
.play2 { margin-top: 14px; }
footer { text-align: center; color: #5d6f9e; padding: 26px; font-size: 13px; }
@media (max-width: 760px) {
  .hero, .cols { grid-template-columns: 1fr; }
  #hero-preview { order: -1; }
  h1 { letter-spacing: 4px; }
}