@import "https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{color:#e0f4ff;background:#010a14;min-height:100vh;font-family:Raleway,sans-serif;overflow:hidden}.parallax-bg{z-index:0;position:fixed;inset:0;overflow:hidden}.parallax-bg:before{content:"";opacity:.3;background-image:url(/bg.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute;inset:0}.parallax-bg:after{content:"";background:#03132599;position:absolute;inset:0}.intro-card,.result-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:linear-gradient(160deg,#081c37eb,#030f23f7);border:1px solid #64b4dc33;border-radius:18px;width:min(500px,100%);padding:clamp(1.5rem,5vw,3rem) clamp(1.2rem,6vw,3.5rem) clamp(1.2rem,4vw,2.5rem);position:relative;box-shadow:0 0 0 1px #c8e6ff0a,0 0 80px #0064c826,0 40px 80px #00000080,inset 0 1px #c8e6ff14,inset 0 -1px #0064c81a}.intro-card:before,.result-card:before{content:"";background:linear-gradient(90deg,#0000,#a0d2f066,#dcf0ff,#b4dcfa99,#dcf0ff,#a0d2f066,#0000);height:1px;position:absolute;top:-1px;left:8%;right:8%}.intro-card-bottom{background:linear-gradient(90deg,#0000,#64b4dc66,#0000);height:1px;position:absolute;bottom:-1px;left:30%;right:30%}.corner-tl,.corner-tr,.corner-bl,.corner-br{width:22px;height:22px;position:absolute}.corner-tl{border-top:1.5px solid #a0d2f099;border-left:1.5px solid #a0d2f099;top:10px;left:10px}.corner-tr{border-top:1.5px solid #a0d2f099;border-right:1.5px solid #a0d2f099;top:10px;right:10px}.corner-bl{border-bottom:1.5px solid #a0d2f099;border-left:1.5px solid #a0d2f099;bottom:10px;left:10px}.corner-br{border-bottom:1.5px solid #a0d2f099;border-right:1.5px solid #a0d2f099;bottom:10px;right:10px}.side-left,.side-right{width:1px;position:absolute;top:20%;bottom:20%}.side-left{background:linear-gradient(#0000,#64b4dc4d,#0000);left:-1px}.side-right{background:linear-gradient(#0000,#64b4dc4d,#0000);right:-1px}#splash{z-index:100;text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:1rem;transition:opacity .9s,transform .9s;display:flex;position:fixed;inset:0}#splash.out{opacity:0;pointer-events:none;transform:scale(.92)}.splash-title{letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(#fff 0%,#b8e8ff 20%,#60d0ff 45%,#a0c8e8 65%,#c8d8e8 80%,#8ab8d0 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 30px #50c8ffcc)drop-shadow(0 0 80px #0096ff80)drop-shadow(0 0 160px #0064dc4d);-webkit-background-clip:text;background-clip:text;font-size:clamp(2.8rem,11vw,9rem);font-weight:900;animation:3.5s ease-in-out infinite float}.splash-subtitle{letter-spacing:.5em;text-transform:uppercase;color:#96d2f080;margin-top:1.2rem;font-size:clamp(.6rem,1.5vw,.8rem);animation:3s ease-in-out infinite pulse}.scan-bar{background:linear-gradient(90deg,#0000,#a0d2f04d,#dcf0ffe6,#a0d2f04d,#0000);width:min(320px,80vw);height:1px;margin-top:2rem;position:relative;overflow:hidden}.scan-bar:after{content:"";filter:blur(1px);background:linear-gradient(90deg,#0000,#ffffffe6,#0000);border-radius:2px;width:60px;height:5px;animation:2s ease-in-out infinite scanMove;position:absolute;top:-2px;left:-60px}@keyframes scanMove{0%{left:-60px}to{left:calc(100% + 60px)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes pulse{0%,to{opacity:.4}50%{opacity:.9}}#intro{z-index:1;opacity:0;justify-content:center;align-items:center;min-height:100vh;padding:clamp(1rem,4vw,2rem);transition:opacity .9s,transform .9s;display:flex;position:relative;transform:translateY(28px)}#intro.visible{opacity:1;transform:translateY(0)}.intro-heading{letter-spacing:.1em;text-transform:uppercase;text-align:center;background:linear-gradient(#fff 0%,#b0e0ff 30%,#50c8f0 55%,#90b8d0 75%,#b8c8d8 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px #50c8ff99);-webkit-background-clip:text;background-clip:text;margin-bottom:.4rem;font-size:clamp(1.8rem,6vw,2.6rem);font-weight:900}.intro-quote{text-align:center;letter-spacing:.18em;text-transform:uppercase;color:#8cc3dc8c;margin-bottom:.6rem;font-size:.72rem}.divider{align-items:center;gap:8px;margin:1.6rem 0 2rem;display:flex}.divider-line{background:linear-gradient(90deg,#0000,#8cc8e666);flex:1;height:1px}.divider-line.right{background:linear-gradient(270deg,#0000,#8cc8e666)}.divider-diamond{background:#64b4dc33;border:1px solid #a0d7f5b3;width:6px;height:6px;transform:rotate(45deg)}.field-label{letter-spacing:.25em;text-transform:uppercase;color:#82bedc8c;margin-bottom:.5rem;font-size:.65rem;display:block}.name-input{color:#d0eeff;letter-spacing:.05em;background:#001432b3;border:1px solid #5096c840;border-radius:8px;outline:none;width:100%;margin-bottom:1.4rem;padding:.85rem 1.2rem;font-family:inherit;font-size:1rem;transition:border-color .25s,box-shadow .25s;box-shadow:inset 0 1px #b4dcfa0f}.name-input::placeholder{color:#649bc359;font-style:italic}.name-input:focus{border-color:#50beff8c;box-shadow:0 0 0 3px #0096ff14,0 0 24px #0096ff1f,inset 0 1px #b4dcfa1a}.start-btn,.dir-btn{letter-spacing:.2em;text-transform:uppercase;cursor:pointer;border-radius:8px;font-family:inherit;font-weight:700;transition:border-color .25s,box-shadow .25s,color .25s}.start-btn{color:#a8e0f8;background:linear-gradient(#143c6499,#0a2341cc);border:1px solid #50b4e673;width:100%;padding:.95rem 1.5rem;font-size:.8rem;position:relative;overflow:hidden;box-shadow:inset 0 1px #c8ebff1f,inset 0 -1px #0050964d}.start-btn:before{content:"";background:linear-gradient(90deg,#0000,#c8ebff0f,#c8ebff1a,#0000);width:60%;transition:left .6s;position:absolute;top:0;bottom:0;left:-100%;transform:skew(-20deg)}.start-btn:hover:before{left:160%}.start-btn:hover,.dir-btn:hover{color:#d0f0ff;border-color:#64d2ffbf}.start-btn:hover{box-shadow:0 0 24px #0af3,0 0 60px #0082ff1a,inset 0 1px #dcf5ff26,inset 0 -1px #0050964d}.start-btn:active{transform:scale(.985)}#placement{z-index:1;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:clamp(1rem,4vw,2.5rem);display:none;position:relative}#placement.visible{display:flex}.placement-wrapper{flex-direction:column;align-items:center;gap:1.5rem;width:100%;display:flex}.placement-title{letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(#fff 0%,#80d8ff 50%,#aac8d8 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 12px #50c8ff80);text-align:center;-webkit-background-clip:text;background-clip:text;font-size:clamp(1rem,3.5vw,1.4rem);font-weight:800}.placement-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;display:flex}.dir-btn{color:#a8e0f8;letter-spacing:.1em;background:0 0;border:1px solid #50b4e673;padding:.6rem 1.2rem;font-size:.75rem}.ship-prompt{letter-spacing:.1em;text-transform:uppercase;color:#8cc3dcb3;text-align:center;font-size:.75rem}.cell-preview{background:#00b47866!important}.cell-invalid{background:#ff505066!important}#game{z-index:1;min-height:100vh;padding:clamp(1rem,4vw,2.5rem);display:none;position:relative}#game.visible{flex-direction:column;justify-content:center;align-items:center;display:flex}.game-title{letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(#fff 0%,#80d8ff 50%,#aac8d8 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 12px #50c8ff80);text-align:center;-webkit-background-clip:text;background-clip:text;margin-bottom:1.3rem;font-size:clamp(1.1rem,4vw,1.6rem);font-weight:800}.boards-wrapper{flex-wrap:wrap;justify-content:center;gap:clamp(1.5rem,4vw,4rem);display:flex}.board-label{letter-spacing:.2em;text-transform:uppercase;color:#78b9dc99;text-align:center;margin-bottom:.75rem;font-size:.72rem}.board-grid{grid-template-columns:repeat(10, var(--cell));--cell:clamp(24px, 3.5vw, 36px);background:#020a14b8;border:.8px solid #c2d9eb52;gap:2px;display:grid}.computer-board{cursor:crosshair}.cell{width:var(--cell,36px);height:var(--cell,36px);background:#00285099;border:1px solid #00a0ff33}.cell-ship{background:#00b47880}.cell-hit{background:#ffc80066}.cell-miss-dot{background:#ff5050d9;border-radius:50%;width:18%;height:18%;margin:35% auto auto}.game-instruction{text-align:center;letter-spacing:.08em;color:#bee1ffbf;max-width:720px;margin:0 auto 1.4rem;font-size:.92rem}.app-footer{z-index:200;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.5rem;display:flex;position:fixed;bottom:0;left:0;right:0}.footer-copy{color:#b4d7ebc7;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem}.footer-links{align-items:center;gap:.8rem;display:flex}.footer-links a{color:#aad2f0e6;width:1.25rem;height:1.25rem;transition:transform .2s,color .2s;display:inline-flex}.footer-links a:hover{color:#e6f7ff;transform:translateY(-2px)}.footer-links svg{fill:currentColor;width:100%;height:100%}.hidden{display:none!important}#result{z-index:1;justify-content:center;align-items:center;min-height:100vh;padding:clamp(1rem,4vw,2rem);display:none;position:relative}#result.visible{display:flex}.result-card{text-align:center}.result-label{letter-spacing:.3em;text-transform:uppercase;color:#82bedc8c;margin-bottom:.6rem;font-size:.65rem}.result-heading{letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(#fff 0%,#b0e0ff 30%,#50c8f0 55%,#90b8d0 75%,#b8c8d8 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 24px #50c8ffb3);-webkit-background-clip:text;background-clip:text;margin-bottom:.5rem;font-size:clamp(2.2rem,8vw,3.5rem);font-weight:900}.result-heading.defeat{background:linear-gradient(#fff 0%,#ffb0b0 30%,#f05050 55%,#c03030 100%);filter:drop-shadow(0 0 24px #ff505099);-webkit-background-clip:text;background-clip:text}.result-quote{letter-spacing:.18em;text-transform:uppercase;color:#8cc3dc8c;margin-bottom:.6rem;font-size:.72rem}@media (width<=480px){.boards-wrapper{gap:1.5rem}.board-grid{--cell:clamp(22px, 7.5vw, 30px)}.placement-controls{flex-direction:column;gap:.75rem}.corner-tl,.corner-tr,.corner-bl,.corner-br{width:14px;height:14px}}