@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap";:root{color-scheme:light;font-family:Fredoka,ui-sans-serif,system-ui,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;overflow:hidden}body{background:linear-gradient(180deg,#87ceeb,#87ceeb 55%,#f4d03f 55%,#f0c94b 75%,#d4a84b);color:#2c2c2c}.game-container{width:100vw;height:100vh;position:relative;overflow:hidden;cursor:pointer}.cloud{position:absolute;background:#fff;border-radius:50px;opacity:.9;animation:float-cloud linear infinite}.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud:before{width:60%;height:120%;top:-50%;left:15%}.cloud:after{width:40%;height:100%;top:-30%;right:15%}@keyframes float-cloud{0%{transform:translate(-200px)}to{transform:translate(calc(100vw + 200px))}}.ocean{position:absolute;top:48%;left:0;width:100%;height:12%;overflow:hidden}.wave{position:absolute;width:200%;height:100%;top:0;left:0;background:repeating-linear-gradient(90deg,transparent,transparent 40px,rgba(30,144,255,.3) 40px,rgba(30,144,255,.3) 80px);animation:wave-move 3s linear infinite}.wave:nth-child(2){top:20%;opacity:.5;animation-duration:4s;animation-direction:reverse}@keyframes wave-move{0%{transform:translate(0)}to{transform:translate(-50%)}}.sand{position:absolute;bottom:0;left:0;width:100%;height:45%;background:linear-gradient(180deg,#f4d03f,#e8b830 40%,#d4a84b)}.sand:before{content:"";position:absolute;top:0;left:0;width:100%;height:15px;background:repeating-linear-gradient(90deg,transparent,transparent 20px,rgba(255,255,255,.15) 20px,rgba(255,255,255,.15) 22px)}.shell-deco{position:absolute;font-size:1.5rem;opacity:.4;pointer-events:none}.crab{position:absolute;font-size:3rem;cursor:pointer;transition:transform .05s;filter:drop-shadow(2px 4px 6px rgba(0,0,0,.2));user-select:none;-webkit-user-select:none;z-index:10}.crab:hover{transform:scale(1.1)}.crab:active{transform:scale(.9)}.crab.caught{animation:catch-pop .4s ease-out forwards}@keyframes catch-pop{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.8}to{transform:scale(0);opacity:0}}.crab.scuttle-right{animation:scuttle-wobble-r .3s ease-in-out infinite}.crab.scuttle-left{animation:scuttle-wobble-l .3s ease-in-out infinite}@keyframes scuttle-wobble-r{0%,to{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-4px)}}@keyframes scuttle-wobble-l{0%,to{transform:scaleX(-1) rotate(-5deg) translateY(0)}50%{transform:scaleX(-1) rotate(5deg) translateY(-4px)}}.score-popup{position:absolute;font-size:1.4rem;font-weight:700;color:#ff6b35;pointer-events:none;animation:score-float .8s ease-out forwards;z-index:20;text-shadow:1px 1px 2px rgba(0,0,0,.2)}@keyframes score-float{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-60px) scale(1.3)}}.hud{position:absolute;top:16px;left:50%;transform:translate(-50%);display:flex;gap:24px;align-items:center;z-index:100;background:#ffffffd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px 28px;border-radius:50px;box-shadow:0 4px 20px #0000001a}.hud-item{display:flex;align-items:center;gap:8px;font-weight:600;font-size:1.1rem}.hud-icon{font-size:1.4rem}.score-value{color:#ff6b35;min-width:40px}.time-value{color:#1e90ff}.level-value{color:#2ecc71}.combo{position:absolute;top:75px;left:50%;transform:translate(-50%);font-weight:700;font-size:1.2rem;color:#ff6b35;opacity:0;transition:opacity .2s;z-index:100;text-shadow:0 2px 8px rgba(255,107,53,.3)}.combo.visible{opacity:1;animation:combo-pulse .3s ease-out}@keyframes combo-pulse{0%{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.2)}to{transform:translate(-50%) scale(1)}}.crab.golden{filter:drop-shadow(0 0 12px rgba(255,215,0,.8)) drop-shadow(2px 4px 6px rgba(0,0,0,.2))}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200}.overlay-card{background:#fff;border-radius:24px;padding:40px 48px;text-align:center;box-shadow:0 20px 60px #0000004d;max-width:400px;width:90%}.overlay-card h1{font-size:2.2rem;margin-bottom:8px;color:#ff6b35}.overlay-card .subtitle{color:#888;margin-bottom:24px;font-size:.95rem}.overlay-card .emoji-hero{font-size:4rem;margin-bottom:16px;display:block}.overlay-card .final-score{font-size:3rem;font-weight:700;color:#ff6b35;margin:8px 0}.overlay-card .high-score{color:#888;font-size:.9rem;margin-bottom:24px}.btn{background:linear-gradient(135deg,#ff6b35,#ff8c42);color:#fff;border:none;padding:14px 40px;border-radius:50px;font-size:1.15rem;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .1s,box-shadow .1s;box-shadow:0 4px 15px #ff6b3566}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6b3580}.btn:active{transform:translateY(0)}.game-desc{color:#666;font-size:.85rem;margin:16px 0 20px;line-height:1.6}.stats-row{display:flex;justify-content:center;gap:24px;margin-bottom:20px}.stat{text-align:center}.stat-label{font-size:.75rem;color:#aaa;text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:1.5rem;font-weight:700;color:#333}.miss{position:absolute;pointer-events:none;font-size:1rem;color:#f009;animation:miss-fade .5s ease-out forwards;z-index:15}@keyframes miss-fade{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5) translateY(20px)}}