/* Mile Marker Games. The page is a road: highway-sign green, sign legend cream and centre-line yellow on warm asphalt,
   set in Overpass (the open-source take on the US highway sign face). Mallopolis's name keeps its own mall-sign face. */

@font-face { font-family: "Overpass"; src: url("/assets/fonts/overpass-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("/assets/fonts/overpass-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("/assets/fonts/overpass-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Righteous"; src: url("/assets/fonts/righteous-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --asphalt: #272523;
  --road: #1c1b1a;
  --sign: #02653b;
  --sign-lit: #087a4a;
  --legend: #fcf1da;
  --paint: #f2b632;
  --text: #e9e2d4;
  --muted: #aaa295;
  --post: #8d8c88;

  --road-w: clamp(52px, 8vw, 116px);
  --shoulder: clamp(64px, 7.5vw, 104px);
  --pad: clamp(16px, 4vw, 56px);

  /* The content's column: it grows on big screens, and sits in the middle of the room to the right of the road
     (never closer to the road than its shoulder). The mile markers stay on the shoulder wherever it sits. */
  --content-max: clamp(1180px, 70vw, 1560px);
  --content-left: max(calc(var(--road-w) + var(--shoulder)), calc(var(--road-w) + (100vw - var(--road-w) - var(--content-max)) / 2));
}

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

html { scroll-behavior: smooth; }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--asphalt);
  color: var(--text);
  font: 400 1.125rem/1.6 "Overpass", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--legend); }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: calc(var(--road-w) + 12px); top: 12px; z-index: 10;
  padding: 10px 16px; background: var(--sign); color: var(--legend); font-weight: 800; border-radius: 8px;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ─── The road down the left of the page, and the car on it ─── */

.road {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--road-w);
  background:
    /* the centre line, dashed */
    repeating-linear-gradient(180deg, var(--paint) 0 46px, transparent 46px 104px) center / 5px 100% no-repeat,
    /* white edge lines */
    linear-gradient(90deg, transparent 7%, rgba(252, 241, 218, 0.85) 7% 9.5%, transparent 9.5% 90.5%, rgba(252, 241, 218, 0.85) 90.5% 93%, transparent 93%),
    var(--road);
  box-shadow: inset -10px 0 18px -12px rgba(0, 0, 0, 0.6);
}

.car {
  --car-w: calc(var(--road-w) * 0.32);
  position: fixed;
  z-index: 2;
  top: 56vh;
  left: calc(var(--road-w) * 0.29 - var(--car-w) / 2);
  width: var(--car-w);
  height: auto;
  transform: rotate(180deg); /* nose down the page: driving on the right, so the left lane as we look at it */
  filter: drop-shadow(0 -6px 6px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

main {
  margin-left: var(--content-left);
  padding-right: var(--pad);
  max-width: var(--content-max);
}

/* ─── The hero: the studio's marker, and a distance sign to the games ─── */

.hero {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) 1.2fr;
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  min-height: min(100vh, 920px);
  padding: 40px 0 72px;
}

.mark {
  position: relative;
  width: 100%;
  max-width: clamp(300px, 28vw, 560px);
  aspect-ratio: 1;
}

.mark-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The marker's number rolls like an odometer and stops on the painted 1, as on the games' studio card. */
.mark-window {
  position: absolute;
  left: 37.01%;
  top: 24.32%;
  width: 25.98%;
  height: 28.32%;
  overflow: hidden;
  container-type: size;
}

.mark-reel {
  display: flex;
  flex-direction: column;
  height: 1500%;
  animation: roll 1.15s cubic-bezier(0.33, 1, 0.68, 1) 0.4s both;
}

.mark-reel > * {
  flex: 0 0 calc(100% / 15);
  width: 100%;
  min-height: 0;
}

/* Sized from Overpass's own metrics to the painted 1: cap height 0.903 of the window, its baseline 0.0485 above the
   window's bottom (capHeight 1400 and ascent 1766 / descent 766 of 2000 units). */
.mark-reel span {
  display: block;
  color: #faefd8;
  font-weight: 800;
  font-size: 129cqh;
  line-height: 100cqh;
  text-align: center;
  transform: translateY(12.9cqh);
}

.mark-reel img { display: block; height: calc(100% / 15); }

.mark-name { animation: wipe 0.45s ease-out 1.7s both; }

@keyframes roll { from { transform: translateY(0); } to { transform: translateY(calc(-13 * 100% / 15)); } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.hero-copy h1 {
  margin: 0;
  max-width: 17ch;
  color: var(--legend);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.6vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
}

.lede {
  max-width: 44ch;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
}

/* A green guide sign, the kind that lists the next places and how far: here, our games. */
.guide {
  position: relative;
  display: inline-block;
  margin-top: 48px;
  margin-bottom: 64px;
  padding: 9px;
  background: var(--sign);
  border-radius: 22px;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.38);
}

.guide::before,
.guide::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 100%;
  width: 14px;
  height: 64px;
  background: linear-gradient(90deg, #6f6e6a, var(--post) 40%, #a9a8a3 60%, #6f6e6a);
}
.guide::before { left: 22%; }
.guide::after { right: 22%; }

.guide-face {
  display: grid;
  gap: 2px;
  min-width: min(clamp(440px, 28vw, 560px), calc(100vw - var(--road-w) - var(--shoulder) - var(--pad) - 18px));
  padding: 16px clamp(18px, 3vw, 32px) 12px;
  border: 4px solid var(--legend);
  border-radius: 15px;
}

.guide a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 48px;
  color: var(--legend);
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(1.6rem, 2.4vw, 3rem);
  line-height: 1.3;
}

