/*
 * The style sheet of the portal. One file. The fonts and pictures come from this site only.
 * Colours, type and shapes follow docs/DESIGN.md: a sky that goes from black to a dark tone, wide titles, white pill
 * buttons, no borders. A surface is white at 8 % with a 28px radius (a group) or solid #151833 (a card that stands out).
 */

@font-face {
  font-family: 'Unbounded';
  src: url('/fonts/Unbounded-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Golos Text';
  src: url('/fonts/GolosText-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Golos Text';
  src: url('/fonts/GolosText-SemiBold.ttf') format('truetype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --sky: #070812;
  --sky-end: #161b3d;
  --panel: #151833;
  --veil: rgb(255 255 255 / 0.08);
  --veil-high: rgb(255 255 255 / 0.16);
  --text: #f6f7fb;
  --dim: #a2a8c0;
  --ink: #0b0c18;
  --blue: #6ccbf5;
  --gold: #ffd166;
  --green: #5fe08a;
  --danger: #ff5c7a;
  /* The web fonts cover Latin and Cyrillic. Every other script falls to the system families behind them. */
  --system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Hiragino Sans', 'Yu Gothic', 'Apple SD Gothic Neo', 'Malgun Gothic', 'PingFang SC', 'PingFang TC', 'Microsoft YaHei',
    'Microsoft JhengHei', 'Noto Sans CJK JP', 'Noto Sans Arabic', 'Geeza Pro', 'Noto Sans Devanagari', Arial, sans-serif;
  --display: 'Unbounded', var(--system);
  --body: 'Golos Text', var(--system);
  --tight: -0.02em;
  --r-m: 18px;
  --r-l: 28px;
  color-scheme: dark;
}

/* Tight spacing breaks joined and stacked scripts. */
:lang(ar),
:lang(hi),
:lang(ja),
:lang(ko),
:lang(zh) {
  --tight: 0;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  background: var(--sky-end);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* The sky: black at the top, the dark tone from the second screen on. A few stars near the top, not a pattern. */
  background-color: var(--sky-end);
  background-image:
    radial-gradient(1.5px 1.5px at 6% 120px, #f6f7fb 50%, transparent 52%), radial-gradient(1px 1px at 17% 420px, #a2a8c0 50%, transparent 52%), radial-gradient(1px 1px at 29% 210px, #f6f7fb 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 41% 610px, #a2a8c0 50%, transparent 52%), radial-gradient(1px 1px at 52% 96px, #f6f7fb 50%, transparent 52%), radial-gradient(1px 1px at 63% 760px, #a2a8c0 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 74% 150px, #f6f7fb 50%, transparent 52%), radial-gradient(1px 1px at 88% 540px, #f6f7fb 50%, transparent 52%), radial-gradient(1px 1px at 95% 300px, #a2a8c0 50%, transparent 52%),
    radial-gradient(1px 1px at 11% 880px, #a2a8c0 50%, transparent 52%), radial-gradient(1.5px 1.5px at 81% 980px, #a2a8c0 50%, transparent 52%), radial-gradient(1px 1px at 36% 1100px, #f6f7fb 50%, transparent 52%),
    linear-gradient(var(--sky), var(--sky-end));
  background-repeat: no-repeat;
  background-size:
    100% 1200px,
    100% 1200px,
    100% 1200px,
    100% 1200px,
    100% 1200px,
    100% 1200px,
    100% 1200px,
    100% 1200px,
    100% 1200px,
    100% 1200px,
    100% 1200px,
    100% 1200px,
    100% 1200px;
  color: var(--text);
  font: 500 1.0625rem/1.55 var(--body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3 {
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--tight);
  overflow-wrap: anywhere;
}

h2 {
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem);
}

h3 {
  font: 600 1.15rem/1.3 var(--body);
}

p {
  margin: 0 0 1em;
}

strong {
  font-weight: 600;
}

a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--text);
}

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

ul,
ol {
  margin: 0 0 1em;
  padding-inline-start: 1.3em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: min(100% - 2.5rem, 1120px);
  margin-inline: auto;
}

.wrap-narrow {
  width: min(100% - 2.5rem, 760px);
}

/* ------------------------------------------------------------------------------------------------ buttons */

/* A pill. The main action of a block is white; every other button is quiet. */
.btn {
  display: inline-block;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  background: var(--text);
  color: var(--ink);
  font: 600 1rem/1.2 var(--body);
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.12s,
    opacity 0.12s;
}

.btn:hover {
  color: var(--ink);
  opacity: 0.88;
}

.btn:active {
  transform: scale(0.97);
}

.btn:focus-visible,
.badge:focus-visible,
.langs summary:focus-visible {
  border-radius: 999px;
}

.btn-small {
  padding: 0.6em 1.1em;
  font-size: 0.92rem;
}

.btn-quiet {
  background: var(--veil);
  color: var(--text);
}

.btn-quiet:hover {
  background: var(--veil-high);
  color: var(--text);
  opacity: 1;
}

.btn-off,
.btn-off:hover {
  background: var(--veil);
  color: var(--dim);
  opacity: 1;
}

/* ------------------------------------------------------------------------------------------------ top bar */

.skip {
  position: absolute;
  inset-inline-start: 0.5rem;
  top: -5rem;
  z-index: 20;
  padding: 0.7em 1.2em;
  border-radius: 999px;
  background: var(--text);
  color: var(--ink);
  font-weight: 600;
}

.skip:focus {
  top: 0.5rem;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(7 8 18 / 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.topbar-in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
  font: 700 1.02rem/1 var(--display);
  letter-spacing: var(--tight);
  text-decoration: none;
  white-space: nowrap;
}

.brand img {
  border-radius: 9px;
}

.topbar nav {
  display: flex;
  gap: 1.6rem;
  margin-inline-start: auto;
}

.topbar nav a {
  color: var(--dim);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  padding-block: 0.7em;
}

.topbar nav a:hover {
  color: var(--text);
}

.topbar-end {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.langs {
  position: relative;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
}

.langs summary {
  cursor: pointer;
  padding: 0.6em 1.1em;
  border-radius: 999px;
  background: var(--veil);
  color: var(--text);
}

.langs summary:hover {
  background: var(--veil-high);
}

.langs ul {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 12;
  width: max-content;
  max-height: 70vh;
  overflow: auto;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--panel);
  border-radius: var(--r-m);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.5);
}

.langs li a {
  display: block;
  padding: 0.6em 1em;
  color: var(--text);
  text-decoration: none;
  border-radius: 12px;
}

.langs li a:hover,
.langs li a[aria-current] {
  background: var(--veil);
}

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

.hero {
  overflow: hidden;
  padding-block: clamp(2rem, 1rem + 5vw, 5rem) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

/* The text on the left; the picture of the app on the right, larger than its column, cut by the edge of the window. */
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.hero h1 {
  font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.6rem);
  margin-bottom: 0.3em;
}

.hero-tag {
  color: var(--dim);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  line-height: 1.3;
  margin-bottom: 0.9em;
}

.hero-pitch {
  margin-bottom: 1.6em;
}

.hero-shot img {
  width: 860px;
  max-width: none;
  border-radius: var(--r-l);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.45);
}

/* From right to left the picture would lose its planet at the edge of the window: it stays in its column. */
[dir='rtl'] .hero-shot img {
  width: 100%;
}

/* ------------------------------------------------------------------------------------------------ store badges */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 0.7rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0 0;
  list-style: none;
}

/* A store badge is a pill with two lines. A live store is the white action; a store that is not open yet is quiet. */
.badge {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 11.5rem;
  min-height: 4rem;
  padding: 0.55rem 1.7rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--ink);
  text-decoration: none;
}

