:root { --plum:#1a1226; --plum2:#26192e; --sand:#f4ead8; --ember:#ff9c3a; --gold:#ffd9a0;
  --teal:#2ec4b6; --rose:#e0584f; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--plum); color:var(--sand); overflow-x:hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height:1.6; }
a { color:var(--teal); }
#nav { position:sticky; top:0; z-index:9; display:flex; align-items:center; gap:18px;
  padding:14px clamp(16px,4vw,48px); backdrop-filter:blur(8px);
  background:rgba(26,18,38,.82); border-bottom:1px solid #3a2a44; }
.brand { font-weight:800; letter-spacing:4px; color:var(--gold); font-size:15px; }
#nav nav { margin-left:auto; display:flex; gap:16px; align-items:center; font-size:14px; }
#nav a { color:var(--sand); text-decoration:none; }
#nav .navplay { background:linear-gradient(180deg,var(--gold),var(--ember)); color:#1a1226;
  font-weight:700; padding:7px 14px; border-radius:8px; }

.hero { display:grid; grid-template-columns:minmax(300px,1fr) minmax(340px,1.2fr); gap:clamp(20px,4vw,48px);
  align-items:center; padding:clamp(28px,6vh,80px) clamp(16px,4vw,48px);
  background:radial-gradient(ellipse at 20% 0%, #33213c 0%, var(--plum) 55%); }
.kicker { color:var(--teal); font-size:13px; letter-spacing:3px; text-transform:uppercase; }
.hero h1 { font-size:clamp(44px,8vw,88px); letter-spacing:8px; line-height:1.05;
  color:transparent; background:linear-gradient(180deg,#fff3dd 20%,var(--gold) 55%,var(--ember));
  -webkit-background-clip:text; background-clip:text; margin:8px 0 4px; }
.tagline { font-size:clamp(16px,2.2vw,21px); color:var(--teal); letter-spacing:1px; }
.blurb { margin:14px 0 22px; color:#d8c9b6; max-width:46ch; }
#play-now { display:inline-block; text-decoration:none; font-weight:800; letter-spacing:2px;
  font-size:17px; color:#1a1226; padding:15px 30px; border-radius:12px;
  background:linear-gradient(180deg,var(--gold),var(--ember));
  box-shadow:0 6px 30px rgba(255,150,60,.4); }
#play-now:hover { transform:translateY(-2px); box-shadow:0 10px 36px rgba(255,150,60,.55); }
.fineprint { margin-top:12px; font-size:12px; color:#9a8aa0; }
.herocanvas { position:relative; border:1px solid #3a2a44; border-radius:16px; overflow:hidden;
  box-shadow:0 20px 70px rgba(0,0,0,.55); }
#hero-preview { display:block; width:100%; aspect-ratio:16/10; }

.block { padding:clamp(36px,7vh,84px) clamp(16px,4vw,48px); max-width:1100px; margin:0 auto; }
.block h2 { font-size:clamp(24px,4vw,38px); letter-spacing:2px; color:var(--gold); margin-bottom:6px; }
.sub { color:#9a8aa0; margin-bottom:22px; }
#gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
#gallery figure { border:1px solid #3a2a44; border-radius:12px; overflow:hidden;
  background:var(--plum2); }
#gallery img { display:block; width:100%; height:auto; }
#gallery figcaption { padding:9px 12px; font-size:12px; letter-spacing:2px;
  text-transform:uppercase; color:var(--teal); }
#features { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px; margin-top:20px; }
#features li { background:var(--plum2); border:1px solid #3a2a44; border-left:3px solid var(--teal);
  border-radius:10px; padding:16px 18px; font-size:14.5px; color:#cbbcd2; }
#features b { color:var(--sand); }
.block.dark { background:linear-gradient(180deg,transparent,#20142c 30%); }
#controls { margin-top:18px; font-size:15px; }
#controls .goal { margin-bottom:18px; max-width:70ch; }
#controls table { border-collapse:collapse; width:100%; max-width:760px; font-size:14px; }
#controls th, #controls td { border:1px solid #3a2a44; padding:9px 12px; text-align:left; }
#controls th { background:#241830; color:var(--gold); letter-spacing:1px; }
kbd { background:#31213e; border:1px solid #4a3458; border-bottom-width:3px; border-radius:6px;
  padding:2px 7px; font:inherit; font-size:12px; color:var(--gold); }
.tip { margin-top:16px; color:#9a8aa0; max-width:70ch; }
.cta { text-align:center; }
.cta p { color:#9a8aa0; margin-bottom:20px; }
#play-now-2 { display:inline-block; text-decoration:none; font-weight:800; letter-spacing:3px;
  font-size:19px; color:#1a1226; padding:17px 44px; border-radius:14px;
  background:linear-gradient(180deg,var(--gold),var(--ember)); box-shadow:0 8px 34px rgba(255,150,60,.45); }
footer { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  padding:26px clamp(16px,4vw,48px); border-top:1px solid #3a2a44; font-size:12px; color:#8a7a96; }

@media (max-width:760px) {
  .hero { grid-template-columns:1fr; padding-top:24px; }
  #nav nav a:not(.navplay) { display:none; }
  #controls table { font-size:12px; }
  #controls th, #controls td { padding:6px 8px; }
}