* { 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, #0c4a6e 0%, #b45309 62%, #451a03 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; }
#livesOut { letter-spacing: -3px; font-size: 13px; }
#foesOut { color: #38bdf8; font-size: 12.5px; white-space: nowrap; }

#scoreOut { color: #fed7aa; font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }

#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. */
/* A FIVE-KEY CLUSTER, not a row. Up sits over the middle column and Down under
   it, so the four directions are where a thumb expects them and the PUMP is
   the big one in the centre — it is pressed four times per kill and is the
   only control that has to be found without looking. */
#pad { flex: none; display: grid; grid-template-columns: 1fr 1.35fr 1fr;
       grid-template-rows: auto auto; gap: 6px;
       padding: 6px 4px max(4px, env(safe-area-inset-bottom)); }
#btnUp    { grid-column: 2; grid-row: 1; }
#btnLeft  { grid-column: 1; grid-row: 2; }
#btnPump  { grid-column: 2; grid-row: 2; }
#btnRight { grid-column: 3; grid-row: 2; }
#btnDown  { grid-column: 2; grid-row: 3; }
.pb { min-height: 46px; }
.pbPump { background: #38bdf8 !important; border-color: #0ea5e9 !important; color: #1c0f05 !important; font-size: 24px !important; }
.pbPump span { color: #082f49 !important; }
.pb { min-height: 54px; border-radius: 14px; background: rgba(0,0,0,0.24); border: 3px solid rgba(255,255,255,0.13); color: #fef3c7; font-size: 20px; font-weight: 800; font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; touch-action: manipulation; }
.pb span { font-size: 11px; font-weight: 800; color: #d6a06a; }
.pb:active { transform: translateY(2px); }
.pb:disabled { opacity: 0.42; }

/* 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".
   Sky at the top, sand going darker with depth, sea blue for everything the
   player controls. They sit next to each other on the shelf and a child must
   never open one thinking it is the other. */

.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; }