@font-face { font-family: 'Lilita One'; src: url(data:font/woff2;base64,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) format('woff2'); font-display: swap; }
/* fruitfugitives.com: the game's menu as a web page. The same awning, wood, gingham cloth, chips
   and green button as the app (src/style.css: .hud-awning, .map-logo, .map, .map-total, .map-play).
   Depth is one ink outline, a light bevel and a soft shadow: never a hard dark edge underneath.
   The @font-face for Lilita One is put in front of this file by site/build.mjs. */
:root {
  color-scheme: light;
  --ink: #3d2416;
  --cream: #fff8ea;
  --wall: #fff8ee;
  --paper: #fffdf8;
  --muted: #7a5a44;
  --red: #e8553e;
  --stripe: #fff3dd;
  --wood: #c98a4b;
  --wood-light: #ecb87f;
  --wood-dark: #99602e;
  --gold: #ffc933;
  --green-hi: #8fe07a;
  --green: #4fb84a;
  --gingham: rgba(232, 85, 62, 0.22);
  --shadow: 0 12px 28px rgba(61, 36, 22, 0.18);
  --shadow-s: 0 5px 12px rgba(61, 36, 22, 0.2);
  --bevel: inset 0 3px 0 rgba(255, 255, 255, 0.55);
  --font: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Lilita One', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --gutter: max(20px, calc((100% - 1100px) / 2));
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
}

img {
  max-width: 100%;
}

a {
  color: #b5352b;
  text-underline-offset: 2px;
}

a:focus-visible,
summary:focus-visible {
  outline: 3px solid #2f8fc4;
  outline-offset: 2px;
  border-radius: 8px;
}

/* --- Awning and header ------------------------------------------------------------- */

/* The striped market awning with its scalloped edge, as over every level. */
.awning {
  position: relative;
  z-index: 3;
  height: 58px;
  filter: drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 5px 4px rgba(61, 36, 22, 0.3));
  pointer-events: none;
}

.awning::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.12)),
    repeating-linear-gradient(90deg, var(--red) 0 36px, var(--stripe) 36px 72px);
  -webkit-mask:
    radial-gradient(circle 18px at 18px 0, #000 98%, transparent 100%) 0 100% / 36px 18px repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - 18px) no-repeat;
  mask:
    radial-gradient(circle 18px at 18px 0, #000 98%, transparent 100%) 0 100% / 36px 18px repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - 18px) no-repeat;
}

.top {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 6px var(--gutter) 0;
}

.brand img {
  display: block;
  height: 52px;
  width: auto;
  transform: rotate(-2deg);
}

.links {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.links a {
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
}

.links a:hover {
  background: rgba(232, 85, 62, 0.12);
}

/* The language menu: a chip that opens a small card. */
.lang {
  position: relative;
}

.lang summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 5px 12px 5px 9px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  box-shadow: var(--bevel), var(--shadow-s);
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

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

.lang svg {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}

.chev {
  width: 7px;
  height: 7px;
  margin: -3px 0 0 2px;
  border-right: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.lang[open] .chev {
  margin-top: 3px;
  transform: rotate(225deg);
}

.lang nav {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: grid;
  min-width: 190px;
  padding: 6px;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.lang nav a,
.lang nav span {
  /* 44 px high: the smallest target a finger hits safely. */
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.lang nav a:hover {
  background: #fff0d6;
}

.lang nav span {
  background: var(--ink);
  color: var(--cream);
}

/* --- Shared pieces ------------------------------------------------------------------ */

.band {
  position: relative;
  padding: 88px var(--gutter);
}

.title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 52px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
}

.sub {
  max-width: 660px;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 19px;
  text-align: center;
  text-wrap: pretty;
}

/* A game screen in a phone: the ink outline of the game around a dark bezel. */
.phone {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 1299;
  padding: 7px;
  border: 3px solid var(--ink);
  border-radius: 38px;
  background: linear-gradient(145deg, #5a3a26, #2b1a10);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12), var(--shadow);
}

.phone img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  object-fit: cover;
}

/* The store trailer in a phone (clips3): the same frame as the screenshots, the video fills it. */
.phone video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  object-fit: cover;
  background: var(--ink);
}

.film-phone {
  width: min(300px, 80%);
  margin: 40px auto 0;
}

/* The page's own play button on the poster: the round green button of the game. */
.film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--green-hi), var(--green));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), 0 10px 22px rgba(61, 36, 22, 0.4);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.film-play[hidden] {
  display: none;
}