a.badge:hover {
  color: var(--ink);
  opacity: 0.88;
}

.badge-line {
  font-size: 0.75rem;
  line-height: 1.3;
}

.badge-name {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.badge-soon {
  background: var(--veil);
  color: var(--text);
}

.badge-soon .badge-line {
  color: var(--dim);
}

.badge em {
  position: absolute;
  top: -0.7rem;
  inset-inline-end: 1rem;
  padding: 0.2em 0.75em;
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.soon-note {
  color: var(--dim);
  font-size: 0.95rem;
  margin-bottom: 0.9em;
}

.price {
  margin: 0;
  font-size: 0.98rem;
}

.price strong {
  display: block;
}

.price span {
  color: var(--dim);
}

/* ------------------------------------------------------------------------------------------------ bands */

.band {
  padding-block: clamp(2.5rem, 1.8rem + 4vw, 4.5rem);
}

.section-head {
  max-width: 44rem;
  margin: 0 0 2rem;
}

.section-head p {
  color: var(--dim);
}

.section-head p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------------------------------------ demo */

.screen {
  margin-bottom: 1.5rem;
  border-radius: var(--r-l);
  background: #000;
  overflow: hidden;
}

.screen video {
  width: 100%;
}

/* The carousel: the five pictures lie on top of each other and fade in turn, 5 s each. No script. */
.slides {
  display: grid;
  border-radius: var(--r-l);
}

.slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  animation: slide 25s infinite backwards;
}

.slide:nth-child(1) {
  animation-delay: -0.5s;
}
.slide:nth-child(2) {
  animation-delay: 4.5s;
}
.slide:nth-child(3) {
  animation-delay: 9.5s;
}
.slide:nth-child(4) {
  animation-delay: 14.5s;
}
.slide:nth-child(5) {
  animation-delay: 19.5s;
}

@keyframes slide {
  0% {
    opacity: 0;
  }
  2%,
  20% {
    opacity: 1;
  }
  22%,
  100% {
    opacity: 0;
  }
}

.slide img {
  width: 100%;
  border-radius: var(--r-l);
  background: var(--panel);
}

.slide figcaption {
  padding: 0.9rem 0.25rem 0;
  color: var(--text);
}

.slide-n {
  color: var(--dim);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-inline-end: 0.6em;
}

.carousel:has(.pause input:checked) .slide,
.slides:hover .slide,
.slides:focus-within .slide,
.slides:focus .slide {
  animation-play-state: paused;
}

.carousel-tools {
  margin: 0.5rem 0.25rem 0;
  color: var(--dim);
  font-size: 0.92rem;
}

.pause {
  cursor: pointer;
}

.pause input {
  accent-color: var(--text);
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.12em;
}

.scroll-hint {
  display: none;
}

/* ------------------------------------------------------------------------------------------------ how to play */

/* The steps lie on the sky: a small picture, a title and a text each. */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem 1.75rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

.step-art {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  height: 64px;
  margin-bottom: 1rem;
}

.step-art img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

.step h3 {
  margin-bottom: 0.35em;
}

.step p {
  margin: 0;
  color: var(--dim);
  font-size: 0.98rem;
}

.guide {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.25rem;
}

/* A group: white at 8 %, no border. */
.guide-box,
.features,
.facts,
.doc-note,
.beta-steps li {
  background: var(--veil);
  border-radius: var(--r-l);
}

.guide-box {
  padding: 1.6rem 1.75rem;
}

.guide-box h3 {
  margin-bottom: 1em;
}

.tokens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tokens-plain {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.tokens li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.tokens img {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.tokens strong {
  display: block;
  font-size: 0.98rem;
  line-height: 1.3;
}

.tokens span,
.guide-note {
  color: var(--dim);
  font-size: 0.9rem;
  line-height: 1.4;
}

.tokens span {
  display: block;
}

.guide-note {
  margin: 1.2rem 0 0;
}

/* ------------------------------------------------------------------------------------------------ worlds */

.worlds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A world: its picture, and the text under it on the sky. The line of levels has the hue of the world. */
.world {
  --hue: var(--dim);
  display: flex;
  flex-direction: column;
}

.world img {
  width: 100%;
  border-radius: var(--r-m);
  background: var(--panel);
}

.world-text {
  padding: 1rem 0.25rem 0;
}

.world h3 {
  font: 700 1.25rem/1.2 var(--display);
  letter-spacing: var(--tight);
  margin-bottom: 0.3em;
}

.world-moon {
  --hue: #d9d5cf;
}
.world-phobos {
  --hue: #f08a5d;
}
.world-europa {
  --hue: #9fdcf5;
}
.world-titan {
  --hue: #f2c063;
}
.world-triton {
  --hue: #b9acff;
}

.world-levels {
  color: var(--hue);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5em;
}

.world p:last-child {
  margin: 0;
  color: var(--dim);
  font-size: 0.98rem;
}

/* The closed world: a quiet surface of the size of a picture, with the question mark. */
.world-mark {
  display: grid;
  place-items: center;
  aspect-ratio: 1280 / 589;
  border-radius: var(--r-m);
  background: var(--veil);
  color: #7f8ab8;
  font: 700 4rem/1 var(--display);
}

/* ------------------------------------------------------------------------------------------------ features */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.75rem 2rem;
  margin: 1.6rem 0 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  list-style: none;
}

.features h3 {
  font-size: 1.05rem;
  margin-bottom: 0.3em;
}

.features p {
  margin: 0;
  color: var(--dim);
  font-size: 0.98rem;
}

/* ------------------------------------------------------------------------------------------------ questions */

.faq {
  display: grid;
  gap: 0.6rem;
  max-width: 50rem;
  margin-top: 1.6rem;
}

.faq details {
  background: var(--veil);
  border-radius: var(--r-l);
}

.faq summary {
  cursor: pointer;
  padding: 1.05rem 1.5rem;
  border-radius: var(--r-l);
  font-weight: 600;
  line-height: 1.4;
}

.faq summary::marker {
  color: var(--dim);
}

.faq summary:hover {
  background: var(--veil);
}

.faq details p {
  margin: 0;
  padding: 0 1.5rem 1.4rem;
  color: var(--text);
}

/* ------------------------------------------------------------------------------------------------ last call */

/* The one card that must stand out: solid, no border. The icon on the left, the text beside it. */
.cta {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.75rem, 1rem + 4vw, 3.5rem);
  border-radius: var(--r-l);
  background: var(--panel);
}

.cta-text {
  min-width: 0;
}

.cta h2 {
  margin-bottom: 0.3em;
}

.app-icon {
  flex: none;
  width: clamp(96px, 16vw, 176px);
  border-radius: 22.5%;
}

/* ------------------------------------------------------------------------------------------------ footer */

.foot {
  padding-block: 3rem 2.2rem;
  background: linear-gradient(transparent, rgb(7 8 18 / 0.7));
  font-size: 0.95rem;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 2rem;
}

.foot-name {
  font: 700 1.05rem/1.2 var(--display);
  letter-spacing: var(--tight);
  margin-bottom: 0.5em;
}

.foot-brand p:last-child {
  color: var(--dim);
}

.foot h2 {
  color: var(--dim);
  font: 600 0.92rem/1.3 var(--body);
  letter-spacing: 0;
  margin-bottom: 0.7em;
}

.foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot li a {
  display: inline-block;
  padding-block: 0.3em;
  color: var(--text);
  text-decoration: none;
}

.foot li a:hover {
  text-decoration: underline;
}

.foot-small {
  margin-top: 2.5rem;
  color: var(--dim);
  font-size: 0.85rem;
}

.foot-small p {
  margin-bottom: 0.5em;
}

/* ------------------------------------------------------------------------------------------------ text pages */

.doc-main {
  padding-block: 2rem 4rem;
}

.back {
  display: inline-block;
  margin-bottom: 1.5rem;
  padding: 0.6em 1.1em;
  border-radius: 999px;
  background: var(--veil);
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
  text-decoration: none;
}

.back:hover {
  background: var(--veil-high);
}

.back::before {
  content: '\2190\00a0';
}

[dir='rtl'] .back::before {
  content: '\2192\00a0';
}

/* The text lies on the sky. */
.doc h1 {
  font-size: clamp(1.6rem, 1rem + 3.2vw, 2.5rem);
  hyphens: auto;
}

.doc h2 {
  font: 600 1.3rem/1.3 var(--body);
  letter-spacing: 0;
  margin-top: 2.2em;
}

.doc li {
  margin-bottom: 0.4em;
}

/* A chip, as in the game. */
.kicker {
  display: inline-block;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: var(--veil);
  color: var(--blue);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  margin-bottom: 1.2em;
}

.doc-date {
  color: var(--dim);
  font-size: 0.95rem;
}

.doc-intro {
  font-size: 1.18rem;
}

.doc-note {
  padding: 1rem 1.5rem;
  font-size: 0.98rem;
}

.doc-more {
  margin: 2.5rem 0 0;
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.5rem;
  margin: 1.5rem 0;
  padding: 1.5rem;
}

.facts dt {
  color: var(--dim);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.7;
}

.facts dd {
  margin: 0;
}

/* The three steps of the Android test are a real sequence: they keep their numbers. */
.beta-steps {
  display: grid;
  gap: 0.75rem;
  margin: 1.8rem 0;
  padding: 0;
  list-style: none;
}

.beta-steps li {
  display: flex;
  gap: 1.1rem;
  padding: 1.5rem;
}

.num {
  flex: none;
  min-width: 1.2em;
  color: var(--dim);
  font: 700 1.3rem/1.3 var(--display);
}

.beta-steps h2 {
  margin-top: 0;
}

.lost {
  padding-block: 2rem;
}

.lost img {
  margin: 0 0 1.5rem;
}

/* ------------------------------------------------------------------------------------------------ small screens */

@media (max-width: 900px) {
  /* The picture on top, the text under it. */
  .hero-in {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-shot {
    order: -1;
  }

  .hero-shot img {
    width: 100%;
  }

  .guide {
    grid-template-columns: 1fr;
  }

  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }

  .foot-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .topbar nav {
    display: none;
  }

  .topbar-end {
    margin-inline-start: auto;
  }
}

@media (max-width: 700px) {
  body {
    font-size: 1rem;
  }

  .wrap {
    width: min(100% - 2rem, 1120px);
  }

  .hero-shot img,
  .slide img,
  .slides {
    border-radius: var(--r-m);
  }

  .brand {
    font-size: 0.9rem;
  }

  .badge {
    min-width: 0;
    flex: 1;
    padding-inline: 1.2rem;
  }

  .badge-name {
    font-size: 1.05rem;
  }

  .badges li {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
  }

  .worlds {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .facts {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  .facts dd {
    margin-bottom: 0.7rem;
  }

  .beta-steps li {
    flex-direction: column;
    gap: 0.4rem;
  }

  .slide figcaption {
    min-height: 3.2em;
  }
}

@media (max-width: 480px) {
  /* The name of the game is in the title of the page; the top bar keeps the icon, the language and the button. */
  .brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .foot-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------------------------------------ less motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn {
    transition: none;
  }

  /* No fade: the pictures stand side by side and the visitor scrolls them. */
  .slides {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    border-radius: 0;
    padding-bottom: 0.6rem;
  }

  .slide {
    flex: 0 0 min(86%, 760px);
    opacity: 1;
    animation: none;
    scroll-snap-align: center;
  }

  .pause {
    display: none;
  }

  .scroll-hint {
    display: inline;
  }
}

@media print {
  .topbar,
  .foot-grid,
  .carousel,
  .screen,
  .hero-shot {
    display: none;
  }

  html,
  body {
    background: #fff;
    color: #000;
  }
}