/* Paperhorn: the game's own paper world, on the web. Colours, font and art come straight from the app. */

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

:root {
  --ink: #1B2A4A;
  --ink-soft: #3C4B6B;
  --cream: #FFFBF2;
  --sun: #FFD23F;
  --sun-deep: #F5B700;
  --mist: #E5EEF2;
  --sky-deep: #16568A;
  --sky: #2E9CC4;
  --sky-pale: #CDEFE6;
  --field: #0F6A5B;
  --field-ink: #E9FFF6;
  --rose: #FF8FB1;
  --paper-shadow: 0 2px 1.5px rgba(27, 42, 74, .28), 0 7px 14px rgba(27, 42, 74, .2);
  --paper-shadow-lift: 0 4px 3px rgba(27, 42, 74, .24), 0 16px 28px rgba(27, 42, 74, .24);
  --cut: 14px 19px 13px 18px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --focus: var(--ink);
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Bricolage", ui-rounded, system-ui, sans-serif;
  font-variation-settings: "opsz" 16;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--sky-deep);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--sun); color: var(--ink); }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--sun-deep); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
/* the focus ring takes whichever of ink or cream reads against the surface it sits on */
.top, .play, .worlds, footer, .page-top { --focus: var(--cream); }
.card, .postcard, .doc, .skip { --focus: var(--ink); }
.store:focus-visible { outline-offset: 7px; border-radius: 22px; }

h1, h2, h3 {
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--cream); padding: 10px 16px; border-radius: var(--cut); box-shadow: var(--paper-shadow);
}
.skip:focus { top: 12px; }
.narrow-only { display: none; }


/* ---------- shared paper parts ---------- */

.card {
  background: var(--cream);
  border-radius: var(--cut);
  box-shadow: var(--paper-shadow);
}

.store {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 8px 26px 8px 14px;
  background: var(--sun); color: var(--ink);
  border-radius: 15px 19px 14px 18px;
  box-shadow: 0 0 0 4px var(--cream), var(--paper-shadow);
  font-weight: 800; font-size: 1.12rem; line-height: 1.1; text-decoration: none;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.store small { display: block; font-weight: 600; font-size: .78rem; letter-spacing: .01em; }
.store svg { width: 34px; height: 34px; flex: none; }
.store:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 0 0 4px var(--cream), var(--paper-shadow-lift); }
.store:active { transform: scale(.96); }

.wrap { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- top bar ---------- */

.top {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--gutter);
}
.top > a { display: inline-flex; align-items: center; min-height: 44px; }
.top img { width: clamp(150px, 18vw, 220px); }
.top nav { display: flex; gap: 6px; }
.top nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--cream);
  padding: 0 12px; border-radius: 12px; text-shadow: 0 1px 2px rgba(9, 40, 70, .35);
  transition: background-color .3s var(--ease-out);
}
.top nav a:hover { background: rgba(255, 251, 242, .16); }

/* ---------- hero: the wardrobe ---------- */

/* Spatial thesis: the headline leads, top left. The right of the sky stays open for rainbows and flights.
   The hills fill the rest of the first screen, and the wardrobe tray docks on the ground right under the unicorn,
   so the toy and its controls read as one thing. The whole hero fits the first screen. */
.hero {
  --edge: max(var(--gutter), (100% - 1180px) / 2);
  position: relative; isolation: isolate;
  min-height: max(100svh, 640px);
  background: #24A0C1 url("/assets/sky.webp") 22% 78% / cover no-repeat;
  display: grid; grid-template-columns: 100%; grid-template-rows: auto minmax(330px, 1fr);
  padding: 96px 0 0;
  overflow: hidden;
}

.hills { position: absolute; inset: auto 0 0 0; z-index: -1; height: clamp(160px, 24vw, 290px); pointer-events: none; }
.hills img { position: absolute; left: 50%; bottom: 0; width: max(100%, 1100px); max-width: none; transform: translateX(-50%); }
.hills .far { bottom: 34%; }
.hills .mid { bottom: 12%; }

/* top: the pitch and the wardrobe. below: the hills, where the unicorn lives */
.hero-grid { display: contents; }
.pitch { grid-row: 1; grid-column: 1; position: relative; z-index: 2; padding: 0 var(--edge); width: min(100%, 640px + 2 * var(--edge)); }
.lower {
  grid-row: 2; grid-column: 1; align-self: end; justify-self: end; position: relative; z-index: 2;
  margin: 0 var(--edge) clamp(16px, 2.6svh, 28px);
}