.film-play span {
  width: 0;
  height: 0;
  margin-left: 8px;
  border-style: solid;
  border-width: 17px 0 17px 28px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 0 0 var(--ink)) drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink));
}

.film-play:hover {
  filter: brightness(1.06);
}

.film-play:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 4px;
}

/* The green button from the map. A promise until the stores have the app, so it does not pulse. */
.play {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 9px 24px 10px 10px;
  border: 3px solid var(--ink);
  border-radius: 26px;
  background: linear-gradient(to bottom, var(--green-hi), var(--green));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), 0 12px 22px rgba(61, 36, 22, 0.28);
  color: #fff;
  text-align: left;
}

.play-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--cream);
  overflow: hidden;
}

.play-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.play-text {
  display: flex;
  flex-direction: column;
}

.play-text b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.05;
  -webkit-text-stroke: 6px var(--ink);
  paint-order: stroke fill;
}

.play-text small {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  color: #173d12;
}

/* Once the stores have the app: their official badges instead of the green button (site13). The files are
   Apple's and Google's own. Google's picture carries its clear space inside (a quarter of the badge's
   height all around), Apple's does not, so the Apple badge gets the same space as margin and both
   badges stand equally high. */
.stores {
  --badge: 56px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.store {
  display: block;
  border-radius: 10px;
}

.store img {
  display: block;
  width: auto;
}

.store.apple img {
  height: var(--badge);
  margin: calc(var(--badge) / 4);
}

.store.google img {
  height: calc(var(--badge) * 1.5);
}

/* A counter chip from the map header. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 18px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: var(--cream);
  box-shadow: var(--bevel), var(--shadow-s);
  font-weight: 900;
  font-size: 17px;
}

.chip i {
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  color: var(--gold);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}

/* A numbered disc as on the map's places. */
.disc {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--c, var(--red));
  color: #fff;
  font-family: var(--display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
}

/* --- Home: hero ---------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 32px;
  padding: 0 var(--gutter) 56px;
  /* The sunburst is wider than a phone; the strings above must still reach the awning. */
  overflow-x: clip;
}

.hero-text {
  /* From the top, not centred beside the phone: the sign must not move with the length of the text. */
  align-self: start;
  text-align: center;
}

.hero h1 {
  margin: 0;
}

/* The sign hangs on two strings from the awning (logo-hanging.png: the strings take the top
   21.5 % of its width). The negative margin starts the picture behind the awning (awning 58 px,
   header 62 px), so the strings always reach it. It swings out once about a point above it. */
.hero .logo {
  position: relative;
  z-index: 2;
  display: block;
  width: min(520px, 94%);
  height: auto;
  margin: -74px auto 0;
  transform-origin: 50% -40%;
  animation: logo-swing 1.6s ease-out both;
}

@keyframes logo-swing {
  0% {
    transform: rotate(-4deg);
  }

  28% {
    transform: rotate(3deg);
  }

  52% {
    transform: rotate(-1.8deg);
  }

  74% {
    transform: rotate(1deg);
  }

  100% {
    transform: rotate(0);
  }
}

.tagline {
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 10px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--ink);
  letter-spacing: 0.01em;
}

.lead {
  max-width: 560px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 19px;
  text-wrap: pretty;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
  margin-top: 28px;
}

