/* upnext.games: one page in the app's own Arcade theme. The page reads like
   an UpNext lineup: big gold numerals mark the three steps, and the ways to
   get it sit side by side like picks. Dark on purpose, as the app is by
   default, so there is no light variant. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque.woff2") format("woff2-variations"), url("fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2-variations"), url("fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("fonts/martian-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* The app's Arcade tokens (web/src/index.css). */
  --ground: #101218;
  --sheet: #161922;
  --raised: #1a1d26;
  --raised-2: #2f3444;
  --line: #242836;
  --line-strong: #2f3444;
  --ink: #e9ecf5;
  --muted: #a2a8ba;
  --dim: #858ca0;
  --accent: #ffc93c;
  --accent-soft: rgb(255 201 60 / 0.12);
  --accent-ink: #1b1503;
  --good: #5ee0b5;
  --warn: #ff9f5a;

  --display: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --gutter: clamp(16px, 4vw, 40px);
  --wide: 1360px;
  --radius: 14px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration-color: var(--dim);
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-color: var(--accent);
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  font-family: var(--display);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
p {
  margin: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}
/* Words for screen readers only, such as which platform a Download is for. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mono {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--dim);
}
.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The bar at the top. */
.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  background: rgb(16 18 24 / 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 750;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand svg {
  width: 30px;
  height: 30px;
  flex: none;
}
.top nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.95rem;
}
.top nav a {
  color: var(--muted);
  text-decoration: none;
}
.top nav a:hover {
  color: var(--ink);
}
.top nav .button {
  color: var(--accent-ink);
}
@media (max-width: 640px) {
  .top nav .hide-narrow {
    display: none;
  }
}

/* Buttons, after the app's Curate button. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.button.primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.button.primary:hover {
  background: #ffd566;
}
.button.ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--raised);
}
.button.ghost:hover {
  border-color: var(--dim);
}
.button:active {
  transform: translateY(1px);
}
.button.small {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.92rem;
  border-radius: 10px;
}

/* Hero: the headline, then the Pick page in a warm glow, like the icon's pressed Up. */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(32px, 5vw, 64px) 0;
}
.hero .wrap {
  position: relative;
  display: grid;
  gap: 22px;
  justify-items: start;
}
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 96;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero .lede {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--muted);
  max-width: 40rem;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  width: 100%;
}
.hero-row .lede {
  flex: 1 1 30rem;
  min-width: 0;
}
.hero .below {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-inline: 0;
}
.hero .facts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.hero .facts li {
  position: relative;
}
.hero .facts li + li::before {
  content: "·";
  position: absolute;
  left: -9px;
  transform: translateX(-50%);
  color: var(--accent);
}
.promises {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.promises li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 12px;
  border-radius: 999px;
  border: 1px solid rgb(94 224 181 / 0.35);
  background: rgb(94 224 181 / 0.08);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
}
.promises li::before {
  content: "";
  width: 9px;
  height: 5px;
  margin-top: -3px;
  border-left: 2px solid var(--good);
  border-bottom: 2px solid var(--good);
  transform: rotate(-45deg);
}

.stage {
  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
  padding-inline: var(--gutter);
}
.stage .halo {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(1500px, 128vw);
  aspect-ratio: 2 / 1;
  max-width: none;
  transform: translate(-50%, -18%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 72%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 72%);
  animation: glow 1.6s ease-out both;
}
@keyframes glow {
  from {
    opacity: 0;
  }
}
.shot {
  position: relative;
  max-width: 1280px;
  margin-inline: auto;
  border-radius: 16px 16px 0 0;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  overflow: hidden;
  background: var(--ground);
  box-shadow: 0 -30px 120px -40px rgb(255 201 60 / 0.35), 0 40px 80px -20px rgb(0 0 0 / 0.6);
}
.shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(to bottom, transparent, var(--ground));
  pointer-events: none;
}
.caption {
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .stage .halo {
    animation: none;
  }
}

/* Sections. */
section {
  padding-block: clamp(56px, 8vw, 104px);
}
.section-head {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(28px, 4vw, 44px);
  max-width: 44rem;
}
.section-head h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 760;
}
.section-head p {
  color: var(--muted);
  font-size: 1.12rem;
}