.band { grid-row: 2; grid-column: 1; position: relative; pointer-events: none; }
.band .hills { z-index: 0; height: clamp(180px, 22vw, 300px); }
.uni3d { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease-out); }
.has-3d .uni3d { opacity: 1; }

/* the picture stands in until the 3D unicorn arrives, and stays if it can't */
.poster {
  position: absolute; z-index: 1; left: 12%; bottom: clamp(70px, 9vw, 120px);
  width: auto; height: clamp(190px, 22vw, 250px); transform-origin: 50% 96%;
  filter: drop-shadow(0 10px 8px rgba(9, 50, 60, .28));
  transition: opacity .8s var(--ease-out);
}
.has-3d .poster { opacity: 0; }
.poster.hop { animation: hop .62s var(--ease-out); }
@keyframes hop {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(0) scale(1.04, .94); }
  45% { transform: translateY(-26px) scale(.98, 1.03); }
  75% { transform: translateY(0) scale(1.02, .97); }
  100% { transform: translateY(0) scale(1, 1); }
}
.bits { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.bit {
  position: absolute; left: var(--x); top: var(--y); width: 12px; height: 7px; border-radius: 2px;
  background: var(--c); box-shadow: 0 1px 1px rgba(27, 42, 74, .25);
  animation: bit 1s var(--ease-out) forwards;
}
@keyframes bit {
  from { transform: translate(0, 0) rotate(0); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; }
}

.wardrobe {
  display: grid; grid-template-columns: 15rem auto; align-items: center; gap: 22px;
  padding: 14px 18px 14px 22px; transform: rotate(-.5deg);
}
.wardrobe h2 { font-size: 1.2rem; letter-spacing: -.01em; }
.badges { display: grid; grid-template-columns: repeat(8, 52px); gap: 10px; margin: 0; padding: 0; list-style: none; }
.badge {
  appearance: none; border: 0; padding: 0; cursor: pointer; background: none;
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 3px var(--cream), var(--paper-shadow);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.badge img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.badge:hover { transform: translateY(-3px) rotate(-3deg); }
.badge[aria-pressed="true"] { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 3px var(--cream), 0 0 0 7px var(--sun), var(--paper-shadow-lift); }
.badge:focus-visible { outline-offset: 7px; border-radius: 50%; }
.worn { min-height: 4.2em; margin-top: 3px; }
.worn strong { display: block; font-size: 1rem; line-height: 1.3; }
.worn p { font-size: .9rem; line-height: 1.4; color: var(--ink-soft); }
.worn .earn { font-size: .84rem; margin-top: 1px; }

/* the headline is cut from paper strips, so it reads on every ring of the sky */
br.narrow { display: none; }
.pitch h1 {
  font-size: clamp(2.2rem, 3.9vw, 3.5rem); line-height: 1.3; letter-spacing: -.025em;
  text-wrap: nowrap; rotate: -1.4deg; transform-origin: 0 50%;
}
.strip {
  background: var(--cream); color: var(--ink);
  padding: .03em .22em .07em; border-radius: .1em .16em .08em .14em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  box-shadow: var(--paper-shadow);
}
.strip.rain { color: var(--sky-deep); margin-left: .35em; }
.lede-card { max-width: 31rem; margin: 22px 0 26px; padding: 18px 22px 16px; rotate: .5deg; }
.pitch .lede { font-size: clamp(1.08rem, 1.45vw, 1.24rem); font-weight: 500; }
.pitch .free {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding-top: 11px; border-top: 2px dashed #E3DCCB;
  font-weight: 700; font-size: .98rem; color: var(--field);
}
.pitch .free svg { width: 20px; height: 20px; flex: none; }

/* ---------- how it plays ---------- */

.play { background: var(--field); color: var(--field-ink); padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 9vw, 120px); }
.play h2 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 14ch; }
.play .intro { max-width: 46ch; margin: 18px 0 clamp(32px, 5vw, 56px); font-size: 1.2rem; color: #CDEFE3; }
.shot { position: relative; margin: 0; padding: 10px; transform: rotate(.4deg); }
.shot img { border-radius: 9px 12px 8px 11px; width: 100%; }
.tag {
  position: absolute; left: var(--x); top: var(--y);
  background: var(--sun); color: var(--ink); font-weight: 800; font-size: .95rem; line-height: 1.15;
  padding: 8px 12px; border-radius: 10px 13px 9px 12px; box-shadow: var(--paper-shadow);
  max-width: 15ch; transform: rotate(var(--r, -2deg));
}
.tag::before {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--cream); box-shadow: 0 0 0 4px var(--sun), var(--paper-shadow);
  left: var(--px, -26px); top: var(--py, 50%); translate: 0 -50%;
}
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; list-style: none; }
.steps h3 { font-size: 1.35rem; color: #fff; margin-bottom: 6px; line-height: 1.15; letter-spacing: -.01em; }
.steps p { color: #CDEFE3; }

/* ---------- worlds ---------- */

.worlds { background: var(--sky-deep); color: var(--cream); padding: clamp(56px, 8vw, 110px) 0; overflow: hidden; }
.worlds-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; }
.worlds h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
.worlds-head p { max-width: 44ch; color: #D6ECF5; font-size: 1.15rem; }
.cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(22px, 3vw, 40px) clamp(18px, 2.4vw, 32px);
  margin: clamp(36px, 5vw, 60px) 0 0; padding: 0; list-style: none;
}
.postcard {
  background: var(--cream); color: var(--ink); padding: 8px 8px 12px;
  border-radius: 6px 8px 5px 7px; box-shadow: var(--paper-shadow);
  transform: rotate(var(--r, 0deg));
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.postcard:hover { transform: rotate(0deg) translateY(-6px) scale(1.03); box-shadow: var(--paper-shadow-lift); }
.postcard img { width: 100%; aspect-ratio: 1024 / 518; object-fit: cover; border-radius: 3px; }
.postcard div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 4px 0; }
.postcard h3 { font-size: 1.08rem; letter-spacing: -.01em; }
.postcard .note { font-size: .78rem; font-weight: 800; padding: 3px 8px; border-radius: 99px; white-space: nowrap; background: var(--mist); }
.postcard .note.free { background: var(--sun); }
.cards li:nth-child(4n+1) { --r: -1.6deg; }
.cards li:nth-child(4n+2) { --r: 1.2deg; }
.cards li:nth-child(4n+3) { --r: -.6deg; }
.cards li:nth-child(4n+4) { --r: 1.8deg; }
.cards .closing {
  display: grid; place-items: center; text-align: center; padding: 18px;
  border: 3px dashed rgba(255, 251, 242, .45); border-radius: 14px 18px 13px 17px; color: var(--cream);
}
.cards .closing img { width: 60%; margin: 0 auto 8px; }
.cards .closing p { font-weight: 700; font-size: 1rem; }

/* ---------- for grown-ups ---------- */

.grownups { background: var(--sky-pale); padding: clamp(56px, 8vw, 110px) 0; }
.sheet { padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 5vw, 72px); transform: rotate(-.3deg); }
.sheet h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.sheet .intro { margin-top: 16px; font-size: 1.18rem; max-width: 32ch; }
.facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.facts li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 16px 0; border-top: 2px dashed #D6DEE6; }
.facts li:first-child { border-top: 0; padding-top: 0; }
.facts svg { width: 32px; height: 32px; color: var(--sky); margin-top: 2px; }
.facts h3 { font-size: 1.12rem; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 2px; }
.facts p { color: var(--ink-soft); font-size: 1rem; }
.price { margin-top: 26px; padding: 18px 20px; background: #FFF1BE; border-radius: 12px 15px 11px 14px; }
.price h3 { font-size: 1.15rem; letter-spacing: -.01em; }
.price table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.price th, .price td { padding: 7px 0; border-top: 1px solid rgba(27, 42, 74, .12); text-align: left; font-weight: 500; }
.price tr:first-child > * { border-top: 0; }
.price td:last-child { text-align: right; font-weight: 800; white-space: nowrap; padding-left: 12px; }
.price p { font-size: .9rem; color: var(--ink-soft); margin-top: 10px; }

/* ---------- closing ---------- */

.closer {
  position: relative; isolation: isolate; overflow: hidden;
  background: #24A0C1 url("/assets/sky.webp") 50% 90% / cover no-repeat;
  padding: clamp(64px, 9vw, 120px) 0 0; text-align: center;
}
.closer h2 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); max-width: 14ch; margin: 0 auto 28px; }
.closer .rainbow { width: clamp(150px, 18vw, 220px); margin: 0 auto 14px; }
.closer .hills { position: relative; height: clamp(190px, 26vw, 300px); margin-top: clamp(30px, 5vw, 60px); }
/* the unicorn gallops in when the band scrolls into view, then stops: no endless motion */
.runner { position: absolute; bottom: 30%; left: clamp(16px, 14vw, 240px); width: clamp(130px, 16vw, 210px); z-index: 2; }
.js .runner { transform: translateX(-70vw); }
.js .closer.in .runner { animation: arrive 3.4s var(--ease-out) forwards; }
.js .closer.in .runner img { animation: bob .34s ease-in-out 9 alternate; }
@keyframes arrive { from { transform: translateX(-70vw); } to { transform: translateX(0); } }
@keyframes bob { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-9px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) {
  .js .runner, .js .closer.in .runner { transform: none; animation: none; }
  .js .closer.in .runner img { animation: none; }
}

