body { background:
  radial-gradient(1200px 600px at 50% -100px, #3b2352 0%, #120a1e 60%);
  min-height: 100vh; }
#topbar { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; }
.logo { letter-spacing: 0.35em; font-weight: 800; color: #ffcf5e; }
.ghost-btn { border: 1px solid #35e0c8; color: #35e0c8; text-decoration: none;
  padding: 7px 18px; border-radius: 8px; font-size: 14px; letter-spacing: 0.1em; }
#hero { text-align: center; padding: 26px 18px 40px; }
#hero h1 { font-size: clamp(44px, 9vw, 92px); letter-spacing: 0.22em; color: #f2e8d8;
  text-shadow: 0 0 40px rgba(255, 207, 94, 0.35), 0 2px 0 #8a4b32; }
.tagline { color: #cdbfa9; font-size: clamp(14px, 2.6vw, 19px); margin: 10px 0 22px; }
#preview-wrap { position: relative; width: min(920px, 92vw); aspect-ratio: 16 / 9;
  margin: 0 auto 26px; border: 1px solid #5d3352; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); background: #1a1130; }
#hero-preview { width: 100%; height: 100%; display: block; }
#play-now { display: inline-block; text-decoration: none; font-weight: 800;
  font-size: 19px; letter-spacing: 0.14em; padding: 16px 42px; border-radius: 12px;
  color: #06201c; background: linear-gradient(#45f0d8, #1fa893);
  box-shadow: 0 8px 30px rgba(53, 224, 200, 0.35); }
#play-now:hover { filter: brightness(1.12); }
main { max-width: 1060px; margin: 0 auto; padding: 10px 18px 30px;
  display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
.panel { border: 1px solid #3a2444; border-radius: 14px; padding: 22px 24px;
  background: rgba(24, 13, 38, 0.6); }
.panel:last-of-type { grid-column: 1 / -1; }
.panel h2 { color: #ffcf5e; letter-spacing: 0.18em; font-size: 20px; margin-bottom: 14px; }
#features { list-style: none; display: grid; gap: 12px; }
#features li { padding-left: 22px; position: relative; line-height: 1.5; color: #d8cdb9; }
#features li::before { content: "◆"; position: absolute; left: 0; color: #35e0c8; }
#controls .goal { color: #e8dcc8; line-height: 1.6; margin-bottom: 12px; }
#controls ul { list-style: none; display: grid; gap: 8px; color: #d8cdb9; line-height: 1.5; }
#controls b { color: #45f0d8; }
#gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
#gallery img { width: 100%; border-radius: 10px; border: 1px solid #3a2444;
  aspect-ratio: 8 / 5; object-fit: cover; }
footer { text-align: center; padding: 26px 16px 40px; color: #9a8fa3; }
footer .ghost-btn { display: inline-block; margin-top: 10px; }
@media (max-width: 700px) {
  main { grid-template-columns: 1fr; }
  #hero { padding-top: 12px; }
}