/* NYC Adventure — 16-bit adventure guide
   Every size inside the book is in container units (cqw/cqh) so a page
   scales as one piece from iPad mini to iPad Pro. */

@font-face {
  font-family: "Press Start 2P";
  src: url("fonts/press-start-2p.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("fonts/pixelify-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: block;
}

:root {
  --navy: #071629;
  --navy-2: #0c2240;
  --gold: #E8BB45;
  --gold-hi: #FFE08A;
  --gold-lo: #9C7420;
  --cream: #FFF5D6;
  --mist: #C9D4DE;
  --ink: #02070f;

  --pixel: "Press Start 2P", ui-monospace, monospace;
  --body: "Pixelify Sans", ui-rounded, system-ui, sans-serif;

  --safe: max(env(safe-area-inset-top), env(safe-area-inset-bottom), 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

button { font: inherit; color: inherit; }

/* ---------- Stage + book ------------------------------------------------ */

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 80% at 50% 40%, #0d1f38 0%, var(--ink) 70%);
}

/* Portrait screens: the book is the whole screen.
   Landscape screens: a portrait page centred on the table. */
.book {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  container-type: size;
  perspective: 200vmax;
  touch-action: none;
  overflow: hidden;
  background: var(--navy);
}
@media (min-aspect-ratio: 4/5) {
  .book {
    width: calc(100dvh * 0.75);
    box-shadow: 0 0 0 1px #000, 0 30px 80px rgba(0, 0, 0, .7);
  }
}

/* ---------- Pages + turning --------------------------------------------- */

.page {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  visibility: hidden;
  --p: 0;              /* turn progress 0 (flat) → 1 (edge-on at the spine) */
}
.page.is-current,
.page.is-under,
.page.is-turning { visibility: visible; }
.page.is-current { z-index: 2; }
.page.is-under   { z-index: 1; }
.page.is-turning { z-index: 3; transform: rotateY(calc(var(--p) * -90deg)); will-change: transform; }

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--navy);
}

/* Light falling across the lifting page, and the shadow it casts below. */
.face--front::after,
.page.is-under .face--front::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
}
.page.is-turning .face--front::after {
  background: linear-gradient(90deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55));
  opacity: calc(var(--p) * 1.2);
}
.page.is-under .face--front::before {
  background: linear-gradient(90deg, rgba(2,7,15,.75), rgba(2,7,15,.15) 60%, rgba(2,7,15,0));
  opacity: var(--under, 0);
}

/* Instant swap used by "Continue? → Yes" */
.book.is-fading .page.is-current { animation: fade-in .6s steps(6) both; }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Shared frame (replaces the frames painted in the art) ------- */

.frame {
  --in: max(2.2cqw, var(--safe));
  position: absolute;
  inset: var(--in);
  pointer-events: none;
  z-index: 40;
  border: .55cqw solid var(--gold);
  box-shadow:
    0 0 0 .3cqw rgba(2,7,15,.85),
    inset 0 0 0 .3cqw rgba(2,7,15,.85);
}
.frame i {
  position: absolute;
  width: 3.2cqw;
  height: 3.2cqw;
  background: var(--gold);
  box-shadow: 0 0 0 .3cqw rgba(2,7,15,.9), inset -.6cqw -.6cqw 0 var(--gold-lo), inset .6cqw .6cqw 0 var(--gold-hi);
}
.frame i:nth-child(1) { top: -1.9cqw;    left: -1.9cqw; }
.frame i:nth-child(2) { top: -1.9cqw;    right: -1.9cqw; }
.frame i:nth-child(3) { bottom: -1.9cqw; left: -1.9cqw; }
.frame i:nth-child(4) { bottom: -1.9cqw; right: -1.9cqw; }

/* ---------- Art ---------------------------------------------------------- */

.art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  display: block;
  -webkit-user-drag: none;
}

/* ---------- Type ----------------------------------------------------------- */

.pixel-shadow { text-shadow: .35cqw .35cqw 0 var(--ink); }

