/*
 * Snow Tycoon main website. A modern app page on purpose, not the game's arcade UI: snow and ice
 * surfaces, navy ink, one warm accent taken from the logo, and real footage inside drawn phones.
 */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/Manrope-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/AtkinsonHyperlegibleNext-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/AtkinsonHyperlegibleNext-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --snow: #f7fafd;
  --white: #ffffff;
  --ice: #eaf3fd;
  --ice-2: #d9e9fa;
  --ink: #0f1b33;
  --ink-2: #2a3853;
  --muted: #5b6b85;
  --line: #dce5f0;
  --accent: #ff9f1a;
  --accent-text: #a65800;
  --accent-soft: #fff1dc;
  --good: #1e7a4f;
  --bad: #b3261e;

  --display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 20px;
  --radius-sm: 12px;
  --phone-shadow: 0 40px 80px -36px rgba(15, 27, 51, 0.55), 0 14px 28px -16px rgba(15, 27, 51, 0.35);
  --card-shadow: 0 1px 2px rgba(15, 27, 51, 0.04), 0 12px 32px -18px rgba(15, 27, 51, 0.18);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

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

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

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

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.35rem, 5.2vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

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

.wrap {
  width: min(100%, var(--wrap));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--accent-text);
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lead {
  max-width: 34em;
  color: var(--muted);
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.55;
}

.todo {
  padding: 0 4px;
  border-radius: 4px;
  background: #ffe28a;
  color: #4a3500;
}

/* ---------- buttons and chips ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 0.75em 1.35em;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s, box-shadow 0.18s;
}

.btn:hover {
  background: #1d2c4d;
  box-shadow: 0 10px 22px -12px rgba(15, 27, 51, 0.6);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn--ghost {
  border-color: var(--line);
  background: var(--white);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: #b9c8dc;
  background: var(--white);
}

.btn--light {
  border-color: #fff;
  background: #fff;
  color: var(--ink);
}

.btn--light:hover {
  background: var(--ice);
}

.btn svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 700;
}

.chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.icon-chip {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--ice);
  color: var(--ink);
}

.icon-chip svg {
  width: 24px;
  height: 24px;
}

/* ---------- header ----------
   The header lies over the top of every page: `main` is pulled up under it by its height (--top-h), and the first
   block of a page (the home page's banner, an inner page's head, the 404) is padded down by the same. At the top of the
   page the header is only a white-to-clear fade over the picture. Scrolling down blends in the frosted bar on top of
   it, by --solid (0 to 1), which site.js sets from how far the page has scrolled. */

:root {
  --top-h: 72px;
}

main {
  margin-top: calc(var(--top-h) * -1);
}

.top {
  --solid: 0;
  position: relative;
  z-index: 20;
}

.top::before,
.top::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.top::before {
  background: linear-gradient(180deg, rgba(247, 250, 253, 0.94) 0%, rgba(247, 250, 253, 0.74) 55%, rgba(247, 250, 253, 0) 100%);
}

.top::after {
  border-bottom: 1px solid rgba(220, 229, 240, 0.9);
  background: rgba(247, 250, 253, 0.86);
  box-shadow: 0 10px 28px -22px rgba(15, 27, 51, 0.45);
  opacity: var(--solid);
}

@supports (backdrop-filter: blur(1px)) {
  .top::after {
    background: rgba(247, 250, 253, 0.72);
    backdrop-filter: saturate(1.4) blur(14px);
  }
}

.top__in {
  display: flex;
  align-items: center;
  gap: 12px 28px;
  min-height: 72px;
}

/* The logo is the emblem as a badge in the bar: --badge-h tall, centred on the link's row, and it stays inside the
   bar's 72 px (it used to hang out below it, which read as too big once the bar went solid on scroll). */
:root {
  --badge-h: 60px;
}

.brand {
  position: relative;
  flex: none;
  width: calc(var(--badge-h) * 400 / 426);
  height: 46px;
  margin-right: auto;
  line-height: 0;
}

.brand img {
  position: absolute;
  left: 0;
  width: auto;
  max-width: none;
  top: calc((46px - var(--badge-h)) / 2);
  height: var(--badge-h);
  filter: drop-shadow(0 6px 10px rgba(15, 27, 51, 0.22));
}

.nav {
  display: flex;
  gap: 4px;
}

