*{box-sizing:border-box;margin:0;padding:0}body{color:#e2e8f0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(#0f172a 0%,#1e293b 50%,#0f172a 100%);min-height:100vh;font-family:Segoe UI,system-ui,-apple-system,sans-serif}#root{justify-content:center;min-height:100vh;display:flex}.cell{-webkit-user-select:none;user-select:none;border-radius:2px;justify-content:center;align-items:center;width:20px;height:20px;font-size:10px;transition:background .15s,transform .1s,box-shadow .15s;display:flex;position:relative}.cell.land{background:#4a7c59;border:1px solid #3d6b4a;box-shadow:inset 0 1px 3px #00000026}.cell.land.shore{background:#5a9a6a;border:1px solid #4a8858;box-shadow:inset 0 1px 2px #0000001a}.cell.water.hidden{background:linear-gradient(135deg,#1e88c7 0%,#1976a8 100%);border:1px solid #14698f;box-shadow:inset 0 1px 2px #ffffff40,0 1px 2px #00000026}.cell.water.hidden.clickable{cursor:pointer}.cell.water.hidden.clickable:hover{z-index:2;background:linear-gradient(135deg,#2196d4 0%,#1e88c7 100%);transform:scale(1.08);box-shadow:inset 0 1px 2px #ffffff59,0 2px 6px #00000040}.cell.water.hidden.clickable:active{transform:scale(.95)}.cell.water.revealed{background:linear-gradient(135deg,#b6dde8 0%,#9ecfdc 100%);border:1px solid #89c0cf;box-shadow:inset 0 1px 3px #00000014}.cell.water.exploded{z-index:3;background:radial-gradient(circle,#ff6b6b 0%,#ee5a24 60%,#c0392b 100%);border:1px solid #a93226;animation:.5s ease-out explode;box-shadow:0 0 8px 2px #ff501499}.cell.water.flagged{animation:.2s ease-out plant-flag}@keyframes explode{0%{transform:scale(1);box-shadow:0 0 #ff501400}30%{transform:scale(1.5);box-shadow:0 0 12px 4px #ff5014cc}60%{transform:scale(1.1);box-shadow:0 0 6px 2px #ff501466}to{transform:scale(1);box-shadow:0 0 8px 2px #ff501499}}@keyframes plant-flag{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.boat-floating{z-index:5;pointer-events:none;transition:left 2s ease-in-out,top 2s ease-in-out;position:absolute;transform:translate(-50%,-50%)}.boat-floating.boat-sailing{z-index:15;transition:left .18s linear,top .18s linear}.boat-bobbing{filter:drop-shadow(0 1px 3px #00000059);font-size:14px;line-height:1;animation:2s ease-in-out infinite float-bob;position:relative}.boat-sailing .boat-bobbing{font-size:16px}.boat-bobbing:after{content:"";pointer-events:none;border:1px solid #ffffff2e;border-radius:50%;width:12px;height:12px;animation:2.5s ease-out infinite ripple;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes float-bob{0%,to{transform:rotate(-3deg)translateY(0)}50%{transform:rotate(3deg)translateY(-2px)}}@keyframes ripple{0%{opacity:.4;width:10px;height:10px}to{opacity:0;width:28px;height:28px}}.victory-overlay{z-index:20;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#00000080;justify-content:center;align-items:center;animation:.4s ease-out forwards overlay-fade;display:flex;position:absolute;inset:0}.victory-modal{text-align:center;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);border:1px solid #fbbf244d;border-radius:16px;padding:28px 36px;animation:.5s ease-out .2s both modal-pop;box-shadow:0 0 30px #fbbf2426,0 8px 32px #00000080}.victory-icon{margin-bottom:8px;font-size:36px;animation:2s ease-in-out infinite float-bob}.victory-title{color:#fbbf24;letter-spacing:3px;text-shadow:0 0 12px #fbbf2466;font-size:22px;font-weight:800}.victory-subtitle{color:#94a3b8;margin-top:6px;font-size:12px;font-style:italic}.victory-sparkle{margin-top:12px;font-size:14px;animation:1.5s ease-in-out infinite sparkle-pulse}@keyframes overlay-fade{0%{opacity:0}to{opacity:1}}@keyframes modal-pop{0%{opacity:0;transform:scale(.8)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes sparkle-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.game-board-wrapper{justify-content:center;padding:0;display:flex}.ocean-bg{background:radial-gradient(at 30% 20%,#ffffff0f 0%,#0000 50%),radial-gradient(at 70% 80%,#ffffff0a 0%,#0000 50%),linear-gradient(#0c4a6e 0%,#0e5a82 40%,#0c4a6e 100%);border:2px solid #0a3d5c;border-radius:10px;padding:10px;position:relative;overflow:hidden;box-shadow:0 6px 24px #0006,inset 0 1px 1px #ffffff0d}.ocean-bg:before{content:"";pointer-events:none;background:repeating-linear-gradient(90deg,#0000,#0000 60px,#ffffff04 60px 61px),repeating-linear-gradient(0deg,#0000,#0000 60px,#ffffff04 60px 61px);position:absolute;inset:0}.game-board{z-index:1;gap:1px;display:grid;position:relative}.status-bar{cursor:pointer;justify-content:space-between;align-items:center;width:100%;max-width:340px;margin-bottom:6px;padding:4px 0;display:flex}.lives{gap:2px;display:flex}.life{font-size:14px;line-height:1;transition:opacity .3s,transform .3s}.life-lost{opacity:.4;transform:scale(.8)}.timer{color:#64748b;letter-spacing:1px;font-family:Courier New,monospace;font-size:13px;font-weight:700}.app{flex-direction:column;justify-content:center;align-items:center;max-width:400px;min-height:100vh;margin:0 auto;padding:8px;display:flex}