/* The product homepage (scripts/build-site.ts): the game's own look – steel, safety yellow,
   hazard tape, the stencil display face – on a static page. Colours mirror src/ui/styles.css. */
@font-face {
  font-family: 'Big Shoulders Stencil';
  font-weight: 800;
  font-display: swap;
  src: url('fonts/big-shoulders-stencil-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-weight: 500;
  font-display: swap;
  src: url('fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-weight: 500;
  font-display: swap;
  src: url('fonts/barlow-semi-condensed-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-weight: 700;
  font-display: swap;
  src: url('fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-weight: 700;
  font-display: swap;
  src: url('fonts/barlow-semi-condensed-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --steel-900: #16191d;
  --steel-800: #1d2126;
  --steel-700: #262b31;
  --steel-600: #323841;
  --text: #ecede8;
  --muted: #a2aab3;
  --safety: #f3c319;
  --ink: #1d2126;
  --cardboard: #c4935a;
  --display: 'Big Shoulders Stencil', 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --ui: 'Barlow Semi Condensed', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: 16px;
  --radius: 10px;
  --max: 1080px;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--steel-800);
}
body {
  margin: 0;
  background: var(--steel-800);
  color: var(--text);
  font: 500 1.125rem/1.5 var(--ui);
}
a {
  color: var(--safety);
}
a:focus-visible,
.button:focus-visible {
  outline: 3px solid #ffe070;
  outline-offset: 3px;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0 0 0.5em;
}
h2 {
  font-size: clamp(2rem, 6vw, 2.75rem);
}
h3 {
  font-size: 1.5rem;
}
main > section,
.memo,
.legal,
.top,
.foot {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
main > section {
  padding-block: 48px;
}

.tape {
  height: 14px;
  background: repeating-linear-gradient(-45deg, var(--safety) 0 14px, var(--ink) 14px 28px);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px;
}
.top__logo {
  font: 800 1.6rem var(--display);
  color: var(--text);
  text-decoration: none;
}
.top__logo span,
.hero__logo span {
  color: var(--safety);
}
.top__nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.top__nav > a {
  font-weight: 700;
  text-decoration: none;
}
.top__langs {
  display: flex;
  gap: 4px;
}
.top__langs a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 4px 6px;
  border-radius: 6px;
}
.top__langs a[aria-current] {
  color: var(--ink);
  background: var(--safety);
}

.hero {
  display: grid;
  gap: 32px;
  align-items: center;
  padding-block: 32px 56px;
}
@media (min-width: 760px) {
  .hero {
    grid-template-columns: 1.2fr 1fr;
  }
}
.hero__logo {
  font-size: clamp(3.5rem, 14vw, 6.5rem);
  margin: 0;
}
.hero__tagline {
  font: 800 clamp(1.5rem, 5vw, 2.25rem) var(--display);
  color: var(--safety);
  margin: 0 0 16px;
  letter-spacing: 0.04em;
}
.hero__lead {
  font-size: 1.3rem;
  max-width: 34ch;
  margin: 0 0 24px;
}
.hero__note {
  color: var(--muted);
  font-size: 1rem;
  margin-top: 12px;
}
.hero__phone {
  justify-self: center;
  max-width: 300px;
}

.button {
  display: inline-block;
  background: var(--safety);
  color: var(--ink);
  font: 800 1.35rem var(--display);
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: var(--radius);
  box-shadow: 0 4px 0 #b88f00;
}
.button:hover {
  filter: brightness(1.06);
}
.button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b88f00;
}

.phone {
  list-style: none;
  border: 10px solid var(--steel-900);
  border-radius: 30px;
  overflow: hidden;
  background: var(--steel-900);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
}
.phone img {
  display: block;
  width: 100%;
  height: auto;
}

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
.step {
  background: var(--steel-700);
  border-radius: var(--radius);
  padding: 20px;
  border-top: 4px solid var(--safety);
}
.step__n {
  font: 800 2.5rem var(--display);
  color: var(--safety);
}
.step p {
  margin: 0;
  color: var(--muted);
}

.shots {
  padding-inline: 0 !important;
  max-width: none !important;
}
.shots h2 {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shots__row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px var(--gutter) 24px;
  margin: 0;
  scrollbar-color: var(--steel-600) transparent;
}
.shots__row .phone {
  flex: 0 0 min(64vw, 240px);
  scroll-snap-align: center;
}
@media (min-width: 1100px) {
  .shots__row {
    justify-content: center;
  }
}

.shot {
  display: block;
  cursor: zoom-in;
}
.shot:focus-visible {
  outline: 3px solid var(--safety);
  outline-offset: -3px;
}

/* The screenshots large, as a carousel (site/site.js), phone first: an opaque stage, the close
   button in its own strip above the screenshot, swiping on touch screens; arrow buttons only where
   there is a mouse, beside the screenshot rather than on it. */
html:has(.viewer[open]) {
  overflow: hidden;
}
.viewer {
  --bar: 64px;
  --frame: 6px;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--steel-900);
  color: var(--text);
}
.viewer::backdrop {
  background: var(--steel-900);
}
.viewer__track {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.viewer__track::-webkit-scrollbar {
  display: none;
}
.viewer__slide {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: var(--bar) 8px 12px;
}
.viewer__slide figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.viewer__slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* The strip above, the caption below. */
  max-height: calc(100dvh - var(--bar) - 48px);
  border: var(--frame) solid var(--steel-700);
  border-radius: 20px;
}
.viewer__slide figcaption {
  color: var(--muted);
  font-size: 1rem;
  text-align: center;
}
.viewer__button {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--steel-700);
  color: var(--text);
  font: 700 2rem/1 var(--ui);
  cursor: pointer;
}
.viewer__button:hover,
.viewer__button:focus-visible {
  background: var(--safety);
  color: var(--ink);
}
.viewer__close {
  inset-block-start: 8px;
  inset-inline-end: 8px;
}
.viewer__prev,
.viewer__next {
  display: none;
  inset-block-start: 50%;
  translate: 0 -50%;
}
.viewer__prev {
  inset-inline-start: 24px;
}
.viewer__next {
  inset-inline-end: 24px;
}
[dir='rtl'] .viewer__prev,
[dir='rtl'] .viewer__next {
  scale: -1 1;
}
/* A mouse, and room for the arrows beside the screenshot. */
@media (hover: hover) and (pointer: fine) and (min-width: 600px) {
  .viewer {
    --bar: 72px;
    --frame: 10px;
  }
  .viewer__slide {
    padding-inline: 96px;
  }
  .viewer__slide img {
    border-color: var(--steel-800);
    border-radius: 30px;
  }
  .viewer__prev,
  .viewer__next {
    display: grid;
  }
  .viewer__close {
    inset-block-start: 12px;
    inset-inline-end: 24px;
  }
}

.worlds__count {
  color: var(--muted);
  margin-top: -8px;
}
.worlds__list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .worlds__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .worlds__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.world {
  background: var(--steel-700);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  border-inline-start: 6px solid var(--cardboard);
}
.world p {
  margin: 0 0 8px;
}
.world__n {
  font: 800 1rem var(--display);
  color: var(--muted);
  letter-spacing: 0.1em;
}
.world__levels {
  color: var(--muted);
  font-size: 0.95rem;
}
.world--food-factory {
  border-inline-start-color: #d9772e;
}
.world--steelworks {
  border-inline-start-color: #8e98a3;
}
.world--harbour {
  border-inline-start-color: #3c8dba;
}
.world--airport {
  border-inline-start-color: #2f5fb3;
}

.memo {
  margin-block: 16px 8px;
}
.memo figcaption {
  font: 800 0.95rem var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--safety);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px 4px 0 0;
}
.memo blockquote {
  margin: 0;
  background: #f4f1e8;
  color: var(--ink);
  padding: 24px;
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  font-size: 1.35rem;
  font-weight: 700;
  transform: rotate(-0.6deg);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.35);
}
.memo__sign {
  margin: 12px 0 0;
  font-size: 1rem;
  text-align: end;
  font-style: italic;
}
.memo__mail {
  color: var(--muted);
  font-size: 1rem;
  margin: 18px 0 0;
}

.next__list {
  padding-inline-start: 1.2em;
  margin: 0 0 28px;
}
.next__list li {
  margin-bottom: 10px;
}
.next__list li::marker {
  color: var(--safety);
}

.legal {
  padding-block: 32px 56px;
  max-width: 760px;
}
.legal h1 {
  font-size: clamp(2.25rem, 8vw, 3rem);
}
.legal h2 {
  font-size: 1.6rem;
  margin-top: 1.4em;
}
.legal__updated {
  color: var(--muted);
}

.foot {
  padding-block: 0 32px;
  color: var(--muted);
  font-size: 1rem;
}
.foot .tape {
  margin-bottom: 20px;
  margin-inline: calc(var(--gutter) * -1);
}
.foot__made {
  margin: 4px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .button:active {
    transform: none;
  }
}