* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, #0b1830 0%, #10233a 100%);
  color: #e8eef7; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; overflow: hidden;
}
#app { height: 100%; display: flex; flex-direction: column; max-width: min(100%, 820px); margin: 0 auto; }

#hdr { display: flex; align-items: center; gap: 8px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
.pill { background: #1d3a5c; border: 2px solid #2c5482; border-radius: 999px; padding: 6px 11px;
  font-weight: 800; font-size: 15px; min-height: 42px; display: flex; align-items: center;
  cursor: pointer; color: inherit; font-family: inherit; }
/* 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; }
#hdrHome { border: none; background: #f59e0b; color: #10233a; font-size: 18px; }
/* single line — the status must never reflow the lane */
#status { flex: 1; min-width: 0; text-align: center; font-weight: 800; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.scr { flex: 1 1 auto; min-height: 0; display: none; flex-direction: column; padding: 6px 12px 12px; }
.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; 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: clamp(28px, 8vw, 40px); }
.sub { color: #9fb6d4; font-weight: 600; font-size: 14px; text-align: center; max-width: 340px; line-height: 1.45; }
.pickLabel { color: #cfe0f5; font-size: 13px; font-weight: 700; }
.pickRow { display: flex; gap: 8px; width: 100%; max-width: 380px; }
.pick { flex: 1 1 0; min-width: 0; background: #1d3a5c; color: inherit; border: 2px solid transparent;
  border-radius: 14px; padding: 9px 5px; cursor: pointer; font-family: inherit;
  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: #9fb6d4; font-size: 10px; line-height: 1.25; }
.pick.sel { border-color: #f59e0b; background: #24487097; }
.seg { display: flex; width: 100%; max-width: 380px; background: #1d3a5c; border: 2px solid #2c5482;
  border-radius: 999px; overflow: hidden; }
.seg button { flex: 1; border: 0; background: transparent; color: inherit; font-weight: 800;
  font-size: 15px; padding: 11px 4px; cursor: pointer; font-family: inherit; }
.seg button.sel { background: #f59e0b; color: #10233a; }
.big { width: 100%; max-width: 380px; background: #1d3a5c; color: inherit; border: 2px solid #2c5482;
  border-radius: 14px; padding: 12px; font-size: 17px; font-weight: 800; cursor: pointer; font-family: inherit; }
.big.primary { background: #f59e0b; border-color: #b45309; color: #10233a; }
.big:active { transform: translateY(2px); }
#statsLine { color: #9fb6d4; font-size: 13px; font-weight: 700; text-align: center; }

/* ---- scoresheet (R17: on the play screen, never behind a button) ---- */
#cards { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.card-row { background: #16304e; border: 2px solid #23456d; border-radius: 10px; padding: 4px 5px; }
.card-row.turn { border-color: #f59e0b; }
.card-head { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; font-weight: 800; color: #9fb6d4; padding: 0 2px 3px; }
.card-head .who { color: #e8eef7; }
.card-head .tot { color: #f59e0b; font-size: 14px; }
.sheet { display: flex; gap: 2px; }
.fr { flex: 1 1 0; min-width: 0; border-radius: 4px; background: #10233a; overflow: hidden; }
.fr.now { background: #27496f; }
.fr .bx { display: flex; height: 13px; }
.fr .b { flex: 1 1 0; font-size: 9px; font-weight: 800; line-height: 13px; text-align: center;
  border-left: 1px solid #23456d; }
.fr .b:first-child { border-left: 0; }
.fr .tt { height: 15px; font-size: 11px; font-weight: 800; line-height: 15px; text-align: center; color: #f7d08a; }
/* R6: a frame that is not final shows a dash, never a number */
.fr .tt.pending { color: #55708f; }

#stageWrap { flex: 1 1 auto; min-height: 0; position: relative; display: flex;
  align-items: center; justify-content: center; }
#stage { display: block; border-radius: 10px; }

#actions { display: flex; gap: 8px; margin-top: 8px; }
.act { flex: 1; border: 2px solid #2c5482; border-radius: 14px; min-height: 54px; font-size: 17px;
  font-weight: 800; background: #1d3a5c; color: inherit; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; }
.act.primary { background: #f59e0b; border-color: #b45309; color: #10233a; }
.act:active { transform: translateY(2px); }
.act:disabled { opacity: 0.4; }

.ovl { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center;
  background: rgba(8,18,34,0.92); padding: 16px; border-radius: 10px; }
.ovl.on { display: flex; }
.ovlCard { text-align: center; width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 10px; }
#ovlTitle { font-size: 24px; font-weight: 800; }
#ovlSub { color: #9fb6d4; font-weight: 700; white-space: pre-line; line-height: 1.45; }

#scr-how .card { background: #16304e; border: 2px solid #23456d; border-radius: 14px; padding: 13px;
  margin-bottom: 9px; font-size: 14px; line-height: 1.55; font-weight: 600; width: 100%; max-width: 420px; }
#scr-how h2 { margin-bottom: 6px; font-size: 16px; }

.toast-host { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; align-items: center; z-index: 40; pointer-events: none; }
.toast { background: #e8eef7; color: #10233a; font-weight: 800; font-size: 14px; padding: 8px 15px;
  border-radius: 999px; opacity: 0; transition: opacity .2s; max-width: 90vw; text-align: center;
  pointer-events: auto; }
.toast.in { opacity: 1; }

/* The menu has to fit a 320x568 screen with nothing cut off. */
@media (max-height: 620px) {
  #scr-menu { gap: 6px; }
  #scr-menu h1 { font-size: 25px; }
  .sub { font-size: 12.5px; }
  .pick { padding: 7px 5px; }
  .big { padding: 10px; font-size: 16px; }
}

/* docs/offline-pwa.md R-C15 — the PAGE must never scroll.
   The product is a fixed frame: header, a named scroll region, footer. If the
   document scrolls too, the header scrolls away, the version chip drifts, and
   a drag that reaches the end of the inner region chains out to the page and
   drags the whole board under the player's thumb. That is the "double scroll".
   `overflow: hidden` stops the second scrollbar; `overscroll-behavior: none`
   stops the chaining, which is the half that is invisible on a desktop mouse
   and obvious on a phone. */
html, body {
    overflow: hidden;
    overscroll-behavior: none;
}