/*
 * The Yonderlume website. Colours, fonts, radii and shadows are the design system's tokens (tokens.css,
 * generated from site/tokens.json); the site draws them at 2 screen pixels per art pixel (--u), like the
 * game at 1080p. No anti-aliased decoration: hard 1-art-pixel outlines and shadows in colour, never black.
 */

@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pixelify-sans-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/pixelify-sans-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/silkscreen-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/silkscreen-latin-700-normal.woff2) format('woff2');
}

:root {
  /* One art pixel on the site. */
  --u: 2px;
  /* Long legal text reads better in the system font; everything else uses the pixel fonts. */
  --font-prose: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --content: 1080px;
  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font: 400 20px/1.5 var(--font-display);
  color: var(--ink);
  background: var(--surface-alt);
  -webkit-font-smoothing: none;
}

main {
  flex: 1;
}

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

.pixel,
.card-icon,
.actor,
.scene {
  image-rendering: pixelated;
}

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

a:hover {
  color: var(--blue-2);
}

:focus-visible {
  outline: var(--u) solid var(--focus);
  outline-offset: var(--u);
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: var(--u) solid var(--surface-edge);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* --- buttons: primary action blue-3 with ink; hover blue-4; pressed blue-2 with grey-6 ---------- */

.button {
  display: inline-block;
  padding: 8px 16px;
  font: 700 16px/24px var(--font-ui);
  letter-spacing: var(--u);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--blue-3);
  border: var(--u) solid var(--blue-1);
  border-radius: calc(var(--radius-1) * 2);
  box-shadow: inset 0 var(--u) 0 var(--blue-4), var(--u) var(--u) 0 var(--blue-1);
}

.button:hover {
  color: var(--ink);
  background: var(--blue-4);
}

.button:active {
  color: var(--grey-6);
  background: var(--blue-2);
  box-shadow: none;
  transform: translate(var(--u), var(--u));
}

.button-big {
  padding: 14px 36px;
  font-size: 24px;
  line-height: 32px;
  border-width: calc(var(--u) * 1.5);
  box-shadow: inset 0 var(--u) 0 var(--blue-4), calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--blue-1);
}

/* --- header ---------------------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 2;
  background: var(--blue-3);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content);
  margin: 0 auto;
  padding: 12px 16px;
}

.nav-brand,
.footer-brand {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font: 700 24px/1 var(--font-display);
  color: var(--ink);
  text-decoration: none;
}

.nav-brand:hover {
  color: var(--ink);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a:not(.button) {
  font: 700 16px/24px var(--font-ui);
  letter-spacing: var(--u);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.nav-links a:not(.button):hover {
  text-decoration: underline;
  text-decoration-thickness: var(--u);
}

.nav-links .button {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--surface-edge);
  box-shadow: var(--u) var(--u) 0 var(--blue-1);
}

.nav-links .button:hover {
  background: var(--grey-6);
}

.nav-links .button:active {
  color: var(--ink);
  background: var(--surface-alt);
  box-shadow: none;
}

/* --- hero: the sky (blue-3 → blue-4 → teal-4, in hard bands), the logo, then the ground ------------ */

.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--blue-4);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px 0;
}

.hero-logo {
  margin: 0 auto;
  /* Clear space around the logo: at least the ribbon's height (about 11% of the logo). */
  padding: 12px 0 8px;
  line-height: 0;
}

.hero-logo img {
  width: clamp(260px, 42vw, 460px);
}

.tagline {
  margin: 8px 0 0;
  font: 700 32px/1.2 var(--font-display);
  text-wrap: balance;
}

.pitch {
  max-width: 34em;
  margin: 16px auto 0;
  text-wrap: pretty;
}

.cta {
  margin: 28px 0 0;
}

.cta-note {
  margin: 16px 0 0;
  font: 400 16px/24px var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* The ground with the far hills behind it, and a few residents standing on it. */
.scene {
  --ground: 96px;
  position: relative;
  height: calc(var(--ground) + 200px);
  margin-top: -40px;
  /* The sky turns teal-4 towards the horizon, behind the hills (a hard band, no gradient). */
  background:
    url(img/ground.png) left bottom / 192px 96px repeat-x,
    url(img/hills.png) left 0 bottom var(--ground) / 960px 200px repeat-x,
    linear-gradient(to bottom, transparent 0 40%, var(--teal-4) 40% 100%);
}

.actor {
  position: absolute;
  /* The sprites' feet are 4 art pixels above the bottom of their cell. */
  bottom: calc(var(--ground) - 4 * var(--u));
  width: var(--w);
  height: var(--h);
  background-repeat: no-repeat;
  background-size: calc(4 * var(--w)) var(--h);
  animation: frames var(--ms) steps(4) infinite;
}

@keyframes frames {
  to {
    background-position-x: calc(-4 * var(--w));
  }
}

.actor-hero {
  --w: calc(64 * var(--u));
  --h: calc(80 * var(--u));
  --ms: 2s;
  left: calc(50% - 300px);
  background-image: url(img/hero.png);
}

.actor-slime {
  --w: calc(48 * var(--u));
  --h: calc(48 * var(--u));
  --ms: 0.72s;
  /* Facing the hero (sprites are drawn facing right). */
  transform: scaleX(-1);
  background-image: url(img/slime.png);
}

.actor-slime-1 {
  left: calc(50% + 90px);
}

.actor-slime-2 {
  left: calc(50% + 200px);
  background-image: url(img/slime-green.png);
  animation-delay: -0.3s;
}

.actor-slime-3 {
  left: calc(50% + 310px);
  background-image: url(img/slime-red.png);
  animation-delay: -0.5s;
}

@media (max-width: 720px) {
  .tagline {
    font-size: 26px;
  }

  .scene {
    margin-top: -24px;
  }

  .nav-links {
    gap: 8px 16px;
  }

  .actor-hero {
    left: 8%;
  }

  .actor-slime-1 {
    left: auto;
    right: 30%;
  }

  .actor-slime-2 {
    left: auto;
    right: 6%;
  }

  .actor-slime-3 {
    display: none;
  }
}

/* On a phone the header keeps the name and Play now on one row; the sections are a short scroll away. */
@media (max-width: 560px) {
  .nav-links li:not(:last-child) {
    display: none;
  }

  .nav-brand {
    font-size: 20px;
  }
}

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

  .actor {
    animation: none;
  }
}

