:root {
  --ink: #ffe9d0; --deep: #14092b; --mid: #241a3e; --coral: #ff5e7a;
  --gold: #ffd166; --ice: #7ae7ff; --teal: #0f6f6e;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--deep);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; line-height: 1.6;
  background-image: radial-gradient(1200px 500px at 70% -10%, rgba(255,94,122,0.35), transparent 60%),
    radial-gradient(900px 400px at 20% 10%, rgba(122,231,255,0.14), transparent 60%); }
a { color: var(--ice); }
#topbar { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 5vw; position: sticky; top: 0; z-index: 10;
  background: rgba(20,9,43,0.75); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,209,102,0.25); }
.logo { font-weight: 900; letter-spacing: 3px; color: var(--gold); }
.navplay { text-decoration: none; border: 1px solid var(--ice); padding: 6px 16px;
  border-radius: 999px; font-size: 14px; }
#hero { display: flex; flex-wrap: wrap; gap: 28px; align-items: center;
  padding: 48px 5vw 40px; }
.hero-text { flex: 1 1 340px; min-width: 280px; }
h1 { font-size: clamp(40px, 7vw, 76px); margin: 0 0 8px; letter-spacing: 5px;
  background: linear-gradient(100deg, var(--gold), var(--coral) 55%, var(--ice));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(255,94,122,0.35); }
.tagline { font-size: clamp(16px, 2.2vw, 21px); opacity: 0.92; margin: 0 0 22px; }
#play-now { display: inline-block; text-decoration: none; font-weight: 900;
  font-size: 20px; letter-spacing: 2px; color: #0d0a1f; padding: 15px 40px;
  border-radius: 999px; background: linear-gradient(120deg, var(--ice), var(--gold));
  box-shadow: 0 0 34px rgba(122,231,255,0.45); transition: transform .15s, box-shadow .15s; }
#play-now:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 46px rgba(255,209,102,0.6); }
.tiny { font-size: 12px; opacity: 0.6; margin-top: 14px; }
#hero-preview { flex: 1 1 420px; min-width: 280px; max-width: 100%; height: auto;
  aspect-ratio: 16/9; border-radius: 18px; border: 1px solid rgba(255,209,102,0.35);
  box-shadow: 0 10px 50px rgba(255,94,122,0.25); background: #000; }
main { padding: 10px 5vw 30px; max-width: 1100px; margin: 0 auto; }
h2 { color: var(--gold); letter-spacing: 2px; font-size: clamp(22px, 3.4vw, 32px);
  border-bottom: 1px solid rgba(255,209,102,0.25); padding-bottom: 8px; }
section { margin: 34px 0; }
#about p { max-width: 720px; }
#features { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 22px; }
#features li { padding: 12px 14px; border-radius: 12px; font-size: 15px;
  background: rgba(36,26,62,0.65); border: 1px solid rgba(122,231,255,0.18); }
#gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; }
#gallery img { width: 100%; height: auto; border-radius: 14px;
  border: 1px solid rgba(255,209,102,0.3); box-shadow: 0 8px 28px rgba(0,0,0,0.45); }
#gallery .cap { display: block; font-size: 12px; opacity: 0.7; margin-top: 4px; }
.ctl { display: grid; gap: 10px; max-width: 760px; }
.ctl > div { display: grid; grid-template-columns: 76px 1fr; gap: 12px;
  background: rgba(36,26,62,0.55); border-radius: 10px; padding: 10px 14px; }
.ctl b { color: var(--gold); }
footer { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  padding: 26px 5vw; border-top: 1px solid rgba(255,209,102,0.25);
  font-size: 13px; opacity: 0.85; }
@media (max-width: 640px) {
  #hero { padding: 28px 5vw; }
  .ctl > div { grid-template-columns: 62px 1fr; }
}