/* Peekaboo Farm — the whole screen is the stage. No child-facing chrome. */
:root { --bg: #3aa8ff; --accent: #ff6b5e; --accent-ink: #fff; --focus: #ffb703; }
body { background: linear-gradient(180deg, #3aa8ff, #9fe0ff 40%, #52c96d 41%, #2fae52); }
.stage { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.gpu, .gpu canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hits { position: absolute; inset: 0; }
.hit { position: absolute; border-radius: 0; /* square: rounded corners left dead spots */ background: transparent; touch-action: none; min-width: 96px; min-height: 96px; }
.hit:focus-visible { outline: 5px solid var(--focus); outline-offset: 2px; }
.corner { position: absolute; width: 64px; height: 64px; touch-action: none; }
.corner.tl { left: 0; top: 0; } .corner.tr { right: 0; top: 0; } .corner.bl { left: 0; bottom: 0; } .corner.br { right: 0; bottom: 0; }
.hold-ring { position: absolute; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 6px solid #fff; border-top-color: var(--focus); opacity: 0; pointer-events: none; }
.hold-ring.is-on { opacity: .9; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.start { cursor: pointer; position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; align-content: center; gap: 18px; background: radial-gradient(circle at 50% 42%, rgb(255 255 255 / .28), rgb(255 255 255 / 0) 60%); /* the cloud curtain is drawn behind (v2) */  } /* no backdrop-filter over the live scene (MOBILE_PERFORMANCE_GUIDE.md) */
.start-btn { width: min(56vmin, 260px); height: min(56vmin, 260px); border-radius: 50%; background: #fff; box-shadow: 0 10px 0 #d9b98c, 0 24px 40px rgb(0 0 0 / .25); display: grid; place-items: center; animation: pop 1.6s ease-in-out infinite; }
.start-art { width: 78%; height: 78%; display: block; } .start-art svg { width: 100%; height: 100%; }
.start-note { font-family: var(--font-ui); font-weight: 700; color: #1f3a5a; text-shadow: 0 0 6px #fff, 0 0 12px #fff; /* readable on the cloud curtain (v2) */ text-align: center; padding: 0 20px; font-size: .95rem; }
.nogl { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; align-content: center; gap: 14px; background: #fff; padding: 24px; text-align: center; font-weight: 700; }