footer { background: var(--field); color: var(--field-ink); padding: 26px 0 34px; font-size: .95rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
footer a { font-weight: 700; display: inline-block; padding-block: 11px; }

/* ---------- reading pages (privacy, support) ---------- */

.page-top { isolation: isolate; background: #24A0C1 url("/assets/sky.webp") 22% 80% / cover no-repeat; padding: 96px 0 0; position: relative; overflow: hidden; }
.page-top h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.3; rotate: -1.2deg; transform-origin: 0 50%; padding: 18px 0 clamp(250px, 24vw, 340px); }
.page-top .hills { height: 10px; }
.reading { position: relative; z-index: 1; background: var(--field); padding: 0 clamp(12px, 3vw, 24px) clamp(56px, 8vw, 96px); }
.doc { max-width: 760px; margin: calc(-1 * clamp(70px, 9vw, 130px)) auto 0; padding: clamp(28px, 5vw, 56px); }
.doc .updated { color: var(--ink-soft); font-size: .98rem; margin-bottom: 24px; }
.doc h2 { font-size: 1.6rem; margin: 36px 0 10px; }
.doc p, .doc li { font-size: 1.08rem; max-width: 66ch; }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 1.2em; margin: 10px 0 0; }
.doc li { margin-bottom: 10px; }
.doc li::marker { color: var(--sky); }
.doc details { border-top: 2px dashed #D6DEE6; padding: 16px 0; }
.doc details:last-of-type { border-bottom: 2px dashed #D6DEE6; }
.doc summary { font-weight: 800; font-size: 1.18rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.doc summary::-webkit-details-marker { display: none; }
.doc summary::after { content: ""; width: 14px; height: 14px; flex: none; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-3px, -3px); transition: transform .4s var(--ease-out); }
.doc details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.doc details p { margin-top: 10px; color: var(--ink-soft); }
.contact { margin-top: 32px; padding: 20px 22px; background: #FFF1BE; border-radius: 12px 15px 11px 14px; }
.contact strong { display: block; font-size: 1.15rem; }

/* ---------- smaller screens ---------- */

@media (max-width: 1100px) and (min-width: 961px) {
  .wardrobe { grid-template-columns: 12.5rem auto; gap: 16px; }
  .badges { grid-template-columns: repeat(8, 48px); gap: 8px; }
}
@media (max-width: 960px) {
  .hero { height: auto; padding-top: 92px; display: flex; flex-direction: column; }
  .pitch { order: 1; width: min(100% - 2 * var(--gutter), 640px); margin-inline: auto; display: grid; justify-items: center; text-align: center; padding: 0; }
  br.narrow { display: inline; }
  .band { order: 2; height: clamp(340px, 78vw, 420px); margin-top: -8px; }
  .poster { left: 50%; translate: -50% 0; bottom: clamp(50px, 12vw, 90px); height: clamp(170px, 40vw, 230px); }
  .lower { order: 3; display: grid; justify-items: center; margin: -2px 0 0; padding: 0 var(--gutter) 44px; background: var(--field); }
  .wardrobe { margin-top: clamp(-96px, -14vw, -64px); grid-template-columns: auto; gap: 12px; width: min(100%, 640px); }
  .badges { grid-template-columns: repeat(4, minmax(52px, 72px)); justify-content: space-between; gap: 12px; }
  .pitch h1 { margin-inline: auto; rotate: -1deg; transform-origin: 50% 50%; }
  .strip.rain { margin-left: 0; }
  .lede-card { margin: 20px auto 6px; text-align: left; }
  .pitch .cta { display: flex; justify-content: center; margin-top: 18px; }
  .hero-cta { display: grid; justify-items: center; gap: 14px; margin-top: 22px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .sheet { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}
@media (min-width: 961px) { .hero-cta { display: none; } }
/* short laptop screens: tighten the pitch so the tray and the unicorn still fit the first screen */
@media (min-width: 961px) and (max-height: 860px) {
  .hero { padding-top: 84px; grid-template-rows: auto minmax(290px, 1fr); }
  .pitch h1 { font-size: clamp(2.1rem, min(3.9vw, 6.2svh), 3.5rem); }
  .lede-card { margin: 14px 0 18px; padding: 14px 20px 13px; }
  .pitch .lede { font-size: clamp(1rem, 2.3svh, 1.16rem); }
  .pitch .free { margin-top: 9px; padding-top: 8px; }
  .lower { margin-bottom: 12px; }
}
@media (min-width: 961px) and (max-height: 740px) {
  .hero { padding-top: 80px; grid-template-rows: auto minmax(270px, 1fr); }
  .lede-card { margin: 12px 0 14px; }
}

@media (max-width: 720px) {
  .top nav { gap: 0; margin-right: -10px; }
  .top nav a { font-size: .9rem; padding: 0 10px; }
  .top nav .wide-only { display: none; }
  .top nav .narrow-only { display: inline; }
  .top nav a { white-space: nowrap; }
  .wardrobe { padding: 16px 16px 18px; }
  .tag { display: none; }
  .hero { padding-top: 80px; }
  .pitch h1 { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
  .lede-card { padding: 14px 16px 13px; }
  .pitch .lede { font-size: 1.02rem; }
  .cards { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 10px var(--gutter) 22px; scrollbar-width: thin; scrollbar-color: rgba(255, 251, 242, .55) transparent; }
  .cards li { flex: 0 0 78%; scroll-snap-align: center; }
  .cards .closing { flex-basis: 60%; }

}
@media (min-width: 721px) { .play-list { display: none; } }
.play-list { margin: 14px 4px 4px; padding-left: 1.2em; color: var(--ink); font-size: 1rem; }
.play-list ul { margin: 0; padding: 0; }
.play-list li { margin-bottom: 6px; }
.play-list li::marker { color: var(--sky); }
.hills .runner img { position: static; width: 100%; max-width: 100%; left: auto; transform: none; }
.page-top .hills img { width: 100%; min-width: 900px; height: auto; }
.page-top .hills .far { display: none; }
.page-top .hills .mid { bottom: 40px; }
.page-top .hills .near { bottom: 0; }
@media (max-width: 720px) { .page-top .hills img { min-width: 620px; } .page-top h1 { padding-bottom: 190px; } }
/* once the 3D scene is drawing the hills itself, the page's own pictures step aside (they stay laid out, for measuring) */
.has-3d .band .hills { visibility: hidden; }

/* the rainbow count, the same pill as the game's own HUD; it only appears once the 3D unicorn is out chasing */
.hud {
  display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 8px;
  padding: 7px 14px 7px 9px; background: var(--cream); color: var(--ink);
  border-radius: 13px 16px 12px 15px; box-shadow: var(--paper-shadow);
  font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums;
  opacity: 0; translate: 0 8px; transition: opacity .6s var(--ease-out), translate .6s var(--ease-out);
  pointer-events: none;
}
.hud img { width: 34px; height: auto; grid-row: span 2; }
.hud small { font-size: .74rem; font-weight: 600; color: var(--ink-soft); }
.has-3d .hud { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .hud { display: none; } }
/* the counter and its pause button sit together at the top of the meadow, above the 3D scene */
.hud-wrap {
  grid-row: 2; grid-column: 1; align-self: start; justify-self: end; position: relative; z-index: 3;
  display: flex; align-items: center; gap: 10px; margin: 4px var(--edge) 0 0;
}
.pause {
  appearance: none; border: 0; cursor: pointer; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--cream); color: var(--ink);
  box-shadow: var(--paper-shadow); transition: transform .3s var(--ease-out);
}
.pause[hidden] { display: none; }
.pause svg { width: 18px; height: 18px; fill: currentColor; }
.pause .i-play, .pause[aria-pressed="true"] .i-pause { display: none; }
.pause[aria-pressed="true"] .i-play { display: block; }
.pause:hover { transform: translateY(-2px) rotate(-3deg); }
.pause:focus-visible { outline-offset: 4px; }
@media (max-width: 960px) {
  .hud-wrap { order: 2; align-self: flex-end; margin: 18px var(--gutter) -72px 0; }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* each badge carries its name, so the eight read as eight different things */
.badges li { display: grid; justify-items: center; gap: 5px; }
.badge-name { font-size: .7rem; font-weight: 700; line-height: 1; color: var(--ink-soft); white-space: nowrap; }

/* the price table ends with the total, so nobody has to add it up */
.price tr.total > * { border-top: 2px solid rgba(27, 42, 74, .28); font-weight: 800; }

.closer h2 { line-height: 1.32; }
@media (min-width: 721px) and (max-width: 960px) { .badges { grid-template-columns: repeat(8, 56px); justify-content: start; gap: 10px; } }