:root{--sky-top: #bfe6f7;--sky-bottom: #e7f6fb;--grass-top: #8cc63f;--grass-bottom: #5c9e2f;--ink: #3f3a35;--cream: #fffdf8;--accent: #e07a5f;--milk: #fdfbf5;--field-h: clamp(170px, 34dvh, 300px);--gauge-w: 54px;--goat-w: 96px;--bucket-w: 68px}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:Fredoka,Trebuchet MS,Segoe UI,system-ui,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 70%);-webkit-text-size-adjust:100%}.page{display:flex;flex-direction:column;height:100dvh}.message{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;padding:clamp(12px,4vw,40px);padding-right:calc(var(--gauge-w) + clamp(12px,4vw,40px));padding-bottom:0;text-align:center}.message__kicker{margin:0;font-size:clamp(.8rem,2.4vmin,1.1rem);letter-spacing:.18em;text-transform:uppercase;opacity:.65}.message__title{margin:0;font-size:clamp(2rem,8.5vmin,5rem);font-weight:600;line-height:1.05;text-wrap:balance;text-shadow:0 3px 0 rgba(255,255,255,.6)}.message__body{margin:0;font-size:clamp(1.1rem,4vmin,2rem)}.message__hint{margin:.6em 0 0;font-size:clamp(.75rem,2.2vmin,1rem);opacity:.55;transition:opacity .6s ease}.message__hint.is-hidden{opacity:0}.clouds{position:absolute;inset:0 0 auto;height:58%;overflow:hidden;pointer-events:none}.cloud{position:absolute;width:120px;height:38px;border-radius:999px;background:#fffc;animation:drift var(--dur, 90s) linear infinite;animation-delay:var(--delay, 0s)}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:56px;height:56px;left:16px;top:-26px}.cloud:after{width:36px;height:36px;right:22px;top:-18px}.cloud:nth-child(1){top:18%;--cs: 1;--dur: 95s;--delay: -20s}.cloud:nth-child(2){top:42%;--cs: .7;--dur: 130s;--delay: -70s}.cloud:nth-child(3){top:8%;--cs: 1.3;--dur: 160s;--delay: -120s}@keyframes drift{0%{transform:translate(-20vw) scale(var(--cs, 1))}to{transform:translate(115vw) scale(var(--cs, 1))}}.field{position:relative;flex:0 0 var(--field-h);height:var(--field-h);overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}body.mode-follow,body.mode-follow .truck{cursor:none}.field__sky{position:absolute;inset:0 0 74%;background:linear-gradient(180deg,transparent,#f3fae8)}.field__grass{position:absolute;inset:auto 0 0;height:74%;background:radial-gradient(circle at 12% 30%,rgba(255,255,255,.18) 0 14%,transparent 15%),radial-gradient(circle at 68% 18%,rgba(255,255,255,.14) 0 10%,transparent 11%),linear-gradient(180deg,var(--grass-top),var(--grass-bottom));border-top:4px solid #a6d95b}.field__grass:after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(98deg,rgba(255,255,255,.09) 0 3px,transparent 3px 22px)}.goats{position:absolute;inset:26% 0 6%;pointer-events:none}.goat{position:absolute;left:0;top:0;pointer-events:auto;width:var(--goat-w);transform-origin:50% 100%;transform:translate3d(calc(var(--x, 0px) - 50%),calc(var(--y, 0px) - 100%),0) scale(var(--s, 1));transition:opacity .3s ease;will-change:transform}.goat:before{content:"";position:absolute;inset:-12px -8px -10px}.goat__img{display:block;width:100%;height:auto;transform:scaleX(var(--flip, 1));filter:drop-shadow(0 6px 5px rgba(40,60,20,.28));pointer-events:none}.goat--milked{opacity:.45;pointer-events:none}.truck{z-index:200;position:absolute;right:calc(var(--gauge-w) + clamp(4px,1.5vw,20px));bottom:6%;width:clamp(120px,24vw,230px);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.truck img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 6px rgba(40,60,20,.3));pointer-events:none}.truck:before{content:"";position:absolute;inset:-10px}.gauge{position:fixed;top:50%;right:0;width:var(--gauge-w);height:min(52dvh,420px);transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0}.gauge__track{position:relative;flex:1;width:22px;border:3px solid var(--ink);border-radius:999px;background:#40566b24;overflow:hidden}.gauge__fill{position:absolute;inset:auto 0 0;height:0%;background:linear-gradient(180deg,var(--milk),#e9e2d2);transition:height .45s cubic-bezier(.3,1.4,.5,1)}.gauge__label{font-size:.85rem;font-variant-numeric:tabular-nums;opacity:.8}.bucket{position:fixed;left:0;top:0;width:var(--bucket-w);transform:translate3d(calc(var(--bx, -200px) - 50%),calc(var(--by, -200px) - 50%),0);pointer-events:none;z-index:30;filter:drop-shadow(0 4px 4px rgba(40,60,20,.3));will-change:transform}.bucket img{display:block;width:100%;height:auto}.bucket--pinned{padding:8px;border-radius:50%;background:#ffffffb8;box-shadow:0 4px 12px #283c1438;transition:transform .25s ease}.drop{position:fixed;left:0;top:0;width:18px;height:18px;border-radius:50%/60% 60% 40% 40%;background:var(--milk);border:2px solid rgba(64,86,107,.45);pointer-events:none;z-index:29}.toast{position:fixed;left:50%;bottom:calc(var(--field-h) + 26px);padding:14px 26px;border-radius:999px;background:var(--cream);border:3px solid var(--ink);font-size:clamp(1rem,3.5vmin,1.6rem);white-space:nowrap;box-shadow:0 10px 24px #283c1433;transform:translate(-50%) scale(.8);opacity:0;pointer-events:none;z-index:40;transition:opacity .25s ease,transform .25s ease}.toast.is-on{opacity:1;transform:translate(-50%) scale(1)}.confetti{position:fixed;inset:0;pointer-events:none;z-index:35;overflow:hidden}.confetti i{position:absolute;width:10px;height:14px;border-radius:2px}@media(max-width:640px){:root{--gauge-w: 40px;--goat-w: 74px;--bucket-w: 56px;--field-h: clamp(160px, 36dvh, 320px)}.gauge__track{width:16px}.gauge__label{font-size:.72rem}}@media(max-height:480px){:root{--field-h: clamp(130px, 42dvh, 220px)}.message__hint{margin-top:.3em}}@media(prefers-reduced-motion:reduce){.gauge__fill{transition:height .2s linear}.cloud{animation:none;transform:translate(30vw) scale(var(--cs, 1))}}