.guide a:hover .guide-name {
  text-decoration: underline;
  text-decoration-color: var(--paint);
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}

.guide-mile { font-variant-numeric: tabular-nums; }

/* ─── A stop on the road: one game ─── */

.stop {
  position: relative;
  padding: clamp(72px, 10vw, 128px) 0 clamp(48px, 6vw, 80px);
}

/* The mile marker on the road's shoulder beside each game. */
.marker {
  position: absolute;
  top: clamp(72px, 10vw, 128px);
  left: calc(var(--road-w) + (var(--shoulder) - 44px) / 2 - var(--content-left));
  display: grid;
  justify-items: center;
  width: 44px;
  padding: 7px 0 4px;
  background: var(--sign);
  border: 3px solid var(--legend);
  border-radius: 7px;
  box-shadow: 0 0 0 3px var(--sign), 0 10px 18px rgba(0, 0, 0, 0.4);
  color: var(--legend);
  line-height: 1;
}
.marker span { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; }
.marker b { font-size: 1.9rem; font-weight: 800; margin-top: 4px; }
.marker::after {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  width: 8px;
  height: 46px;
  background: linear-gradient(90deg, #6f6e6a, var(--post) 45%, #a9a8a3 60%, #6f6e6a);
}

.stop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin-bottom: 28px;
}

.stop-head h2 { flex: 0 1 auto; margin: 0; }

.pc-logo { display: block; width: 460px; max-width: 100%; height: auto; }

.status {
  margin: 0;
  padding: 5px 14px 3px;
  border: 2px solid currentColor;
  border-radius: 999px;
  color: var(--paint);
  font-size: 0.95rem;
  font-weight: 600;
}

.feature { position: relative; margin: 0; }

.feature video,
.feature img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.42);
}

.feature figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.95rem;
}

.sound {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 9px 18px 7px;
  border: 2px solid var(--legend);
  border-radius: 999px;
  background: rgba(28, 27, 26, 0.78);
  color: var(--legend);
  font: 600 0.95rem "Overpass", system-ui, sans-serif;
  cursor: pointer;
}
.sound:hover { background: var(--sign); }

.stop-body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  margin-top: 44px;
}

.pitch p {
  max-width: 58ch;
  margin: 0 0 18px;
  font-size: 1.2rem;
}

