*{box-sizing:border-box}:root{font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#root{margin:0;padding:0;min-height:100vh;min-height:100dvh}body{background:linear-gradient(180deg,#0a1628,#0d2840 30%,#1a4a6e 70%,#0d2840);background-attachment:fixed;overflow-x:hidden}#root{display:flex;flex-direction:column}button{font-family:inherit}@keyframes bubble-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.tile{position:absolute;width:calc(25% - 10px);height:calc(25% - 10px);display:flex;align-items:center;justify-content:center;font-weight:700;border-radius:50%;box-shadow:0 4px 8px #0003,inset 0 -4px 8px #0000001a,inset 0 4px 8px #ffffff4d;z-index:10;-webkit-user-select:none;user-select:none}.tile:not(.tile-moving):not(.tile-merged):not(.tile-new){transform:translate(calc(var(--tile-x) * (100% + 13.33px) + 5px),calc(var(--tile-y) * (100% + 13.33px) + 5px))}.tile:not(.tile-moving):not(.tile-merged):not(.tile-new){animation:bubble-wobble 6s ease-in-out infinite;animation-delay:var(--wobble-delay, 0s)}.tile-value{position:relative;z-index:5}.tile:before{content:"";position:absolute;top:12%;left:18%;width:30%;height:25%;background:radial-gradient(ellipse at center,rgba(255,255,255,.7) 0%,rgba(255,255,255,.3) 40%,transparent 70%);border-radius:50%;animation:shine-pulse 2s ease-in-out infinite;z-index:6}.tile:after{content:"";position:absolute;top:25%;left:55%;width:12%;height:10%;background:radial-gradient(ellipse at center,rgba(255,255,255,.5) 0%,transparent 70%);border-radius:50%;z-index:6}.tile-new{animation:tile-appear .4s ease-out forwards,bubble-wobble 6s ease-in-out infinite .4s}.tile-merged{animation:stationary-bubble-merge .5s ease-out forwards,bubble-wobble 6s ease-in-out infinite .5s;z-index:20;overflow:visible}.tile-merged .tile-value{animation:merge-value-appear .5s ease-out forwards}.tile-merged:before,.tile-merged:after{animation:merge-highlight .5s ease-out forwards}.merge-incoming-bubble{position:absolute;width:100%;height:100%;border-radius:50%;box-shadow:0 4px 8px #0003,inset 0 -4px 8px #0000001a,inset 0 4px 8px #ffffff4d;z-index:4;animation:incoming-bubble-merge .5s ease-out forwards}.merge-incoming-bubble:before{content:"";position:absolute;top:12%;left:18%;width:30%;height:25%;background:radial-gradient(ellipse at center,rgba(255,255,255,.7) 0%,rgba(255,255,255,.3) 40%,transparent 70%);border-radius:50%}@keyframes stationary-bubble-merge{0%{transform:translate(calc(var(--tile-x) * (100% + 13.33px) + 5px),calc(var(--tile-y) * (100% + 13.33px) + 5px)) scale(1);border-radius:50%}30%{transform:translate(calc(var(--tile-x) * (100% + 13.33px) + 5px),calc(var(--tile-y) * (100% + 13.33px) + 5px)) scale(.85);border-radius:50%}50%{transform:translate(calc(var(--tile-x) * (100% + 13.33px) + 5px),calc(var(--tile-y) * (100% + 13.33px) + 5px)) scale(1.1);border-radius:45% 55% 55% 45%/50%}70%{transform:translate(calc(var(--tile-x) * (100% + 13.33px) + 5px),calc(var(--tile-y) * (100% + 13.33px) + 5px)) scale(1.2);border-radius:50%}to{transform:translate(calc(var(--tile-x) * (100% + 13.33px) + 5px),calc(var(--tile-y) * (100% + 13.33px) + 5px)) scale(1);border-radius:50%}}@keyframes incoming-bubble-merge{0%{transform:translate(calc(var(--merge-offset-x, 0) * (100% + 13.33px)),calc(var(--merge-offset-y, 0) * (100% + 13.33px))) scale(1);opacity:1;border-radius:50%}30%{transform:translate(calc(var(--merge-offset-x, 0) * (100% + 13.33px) * .3),calc(var(--merge-offset-y, 0) * (100% + 13.33px) * .3)) scale(.9);opacity:1;border-radius:50%}50%{transform:translate(0) scale(.7);opacity:.8;border-radius:50%}70%{transform:translate(0) scale(.3);opacity:.4}to{transform:translate(0) scale(0);opacity:0}}@keyframes merge-value-appear{0%,60%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes merge-highlight{0%,70%{opacity:0}to{opacity:1}}.tile-moving{animation:tile-slide .15s ease-out forwards}@keyframes bubble-wobble{0%,to{border-radius:50%;transform:translate(calc(var(--tile-x) * (100% + 13.33px) + 5px),calc(var(--tile-y) * (100% + 13.33px) + 5px)) scale(1)}25%{border-radius:46% 54% 52% 48%/52% 46% 54% 48%;transform:translate(calc(var(--tile-x) * (100% + 13.33px) + 5px),calc(var(--tile-y) * (100% + 13.33px) + 5px)) scale(1.01,.99)}50%{border-radius:52% 48% 46% 54%/48% 54% 46% 52%;transform:translate(calc(var(--tile-x) * (100% + 13.33px) + 5px),calc(var(--tile-y) * (100% + 13.33px) + 5px)) scale(.99,1.01)}75%{border-radius:48% 52% 54% 46%/54% 48% 52% 46%;transform:translate(calc(var(--tile-x) * (100% + 13.33px) + 5px),calc(var(--tile-y) * (100% + 13.33px) + 5px)) scale(1.005,.995)}}@keyframes shine-pulse{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}@keyframes tile-appear{0%{opacity:0;transform:translate(calc(var(--tile-x) * (100% + 13.33px) + 5px),calc(var(--tile-y) * (100% + 13.33px) + 5px)) scale(0)}to{opacity:1;transform:translate(calc(var(--tile-x) * (100% + 13.33px) + 5px),calc(var(--tile-y) * (100% + 13.33px) + 5px)) scale(1)}}@keyframes tile-slide{0%{transform:translate(calc(var(--prev-x) * (100% + 13.33px) + 5px),calc(var(--prev-y) * (100% + 13.33px) + 5px))}to{transform:translate(calc(var(--tile-x) * (100% + 13.33px) + 5px),calc(var(--tile-y) * (100% + 13.33px) + 5px))}}.grid-container{position:relative;width:100%;max-width:400px;aspect-ratio:1;margin:0 auto}.grid-background{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px;padding:10px;background:linear-gradient(180deg,#1a4a6ef2,#0d2840f2);border-radius:12px;box-shadow:0 8px 24px #0000004d,inset 0 2px 4px #ffffff1a,inset 0 -2px 4px #0003;width:100%;height:100%;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.grid-cell{position:relative;background:#ffffff14;border-radius:50%;box-shadow:inset 0 2px 6px #0000004d,inset 0 -2px 4px #ffffff0d;animation:cell-pulse 4s ease-in-out infinite;animation-delay:calc(var(--cell-index, 0) * .2s)}.grid-cell:before{content:"";position:absolute;top:10%;left:15%;width:25%;height:20%;background:radial-gradient(ellipse at center,rgba(255,255,255,.15) 0%,transparent 70%);border-radius:50%;animation:cell-shimmer 3s ease-in-out infinite}.grid-cell:nth-child(1){--cell-index: 0}.grid-cell:nth-child(2){--cell-index: 1}.grid-cell:nth-child(3){--cell-index: 2}.grid-cell:nth-child(4){--cell-index: 3}.grid-cell:nth-child(5){--cell-index: 4}.grid-cell:nth-child(6){--cell-index: 5}.grid-cell:nth-child(7){--cell-index: 6}.grid-cell:nth-child(8){--cell-index: 7}.grid-cell:nth-child(9){--cell-index: 8}.grid-cell:nth-child(10){--cell-index: 9}.grid-cell:nth-child(11){--cell-index: 10}.grid-cell:nth-child(12){--cell-index: 11}.grid-cell:nth-child(13){--cell-index: 12}.grid-cell:nth-child(14){--cell-index: 13}.grid-cell:nth-child(15){--cell-index: 14}.grid-cell:nth-child(16){--cell-index: 15}@keyframes cell-pulse{0%,to{opacity:1}50%{opacity:.85}}@keyframes cell-shimmer{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.tiles-container{position:absolute;inset:10px}.score-board{display:flex;gap:12px}.score-box{background:linear-gradient(180deg,#1a4a6e,#0d2840);border-radius:8px;padding:8px 20px;text-align:center;min-width:80px;box-shadow:0 4px 12px #0003,inset 0 1px 2px #ffffff1a}.score-label{font-size:.75rem;font-weight:600;color:#81d4fa;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}.score-value{font-size:1.5rem;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}.game-controls{display:flex;gap:10px}.new-game-button{background:linear-gradient(180deg,#4fc3f7,#0288d1);color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:1rem;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #0288d166,inset 0 1px 2px #ffffff4d;transition:all .15s ease;text-transform:uppercase;letter-spacing:1px}.new-game-button:hover{background:linear-gradient(180deg,#81d4fa,#039be5);transform:translateY(-2px);box-shadow:0 6px 16px #0288d180,inset 0 1px 2px #ffffff4d}.new-game-button:active{transform:translateY(0);box-shadow:0 2px 8px #0288d166,inset 0 1px 2px #ffffff4d}.modal-overlay{position:absolute;inset:0;background:#0d2840e6;display:flex;align-items:center;justify-content:center;border-radius:12px;animation:modal-fade-in .3s ease-out;z-index:100}.win-overlay{background:#1a4a6ef2}.modal-content{text-align:center;padding:30px 40px}.modal-title{font-size:2.5rem;font-weight:700;color:#fff;margin:0 0 16px;text-shadow:0 2px 8px rgba(0,0,0,.3)}.win-title{color:gold;text-shadow:0 0 20px rgba(255,215,0,.5),0 2px 8px rgba(0,0,0,.3)}.modal-score{font-size:1.25rem;color:#81d4fa;margin:0 0 24px}.modal-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.modal-button{background:linear-gradient(180deg,#4fc3f7,#0288d1);color:#fff;border:none;border-radius:8px;padding:14px 28px;font-size:1rem;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #0288d166,inset 0 1px 2px #ffffff4d;transition:all .15s ease;text-transform:uppercase;letter-spacing:1px}.modal-button:hover{background:linear-gradient(180deg,#81d4fa,#039be5);transform:translateY(-2px);box-shadow:0 6px 16px #0288d180,inset 0 1px 2px #ffffff4d}.continue-button{background:linear-gradient(180deg,gold,#ffa000);box-shadow:0 4px 12px #ffa00066,inset 0 1px 2px #ffffff4d}.continue-button:hover{background:linear-gradient(180deg,#ffeb3b,#ffb300);box-shadow:0 6px 16px #ffa00080,inset 0 1px 2px #ffffff4d}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}.game-container{position:relative;z-index:10;max-width:500px;margin:0 auto;padding:20px;display:flex;flex-direction:column;align-items:center;gap:20px;min-height:100vh;min-height:100dvh}.game-header{text-align:center}.game-title{font-size:2.5rem;font-weight:700;color:#fff;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.3),0 0 40px rgba(79,195,247,.3);background:linear-gradient(180deg,#81d4fa,#4fc3f7,#29b6f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:title-float 4s ease-in-out infinite}@keyframes title-float{0%,to{transform:translateY(0);filter:brightness(1)}50%{transform:translateY(-4px);filter:brightness(1.1)}}.game-subtitle{font-size:1rem;color:#81d4fa;margin:8px 0 0;opacity:.8}.game-info{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:400px;gap:16px;flex-wrap:wrap}.grid-wrapper{position:relative;width:100%;max-width:400px}.game-instructions{text-align:center;color:#81d4fa;opacity:.7;font-size:.875rem}.game-instructions p{margin:4px 0}.bubble-hint{font-style:italic}@media(max-width:480px){.game-container{padding:16px;gap:16px}.game-title{font-size:2rem}.game-info{flex-direction:column;gap:12px}}.background-bubbles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}.bg-bubble{position:absolute;bottom:-20px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.4) 0%,rgba(129,212,250,.3) 30%,rgba(79,195,247,.2) 60%,transparent 70%);box-shadow:inset 0 -2px 4px #0000001a,inset 0 2px 4px #fff3;animation:bubble-rise linear infinite}.bg-bubble:before{content:"";position:absolute;top:15%;left:20%;width:30%;height:25%;background:radial-gradient(ellipse at center,rgba(255,255,255,.6) 0%,transparent 70%);border-radius:50%}@keyframes bubble-rise{0%{transform:translateY(0) translate(0) scale(1);opacity:var(--opacity, .15)}25%{transform:translateY(-25vh) translate(10px) scale(1.05)}50%{transform:translateY(-50vh) translate(-5px) scale(.95)}75%{transform:translateY(-75vh) translate(8px) scale(1.02)}to{transform:translateY(-110vh) translate(0) scale(1);opacity:0}}.water-effects{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}.light-rays{position:absolute;top:-50%;left:0;right:0;height:150%;opacity:.15}.ray{position:absolute;top:0;width:150px;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(129,212,250,.2) 30%,transparent 70%);transform-origin:top center;animation:ray-sway 8s ease-in-out infinite}.ray-1{left:10%;transform:rotate(-15deg);animation-delay:0s}.ray-2{left:45%;transform:rotate(5deg);animation-delay:2s;width:200px;opacity:.8}.ray-3{right:15%;transform:rotate(12deg);animation-delay:4s;width:120px}@keyframes ray-sway{0%,to{transform:rotate(var(--base-rotation, -15deg)) scaleX(1);opacity:.6}50%{transform:rotate(calc(var(--base-rotation, -15deg) + 8deg)) scaleX(1.1);opacity:1}}.ray-1{--base-rotation: -15deg}.ray-2{--base-rotation: 5deg}.ray-3{--base-rotation: 12deg}.caustics{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 30%,rgba(129,212,250,.1) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(79,195,247,.08) 0%,transparent 40%),radial-gradient(ellipse at 60% 70%,rgba(129,212,250,.06) 0%,transparent 45%),radial-gradient(ellipse at 30% 80%,rgba(79,195,247,.08) 0%,transparent 35%);animation:caustics-move 15s ease-in-out infinite}@keyframes caustics-move{0%,to{transform:scale(1) translate(0);opacity:.5}25%{transform:scale(1.1) translate(2%,-1%);opacity:.7}50%{transform:scale(.95) translate(-1%,2%);opacity:.4}75%{transform:scale(1.05) translate(1%,1%);opacity:.6}}