.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  padding: 48px 0 24px;
}

/* The sunburst from the win stage, fading out at its rim. */
.rays {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 760px;
  height: 760px;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 233, 168, 0.9) 0 18%, rgba(255, 233, 168, 0) 60%),
    repeating-conic-gradient(rgba(255, 196, 77, 0.38) 0 9deg, rgba(255, 196, 77, 0) 9deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 68%);
  mask: radial-gradient(circle, #000 30%, transparent 68%);
  animation: rays 80s linear infinite;
  pointer-events: none;
}

@keyframes rays {
  to {
    rotate: 360deg;
  }
}

.hero-art .phone {
  width: min(310px, 72vw);
  transform: rotate(2deg);
}

.hero-fugi,
.hero-mixtor {
  position: absolute;
  z-index: 2;
  height: auto;
  filter: drop-shadow(0 8px 10px rgba(61, 36, 22, 0.25));
}

.hero-fugi {
  left: calc(50% - min(310px, 72vw) / 2 - 64px);
  bottom: 8%;
  width: 136px;
  animation: bob 3.2s ease-in-out infinite;
}

.hero-mixtor {
  right: calc(50% - min(310px, 72vw) / 2 - 64px);
  top: 40%;
  width: 118px;
  transform: rotate(6deg);
}

@keyframes bob {
  50% {
    transform: translateY(-10px) rotate(-3deg);
  }
}

/* The cast on a shelf board right across the page, Mixtor glaring from the end. */
.shelf {
  position: relative;
  overflow: hidden;
  padding-top: 8px;
}

.shelf-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  padding: 0 16px;
  margin-bottom: -6px;
}

.shelf-row img {
  position: relative;
  flex: none;
  height: 72px;
  width: auto;
}

.shelf-row .shelf-mixtor {
  height: 92px;
  margin-left: 18px;
}

.shelf::after {
  content: '';
  display: block;
  height: 22px;
  border-block: 3px solid var(--ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 140px, rgba(122, 70, 30, 0.12) 140px 142px),
    linear-gradient(#f2c48d, #d99c5c 60%, var(--wood));
  box-shadow: 0 8px 14px rgba(61, 36, 22, 0.22);
}

/* --- Home: how to play ---------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}

.steps li {
  text-align: center;
}

.steps .phone {
  width: min(250px, 100%);
  margin: 0 auto;
}

.steps li:nth-child(1) .phone {
  transform: rotate(-1.5deg);
}

.steps li:nth-child(3) .phone {
  transform: rotate(1.5deg);
}

.steps h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 6px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.15;
}

.steps p {
  max-width: 300px;
  margin: 0 auto;
  color: var(--muted);
}

/* --- Home: features on the gingham cloth ------------------------------------------------- */

.cloth {
  background:
    linear-gradient(90deg, var(--gingham) 50%, transparent 50%) 0 0 / 44px 44px,
    linear-gradient(var(--gingham) 50%, transparent 50%) 0 0 / 44px 44px,
    #fff;
  border-block: 3px solid var(--ink);
}

.cloth .title {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 10px 28px 12px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--bevel), var(--shadow);
}

.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 76px;
}

.card {
  position: relative;
  padding: 18px 18px 24px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--bevel), var(--shadow);
}

.card-icon {
  position: absolute;
  z-index: 1;
  top: -44px;
  left: 18px;
  width: auto;
  height: 84px;
  filter: drop-shadow(0 6px 6px rgba(61, 36, 22, 0.2));
}

/* The card's moving picture: a window into the shelf, framed like the game's panel. */
.loop {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0 0 16px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--stripe);
  overflow: hidden;
}

.loop img,
.loop video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.15;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* --- Home: worlds ------------------------------------------------------------------------ */

.worlds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  /* The two tilted phones may reach past a narrow screen. */
  overflow-x: clip;
}

.worlds .title,
.worlds .sub {
  text-align: left;
  margin-inline: 0;
}

