:root {
  --sand:#ffd9a0; --peach:#ff9a58; --rust:#ff7a50; --teal:#7ef0c8;
  --deep:#160f0a; --panel:#241a12; --ink:#f7e6cf;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { background:var(--deep); color:var(--ink);
  font-family:ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { overflow-x:hidden; }
h1,h2 { letter-spacing:.06em; }
h2 { font-size:clamp(20px,4vw,30px); color:var(--sand); margin-bottom:14px; }
#topnav { position:fixed; top:0; left:0; right:0; z-index:10; display:flex;
  justify-content:space-between; align-items:center; padding:12px 18px;
  background:linear-gradient(180deg, rgba(22,15,10,.92), rgba(22,15,10,.4)); }
.logo { font-weight:800; letter-spacing:.22em; font-size:15px; color:var(--sand); }
.logo span { color:var(--rust); }
.navplay { color:#20140c; background:var(--sand); text-decoration:none; font-weight:700;
  font-size:12px; letter-spacing:.18em; padding:8px 14px; border-radius:8px; }
#hero { position:relative; height:min(78vh,640px); min-height:440px; }
#hero-preview { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-copy { position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start; padding:0 6vw;
  background:linear-gradient(100deg, rgba(22,15,10,.85) 15%, rgba(22,15,10,.15) 70%);
  pointer-events:none; }
.hero-copy > * { pointer-events:auto; }
.hero-copy h1 { font-size:clamp(38px,8vw,76px); font-weight:900; letter-spacing:.14em;
  color:#fff; text-shadow:0 0 30px rgba(255,150,80,.7), 0 4px 0 rgba(0,0,0,.35); }
.tagline { margin:10px 0 22px; font-size:clamp(14px,2.4vw,20px); color:var(--sand);
  text-shadow:0 2px 8px rgba(0,0,0,.6); }
#play-now, #play-now-2 { display:inline-block; text-decoration:none; font-weight:800;
  letter-spacing:.2em; font-size:clamp(14px,2vw,18px); color:#20140c;
  background:linear-gradient(180deg,#ffd9a0,#ff9a58); padding:16px 36px; border-radius:12px;
  box-shadow:0 8px 30px rgba(255,150,80,.5); transition:transform .15s, box-shadow .15s; }
#play-now:hover, #play-now-2:hover { transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 40px rgba(255,150,80,.7); }
.hint { margin-top:12px; font-size:12px; opacity:.75; }
main { max-width:1060px; margin:0 auto; padding:40px 20px 10px; }
section { margin-bottom:52px; }
#about p { max-width:70ch; line-height:1.7; opacity:.9; font-size:15.5px; }
#gallery { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; }
#gallery img { width:100%; height:auto; border-radius:12px; border:1px solid rgba(255,217,160,.25);
  box-shadow:0 10px 30px rgba(0,0,0,.45); background:var(--panel); aspect-ratio:8/5; }
#features { list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:12px; }
#features li { background:linear-gradient(165deg, rgba(255,217,160,.08), rgba(255,122,80,.04));
  border:1px solid rgba(255,217,160,.22); border-radius:12px; padding:16px 18px;
  font-size:14px; line-height:1.55; }
#features b { color:var(--teal); display:block; margin-bottom:4px; }
#controls { background:var(--panel); border:1px solid rgba(255,217,160,.25);
  border-radius:14px; padding:22px 26px; margin-bottom:22px; }
#controls p { line-height:1.7; font-size:15px; }
#controls ul { list-style:none; margin:14px 0; }
#controls li { font-size:14px; line-height:2; }
#controls b { color:var(--teal); }
.tip { color:var(--sand); font-style:italic; }
#play-now-2 { display:inline-block; }
footer { text-align:center; padding:30px 20px 44px; opacity:.65; font-size:12.5px; }
@media (max-width:640px) {
  #hero { height:520px; min-height:0; }
  .hero-copy { background:linear-gradient(190deg, rgba(22,15,10,.9) 30%, rgba(22,15,10,.25) 85%); }
  main { padding:26px 14px 6px; }
  #play-now, #play-now-2 { padding:14px 26px; }
}