.day-head {
  display: flex;
  align-items: flex-end;
  gap: 2.6cqw;
  position: relative;
  z-index: 5;
}
.day-head__num {
  font-family: var(--pixel);
  font-size: 14cqw;
  line-height: .8;
  color: var(--gold);
  letter-spacing: -.4cqw;
  text-shadow:
    .5cqw .5cqw 0 var(--gold-lo),
    1cqw 1cqw 0 var(--ink);
}
.day-head__meta { padding-bottom: .4cqw; }
.day-head__kicker {
  font-family: var(--pixel);
  font-size: 1.7cqw;
  letter-spacing: .5cqw;
  color: var(--mist);
  display: block;
  margin-bottom: 1.4cqw;
}
.day-head__weekday {
  font-family: var(--body);
  font-weight: 700;
  font-size: 6.4cqw;
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: .3cqw;
  color: var(--cream);
  text-shadow: .4cqw .4cqw 0 var(--ink);
}

/* Stops: a dotted "coin trail" timeline */
.stops {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stops::before {
  content: "";
  position: absolute;
  left: 2.85cqw;
  top: 3cqw;
  bottom: 3cqw;
  width: .6cqw;
  background: repeating-linear-gradient(180deg, var(--gold) 0 .6cqw, transparent .6cqw 1.6cqw);
  opacity: .55;
}
.stop {
  display: grid;
  grid-template-columns: 6.3cqw 1fr;
  column-gap: 3cqw;
  align-items: center;
  position: relative;
}
.stop__badge {
  width: 6.3cqw;
  height: 6.3cqw;
  display: grid;
  place-items: center;
  font-family: var(--pixel);
  font-size: 1.9cqw;
  color: var(--navy);
  background: var(--gold);
  /* notched pixel corners */
  box-shadow:
    inset -.5cqw -.5cqw 0 var(--gold-lo),
    inset .5cqw .5cqw 0 var(--gold-hi),
    0 0 0 .5cqw var(--navy);
  clip-path: polygon(0 .5cqw, .5cqw .5cqw, .5cqw 0, calc(100% - .5cqw) 0, calc(100% - .5cqw) .5cqw, 100% .5cqw, 100% calc(100% - .5cqw), calc(100% - .5cqw) calc(100% - .5cqw), calc(100% - .5cqw) 100%, .5cqw 100%, .5cqw calc(100% - .5cqw), 0 calc(100% - .5cqw));
}
.stop__title {
  font-family: var(--body);
  font-weight: 600;
  font-size: 4.3cqw;
  line-height: 1.05;
  color: var(--cream);
  margin: 0;
}
.stop__label {
  display: inline-block;
  font-family: var(--pixel);
  font-size: 1.55cqw;
  line-height: 1;
  letter-spacing: .2cqw;
  text-transform: uppercase;
  color: var(--gold);
  border: .35cqw solid var(--gold);
  padding: .7cqw .9cqw .6cqw;
  margin-right: 1.6cqw;
  vertical-align: .55cqw;
}
.stop__time {
  font-family: var(--pixel);
  font-size: 2.1cqw;
  color: var(--gold);
  margin-left: 1.6cqw;
  white-space: nowrap;
}
.stop__note {
  font-family: var(--body);
  font-weight: 400;
  font-size: 2.9cqw;
  line-height: 1.15;
  color: var(--mist);
  margin: .5cqw 0 0;
}
.arrow {
  display: inline-block;
  width: .9em;
  height: .7em;
  margin: 0 .25em;
  vertical-align: .02em;
  fill: currentColor;
  shape-rendering: crispEdges;
}

/* Map links: a stop with a place opens Google Maps */
.stops > li { position: relative; }
a.stop__main, a.finale__main, .place {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.stop__main { display: block; min-width: 0; }
a.stop__main {
  margin: -1.2cqw -1.6cqw;
  padding: 1.2cqw 1.6cqw;
  transition: background-color .12s steps(2);
}
a.stop__main:active { background: rgba(232,187,69,.16); box-shadow: inset 0 0 0 .35cqw rgba(232,187,69,.5); }
a.finale__main:active { background: rgba(232,187,69,.12); }
.finale__main { display: block; margin: -1cqw -1.4cqw; padding: 1cqw 1.4cqw; }
.pin {
  display: inline-block;
  width: .5em;
  height: .7em;
  margin-left: .45em;
  vertical-align: -.02em;
  fill: var(--gold);
  shape-rendering: crispEdges;
  filter: drop-shadow(.25cqw .25cqw 0 var(--ink));
}
.stop__places {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4cqw;
  margin: 1.2cqw 0 0;
}
.place {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  font-family: var(--body);
  font-weight: 600;
  font-size: 2.6cqw;
  line-height: 1;
  color: var(--gold);
  padding: 1cqw 1.4cqw .9cqw 1.1cqw;
  border: .3cqw solid rgba(232,187,69,.6);
  background: rgba(7,22,41,.7);
}
.place .pin { margin: 0; width: 1.6cqw; height: 2.24cqw; filter: none; }
.place:active { background: rgba(232,187,69,.22); }
.nowrap { white-space: nowrap; }
.place-inline {
  color: inherit;
  text-decoration: none;
  border-bottom: .3cqw dotted var(--gold);
}
.place-inline:active { background: rgba(232,187,69,.22); }
.overlay__body .stop__places, .spread--columns .stop__places { gap: 1cqw; margin-top: 1cqw; }
.overlay__body .place, .spread--columns .place { font-size: 2.15cqw; padding: .8cqw 1cqw .7cqw .8cqw; gap: .7cqw; }
.overlay__body .place .pin, .spread--columns .place .pin { width: 1.3cqw; height: 1.82cqw; }

/* ---------- Coins ------------------------------------------------------- */

.quest {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.quest:active { transform: translateY(.3cqw); }
.quest__num { display: block; }

/* Collected: the numbered plate becomes a gold coin */
.stop__badge.is-done {
  background: radial-gradient(circle at 36% 30%, var(--gold-hi) 0 22%, var(--gold) 23% 62%, var(--gold-lo) 63%);
  box-shadow: none;
  clip-path: polygon(30% 0, 70% 0, 70% 8%, 86% 8%, 86% 16%, 92% 16%, 92% 30%, 100% 30%, 100% 70%, 92% 70%, 92% 84%, 86% 84%, 86% 92%, 70% 92%, 70% 100%, 30% 100%, 30% 92%, 14% 92%, 14% 84%, 8% 84%, 8% 70%, 0 70%, 0 30%, 8% 30%, 8% 16%, 14% 16%, 14% 8%, 30% 8%);
}
.stop__badge.is-done .quest__num { visibility: hidden; }
.stop__badge.is-done::after {
  content: "";
  position: absolute;
  left: 42%;
  top: 26%;
  width: 16%;
  height: 48%;
  background: var(--gold-lo);
  box-shadow: .35cqw .35cqw 0 var(--gold-hi);
}
.quest.is-spinning { animation: coin-spin .6s steps(8) both; }
@keyframes coin-spin {
  25%  { transform: scaleX(.12) translateY(-1.2cqw); }
  50%  { transform: scaleX(1) translateY(-1.8cqw); }
  75%  { transform: scaleX(.12) translateY(-1.2cqw); }
}
.stop.is-done .stop__main { opacity: .5; }

.finale__quest { background: none; display: grid; place-items: center; }
.finale.is-done .finale__star { fill: var(--cream); animation: none; filter: drop-shadow(0 0 2.4cqw var(--gold)); }
.finale.is-done .finale__main { opacity: .6; }

.coin-pop {
  position: absolute;
  z-index: 70;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8cqw;
  font-family: var(--pixel);
  color: var(--gold);
  text-shadow: .35cqw .35cqw 0 var(--ink);
  animation: coin-pop .85s steps(7) both;
}
.coin-pop b { font-weight: 400; font-size: 3cqw; }
.coin-pop span { font-size: 1.6cqw; color: var(--cream); }
@keyframes coin-pop {
  from { transform: translate(-50%, -60%); opacity: 1; }
  70%  { opacity: 1; }
  to   { transform: translate(-50%, -260%); opacity: 0; }
}

.quest-tip {
  margin: 0;
  padding-top: 2cqw;
  font-family: var(--pixel);
  font-size: 1.5cqw;
  letter-spacing: .2cqw;
  text-transform: uppercase;
  color: var(--mist);
  opacity: .8;
  animation: blink 1.6s steps(1) infinite;
}
.book.has-coins .quest-tip { display: none; }

.clear-stamp {
  display: none;
  position: absolute;
  z-index: 30;
  top: calc(max(2.2cqw, var(--safe)) + 6cqw);
  right: 7cqw;
  padding: 2.2cqw 2.8cqw 2cqw;
  font-family: var(--pixel);
  font-size: 3.4cqw;
  line-height: 1.3;
  text-align: center;
  color: var(--gold);
  text-shadow: .4cqw .4cqw 0 var(--ink);
  background: rgba(7,22,41,.9);
  border: .7cqw solid var(--gold);
  box-shadow: 0 0 0 .5cqw var(--ink), inset 0 0 0 .5cqw var(--ink), 1.2cqw 1.2cqw 0 .4cqw rgba(2,7,15,.5);
  transform: rotate(-8deg);
  pointer-events: none;
}
.clear-stamp--low { top: auto; right: auto; left: 7cqw; bottom: calc(max(2.2cqw, var(--safe)) + 7cqw); }
.face.is-clear .clear-stamp { display: block; }
.face.just-cleared .clear-stamp { animation: stamp .6s steps(6) .3s both; }
@keyframes stamp {
  0%   { transform: rotate(-8deg) scale(2.6); opacity: 0; }
  55%  { transform: rotate(-8deg) scale(.9); opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); opacity: 1; }
}

.coin-icon {
  display: inline-block;
  width: 2.4cqw;
  height: 2.4cqw;
  margin-right: 1.2cqw;
  vertical-align: -.3cqw;
  background: radial-gradient(circle at 36% 30%, var(--gold-hi) 0 22%, var(--gold) 23% 62%, var(--gold-lo) 63%);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.levels__coins {
  margin: 3cqw 0 0;
  font-family: var(--pixel);
  font-size: 2.2cqw;
  color: var(--cream);
}
.game-over__score {
  font-family: var(--pixel);
  font-size: 2.4cqw;
  color: var(--mist);
  margin: -2cqw 0 4cqw;
}
.game-over__score b { font-weight: 400; color: var(--gold); }
.game-over__perfect {
  font-family: var(--pixel);
  font-size: 2.4cqw;
  color: var(--gold-hi);
  margin: -2cqw 0 4cqw;
  animation: blink 1s steps(1) infinite;
}
.game-over__perfect[hidden] { display: none; }

/* Finale: the "boss" stop */
.finale {
  position: relative;
  padding: 2.6cqw 3.4cqw 2.8cqw;
  background: linear-gradient(180deg, rgba(12,34,64,.96), rgba(7,22,41,.96));
  border: .6cqw solid var(--gold);
  box-shadow:
    0 0 0 .4cqw var(--ink),
    inset 0 0 0 .4cqw var(--ink),
    0 0 6cqw rgba(232,187,69,.35);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 3cqw;
}
.finale__star {
  width: 6cqw;
  height: 6cqw;
  fill: var(--gold);
  shape-rendering: crispEdges;
  animation: twinkle 1.2s steps(2) infinite;
  filter: drop-shadow(0 0 1.5cqw rgba(255,224,138,.6));
}
@keyframes twinkle { 50% { fill: var(--gold-hi); } }
.finale__kicker {
  font-family: var(--pixel);
  font-size: 1.6cqw;
  letter-spacing: .3cqw;
  color: var(--gold);
  display: block;
  margin-bottom: 1.2cqw;
}
.finale__title {
  font-family: var(--body);
  font-weight: 700;
  font-size: 5.6cqw;
  line-height: 1;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: .2cqw;
}
.finale__note {
  font-family: var(--body);
  font-size: 2.9cqw;
  color: var(--mist);
  margin-top: .8cqw;
  display: block;
}
.finale__time {
  font-family: var(--pixel);
  font-size: 3.2cqw;
  line-height: 1.25;
  color: var(--navy);
  background: var(--gold);
  padding: 1.6cqw 1.8cqw 1.3cqw;
  text-align: center;
  box-shadow: inset -.5cqw -.5cqw 0 var(--gold-lo), inset .5cqw .5cqw 0 var(--gold-hi);
}
.finale__time small { display: block; font-size: 1.5cqw; letter-spacing: .2cqw; margin-bottom: .6cqw; }

/* ---------- Layout: landscape art on top, story below ------------------- */

.spread {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.spread__hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.spread__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,22,41,0) 74%, rgba(7,22,41,.7) 92%, var(--navy) 100%);
}
.spread__body {
  flex: 0 0 auto;
  position: relative;
  padding: 0 9cqw calc(9cqw + var(--safe));
  background: var(--navy);
}
.spread__body .day-head { margin-top: -10.5cqw; margin-bottom: 5.4cqw; }
.spread__body .stops { gap: 3.4cqw; }

/* Art that must be shown whole (Day 1's two-panel map): the art keeps its
   ratio and the story takes the rest of the page. */
.spread__hero--whole { flex: 0 0 auto; }
.spread__hero--whole + .spread__body { flex: 1 1 auto; display: flex; flex-direction: column; }
.spread__hero--whole + .spread__body .stops { flex: 1 1 auto; justify-content: space-evenly; gap: 0; padding: 0 0 1cqw; }

/* Many stops: two columns so the art keeps the room */
.spread--columns .stops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows, 3), auto);
  column-gap: 5cqw;
  row-gap: 4.2cqw;
}
.spread--columns .stops::before { display: none; }
.spread--columns .stop { grid-template-columns: 5.6cqw 1fr; column-gap: 2.6cqw; }
.spread--columns .stop__badge { width: 5.6cqw; height: 5.6cqw; font-size: 1.75cqw; }
.spread--columns .stop__title { font-size: 3.8cqw; }
.spread--columns .stop__note { font-size: 2.7cqw; }
.spread--columns .stop__label { display: table; margin: 0 0 1cqw; vertical-align: 0; }

