* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --ink:#f2e4c8; --ink-dim:#f2e4c8b3; --violet:#2a1e3f; --violet-deep:#1c1330;
  --rose:#8a4a52; --orange:#e8763c; --gold:#ffcc66; --teal:#6fe8d8; --rust:#b2452e;
}
html { scroll-behavior:smooth; }
body { background:linear-gradient(180deg,var(--violet-deep),var(--violet) 45%,#4a2c40 80%,var(--rose));
  color:var(--ink); font-family:ui-rounded,"Segoe UI",system-ui,sans-serif; line-height:1.5; }
h2 { font-size:clamp(22px,3.4vw,32px); margin-bottom:18px; }
nav { display:flex; justify-content:space-between; align-items:center;
  padding:14px clamp(16px,4vw,48px); }
.logo { letter-spacing:.22em; font-weight:800; font-size:15px; }
.logo b { color:var(--gold); }
.nav-play { color:var(--ink); text-decoration:none; font-size:14px; letter-spacing:.12em;
  border:1px solid #f2e4c855; padding:8px 18px; border-radius:999px; }
.nav-play:hover { border-color:var(--gold); color:var(--gold); }

#hero { display:grid; grid-template-columns:minmax(300px,1fr) minmax(300px,1.25fr);
  gap:clamp(18px,3vw,42px); align-items:center;
  padding:clamp(24px,5vh,60px) clamp(16px,4vw,48px) 40px; max-width:1280px; margin:0 auto; }
.kicker { color:var(--teal); font-size:13px; letter-spacing:.28em; text-transform:uppercase; }
h1 { font-size:clamp(44px,7vw,84px); line-height:1.02; margin:8px 0 14px; letter-spacing:.02em;
  background:linear-gradient(100deg,#f2e4c8 20%,#ffcc66 55%,#e8763c 85%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.tagline { font-size:clamp(15px,1.6vw,19px); color:var(--ink-dim); max-width:46ch; }
#play-now { display:inline-block; margin-top:26px; padding:16px 46px; border-radius:999px;
  background:linear-gradient(90deg,var(--orange),var(--gold)); color:var(--violet-deep);
  font-weight:800; font-size:18px; letter-spacing:.05em; text-decoration:none;
  box-shadow:0 6px 28px #e8763c66; }
#play-now:hover { transform:translateY(-2px); box-shadow:0 10px 34px #e8763caa; }
.micro { margin-top:12px; font-size:12px; opacity:.6; }
.hero-stage { min-width:0; }
#hero-preview { width:100%; height:auto; display:block; border-radius:18px;
  border:1px solid #f2e4c833; box-shadow:0 20px 60px #00000066; background:#2a1e3f; }
.stage-cap { font-size:12px; opacity:.55; margin-top:8px; text-align:center; }

#gallery-section { padding:clamp(28px,6vh,64px) clamp(16px,4vw,48px); max-width:1280px; margin:0 auto; }
#gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(12px,2vw,22px); }
#gallery figure { border:1px solid #f2e4c833; border-radius:14px; overflow:hidden;
  background:#00000033; }
#gallery img { width:100%; height:auto; display:block; }
#gallery figcaption { padding:10px 14px; font-size:13px; color:var(--ink-dim); }

#feature-section { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(20px,4vw,48px); padding:clamp(24px,5vh,56px) clamp(16px,4vw,48px);
  max-width:1280px; margin:0 auto; }
#features { list-style:none; }
#features li { padding:12px 0 12px 28px; position:relative; color:var(--ink-dim); }
#features li::before { content:"◆"; position:absolute; left:0; color:var(--orange); }
#features b { color:var(--ink); }
#controls .goal { color:var(--gold); font-size:15px; margin-bottom:14px; }
#controls table { border-collapse:collapse; width:100%; font-size:14px; }
#controls td { padding:7px 10px; border-bottom:1px solid #f2e4c822; }
#controls td:first-child { color:var(--teal); white-space:nowrap; font-weight:600; }
#play-now-2 { display:inline-block; margin-top:22px; padding:12px 32px; border-radius:999px;
  background:#f2e4c814; border:1px solid var(--gold); color:var(--gold);
  text-decoration:none; font-weight:700; letter-spacing:.05em; }
#play-now-2:hover { background:#ffcc6622; }

footer { text-align:center; padding:26px 16px 40px; font-size:12px; opacity:.55; }

@media (max-width:820px) {
  #hero { grid-template-columns:1fr; }
  .hero-stage { order:-1; }
}