:root { --paper:#faf8f3; --ink:#222; --hand:"Caveat","Segoe Print","Bradley Hand","Comic Sans MS",cursive; --body:"Patrick Hand","Segoe Print","Comic Sans MS",cursive; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:var(--paper); color:var(--ink); overscroll-behavior:none; -webkit-tap-highlight-color:transparent; }
#stage { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#stage:active { cursor:grabbing; }
.brand { position:fixed; left:max(20px,env(safe-area-inset-left)); top:max(14px,env(safe-area-inset-top)); margin:0; font:700 clamp(28px,5vw,40px)/1 var(--hand); letter-spacing:.01em; pointer-events:none; transform:rotate(-2deg); }
.hint { position:fixed; left:0; right:0; bottom:max(18px,env(safe-area-inset-bottom)); margin:0; text-align:center; font:clamp(16px,3.6vw,20px)/1.3 var(--body); color:#555; pointer-events:none; padding:0 16px; transition:opacity .8s ease; }
.hint.gone { opacity:0; }
.fallback { position:fixed; inset:0; display:grid; place-items:center; margin:0; padding:24px; text-align:center; font:22px/1.4 var(--body); background:var(--paper); }
.fallback[hidden] { display:none; }