/* Day 5: words first, the plane flies in from below */
.spread--reverse { flex-direction: column-reverse; }
.spread--reverse .spread__hero::after {
  background: linear-gradient(0deg, rgba(7,22,41,0) 60%, rgba(7,22,41,.7) 84%, var(--navy) 100%);
}
.spread--reverse .spread__body { padding: calc(11cqw + var(--safe)) 9cqw 0; }
.spread--reverse .spread__body .day-head { margin-top: 0; }
.spread--reverse .finale { margin: 5.4cqw 0 -6cqw; z-index: 6; }

/* ---------- Layout: portrait art, story as an overlay ------------------- */

.overlay__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(7,22,41,0) 0%,
    rgba(7,22,41,0) var(--scrim-start, 48%),
    rgba(7,22,41,.82) calc(var(--scrim-start, 48%) + 12%),
    rgba(7,22,41,.96) 100%);
}
.overlay__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 8cqw calc(7.5cqw + var(--safe));
}
.overlay__body .day-head { margin-bottom: 3.6cqw; }
.overlay__body .day-head__num { font-size: 11.5cqw; }
.overlay__body .day-head__weekday { font-size: 5.6cqw; }
.overlay__body .day-head__kicker { margin-bottom: 1cqw; }
.overlay__body .stops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows, 3), auto);
  column-gap: 5cqw;
  row-gap: 3cqw;
}
.overlay__body .stops::before { display: none; }
.overlay__body .stop { grid-template-columns: 5.4cqw 1fr; column-gap: 2.4cqw; }
.overlay__body .stop__badge { width: 5.4cqw; height: 5.4cqw; font-size: 1.7cqw; }
.overlay__body .stop__title { font-size: 3.6cqw; text-shadow: .3cqw .3cqw 0 var(--ink); }
.overlay__body .stop__note { font-size: 2.6cqw; text-shadow: .25cqw .25cqw 0 var(--ink); }
.overlay__body .stop__label { font-size: 1.35cqw; padding: .6cqw .8cqw .5cqw; margin: 0 0 1cqw; display: table; vertical-align: 0; }
.overlay__body .finale { margin-top: 4.4cqw; padding: 2cqw 3cqw 2.2cqw; }