/* How it works: three numbered steps, as a lineup shows its picks. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.steps > li {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 24px 28px 4px;
  min-width: 0;
}
.steps > li + li {
  border-left: 1px solid var(--line);
}
.steps > li:first-child {
  padding-left: 0;
}
.steps .n {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.4rem, 6vw, 4.6rem);
  line-height: 0.9;
  color: var(--accent);
  font-variation-settings: "opsz" 96;
}
.steps h3 {
  font-size: 1.55rem;
  font-weight: 700;
}
.steps p {
  color: var(--muted);
}
.request {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--sheet);
  min-height: 52px;
}
.request .typed {
  flex: 1;
  min-width: 0;
  color: var(--ink);
}
.request .typed::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--accent);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}
.request .go {
  flex: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.chips li {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.88rem;
  color: var(--muted);
}
.pickline {
  display: grid;
  gap: 2px;
  padding-block: 10px;
  border-top: 1px solid var(--line);
}
.pickline:last-child {
  border-bottom: 1px solid var(--line);
}
.pickline b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
}
.pickline b span {
  color: var(--accent);
  margin-right: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .request .typed::after {
    animation: none;
  }
}
@media (max-width: 860px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .steps > li,
  .steps > li:first-child {
    padding: 28px 0 24px;
  }
  .steps > li + li {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* What's inside: a plain two-column list. */
.inside {
  background: var(--sheet);
  border-block: 1px solid var(--line);
}
.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 40px;
  margin: 0;
}
.features div {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}
.features dt {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.features dd {
  margin: 0;
  color: var(--muted);
}
.inside-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.setup {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.setup figcaption {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.98rem;
}
@media (max-width: 1000px) {
  .inside-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .features {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* Big screen: the picture and its words side by side. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split .copy {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.split h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 760;
}
.split p {
  color: var(--muted);
}
.frame {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.7);
}
.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--muted);
}
.keys kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.7em;
  height: 1.7em;
  padding-inline: 6px;
  margin-right: 6px;
  border-radius: 6px;
  background: var(--raised-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.75rem;
}
@media (max-width: 860px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Your AI, and privacy: two plain columns. */
.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 6vw, 88px);
}
.pair > div {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}
.pair h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 760;
}
.pair p {
  color: var(--muted);
}
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ticks li {
  position: relative;
  padding-left: 28px;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--good);
  border-bottom: 2px solid var(--good);
  transform: rotate(-45deg);
}
@media (max-width: 760px) {
  .pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Get it: one card per platform. */
.get {
  background: var(--sheet);
  border-top: 1px solid var(--line);
}
.notice {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 14px 18px;
  margin-bottom: 28px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid rgb(255 201 60 / 0.35);
  max-width: 52rem;
}
.notice strong {
  color: var(--accent);
  white-space: nowrap;
}
.platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.platform {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--raised);
  border: 1px solid var(--line);
  min-width: 0;
}
.platform header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.platform svg {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--accent);
}
.platform h3 {
  font-size: 1.35rem;
  font-weight: 700;
}
.platform .about {
  color: var(--muted);
  font-size: 0.98rem;
}
.platform .links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 0.95rem;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dim);
}
.status.now::before {
  background: var(--good);
}
.status.soon::before {
  background: var(--warn);
}
pre {
  margin: 0;
  position: relative;
  border-radius: 10px;
  background: var(--ground);
  border: 1px solid var(--line);
}
/* The commands wrap rather than scroll, so the whole of each shows, and the
   Copy button has a strip of its own above them. */
pre code {
  display: block;
  padding: 36px 14px 12px;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.75;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* One command per line; a long one wraps with its later lines indented. */
pre code span {
  display: block;
  padding-left: 2ch;
  text-indent: -2ch;
}
/* Kept on one line: a wrap after the hyphen would read as two flags. */
pre code b {
  font-weight: inherit;
  white-space: nowrap;
}
.copy-button {
  position: absolute;
  top: 6px;
  right: 6px;
  font: 600 0.75rem var(--body);
  color: var(--muted);
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 3px 9px;
  cursor: pointer;
}
.copy-button:hover {
  color: var(--ink);
}
.more {
  margin-top: 28px;
  color: var(--muted);
}
@media (max-width: 1000px) {
  .platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .platforms {
    grid-template-columns: minmax(0, 1fr);
  }
  .notice {
    display: grid;
    gap: 4px;
  }
}

/* Footer. */
footer {
  border-top: 1px solid var(--line);
  padding-block: 48px 64px;
  color: var(--dim);
  font-size: 0.92rem;
}
footer .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
}
footer .brand {
  color: var(--ink);
}
footer .fine {
  display: grid;
  gap: 10px;
  max-width: 34rem;
}
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  align-content: start;
}
footer ul a {
  color: var(--muted);
}
@media (max-width: 760px) {
  footer .wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lost {
  min-height: 70vh;
  display: grid;
  place-content: center;
  justify-items: start;
  gap: 18px;
}
.lost h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
}
.lost p {
  color: var(--muted);
  max-width: 34rem;
}

figure {
  margin: 0;
}
section.flush-top {
  padding-top: 0;
}