@import url(https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Nunito:wght@400;600;700;800;900&family=Bungee:wght@400&display=swap);body{margin:0;padding:0}:root{--tile-size:40px;--font-size:16px}.grid-container{justify-content:center}.grid-container.game-mobile{background:#0000;border:none;border-radius:0;box-sizing:border-box;margin:0;max-width:100vw;min-width:0;min-width:auto;overflow-x:auto;padding:0;width:100vw}.grid-rotated{transform:rotate(45deg);transform-origin:center center}.content-counter-rotated{display:flex;flex-direction:column;gap:0;transform-origin:center center}.grid-coord-row{display:flex;flex-direction:row;gap:0;margin:0;padding:0;width:100%}.grid-coord-label{align-items:center;background:#0000;border:none;box-sizing:border-box;display:flex;font-weight:700;justify-content:center;margin:0;padding:0;transform:rotate(-45deg)}@media (max-width:768px){.grid-wrapper{margin:50px!important}.grid-container{box-sizing:border-box;margin:0;max-width:100vw;min-width:0;min-width:auto;overflow-x:auto;padding:0;transform-origin:center center;width:100vw}.grid-coord-label{height:32px!important;width:32px!important}.grid-coord-label,.grid-coord-label span{font-size:12px!important}.grid-coord-row{display:flex;flex-direction:row;gap:0;margin:0;padding:0;width:100%}.content-counter-rotated{transform:rotate(-45deg);transform-origin:center center}}.tile{align-items:center;background-color:#fff;border:1px solid #ccc;cursor:pointer;display:flex;font-size:16px;font-size:var(--font-size);height:40px;height:var(--tile-size);justify-content:center;transition:all .2s ease;-webkit-user-select:none;user-select:none;width:40px;width:var(--tile-size)}.tile:hover{background-color:#f0f0f0;transform:scale(1.05)}.tile.best{background-color:#e6ffe6;border-color:#4caf50}.tile.hit{background-color:#fcc;border-color:#f44336}.tile.miss{background-color:#f0f0f0;border-color:#9e9e9e}button.frontpage-btn{align-items:center!important;background:linear-gradient(135deg,#1e7db8,#40c4d4)!important;border:4px solid #fff!important;border-radius:18px!important;box-shadow:0 4px 16px #1e7db826,0 2px 8px #40c4d41a!important;color:#fff!important;display:inline-flex!important;font-family:Nunito,Fredoka One,sans-serif!important;font-size:1.2rem!important;font-weight:700!important;gap:8px!important;justify-content:center!important;letter-spacing:1px!important;margin:12px 0!important;padding:16px 32px!important;text-decoration:none!important;text-transform:uppercase!important;transition:all .2s cubic-bezier(.4,0,.2,1)!important}button.frontpage-btn:hover{box-shadow:0 8px 24px #1e7db838,0 4px 12px #40c4d42e!important;filter:brightness(1.15)!important}button.frontpage-btn:active{box-shadow:0 2px 6px #1e7db81f,0 1px 3px #40c4d414!important;filter:brightness(.95)!important}button.change-config-button,button.reset-button{align-items:center!important;background:linear-gradient(145deg,#8b4513,#5d2e0a)!important;background:linear-gradient(145deg,var(--wood-brown),var(--dark-wood))!important;border:3px solid #d4a574!important;border:3px solid var(--sandy-brown)!important;border-radius:15px!important;box-shadow:0 6px 15px #0006,inset 0 2px 5px #fff3!important;box-shadow:0 6px 15px var(--shadow-dark),inset 0 2px 5px #fff3!important;color:#f4e4a6!important;color:var(--sand-beige)!important;display:inline-flex!important;font-family:Nunito,sans-serif!important;font-size:1rem!important;font-weight:600!important;gap:8px!important;margin:10px 0!important;padding:12px 20px!important;text-decoration:none!important;text-transform:none!important;transition:all .3s ease!important}.mobile-layout .grid-container-inline{border:4px solid #0000!important;box-sizing:border-box!important;max-width:100vw!important;min-width:0!important;min-width:auto!important;overflow-x:auto!important;width:100vw!important}.desktop-layout .grid-container-inline{border:4px solid #0000!important}:root{--ocean-blue:#1e7db8;--deep-ocean:#0d4d6b;--tropical-cyan:#40c4d4;--sand-beige:#f4e4a6;--sandy-brown:#d4a574;--jungle-green:#4a7c59;--coral-orange:#ff6b47;--sunset-orange:#ff8c42;--wood-brown:#8b4513;--dark-wood:#5d2e0a;--metal-gray:#6b7280;--white-foam:#fff;--shadow-dark:#0006;--glow-blue:#40c4d499;--explosion-yellow:gold;--danger-red:#dc2626;--success-green:#16a34a}*{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}*,body,html{margin:0;padding:0}body,html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;height:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background-attachment:fixed;background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:cover;color:#fff;color:var(--white-foam);font-family:Nunito,sans-serif;min-height:100vh;overflow-x:auto;overflow-y:auto;position:relative;-webkit-user-select:none;user-select:none;width:100%}body:before{display:none!important}@keyframes wave-drift{0%{transform:translateX(0) translateY(0)}to{transform:translateX(-60px) translateY(-60px)}}.App{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;margin:0;min-height:100vh;padding:20px;position:relative}@media (max-width:768px){.App{padding:5px}}.app-header{background:linear-gradient(145deg,#f4e4a6,#d4a574);background:linear-gradient(145deg,var(--sand-beige) 0,var(--sandy-brown) 100%);border:4px solid #8b4513;border:4px solid var(--wood-brown);border-radius:25px;box-shadow:0 8px 25px #0006,inset 0 2px 10px #ffffff4d;box-shadow:0 8px 25px var(--shadow-dark),inset 0 2px 10px #ffffff4d;margin-bottom:30px;max-width:900px;overflow:hidden;padding:25px 35px;position:relative;text-align:center;width:100%}.app-header:before{background:linear-gradient(45deg,#ff6b47,#ff8c42);background:linear-gradient(45deg,var(--coral-orange),var(--sunset-orange));border-radius:30px;bottom:-5px;content:"";left:-5px;position:absolute;right:-5px;top:-5px;z-index:-1}.app-title{color:#8b4513;color:var(--wood-brown);font-family:Bungee,cursive;font-size:3.5rem;font-weight:400;letter-spacing:3px;margin-bottom:15px;text-shadow:3px 3px 0 #d4a574,6px 6px 10px #0006;text-shadow:3px 3px 0 var(--sandy-brown),6px 6px 10px var(--shadow-dark);transform:perspective(500px) rotateX(15deg)}.app-subtitle{color:#5d2e0a;color:var(--dark-wood);font-size:1.4rem;font-weight:700;margin-bottom:25px;text-shadow:2px 2px 4px #ffffff80}.config-info{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-top:20px}.config-badge{background:linear-gradient(145deg,#4a7c59,#3a5a47);background:linear-gradient(145deg,var(--jungle-green),#3a5a47);border:3px solid #5d2e0a;border:3px solid var(--dark-wood);border-radius:20px;box-shadow:0 4px 15px #0000004d;font-size:1rem;font-weight:700;padding:10px 18px}.btn,.config-badge,button{color:#fff;color:var(--white-foam);text-shadow:2px 2px 4px #0006;text-shadow:2px 2px 4px var(--shadow-dark)}.btn,button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-appearance:none;appearance:none;background:linear-gradient(145deg,#ff6b47,#ff8c42);background:linear-gradient(145deg,var(--coral-orange),var(--sunset-orange));background:-o-linear-gradient(145deg,var(--coral-orange),var(--sunset-orange));border:3px solid #5d2e0a;border:3px solid var(--dark-wood);border-radius:15px;box-shadow:0 6px 20px #0000004d,inset 0 2px 5px #fff3;cursor:pointer;font-family:Fredoka One,cursive;font-size:1.1rem;letter-spacing:1px;margin:8px;outline:none;padding:15px 25px;position:relative;text-transform:uppercase;transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;-webkit-user-select:none;user-select:none}.btn:hover,button:hover{box-shadow:0 10px 30px #0006,inset 0 2px 5px #ffffff4d;filter:brightness(1.1);-webkit-filter:brightness(1.1);transform:translateY(-3px) scale(1.05);-webkit-transform:translateY(-3px) scale(1.05);-moz-transform:translateY(-3px) scale(1.05);-ms-transform:translateY(-3px) scale(1.05);-o-transform:translateY(-3px) scale(1.05)}.btn:active,button:active{box-shadow:0 4px 15px #0000004d,inset 0 2px 5px #0000001a;transform:translateY(-1px) scale(1.02);-webkit-transform:translateY(-1px) scale(1.02);-moz-transform:translateY(-1px) scale(1.02);-ms-transform:translateY(-1px) scale(1.02);-o-transform:translateY(-1px) scale(1.02)}@media (pointer:coarse){.btn,button{font-size:1.2rem;min-height:44px;min-width:44px;padding:18px 30px}}.tutorial-backdrop{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background-color:#40c4d429;bottom:0;left:0;right:0;top:0}.tutorial-modal{background:linear-gradient(145deg,#40c4d4,#40c4d4f2 60%);background:linear-gradient(145deg,var(--tropical-cyan) 0,#40c4d4f2 60%);border:4px solid #0d4d6b;border:4px solid var(--deep-ocean);border-radius:14px;box-shadow:0 10px 40px #00000073;color:#fff;color:var(--white-foam);max-height:80vh;max-width:780px;overflow-y:auto;padding:22px}.tutorial-title{color:#8b4513;color:var(--wood-brown);font-family:Bungee,cursive;font-size:1.6rem;margin-bottom:6px}.tutorial-subtitle{color:#6b7280;color:var(--metal-gray);margin-bottom:14px}.tutorial-list{line-height:1.5;margin-left:18px}.tutorial-list li{margin-bottom:10px}.tutorial-close-row{margin-top:14px}.tutorial-close-btn{font-size:1rem;padding:10px 14px}.btn-secondary{background:linear-gradient(145deg,#6b7280,#4b5563);background:linear-gradient(145deg,var(--metal-gray),#4b5563);background:-o-linear-gradient(145deg,var(--metal-gray),#4b5563);border-color:#5d2e0a;border-color:var(--dark-wood)}.menu-buttons{display:flex;flex-direction:column;gap:15px;margin:20px 0}.presets-container{background:linear-gradient(145deg,#1e7db81a,#0d4d6b33);border:2px solid #40c4d4;border:2px solid var(--tropical-cyan);border-radius:15px;box-shadow:0 4px 15px #0006,inset 0 1px 5px #40c4d433;box-shadow:0 4px 15px var(--shadow-dark),inset 0 1px 5px #40c4d433;margin-top:15px;padding:15px}.presets-container h3{color:gold;color:var(--explosion-yellow);font-family:Fredoka One,cursive;font-size:1.4rem;margin-bottom:15px;text-align:center;text-shadow:2px 2px 4px #0006;text-shadow:2px 2px 4px var(--shadow-dark)}.presets-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));max-height:45vh;overflow-y:auto;padding:5px}.preset-card{align-items:center;background:#d4a574!important;border:2px solid #8b4513;border:2px solid var(--wood-brown);border-radius:10px;box-shadow:0 3px 10px #0000004d,inset 0 1px 3px #fff3;cursor:pointer;display:flex;justify-content:center;min-height:50px;padding:15px 10px;position:relative;transform:translateY(0);transition:all .3s ease}.preset-card:hover{background:#d4a574!important;border-color:#8b4513;border-color:var(--wood-brown);box-shadow:0 6px 20px #0006,inset 0 1px 5px #ffffff4d;transform:translateY(-3px) scale(1.02)}.preset-card h4{-webkit-text-fill-color:unset;background:none!important;-webkit-background-clip:unset;background-clip:initial;color:gold;color:var(--explosion-yellow);font-family:Fredoka One,cursive;font-size:1.1rem;margin:0;text-align:center;text-shadow:none}.preset-details{color:#5d2e0a;color:var(--dark-wood);font-family:Nunito,sans-serif;font-weight:600}.preset-details p{font-size:1rem;margin:8px 0}.preset-details ul{margin:10px 0 0 20px;padding:0}.preset-details li{color:#8b4513;color:var(--wood-brown);font-size:.95rem;margin:5px 0}.config-container{background:linear-gradient(145deg,#4a7c591a,#8b451333);border:3px solid #4a7c59;border:3px solid var(--jungle-green);border-radius:20px;box-shadow:0 8px 25px #0006,inset 0 2px 10px #4a7c5933;box-shadow:0 8px 25px var(--shadow-dark),inset 0 2px 10px #4a7c5933;margin-top:30px;padding:25px}.config-container h3{color:gold;color:var(--explosion-yellow);font-family:Fredoka One,cursive;font-size:1.8rem;margin-bottom:25px;text-align:center;text-shadow:2px 2px 4px #0006;text-shadow:2px 2px 4px var(--shadow-dark)}.config-container label{color:#fff;color:var(--white-foam);font-family:Nunito,sans-serif;font-weight:600;margin-right:10px}.config-container input{background:#f4e4a6;background:var(--sand-beige);border:2px solid #8b4513;border:2px solid var(--wood-brown);border-radius:8px;color:#5d2e0a;color:var(--dark-wood);font-family:Nunito,sans-serif;font-weight:600;margin:5px;padding:8px 12px}.config-container div{align-items:center;display:flex;margin:15px 0}.config-container h4{color:gold;color:var(--explosion-yellow);font-family:Fredoka One,cursive;margin:20px 0 15px;text-shadow:1px 1px 2px #0006;text-shadow:1px 1px 2px var(--shadow-dark)}.game-container{gap:30px;justify-content:center;max-width:1200px;width:100%}.game-container,.grid-container{align-items:center;display:flex;flex-direction:column;margin:0 auto}.grid-container{background:#0000;border-radius:25px;flex-shrink:0;max-width:1035px;padding:35px;position:relative;width:115%}.grid-container-inline{align-items:center;border:3px solid #0000!important;border-radius:0!important;display:flex;flex-direction:column;padding:10px!important;position:relative}@media (max-width:768px){.game-container{gap:2px!important;margin:0;max-width:none!important;min-height:auto;overflow-x:visible!important;padding:0!important;width:100%!important}.grid-container-inline{align-items:center!important;align-self:stretch!important;background:#0000!important;border:4px solid #0000!important;border-radius:0!important;box-shadow:none!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;gap:0!important;justify-content:center!important;margin:0!important;max-width:100vw!important;min-height:60vh!important;min-width:100vw!important;padding:0!important;position:relative!important;width:100vw!important;z-index:10!important}}.grid-title{color:#8b4513;color:var(--wood-brown);font-family:Fredoka One,cursive;font-size:1.8rem;margin-bottom:20px;text-align:center;text-shadow:2px 2px 4px #ffffff80}.board{grid-gap:3px;background:linear-gradient(135deg,#1e7db8,#0d4d6b);background:linear-gradient(135deg,var(--ocean-blue),var(--deep-ocean));border:4px solid #8b4513;border:4px solid var(--wood-brown);border-radius:20px;box-shadow:inset 0 0 20px #0000004d,0 0 20px #40c4d466;display:grid;gap:3px;grid-template-columns:repeat(8,1fr);padding:20px;position:relative}.board:before{display:none!important}@keyframes bubble-float{0%{transform:translateY(0)}to{transform:translateY(-100px)}}.boardTile{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;align-items:center;-webkit-appearance:none;appearance:none;background:linear-gradient(145deg,#40c4d4,#1e7db8);background:linear-gradient(145deg,var(--tropical-cyan),var(--ocean-blue));background:-o-linear-gradient(145deg,var(--tropical-cyan),var(--ocean-blue));border:none;border-radius:12px;box-shadow:none;color:#fff;color:var(--white-foam);cursor:pointer;display:flex;font-family:Fredoka One,cursive;font-size:1rem;font-weight:400;height:20px;justify-content:center;margin:0;min-height:44px;min-width:44px;overflow:hidden;padding:0;position:relative;text-shadow:2px 2px 4px #0006;text-shadow:2px 2px 4px var(--shadow-dark);touch-action:manipulation;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;width:20px}.boardTile:before{background:radial-gradient(circle at center,#ffffff4d 0,#0000 70%);background:-o-radial-gradient(circle at center,#ffffff4d 0,#0000 70%);bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease;-webkit-transition:opacity .3s ease;-moz-transition:opacity .3s ease;-o-transition:opacity .3s ease}.boardTile:hover{background:linear-gradient(145deg,gold,#ff6b47);background:linear-gradient(145deg,var(--explosion-yellow),var(--coral-orange));background:-o-linear-gradient(145deg,var(--explosion-yellow),var(--coral-orange));transform:scale(1.1) translateY(-2px);-webkit-transform:scale(1.1) translateY(-2px);-moz-transform:scale(1.1) translateY(-2px);-ms-transform:scale(1.1) translateY(-2px);-o-transform:scale(1.1) translateY(-2px)}@media (pointer:coarse){.boardTile{font-size:1.1rem;height:60px;width:60px}.boardTile:active{background:linear-gradient(145deg,gold,#ff6b47);background:linear-gradient(145deg,var(--explosion-yellow),var(--coral-orange));background:-webkit-linear-gradient(145deg,var(--explosion-yellow),var(--coral-orange));transform:scale(1.1) translateY(-2px);-webkit-transform:scale(1.1) translateY(-2px)}}@media (max-width:768px){.boardTile{border-width:1px!important;font-size:11px!important;font-weight:700!important;height:32px!important;margin:1px!important;min-height:32px!important;min-width:32px!important;width:32px!important}.grid-container{align-self:stretch!important;background:#ff6b47!important;border:5px solid red!important;gap:2px!important;margin:0 0 0 calc(-50vw + 50%)!important;position:relative!important;z-index:1000!important}@media (max-width:480px) and (orientation:portrait){.grid-container{align-items:stretch!important;border:1px!important;border-radius:0!important;border-radius:6px!important;box-shadow:none!important;box-shadow:0 2px 6px #00000014;font-size:3.5vw!important;gap:1vw!important;margin:.5vw!important}.grid-container,.grid-container-inline{align-self:stretch!important;background:#0000!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;gap:0!important;justify-content:center!important;max-width:100vh!important;min-height:60vh!important;min-width:100vh!important;padding:0!important;position:relative!important;width:100vh!important;z-index:10!important}.grid-container-inline{align-items:center!important;border:4px solid #ff69b4!important;border-radius:0!important;box-shadow:none!important;margin:0!important}.app-header,.app-subtitle,.app-title{font-size:1.1rem!important;margin-bottom:2vw!important;padding:2vw!important}.config-info,.menu-buttons{flex-direction:column!important;gap:2vw!important;margin:2vw 0!important}}.grid-container{align-items:center!important;background:#add8e6!important;background:#0000!important;border:4px solid #ff69b4!important;border-radius:0!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;margin-left:calc(-50vw + 50%)!important;max-width:100vw!important;min-height:200px!important;padding:5px!important;width:100vw!important}.ship-status-content{margin:3px 0!important;padding:8px!important}.ship-status-item{font-size:13px!important;margin:2px 0!important;padding:3px 6px!important}button.change-config-button,button.reset-button{align-items:center!important;background:linear-gradient(145deg,#8b4513,#5d2e0a)!important;background:linear-gradient(145deg,var(--wood-brown),var(--dark-wood))!important;border:3px solid #d4a574!important;border:3px solid var(--sandy-brown)!important;border-radius:15px!important;box-shadow:0 6px 15px #0006,inset 0 2px 5px #fff3!important;box-shadow:0 6px 15px var(--shadow-dark),inset 0 2px 5px #fff3!important;color:#f4e4a6!important;color:var(--sand-beige)!important;display:inline-flex!important;font-family:Nunito,sans-serif!important;font-size:1rem!important;font-weight:600!important;gap:8px!important;margin:10px 0!important;padding:12px 20px!important;text-decoration:none!important;text-transform:none!important;transition:all .3s ease!important}}.boardTile:hover:before{opacity:1}.boardTile.selected{animation:best-tile-pulse 1.2s ease-in-out infinite;background:linear-gradient(145deg,gold,#ff8c42)!important;background:linear-gradient(145deg,var(--explosion-yellow),var(--sunset-orange))!important;border:6px solid gold!important;border:6px solid var(--explosion-yellow)!important;box-shadow:0 0 40px gold,0 0 70px #ffd700cc,0 0 100px #f449,inset 0 0 25px #ffd70099,0 12px 35px #0009!important;box-shadow:0 0 40px var(--explosion-yellow),0 0 70px #ffd700cc,0 0 100px #f449,inset 0 0 25px #ffd70099,0 12px 35px #0009!important;color:#5d2e0a!important;color:var(--dark-wood)!important;font-weight:700!important;outline:3px solid #f44!important;outline-offset:2px!important;position:relative;text-shadow:2px 2px 4px #ffffffe6!important;transform:scale(1.15);z-index:10}.boardTile.selected:before{animation:target-spin 2s linear infinite;content:"🎯";filter:drop-shadow(2px 2px 4px rgba(0,0,0,.8));font-size:1.4rem;left:-12px;position:absolute;top:-12px;z-index:11}.boardTile.selected:after{animation:target-border-rotate 1.5s linear infinite;border:4px dashed #f44;border-radius:18px;bottom:-10px;content:"";left:-10px;position:absolute;right:-10px;top:-10px;z-index:0}@keyframes best-tile-pulse{0%,to{box-shadow:0 0 40px gold,0 0 70px #ffd700cc,0 0 100px #f449,inset 0 0 25px #ffd70099,0 12px 35px #0009;box-shadow:0 0 40px var(--explosion-yellow),0 0 70px #ffd700cc,0 0 100px #f449,inset 0 0 25px #ffd70099,0 12px 35px #0009;outline-color:#f44;transform:scale(1.15)}50%{box-shadow:0 0 60px gold,0 0 90px gold,0 0 120px #f44c,inset 0 0 35px #ffd700cc,0 15px 40px #000000b3;box-shadow:0 0 60px var(--explosion-yellow),0 0 90px gold,0 0 120px #f44c,inset 0 0 35px #ffd700cc,0 15px 40px #000000b3;outline-color:#f66;transform:scale(1.2)}}@keyframes target-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes target-border-rotate{0%{transform:rotate(0deg)}to{transform:rotate(-1turn)}}@keyframes radar-ping{0%{box-shadow:0 0 25px #40c4d499;box-shadow:0 0 25px var(--glow-blue)}50%{box-shadow:0 0 35px gold;box-shadow:0 0 35px var(--explosion-yellow)}to{box-shadow:0 0 25px #40c4d499;box-shadow:0 0 25px var(--glow-blue)}}.boardTile.invalid{background:linear-gradient(145deg,#7f1d1d,#991b1b);cursor:not-allowed;opacity:.4}.boardTile.hit,.boardTile.invalid{border-color:#dc2626;border-color:var(--danger-red)}.boardTile.hit{animation:explosion-pulse .6s ease-out;background:linear-gradient(145deg,gold,#ff8c42)!important;background:linear-gradient(145deg,var(--explosion-yellow),var(--sunset-orange))!important;box-shadow:0 0 20px gold,0 4px 8px #0000004d;box-shadow:0 0 20px var(--explosion-yellow),0 4px 8px #0000004d;color:#fff;color:var(--white-foam)}.boardTile.hit:before{content:"💥";font-size:.8rem;position:absolute;right:-5px;top:-5px;z-index:2}@keyframes explosion-pulse{0%{transform:scale(1)}50%{box-shadow:0 0 30px gold;box-shadow:0 0 30px var(--explosion-yellow);transform:scale(1.2)}to{transform:scale(1)}}.boardTile.miss{background:linear-gradient(145deg,#1e7db8,#0d4d6b)!important;background:linear-gradient(145deg,var(--ocean-blue),var(--deep-ocean))!important;border-color:#40c4d4;border-color:var(--tropical-cyan);color:#fff;color:var(--white-foam)}.boardTile.miss:before{content:"💧";font-size:.8rem;position:absolute;right:-5px;top:-5px;z-index:2}.boardTile.sunk{animation:sunk-pulse 1s ease-in-out infinite;background:linear-gradient(145deg,#dc2626,#7f1d1d)!important;background:linear-gradient(145deg,var(--danger-red),#7f1d1d)!important;border-color:#5d2e0a;border-color:var(--dark-wood)}.boardTile.sunk,.boardTile.sunk:before{color:gold;color:var(--explosion-yellow)}.boardTile.sunk:before{content:"⚓";font-size:.8rem;position:absolute;right:-5px;top:-5px;z-index:2}@keyframes sunk-pulse{0%,to{box-shadow:0 0 15px #dc2626;box-shadow:0 0 15px var(--danger-red)}50%{box-shadow:0 0 25px gold;box-shadow:0 0 25px var(--explosion-yellow)}}.boardTile.deducted-miss{background:linear-gradient(145deg,#6b7280,#4b5563)!important;background:linear-gradient(145deg,var(--metal-gray),#4b5563)!important;border-color:#8b4513;border-color:var(--wood-brown);color:#d4a574;color:var(--sandy-brown)}.boardTile.deducted-miss:before{content:"🔍";font-size:.8rem;position:absolute;right:-5px;top:-5px;z-index:2}.boardTile.score-very-low{background:linear-gradient(145deg,#90ee90,#98fb98)!important;border-color:#7cfc00;color:#5d2e0a;color:var(--dark-wood)}.boardTile.score-low{background:linear-gradient(145deg,#98fb98,#7fff7f)!important}.boardTile.score-low,.boardTile.score-medium-low{border-color:#32cd32;color:#5d2e0a;color:var(--dark-wood)}.boardTile.score-medium-low{background:linear-gradient(145deg,#7fff7f,#6f6)!important}.boardTile.score-medium{background:linear-gradient(145deg,#6f6,#32cd32)!important;border-color:#0f0;color:#5d2e0a;color:var(--dark-wood)}.boardTile.score-medium-high{background:linear-gradient(145deg,#32cd32,#0f0)!important}.boardTile.score-high,.boardTile.score-medium-high{border-color:#39ff14;color:#5d2e0a;color:var(--dark-wood)}.boardTile.score-high{background:linear-gradient(145deg,#0f0,#39ff14)!important}.boardTile.score-max{animation:high-value-glow 2s ease-in-out infinite;background:linear-gradient(145deg,#39ff14,#00ff32)!important;border-color:#39ff14;color:#5d2e0a;color:var(--dark-wood)}@keyframes high-value-glow{0%,to{box-shadow:0 0 15px #39ff14}50%{box-shadow:0 0 25px #0f0}}.tutorial-backdrop{align-items:center;background:#0000008c;display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:2000}.tutorial-modal{background:#fff;border-radius:12px;box-shadow:0 12px 40px #00000059;color:#213243;display:block;max-width:820px;padding:18px;width:100%}.tutorial-title{color:#0d4d6b;color:var(--deep-ocean);font-size:1.4rem;font-weight:700;margin-bottom:4px}.tutorial-subtitle{color:#2b4b5a;font-size:.95rem;margin-bottom:8px}.tutorial-list{color:#213243;margin-left:16px}.tutorial-close-row{display:flex;gap:8px;justify-content:flex-end}.btn{border:none;border-radius:8px;cursor:pointer;padding:8px 12px}.btn:hover{opacity:.95}.tutorial-close-btn{background:#6b7280;color:#fff}.popup-confirm-btn{background:#16a34a;background:var(--success-green);border:none;padding:8px 12px}.popup-cancel-btn{background:#e5e7eb;border:none;border-radius:8px;color:#213243;cursor:pointer;padding:8px 12px}.tutorial-modal .boardTile{border-radius:8px!important;box-shadow:none!important;font-size:14px!important;height:56px!important;min-height:48px!important;min-width:48px!important;width:56px!important}.tutorial-modal .boardTile:before{opacity:.12}.tutorial-modal .ship-confirmation-container{display:flex;justify-content:center;margin-top:12px}.tutorial-modal .ship-confirmation-popup{align-items:center;background:#fff7ef;border:1px solid #ffd6b3;border-radius:8px;box-shadow:0 6px 18px #0000001f;color:#5a3721;display:flex;flex-direction:column;padding:10px}.tutorial-modal .popup-text{font-weight:600}@media (max-width:480px){.tutorial-modal{max-width:96vw;padding:12px}.tutorial-modal .boardTile{height:46px!important;width:46px!important}}.ship-status-top{margin-bottom:15px;max-width:600px;width:100%}.ship-status-content{background:linear-gradient(145deg,#f4e4a6,#d4a574);background:linear-gradient(145deg,var(--sand-beige),var(--sandy-brown));border:2px solid #8b4513;border:2px solid var(--wood-brown);border-radius:12px;box-shadow:0 6px 15px #0006,inset 0 2px 6px #fff3;box-shadow:0 6px 15px var(--shadow-dark),inset 0 2px 6px #fff3;color:#5d2e0a;color:var(--dark-wood);font-family:Nunito,sans-serif;padding:15px}.ship-status-title{color:#5d2e0a;color:var(--dark-wood);font-family:Fredoka One,cursive;font-size:16px;margin-bottom:12px;margin-top:0;text-align:center;text-shadow:1px 1px 2px #0000004d}.ship-row{margin-bottom:10px}.ship-label{color:#5d2e0a;color:var(--dark-wood);font-size:14px;font-weight:600}.ship-visual{gap:4px}.ship-icon,.ship-visual{align-items:center;display:flex}.ship-icon{background:linear-gradient(145deg,#4a7c59,#2d5a3d);background:linear-gradient(145deg,var(--jungle-green),#2d5a3d);border:1px solid #8b4513;border:1px solid var(--wood-brown);border-radius:6px;box-shadow:0 1px 3px #0006;box-shadow:0 1px 3px var(--shadow-dark);color:#fff;color:var(--white-foam);font-size:11px;font-weight:700;height:16px;justify-content:center;min-width:20px;position:relative}.ship-icon.sunk{background:linear-gradient(145deg,#6b7280,#4b5563);background:linear-gradient(145deg,var(--metal-gray),#4b5563)}.ship-sunk-marker{color:#dc2626;color:var(--danger-red);font-size:12px;font-weight:700;position:absolute}.ship-confirmation-container{align-items:center;display:flex;flex-direction:column;gap:10px;margin-top:20px;max-width:800px;width:100%}.ship-confirmation-popup{align-items:center;background:linear-gradient(145deg,#f4e4a6,#d4a574);background:linear-gradient(145deg,var(--sand-beige),var(--sandy-brown));border:2px solid #8b4513;border:2px solid var(--wood-brown);border-radius:10px;box-shadow:0 4px 12px #0006;box-shadow:0 4px 12px var(--shadow-dark);color:#5d2e0a;color:var(--dark-wood);display:flex;font-family:Nunito,sans-serif;font-size:14px;font-weight:600;gap:15px;padding:10px 15px;transition:all .2s ease}.ship-confirmation-popup:hover{box-shadow:0 6px 16px #0006;box-shadow:0 6px 16px var(--shadow-dark);transform:translateY(-2px)}.popup-text{flex:1 1;text-align:center}.popup-confirm-btn{background:linear-gradient(145deg,#4a7c59,#2d5a3d);background:linear-gradient(145deg,var(--jungle-green),#2d5a3d);border:2px solid #5d2e0a;border:2px solid var(--dark-wood);border-radius:8px;box-shadow:0 2px 6px #0006;box-shadow:0 2px 6px var(--shadow-dark);color:#fff;color:var(--white-foam);cursor:pointer;font-family:Fredoka One,cursive;font-weight:700;padding:6px 12px;transition:all .2s ease}.popup-confirm-btn:hover{box-shadow:0 4px 8px #0006;box-shadow:0 4px 8px var(--shadow-dark);transform:translateY(-1px)}.controls-container{display:flex;flex-direction:column;gap:20px;margin-top:25px}.button-group{display:flex;flex-wrap:wrap;gap:15px;justify-content:center}.stats-panel{background:linear-gradient(145deg,#f4e4a6,#d4a574);background:linear-gradient(145deg,var(--sand-beige),var(--sandy-brown));border:4px solid #8b4513;border:4px solid var(--wood-brown);border-radius:25px;box-shadow:0 8px 25px #0006,inset 0 2px 8px #ffffff4d;box-shadow:0 8px 25px var(--shadow-dark),inset 0 2px 8px #ffffff4d;min-width:320px;padding:25px;position:relative}.stats-panel:before{background:#f4e4a6;background:var(--sand-beige);border:3px solid #8b4513;border:3px solid var(--wood-brown);border-radius:50%;content:"📊";font-size:2rem;left:50%;padding:5px 15px;position:absolute;top:-15px;transform:translateX(-50%)}.stats-title{color:#8b4513;color:var(--wood-brown);font-family:Fredoka One,cursive;font-size:1.5rem;margin-bottom:20px;text-align:center;text-shadow:2px 2px 4px #ffffff80}.stat-item{align-items:center;border-bottom:2px solid #8b4513;border-bottom:2px solid var(--wood-brown);display:flex;justify-content:space-between;margin-bottom:8px;padding:12px 0}.stat-label{color:#5d2e0a;color:var(--dark-wood);font-size:1rem;font-weight:700}.stat-value{color:#ff6b47;color:var(--coral-orange);font-family:Fredoka One,cursive;font-size:1.1rem;font-weight:400;text-shadow:1px 1px 2px #0006;text-shadow:1px 1px 2px var(--shadow-dark)}.shipStatus{background:linear-gradient(145deg,#4a7c59,#3a5a47);background:linear-gradient(145deg,var(--jungle-green),#3a5a47);border:4px solid #5d2e0a;border:4px solid var(--dark-wood);border-radius:25px;box-shadow:0 8px 25px #0006,inset 0 2px 8px #ffffff1a;box-shadow:0 8px 25px var(--shadow-dark),inset 0 2px 8px #ffffff1a;margin-top:20px;padding:25px;position:relative}.shipStatus:before{background:#4a7c59;background:var(--jungle-green);border:3px solid #5d2e0a;border:3px solid var(--dark-wood);border-radius:50%;content:"⚓";font-size:2rem;left:50%;padding:5px 15px;position:absolute;top:-15px;transform:translateX(-50%)}.shipStatus h3{color:#fff;color:var(--white-foam);font-family:Fredoka One,cursive;font-size:1.4rem;margin-bottom:15px;text-align:center;text-shadow:2px 2px 4px #0006;text-shadow:2px 2px 4px var(--shadow-dark)}.shipRow{align-items:center;border-bottom:2px solid #fff3;display:flex;justify-content:space-between;margin-bottom:8px;padding:10px 0}.shipRow span:first-child{color:#f4e4a6;color:var(--sand-beige);font-size:1rem;font-weight:600}.shipRow span:last-child{color:gold;color:var(--explosion-yellow);font-family:Fredoka One,cursive;font-size:1.1rem;font-weight:400;text-shadow:1px 1px 2px #0006;text-shadow:1px 1px 2px var(--shadow-dark)}.shipConfirmationPopup{background:linear-gradient(145deg,#f4e4a6,#d4a574);background:linear-gradient(145deg,var(--sand-beige),var(--sandy-brown));border:4px solid #ff6b47;border:4px solid var(--coral-orange);border-radius:20px;box-shadow:0 10px 30px #0006;box-shadow:0 10px 30px var(--shadow-dark);color:#5d2e0a;color:var(--dark-wood);max-width:350px;padding:25px;z-index:1000}.shipConfirmationPopup h4{color:#ff6b47;color:var(--coral-orange);font-family:Fredoka One,cursive;font-size:1.3rem;margin:0 0 15px;text-shadow:1px 1px 2px #ffffff80}.shipConfirmationPopup p{color:#5d2e0a;color:var(--dark-wood);font-size:1rem;font-weight:600;margin:8px 0}.shipConfirmationPopup .confirm{background:linear-gradient(145deg,#16a34a,#15803d);background:linear-gradient(145deg,var(--success-green),#15803d)}.shipConfirmationPopup .cancel{background:linear-gradient(145deg,#6b7280,#4b5563);background:linear-gradient(145deg,var(--metal-gray),#4b5563)}.version-info{background:linear-gradient(145deg,#8b4513,#5d2e0a);background:linear-gradient(145deg,var(--wood-brown),var(--dark-wood));border:2px solid #ff6b47;border:2px solid var(--coral-orange);border-radius:15px;bottom:20px;box-shadow:0 4px 15px #0006;box-shadow:0 4px 15px var(--shadow-dark);color:#f4e4a6;color:var(--sand-beige);font-size:.9rem;font-weight:600;padding:10px 15px;position:fixed;right:20px}.config-panel{background:linear-gradient(145deg,#f4e4a6,#d4a574);background:linear-gradient(145deg,var(--sand-beige),var(--sandy-brown));border:4px solid #8b4513;border:4px solid var(--wood-brown);border-radius:25px;box-shadow:0 8px 25px #0006,inset 0 2px 10px #ffffff4d;box-shadow:0 8px 25px var(--shadow-dark),inset 0 2px 10px #ffffff4d;margin-top:25px;max-width:700px;padding:30px}.config-grid{grid-gap:20px;align-items:center;display:grid;gap:20px;grid-template-columns:1fr 1fr;margin-bottom:25px}.config-input{background:linear-gradient(145deg,#fff,#f8fafc);background:linear-gradient(145deg,var(--white-foam),#f8fafc);border:3px solid #8b4513;border:3px solid var(--wood-brown);border-radius:12px;box-shadow:inset 0 2px 5px #0000001a;color:#5d2e0a;color:var(--dark-wood);font-family:Nunito,sans-serif;font-size:1.1rem;font-weight:700;padding:12px 15px}.config-input:focus{border-color:#ff6b47;border-color:var(--coral-orange);box-shadow:inset 0 2px 5px #0000001a,0 0 10px #ff6b4766;outline:none}.ship-config-section{margin:25px 0}.config-subtitle{color:#8b4513;color:var(--wood-brown);font-family:Fredoka One,cursive;font-size:1.3rem;margin-bottom:20px;text-shadow:1px 1px 2px #ffffff80}.ship-config-row{align-items:center;background:#fff3;border:2px solid #8b4513;border:2px solid var(--wood-brown);border-radius:12px;display:flex;justify-content:space-between;margin:15px 0;padding:15px}.ship-config-row label{color:#5d2e0a;color:var(--dark-wood);font-size:1rem;font-weight:700}.mode-selector{margin-top:20px}.mode-selector select{background:linear-gradient(145deg,#4a7c59,#3a5a47);background:linear-gradient(145deg,var(--jungle-green),#3a5a47);border:3px solid #5d2e0a;border:3px solid var(--dark-wood);border-radius:12px;color:#fff;color:var(--white-foam);cursor:pointer;font-family:Nunito,sans-serif;font-size:1rem;font-weight:700;min-width:250px;padding:12px 20px;text-shadow:1px 1px 2px #0006;text-shadow:1px 1px 2px var(--shadow-dark)}@media (max-width:1200px){.game-container{grid-template-columns:1fr;justify-items:center}.stats-panel{max-width:600px;min-width:auto;width:100%}}@media (max-width:768px){.app-title{font-size:2.5rem}.board{border-left:none!important;border-radius:0!important;border-right:none!important;margin-left:calc(-50vw + 50%)!important;max-width:100vw!important;padding:5px;width:100vw!important}.game-container{gap:2px!important;margin:0;max-width:none;min-height:auto;overflow-x:visible!important;padding:0;width:auto}}@media (max-width:480px){.App{padding:2px}.app-title{font-size:2rem}.shipConfirmationPopup{margin:20px auto;max-width:300px;position:relative;right:auto;top:auto;width:100%}.grid-container-inline{align-items:center!important;background:linear-gradient(145deg,#f4e4a6,#d4a574)!important;background:linear-gradient(145deg,var(--sand-beige),var(--sandy-brown))!important;border:3px solid #0000!important;border-radius:0!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;margin-left:calc(-50vw + 50%)!important;max-width:100vw!important;min-height:150px!important;padding:0!important;position:relative!important;width:100vw!important}}@keyframes explosion{0%{background:linear-gradient(145deg,#ff6b47,#ff8c42);background:linear-gradient(145deg,var(--coral-orange),var(--sunset-orange));transform:scale(1)}50%{background:linear-gradient(145deg,gold,#ff6b47);background:linear-gradient(145deg,var(--explosion-yellow),var(--coral-orange));box-shadow:0 0 30px gold;box-shadow:0 0 30px var(--explosion-yellow);transform:scale(1.3)}to{background:linear-gradient(145deg,#ff6b47,#ff8c42);background:linear-gradient(145deg,var(--coral-orange),var(--sunset-orange));transform:scale(1)}}.hit-animation{animation:explosion .8s ease-in-out}@keyframes water-splash{0%{background:linear-gradient(145deg,#40c4d4,#1e7db8);background:linear-gradient(145deg,var(--tropical-cyan),var(--ocean-blue));transform:scale(1) rotate(0deg)}25%{background:linear-gradient(145deg,#fff,#40c4d4);background:linear-gradient(145deg,var(--white-foam),var(--tropical-cyan));transform:scale(1.1) rotate(5deg)}75%{background:linear-gradient(145deg,#40c4d4,#0d4d6b);background:linear-gradient(145deg,var(--tropical-cyan),var(--deep-ocean));transform:scale(.9) rotate(-5deg)}to{background:linear-gradient(145deg,#40c4d4,#1e7db8);background:linear-gradient(145deg,var(--tropical-cyan),var(--ocean-blue));transform:scale(1) rotate(0deg)}}.miss-animation{animation:water-splash .8s ease-in-out}@keyframes palm-sway{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}.grid-container:before{animation:palm-sway 3s ease-in-out infinite}@keyframes tropical-glow{0%,to{box-shadow:0 8px 25px #0006,inset 0 2px 10px #ffffff4d,0 0 20px #ffd70033;box-shadow:0 8px 25px var(--shadow-dark),inset 0 2px 10px #ffffff4d,0 0 20px #ffd70033}50%{box-shadow:0 8px 25px #0006,inset 0 2px 10px #ffffff4d,0 0 30px #ffd70066;box-shadow:0 8px 25px var(--shadow-dark),inset 0 2px 10px #ffffff4d,0 0 30px #ffd70066}}.app-header{animation:tropical-glow 4s ease-in-out infinite}@keyframes beach-waves{0%{background-position:0 50%;transform:translateX(0) translateY(0) rotate(0deg)}25%{background-position:25% 40%;transform:translateX(-10px) translateY(-5px) rotate(1deg)}50%{background-position:50% 60%;transform:translateX(-20px) translateY(-10px) rotate(0deg)}75%{background-position:75% 45%;transform:translateX(-30px) translateY(-5px) rotate(-1deg)}to{background-position:100% 50%;transform:translateX(-40px) translateY(0) rotate(0deg)}}.board:before{animation:beach-waves 12s ease-in-out infinite}@keyframes cannon-blast{0%{box-shadow:0 4px 8px #0003;transform:scale(1)}20%{box-shadow:0 2px 4px #0006;transform:scale(.9)}40%{box-shadow:0 0 25px gold,inset 0 0 15px #fffc;box-shadow:0 0 25px var(--explosion-yellow),inset 0 0 15px #fffc;transform:scale(1.3)}60%{box-shadow:0 0 20px #ff6b47,inset 0 0 10px #fff9;box-shadow:0 0 20px var(--coral-orange),inset 0 0 10px #fff9;transform:scale(1.1)}to{box-shadow:0 4px 8px #0003;transform:scale(1)}}.boardTile:active{animation:cannon-blast .4s ease-out}@keyframes sunshine-sparkle{0%,to{opacity:.3}50%{opacity:.7}}.config-badge{overflow:hidden;position:relative}.config-badge:after{animation:sunshine-sparkle 2.5s ease-in-out infinite;content:"✨";font-size:.8rem;position:absolute;right:-5px;top:-5px}@keyframes seagull-flight{0%{opacity:0;transform:translateX(-100px) translateY(0) scale(.8)}10%{opacity:.6}50%{opacity:.8;transform:translateX(50vw) translateY(-20px) scale(1)}90%{opacity:.6}to{opacity:0;transform:translateX(calc(100vw + 100px)) translateY(-40px) scale(.8)}}.version-info:before{animation:seagull-flight 25s linear infinite;content:"🐦";left:-20px;pointer-events:none;position:absolute;top:-30px}.app-footer{margin-top:30px;padding:20px;text-align:center}.kofi-link{align-items:center;background:linear-gradient(145deg,#8b4513,#5d2e0a);background:linear-gradient(145deg,var(--wood-brown),var(--dark-wood));border:3px solid #d4a574;border:3px solid var(--sandy-brown);border-radius:15px;box-shadow:0 6px 15px #0006,inset 0 2px 5px #fff3;box-shadow:0 6px 15px var(--shadow-dark),inset 0 2px 5px #fff3;color:#f4e4a6;color:var(--sand-beige);display:inline-flex;font-family:Nunito,sans-serif;font-size:1rem;font-weight:600;gap:8px;padding:12px 20px;text-decoration:none;transition:all .3s ease}.kofi-link:hover{background:linear-gradient(145deg,#5d2e0a,#8b4513);background:linear-gradient(145deg,var(--dark-wood),var(--wood-brown));box-shadow:0 8px 20px #0006,inset 0 2px 5px #ffffff4d;box-shadow:0 8px 20px var(--shadow-dark),inset 0 2px 5px #ffffff4d;color:#fff;color:var(--white-foam);transform:translateY(-2px)}.kofi-link:active{box-shadow:0 4px 10px #0006,inset 0 2px 5px #ffffff1a;box-shadow:0 4px 10px var(--shadow-dark),inset 0 2px 5px #ffffff1a;transform:translateY(0)}.kofi-logo{border-radius:4px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));filter:drop-shadow(0 2px 4px var(--shadow-dark));height:24px;width:auto}@media (max-width:768px){.kofi-link{font-size:.9rem;gap:6px;padding:10px 16px}.kofi-logo{height:20px}}@media (max-width:480px){.kofi-link{font-size:.8rem;padding:8px 12px}.kofi-logo{height:18px}}.mobile-layout{align-items:center;display:flex;flex-direction:column;gap:2px!important;justify-content:flex-start;min-height:100vh;overflow-x:hidden;overflow-y:auto;padding:0!important;width:100%}.desktop-layout{padding:20px}.mobile-title{color:gold;color:var(--explosion-yellow);font-size:1.8rem!important;margin-bottom:5px!important;text-align:center;text-shadow:2px 2px 4px #0006;text-shadow:2px 2px 4px var(--shadow-dark)}.desktop-title{font-size:2.5rem}.mobile-menu-buttons{display:flex;flex-direction:column;gap:15px;margin-bottom:20px;max-width:300px;width:100%}.mobile-btn{border:none;border-radius:12px;box-shadow:0 4px 15px #0000004d;cursor:pointer;font-size:1.1rem;font-weight:700;margin:1px 0!important;min-height:48px;padding:8px 20px!important;transition:all .3s ease}.mobile-btn.primary{background:linear-gradient(145deg,gold,#ff8c42);background:linear-gradient(145deg,var(--explosion-yellow),var(--sunset-orange));color:#5d2e0a;color:var(--dark-wood)}.mobile-btn.secondary{background:linear-gradient(145deg,#f4e4a6,#d4a574);background:linear-gradient(145deg,var(--sand-beige),var(--sandy-brown));color:#5d2e0a;color:var(--dark-wood)}.mobile-btn:active{transform:scale(.95)}.mobile-presets-container{background:linear-gradient(145deg,#1e7db81a,#0d4d6b33);border:2px solid #40c4d4;border:2px solid var(--tropical-cyan);border-radius:15px;margin-bottom:20px;max-width:400px;padding:15px;width:100%}.mobile-presets-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:15px}.mobile-preset-card{align-items:center;background:linear-gradient(145deg,#f4e4a6,#d4a574);background:linear-gradient(145deg,var(--sand-beige),var(--sandy-brown));border:2px solid #8b4513;border:2px solid var(--wood-brown);border-radius:10px;cursor:pointer;display:flex;justify-content:center;min-height:60px;padding:12px 8px;text-align:center;transition:all .3s ease}.mobile-preset-card:active{background:linear-gradient(145deg,gold,#ff8c42);background:linear-gradient(145deg,var(--explosion-yellow),var(--sunset-orange));transform:scale(.95)}.mobile-preset-card h4{color:#5d2e0a;color:var(--dark-wood);font-size:.9rem;margin:0}.mobile-config-container{background:linear-gradient(145deg,#1e7db81a,#0d4d6b33);border:2px solid #40c4d4;border:2px solid var(--tropical-cyan);border-radius:15px;margin-bottom:20px;max-width:350px;padding:15px;width:100%}.mobile-config-item{align-items:center;background:#ffffff1a;border-radius:8px;display:flex;justify-content:space-between;margin-bottom:15px;padding:10px}.mobile-config-item label{color:#fff;color:var(--white-foam);font-weight:700}.mobile-config-item input{border:2px solid #8b4513;border:2px solid var(--wood-brown);border-radius:6px;font-size:1rem;padding:8px;text-align:center;width:60px}.mobile-game-header{margin-bottom:15px!important;padding:10px}.mobile-config-info{font-size:.9rem;line-height:1.4;margin:10px 0}.mobile-tile{font-size:1rem!important}.touch-tile{transition:all .1s ease}.touch-tile:active{box-shadow:inset 0 2px 8px #0000004d;transform:scale(.9)}.game-mobile .grid-container{max-width:100%;overflow-x:auto;padding:120px!important}.game-mobile .boardTile{border-width:1px!important}.mobile-footer{margin-top:20px;padding:15px;width:100%}.mobile-footer .kofi-link{font-size:.9rem;padding:12px 20px}.mobile-footer .kofi-logo{height:20px!important}.mobile-version{font-size:.7rem;margin:10px 0;opacity:.7}.touch-device .boardTile,.touch-device button{min-height:44px;min-width:44px}@media screen and (orientation:landscape) and (max-height:600px){.mobile-layout{padding:5px!important}.mobile-title{font-size:1.4rem!important;margin-bottom:10px}.mobile-menu-buttons{flex-direction:row;justify-content:space-around;max-width:100%}.mobile-btn{font-size:.9rem;padding:10px 15px}}@media (max-width:360px){.mobile-title{font-size:1.5rem!important}.mobile-btn{font-size:1rem;padding:12px 16px}.mobile-presets-grid{grid-template-columns:1fr}.mobile-tile{font-size:1rem!important}.grid-container{background:#0ff!important;border:10px solid #f0f!important;display:block!important;margin:0 0 0 calc(-50vw + 50%)!important;min-height:400px!important;opacity:1!important;position:relative!important;visibility:visible!important;width:100vw!important;z-index:9999!important}}@media (max-width:768px){.ship-status-top{margin-bottom:5px!important;margin-left:0!important;margin-right:0!important;max-width:none!important;padding:0 5px!important}.mobile-layout,.ship-status-top{box-sizing:border-box!important;width:100%!important}.mobile-layout{margin:0!important;padding:5px!important}.App-header h1{font-size:22px!important;margin:10px 0!important}.App-header p{font-size:12px!important;margin:5px 0!important}}.ship-status-content{border-radius:10px;box-sizing:border-box!important;padding:8px!important;width:100%!important}.ship-status-title{font-size:15px;margin-bottom:5px!important}.controls-container{gap:10px!important;margin-top:10px!important}.button-group{gap:8px!important}.ship-confirmation-container{gap:5px!important;margin-top:10px!important}.ship-confirmation-popup{padding:8px 10px!important}.mobile-game-header{box-sizing:border-box;max-width:400px;padding:0 10px;width:100%}.ship-row{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.ship-label{font-size:13px;margin:0}.ship-icon{font-size:10px;height:15px;min-width:18px}.ship-confirmation-container{margin-top:15px;max-width:95%}.ship-confirmation-popup{border-radius:8px;flex-direction:column;font-size:13px;gap:10px;padding:8px 12px}.popup-confirm-btn{align-self:center;font-size:12px;padding:8px 16px}.grid-container-inline{background:#0000!important;border:12px solid #32cd32!important;box-sizing:border-box!important;margin-left:calc(-50vw + 50%)!important;max-width:100vw!important;min-height:300px!important;overflow-x:visible!important;padding:5px!important;width:100vw!important;z-index:1003!important}@media (max-width:480px){.ship-status-content{padding:10px}.ship-status-title{font-size:14px}.ship-label{font-size:12px}.ship-icon{font-size:9px;height:14px;min-width:16px}.ship-confirmation-popup{font-size:12px;padding:6px 10px}.popup-confirm-btn{font-size:11px;padding:6px 12px}}.grid-wrapper{align-items:center;display:flex;height:100%;justify-content:center;margin:50px 0;perspective:1000px;position:relative;width:100%}.grid-container-inline{transform-origin:center center!important}.grid-coord-label div,.grid-coord-label span{display:inline-block;transform:none}.grid-container-inline{transform:none}@media (max-width:768px){.grid-container-inline{margin:30px!important;padding:15px!important}}
/*# sourceMappingURL=main.40347085.css.map*/