/* ---------- PLACES index (inside back cover) ----------------------------- */

.atlas__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,22,41,.9), rgba(7,22,41,.7) 45%, rgba(7,22,41,.88));
}
.atlas {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 5cqw;
  padding: calc(9cqw + var(--safe)) 8cqw calc(7cqw + var(--safe));
}
.atlas__kicker {
  display: block;
  margin-bottom: 1.6cqw;
  font-family: var(--pixel);
  font-size: 1.7cqw;
  letter-spacing: .5cqw;
  color: var(--mist);
}
.atlas__title {
  margin: 0;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 8cqw;
  line-height: 1;
  color: var(--gold);
  text-shadow: .5cqw .5cqw 0 var(--gold-lo), 1cqw 1cqw 0 var(--ink);
}
.atlas__cols { columns: 2; column-gap: 6cqw; }
.atlas__group { break-inside: avoid; margin-bottom: 4.4cqw; }
.atlas__kind {
  margin: 0 0 1.2cqw;
  padding-bottom: 1.2cqw;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 1.7cqw;
  letter-spacing: .3cqw;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: .35cqw dotted rgba(232,187,69,.55);
}
.atlas ul { list-style: none; margin: 0; padding: 0; }
.atlas__item {
  display: flex;
  align-items: baseline;
  gap: 1.4cqw;
  margin: 0 -1cqw;
  padding: .95cqw 1cqw;
  font-family: var(--body);
  font-weight: 600;
  font-size: 3cqw;
  line-height: 1.15;
  color: var(--cream);
  text-decoration: none;
  text-shadow: .25cqw .25cqw 0 var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.atlas__item:active { background: rgba(232,187,69,.18); }
.atlas__item .pin { flex: none; margin: 0; width: 1.5cqw; height: 2.1cqw; filter: none; }
.atlas__name { flex: 1; }
.atlas__days {
  font-family: var(--pixel);
  font-size: 1.2cqw;
  color: var(--mist);
  white-space: nowrap;
}

/* ---------- Cover ------------------------------------------------------- */

.press-start {
  position: absolute;
  left: 50%;
  /* just under the painted title plaque. The cover art is 3:4 and height-fitted
     on portrait iPads, so 29.5% of the art height == 29.5cqh. */
  top: 29.5cqh;
  transform: translateX(-50%);
  z-index: 45;
  font-family: var(--pixel);
  font-size: 1.9cqw;
  letter-spacing: .4cqw;
  color: var(--cream);
  background: var(--navy);
  padding: 1.5cqw 2.4cqw 1.3cqw;
  border: .4cqw solid var(--gold);
  white-space: nowrap;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 60% { opacity: 0; } }

/* Tall phones (narrower than ~5:8): show the whole cover instead of cropping
   its title, with a blurred copy of the art filling above and below. */
.art--backdrop { display: none; }
@container (max-aspect-ratio: 5/8) {
  .page--cover .art--backdrop, .lock .art--backdrop {
    display: block;
    filter: blur(14px) brightness(.55) saturate(1.2);
    transform: scale(1.2);
  }
  .page--cover .art:not(.art--backdrop), .lock .art:not(.art--backdrop) {
    object-fit: contain;
    object-position: 50% 50%;
    filter: drop-shadow(0 0 4cqw rgba(2,7,15,.6));
  }
  /* The art is 3:4 and width-fitted, centred: its title plaque ends 29.5% down. */
  .press-start { top: calc((100cqh - 133.33cqw) / 2 + 41cqw); }
}

/* ---------- Back cover: GAME OVER ----------------------------------------- */

.game-over {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 45;
  width: 64cqw;
  padding: 6cqw 4cqw 5cqw;
  text-align: center;
  background: rgba(7,22,41,.94);
  border: .7cqw solid var(--gold);
  box-shadow:
    0 0 0 .5cqw var(--ink),
    inset 0 0 0 .5cqw var(--ink),
    1.6cqw 1.6cqw 0 .5cqw rgba(2,7,15,.55);
}
.game-over__title {
  font-family: var(--pixel);
  font-size: 6.4cqw;
  line-height: 1.15;
  color: var(--gold);
  margin: 0 0 5cqw;
  text-shadow: .5cqw .5cqw 0 var(--gold-lo), 1cqw 1cqw 0 var(--ink);
}
.game-over__ask {
  font-family: var(--pixel);
  font-size: 2.6cqw;
  color: var(--cream);
  margin: 0 0 3.6cqw;
}
.game-over__choices {
  display: flex;
  justify-content: center;
  gap: 7cqw;
  font-family: var(--pixel);
  font-size: 2.6cqw;
}
.game-over__choice {
  background: none;
  border: 0;
  padding: 1.6cqw 1.6cqw 1.6cqw 4.2cqw;
  position: relative;
  color: var(--mist);
  cursor: pointer;
  font-family: var(--pixel);
  font-size: inherit;
}
.game-over__choice.is-active { color: var(--cream); }
.game-over__choice.is-active::before {
  content: "";
  position: absolute;
  left: .8cqw;
  top: 50%;
  width: 2cqw;
  height: 2.4cqw;
  transform: translateY(-50%);
  background: var(--gold);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: blink 1s steps(1) infinite;
}

/* ---------- Level select (hidden: pinch in) -------------------------------- */

.levels {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6cqw;
  padding: calc(6cqw + var(--safe)) 6cqw;
  background:
    repeating-linear-gradient(0deg, rgba(232,187,69,.03) 0 2px, transparent 2px 6px),
    radial-gradient(110% 70% at 50% 45%, var(--navy-2), var(--navy) 60%, var(--ink));
  animation: levels-in .24s steps(4) both;
}
.levels[hidden] { display: none; }
.levels.is-closing { animation: levels-out .2s steps(3) both; }
@keyframes levels-in  { from { opacity: 0; transform: scale(1.08); } }
@keyframes levels-out { to   { opacity: 0; transform: scale(1.08); } }

.levels__head { text-align: center; }
.levels__title {
  margin: 0 0 2cqw;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 4.6cqw;
  color: var(--gold);
  text-shadow: .45cqw .45cqw 0 var(--gold-lo), .9cqw .9cqw 0 var(--ink);
}
.levels__subtitle {
  margin: 0;
  font-family: var(--body);
  font-size: 2.8cqw;
  letter-spacing: .5cqw;
  text-transform: uppercase;
  color: var(--mist);
}

.levels__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 86cqw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6.5cqw 3.6cqw;
}
/* Coin trail between neighbouring stages, like a game world map */
.levels__grid > li { position: relative; }
.levels__grid > li:not(:nth-child(4n))::after {
  content: "";
  position: absolute;
  left: 100%;
  width: 3.6cqw;
  top: calc((86cqw - 3 * 3.6cqw) / 4 / var(--book-ratio, .7) / 2);
  height: .9cqw;
  background: repeating-linear-gradient(90deg, var(--gold) 0 .9cqw, transparent .9cqw 1.8cqw);
  background-position: .45cqw 0;
  opacity: .7;
}
/* Wide screens get one row of eight smaller stages */
@container (min-aspect-ratio: 1/1) {
  .levels__grid { grid-template-columns: repeat(8, 1fr); width: 92cqw; }
  .levels__grid > li::after { display: none; }
}

