* { 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%, #0e7490 55%, #14532d 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, #modeRow { 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; }
#roundOut { color: #fffbeb; }
#needOut { color: #38bdf8; font-variant-numeric: tabular-nums; }
#filmOut { letter-spacing: 2px; color: #fde68a; font-size: 15px; }

#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. */
/* No control pad at all: the whole meadow IS the button. A game whose only
   verb is "tap the thing" must not spend a third of a phone on arrows. */

/* 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".
   A MEADOW AT DAWN, and deliberately not Sand Diggers' beach even though the
   two sheets are the same sheet. Dawn amber over cool green; the accent is the
   viewfinder white rather than a colour, because the one thing on screen that
   must read instantly is where your photograph landed. */

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