: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;background:#06152a;color:#e0f2ff}.ocean{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;position:relative;overflow:hidden;background:linear-gradient(180deg,#06152a,#0a2744,#0e3a62 60%,#124a7a)}.bubbles-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:0}.bubble{position:absolute;bottom:-20px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffffff4d,#ffffff0d);border:1px solid rgba(255,255,255,.15);animation:rise linear infinite;animation-duration:6s}@keyframes rise{0%{transform:translateY(0) scale(1);opacity:.7}50%{opacity:.5}to{transform:translateY(-110vh) scale(.6);opacity:0}}.game-wrapper{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:480px;width:100%}.title{font-size:2.2rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,#4dabf7,#38d9a9,#ffd43b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;filter:drop-shadow(0 2px 8px rgba(77,171,247,.3))}.subtitle{font-size:.95rem;color:#a0d8ff99;text-align:center}.stats{display:flex;gap:2rem}.stat{display:flex;flex-direction:column;align-items:center;gap:.15rem}.stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:#a0d8ff73}.stat-value{font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums;color:#a0d8ff}.win-banner{background:linear-gradient(135deg,#38d9a933,#4dabf733);border:1px solid rgba(56,217,169,.4);border-radius:.75rem;padding:.75rem 1.5rem;text-align:center;display:flex;flex-direction:column;gap:.2rem;animation:pop .4s cubic-bezier(.34,1.56,.64,1)}@keyframes pop{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.win-text{font-size:1.3rem;font-weight:800;background:linear-gradient(135deg,#38d9a9,#4dabf7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.win-sub{font-size:.85rem;color:#a0d8ff99}.puzzle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:min(90vw,400px);aspect-ratio:1;background:#0a274499;border:2px solid rgba(77,171,247,.2);border-radius:1rem;padding:6px;box-shadow:0 0 30px #4dabf714,inset 0 0 20px #0000004d}.puzzle-tile{position:relative;border:none;border-radius:.6rem;cursor:pointer;background:#0e3a62b3;transition:transform .12s ease,box-shadow .12s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px;overflow:hidden}.puzzle-tile:not(.empty):hover{transform:scale(1.05);z-index:2;box-shadow:0 0 16px #4dabf74d}.puzzle-tile:not(.empty):active{transform:scale(.97)}.puzzle-tile.empty{background:#06152a80;border:2px dashed rgba(77,171,247,.15);cursor:default}.puzzle-tile.won-tile{animation:fishdance .6s ease-in-out infinite alternate}.puzzle-tile.won-tile:nth-child(2n){animation-delay:.15s}.puzzle-tile.won-tile:nth-child(3n){animation-delay:.3s}@keyframes fishdance{0%{transform:translateY(0) rotate(0)}to{transform:translateY(-3px) rotate(3deg)}}.tile-number{position:absolute;bottom:2px;right:4px;font-size:.65rem;font-weight:700;color:#ffffff80;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}.reset-btn{margin-top:.5rem;padding:.6rem 1.8rem;border:1px solid rgba(77,171,247,.3);border-radius:2rem;background:#4dabf71a;color:#a0d8ff;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,transform .1s;letter-spacing:.02em}.reset-btn:hover{background:#4dabf733;border-color:#4dabf780}.reset-btn:active{transform:scale(.97)}.legend{margin-top:.25rem}.legend-text{font-size:.75rem;color:#a0d8ff59}