.worlds-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
}

.worlds-art .big {
  position: relative;
  z-index: 2;
  width: min(270px, 62vw);
}

.worlds-art .side {
  position: absolute;
  width: min(210px, 46vw);
}

.worlds-art .left {
  left: calc(50% - min(270px, 62vw) / 2 - min(210px, 46vw) * 0.62);
  transform: rotate(-9deg) translateY(30px);
}

.worlds-art .right {
  right: calc(50% - min(270px, 62vw) / 2 - min(210px, 46vw) * 0.62);
  transform: rotate(9deg) translateY(30px);
}

.world-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.world-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--bevel), var(--shadow-s);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
}

/* --- Home: hero and villain --------------------------------------------------------------- */

.duo {
  background: linear-gradient(#fff3dd, var(--wall));
  border-top: 3px solid var(--ink);
}

.duo-cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 20px;
  max-width: 900px;
  margin: 96px auto 0;
}

.hero-card {
  position: relative;
  padding: 96px 28px 28px;
  border: 3px solid var(--ink);
  border-radius: 26px;
  text-align: center;
  box-shadow: var(--bevel), var(--shadow);
}

.hero-card.fugi {
  background: linear-gradient(#eefbe6, #d6f1c8);
}

.hero-card.mixtor {
  background: linear-gradient(#ffeae4, #ffd3c9);
}

.hero-card img {
  position: absolute;
  top: -70px;
  left: 50%;
  width: auto;
  height: 150px;
  translate: -50% 0;
  filter: drop-shadow(0 8px 10px rgba(61, 36, 22, 0.25));
}

.hero-card .tag {
  display: inline-block;
  margin: 0;
  padding: 2px 12px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-card h3 {
  margin: 8px 0 6px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
}

.hero-card p:last-child {
  margin: 0;
  color: var(--muted);
}

.vs {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: var(--bevel), var(--shadow-s);
  font-family: var(--display);
  font-size: 26px;
  color: #fff;
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  align-self: center;
  transform: rotate(-8deg);
}

/* --- Home: the deal, on a board from the shelf ------------------------------------------- */

.deal {
  padding-top: 24px;
}

.board {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 40px 34px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background:
    repeating-linear-gradient(178deg, transparent 0 9px, rgba(122, 70, 30, 0.08) 9px 10px, transparent 10px 23px, rgba(122, 70, 30, 0.05) 23px 24px),
    linear-gradient(#f2c48d, #d99c5c 60%, var(--wood));
  box-shadow: inset 0 3px 0 rgba(255, 244, 222, 0.55), 0 14px 26px rgba(61, 36, 22, 0.25);
  text-align: center;
  transform: rotate(-1deg);
}

/* A brass eyelet in each top corner, as on the title sign. */
.eyelet {
  position: absolute;
  top: 12px;
  left: 14px;
  width: 16px;
  height: 16px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle, #4a2a14 0 2px, var(--ink) 2px 3px, transparent 3.5px), radial-gradient(circle at 35% 30%, #f6d77a, #c9922a);
}

.eyelet + .eyelet {
  left: auto;
  right: 14px;
}

.board h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 44px);
  line-height: 1.05;
  color: #fff;
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
  text-wrap: balance;
}

.board > p {
  max-width: 560px;
  margin: 14px auto 0;
  font-size: 19px;
  font-weight: 700;
}

.ticks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 6px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  font-weight: 900;
  font-size: 15px;
}

.ticks li::before {
  content: '';
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat,
    var(--green);
}

/* --- Home: last call, under the win stage's sun -------------------------------------------- */

/* Who made the game: a quiet band before the last call; the deal above and the call below carry the colour. */
.maker {
  padding-top: 0;
}

.maker a {
  color: var(--ink);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.final {
  overflow: hidden;
  margin-top: 40px;
  border-top: 3px solid var(--ink);
  --sun-y: 163px;
  background: radial-gradient(circle at 50% var(--sun-y), #ffe9a8 0%, #ffd266 40%, #f6a623 100%);
  text-align: center;
}

/* Drawn on the band itself and not on a turning square, so the rays reach every edge at any width.
   They start at Milaki's middle (--sun-y: the band's top padding plus half his height). */
@property --ray {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from var(--ray) at 50% var(--sun-y), rgba(255, 255, 255, 0.2) 0 8deg, rgba(255, 255, 255, 0) 8deg 16deg);
  animation: final-rays 120s linear infinite;
  pointer-events: none;
}

@keyframes final-rays {
  to {
    --ray: 360deg;
  }
}

.final > * {
  position: relative;
}

.final-fugi {
  display: block;
  width: auto;
  height: 150px;
  margin: 0 auto 10px;
  filter: drop-shadow(0 10px 10px rgba(61, 36, 22, 0.25));
  animation: bob 3.2s ease-in-out infinite;
}

.final .title {
  color: #fff;
  -webkit-text-stroke: 9px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--ink);
  margin-bottom: 30px;
}

/* --- Text pages: privacy, support, legal notice -------------------------------------------- */

main:not(.home) {
  padding: 36px 16px 72px;
  margin-top: 18px;
  border-top: 3px solid var(--ink);
  background:
    linear-gradient(90deg, var(--gingham) 50%, transparent 50%) 0 0 / 44px 44px,
    linear-gradient(var(--gingham) 50%, transparent 50%) 0 0 / 44px 44px,
    #fff;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 40px 36px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--bevel), var(--shadow);
}

.page h1 {
  margin: 22px 0 6px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 6vw, 44px);
  line-height: 1.1;
}

