*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;overflow:hidden;background:#d8e8cf;color:#3d3439;font-family:"ZCOOL KuaiLe","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
button{font:inherit;color:inherit}

#field{position:fixed;inset:0;overflow:hidden;isolation:isolate;background:url(meadow.svg) 0 0/320px 260px,radial-gradient(ellipse at 50% 38%,#f1f6df 0,#dbe9cf 68%,#cbdfc3 100%)}

.mo{position:absolute;top:0;left:0;padding:0;border:0;background:none;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;will-change:transform;outline:none}
.mo.held{cursor:grabbing}
.mo:focus-visible .hopper{outline:3px dashed #6b5a92;outline-offset:2px;border-radius:42%}
.shadow{position:absolute;left:20%;bottom:-3%;width:60%;height:9%;border-radius:50%;background:#5f7f6448;transform-origin:50% 50%}
.hopper,.turn,.face,.back{position:absolute;inset:0;display:block}
.turn{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.25,.8,.3,1)}
.flipped .turn{transform:rotateY(180deg)}
.face,.back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.back{transform:rotateY(180deg)}
.mo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}

/* Gliding swaps the sitting picture for the one with the flying membrane spread. */
.mo .fly,.gliding .face .sit{visibility:hidden}
.gliding .fly{visibility:visible}
.lucky{filter:drop-shadow(0 0 10px #fff3a8) drop-shadow(0 0 3px #fff)}

.note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);display:grid;place-items:center;width:clamp(136px,11vw,178px);min-height:88px;padding:18px 13px 14px;background:linear-gradient(160deg,#fffbe4,#ffeeb3);color:#3d3439;font-size:clamp(16px,1.25vw,19px);line-height:1.3;text-align:center;text-wrap:balance;box-shadow:1px 4px 6px #4a40462e;border-radius:2px 3px 12px 3px}
.lucky .note{background:linear-gradient(160deg,#ffeef3,#ffcadb);font-size:clamp(17px,1.35vw,20px)}
.note::before{content:"";position:absolute;top:-6px;left:calc(50% - 20px);width:40px;height:13px;transform:rotate(4deg);background:repeating-linear-gradient(90deg,#f7c9d2e6 0 6px,#fbdde3e6 6px 12px)}
.note::after{content:"";position:absolute;right:0;bottom:0;border:6px solid transparent;border-top-color:#f2d98a;border-left-color:#f2d98a}

.brand{position:fixed;z-index:2;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));pointer-events:none;padding:8px 14px 9px;background:#fffdf6d9;border:2px solid #4a4046;border-radius:18px;box-shadow:0 3px 0 #4a404626}
.brand h1{margin:0;font-weight:400;font-size:24px;line-height:1.1;letter-spacing:.08em}
.brand p{margin:3px 0 0;font-size:13px;color:#6a5e64}


#confetti{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
#confetti i{position:absolute;top:-6vh;width:12px;height:12px;border-radius:50%;animation:drift var(--time) linear infinite}
#confetti i.petal{width:10px;height:15px;border-radius:80% 0}
#confetti i.star{width:16px;height:16px;border-radius:0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@keyframes drift{to{transform:translate(var(--sway),112vh) rotate(var(--spin))}}

#toast{position:fixed;z-index:4;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:8px 8px 8px 16px;background:#fffdf6;border:2px solid #4a4046;border-radius:999px;box-shadow:0 4px 0 #4a404630;font-size:15px;white-space:nowrap}
#toast[hidden]{display:none}
#stay{flex:none;cursor:pointer;border:2px solid #4a4046;border-radius:999px;background:#f4a6bd;padding:5px 12px;font-size:13px;box-shadow:0 2px 0 #4a404626}
#stay:hover{background:#f7b8ca}
#stay:focus-visible{outline:3px dashed #6b5a92;outline-offset:2px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media (max-width:520px){
  .brand{padding:6px 11px 7px;border-radius:14px}
  .brand h1{font-size:19px}
  .brand p{font-size:11.5px}
  #toast{font-size:13.5px;padding-left:12px}
}
@media (prefers-reduced-motion:reduce){
  .turn{transition:none}
  #confetti i{animation:none;top:var(--rest)}
}