.nav a {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink-2);
  font-family: var(--display);
  font-size: 0.97rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s;
}

.nav a:hover,
.nav a[aria-current="page"] {
  background: var(--ice);
  color: var(--ink);
}

.top__social {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: -16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  transition: background-color 0.15s;
}

.top__social:hover {
  background: var(--ice);
}

.top__social svg {
  width: 20px;
  height: 20px;
}

.top__cta {
  min-height: 40px;
  padding: 0.6em 1.1em;
  font-size: 0.93rem;
}

@media (min-width: 900px) {
  .top {
    position: sticky;
    top: 0;
  }
}

@media (max-width: 899px) {
  :root {
    --top-h: 108px;
    --badge-h: 64px;
  }

  .top__in {
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 6px;
  }

  .top__cta {
    display: none;
  }

  /* The links' row sits under the logo's, and the badge hangs down beside its start, so the links begin clear of it. */
  .nav {
    order: 3;
    width: 100%;
    margin: 0 -12px;
    padding-left: calc(var(--badge-h) * 400 / 426 + 16px);
    overflow-x: auto;
  }

  .brand {
    height: 40px;
  }

  .brand img {
    top: 0;
  }
}

/* The home page opens with the logo big at the top left, and scrolling docks it into the header as the badge (--dock,
   0 to 1, set by site.js over the first 120 px). The picture is laid out at the big size (--logo-s times the badge),
   so it is drawn sharp, and scaled down from its top left corner as it docks. The hero leaves --logo-room for it.
   On phones the header's links sit on a row under the logo, so that row starts lower by what the logo grew
   (--nav-dy) and rises back as it docks. */
.page-home {
  --logo-s: 2.9; /* keeps the opening logo ~174 px tall, as before the badge shrank */
  --logo-room: 56px;
  --nav-dy: 0px;
}

.page-home .brand img {
  height: calc(var(--badge-h) * var(--logo-s));
  transform-origin: 0 0;
  transform: scale(calc(1 / var(--logo-s) + (1 - 1 / var(--logo-s)) * (1 - var(--dock, 0))));
  will-change: transform;
}

.page-home .nav {
  transform: translateY(calc(var(--nav-dy) * (1 - var(--dock, 0))));
}

@media (max-width: 899px) {
  .page-home {
    --logo-s: 1.75;
    --logo-room: 56px;
    --nav-dy: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home {
    --logo-room: 0px;
  }

  .page-home .brand img,
  .page-home .nav {
    --dock: 1;
  }
}

/* language menu */

.lang {
  position: relative;
}

.lang summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.lang summary::-webkit-details-marker {
  display: none;
}

.lang summary svg {
  width: 18px;
  height: 18px;
}

.lang ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 190px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--card-shadow);
  list-style: none;
}

.lang li a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--ink-2);
  text-decoration: none;
}

.lang li a:hover {
  background: var(--ice);
}

.lang li a[aria-current="true"] {
  background: var(--ice);
  color: var(--ink);
  font-weight: 700;
}

.lang li a span {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
}

/* "this site is also in your language" */

.hint {
  border-bottom: 1px solid var(--line);
  background: var(--accent-soft);
  font-size: 0.95rem;
}

.hint .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}

.hint p {
  flex: 1;
  padding: 8px 0;
}

.hint a {
  margin-left: 6px;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

.hint button {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.hint button:hover {
  background: rgba(15, 27, 51, 0.07);
}

/* ---------- phones ---------- */

.phone {
  position: relative;
  padding: var(--bezel, 10px);
  border-radius: calc(var(--screen-radius, 18px) + var(--bezel, 10px));
  background: linear-gradient(150deg, #24345a 0%, #0f1b33 42%, #0a1326 100%);
  box-shadow: var(--phone-shadow), inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}

.phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: var(--screen-radius, 18px);
  background: #cfe3f8;
}

.phone__screen img,
.phone__screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone--land .phone__screen {
  aspect-ratio: 16 / 9;
}

/* The camera: on the short side, where a phone keeps it. */
.phone::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: #050a16;
}

.phone--land::after {
  left: calc(var(--bezel, 10px) * 0.5 - 2px);
  top: 50%;
  width: 4px;
  height: 22px;
  transform: translateY(-50%);
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--top-h) + var(--logo-room, 0px) + clamp(40px, 7vw, 96px)) 0 clamp(64px, 9vw, 128px);
  background: var(--white);
}

