/* AstroSlide landing page. No fonts, images or libraries from outside this folder. */

:root {
  --space: #120a2a;
  --space-2: #1c1240;
  --panel: #231852;
  --line: #3d2f7a;
  --ink: #eef0ff;
  --ink-dim: #b9b6dd;
  --visor: #2fd6ff;
  --visor-deep: #2a6ff0;
  --hot: #ff4f9a;
  --gold: #ffc93d;
  --px: 4px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--space);
  /* Starfield: three layers of 1px dots on different tile sizes so the pattern doesn't read as a grid. */
  background-image:
    radial-gradient(1px 1px at 17px 23px, #fff 99%, transparent),
    radial-gradient(1px 1px at 83px 61px, #c9d4ff 99%, transparent),
    radial-gradient(2px 2px at 131px 149px, #fff 99%, transparent),
    radial-gradient(1px 1px at 41px 197px, #9fb0ff 99%, transparent),
    radial-gradient(1px 1px at 211px 11px, #fff 99%, transparent),
    linear-gradient(180deg, #170c35 0%, var(--space) 60%);
  background-size: 113px 113px, 167px 167px, 251px 251px, 229px 229px, 307px 307px, 100% 100%;
  color: var(--ink);
  font: 16px/1.6 var(--mono);
}

img { max-width: 100%; height: auto; display: block; image-rendering: pixelated; }
a { color: var(--visor); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--gold); color: var(--space); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }

h1, h2, h3 { line-height: 1.15; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .5em; }
h2 { font-size: clamp(1.4rem, 4vw, 2rem); margin-top: 2.5em; text-shadow: var(--px) var(--px) 0 var(--visor-deep); }
h3 { font-size: 1.05rem; color: var(--gold); }
p { margin: 0 0 1em; }
.small { font-size: .85rem; color: var(--ink-dim); }
.section-lede { color: var(--ink-dim); max-width: 60ch; }

/* Pixel frame: a solid border drawn with box-shadows so the corners are notched like a sprite. */
.px {
  --pc: var(--line);
  border: 0;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--pc),
    0 var(--px) 0 0 var(--pc),
    calc(-1 * var(--px)) 0 0 0 var(--pc),
    var(--px) 0 0 0 var(--pc);
  margin: var(--px);
}

/* ---------- Hero ---------- */
.hero { padding: 40px 0 24px; }
.hero-grid { display: grid; gap: 32px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 820px) {
  .hero { padding: 72px 0 32px; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 48px; }
}

.studio { margin: 0 0 12px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); }
.logo { margin: 0 0 16px; }
.logo img { width: min(100%, 520px); }
.logo-text { display: none; font-size: clamp(2.6rem, 11vw, 4.6rem); letter-spacing: .02em; text-shadow: var(--px) var(--px) 0 var(--visor-deep), calc(2 * var(--px)) calc(2 * var(--px)) 0 #0a0620; }
.logo-text span { color: var(--visor); }
.logo.no-img img { display: none; }
.logo.no-img .logo-text { display: inline; }

.tagline { font-size: clamp(1.15rem, 3.6vw, 1.5rem); font-weight: 700; color: var(--gold); margin-bottom: .6em; }
.lede { color: var(--ink-dim); max-width: 46ch; }
.price { font-size: .85rem; color: var(--ink-dim); margin-top: 12px; }
.trailer { font-weight: 700; }

.stores { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
/* Badge slots: same footprint as the official badges (about 3:1). Replace with the real badges; see index.html comments. */
.store-slot {
  display: flex; flex-direction: column; justify-content: center;
  width: 180px; height: 60px; padding: 0 14px;
  border: 2px dashed var(--ink-dim); border-radius: 8px;
  color: var(--ink); font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none;
  background: rgba(255, 255, 255, .04);
}
.store-kicker { font-weight: 400; font-size: .7rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .06em; }
/* The official badge PNG has clear space built in around the badge itself (about 13% top and bottom, 6%
   at the sides). Size it so the badge is 60px tall like the slots, and pull the padding in so it lines up. */
.store-badge { display: block; margin: -15px -12px; border-radius: 8px; }
.store-badge img { display: block; width: auto; height: 90px; }

/* Phone frame with the gameplay loop. The CSS board behind the video shows when the video is missing or paused before load. */
.hero-media { display: flex; justify-content: center; }
.phone {
  --pc: var(--ink);
  position: relative; width: min(100%, 300px); aspect-ratio: 9 / 16;
  background: radial-gradient(ellipse at 50% 40%, #2b1a63 0%, var(--space) 75%);
  overflow: hidden;
}
.phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.phone.no-video video { display: none; }

.board {
  position: absolute; left: 12%; right: 12%; top: 50%; transform: translateY(-50%);
  aspect-ratio: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px;
  padding: 3px; background: #0c0720;
  box-shadow: 0 10px 0 #3a2a1f, 0 14px 0 #241911;
}
.board i { background: #4a3e8c; box-shadow: inset 0 -3px 0 #352a6e; }
.board i:nth-child(-n+6) { background: #6e3d7d; animation: lane 1.6s steps(2) infinite; }
.board .dude, .board .rock { position: absolute; width: calc((100% - 21px) / 6); aspect-ratio: 1; }
.board .dude {
  left: calc(3px + 2 * (100% - 6px) / 6 + 2px); top: calc(3px + 3 * (100% - 6px) / 6 + 2px);
  background:
    linear-gradient(var(--visor), var(--visor)) 50% 38% / 70% 30% no-repeat,
    #eef0ff;
  border-radius: 2px;
  box-shadow: inset 0 -4px 0 #b7bbdf;
  animation: hop 3.2s steps(1) infinite;
}
.board .rock { left: -20%; top: calc(3px + 2px); background: #b98a5e; box-shadow: inset -4px -4px 0 #7d5a3a; animation: roll 1.6s linear infinite; }

@keyframes lane { 50% { background: #8e4b8f; } }
@keyframes roll { from { left: -20%; } to { left: 110%; } }
@keyframes hop { 0%, 100% { transform: none; } 50% { transform: translateX(100%); } }

.vid-toggle {
  position: absolute; right: 10px; bottom: 10px;
  font: 700 .8rem var(--mono); text-transform: uppercase;
  color: var(--space); background: var(--ink); border: 0; padding: 6px 10px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--visor-deep);
}
.vid-toggle:hover { background: var(--gold); }

/* ---------- Cards ---------- */
.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.card { background: var(--panel); padding: 20px; }
.card p { color: var(--ink-dim); margin: 0; font-size: .95rem; }

/* Tiny CSS-drawn pixel icons (8×8 grid on a 32px box). */
.card-icon { display: block; width: 32px; height: 32px; margin-bottom: 14px; image-rendering: pixelated; }
.ic-eye { background: radial-gradient(circle, var(--space) 0 4px, var(--visor) 4.5px 9px, var(--ink) 9.5px 15px, transparent 15.5px); }
.ic-beat { background:
  linear-gradient(var(--hot), var(--hot)) 0 100% / 6px 12px no-repeat,
  linear-gradient(var(--hot), var(--hot)) 9px 100% / 6px 28px no-repeat,
  linear-gradient(var(--hot), var(--hot)) 18px 100% / 6px 20px no-repeat,
  linear-gradient(var(--hot), var(--hot)) 27px 100% / 5px 32px no-repeat; }
.ic-retry { background:
  linear-gradient(var(--gold), var(--gold)) 4px 4px / 24px 4px no-repeat,
  linear-gradient(var(--gold), var(--gold)) 24px 4px / 4px 24px no-repeat,
  linear-gradient(var(--gold), var(--gold)) 4px 24px / 24px 4px no-repeat,
  linear-gradient(var(--gold), var(--gold)) 0 0 / 4px 12px no-repeat,
  linear-gradient(var(--gold), var(--gold)) 4px 8px / 8px 4px no-repeat; }
.ic-fair { background:
  linear-gradient(#7dff7a, #7dff7a) 4px 16px / 8px 8px no-repeat,
  linear-gradient(#7dff7a, #7dff7a) 12px 20px / 8px 8px no-repeat,
  linear-gradient(#7dff7a, #7dff7a) 20px 4px / 8px 20px no-repeat; }

/* ---------- Hazards ---------- */
.hazard-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.hazard-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--space-2); border-left: var(--px) solid var(--c); font-size: .92rem; }
.hazard-list li::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--c); box-shadow: 2px 2px 0 rgba(0, 0, 0, .45); }

/* ---------- Modes ---------- */
.modes { display: grid; gap: 20px; grid-template-columns: 1fr; margin-bottom: 20px; }
/* Campaign gets the tall left column; the other three stack beside it. */
@media (min-width: 720px) { .modes { grid-template-columns: 1.2fr 1fr; } .mode-wide { grid-column: 1; grid-row: 1 / span 3; } }
.mode { background: var(--panel); padding: 20px; }
.mode p { color: var(--ink-dim); margin: 0; font-size: .95rem; }
.mode-wide { --pc: var(--visor-deep); }
.sectors { list-style: none; counter-reset: s; padding: 0; margin: 16px 0 0; display: grid; gap: 6px; font-size: .9rem; }
.sectors li { counter-increment: s; display: flex; gap: 10px; align-items: baseline; }
.sectors li::before { content: counter(s); flex: none; width: 1.8em; text-align: center; background: var(--visor-deep); color: var(--ink); font-weight: 700; }

/* ---------- Screenshots ---------- */
.shots {
  list-style: none; margin: 0 auto; padding: 8px 16px 20px; max-width: 1080px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 220px); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.shots:focus-visible { outline-offset: -3px; }
.shot { --pc: var(--ink); position: relative; scroll-snap-align: start; aspect-ratio: 9 / 16; background: var(--space-2); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(10, 6, 32, .82);
}
/* Missing screenshot: show an empty pixel board instead of a broken image icon. */
.shot.no-img img { display: none; }
.shot.no-img {
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 3px), #0c0720 calc(100% / 6 - 3px) calc(100% / 6)) 50% 40% / 76% calc(76% * 9 / 16) no-repeat,
    repeating-linear-gradient(0deg, transparent 0 calc(100% / 6 - 3px), #0c0720 calc(100% / 6 - 3px) calc(100% / 6)) 50% 40% / 76% calc(76% * 9 / 16) no-repeat,
    linear-gradient(#4a3e8c, #4a3e8c) 50% 40% / 76% calc(76% * 9 / 16) no-repeat,
    var(--space-2);
}

/* ---------- Press + footer ---------- */
.press { margin-bottom: 64px; }
.btn {
  --pc: var(--gold);
  display: inline-block; padding: 12px 20px; background: var(--gold); color: var(--space);
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
}
.btn:hover { background: var(--ink); --pc: var(--ink); color: var(--space); }

.footer { border-top: var(--px) solid var(--line); padding: 24px 0 32px; background: rgba(8, 4, 24, .6); }
.footer-grid { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline; }
.footer p { margin: 0; }
.footer nav { display: flex; gap: 20px; }
.footer .small { flex-basis: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Privacy policy and support pages */
.legal { max-width: 760px; padding-top: 32px; padding-bottom: 64px; }
.legal h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); margin-top: .6em; }
.legal h2 { font-size: clamp(1.05rem, 3.4vw, 1.3rem); margin-top: 2em; }
.legal ul { padding-left: 1.2em; margin: 0 0 1em; }
.legal li { margin-bottom: .4em; }