.level {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2cqw;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: level-pop .32s steps(4) both;
  animation-delay: calc(var(--i) * 40ms + 60ms);
}
@keyframes level-pop { from { opacity: 0; transform: translateY(3cqw); } }

.level__screen {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--book-ratio, .7);
  overflow: hidden;
  container-type: size;
  --safe: 0px;
  box-shadow:
    0 0 0 .45cqw var(--ink),
    0 0 0 .9cqw rgba(232,187,69,.28),
    1.2cqw 1.2cqw 0 .6cqw rgba(2,7,15,.6);
}
.level__screen > .face { pointer-events: none; }
.level.is-cursor .level__screen {
  box-shadow:
    0 0 0 .45cqw var(--ink),
    0 0 0 1cqw var(--gold),
    0 0 4cqw rgba(232,187,69,.45),
    1.2cqw 1.2cqw 0 .6cqw rgba(2,7,15,.6);
}
.level:active .level__screen { transform: translateY(.4cqw); }
.level.is-chosen .level__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 99;
  background: var(--cream);
  animation: chosen .38s steps(1) both;
}
@keyframes chosen { 0%, 50% { opacity: .85; } 25%, 75%, 100% { opacity: 0; } }

.level__name {
  font-family: var(--pixel);
  font-size: 1.75cqw;
  color: var(--cream);
  white-space: nowrap;
}
.level.is-cursor .level__name { color: var(--gold); }
.level__sub {
  margin-top: -.4cqw;
  font-family: var(--body);
  font-size: 2.3cqw;
  color: var(--mist);
  white-space: nowrap;
}
.level__pin {
  position: absolute;
  top: -5.4cqw;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  animation: pin-bob .7s steps(2) infinite;
}
.level__pin .pin {
  width: 3cqw;
  height: 4.2cqw;
  margin: 0;
  filter: drop-shadow(.4cqw .4cqw 0 var(--ink));
}
@keyframes pin-bob { 50% { transform: translate(-50%, -.9cqw); } }

.levels__back {
  font-family: var(--pixel);
  font-size: 2cqw;
  letter-spacing: .3cqw;
  color: var(--mist);
  background: none;
  border: .35cqw solid rgba(201,212,222,.4);
  padding: 1.6cqw 2.6cqw 1.4cqw;
  cursor: pointer;
}
.levels__back:active { color: var(--cream); border-color: var(--gold); }

/* ---------- Password lock -------------------------------------------------- */

.lock { position: absolute; inset: 0; z-index: 80; }
.lock .art { object-position: 50% 50%; }
.lock__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,22,41,.1) 20%, rgba(7,22,41,.75) 55%, rgba(7,22,41,.9));
}
.lock__box {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 66cqw;
  padding: 5.5cqw 5cqw 5cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.4cqw;
  background: rgba(7,22,41,.95);
  border: .7cqw solid var(--gold);
  box-shadow:
    0 0 0 .5cqw var(--ink),
    inset 0 0 0 .5cqw var(--ink),
    1.6cqw 1.6cqw 0 .5cqw rgba(2,7,15,.55);
}
.lock.is-wrong .lock__box { animation: lock-shake .36s steps(6); }
@keyframes lock-shake {
  20% { transform: translate(calc(-50% - 1.6cqw), -50%); }
  40% { transform: translate(calc(-50% + 1.6cqw), -50%); }
  60% { transform: translate(calc(-50% - 1cqw), -50%); }
  80% { transform: translate(calc(-50% + 1cqw), -50%); }
}
.lock__label {
  font-family: var(--pixel);
  font-size: 2.6cqw;
  letter-spacing: .3cqw;
  color: var(--gold);
  text-shadow: .35cqw .35cqw 0 var(--ink);
}
.lock__input {
  width: 100%;
  box-sizing: border-box;
  padding: 2cqw 2.4cqw;
  font-family: var(--pixel);
  font-size: max(16px, 2.8cqw); /* 16px+ stops iPad Safari zooming into the field */
  letter-spacing: .6cqw;
  text-align: center;
  color: var(--cream);
  background: var(--ink);
  border: .45cqw solid var(--mist);
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  user-select: text;
  -webkit-user-select: text;
}
.lock__input:focus { border-color: var(--gold); }
.lock__error {
  margin: -1cqw 0 0;
  font-family: var(--pixel);
  font-size: 1.8cqw;
  color: #FF7A6B;
  text-shadow: .3cqw .3cqw 0 var(--ink);
}
.lock__error[hidden] { display: none; }
.lock__go {
  position: relative;
  padding: 2cqw 3.4cqw 1.8cqw 5.6cqw;
  font-family: var(--pixel);
  font-size: 2.6cqw;
  color: var(--navy);
  background: var(--gold);
  border: 0;
  box-shadow: inset -.5cqw -.5cqw 0 var(--gold-lo), inset .5cqw .5cqw 0 var(--gold-hi), 0 0 0 .45cqw var(--ink);
  cursor: pointer;
}
.lock__go::before {
  content: "";
  position: absolute;
  left: 2.2cqw;
  top: 50%;
  width: 1.8cqw;
  height: 2.2cqw;
  transform: translateY(-50%);
  background: var(--navy);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.lock__go:active { transform: translateY(.4cqw); }
.lock__go:disabled { opacity: .7; }

/* ---------- Preview tag (trips not paid for yet) ---------------------------- */

.preview-tag {
  position: absolute;
  z-index: 55;
  top: calc(max(2.2cqw, var(--safe)) + 1.4cqw);
  left: 50%;
  transform: translateX(-50%);
  padding: 1cqw 1.6cqw .8cqw;
  font-family: var(--pixel);
  font-size: 1.4cqw;
  letter-spacing: .3cqw;
  color: var(--navy);
  background: var(--gold);
  box-shadow: 0 0 0 .35cqw var(--ink);
  pointer-events: none;
}

/* ---------- Update toast ------------------------------------------------- */

.update-toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px 10px;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: .5px;
  color: var(--cream);
  background: var(--navy);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 2px var(--ink), 0 8px 24px rgba(0,0,0,.5);
  cursor: pointer;
  animation: toast-in .4s steps(4) both;
}
.update-toast[hidden] { display: none; }
.update-toast__dot { width: 8px; height: 8px; background: var(--gold); animation: blink 1s steps(1) infinite; }
@keyframes toast-in { from { transform: translate(-50%, 140%); } }

@media (prefers-reduced-motion: reduce) {
  .press-start, .finale__star, .game-over__choice.is-active::before, .update-toast__dot, .level__pin { animation: none; }
}

/* 3:4 screens (iPad Pro, landscape book) crop more off portrait art: tighten overlays */
@container (min-aspect-ratio: 37/50) {
  .overlay__body { padding-bottom: calc(6cqw + var(--safe)); }
  .overlay__body .day-head { margin-bottom: 2.6cqw; }
  .overlay__body .day-head__num { font-size: 10cqw; }
  .overlay__body .stops { row-gap: 2.2cqw; }
  .overlay__body .finale { margin-top: 3.2cqw; }
}