/* The banner picture behind the hero (tools/media.py makes its sizes). It covers the hero with the gondola's run kept in
   view on the right, under the phone; a veil on the left lifts the words off the sky, and its foot fades into the
   white of the section below, so the picture runs out into the page rather than ending on an edge. */
.hero__banner {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 38%;
}

.hero__banner::before,
.hero__banner::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hero__banner::before {
  background: linear-gradient(90deg, rgba(247, 250, 253, 0.74) 0%, rgba(247, 250, 253, 0.52) 36%, rgba(247, 250, 253, 0) 62%);
}

.hero__banner::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.72) 80%, #ffffff 100%);
}

.hero .lead {
  color: var(--ink-2);
}

/* Upright screens stack the words over the phone, so the veil runs down from the top instead of in from the left. */
@media (max-width: 959px) {
  /* The open runs right of the gondola, a quieter ground for the lead than its cables. */
  .hero__banner img {
    object-position: 80% 30%;
  }

  .hero__banner::before {
    background: linear-gradient(180deg, rgba(247, 250, 253, 0.72) 0%, rgba(247, 250, 253, 0.66) 46%, rgba(247, 250, 253, 0) 76%);
  }
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
  }
}

.hero__copy .chip {
  margin-bottom: 22px;
}

.hero__copy .lead {
  margin-top: 22px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Free to play, with its in-app purchases beside it: a tick, the claim, a dot, and the link to how purchases work. */
.hero__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 20px;
  color: var(--ink-2);
  font-size: 0.98rem;
}

.hero__price::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1b33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 1px 2px rgba(15, 27, 51, 0.12);
}

.hero__price strong {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
}

.hero__price a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: rgba(42, 56, 83, 0.4);
  text-underline-offset: 3px;
}

.hero__price a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.hero__phone {
  --bezel: clamp(8px, 1.1vw, 13px);
  --screen-radius: clamp(14px, 1.8vw, 24px);
  transform: rotate(-4deg);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__phone {
    animation: settle 1.1s var(--ease) 0.1s both;
  }

  .hero__copy > * {
    animation: rise-in 0.8s var(--ease) both;
  }

  .hero__copy > :nth-child(2) {
    animation-delay: 0.06s;
  }

  .hero__copy > :nth-child(3) {
    animation-delay: 0.12s;
  }

  .hero__copy > :nth-child(4) {
    animation-delay: 0.18s;
  }

  .hero__copy > :nth-child(n + 5) {
    animation-delay: 0.24s;
  }
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(40px) rotate(-10deg);
  }
  to {
    opacity: 1;
    transform: rotate(-4deg);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- sections ---------- */

.section {
  padding: clamp(72px, 10vw, 136px) 0;
}

.section--white {
  background: var(--white);
}

/* The hero's ridge already makes the break, so the first section starts close under it. */
.hero + .section {
  padding-top: clamp(24px, 4vw, 56px);
}

main > .section:last-child {
  padding-bottom: 0;
}

.section__head {
  max-width: 44rem;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.section__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section__head--center .lead {
  margin-left: auto;
  margin-right: auto;
}

.section__head .lead {
  margin-top: 16px;
}

/* Scroll-driven, so it needs no script; browsers without it just show the content. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

/* ---------- in motion: phones on their side, two to a row ---------- */

.reel-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 44px);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The right-hand column stands a little lower, so the four don't read as a table. */
.reel:nth-child(even) {
  margin-top: clamp(28px, 5vw, 72px);
}

/* A phone held sideways, as the game is played: an iPhone's 19.5:9 screen, a thin bezel, round corners and the
   Dynamic Island at the left. The 16:9 footage fills it, a little trimmed at the top and bottom. */
.phone--iphone {
  --bezel: clamp(6px, 0.7vw, 9px);
  --screen-radius: clamp(18px, 2.4vw, 34px);
}

.phone--iphone .phone__screen {
  aspect-ratio: 19.5 / 9;
}

.phone--iphone::after {
  left: calc(var(--bezel) + 1.6%);
  width: 1.7%;
  height: 25%;
}

.reel figcaption {
  margin-top: 18px;
}

.reel figcaption strong {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.reel figcaption span {
  color: var(--muted);
  font-size: 0.95rem;
}

.reel figure {
  margin: 0;
}

@media (max-width: 799px) {
  .reel-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 440px);
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }

  .reel-row::-webkit-scrollbar {
    display: none;
  }

  .reel {
    scroll-snap-align: start;
  }

  .reel:nth-child(even) {
    margin-top: 0;
  }
}

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

