/* Home screen, built from Figma "Game-Design" frame 183:721 (393 × 852), plus the Leaderboard and My Stats
   screens it opens. Playfair Display: names, scores, titles. Inter: everything else. */
:root {
  color-scheme: light;
  --bg: #F2F2F2;
  --surface: #FFFFFF;
  --ink: #3A2A20;
  --brand-red: #8B2A3A;
  --card-text: #919FAB;
  --arrow-grey: #A8A8A8;
  --quiet: #A8A8A8;       /* outline buttons, the ⓘ button, back links */
  --label: #6B4A3A;       /* small caps labels, as on the in-game Climbed card */
  --first-row: #97AEC4;
  --first-tag: #ACBED0;
  --podium-text: #9A9A7B;       /* ranks 2–3: number + "PR Box" */
  --podium-fill: #D6D6B6;  /* ranks 2–3: circle + tag */
  --row-line: rgba(107, 74, 58, 0.1);
  --unit: #8B6A5A;
  --rest-text: #DB9C9D;   /* ranks 4–10: number + "Single item" */
  --rest-fill: #FCE1E0;   /* ranks 4–10: circle + tag */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #FFFFFF; /* around the phone-width column on wider screens; each screen paints its own background */
  color: var(--ink);
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
}

.home {
  position: relative;
  z-index: 1; /* above .home-bg */
  max-width: 393px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  /* Spacing follows the frame (top 101, header→card 56, card→Play 58, between buttons 28, bottom 64) on an
     852px-tall screen and tightens smoothly to 36 / 36 / 32 / 20 / 24 at 740px (iPhone Safari with its toolbars),
     so the whole screen fits without scrolling. On anything shorter, home.js scales it down evenly. */
  /* Frame 217:61 puts the header 57px from the top; here it sits 14px lower (71px), tightening to 54px at 740px (still clear of "Back to app"). The bottom keeps the
     farm's visible art (about 42% of its width) clear, so the buttons never sit on the barn. */
  padding: calc(env(safe-area-inset-top) + clamp(54px, 15.18dvh - 58.3px, 71px)) 21px calc(env(safe-area-inset-bottom) + var(--farm-w) * 0.424 + 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home[hidden] { display: none; } /* while Leaderboard or My Stats is open */

/* ---------- Background: Figma frame 217:61 ---------- */

/* Phones: the scene fills the screen at any width. Wider screens (500px+): it stays iPhone 16 Pro width (402px) in
   the middle, with plain white around it. */
:root { --scene-w: 100vw; --farm-w: max(403px, var(--scene-w)); } /* 403.35 wide in the 402 frame */
@media (min-width: 500px) { :root { --scene-w: 402px; --farm-w: 403px; } } /* phones of any width fill the screen */
.home-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100vw, var(--scene-w));
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 0;
  background: linear-gradient(180deg, #FEC98A 0%, #FDE5A6 100%);
  pointer-events: none;
}
.home[hidden] + .home-bg { display: none; }
.home-farm {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--farm-w);
  height: auto; /* 1681 × 936 art, so 224.6px tall at 403px wide, as in the frame */
  transform: translateX(-50%);
}
/* A few of the game's normal clouds drifting slowly across the sky (home.js places and moves them). */
.home-cloud {
  position: absolute;
  left: 0;
  image-rendering: pixelated;
  will-change: transform;
}
/* The game's bird at 2/3 of its game size (40 × 20 art drawn 26.7 × 13.3: exactly 2 device pixels per art pixel
   on a 3× phone, so it stays crisp). */
.home-bird {
  position: absolute;
  left: 0;
  top: 0; /* home.js puts it midway between "CLIMB" and the character card */
  width: calc(20px * 4 / 3);
  height: calc(10px * 4 / 3);
  image-rendering: pixelated;
  visibility: hidden;
  will-change: transform;
}
/* The game's bee, flying across in front of the farm now and then (home.js moves it). */
.home-bee {
  position: absolute;
  left: 0;
  bottom: calc(var(--farm-w) * 0.3);
  width: 22px; /* the game's size: 22 × 18 art at one art pixel per CSS pixel */
  height: 18px;
  image-rendering: pixelated;
  visibility: hidden;
  will-change: transform;
}

/* ---------- ⓘ How to Play button: a plain outlined circle ---------- */

.info-btn {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  right: 12px;
  width: 44px;  /* 24px icon, 44px touch target */
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--quiet);
  cursor: pointer;
}
/* "Back to app" (top left): for looks only, as if the game sat inside a host app. It does nothing when tapped.
   A small white pill with grey text, like the Leaderboard / My Stats buttons, level with the ⓘ button. */
