* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #17034d;
}
body {
  font-family: Outfit, sans-serif;
}
.game-screen {
  height: 100vh;
  min-height: 620px;
  position: relative;
  overflow: hidden;
  background: url("../images/space-background.webp") center/cover;
}
.game-screen:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 45%,
    transparent 20%,
    #27004b33 80%
  );
  pointer-events: none;
}
.download-badges {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.download-badges a {
  display: block;
  transition: transform .2s ease, filter .2s ease;
}
.download-badges a:hover {
  transform: translateY(-4px) scale(1.03);
  filter: drop-shadow(0 5px 12px #0008);
}
.download-badges img {
  display: block;
  width: clamp(190px, 22vw, 300px);
  height: auto;
  object-fit: contain;
}
.site-footer {
  position: absolute;
  z-index: 20;
  right: 24px;
  bottom: 22px;
  display: flex;
  gap: 16px;
  color: #fff;
  font-size: 12px;
}
.site-footer a { color: #fff; text-decoration: none; opacity: .86; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }
.legal-page { min-height: 100vh; margin: 0; color: #f8f7ff; background: #17034d url("../images/space-background.webp") center/cover fixed; padding: 48px 20px; }
.legal-page main { max-width: 760px; margin: 0 auto; padding: 36px; background: #0d1230e8; border: 1px solid #76ddff88; border-radius: 24px; line-height: 1.6; }
.legal-page h1 { font-family: "Titan One", sans-serif; color: #fff; }
.legal-page a { color: #9cecff; }

/* Store-style landing page */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; overflow-y: auto; color: #fff; background: #08052c url("../images/space-background.webp") center top/cover fixed no-repeat; }
.site-header { position: absolute; z-index: 30; top: 0; left: 0; width: 100%; height: 150px; display: flex; align-items: flex-start; justify-content: center; padding: 18px 5%; }
.brand { width: 255px; filter: drop-shadow(2px 4px #27135c); }
.site-header nav { margin-left: auto; display: flex; gap: 34px; }
.site-header nav a { color: #fff; text-decoration: none; font-weight: 700; padding: 12px 0; }
.site-header nav a.active, .site-header nav a:hover { color: #ffd22e; border-bottom: 3px solid #ffd22e; }
.header-download, .primary-cta { background: linear-gradient(#ffbd28,#f27600); color: #fff; border: 2px solid #ffe27b; border-radius: 14px; box-shadow: 0 5px #944000, inset 0 2px #fff8; font-weight: 900; text-decoration: none; padding: 13px 22px; }
.hero { min-height: calc(100vh - 72px); position: relative; overflow: hidden; display: flex; align-items: center; padding: 150px 10% 60px; background: transparent; }
.hero:after { content:""; position:absolute; inset:0; background: linear-gradient(90deg,#08052ccc 0%,transparent 70%); pointer-events:none; }
.hero-copy { position: relative; z-index: 2; max-width: 500px; }
.hero-logo { display:none; }
.hero h1 { font: 52px/1.05 "Titan One"; color:#fff; text-shadow: 4px 5px #33136d; margin: 0 0 18px; }
.hero p { font-size: 18px; line-height: 1.5; color:#d9d4f5; }
.hero-buttons { display:flex; gap:14px; margin:24px 0 14px; }
.secondary-cta { color:#fff; border:2px solid #a87cff; border-radius:14px; padding:13px 22px; text-decoration:none; font-weight:900; background:#24165eaa; }
.trailer-trigger { cursor:pointer; font-family:inherit; font-size:inherit; }
.trailer-modal { display:none; position:fixed; inset:0; z-index:100; align-items:center; justify-content:center; padding:24px; }
.trailer-modal.is-open { display:flex; }
.trailer-backdrop { position:absolute; inset:0; background:#050018dd; backdrop-filter:blur(8px); }
.trailer-dialog { position:relative; z-index:1; width:min(960px, 94vw); border:2px solid #a56bff; border-radius:20px; padding:10px; background:#0b0630; box-shadow:0 20px 70px #000b; }
.trailer-dialog video { display:block; width:100%; max-height:78vh; border-radius:13px; background:#000; }
.trailer-close { position:absolute; z-index:2; right:-14px; top:-16px; width:38px; height:38px; border:2px solid #ffe27b; border-radius:50%; color:#fff; background:#e87900; font-size:28px; line-height:28px; cursor:pointer; }
body.trailer-open { overflow:hidden; }
.hero-astronaut { position:absolute; z-index:1; width:min(510px,48vw); right:12%; top:18%; animation:float 4s ease-in-out infinite; filter:drop-shadow(0 20px 15px #090021); }
.store-row { display:flex; gap:12px; align-items:center; }
.store-row img { width:145px; height:auto; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:900px; margin:-20px auto 50px; position:relative; z-index:4; padding:0 20px; }
.feature-grid article, .boss-row article { background:#100a45dd; border:1px solid #8d56ff; border-radius:18px; padding:18px; text-align:center; box-shadow:0 8px 20px #05001c88; }
.feature-grid img { width:105px; height:75px; object-fit:contain; }
.feature-grid h2 { font-size:18px; margin:8px 0; }
.feature-grid p, .content-section p { color:#c8c1ed; line-height:1.4; margin:0; }
.content-section { max-width:1000px; margin:0 auto 34px; padding:28px 34px; display:flex; gap:30px; align-items:center; background:#100a45aa; border-radius:24px; }
.content-section h2 { margin:0; font-size:25px; }
.screenshot-row, .boss-row { display:flex; gap:14px; flex:1; }
.game-shot { height:145px; flex:1; border:2px solid #9364ff; border-radius:15px; background:url("../images/space-background.webp") center/cover; padding:12px; font-weight:900; }
.shot-two { background-color:#5b180f; filter:hue-rotate(330deg); }.shot-three { background-color:#101f5b; }
.boss-row article { flex:1; padding:12px; }.boss-row img { width:100%; height:90px; object-fit:contain; }.boss-row b,.boss-row small { display:block; }.boss-row small { color:#bab1e9; margin-top:4px; }.mystery { display:grid; place-items:center; min-height:140px; }
.download-banner { max-width:1000px; margin:0 auto 26px; padding:14px 28px; display:flex; align-items:center; gap:24px; border-radius:20px; background:linear-gradient(100deg,#3c109c,#8c2bef); border:1px solid #c073ff; }.download-banner > img { width:110px; align-self:flex-end; }.download-banner h2 { margin:0; }.download-banner p { margin:4px 0 0; color:#ded2ff; }
footer.site-footer { position:static; min-height:72px; padding:16px 5%; display:flex; align-items:center; gap:24px; background:#05032acc; color:#c9c3e6; font-size:13px; } footer.site-footer img { width:120px; } footer.site-footer a { color:#fff; text-decoration:none; }
@media(max-width:850px){ .site-header{height:120px;padding:12px 4%;}.brand{width:210px}.site-header nav{display:none}.header-download{margin-left:auto}.hero{min-height:700px;padding:130px 8% 40px;}.hero h1{font-size:38px}.hero-astronaut{width:68vw;right:-4%;top:37%;opacity:.86}.hero-copy{max-width:390px}.hero p{font-size:15px}.feature-grid{grid-template-columns:repeat(2,1fr);margin-top:-10px}.content-section{margin:0 14px 20px;padding:20px;display:block}.screenshot-row,.boss-row{margin-top:16px}.download-banner{margin:0 14px 20px;flex-wrap:wrap}.download-banner > img{display:none}footer.site-footer{flex-wrap:wrap;gap:12px;justify-content:center}.store-row img{width:125px}}
.game-screen header {
  position: absolute;
  inset: 0 0 auto;
  height: 145px;
  z-index: 5;
}
.resource {
  position: absolute;
  top: 54px;
  width: 245px;
  height: 68px;
  background: linear-gradient(#fffef1, #dedbb8);
  border: 4px solid #d99e25;
  border-radius: 38px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 15px;
  color: #534333;
  font-size: 28px;
  box-shadow: 0 6px #87421a;
}
.resource img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  border-radius: 50%;
  margin-left: -27px;
}
.resource i {
  font-style: normal;
  background: #4eae15;
  color: #fff;
  border-radius: 50%;
  padding: 1px 10px;
  margin-left: auto;
  font-size: 28px;
}
.heart {
  left: 24%;
}
.crystal {
  left: 42%;
}
.star {
  left: 60%;
}
.top-icons {
  position: absolute;
  right: 4%;
  top: 50px;
  display: flex;
  gap: 20px;
}
.top-icons span {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(#ffd139, #ed8a00);
  border: 4px solid #fff4a4;
  font-size: 34px;
  box-shadow: 0 5px #74310d;
}
.left-menu,
.right-menu {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
}
.hero-tagline { position: absolute; top: 34%; margin: 0; color: #dffaff; font: 900 clamp(13px, 1.4vw, 20px) Outfit, sans-serif; letter-spacing: 3px; text-shadow: 0 3px 12px #16002f; }
.hero-actions { position: absolute; top: 76%; display: flex; gap: 14px; z-index: 8; }
.primary-cta, .secondary-cta { min-width: 190px; padding: 17px 24px; border-radius: 18px; text-align: center; text-decoration: none; font: 900 17px "Titan One"; letter-spacing: .5px; transition: transform .2s, filter .2s; }
.primary-cta { color: #fff; background: linear-gradient(#aaff2c, #4aa90b); border: 3px solid #e2ff9b; box-shadow: 0 7px #236014, inset 0 3px #fff8; }
.primary-cta span { margin-left: 8px; font-size: 22px; }
.secondary-cta { color: #fff; background: #1b59b8cc; border: 3px solid #9eeaff; box-shadow: 0 6px #123782; }
.primary-cta:hover, .secondary-cta:hover { transform: translateY(-4px); filter: brightness(1.1); }
.left-menu {
  left: 0;
  top: 25%;
  gap: 30px;
  display: none;
}
.left-menu a,
.shop {
  width: 315px;
  height: 138px;
  border: 5px solid #a8e6ff;
  border-left: 0;
  border-radius: 0 30px 30px 0;
  background: linear-gradient(#2d9bf2, #1262c0);
  box-shadow: inset 0 6px #fff8, 0 7px #123782;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px;
  text-decoration: none;
}
.menu-cta { flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 5px !important; padding-left: 30px !important; }
.menu-cta b { font: 900 22px "Titan One"; color: #fff; text-shadow: 3px 4px #173d86; }
.menu-cta small { color: #e9fbff; font-size: 12px; font-weight: 700; }
.right-menu .menu-cta { align-items: center !important; padding-left: 18px !important; text-align: center; }
.right-menu .menu-cta b { text-shadow: 3px 4px #2b7218; }
.left-menu img,
.shop img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  background: #f4ffff;
  border-radius: 50%;
  border: 4px solid #b6edff;
}
.left-menu b,
.shop b {
  font: 900 21px "Titan One";
  text-shadow: 3px 4px #173d86;
}
.right-menu {
  right: 2%;
  top: 38%;
  width: 335px;
  gap: 65px;
  display: none;
}
.shop {
  width: 100%;
  border: 5px solid #d7ff81;
  border-radius: 32px;
  background: linear-gradient(#aaff2c, #4aa90b);
  box-shadow: inset 0 6px #fff8, 0 8px #1e5c16;
  justify-content: center;
}
.shop b {
  font-size: 28px;
  text-shadow: 3px 4px #2b7218;
}
.play {
  height: 145px;
  border-radius: 40px;
  background: linear-gradient(#aaff2c, #4aa90b);
  border: 6px solid #d7ff81;
  box-shadow: inset 0 8px #fff8, 0 9px #1e5c16;
  color: #fff;
  text-decoration: none;
  display: grid;
  place-items: center;
  font: 900 58px "Titan One";
  text-shadow: 4px 5px #246513;
}
.right-menu .play.menu-cta { font-family: Outfit, sans-serif; font-size: inherit; }
.center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
}
.logo {
  position: absolute;
  width: min(650px, 48vw);
  top: 7%;
  filter: drop-shadow(5px 7px #39205f);
}
.platform {
  position: absolute;
  width: min(680px, 52vw);
  height: 190px;
  top: 53%;
  border-radius: 50%;
  background: linear-gradient(90deg, #76216d, #ff6d35, #732066);
  box-shadow: 0 30px 45px #ff4f6e77;
}
.astronaut {
  position: absolute;
  width: min(370px, 31vw);
  top: 44%;
  filter: drop-shadow(0 16px #17215a);
  animation: float 4s ease-in-out infinite;
}
.crystal-float {
  position: absolute;
  width: 65px;
  left: 26%;
  bottom: 11%;
  filter: drop-shadow(0 0 15px #1cf);
}
@keyframes float {
  50% {
    transform: translateY(-16px) rotate(2deg);
  }
}
@media (max-width: 850px) {
  .download-badges {
    bottom: 16px;
    gap: 8px;
  }
  .download-badges img {
    width: clamp(155px, 34vw, 230px);
  }
  .site-footer { right: 50%; transform: translateX(50%); bottom: 4px; gap: 10px; white-space: nowrap; font-size: 10px; }
  .resource {
    transform: scale(0.72);
    transform-origin: top;
  }
  .heart {
    left: 17%;
  }
  .crystal {
    right: 17%;
  }
  .mode {
    transform: translateX(-50%) scale(0.7);
    transform-origin: top;
  }
  .top-icons {
    display: none;
  }
  .left-menu {
    top: 28%;
    gap: 15px;
  }
  .left-menu a {
    width: 210px;
    height: 92px;
  }
  .left-menu img,
  .shop img {
    width: 58px;
    height: 58px;
  }
  .left-menu b {
    font-size: 13px;
  }
  .right-menu {
    right: 2%;
    top: 44%;
    width: 210px;
    gap: 30px;
  }
  .shop {
    height: 86px;
  }
  .play {
    height: 100px;
    font-size: 35px;
  }
  .logo {
    width: 55vw;
    top: 28%;
  }
  .hero-tagline { top: 40%; letter-spacing: 1.5px; }
  .hero-actions { top: 77%; gap: 8px; }
  .primary-cta, .secondary-cta { min-width: 145px; padding: 13px 10px; font-size: 13px; }
  .astronaut {
    width: 38vw;
    top: 46%;
  }
  .platform {
    width: 62vw;
    height: 120px;
    top: 56%;
  }
}