.feature {
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.feature + .feature {
  margin-top: clamp(64px, 9vw, 120px);
}

@media (min-width: 900px) {
  .feature {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .feature--flip {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .feature--flip .feature__media {
    order: 2;
  }
}

.feature__media .phone {
  --bezel: clamp(7px, 1vw, 12px);
  --screen-radius: clamp(14px, 1.6vw, 22px);
  transform: rotate(2.5deg);
}

.feature--flip .feature__media .phone {
  transform: rotate(-2.5deg);
}

.feature__copy .icon-chip {
  margin-bottom: 20px;
}

.feature__copy h3 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.feature__copy p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 1.1rem;
}

.ticks {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-left: 32px;
  color: var(--ink-2);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1b33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(64px, 9vw, 120px);
}

.card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--card-shadow);
}

.card__img {
  aspect-ratio: 16 / 10;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--ice);
}

.card__body {
  padding: 22px 22px 26px;
}

.card__body .icon-chip {
  width: 40px;
  height: 40px;
  margin: -42px 0 14px;
  border: 3px solid var(--white);
  position: relative;
}

.card__body p {
  margin-top: 8px;
  color: var(--muted);
}

/* ---------- two ways to play ---------- */

.modes {
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
}

@media (min-width: 860px) {
  .modes {
    grid-template-columns: 1fr 1fr;
  }
}

.mode {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 28px;
  background: var(--ice);
}

.mode--dark {
  background: linear-gradient(160deg, #1b2b4e 0%, var(--ink) 70%);
  color: #c9d5ea;
}

.mode--dark h3,
.mode--dark .mode__tag {
  color: #fff;
}

.mode h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -0.025em;
}

.mode__tag {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--accent-text);
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mode--dark .mode__tag {
  color: var(--accent);
}

.mode p {
  margin-top: 12px;
  font-size: 1.08rem;
}

.mode .ticks li {
  color: inherit;
}

.mode--dark .ticks li::before {
  background-color: rgba(255, 255, 255, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
}

.extras {
  display: grid;
  gap: 16px;
  margin-top: clamp(16px, 2.4vw, 28px);
}

@media (min-width: 860px) {
  .extras {
    grid-template-columns: 1fr 1fr;
  }
}

.extra {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.extra .icon-chip {
  flex: none;
}

.extra strong {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
}

.extra p {
  color: var(--muted);
}

/* ---------- follow band ---------- */

.band {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 80px);
  border-radius: 32px;
  background:
    radial-gradient(60% 90% at 85% 0%, rgba(255, 159, 26, 0.22), transparent 60%),
    linear-gradient(160deg, #1b2b4e 0%, var(--ink) 75%);
  color: #c9d5ea;
}

.band h2 {
  max-width: 16em;
  color: #fff;
}

.band p {
  max-width: 34em;
  margin-top: 16px;
  font-size: 1.12rem;
}

.band .hero__actions {
  position: relative;
}

.band__ridge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(70%, 680px);
  height: auto;
  opacity: 0.5;
  pointer-events: none;
}

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

.foot {
  margin-top: clamp(48px, 7vw, 96px);
  padding: 56px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--white);
  color: var(--muted);
  font-size: 0.95rem;
}

