/* Orbit Dash: Apex. Shared look. Dark only. Colours are the game's (src/game/palette.gd). */

/* latin-ext */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/fredoka-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/fredoka-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --indigo: #1B1340;
  --sheet: #2A2160;
  --peach: #FFB38A;
  --peach-shade: #F7946A;
  --mint: #7FE3C4;
  --lilac: #B79CFF;
  --sunny: #FFD84D;
  --sunny-shadow: #E0A92A;
  --nebula: #FF7EB6;
  --dim: #B9AEEA;
}

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

html { background: var(--indigo); -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font-family: Fredoka, system-ui, sans-serif;
  color: #fff;
  background:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff9 50%, transparent 51%) 0 0 / 260px 260px,
    radial-gradient(1px 1px at 70% 60%, #fffa 50%, transparent 51%) 0 0 / 200px 200px,
    radial-gradient(1px 1px at 40% 85%, #fff6 50%, transparent 51%) 0 0 / 170px 170px,
    radial-gradient(50% 260px at 92% 0%, #FF7EB62e, transparent 70%),
    radial-gradient(40% 300px at 0% 40%, #B79CFF20, transparent 70%),
    var(--indigo);
}

/* every page: main is the stacking context for its .sky layer (z-index: -1) */
main { position: relative; isolation: isolate; flex: 1 0 auto; }

p, li { color: var(--dim); line-height: 1.5; font-size: 16px; margin: 0; }
h1, h2, h3 { color: #fff; }
a { color: var(--mint); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--sunny); outline-offset: 3px; border-radius: 6px; }

/* twinkle layer, filled by script later */
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.star { position: absolute; border-radius: 50%; background: #fff; opacity: .5; animation: twinkle var(--d, 4s) ease-in-out var(--o, 0s) infinite; }
@keyframes twinkle { 0%, 100% { opacity: .12; } 50% { opacity: .95; } }
.spark { position: absolute; opacity: .6; animation: sparkle var(--d, 4s) ease-in-out var(--o, 0s) infinite; }
@keyframes sparkle { 0%, 100% { transform: scale(.25) rotate(0deg); opacity: .2; } 50% { transform: scale(1) rotate(20deg); opacity: 1; } }

/* the dot and its trail (climb.js moves them with transform, in .climb coordinates) */
.dot { position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px 5px #ffffff55; z-index: 5; pointer-events: none; }
.trail { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; }
.trail i { position: absolute; left: 0; top: 0; border-radius: 50%; background: #fff; }
.pl .pulse { border: 3px solid #fff; opacity: 0; }

/* top bar */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 26px; font-size: 14px; color: var(--dim); }
.bar .logo { display: block; flex: none; }
.bar .logo img { height: 40px; width: auto; display: block; }
.bar nav { display: flex; gap: 20px; margin-left: auto; }
.bar nav a { color: var(--dim); padding: 6px 2px; }
.bar nav a[aria-current="page"] { color: #fff; }

/* reading column */
.col { max-width: 680px; margin: 0 auto; padding: 10px 26px 50px; }

.card { background: #2A2160b3; border: 1px solid #ffffff1f; border-radius: 24px; padding: 20px 22px; margin-bottom: 16px; }

/* the game's candy button */
.candy { display: inline-block; background: var(--sunny); color: var(--indigo); font-weight: 600; font-size: 18px; line-height: 1.2; padding: 14px 26px; border-radius: 20px; box-shadow: 0 6px 0 var(--sunny-shadow); transition: transform .12s, box-shadow .12s; }
.candy:hover { text-decoration: none; }
.candy:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--sunny-shadow); }

/* title orbit */
.mini { position: relative; width: 64px; height: 64px; flex: none; }
.mini img { width: 38px; position: absolute; left: 13px; top: 13px; }
.mini .ring { position: absolute; inset: 0; border: 2px dashed #ffffff90; border-radius: 50%; }
.mini .orb { position: absolute; inset: 0; animation: spin 3s linear infinite; }
.mini .orb::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px #fff6; }
@keyframes spin { to { transform: rotate(360deg); } }

/* footer */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 22px 26px; font-size: 13px; color: var(--dim); border-top: 1px solid #ffffff14; }
.foot a { color: var(--dim); }
.foot nav { display: flex; gap: 8px; }

/* 404 */
.lost { position: relative; overflow: hidden; text-align: center; padding: 16px 26px 200px; }
.lost .big { font-size: 13px; letter-spacing: 2px; color: var(--sunny); font-weight: 600; }
.lost h1 { font-size: 40px; line-height: 1.15; margin: 6px 0 8px; font-weight: 700; }
.lost .candy { margin-top: 20px; }
.scene { position: absolute; left: 8%; bottom: 40px; width: 120px; height: 120px; }
.scene img { position: absolute; width: 70px; left: 25px; top: 25px; }
.scene .ring { position: absolute; inset: 0; border: 2.5px dashed #ffffff90; border-radius: 50%; }
.drift { position: absolute; left: 100px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px #fff6; animation: drift 4s ease-in infinite; }
.drift::before { content: ""; position: absolute; right: 7px; top: 5px; width: 70px; height: 4px; transform-origin: right center; transform: rotate(-27deg); background: linear-gradient(90deg, transparent, #ffffff80); border-radius: 2px; }
@keyframes drift {
  0% { transform: translate(0, 0); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(560px, -290px) scale(.6); opacity: 0; }
}

/* Support and Privacy: a title with its small orbit, then a calm reading column */
.head { display: flex; align-items: center; gap: 22px; margin: 12px 0 26px; }
.head h1 { font-size: 46px; font-weight: 700; line-height: 1.1; letter-spacing: -.5px; margin: 0; }
.head .when { margin-top: 4px; font-size: 13px; }
.lede { margin-bottom: 22px; font-size: 17px; color: #E6E0FF; }
.col p a, .col li a { text-decoration: underline; text-decoration-color: #7FE3C480; text-underline-offset: 2px; }

.card h2 { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.card .email { margin: 6px 0 10px; font-size: clamp(19px, 5.4vw, 24px); font-weight: 600; overflow-wrap: anywhere; }
.card .email a { color: var(--sunny); text-decoration: none; }
.card .email a:hover { text-decoration: underline; }

/* questions: native details, a + that turns to × when open */
.faqh { margin: 30px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--sunny); }
.faq details { border-top: 1px solid #ffffff17; }
.faq details:last-of-type { border-bottom: 1px solid #ffffff17; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 2px; list-style: none; cursor: pointer; font-size: 18px; font-weight: 500; line-height: 1.3; color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 24px; line-height: 1; color: var(--lilac); transition: transform .2s; }
.faq details[open] > summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 2px 16px; }

/* the policy's six-tile summary: two columns, one under 520 px */
.glance { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; }
.tile { padding: 14px; border-radius: 18px; background: #ffffff0b; border: 1px solid #ffffff1a; }
.tile b { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 600; color: #fff; }
.tile i { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; vertical-align: 1px; background: var(--mint); }
.tile i.sunny { background: var(--sunny); }
.tile i.lilac { background: var(--lilac); }
.tile p { font-size: 14px; line-height: 1.45; }

/* the policy's sections */
.sec h2 { font-size: 22px; font-weight: 600; line-height: 1.25; margin: 34px 0 8px; }
.sec h3 { font-size: 17px; font-weight: 600; line-height: 1.3; margin: 22px 0 6px; }
.sec p + p, .sec p + ul, .sec ul + p { margin-top: 10px; }
.sec ul { margin: 8px 0 0; padding-left: 20px; }
.sec li + li { margin-top: 6px; }
.sec li::marker { color: var(--lilac); }

@media (max-width: 520px) {
  .glance { grid-template-columns: 1fr; }
  .head { gap: 16px; margin-bottom: 22px; }
  .head h1 { font-size: 34px; }
  .head .mini { width: 50px; height: 50px; }
  .head .mini img { width: 30px; left: 10px; top: 10px; }
}

/* landing page: the climb. One planet per stop; climb.js adds the dot that hops between them. */
.climb {
  container-type: inline-size;
  background:
    radial-gradient(1.5px 1.5px at 85% 15%, #fff7 50%, transparent 51%) 0 0 / 310px 310px,
    radial-gradient(42% 9% at 100% 64%, #FF7EB622, transparent 70%),
    radial-gradient(38% 7% at 96% 24%, #7FE3C414, transparent 70%),
    radial-gradient(50% 8% at 6% 90%, #7FE3C41c, transparent 70%);
}
.climb h2 { text-wrap: balance; font-weight: 600; font-size: clamp(26px, 1.6cqw + 18px, 40px); line-height: 1.08; letter-spacing: -.3px; margin: 0 0 12px; }

/* hero: tall enough that the first stop's planet sits below 80% of the first screen, so the hero
   planet is the dot's target at the top (climb.js), while that planet still peeks in at the bottom */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; min-height: 540px; min-height: max(540px, 80svh - 200px); }
.hero h1 { align-self: stretch; margin: 0; }
.hero .logo { display: block; margin: 0 auto; width: clamp(240px, 64cqw, 340px); max-width: 76%; height: auto; }
.hero .line { margin-top: 8px; font-size: clamp(18px, .4cqw + 16px, 22px); color: #E6E0FF; text-wrap: balance; }
.soon { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 18px; border-radius: 22px; background: #ffffff14; border: 1px solid #ffffff24; font-size: 14px; font-weight: 500; line-height: 1.3; color: #fff; }
.soon .nowrap { white-space: nowrap; }
.soon::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sunny); box-shadow: 0 0 8px 2px #FFD84D66; }
.hero .soon { margin-bottom: 56px; }
.hero .pl { margin: auto; }

/* a planet, its dashed capture ring (1.56 times its diameter) and the capture pulse */
.pl { position: relative; flex: none; width: var(--s); height: var(--s); }
.pl > img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; }
.pl .ring, .pl .pulse { position: absolute; inset: -28%; border-radius: 50%; pointer-events: none; }
.pl .ring { border: 2.5px dashed #ffffffa8; }
.s84 { --s: 84px; }
.s92 { --s: 92px; }
.s96 { --s: 96px; }
.s100 { --s: 100px; }
.s110 { --s: 110px; }
.s120 { --s: 120px; }
.s150 { --s: 150px; }

/* the stops: planet and text alternate sides */
.stop { display: flex; align-items: center; gap: 7%; min-height: 470px; padding: 0 max(8%, (100% - 1100px) / 2); }
.stop:nth-of-type(even) { flex-direction: row-reverse; }
.slot { flex: 0 0 36%; display: flex; justify-content: center; }
.copy { flex: 1; min-width: 0; }
.over { margin-bottom: 10px; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 1.6px; text-transform: uppercase; color: var(--sunny); }
.copy > p { max-width: 36em; font-size: 17px; line-height: 1.5; }

.perfect { position: absolute; z-index: 2; top: -34px; right: -16px; font-size: 20px; font-weight: 700; line-height: 1; white-space: nowrap; color: var(--sunny); transform: rotate(-6deg); text-shadow: 0 2px 0 var(--sunny-shadow), 0 0 14px var(--indigo); }

.kinds { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 20px 0 0; padding: 0; list-style: none; }
.kinds li { display: grid; grid-template-rows: 36px auto; justify-items: center; align-items: center; gap: 4px; font-size: 12px; line-height: 1.2; }
.kinds img { height: 28px; width: auto; }
.kinds .tiny { height: 16px; }
.kinds .giant { height: 36px; }

.skins { display: grid; grid-template-columns: repeat(7, minmax(0, 46px)); gap: 10px; margin-top: 20px; }
.skins img { display: block; width: 100%; height: auto; aspect-ratio: 1; padding: 20%; background: #ffffff0f; border: 1px solid #ffffff1c; border-radius: 30%; }

.chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 18px; padding: 9px 14px; border-radius: 12px; background: var(--sheet); border: 1px solid #ffffff1f; font-size: 14px; line-height: 1.3; color: #fff; }
.chip b { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--sunny); }
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.badges img { width: 40px; height: 40px; }

.devices { display: flex; align-items: flex-end; gap: 22px; margin: 20px 0 0; padding: 0; list-style: none; }
.devices li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; line-height: 1.2; }
.dev { display: block; overflow: visible; }
.dev rect, .dev path { fill: #ffffff0d; stroke: #ffffffa0; stroke-width: 2; stroke-linejoin: round; }
.dev .isl { fill: #ffffffa0; stroke: none; }
.dev .fold { fill: none; stroke: #ffffff55; stroke-width: 1.5; }

/* the asteroid lane: an empty strip the asteroid drifts across */
.lane { position: relative; height: 90px; overflow: hidden; }
.asteroid { position: absolute; left: -40px; top: 22px; width: 26px; opacity: .9; animation: asteroid-drift 8s linear infinite; }
@keyframes asteroid-drift { to { transform: translate(calc(100cqw + 80px), 30px) rotate(360deg); } }

/* the end */
.end { text-align: center; padding: 20px 20px 0; min-height: 440px; }
.end .pl { margin: 48px auto 68px; }
.end .soon { margin-top: 12px; }

@container (max-width: 720px) {
  .pl { width: calc(var(--s) * .78); height: calc(var(--s) * .78); }
  .kinds { gap: 12px 14px; }
}
@container (max-width: 520px) {
  .hero { min-height: 480px; min-height: max(480px, 80svh - 120px); }
  .hero .soon { margin-bottom: 52px; }
  .skins { gap: 8px; }
  .stop, .stop:nth-of-type(even) { flex-direction: column; align-items: stretch; justify-content: center; gap: 44px; min-height: 520px; padding: 0 26px; }
  .slot { flex: none; justify-content: flex-start; padding-left: 30px; }
  .copy { flex: none; }
  .stop:nth-of-type(even) .slot { justify-content: flex-end; padding: 0 30px 0 0; }
  .copy > p { font-size: 15px; }
  .kinds { gap: 12px 16px; }
}
@container (max-width: 360px) {
  .stop, .stop:nth-of-type(even) { padding: 0 20px; }
  .soon { font-size: 13px; padding: 9px 16px; }
  .soon::before { display: none; }
}

@media (max-width: 420px) {
  .bar { padding: 12px 18px; }
  .col { padding-left: 18px; padding-right: 18px; }
  .lost h1 { font-size: 32px; }
  .foot { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .asteroid { left: 62%; transform: translateY(14px) rotate(30deg); }
}