.app-back {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 18px);
  left: 16px;
  height: 32px;
  padding: 0 12px 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 100px;
  background: #FFFFFF;
  color: var(--quiet);
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
  cursor: default;
}
.app-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.info-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.info-btn svg .dot { fill: currentColor; stroke: none; }
/* Filled white with a grey "i", like the arrows and the Leaderboard / My Stats buttons. */
.info-btn svg .ring { fill: #FFFFFF; stroke: none; }
.info-btn svg { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); }

/* The How to Play box sits over a light blur of the home screen. */
.info-layer {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 16px 4px;
  background: rgba(58, 42, 32, 0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.info-layer[hidden] { display: none; }

/* ---------- Brand ---------- */

/* Frame 217:61: a 337 × 102 box nudged 4.5px left of centre, logo then "CLIMB" 5px below it. */
.brand { height: 102px; display: flex; flex-direction: column; align-items: center; gap: 5px; transform: translateX(-4.5px); }
.eyebrow {
  margin: 0;
  padding-bottom: 8px;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--brand-red);
}
/* A little smaller than the frame's 222 × 71 and nudged down, so it clears the top-left pill. */
.wordmark { display: block; width: 200px; height: 64px; margin-top: 12px; object-fit: cover; }

/* ---------- Character carousel ---------- */

.picker {
  /* The carousel → buttons block is centred between the header and the farm art: auto margins share the spare
     height (with .actions' auto bottom margin); the padding keeps a minimum gap under CLIMB. */
  margin-top: auto;
  padding-top: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  touch-action: pan-y; /* horizontal swipes change character */
  user-select: none;
  -webkit-user-select: none;
}
.step {
  flex: none;
  width: 44px;  /* 26px arrow, 44px touch target */
  height: 44px;
  margin: 0 -9px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}
.step img { display: block; width: 26px; height: 26px; }
.step.prev img { transform: scaleX(-1); }
.step img { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); } /* white circle, grey arrow */

