:root {
  --ember: #ff8c3a; --amber: #ffb054; --teal: #35c8b0; --night: #14101a;
  --sand: #d8c7ae; --dim: #9c8b74;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Trebuchet MS", Verdana, sans-serif; color: var(--sand);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,110,40,0.25), transparent 60%),
    radial-gradient(900px 500px at 10% 30%, rgba(53,200,176,0.12), transparent 60%),
    #14101a; }
a { color: inherit; }
#topbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px; background: rgba(16, 10, 18, 0.82); backdrop-filter: blur: 8px; border-bottom: 1px solid rgba(255,140,58,0.25); }
.logo { font-weight: bold; letter-spacing: 0.25em; color: var(--ember); }
.navplay { text-decoration: none; font-size: 13px; letter-spacing: 0.2em; padding: 8px 16px; border-radius: 6px;
  border: 1px solid rgba(255,140,58,0.6); color: var(--amber); }
#hero { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; justify-content: center;
  padding: 46px 22px 54px; max-width: 1180px; margin: 0 auto; }
.hero-text { flex: 1 1 380px; min-width: 300px; }
.hero-text h1 { font-size: clamp(42px, 8vw, 76px); margin: 0; letter-spacing: 0.12em; line-height: 1.02;
  background: linear-gradient(120deg, #ffd9a0, #ff8c3a 55%, #ff5a1e);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { font-size: clamp(15px, 2.4vw, 20px); color: var(--sand); margin: 14px 0 26px; max-width: 44ch; }
#play-now { display: inline-block; text-decoration: none; font-weight: bold; font-size: 16px; letter-spacing: 0.22em;
  padding: 16px 34px; border-radius: 10px; color: #1a0f08;
  background: linear-gradient(135deg, #ff9a3c, #ff5715);
  box-shadow: 0 6px 30px rgba(255, 110, 40, 0.45); }
#play-now:hover { filter: brightness(1.14); transform: translateY(-1px); }
.tiny { font-size: 12px; color: var(--dim); letter-spacing: 0.14em; margin-top: 12px; }
.hero-canvas-wrap { flex: 1 1 420px; min-width: 280px; position: relative; }
#hero-preview { width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: 14px;
  border: 1px solid rgba(255,140,58,0.35); box-shadow: 0 10px 50px rgba(255,110,40,0.25); background: #0d0a10; }
.preview-tag { position: absolute; top: 10px; left: 12px; font-size: 10px; letter-spacing: 0.3em;
  color: var(--teal); background: rgba(10,6,12,0.6); padding: 5px 9px; border-radius: 5px; }
section h2 { font-size: clamp(22px, 3.4vw, 30px); letter-spacing: 0.18em; color: var(--amber); }
#gallery-section { max-width: 1180px; margin: 0 auto; padding: 20px 22px 40px; }
#gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
#gallery figure { margin: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,140,58,0.22);
  border-radius: 12px; overflow: hidden; }
#gallery img { width: 100%; aspect-ratio: 16/9; display: block; object-fit: cover; background: #0d0a10; }
#gallery figcaption { padding: 10px 12px; font-size: 12.5px; color: var(--dim); letter-spacing: 0.06em; }
#feature-section { display: flex; flex-wrap: wrap; gap: 26px; max-width: 1180px; margin: 0 auto; padding: 10px 22px 60px; }
#feature-section > div { flex: 1 1 380px; min-width: 290px; background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 22px 24px; }
#features { margin: 0; padding: 0; list-style: none; }
#features li { padding: 10px 0 10px 26px; position: relative; line-height: 1.55; font-size: 15px; border-bottom: 1px dashed rgba(255,255,255,0.09); }
#features li:last-child { border-bottom: none; }
#features li::before { content: "🜂"; position: absolute; left: 0; color: var(--ember); }
#features b { color: var(--amber); }
#controls p, #feature-section p { line-height: 1.65; font-size: 14.5px; }
#controls b { color: var(--teal); }
#controls p b:first-child { color: var(--amber); }
footer { text-align: center; padding: 26px 20px 40px; font-size: 12.5px; color: var(--dim); border-top: 1px solid rgba(255,140,58,0.18); }
footer a { color: var(--teal); }
@media (max-width: 480px) {
  #hero { padding: 30px 16px 40px; }
  #play-now { width: 100%; text-align: center; padding: 15px 10px; font-size: 14px; }
}