.pitch .facts { color: var(--muted); font-size: 1rem; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Calls to action are little signs: green, with the legend border inset. */
.soon,
.steam {
  display: inline-block;
  padding: 13px 22px 10px;
  border-radius: 10px;
  background: var(--sign);
  box-shadow: inset 0 0 0 4px var(--sign), inset 0 0 0 6.5px var(--legend);
  color: var(--legend);
  font-weight: 800;
  text-decoration: none;
}
.steam:hover { background: var(--sign-lit); box-shadow: inset 0 0 0 4px var(--sign-lit), inset 0 0 0 6.5px var(--legend); }
.soon { opacity: 0.88; }

.points { display: grid; gap: 24px; margin: 0; }
.points dt { color: var(--legend); font-size: 1.2rem; font-weight: 800; }
.points dt::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 5px;
  margin: 0 12px 0.3em 0;
  background: var(--paint);
  vertical-align: middle;
}
.points dd { margin: 4px 0 0 30px; color: var(--muted); }

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}
.gallery-5 { grid-template-columns: repeat(5, 1fr); }

.gallery button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  cursor: zoom-in;
}
.gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.gallery button:hover img { transform: scale(1.04); filter: brightness(1.08); }

/* Mallopolis's name, in its own mall-sign face and colours. */
.mallo-title { display: flex; flex-direction: column; gap: 4px; }
.mallo-word {
  color: #1fb5ad;
  font-family: "Righteous", "Overpass", system-ui, sans-serif;
  font-size: clamp(3rem, 7.5vw, 5.6rem);
  font-weight: 400;
  line-height: 0.95;
  text-shadow: 0 5px 0 #3b2440;
}
.mallo-sub {
  color: #ff7a4d;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 800;
}

.stop-head h2 a { display: block; text-decoration: none; }
.stop-head h2 a.mallo-title { display: flex; }
a.mallo-title:hover .mallo-word { color: #33c9c0; }

/* A secondary sign: the same shape, outlined, for "More about". */
.more {
  display: inline-block;
  padding: 11px 20px 8px;
  border: 2.5px solid var(--legend);
  border-radius: 10px;
  color: var(--legend);
  font-weight: 800;
  text-decoration: none;
}
.more:hover { background: var(--sign); border-color: var(--sign); box-shadow: inset 0 0 0 2.5px var(--legend); }

/* ─── A game's own page ─── */

.crumbs { padding-top: 28px; font-size: 0.95rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--paint); font-weight: 800; }
.crumbs a { color: var(--legend); font-weight: 600; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-decoration-color: var(--paint); text-underline-offset: 4px; }

/* The name on the left, what it is on the right; one column on small screens. */
.game-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: clamp(32px, 5vw, 80px);
  padding: clamp(36px, 5vw, 64px) 0 44px;
}
.game-hero .marker { top: clamp(36px, 5vw, 64px); }
.game-hero h1 { grid-row: 1 / 3; margin: 0; }
.game-hero .lede-big { align-self: end; }
.game-hero .hero-meta { align-self: start; }
.big-logo { display: block; width: clamp(320px, 36vw, 620px); max-width: 100%; height: auto; }

.lede-big {
  max-width: 34ch;
  margin: 20px 0 0;
  color: var(--legend);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 600;
  line-height: 1.3;
}

.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 28px; }
.hero-meta .actions { margin-top: 0; }

.block { padding-top: clamp(56px, 7vw, 104px); }
.block .gallery { margin-top: 0; }

.prose { max-width: 68ch; }
.prose p { margin: 0 0 16px; font-size: 1.15rem; }

.prose h2,
.split h2,
.section-title {
  margin: 0 0 18px;
  color: var(--legend);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
}

