*{box-sizing:border-box}
body{margin:0;overflow:hidden;background:#c8dac0;color:#342c31}
#field{position:fixed;inset:0;overflow:hidden;isolation:isolate;background-image:url('/meadow.svg'),radial-gradient(ellipse at 45% 40%,#e1e9c8 0,#c7dcbf 75%,#bbd4b7 100%);background-size:368px 291px,cover}
.spud{position:absolute;top:0;left:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;will-change:transform;outline:none;user-select:none}
.spud:focus-visible{outline:3px dashed #534169;border-radius:45%;outline-offset:1px}
.shadow{position:absolute;bottom:10%;left:20%;width:64%;height:13%;background:#68876f50;border-radius:50%}
.hopper,.turn,.face,.back{position:absolute;inset:0;display:block}
.turn{transform-style:preserve-3d;transition:transform .46s cubic-bezier(.23,.8,.32,1)}
.flipped .turn{transform:rotateY(180deg)}
.face,.back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.back{transform:rotateY(180deg)}
.spud svg{width:100%;height:100%;overflow:visible}
.chosen{filter:drop-shadow(0 0 6px #fff6ac)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:10000;overflow:hidden}
#confetti i{position:absolute;top:-5vh;width:11px;height:18px;border-radius:4px;animation:fall var(--time) linear infinite}
@keyframes fall{to{transform:translate(var(--drift),110vh) rotate(440deg)}}
#again{position:fixed;z-index:10001;bottom:24px;right:24px;border:2px solid #423936;background:#fff5da;color:#493e39;border-radius:50%;width:48px;height:48px;cursor:pointer}
#again svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.turn{transition:none}#confetti i{animation:none;top:var(--quiet-y)}}
.note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);display:grid;place-items:center;width:clamp(134px,10vw,168px);min-height:86px;padding:16px 12px 14px;background:linear-gradient(150deg,#fff5a7,#ffe277);color:#3a2d36;font:600 clamp(16px,1.2vw,19px)/1.18 "Marker Felt","Trebuchet MS",sans-serif;text-align:center;text-wrap:balance;box-shadow:1px 4px 5px #46352a36;border-radius:1px 2px 9px 2px}
.note::before{content:"";position:absolute;width:36px;height:11px;top:-5px;left:calc(50% - 18px);transform:rotate(3deg);background:#f1d5a9e8}
.note::after{content:"";position:absolute;right:0;bottom:0;border:5px solid transparent;border-top-color:#eac455;border-left-color:#eac455}