/* Boing — the play surface is a fixed logical WIDTH scaled to fit; the visible
   height is whatever the screen shows. Mirror of Skyhop, which scrolls the other way. */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: #1e1b4b; color: #ede9fe;
  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: #151136; font-weight: 700; font-size: 14px;
}
/* Reserved space so a changing score can never reflow the header. */
#hudHeight, #hudBest, #hudBalloon {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
#hudHeight { flex: 1 1 0; }
#hudBest { flex: 0 0 auto; color: #c4b5fd; font-size: 12px; }
#hudBalloon { flex: 0 0 auto; letter-spacing: -1px; }
.pill {
  background: #4c1d95; 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: #c4b5fd; font-size: 14px; text-align: center; max-width: 340px; line-height: 1.45; }
.pickLabel { color: #ddd6fe; 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: #3b0764; 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: #c4b5fd; font-size: 10px; line-height: 1.25; }
.pick.sel { border-color: #a78bfa; background: #1e1b4b; }
/* A one-line switch rather than a third pickRow: the menu already has to fit a
   320x568 screen (spec R11a), and two tall card rows plus a third would push
   Play off the bottom. */
.toggle {
  width: 100%; max-width: 380px;
  background: #3b0764; color: inherit; border: 2px solid transparent;
  border-radius: 999px; padding: 9px 14px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 42px;
}
.toggle .state { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.toggle[aria-pressed="true"]  { border-color: #a78bfa; }
.toggle[aria-pressed="true"]  .state { background: #a78bfa; color: #151136; }
.toggle[aria-pressed="false"] { border-color: #64748b; }
.toggle[aria-pressed="false"] .state { background: #475569; color: #e2e8f0; }
.toggle:active { transform: translateY(2px); }

/* The menu fitted a 320x568 screen with zero overflow before this control
   existed, and it has to still. Below that height everything tightens rather
   than the toggle being dropped — a setting you cannot reach on a small phone
   is not a setting. Tap targets stay at or above 38px. */
@media (max-height: 620px) {
  #scr-menu { gap: 6px; padding: 10px 14px; }
  #scr-menu h1 { font-size: 25px; }
  .sub { font-size: 13px; }
  .pickLabel { margin-top: 0; }
  .pick { padding: 7px 6px; }
  .toggle { min-height: 38px; padding: 7px 12px; }
  .big { padding: 11px; }
}

.big {
  width: 100%; max-width: 380px;
  background: #3b0764; color: inherit; border: 0; border-radius: 14px;
  padding: 13px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.big.primary { background: #a78bfa; color: #151136; }
.big:active { transform: translateY(2px); }
#statsLine { color: #c4b5fd; font-size: 13px; text-align: center; min-height: 18px; line-height: 1.4; }
.card {
  background: #3b0764; 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: #1e1b4b; 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(30, 27, 75, .94);
}
.ovl.on { display: flex; }
.ovlCard {
  background: #3b0764; 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: #ddd6fe; 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: #f5f3ff; color: #1e1b4b;
  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; } }