/* Home (title) screen and Welcome screen. Basil's designs: design/screens/Home-*.png.
   These two use the banner sky with still pixel clouds; every other screen stays Cloud White.
   All sizes are whole pixel units (--u), so they step up with the screen like the rest of the app. */

/* No tab bar on the sky screens (they are not tabs), and the toast sits at the screen edge */
.app--bare .tabbar { display: none; }
.app--bare .toast { left: calc(var(--u) * 5); bottom: calc(var(--u) * 8 + env(safe-area-inset-bottom)); }

.sky {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--sky);
}
.screen { overflow-x: hidden; }   /* clouds poke past the edges: clip them on the scrolling screen (not on .sky, which would break the sticky button) */
.screen:has(.sky) { background: var(--sky); }

/* Pixel clouds: four clouds from Basil's sheet, each pinned to its own screen edge and a fixed share of the
   screen height (as in his design), so they stay flush with the edge and never get cut oddly on any screen.
   Every cloud is drawn at a whole number of pixel units per cloud step (5 units; the small cloud 6), so edges stay crisp. */
.skyart-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }   /* clips to the screen (not on .sky: that would break the sticky button) */
.skyart { position: absolute; height: auto; }
.skyart--1 { left: 0;  top: 7.6%;     width: calc(var(--u) * 98.39); }
.skyart--2 { right: 0; top: 34.6%;    width: calc(var(--u) * 50.6); }
.skyart--3 { left: 0;  top: 51.6%;    width: calc(var(--u) * 41.37); }
.skyart--4 { right: 0; bottom: 4.5%;  width: calc(var(--u) * 98.39); }

/* ---------- Logo (Basil's art at public/logo/logo.png; a text stand-in shows until the file exists) ---------- */
.logo { display: flex; justify-content: center; }
.logo img { width: var(--logo-w, calc(var(--u) * 92)); max-width: 100%; height: auto; image-rendering: auto; }   /* the logo is smooth artwork, not a pixel grid: no nearest-neighbour scaling */
.logo__standin {
  font-family: var(--font-title); font-variant-ligatures: none; text-align: center; line-height: 1;
  font-size: calc(var(--u) * 14); letter-spacing: 0.02em;
  color: var(--title-pink);
  -webkit-text-stroke: calc(var(--u) * 2) var(--purple);
  paint-order: stroke fill;
}
.logo__standin small { font-size: 0.6em; color: var(--hot-pink); -webkit-text-stroke: calc(var(--u) * 1.5) var(--white); }

/* Short desktop windows: a slightly smaller logo (still whole units) so Home fits without scrolling */
@media (min-width: 1024px) and (max-height: 960px) { .home { --logo-w: calc(var(--u) * 72); gap: calc(var(--u) * 10); } }

/* ---------- Home ---------- */
.home {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * 13);
  padding: calc(env(safe-area-inset-top) + var(--u) * 6) calc(var(--u) * 5) calc(var(--u) * 12);
}
.home__buttons { width: min(100%, calc(var(--u) * 100)); display: flex; flex-direction: column; gap: calc(var(--u) * 9); }

/* Pixelify Sans has an odd "fi" ligature: switch ligatures off wherever it is used here */
.step__title, .btn-option .px__fill, .btn-small .px__fill, .btn-cta .px__fill, .step__num { font-variant-ligatures: none; }

/* Big pixel buttons. All text is navy and sits inside the button, never loose on the sky. */
.btn-start, .btn-option, .btn-small, .btn-cta { display: flex; cursor: pointer; user-select: none; --frame: var(--ink); }
.btn-start .px__fill, .btn-option .px__fill, .btn-small .px__fill, .btn-cta .px__fill {
  justify-content: center; align-items: center; text-align: center; color: var(--ink);
}
.btn-start .px__fill { min-height: calc(var(--u) * 28); font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 13); line-height: 1; letter-spacing: 0.04em; font-variant-ligatures: none;
  -webkit-text-stroke: calc(var(--u) * 2) var(--white); paint-order: stroke fill; }
.btn-option .px__fill { min-height: calc(var(--u) * 21); font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 7); line-height: 1; }
.btn-pair { display: flex; gap: calc(var(--u) * 8); }
.btn-small { flex: 1 1 0; min-width: 0; width: 0; }
.btn-small .px__fill { min-height: calc(var(--u) * 19); font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 6); line-height: 1; }

/* ---------- Welcome ---------- */
.welcome {
  position: relative; z-index: 1;
  width: 100%; max-width: calc(var(--u) * 150);
  margin: 0 auto;
  display: flex; flex-direction: column; gap: calc(var(--u) * 3);
  padding: calc(env(safe-area-inset-top) + var(--u) * 5) calc(var(--u) * 5) 0;
  flex: 1;
}
.welcome__head { position: relative; display: flex; align-items: flex-start; gap: calc(var(--u) * 2); min-height: calc(var(--uz) * 30); }
.welcome__zipy { width: calc(var(--uz) * 36); height: calc(var(--uz) * 30); }
.welcome__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2); align-items: flex-start; }
.welcome__bubble .px__fill { padding: calc(var(--u) * 2) calc(var(--u) * 3); }
.welcome__bubble p { font-weight: 800; font-size: calc(15px * var(--s)); line-height: calc(var(--u) * 6); }
.welcome .chip--back { position: absolute; top: 0; right: 0; }

.welcome__card .px__fill { padding: calc(var(--u) * 3) calc(var(--u) * 4); gap: calc(var(--u) * 2); }
.step { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.step__num {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: calc(var(--u) * 11); height: calc(var(--u) * 11);
  border: var(--u) solid var(--ink);
  font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 6); line-height: 1; color: var(--ink);
}
.step__num--sky { background: var(--sky); }
.step__num--pink { background: var(--soft-pink); }
.step__num--grass { background: var(--grass); }
.step__title { flex: 1; font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 6); line-height: calc(var(--u) * 7); color: var(--ink); }
.step__icon { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.step__text { font-weight: 700; font-size: calc(14px * var(--s)); line-height: calc(var(--u) * 6.5); color: var(--muted); }

.welcome .logo { --logo-w: calc(var(--u) * 72); margin: calc(var(--u) * 4) 0 calc(var(--u) * 3); }   /* smaller here so the whole page fits a 390 x 844 phone */
.welcome__note p { font-weight: 800; font-size: calc(13px * var(--s)); line-height: calc(var(--u) * 6); color: var(--ink); }

/* Start Quest stays reachable: it sticks to the bottom of the screen while the page scrolls.
   Its band fades from the sky colour so text never runs under the button, and it keeps a calm gap from the note above. */
.welcome__cta {
  position: sticky; bottom: 0;
  margin: 0 calc(var(--u) * -5);
  padding: calc(var(--u) * 6) calc(var(--u) * 5) calc(var(--u) * 5 + env(safe-area-inset-bottom));
}
/* The sky-coloured fade only appears while page content is scrolling underneath the button */
.welcome__cta.is-floating { background: linear-gradient(to bottom, rgba(1, 179, 239, 0), var(--sky) calc(var(--u) * 5)); }
.btn-cta .px__fill { min-height: calc(var(--u) * 19); font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 7); line-height: 1; }

/* ---------- Restore dialog (shared by Home and Settings) ---------- */
.dialog { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: calc(var(--u) * 5); background: rgba(37, 48, 74, 0.9); }
.dialog:focus { outline: none; }
.dialog__box { width: 100%; max-width: calc(var(--u) * 120); }
.dialog__box .px__fill { padding: calc(var(--u) * 4); background: var(--white); }