*{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:155px;height:155px;background:url('assets/bubbles_generated.png') center/contain no-repeat;pointer-events:none;z-index:-2;animation:bubbles-rise 19s linear infinite}
.bubbles.a{left:116px;top:720px;animation-delay:-4s}.bubbles.b{left:1000px;top:750px;width:115px;height:115px;animation-delay:-11s;animation-duration:23s}.bubbles.c{left:720px;top:800px;width:85px;height:85px;animation-delay:-16s;animation-duration:26s}
.coral{position:absolute;bottom:-25px;width:250px;z-index:-1;pointer-events:none;transform-origin:50% 100%;animation:coral-sway 6s ease-in-out infinite alternate}
.coral.left{left:-45px}.coral.right{right:-45px;animation-delay:-3s}
.turtle{position:absolute;right:22px;top:235px;width:245px;opacity:.92;pointer-events:none;animation:turtle-float 8s ease-in-out infinite alternate}
.panel{position:absolute;left:194px;top:145px;width:890px;height:390px;background:url('assets/cream_shell_frame.png') center/100% 100% no-repeat;display:grid;place-items:center}
.clock{color:#046486;font-size:193px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:5px;text-shadow:0 5px 0 #ffffff80}
.controls{position:absolute;bottom:60px;left:0;right:0;display:flex;gap:25px;justify-content:center;align-items:center}
.icon-button{width:92px;height:78px;border:0;padding:0;background:transparent url('assets/button.png') center/100% 100% no-repeat;color:#086985;font-size:52px;line-height:1;display:grid;place-items:center}
.icon-button:hover{filter:brightness(1.08)}
.icon-button[aria-pressed=false]{opacity:.7}
.top-controls{position:absolute;top:30px;right:35px;display:flex;gap:14px}
.top-controls .icon-button{width:75px;height:65px;font-size:42px}
.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:.33}80%{opacity:.3}to{transform:translate3d(50px,-900px,0) scale(1.1);opacity:0}}
@keyframes coral-sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@keyframes turtle-float{from{transform:translate3d(-8px,10px,0) rotate(-2deg)}to{transform:translate3d(14px,-10px,0) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.base,.bubbles,.coral,.turtle{animation:none!important}}