* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #16102a; --bg2: #221540; --panel: #241645;
  --ink: #e9e3ff; --ink-dim: #b9a8e8; --accent: #8de8ff;
  --gold: #ffd23f; --green: #62ffa8; --rose: #ff7b9c; --line: rgba(160,130,255,.28);
}
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(1100px 500px at 80% -10%, #3a2160 0%, transparent 60%),
    radial-gradient(900px 480px at 10% 110%, #1d3a52 0%, transparent 55%),
    var(--bg);
  color: var(--ink); font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.55; overflow-x: hidden;
}
.hero {
  display: grid; grid-template-columns: minmax(300px, 560px) 1fr; gap: 34px;
  align-items: center; max-width: 1200px; margin: 0 auto;
  padding: clamp(26px, 5vw, 60px) clamp(16px, 4vw, 40px) 30px;
}
.kicker { letter-spacing: 3px; font-size: 12px; text-transform: uppercase; color: var(--accent); }
h1 {
  font-size: clamp(42px, 7vw, 74px); line-height: 1.02; margin: 8px 0 12px;
  letter-spacing: 5px;
  background: linear-gradient(100deg, #9fe8ff 10%, #d9a8ff 55%, #ffd23f 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(130, 220, 255, 0.35));
}
.tagline { font-size: clamp(15px, 2vw, 18px); color: var(--ink-dim); max-width: 46ch; }
#play-now, #play-now-2 {
  display: inline-block; margin-top: 22px; padding: 14px 34px; border-radius: 14px;
  font-size: 19px; font-weight: 700; text-decoration: none; color: #0d2318;
  background: linear-gradient(120deg, #62ffa8, #8de8ff);
  box-shadow: 0 10px 30px rgba(98, 255, 168, 0.35);
  transition: transform .15s, box-shadow .15s;
}
#play-now:hover, #play-now-2:hover { transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 38px rgba(98, 255, 168, 0.5); }
.tiny { margin-top: 10px; font-size: 12px; color: #8f7fc0; }
.hero-frame {
  position: relative; border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(160deg, #1b1231, #120c22);
  padding: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.hero-frame canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block;
  border-radius: 10px; }
.frame-label { display: block; text-align: center; font-size: 12px; color: #8f7fc0; padding-top: 8px; }

main { max-width: 1200px; margin: 0 auto; padding: 10px clamp(16px, 4vw, 40px) 50px; }
.block { margin: 46px 0; }
h2 { font-size: clamp(22px, 3.4vw, 32px); margin-bottom: 18px; color: #cfe6ff;
  border-left: 4px solid var(--accent); padding-left: 12px; }
#features { list-style: none; display: grid; gap: 12px; }
#features li { background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 18px; font-size: 15px; }
#features b { color: var(--accent); }

#gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; }
#gallery figure { background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; }
#gallery img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
#gallery figcaption { padding: 8px 12px; font-size: 13px; color: var(--ink-dim); }

#controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; }
.ctl { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px; font-size: 14px; color: var(--ink-dim); }
.ctl h3 { color: var(--gold); font-size: 15px; margin-bottom: 6px; }
.ctl b { color: var(--ink); }

footer { text-align: center; padding: 40px 16px 60px; border-top: 1px solid var(--line);
  color: #8f7fc0; font-size: 13px; }
footer a { display: inline-block; margin-top: 14px; padding: 10px 26px; border-radius: 12px;
  border: 1px solid var(--green); color: var(--green); text-decoration: none; font-weight: 700; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 22px; }
  .hero-text { order: 1; }
  .hero-frame { order: 2; }
}
@media (max-width: 420px) {
  h1 { letter-spacing: 2px; }
  #play-now { padding: 12px 26px; font-size: 17px; }
  .hero-frame { padding: 6px; }
}