/* Maru — /download/. Apple's layout with the game's details (shared with the
   landing page, home/home.css): pixel font for short labels and numbers, the
   four gem colours as accents. Styled like a product page: one device on a quiet light
   ground, lit by a glow sampled from its own footage, a few out-of-focus gems
   drifting far behind, and the download button in a frosted bar at the bottom.
   Nothing in the background may compete with the gameplay. */

@font-face {
  font-family: "PressStart2P";
  src: url("fonts/PressStart2P.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bg: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --navy: #0d2c63;
  --go: #1fbf5a;
  --go-hi: #24cc63;
  --pixel: "PressStart2P", ui-monospace, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue",
          "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.25, .1, .25, 1);
  /* Height of the docked bar, reserved so nothing ends up under it. */
  --dock: calc(76px + env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 16px calc(var(--dock) + 8px);
  background:
    radial-gradient(120% 70% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    var(--bg);
  overflow: hidden;
}

.ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; }

.intro { text-align: center; animation: rise 1s var(--ease) both; }
.logo {
  margin: 0;
  font-family: var(--pixel);
  font-weight: normal;
  font-size: clamp(26px, 6.4vw, 40px);
  line-height: 1;
  letter-spacing: 3px;
  color: var(--navy);
}
.logo a { color: inherit; text-decoration: none; }

/* The game is 9:16 portrait. The device is the largest 9:16 box that fits the
   space left, so the whole frame is always visible and never cropped. */
.screen {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin-top: 22px;
  display: flex;
  justify-content: center;
  container-type: size;
}
.device {
  position: relative;
  height: min(100cqh, 100cqw * 16 / 9);
  aspect-ratio: 9 / 16;
  animation: rise 1.2s .1s var(--ease) both;
}
.device video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: clamp(22px, 6cqh, 44px);
  border: clamp(5px, 1.1cqh, 9px) solid #111214;
  background: #111214;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 30px 60px -20px rgba(0, 0, 0, .35);
}
/* The footage's own colours, blurred into a soft light around the device —
   this is what ties the page to whichever world is playing. */
#glow {
  position: absolute;
  left: -22%; top: -10%;
  width: 144%; height: 120%;
  filter: blur(48px) saturate(1.3);
  opacity: .55;
  pointer-events: none;
}

.more {
  margin-top: 14px;
  font-size: 14px;
  color: #06c;
  text-decoration: none;
}
.more:hover { text-decoration: underline; }
.more span { display: inline-block; margin-left: 2px; transform: translateY(-3px); }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* ------------------------------------------------------------ install info */

.install {
  max-width: 600px;
  margin: 0 auto;
  padding: 72px 22px calc(var(--dock) + 32px);
}
.eyebrow {
  margin: 0 0 14px;
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 2px;
  color: #08acec;
}
.install h2 {
  margin: 0 0 20px;
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.install h2 + * { margin-bottom: 64px; }

.steps {
  list-style: none;
  padding: 0 22px;
  margin: 0;
  background: #fff;
  border-radius: 18px;
}
.steps li { display: flex; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid #e8e8ed; }
.steps li:last-child { border-bottom: 0; }
/* Game detail: each step is marked with a gem in one of the four block colours,
   numbered in the pixel font. */
.steps .n {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .4) 0 34%, transparent 34%), var(--gem);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12);
}
.steps li:nth-child(1) .n { --gem: #1fbf5a; }
.steps li:nth-child(2) .n { --gem: #08acec; }
.steps li:nth-child(3) .n { --gem: #ec4fb8; }
.steps li:nth-child(4) .n { --gem: #f0a412; }
.steps p { margin: 0; }

.needs { margin: 0; padding: 0; list-style: none; color: var(--ink-2); }
.needs li { padding: 6px 0; }

.foot { margin: 0; font-size: 12px; color: var(--ink-2); text-align: center; letter-spacing: 0; }

/* --------------------------------------------------------------- the dock */

.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(245, 245, 247, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(0, 0, 0, .08);
}
.dock-in {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.dock-meta { margin: 0; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.dock-meta b { font-size: 17px; font-weight: 600; }
.dock-meta span { font-size: 12px; color: var(--ink-2); letter-spacing: 0; white-space: nowrap; }
.btn {
  flex: 1 1 auto;
  max-width: 320px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  text-decoration: none;
  background: var(--go);
  border-radius: 980px;
  box-shadow: 0 6px 18px -6px rgba(31, 191, 90, .55);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--go-hi); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid rgba(0, 113, 227, .6); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .intro, .device { animation: none; }
  html { scroll-behavior: auto; }
}