:root{--ink:#2a1d12;--sat:env(safe-area-inset-top);--sar:env(safe-area-inset-right);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left);--font:"Arial Rounded MT Bold", ui-rounded, "Trebuchet MS", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;overscroll-behavior:none;background:radial-gradient(circle at 50% 30%,#3d7d33,#16361a 75%);margin:0;overflow:hidden}#stage{position:fixed}canvas{touch-action:none;cursor:pointer;border-radius:14px;width:100%;height:100%;display:block;box-shadow:0 20px 60px #00000073}.overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#14281473;border-radius:14px;place-items:center;padding:2%;display:grid;position:absolute;inset:0}.overlay[hidden]{display:none}.card{border:4px solid var(--ink);box-shadow:0 8px 0 var(--ink);text-align:center;background:#fff8e1;border-radius:24px;max-width:620px;max-height:100%;padding:clamp(10px,2.5vw,28px) clamp(14px,4vw,44px);animation:.35s cubic-bezier(.2,1.6,.4,1) pop;overflow:auto}@keyframes pop{0%{opacity:0;transform:scale(.7)rotate(-3deg)}}h1{letter-spacing:-1px;margin:0;font-size:clamp(26px,6vw,58px);font-weight:900;line-height:1;transform:rotate(-2deg)}h1 span{-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;display:inline-block}.ducks{color:#ffd93a;animation:2.4s ease-in-out infinite wobble}.dinos{color:#6fbf3f;animation:2.4s ease-in-out -1.2s infinite wobble}h1[hidden]{display:none}h1.result{white-space:nowrap;font-size:clamp(24px,5vw,46px)}.vs{color:#ff6b5a;font-size:.6em}@keyframes wobble{50%{transform:rotate(3deg)translateY(-3px)}}.tagline{margin:12px 0;font-size:clamp(13px,2vw,17px);font-style:italic}.small{opacity:.75;margin:10px 0 0;font-size:13px}.howto{text-align:left;margin:10px auto;padding-left:1.2em;font-size:clamp(12px,1.8vw,15px);line-height:1.45}.howto b{color:#b8433a}.stats{margin:10px 0;font-size:clamp(14px,2.2vw,19px);line-height:1.6}button{font:900 clamp(18px, 3vw, 26px) var(--font);color:var(--ink);border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);cursor:pointer;background:#ffd93a;border-radius:16px;margin-top:8px;padding:10px 44px;transition:transform 80ms}button:hover{background:#ffe56b;transform:translateY(-2px)rotate(-1deg)}button:active{box-shadow:0 2px 0 var(--ink);transform:translateY(4px)}button{touch-action:manipulation}.rotate{z-index:10;color:#fff;text-align:center;background:radial-gradient(circle at 50% 30%,#3d7d33,#16361a 75%);place-content:center;justify-items:center;gap:28px;font-size:22px;font-weight:900;display:grid;position:fixed;inset:0}.rotate[hidden]{display:none}.rotate small{opacity:.8;font-size:15px;font-weight:600}.phone{background:#ffd93a;border:5px solid #fff;border-radius:14px;width:70px;height:120px;animation:2.2s ease-in-out infinite turn;position:relative}.screen-dot{background:var(--ink);border-radius:2px;width:14px;height:4px;margin-left:-7px;position:absolute;bottom:8px;left:50%}@keyframes turn{0%,25%{transform:rotate(0)}55%,to{transform:rotate(-90deg)}}@media (height<=500px){.card{box-shadow:0 5px 0 var(--ink);border-radius:18px;padding:8px 22px}h1{font-size:min(9vh,6vw)}h1.result{font-size:min(8vh,5vw)}.tagline{margin:6px 0;font-size:13px}.howto{margin:4px auto;font-size:12.5px;line-height:1.3}.stats{margin:6px 0;font-size:14px;line-height:1.4}.small{margin-top:4px;font-size:11.5px}button{box-shadow:0 4px 0 var(--ink);margin-top:4px;padding:6px 34px;font-size:19px}}