.page h2 {
  margin: 32px 0 6px;
  font-size: 22px;
  line-height: 1.25;
}

.page h3 {
  margin: 20px 0 2px;
  font-size: 17px;
}

.page p,
.page ul {
  margin: 6px 0;
}

.page .meta {
  color: var(--muted);
  font-size: 15px;
}

.page address {
  font-style: normal;
}

.contact {
  /* A long mail address must not push out of the card on a small phone. */
  overflow-wrap: anywhere;
  margin: 20px 0;
  padding: 14px 18px;
  border: 2.5px dashed var(--wood);
  border-radius: 14px;
  background: #fff3df;
}

.licenses {
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Changelog */
.release ul {
  padding-left: 22px;
}

/* Press kit */
.download {
  display: inline-block;
  margin: 8px 0;
  padding: 11px 20px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: linear-gradient(to bottom, var(--green-hi), var(--green));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), var(--shadow-s);
  color: #173d12;
  font-weight: 900;
  text-decoration: none;
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 10px 0;
}

.facts dt {
  font-weight: 800;
}

.facts dd {
  margin: 0;
  color: var(--muted);
}

.assets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}

.assets.small {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  align-items: end;
}

.assets a {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.assets img {
  display: block;
  width: 100%;
  height: auto;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: var(--cream);
}

.assets.small img {
  height: 120px;
  object-fit: contain;
  padding: 10px;
}

.assets span {
  display: block;
  margin-top: 8px;
  font-weight: 800;
  line-height: 1.25;
}

.assets small {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

/* /get/: one screen under the sun, whatever the phone */
.band.get {
  --sun-y: 46%;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: calc(100dvh - 58px);
  margin-top: 0;
  padding-block: 28px;
  border-top: 0;
}

.get .final-fugi {
  height: min(150px, 20dvh);
}

.get-logo {
  width: min(320px, 78vw);
  height: auto;
  filter: drop-shadow(0 8px 10px rgba(61, 36, 22, 0.25));
}

.get .title {
  margin-bottom: 18px;
}

.get p {
  margin: 0;
}

.get-stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.get-stores[hidden],
.get .play[hidden] {
  display: none;
}

a.play {
  padding-left: 22px;
  text-decoration: none;
}

.get-home {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 14px;
  color: var(--ink);
  font-weight: 800;
}

/* --- Footer: the cupboard under the shelf ----------------------------------------------- */

footer {
  border-top: 3px solid var(--ink);
  background:
    repeating-linear-gradient(178deg, transparent 0 11px, rgba(0, 0, 0, 0.05) 11px 12px, transparent 12px 27px),
    linear-gradient(#925629, #7f4b25);
  color: #fbe6c8;
  text-align: center;
  font-size: 15px;
}

.foot {
  padding: 40px var(--gutter) 44px;
}

.foot-logo img {
  display: block;
  width: 170px;
  height: auto;
  margin: 0 auto 18px;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

footer nav a {
  padding: 8px 16px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

footer nav a:hover {
  background: #fff;
}

footer p {
  margin: 18px 0 0;
}

/* The stores' trademark lines, once their badges show. */
footer .marks {
  max-width: 760px;
  margin: 12px auto 0;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.8;
}

/* --- Smaller screens ----------------------------------------------------------------------- */

/* The shelf is wider than the screen: keep Mixtor in view, the fruit run off to the left. */
@media (max-width: 1200px) {
  .shelf-row {
    justify-content: flex-end;
  }
}

@media (max-width: 980px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 64px;
  }

  .worlds {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .worlds .title,
  .worlds .sub {
    text-align: center;
    margin-inline: auto;
  }

  .world-list {
    max-width: 560px;
    margin-inline: auto;
  }
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .links {
    display: none;
  }

  .lang {
    margin-left: auto;
  }

  /* One column: the home page's only header item, the language chip, sits on the awning like the
     game's gear button, and the sign hangs right under the awning without hitting it. */
  .top.on-home {
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    min-height: 0;
    padding: 0 10px;
  }

  .hero .logo {
    margin-top: calc(min(520px, 94%) * -0.215 + 14px);
  }

}

@media (max-width: 640px) {
  /* Swiped sideways, one step at a time, instead of three phones stacked. */
  .steps {
    display: flex;
    gap: 18px;
    margin: 40px calc(-1 * var(--gutter)) 0;
    padding: 0 var(--gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }

  .steps::-webkit-scrollbar {
    display: none;
  }

  .steps li {
    flex: 0 0 min(78%, 300px);
    scroll-snap-align: center;
  }

  .steps .phone {
    width: min(220px, 100%);
  }

  .duo-cards {
    grid-template-columns: 1fr;
    gap: 96px;
    max-width: 460px;
  }

  .vs {
    display: none;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  .awning {
    height: 44px;
  }

  .brand img {
    height: 40px;
  }

  .band {
    padding-block: 64px;
  }

  .final {
    --sun-y: 139px;
  }

  .band.get {
    --sun-y: 46%;
    min-height: calc(100dvh - 44px);
  }

  .sub,
  .lead {
    font-size: 17px;
  }

  .hero-fugi {
    width: 96px;
    left: 2px;
  }

  .hero-mixtor {
    width: 84px;
    right: 2px;
  }

  .shelf-row {
    gap: 8px;
  }

  .shelf-row img {
    height: 52px;
  }

  .shelf-row .shelf-mixtor {
    height: 66px;
    margin-left: 8px;
  }

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

  .worlds-art {
    min-height: 0;
    padding: 10px 0 20px;
  }

  .world-list {
    grid-template-columns: 1fr;
  }

  .board {
    padding: 34px 20px 26px;
  }

  .page {
    padding: 6px 20px 26px;
  }

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

  .facts dd {
    margin-bottom: 8px;
  }

  .assets {
    grid-template-columns: repeat(2, 1fr);
  }

  .play-text b {
    font-size: 22px;
  }
}

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

  .hero .logo,
  .rays,
  .final::before,
  .hero-fugi,
  .final-fugi {
    animation: none;
  }
}