:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;overflow:hidden}.ocean{min-height:100vh;display:grid;place-items:center;position:relative;cursor:pointer;background:linear-gradient(180deg,#87ceeb,#b0e0f6 40%,#1e90ff 40%,#0a5e8a);overflow:hidden}.scene{position:relative;width:100%;height:100vh}.sky{position:absolute;top:0;left:0;width:100%;height:40%}.sun{position:absolute;top:2rem;right:15%;width:80px;height:80px;border-radius:50%;background:#ffe066;box-shadow:0 0 60px 20px #ffe06666;animation:sun-glow 4s ease-in-out infinite alternate}@keyframes sun-glow{0%{box-shadow:0 0 60px 20px #ffe06666}to{box-shadow:0 0 80px 30px #ffe06699}}.cloud{position:absolute;background:#ffffffd9;border-radius:50px;animation:drift linear infinite}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud-1{width:120px;height:40px;top:15%;left:-150px;animation-duration:35s}.cloud-1:before{width:50px;height:50px;top:-25px;left:20px}.cloud-1:after{width:60px;height:40px;top:-15px;left:55px}.cloud-2{width:100px;height:32px;top:8%;left:-120px;animation-duration:50s;animation-delay:8s}.cloud-2:before{width:44px;height:44px;top:-22px;left:15px}.cloud-2:after{width:50px;height:36px;top:-14px;left:45px}.cloud-3{width:90px;height:28px;top:22%;left:-110px;animation-duration:42s;animation-delay:15s}.cloud-3:before{width:38px;height:38px;top:-20px;left:12px}.cloud-3:after{width:46px;height:32px;top:-12px;left:38px}@keyframes drift{0%{transform:translate(0)}to{transform:translate(calc(100vw + 300px))}}.water{position:absolute;bottom:0;left:0;width:100%;height:60%;overflow:hidden}.wave{position:absolute;width:200%;height:60px;left:-50%}.wave-1{top:-5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0 60 Q150 0 300 60 T600 60 T900 60 T1200 60 V120 H0Z' fill='%231e90ff'/%3E%3C/svg%3E") repeat-x;background-size:600px 60px;animation:wave-move 6s linear infinite;opacity:.7}.wave-2{top:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0 60 Q150 10 300 60 T600 60 T900 60 T1200 60 V120 H0Z' fill='%230a5e8a'/%3E%3C/svg%3E") repeat-x;background-size:700px 55px;animation:wave-move 8s linear infinite reverse;opacity:.5}.wave-3{top:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0 60 Q150 20 300 60 T600 60 T900 60 T1200 60 V120 H0Z' fill='%23084a6e'/%3E%3C/svg%3E") repeat-x;background-size:800px 50px;animation:wave-move 10s linear infinite;opacity:.4}@keyframes wave-move{0%{transform:translate(0)}to{transform:translate(50%)}}.ship{position:absolute;bottom:55%;left:50%;transform:translate(-50%);animation:bob 3s ease-in-out infinite;transition:left 1.5s ease-in-out}.ship.sailing{animation:bob 3s ease-in-out infinite,sail-across 18s linear infinite alternate}@keyframes bob{0%,to{transform:translate(-50%) translateY(0) rotate(-1deg)}50%{transform:translate(-50%) translateY(-10px) rotate(1deg)}}@keyframes sail-across{0%{left:50%}to{left:calc(50% + 180px)}}.hull{position:relative;width:220px;height:80px}.hull-body{position:absolute;bottom:0;left:10px;width:200px;height:55px;background:linear-gradient(180deg,#5c3317,#3e220e);border-radius:0 0 50% 50%/0 0 100% 100%;border-bottom:4px solid #2a1506;box-shadow:inset 0 -10px 20px #0000004d}.hull-body:before{content:"";position:absolute;top:8px;left:20px;right:20px;height:3px;background:#8b5e3c;border-radius:2px}.deck{position:absolute;bottom:45px;left:5px;width:210px;height:14px;background:linear-gradient(180deg,#a0724e,#7a5232);border-radius:4px 4px 0 0;border:2px solid #5c3317;border-bottom:none}.porthole{position:absolute;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#6ec6ff 30%,#1a6fa0);border:2px solid #d4a853;bottom:18px}.porthole-1{left:50px}.porthole-2{left:100px}.porthole-3{left:150px}.mast{position:absolute;bottom:55px;left:50%;transform:translate(-50%);width:6px;height:180px;background:linear-gradient(90deg,#6b4226,#8b5e3c,#6b4226);border-radius:3px}.sail{position:absolute;background:#f5f0e6;border:2px solid #d4c8b0;box-shadow:inset 0 0 20px #0000000d}.sail-main{left:8px;top:20px;width:90px;height:120px;clip-path:polygon(0 0,100% 15%,100% 85%,0 100%);animation:billow 4s ease-in-out infinite;display:grid;place-items:center}.sail-emblem{font-size:2.5rem;color:#3e220e;opacity:.5}.sail-fore{left:-50px;top:0;width:52px;height:80px;clip-path:polygon(100% 0,100% 100%,0 60%);animation:billow-small 4s ease-in-out infinite .5s}@keyframes billow{0%,to{transform:scaleX(1)}50%{transform:scaleX(1.06)}}@keyframes billow-small{0%,to{transform:scaleX(1)}50%{transform:scaleX(1.05)}}.flag{position:absolute;top:-30px;left:6px;width:0;height:0;border-left:30px solid #c0392b;border-top:10px solid transparent;border-bottom:10px solid transparent;animation:flag-wave 1.5s ease-in-out infinite}.flag span{position:absolute;left:-28px;top:-10px;font-size:.8rem}@keyframes flag-wave{0%,to{transform:skewY(0)}25%{transform:skewY(3deg)}75%{transform:skewY(-3deg)}}.crow-nest{position:absolute;top:-5px;left:-8px;width:22px;height:8px;background:#5c3317;border-radius:2px}.bowsprit{position:absolute;bottom:50px;right:-30px;width:60px;height:5px;background:linear-gradient(90deg,#6b4226,#8b5e3c);transform:rotate(-15deg);transform-origin:left center;border-radius:2px}.hint{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);font-size:.85rem;color:#ffffffb3;letter-spacing:.05em;text-shadow:0 1px 4px rgba(0,0,0,.4);pointer-events:none}