body{font-family:"Press Start 2P",cursive;background-color:#000020;color:#0f0;margin:0;padding:20px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow-x:hidden}#game-container{border:3px solid #FF00FF;padding:20px;box-shadow:0 0 15px #f0f,0 0 25px #f0f inset;background-color:#000010;max-width:1000px;width:95%}header h1{color:#ff0;text-shadow:0 0 2px #FFFF00;font-size:2em}#game-area h2{color:#0ff;text-shadow:0 0 1px #00FFFF}button{font-family:"Press Start 2P",cursive;background-color:#1a1a3a;color:#0f0;border:2px solid #00FF00;padding:10px 15px;margin:10px 5px;cursor:pointer;box-shadow:0 0 5px #0f0;transition:background-color .3s,color .3s,box-shadow .3s;font-size:.9em}button:hover:not(:disabled){background-color:#0f0;color:#000020;box-shadow:0 0 10px #0f0,0 0 15px #0f0}button:disabled{color:#505050;border-color:#505050;box-shadow:none;cursor:not-allowed;opacity:.7}#game-info{margin-bottom:20px}#message-area{min-height:1.2em;color:#ff0;font-size:1.1em}#turn-indicator{height:2.9em;line-height:1.3;overflow:hidden;color:#fff;font-size:1.1em;margin-bottom:5px;display:flex;align-items:center;justify-content:center;text-align:center}#boards-container{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px}.board-section{display:flex;flex-direction:column;align-items:center}.board-layout{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;align-items:end;justify-items:start;gap:0px;width:fit-content;margin:0 auto}.spacer-for-row-labels{grid-column:1 / 2;grid-row:1 / 2;width:25px;height:25px}.col-labels{grid-column:2 / 3;grid-row:1 / 2;display:flex;width:300px;margin-bottom:2px}.row-labels{grid-column:1 / 2;grid-row:2 / 3;display:flex;flex-direction:column;height:300px;margin-right:2px}.grid-board{grid-column:2 / 3;grid-row:2 / 3;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);width:300px;height:300px;border:2px solid #00FF00;background-color:#000030}.col-labels>div,.row-labels>div{width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#0ff;font-size:.7em}.row-labels>div{align-items:center}.col-labels>div{align-items:center}.cell{border:1px solid #005050;display:flex;justify-content:center;align-items:center;font-size:.8em;cursor:default}#computer-board .cell:hover:not(.hit):not(.miss):not(.pending-selection){background-color:#033}#computer-board .cell.selectable{cursor:pointer}.cell.ship{background-color:#0aa}.cell.hit{background-color:red;color:#fff}.cell.miss{background-color:#303080;color:#aaf}.cell.sunk{background-color:maroon;opacity:.7}.cell.pending-selection{background-color:#ff0!important;opacity:.5}.newly-hit-animation,.newly-missed-animation{animation:cell-pulsate-animation .5s ease-out}@keyframes cell-pulsate-animation{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.hidden{display:none!important}@media (max-width: 768px){header h1{font-size:1.5em}.grid-board{width:250px;height:250px}.col-labels{width:250px}.row-labels{height:250px}.col-labels>div,.row-labels>div{width:25px;height:25px;font-size:.6em}.spacer-for-row-labels{width:20px;height:20px}button{font-size:.8em;padding:8px 12px}#boards-container{flex-direction:column;align-items:center}}@media (max-width: 480px){header h1{font-size:1.2em}.grid-board{width:200px;height:200px}.col-labels{width:200px}.row-labels{height:200px}.col-labels>div,.row-labels>div{width:20px;height:20px;font-size:.5em}.spacer-for-row-labels{width:15px;height:15px}.cell{font-size:.6em}button{font-size:.7em;padding:6px 10px;width:calc(50% - 10px)}}