.pattern {
  position: relative;
  flex: none;
  width: 267px;
  height: 267px;
  border-radius: 15px;
  overflow: hidden;
  /* The character's print (assets/patterns/*.png, 4x size) is set from home.js. */
  background: #F2F2F2 center / 100% 100% no-repeat;
}
.card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210px;
  height: 206px;
  transform: translate(-50%, -50%);
  padding: 33px 0 9px;
  border-radius: 15px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  color: var(--card-text);
  text-align: center;
}
.art { width: 100%; height: 65px; display: grid; place-items: center; }
.art img { width: 100%; height: 65px; object-fit: contain; image-rendering: pixelated; }
.art canvas { height: 46px; image-rendering: pixelated; }
.art.hop { animation: hop 0.32s ease-out; }
@keyframes hop { 40% { transform: translateY(-8px); } }
.card-text { position: relative; width: 100%; height: 38px; }
.name {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 22.5px;
  white-space: nowrap;
}
.print {
  position: absolute;
  top: 32.1px;
  left: calc(50% + 0.5px);
  transform: translateX(-50%);
  margin: 0;
  max-width: 200px;
  font-size: 15px;
  line-height: 15px;
  letter-spacing: 0.25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Buttons: Tap to Play (filled), Leaderboard + My Stats (outlined) ---------- */

.actions {
  margin-top: clamp(24px, 10.71dvh - 55.3px, 36px); /* card → Tap to Play */
  margin-bottom: auto; /* see .picker */
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Leaderboard and My Stats share one line under Tap to Play: slightly smaller pills, each an icon + label,
   with outlined icons drawn like the ⓘ button (1.5px round strokes in the text colour). */
.actions-row { display: flex; gap: 10px; }
.actions-row .pill {
  flex: 1;
  min-width: 0;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
}
.pill-icon { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pill {
  width: 100%;
  height: 46px;
  border-radius: 100px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 22.5px;
  letter-spacing: 0.6px;
  cursor: pointer;
}
.pill:active { transform: translateY(1px); }
.play {
  border: 0;
  background: var(--brand-red); /* home.js may set this per character */
  color: #FFFFFF;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
  transition: background-color 0.2s ease;
}
.outline { /* white pill with grey text and icon */
  border: 1px solid #FFFFFF;
  background: #FFFFFF;
  color: var(--quiet);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ---------- Leaderboard + My Stats screens ---------- */

.subscreen {
  max-width: var(--scene-w); /* full width on phones; the same 402px column as Home on wider screens */
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 16px) 21px calc(env(safe-area-inset-bottom) + 32px);
}
.subscreen[hidden] { display: none; }
#screen-stats { padding-bottom: calc(env(safe-area-inset-bottom) + 12px); }
#screen-stats .sub-title { margin: 4px 0 14px; }
/* "Share your score" under the stats: Tap to Play's style and colour, with a share icon. Does nothing yet. */
.share {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: default;
}
.share:active { transform: none; }
.back {
  padding: 8px 0;
  border: 0;
  background: none;
  font: 500 14px/22.5px var(--sans);
  letter-spacing: 0.6px;
  color: var(--quiet);
  cursor: pointer;
}
.sub-title {
  margin: 8px 0 20px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 39px;
  color: var(--ink);
}

.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-height: 86px; /* short enough that the whole My Stats screen fits on a phone without scrolling */
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.stat p { margin: 0; }
.stat-label {
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 0.275px;
  text-transform: uppercase;
  color: var(--label);
}
.stat-value {
  font-family: var(--serif);
  color: var(--ink);
  white-space: nowrap;
}
.stat-value span:first-child { font-weight: 600; font-size: 32px; line-height: 34px; font-variant-numeric: lining-nums; }
.stat-unit { font-weight: 400; font-size: 14px; line-height: 18px; color: var(--unit); }
.stat-friend { display: flex; align-items: flex-end; gap: 10px; }
.stat-friend img { height: 40px; image-rendering: pixelated; }
.stat-friend-name { font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 22px; }
.stat-empty { font-size: 13px; line-height: 19.5px; color: var(--quiet); }
.stat-note { font-size: 12px; line-height: 16px; color: var(--quiet); }
#stat-rank-note { white-space: nowrap; font-size: min(12px, 2.9vw); } /* one line, even for a 4-digit distance */

/* How runs ended: one row per cause, with the obstacle's own game art, a count and a bar. */
.stat-wide { grid-column: 1 / -1; min-height: 0; justify-content: flex-start; gap: 12px; }
.endings { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ending { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 4px 12px; }
.ending-icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 28px; border-radius: 8px; background: #CFE0EC; }
.ending-icon canvas { image-rendering: pixelated; }
.ending-name { font-size: 14px; line-height: 20px; color: var(--ink); }
.ending-count { font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 20px; color: var(--ink); font-variant-numeric: lining-nums; }
.ending-bar { grid-column: 2 / -1; height: 6px; border-radius: 999px; background: #EDE9E4; overflow: hidden; }
.ending-bar span { display: block; height: 100%; border-radius: inherit; background: var(--podium-text); }

.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* White rows with the same soft shadow as the My Stats cards; #1 stays blue (below). */
.row {
  display: flex;
  align-items: center;
  gap: 10.57px;
  padding: 10.57px 14.1px;
  border-radius: 14.1px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.rank {
  flex: none;
  width: 24.66px;
  height: 24.66px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--podium-fill);
  color: var(--podium-text);
  font-weight: 600;
  font-size: 10.57px;
  line-height: 15.86px;
}
.who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.who-name {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.prize {
  margin: 4px 0 1.5px;
  padding: 1.5px 8px;
  border-radius: 999px;
  background: var(--podium-fill);
  color: var(--podium-text);
  font-weight: 600;
  font-size: 10.5px;
  line-height: 14px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.score { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.score-value {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14.1px;
  line-height: 21.14px;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.score-unit { font-size: 12px; line-height: 15px; color: var(--unit); }
/* Ranks 4–10 (full list): soft pink circle and tag. */
.row.rest .rank, .row.rest .prize { background: var(--rest-fill); color: var(--rest-text); }
/* Ranks 11–15: no prize, neutral circle. */
.row.none .rank { background: #EFEFEF; color: var(--quiet); }
/* The player's own row, wherever it lands. */
.row.me { background: var(--rest-fill); } /* your row: the same light pink as the rank circles */
.row.me.rest .rank, .row.me.rest .prize, .row.me.none .rank { background: #FFFFFF; } /* keep them visible on the pink */
.row.me .who-name { font-weight: 700; }
/* #1 row: soft blue. */
.row.first { background: var(--first-row); }
.row.first .rank { background: rgba(255, 255, 255, 0.2); color: #FFFFFF; }
.row.first .who-name, .row.first .score-value { color: #FFFFFF; }
.row.first .prize { background: var(--first-tag); color: #FFFFFF; }
.row.first .score-unit { color: rgba(255, 255, 255, 0.6); }

button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .art.hop { animation: none; }
}