* { 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, #292524 0%, #1c1917 55%, #0c0a09 100%);
  color: #fef3c7; user-select: none; -webkit-user-select: none;
  touch-action: none; overflow: hidden;
}
#app { height: 100%; display: flex; flex-direction: column; max-width: min(100%, 860px); margin: 0 auto; }

#hdr { display: flex; align-items: center; gap: 8px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
#hdr .pill { background: rgba(0,0,0,0.24); border: 2px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 6px 11px; font-weight: 800; font-size: 15px; min-width: 44px; min-height: 44px; display: flex; align-items: center; cursor: pointer; justify-content: center; color: inherit; font-family: inherit; }
#hdrHome { border: none; background: #38bdf8; color: #1c0f05; font-size: 18px; }
#hdrStatus { flex: 1; min-width: 0; text-align: center; font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fed7aa; }

.scr { flex: 1; display: none; flex-direction: column; overflow-y: auto; padding: 6px 14px 18px; }
#scr-play { padding: 6px 4px 6px; }
.scr.on { display: flex; }

#scr-menu { align-items: center; text-align: center; gap: 12px; justify-content: center; }
#scr-menu h1 { font-size: clamp(30px, 8.5vw, 44px); color: #fffbeb; }
#scr-menu .sub { color: #fed7aa; font-weight: 600; margin-bottom: 4px; }
#tierRow { display: flex; gap: 8px; width: 100%; }
.tierCard { flex: 1; background: rgba(0,0,0,0.22); border: 3px solid rgba(255,255,255,0.13); border-radius: 16px; padding: 10px 4px; font-weight: 800; font-size: 14px; line-height: 1.35; cursor: pointer; color: #fef3c7; font-family: inherit; }
.tierCard small { display: block; color: #fed7aa; font-weight: 700; font-size: 11.5px; }
.tierCard .te { font-size: 26px; display: block; }
.tierCard.sel { border-color: #38bdf8; background: rgba(125,211,252,0.16); }

button.big { width: 100%; border-radius: 16px; min-height: 56px; font-size: 19px; font-weight: 800; background: rgba(0,0,0,0.22); color: #fef3c7; border: 3px solid rgba(255,255,255,0.13); cursor: pointer; font-family: inherit; }
button.big:active { transform: translateY(2px); }
button.big.primary { background: #38bdf8; border-color: #0ea5e9; color: #1c0f05; min-height: 44px;}
#statsLine { color: #fed7aa; font-weight: 700; font-size: 13px; }

/* ⚙️ Settings — the shared disclosure shape (R-C23). */
#custom { width: 100%; background: rgba(0,0,0,0.22); border: 3px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 10px 12px; text-align: left; }
#custom summary { font-weight: 800; font-size: 16px; cursor: pointer; list-style: none; }
#custom summary::-webkit-details-marker { display: none; }
.field { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.field .lbl { flex: 1; font-weight: 700; font-size: 14px; color: #fde68a; }
.seg { display: flex; gap: 4px; background: rgba(0,0,0,0.3); border-radius: 12px; padding: 3px; }
.seg button { min-height: 44px; min-width: 58px; border: none; border-radius: 9px; background: transparent; color: #d6a06a; font-weight: 800; font-size: 13px; font-family: inherit; cursor: pointer; }
.seg button.on { background: #38bdf8; color: #1c0f05; min-height: 44px;}
.blurb { color: #fed7aa; font-weight: 700; font-size: 12.5px; margin-top: 10px; line-height: 1.45; }

/* play */
#playTop { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 800; padding: 2px 6px 6px; font-size: 15px; min-height: 22px; }
#lvlOut { color: #fffbeb; }
#homeOut { color: #34d399; font-variant-numeric: tabular-nums; }
#outOut { color: #fbbf24; font-variant-numeric: tabular-nums; }
#timeOut { color: #fde68a; font-variant-numeric: tabular-nums; }



#stageWrap { flex: 1; position: relative; min-height: 0; }
canvas#stage { display: block; touch-action: none; }


/* Two steering thumbs and a shine button. The shine is DOUBLE WIDTH because
   it is pressed far more often than either arrow and is the one control a
   child must be able to hit without looking down. */
/* Four controls, and the PLUNGER is the widest because it is the one every
   player reaches for first and the one that has to be held rather than
   tapped. The two flippers sit at the outside edges, under the thumbs. */
/* R10. THE JOB BAR IS THE BUDGET. Each button carries how many of that job
   are left, so "can I afford this" and "what does this do" are one glance
   rather than a readout somewhere else you have to connect to it. It scrolls
   sideways rather than wrapping, because a bar that changes height between
   nests moves the nest itself. */
#jobRow { flex: none; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
          padding: 6px 8px max(6px, env(safe-area-inset-bottom)); scrollbar-width: none; }
/* Hidden by SIZE, not by display: check-stability reads a `display: none`
   anywhere near a play-screen id as a collapsing panel, and it is right to —
   the pseudo-element is the one place the distinction does not hold. */
#jobRow::-webkit-scrollbar { width: 0; height: 0; }
.jobBtn { flex: none; min-width: 56px; min-height: 54px; border-radius: 14px;
          background: rgba(0,0,0,0.3); border: 3px solid rgba(255,255,255,0.14);
          color: #fef3c7; font-family: inherit; cursor: pointer;
          display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.jobBtn .je { font-size: 21px; line-height: 1; }
.jobBtn b { font-size: 12px; font-weight: 800; color: #fbbf24; }
.jobBtn.on { border-color: #fbbf24; background: rgba(251,191,36,0.18); }
.jobBtn:disabled { opacity: 0.35; }
.jobBtn:active { transform: translateY(2px); }

/* THE PALETTE IS A BEACH AT LOW TIDE and it is deliberately not Crumb Chase's
   pantry, even though the two games are both "a thing in a grid being chased".
   UNDERGROUND, and deliberately darker than anything else on the shelf. The
   nest is the only place a child is asked to READ A MAP rather than react to
   one, so the contrast that matters is soil against rock -- everything else is
   kept quiet so those two are the loudest thing on the screen. */

.ovl { position: absolute; inset: 0; display: none; align-items: flex-start; justify-content: center; background: rgba(2,6,23,0.9); border-radius: 12px; padding: 16px; overflow-y: auto; overscroll-behavior: contain;}
.ovl.on { display: flex; }
.ovlCard { text-align: center; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; margin: auto;}
#ovlTitle { font-size: 26px; font-weight: 800; color: #fffbeb; }
#ovlSub { color: #fed7aa; font-weight: 700; min-height: 22px; line-height: 1.45; }
/* A result carries its evidence — the rows are why, not decoration. */
.rows { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 6px; }
.rows .row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 700; color: #d6a06a; }
.rows .row b { color: #fef3c7; font-variant-numeric: tabular-nums; }

#scr-how .card { background: rgba(0,0,0,0.22); border: 3px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 14px; margin-bottom: 10px; font-size: 15px; line-height: 1.55; font-weight: 600; }
#scr-how h2 { margin-bottom: 8px; color: #fffbeb; }

.legend { display: flex; flex-direction: column; gap: 6px; }
.lgRow { display: flex; align-items: center; gap: 10px; }
.lgArt { flex: none; width: 66px; display: flex; align-items: center; justify-content: center; font-size: 15px; letter-spacing: -1px; }

.lgTxt { display: flex; flex-direction: column; min-width: 0; }
.lgTxt b { font-size: 14px; font-weight: 800; }
.lgTxt small { font-size: 12.5px; color: #d6a06a; line-height: 1.3; font-weight: 600; }

#toast { position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%); background: #fffbeb; color: #1c0f05; font-weight: 800; padding: 10px 16px; border-radius: 14px; opacity: 0; transition: opacity 0.25s; pointer-events: none; z-index: 40; max-width: calc(100vw - 28px); text-align: center; line-height: 1.35; }
#toast.on { opacity: 1; }

/* docs/offline-pwa.md R-C15 — the PAGE must never scroll. */
html, body { overflow: hidden; overscroll-behavior: none; }
.scr { overscroll-behavior: contain; }