html{margin:0;padding:0;box-sizing:border-box;font-family:Courier New,Courier,monospace}body{background-color:#131313;color:#e5e5e5}header{display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:20px}header button{background-color:#242424;font-size:15px;font-weight:700;padding:9px 14px;border-radius:10px;letter-spacing:1px;box-shadow:0 2px 6px #00000073,inset 0 1px #ffffff14;transition:transform .15s ease,box-shadow .15s ease}header div{display:flex;gap:15px}header button:enabled:hover{transform:scale(1.02)}header button:enabled:active{transform:scale(.98)}.placement-info{display:flex;gap:10px;align-items:center}.boards-container{display:flex;height:70vh;justify-content:space-evenly;align-items:center;flex-wrap:wrap;gap:30px;margin-bottom:50px}.board-wrapper{position:relative;margin-top:40px}.board-label{position:absolute;top:-26px;padding:5px 20px;font-weight:700;font-size:13px;letter-spacing:2px;color:#00f2ff;background:#1b1b1b;border:1px solid rgba(255,255,255,.1);border-bottom:none}.board-label.left{border-radius:8px 8px 0 0}.board-label.right{right:0;border-radius:8px 8px 0 0;color:#ff4d4d}.board-label.left.active{border-color:#00f2ff;box-shadow:0 -2px 30px #00f2ff40,0 -2px 10px #00f2ff66}.board-label.right.active{border-color:#ff4d4d;box-shadow:0 -2px 30px #ff000040,0 -2px 10px #f006}:root{--board-size: 450px}.board{display:grid;width:var(--board-size);height:var(--board-size);grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);border-radius:5px;box-shadow:0 0 8px 2px #bababa99}button{all:unset;box-sizing:border-box;cursor:pointer}.cell{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:#252e42;font-size:25px;font-weight:bolder;cursor:crosshair;transition:box-shadow .3s ease,transform .2s ease}.cell:enabled:hover{box-shadow:0 0 8px 2px #69171799;transform:scale(1.01)}.cell:enabled:active{transform:scale(.99);box-shadow:0 0 8px 2px #5a282899}.cell:disabled{cursor:default}.cell:disabled:hover{box-shadow:0 0 8px 2px #bababa99;transform:scale(1.01)}.cell.hit{background-color:#704242}.cell.miss{background-color:#2f2f2f}.cell.ship{background-color:#242424}.cell.preview-valid{background-color:#00ff004d;border:1px dashed green}.cell.preview-valid:hover{box-shadow:0 0 8px 2px #0c9e1599}.cell.preview-invalid{background-color:#ff00004d;border:1px dashed rgb(128,0,0)}.cell.preview-invalid:hover{box-shadow:0 0 8px 2px #9e0c0c99}