.foot__grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 860px) {
  .foot__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.foot__brand img {
  width: auto;
  height: 88px;
}

.foot__brand p {
  max-width: 24em;
  margin-top: 14px;
}

.foot h2 {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.foot ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot a {
  color: var(--ink-2);
  text-decoration: none;
}

.foot a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.foot__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.foot__legal {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  line-height: 1.7;
}

/* ---------- inner pages ---------- */

.page-head {
  padding: calc(var(--top-h) + clamp(48px, 7vw, 96px)) 0 clamp(36px, 5vw, 64px);
  background:
    radial-gradient(60% 90% at 90% 0%, rgba(255, 176, 64, 0.12), transparent 60%),
    linear-gradient(180deg, var(--ice) 0%, var(--snow) 100%);
}

.page-head .lead {
  margin-top: 18px;
}

.page-body {
  padding-top: clamp(24px, 4vw, 48px);
}

.narrow {
  max-width: 760px;
}

.box {
  padding: clamp(22px, 3.2vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--card-shadow);
}

.box + .box {
  margin-top: 20px;
}

.box h2 {
  font-size: 1.35rem;
  letter-spacing: -0.015em;
}

.box__text {
  margin-top: 10px;
  color: var(--muted);
}

.box .hero__actions {
  margin-top: 20px;
}

.box--features,
.usage {
  margin-top: 20px;
}

.ticks--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px 32px;
}

.kit-note {
  align-self: center;
  color: var(--muted);
  font-size: 0.92rem;
}

.page-head .hero__actions {
  margin-top: 28px;
}

aside .box + .box {
  margin-top: 20px;
}

.publisher {
  margin-top: 12px;
  font-style: normal;
  line-height: 1.75;
}

/* legal texts */

.updated {
  margin-top: 20px;
}

/* While a change of the Terms waits for players who accepted the version before, a second chip says from when. */
.updated + .updated {
  margin-top: 8px;
}

.toc {
  margin-bottom: 36px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.toc strong {
  color: var(--ink);
  font-family: var(--display);
}

.toc ol {
  margin: 10px 0 0;
  padding-left: 1.3em;
  columns: 2 16rem;
  column-gap: 2rem;
}

.toc li {
  break-inside: avoid;
  padding: 2px 0;
}

.prose {
  color: var(--ink-2);
}

.prose h2 {
  margin: 2.4em 0 0.6em;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.prose h3 {
  margin: 1.8em 0 0.4em;
  font-size: 1.15rem;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1em;
}

.prose li + li {
  margin-top: 0.35em;
}

.prose a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.prose .note {
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--ink);
}

/* Links to the earlier versions of a legal text, under its last section. */
.prose .legal-archive {
  margin-top: 2.4em;
  padding-top: 1em;
  border-top: 1px solid var(--line);
}

/* press */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0;
  margin: 0;
}

.facts div {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.facts dt {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.facts dd {
  margin: 4px 16px 0 0;
  color: var(--ink);
  font-weight: 700;
}

.press-grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 900px) {
  .press-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.copyable {
  position: relative;
}

.copyable p {
  margin-top: 12px;
}

.copy-btn {
  position: absolute;
  right: clamp(16px, 2.4vw, 28px);
  top: clamp(16px, 2.4vw, 28px);
  min-height: 36px;
  padding: 0.45em 0.9em;
  font-size: 0.85rem;
}

.dl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: clamp(48px, 7vw, 80px) 0 24px;
}

.dl-head p {
  color: var(--muted);
}

.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dl-grid--tall {
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 180px), 1fr));
}

.dl {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
  transition: transform 0.18s var(--ease), box-shadow 0.18s;
}

.dl:hover {
  box-shadow: var(--card-shadow);
  transform: translateY(-2px);
}

.dl img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ice);
}

.dl-grid--tall .dl img {
  aspect-ratio: 9 / 16;
}

.dl--contain img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  padding: 18px;
  background: var(--ice);
}

.dl span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px 14px;
}

.dl b {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.35;
}

.dl small {
  color: var(--muted);
  font-size: 0.85rem;
}

/* contact */

.contact-grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }
}

.form {
  display: grid;
  gap: 20px;
}

.form__row {
  display: grid;
  gap: 20px;
}

@media (min-width: 640px) {
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.field label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--snow);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.field textarea {
  min-height: 180px;
  resize: vertical;
}

.field select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1b33' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: #c2d1e4;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background-color: var(--white);
  box-shadow: 0 0 0 4px rgba(255, 159, 26, 0.3);
}

.field small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.86rem;
}

.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.form__foot small {
  color: var(--muted);
  font-size: 0.86rem;
}

.status {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.status:empty {
  display: none;
}

.status--ok {
  background: #e3f4ea;
  color: var(--good);
}

.status--error {
  background: #fdeceb;
  color: var(--bad);
}

.btn[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

/* 404 */

.lost {
  padding: calc(var(--top-h) + clamp(72px, 12vw, 160px)) 0 clamp(72px, 12vw, 160px);
  text-align: center;
}

.lost .lead {
  margin: 18px auto 0;
}

.lost .hero__actions {
  justify-content: center;
}