/* A feature: the words on one side, a screenshot on the other, alternating down the page. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding-top: clamp(56px, 7vw, 104px);
}
.split.flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.split.flip .split-copy { order: 2; }
.split figure { margin: 0; }
.split img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4); }
.split-copy > p { margin: 0 0 18px; }

.dashes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.dashes li { position: relative; padding-left: 30px; }
.dashes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 18px;
  height: 5px;
  background: var(--paint);
}

.faq { max-width: 76ch; }
.faq details { border-top: 1px solid rgba(252, 241, 218, 0.14); }
.faq details:last-of-type { border-bottom: 1px solid rgba(252, 241, 218, 0.14); }
.faq summary {
  position: relative;
  padding: 18px 40px 16px 0;
  color: var(--legend);
  font-size: 1.15rem;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  color: var(--paint);
  font-size: 1.7rem;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--muted); }

/* The other game, as a card. */
.also { padding-bottom: clamp(56px, 8vw, 96px); }
.also-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 14px;
  background: var(--road);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.36);
  color: var(--text);
  text-decoration: none;
}
.also-card > img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.also-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: clamp(22px, 3.5vw, 44px); }
.also-name { font-size: clamp(2.4rem, 4.5vw, 3.6rem); }
.also-sub { margin-top: -4px; color: #ff7a4d; font-size: 1.2rem; font-weight: 800; }
.also-logo { display: block; width: 300px; max-width: 100%; height: auto; }
.also-line { max-width: 44ch; color: var(--muted); }
.also-go { margin-top: 6px; color: var(--legend); font-weight: 800; }
.also-go::after { content: " \2192"; color: var(--paint); }
.also-card:hover .also-go { text-decoration: underline; text-decoration-color: var(--paint); text-underline-offset: 5px; }

/* ─── The studio, and the end of the road ─── */

.studio { max-width: 62ch; padding: clamp(56px, 8vw, 96px) 0 clamp(72px, 10vw, 128px); }
.studio h2 { margin: 0 0 18px; color: var(--legend); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.15; }
.studio p { margin: 0 0 16px; }

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-left: var(--content-left);
  max-width: var(--content-max);
  padding: 28px var(--pad) 56px 0;
  border-top: 1px solid rgba(252, 241, 218, 0.14);
  color: var(--muted);
  font-size: 0.95rem;
}
.footer p { margin: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-nav a[aria-current] { color: var(--muted); text-decoration: none; }

/* ─── The screenshot viewer ─── */

.lightbox {
  width: min(1280px, 94vw);
  max-height: 94vh;
  padding: 14px;
  border: 0;
  border-radius: 14px;
  background: var(--road);
  color: var(--text);
}
.lightbox::backdrop { background: rgba(14, 13, 12, 0.86); }
.lightbox img { display: block; width: 100%; max-height: 76vh; object-fit: contain; border-radius: 8px; }
.lightbox-caption { margin: 12px 4px 0; color: var(--muted); font-size: 0.95rem; }
.lightbox-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.lightbox-nav button {
  padding: 9px 16px 7px;
  border: 2px solid var(--legend);
  border-radius: 999px;
  background: transparent;
  color: var(--legend);
  font: 600 0.95rem "Overpass", system-ui, sans-serif;
  cursor: pointer;
}
.lightbox-nav button:hover { background: var(--sign); }

/* ─── A plain page (the privacy policy) on the same road ─── */

.doc { max-width: 72ch; padding: 48px 0 80px; }
.doc .home { display: inline-flex; align-items: center; gap: 12px; color: var(--legend); text-decoration: none; font-weight: 800; }
.doc .home img { width: 64px; height: 64px; }
.doc h1 { margin: 40px 0 6px; color: var(--legend); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; }
.doc h2 { margin: 36px 0 8px; color: var(--legend); font-size: 1.35rem; }
.doc .meta { margin: 0 0 24px; color: var(--muted); }

/* ─── Smaller screens ─── */

@media (max-width: 900px) {
  :root { --road-w: 44px; --shoulder: 56px; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 24px; gap: 8px; }
  .mark { max-width: 300px; }
  .stop-body { grid-template-columns: 1fr; }
  .gallery, .gallery-5 { grid-template-columns: repeat(2, 1fr); }
  .marker { transform: scale(0.8); transform-origin: top center; }
  .game-hero { display: block; }
  .big-logo { width: 520px; }
  .split, .split.flip { grid-template-columns: 1fr; gap: 22px; }
  .split.flip .split-copy { order: 0; }
  .also-card { grid-template-columns: 1fr; }
  .also-card > img { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 520px) {
  :root { --road-w: 34px; --shoulder: 48px; }
  .guide a { gap: 24px; }
  .marker { transform: scale(0.7); }
  .sound { right: 10px; bottom: 10px; padding: 7px 12px 5px; font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mark-reel { animation: none; transform: translateY(calc(-13 * 100% / 15)); }
  .mark-name { animation: none; }
  .gallery img { transition: none; }
  .gallery button:hover img { transform: none; }
  .faq summary::after { transition: none; }
}