*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#063b54;font-family:YouYuan,"幼圆",sans-serif}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:4px solid #fff9b8;outline-offset:3px}
#stage{position:absolute;width:1280px;height:720px;transform-origin:top left;overflow:hidden;user-select:none}
.base{position:absolute;left:-2%;top:-2%;width:104%;height:104%;object-fit:cover;z-index:-4;animation:sea-drift 24s ease-in-out infinite alternate;pointer-events:none}
.bubbles{position:absolute;width:145px;height:145px;background:url('assets/bubbles_generated.png') center/contain no-repeat;opacity:.38;pointer-events:none;z-index:-2;animation:bubbles-rise 18s linear infinite}
.bubbles-a{left:155px;top:660px;width:115px;height:115px;animation-delay:-5s}
.bubbles-b{left:1020px;top:750px;width:165px;height:165px;animation-delay:-11s;animation-duration:21s;opacity:.28}
.bubbles-c{left:630px;top:730px;width:85px;height:85px;animation-delay:-16s;animation-duration:25s;opacity:.24}
.coral{position:absolute;bottom:-22px;width:255px;z-index:-1;pointer-events:none;transform-origin:50% 100%;animation:coral-sway 6s ease-in-out infinite alternate}
.coral.left{left:-50px}.coral.right{right:-50px;animation-delay:-3s}
.tools{position:absolute;top:30px;right:38px;display:flex;gap:16px}
.icon-button{width:70px;height:66px;padding:0;border:0;background:transparent url('assets/button.png') center/100% 100% no-repeat;color:#086985;font-size:49px;line-height:1;display:grid;place-items:center}
.icon-button:hover{filter:brightness(1.08)}
.zone{position:absolute;top:121px;width:550px;height:300px;border:0;background:transparent center/100% 100% no-repeat;padding:23px 30px;transition:filter .2s,transform .2s}
.zone.sea{left:63px;background-image:url('assets/sea_frame.png')}
.zone.bin{right:63px;background-image:url('assets/bin_frame.png')}
.zone.is-over,.zone.is-selected{filter:brightness(1.12) drop-shadow(0 0 14px #fffad1);transform:scale(1.015)}
.zone-icon{position:absolute;top:26px;left:50%;transform:translateX(-50%);height:100px;width:110px;object-fit:contain;pointer-events:none}
.zone-icon.shell{height:96px}.zone-icon.recycle{height:112px;top:18px}
.placed{position:absolute;left:25px;right:25px;bottom:34px;height:112px;display:flex;justify-content:center;align-items:center;gap:12px;pointer-events:none}
.placed img{max-width:99px;max-height:104px;object-fit:contain;animation:place-pop .32s ease-out}
.tray{position:absolute;left:48px;right:48px;bottom:65px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.item{width:179px;height:174px;border:0;padding:9px;background:transparent url('assets/button.png') center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;transition:transform .18s,filter .18s}
.item img{max-width:145px;max-height:135px;object-fit:contain;pointer-events:none}
.item:hover{transform:translateY(-5px)}.item[aria-pressed=true]{filter:drop-shadow(0 0 11px #fff);transform:translateY(-10px)}
.item:disabled{visibility:hidden}.item.is-wrong{animation:wrong-shake .4s ease-in-out}
.ghost{position:fixed;pointer-events:none;z-index:1000;opacity:.9;filter:drop-shadow(0 8px 10px #17394766)}
.ghost img{width:100%;height:100%;object-fit:contain}
.feedback-light{position:absolute;left:50%;bottom:25px;width:48px;height:18px;border-radius:50%;transform:translateX(-50%);opacity:0;pointer-events:none}
.feedback-light.ok{background:#c9fff1;box-shadow:0 0 30px 12px #b4ffe8;animation:feedback-flash .6s ease-out}
.feedback-light.retry{background:#ffccb8;box-shadow:0 0 30px 12px #ffb594;animation:feedback-flash .6s ease-out}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes sea-drift{from{transform:translate3d(-8px,-5px,0) scale(1)}to{transform:translate3d(8px,6px,0) scale(1.025)}}
@keyframes bubbles-rise{from{transform:translate3d(0,0,0) scale(.7);opacity:0}12%{opacity:.38}80%{opacity:.3}to{transform:translate3d(48px,-850px,0) scale(1.1);opacity:0}}
@keyframes coral-sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@keyframes place-pop{from{transform:scale(.55);opacity:.2}to{transform:scale(1);opacity:1}}
@keyframes wrong-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes feedback-flash{0%{opacity:0;transform:translateX(-50%) scale(.4)}35%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(2)}}
@media(prefers-reduced-motion:reduce){.base,.bubbles,.coral,.placed img,.feedback-light,.item.is-wrong{animation:none!important}}