/* --- sections: parchment panels (surface on surface-alt, 1-art-pixel outline and shadow) ----------- */

.section {
  padding: 56px 16px;
}

.section-alt {
  background: var(--sand-2);
}

.section-inner {
  max-width: var(--content);
  margin: 0 auto;
}

.section-inner.narrow {
  max-width: 820px;
}

/* The display title: ink with a 1-art-pixel yellow-2 line at the bottom right. */
.title {
  margin: 0 0 32px;
  font: 700 40px/1.1 var(--font-display);
  text-align: center;
  text-shadow: var(--u) var(--u) 0 var(--yellow-2);
}

.panel,
.card,
.faq details,
.prose {
  background: var(--surface);
  border: var(--u) solid var(--surface-edge);
  border-radius: calc(var(--radius-1) * 2);
  box-shadow: var(--u) var(--u) 0 var(--surface-edge);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: 20px;
}

.card-icon {
  display: block;
  width: 64px;
  height: 64px;
  background: var(--surface-alt);
  border: var(--u) solid var(--surface-edge);
}

.card h3 {
  margin: 16px 0 8px;
  font: 700 24px/1.2 var(--font-display);
}

.card p {
  margin: 0;
}

.faq {
  display: grid;
  gap: 12px;
}

.faq summary {
  padding: 14px 18px;
  font: 700 22px/1.3 var(--font-display);
  cursor: pointer;
}

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

.faq details[open] summary {
  border-bottom: var(--u) solid var(--surface-alt);
}

.faq details p {
  margin: 0;
  padding: 14px 18px 18px;
}

.cta-bottom {
  text-align: center;
}

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

.site-footer {
  color: var(--grey-5);
  background: var(--grey-1);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content);
  margin: 0 auto;
  padding: 32px 16px;
}

.footer-brand,
.footer-brand:hover {
  color: var(--grey-6);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a:not(.footer-brand) {
  font: 700 16px/24px var(--font-ui);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blue-4);
}

.site-footer a:not(.footer-brand):hover {
  color: var(--grey-6);
}

.footer-note {
  flex-basis: 100%;
  margin: 0;
  font-size: 16px;
}

/* --- legal pages ----------------------------------------------------------------------------------- */

.page-hero {
  padding: 24px 16px 32px;
  text-align: center;
  background: linear-gradient(to bottom, var(--blue-4) 0 calc(100% - 12px), var(--teal-4) calc(100% - 12px));
}

.page-hero .logo {
  display: block;
  width: 180px;
  margin: 0 auto;
  /* Clear space: the ribbon's height. */
  padding: 20px 0;
}

.page-hero h1 {
  margin: 0;
  font: 700 40px/1.1 var(--font-display);
  text-shadow: var(--u) var(--u) 0 var(--yellow-2);
}

.page-hero .updated {
  margin: 8px 0 0;
  font: 400 16px/24px var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.draft-notice {
  max-width: 820px;
  margin: 0 auto 24px;
  padding: 14px 18px;
  font: 700 18px/1.4 var(--font-prose);
  background: var(--orange-4);
  border: var(--u) solid var(--orange-2);
  border-radius: calc(var(--radius-1) * 2);
}

.prose {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px clamp(18px, 4vw, 40px) 32px;
  font: 400 17px/1.65 var(--font-prose);
}

.prose h2 {
  margin: 36px 0 8px;
  font: 700 26px/1.2 var(--font-display);
}

.prose h3 {
  margin: 24px 0 6px;
  font: 700 21px/1.25 var(--font-display);
}

.prose h2:first-child {
  margin-top: 8px;
}

.prose li + li {
  margin-top: 6px;
}

.prose table {
  width: 100%;
  margin: 12px 0;
  border-collapse: collapse;
  font-size: 15px;
}

.prose th,
.prose td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--surface-edge);
}

.prose th {
  background: var(--surface-alt);
}

.table-scroll {
  overflow-x: auto;
}

.not-found {
  padding: 48px 16px 64px;
  text-align: center;
}

.not-found p {
  margin: 16px 0 28px;
}