:root {
  --ink:#f2e4c8; --ink-dim:#c9b592; --gold:#ffd76a; --ember:#ff7a3c;
  --bg:#191008; --panel:#241708; --line:rgba(255,215,106,.25);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:Verdana,Geneva,sans-serif; line-height:1.55; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; }
.hero { position:relative; height:min(720px,92svh); min-height:540px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
#hero-preview { position:absolute; inset:0; width:100%; height:100%; }
.hero-copy { position:relative; text-align:center; padding:20px; max-width:720px;
  background:linear-gradient(180deg, rgba(20,12,5,.25), rgba(20,12,5,.78) 55%, rgba(20,12,5,.25));
  border-radius:18px; }
.kicker { font-size:12px; letter-spacing:3px; color:var(--gold); margin-bottom:10px; }
.hero h1 { font-size:clamp(38px,9vw,84px); letter-spacing:4px; line-height:1.05;
  color:#ffe9b0; text-shadow:0 0 30px rgba(255,122,60,.6), 0 3px 0 #7a3c10; }
.tagline { margin:14px 0 22px; font-size:clamp(14px,2.6vw,19px); color:var(--ink); }
#play-now { display:inline-block; text-decoration:none; font-weight:bold; letter-spacing:2px;
  font-size:19px; color:#221608; padding:15px 44px; border-radius:10px;
  background:linear-gradient(180deg,#ffd76a,#ef9430);
  box-shadow:0 0 30px rgba(255,170,60,.35), 0 4px 0 #8a4a12; }
#play-now:hover { filter:brightness(1.12); transform:translateY(-2px); }
.hint { margin-top:12px; font-size:12px; color:var(--ink-dim); }
main { max-width:1060px; margin:0 auto; padding:34px 20px 10px; }
h2 { font-size:clamp(22px,4vw,32px); color:#ffe0a4; margin-bottom:14px; }
.sec { margin-top:34px; }
.lead { color:var(--ink-dim); max-width:820px; }
.band { border-top:1px solid var(--line); padding-top:22px; margin-top:26px; }
#gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:14px; }
#gallery figure { background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
#gallery img { width:100%; height:auto; display:block; }
#gallery figcaption { padding:9px 12px; font-size:12px; color:var(--ink-dim); }
#features { list-style:none; margin-top:14px; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; }
#features li { background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--gold);
  border-radius:8px; padding:14px 16px; font-size:14px; }
#features b { color:var(--gold); }
#controls { margin-top:14px; display:grid; gap:10px; }
.ctl { display:flex; gap:14px; align-items:baseline; font-size:14px; }
.key { min-width:110px; text-align:center; font-family:Georgia,serif; font-weight:bold; color:#221608;
  background:#e8cfe00; border:1px solid var(--gold); border-radius:6px; padding:3px 10px;
  background:linear-gradient(180deg,#57330f,#3a2208); color:#ffd76a; font-size:12px; letter-spacing:1px; }
.rules { margin-top:10px; font-size:14px; color:var(--ink-dim); }
.rules b { color:var(--gold); }
footer { border-top:1px solid var(--line); margin-top:44px; padding:26px 20px 40px; text-align:center;
  font-size:12px; color:var(--ink-dim); }
#play-now-2 { display:inline-block; margin-top:14px; color:var(--gold); font-weight:bold; }
@media (max-width:640px) {
  .hero { min-height:480px; }
  .ctl { flex-direction:column; gap:4px; }
  .key { min-width:0; align-self:flex-start; }
}