* { box-sizing: border-box; }
:root { --app-height: 100dvh; --layout-revision: root-dvh-10; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
html { height: var(--app-height); }
/* On the measured iPhone PWA, dvh excludes 68px while lvh fills the screen.
   Use the browser's full viewport unit in installed mode, without offsets. */
@media (display-mode: standalone) {
  :root { --app-height: 100lvh; --layout-revision: root-lvh-12; }
}
body { background: #34452c; color: #233346; font-family: 'Avenir Next', 'Trebuchet MS', sans-serif; }
button { border: 0; padding: 0; background: none; color: inherit; font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; }
button:focus-visible { outline: 3px solid #f2e5c9; outline-offset: 4px; }
img { display: block; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* One viewport height flows through html, body, and the illustrated game. */
#app { position: relative; width: 100%; height: 100%; margin: 0; overflow: hidden; isolation: isolate; }
.background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene { position: absolute; inset: 0; touch-action: manipulation; }
.world { position: absolute; inset: 0; }
.greyson { position: absolute; left: 50%; top: max(4%, calc(var(--safe-top) + 8px)); width: 46%; height: 28%; object-fit: contain; transform: translateX(-50%); transform-origin: 50% 90%; }
.hiding-place { position: absolute; transform: translate(-50%, -50%); }
.hiding-place .prop { width: 100%; height: 100%; object-fit: contain; }
.bug-anchor { position: absolute; width: 100px; height: 100px; transform: translate(-50%,-50%); pointer-events: none; }
.discovery { width: 100%; height: 100%; pointer-events: none; }
.bug-image { width: 100%; height: 100%; object-fit: contain; }
.discovery-name { position: absolute; left: 0; right: 0; top: 30%; margin: 0; text-align: center; font-size: 26px; font-weight: 800; pointer-events: none; }
.leaf-fleck { position: absolute; width: 20px; height: 20px; object-fit: contain; }
.visitor { position: absolute; top: 35%; display: flex; gap: 12px; pointer-events: none; }
.visitor img { width: 48px; height: 48px; object-fit: contain; }
.background[data-light="golden"] { filter: brightness(1.05) saturate(1.05); }
.background[data-light="dusk"] { filter: brightness(.91) saturate(.88); }
[hidden] { display: none !important; }
.scene { bottom: calc(74px + var(--safe-bottom)); top: var(--safe-top); }
.waiting .greyson { top: 29%; height: 37%; width: 66%; }
.intro { position: absolute; inset: 0; }
.title { position: absolute; top: max(11%, calc(var(--safe-top) + 8px)); left: 5%; width: 90%; text-align: center; }
.title h1 { font-size: clamp(38px, 11vw, 52px); line-height: 1; letter-spacing: -2px; font-weight: 900; margin: 0; }
.title p { font-size: 17px; font-weight: 600; margin: 13px 0 0; }
.intro-rock { position: absolute; width: 27%; height: 17%; object-fit: contain; bottom: 22%; left: 12%; }
.intro-ladybug { position: absolute; width: 19%; height: 12%; object-fit: contain; bottom: 23%; right: 14%; transform: rotate(-14deg); }
.clay-button { position: relative; min-height: 78px; width: 100%; flex-shrink: 0; }
.clay-button > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.clay-button > span { position: relative; display: block; padding: 12px 20px; color: #fff8e8; font-size: 20px; font-weight: 800; }
.start-button { position: absolute; bottom: max(10%, calc(var(--safe-bottom) + 8px)); width: 88%; left: 6%; height: 102px; }
.start-button > span { text-transform: uppercase; font-size: 25px; letter-spacing: .2px; }
.game-controls { position: absolute; bottom: calc(8px + var(--safe-bottom)); left: 14px; right: 14px; height: 70px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.game-controls button { pointer-events: auto; }
.book-button { width: 88px; height: 76px; }
.book-button img { width: 100%; height: 58px; object-fit: contain; }
.book-button span { display: block; font-size: 12px; line-height: 14px; font-weight: 800; }
.parent-gate { min-width: 88px; min-height: 64px; text-align: right; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.parent-gate span { display: block; font-size: 12px; font-weight: 800; }
.parent-gate small { font-size: 10px; }
.parent-gate[data-holding] { opacity: .5; }
.paper-dialog { --dialog-top: max(16px, calc(var(--safe-top) + 8px)); --dialog-bottom: max(14px, calc(var(--safe-bottom) + 8px)); position: fixed; inset: var(--dialog-top) 0 var(--dialog-bottom); width: min(calc(100% - 20px), 460px); height: calc(100% - var(--dialog-top) - var(--dialog-bottom)); max-height: 820px; margin: auto; padding: 0; border: 0; background: transparent; color: #233346; overflow: hidden; }
.paper-dialog::backdrop { background: rgb(35 51 46 / .55); }
.paper-surface { position: absolute; inset: 0; width: 100%; height: 100%; }
.paper-content { position: relative; height: 100%; padding: 28px 24px 20px; display: flex; flex-direction: column; gap: 14px; }
.paper-content h2 { margin: 0; text-align: center; font-size: 30px; line-height: 1.15; font-weight: 800; }
.bug-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); flex: 1; min-height: 0; gap: 12px 16px; align-content: start; }
.book-bug { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; font-size: 15px; font-weight: 700; }
.book-bug img { width: 100%; height: min(90px, 9dvh); min-height: 0; object-fit: contain; margin-bottom: 8px; }
.empty-book { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-book img { width: 70%; }
.empty-book p { max-width: 180px; line-height: 1.5; }
.dialog-close { margin-top: auto; }
/* Give settings a definite full-screen box; do not derive its height from
   children with percentage max-heights (a circular intrinsic-size constraint). */
.parent-panel { inset: 0; width: 100%; max-width: none; height: var(--app-height); max-height: none; margin: 0; }
.parent-panel .paper-content { height: 100%; max-height: none; padding: calc(var(--safe-top) + 26px) max(24px, calc(env(safe-area-inset-right, 0px) + 16px)) calc(var(--safe-bottom) + 26px) max(24px, calc(env(safe-area-inset-left, 0px) + 16px)); gap: 12px; overflow-y: auto; }
/* Crop the transparent rim of the authored paper so it covers the whole panel. */
.parent-panel .paper-surface { object-fit: cover; transform: scale(1.1); }
.parent-panel .clay-button { min-height: 64px; }
.sound-controls { display: flex; flex-direction: column; flex-shrink: 0; }
.sound-switch { display: grid; grid-template-columns: minmax(0, 1fr) 28px 88px; align-items: center; gap: 10px; width: 100%; min-height: 64px; text-align: left; }
.sound-switch-label { font-size: 18px; font-weight: 700; }
.sound-switch-state { font-size: 14px; font-weight: 700; text-align: right; }
.sound-switch-art { width: 88px; height: 48px; object-fit: contain; }
.sound-switch:focus-visible { outline-color: #233346; outline-offset: 0; }
.sound-switch:disabled { color: #676c67; cursor: default; }
.sound-switch:disabled .sound-switch-art { filter: grayscale(1); opacity: .55; }
.sound-master-note { margin: 0; font-size: 13px; line-height: 18px; text-align: right; }
.voice-note { margin: 0; font-size: 12px; text-align: center; }
.parent-info { margin: 0; font-size: 14px; line-height: 1.45; }
.parent-actions { display: flex; gap: 12px; flex-shrink: 0; margin-top: auto; }
.parent-actions > .clay-button { flex: 1; width: auto; min-width: 0; }
.screen-check-button { flex: 0 0 88px; min-height: 48px; font-size: 12px; font-weight: 700; }
.screen-check-output { flex: 1; min-height: 0; margin: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 ui-monospace, monospace; user-select: text; }
.screen-check-notice { margin: 0; font-size: 12px; }
.screen-check-actions { display: flex; gap: 12px; flex-shrink: 0; }
.screen-check-actions button { flex: 1; min-height: 44px; font-size: 14px; font-weight: 700; }
@media (max-height: 700px) {
  .paper-content { padding: 22px 20px 15px; gap: 10px; }
  .paper-content h2 { font-size: 25px; }
  .clay-button { min-height: 66px; }
  .book-bug img { margin-bottom: 4px; }
  .bug-grid { gap: 6px 12px; }
  .title { top: max(9%, calc(var(--safe-top) + 8px)); }
}
@media (max-height: 500px) {
  .parent-panel .paper-content { padding-top: calc(var(--safe-top) + 12px); padding-bottom: calc(var(--safe-bottom) + 12px); gap: 6px; }
  .parent-panel .paper-content h2 { font-size: 23px; }
  .parent-panel .clay-button { min-height: 48px; }
  .parent-panel .clay-button > span { padding: 10px 20px; font-size: 18px; }
}