/* Skyhop — the play surface is a fixed logical world scaled to fit, so the
   physics are identical on every device (same reasoning as Scamper). */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: #134e4a; color: #ccfbf1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  height: 100vh; height: 100dvh;   /* fallback first: dvh is Safari 15.4+ */
  user-select: none; -webkit-user-select: none; touch-action: none;
}
#app { display: flex; flex-direction: column; height: 100%; }
#hdr {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: calc(6px + env(safe-area-inset-top)) 10px 6px;
  background: #042f2e; font-weight: 700; font-size: 14px;
}
/* Reserved space so a changing score can never reflow the header. */
#hudScore, #hudBest, #hudShield {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
#hudScore { flex: 1 1 0; }
#hudBest { flex: 0 0 auto; color: #5eead4; font-size: 12px; }
#hudShield { flex: 0 0 auto; letter-spacing: -1px; }
.pill {
  background: #0f766e; color: inherit; border: 0; border-radius: 10px;
  min-width: 34px; height: 32px; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
/* R-C5: the 44px floor, which this game had been under since it shipped.
   Scoped to the header so a .pill used elsewhere keeps its own size. */
#hdr .pill { min-width: 44px; min-height: 44px; height: auto; }
.pill:active { transform: scale(.94); }

.scr { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; }
.scr.on { display: flex; }
/* R-C15b: these screens CENTRE and SCROLL, which is the one combination that
   puts content out of reach. When the content is taller than the box,
   `justify-content: center` pushes the first child ABOVE the top edge and
   scrollTop cannot go negative. Measured at 375x620 — a phone with its URL bar
   showing — word-sleuth's help began at y = -585: the first three cards could
   not be read or scrolled to, and had not been since it shipped.
   Auto margins on the end children centre identically while the content fits
   and collapse to zero once it does not. */
#scr-menu, #scr-how {
  align-items: center; gap: 10px;
  padding: 14px; overflow-y: auto; overscroll-behavior: contain;
}
#scr-menu > :first-child, #scr-how > :first-child { margin-top: auto; }
#scr-menu > :last-child,  #scr-how > :last-child  { margin-bottom: auto; }
#scr-menu h1 { font-size: 30px; }
.sub { color: #5eead4; font-size: 14px; text-align: center; max-width: 340px; line-height: 1.45; }
.pickLabel { color: #99f6e4; font-size: 13px; font-weight: 700; margin-top: 4px; }
.pickRow { display: flex; gap: 8px; width: 100%; max-width: 380px; }
.pick {
  flex: 1 1 0; min-width: 0;
  background: #115e59; color: inherit; border: 2px solid transparent;
  border-radius: 14px; padding: 9px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
.pick .te { font-size: 20px; }
.pick b { font-size: 13px; }
.pick small { color: #5eead4; font-size: 10px; line-height: 1.25; }
.pick.sel { border-color: #2dd4bf; background: #134e4a; }
.big {
  width: 100%; max-width: 380px;
  background: #115e59; color: inherit; border: 0; border-radius: 14px;
  padding: 13px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.big.primary { background: #2dd4bf; color: #042f2e; }
.big:active { transform: translateY(2px); }
#statsLine { color: #5eead4; font-size: 13px; text-align: center; min-height: 18px; line-height: 1.4; }
.card {
  background: #115e59; border-radius: 14px; padding: 12px 14px;
  width: 100%; max-width: 380px; font-size: 14px; line-height: 1.5;
}
.card h2 { font-size: 15px; margin-bottom: 5px; }

#stageWrap {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: #134e4a; overflow: hidden;
}
canvas#stage { display: block; touch-action: none; }
#touchHint {
  position: absolute; left: 0; right: 0; bottom: calc(6px + env(safe-area-inset-bottom));
  text-align: center; font-size: 11px; color: rgba(255,255,255,.6); pointer-events: none;
}

.ovl {
  position: absolute; inset: 0; z-index: 30;
  display: none; align-items: center; justify-content: center; padding: 18px;
  background: rgba(4, 47, 46, .93);
}
.ovl.on { display: flex; }
.ovlCard {
  background: #115e59; border-radius: 18px; padding: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; max-width: 330px; text-align: center;
}
#ovlTitle { font-size: 23px; font-weight: 800; }
#ovlSub { color: #99f6e4; font-size: 15px; line-height: 1.45; white-space: pre-line; }

.toast-host {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(10px + env(safe-area-inset-top));
  z-index: 9000; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none; width: max-content;
  max-width: calc(100vw - 24px);
}
.toast {
  pointer-events: auto; cursor: pointer;
  padding: 10px 15px; border-radius: 12px;
  background: #f0fdfa; color: #134e4a;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  font-size: 14px; font-weight: 700;
  opacity: 0; transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }