:root {
  --ink:#0e0a1e; --panel:#1c1533; --line:#3a2f5e;
  --coral:#ff6a5e; --teal:#2ee6c8; --cream:#fff3d6; --amber:#ffd08a;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--ink); color:#e9e4f8; font-family:'Segoe UI', system-ui, sans-serif; line-height:1.55; }
#topbar { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between;
  align-items:center; padding:12px 20px; background:rgba(14,10,30,.75); backdrop-filter:blur(8px);
  z-index:20; border-bottom:1px solid var(--line); }
.logo { font-weight:800; letter-spacing:3px; color:var(--cream); }
.logo span { color:var(--coral); }
.nav-play { color:var(--ink); background:var(--cream); text-decoration:none; font-weight:800;
  padding:8px 18px; border-radius:8px; letter-spacing:1px; font-size:14px; }
.nav-play:hover { background:var(--coral); color:#fff; }
#hero { position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; }
#hero-preview { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-copy { position:relative; z-index:2; padding:96px 28px 40px; max-width:640px;
  background:linear-gradient(90deg, rgba(14,10,30,.88), rgba(14,10,30,.35)); }
.hero-copy h1 { font-size:clamp(42px, 9vw, 84px); letter-spacing:6px; color:var(--cream);
  text-shadow:0 0 34px rgba(255,106,94,.55), 0 2px 0 #000; }
.tagline { color:var(--teal); font-size:clamp(15px,2.4vw,20px); margin:10px 0 26px; max-width:34em; }
#play-now, #play-now-2 { display:inline-block; text-decoration:none; font-weight:800; letter-spacing:2px;
  font-size:20px; color:#1a1030; background:linear-gradient(135deg, var(--coral), var(--amber));
  padding:16px 44px; border-radius:14px; box-shadow:0 6px 30px rgba(255,106,94,.45); }
#play-now:hover, #play-now-2:hover { filter:brightness(1.15); transform:translateY(-2px); }
.hintline { margin-top:14px; font-size:13px; color:#b9aed6; }
main { max-width:1100px; margin:0 auto; padding:24px 20px 60px; }
.block { margin:52px 0; }
h2 { font-size:28px; color:var(--cream); margin-bottom:18px; letter-spacing:1px;
  border-left:4px solid var(--coral); padding-left:12px; }
#gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.shot { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:transform .2s; }
.shot:hover { transform:translateY(-4px); }
.shot img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.shot span { display:block; padding:10px 14px; font-size:13px; color:#b9aed6; }
#features { list-style:none; display:grid; gap:12px; }
#features li { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
#features b { color:var(--amber); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
#controls { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; }
#controls p { margin-bottom:12px; }
#controls b { color:var(--amber); }
#controls table { width:100%; border-collapse:collapse; font-size:14px; }
#controls td { padding:7px 8px; border-bottom:1px dashed var(--line); }
#controls td:first-child { color:var(--teal); font-weight:700; width:88px; }
.tip { margin-top:12px; color:#b9aed6; font-size:14px; }
.center { text-align:center; }
footer { text-align:center; padding:26px; color:#8f83ad; font-size:13px; border-top:1px solid var(--line); }
@media (max-width:760px) {
  .two-col { grid-template-columns:1fr; }
  .hero-copy { padding:84px 18px 30px; }
  #hero { min-height:80vh; }
  #play-now { padding:14px 32px; font-size:18px; }
}