*{box-sizing:border-box}html,body{margin:0;padding:0;font-size:16px;overflow:hidden}:root{--cell-color: #ededed;--cell-border-color: #ccc;--ship-color: #007bff;--hit-color: #dc3545;--placing-color: #333137;--error-color: #fd7e14;--auto-color: #fcd5e5;--miss-color: #bebebe;--cell-size: min(calc(100vw / 14), 2.5rem);--button-height: 2.5rem}body{padding:calc(var(--cell-size) * .5);background-color:#f8f9fa}#app{font-family:Arial,sans-serif}#login{display:flex;flex-direction:column;align-items:center;gap:1rem}#game{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1rem;-webkit-user-select:none;user-select:none}h1,h2,h3,h4,h5{margin:0}input{padding:.5rem;font-size:1rem;border:1px solid #ccc;border-radius:4px;outline:none}button{padding:0rem 1rem;line-height:var(--button-height);min-height:var(--button-height);font-size:1rem;color:#fff;border:none;border-radius:4px;cursor:pointer;background-color:#007bff;display:inline-flex;align-items:center;justify-content:center}button[disabled]{opacity:.3;cursor:not-allowed}button.ship-item{background-color:#28a745}button.active-ship-item{background-color:#007bff}button.used-ship-item{background-color:#6c757d}.gamefield-container{display:flex;flex-direction:column;align-items:center;justify-content:unset;gap:1rem}.gamefield{display:grid;grid-template-rows:repeat(11,var(--cell-size))}.gamefield .header{display:flex;align-items:center;justify-content:center;font-weight:700;background-color:transparent;border:none;cursor:default}.gamefield .row{display:grid;grid-template-columns:repeat(11,var(--cell-size))}.gamefield .cell{width:var(--cell-size);height:var(--cell-size);background-color:var(--cell-color);border:1px solid var(--cell-border-color);cursor:pointer;position:relative}.gamefield .cell.auto{background-color:var(--auto-color)}.gamefield .cell.miss:after{content:"";position:absolute;top:50%;left:50%;width:calc(var(--cell-size) * .4);height:calc(var(--cell-size) * .4);border-radius:50%;transform:translate(-50%,-50%);background-color:var(--miss-color)}.gamefield .cell.ship{background-color:var(--ship-color)}.gamefield .cell.hit{background-color:var(--hit-color)}.gamefield .cell.placing{background-color:var(--placing-color)}.gamefield .cell.error{background-color:var(--error-color)}.actions{display:flex;justify-content:center;gap:1rem}.actions>*{width:calc(var(--cell-size) * 5)}.shiplist{display:flex;flex-direction:column;justify-content:center;gap:1rem;width:100%}.ships{width:100%}.ship-buttons{max-width:14rem;margin:0 auto;display:flex;justify-content:center;flex-direction:column;gap:.5rem}.ship-buttons.vertical{transform:rotate(-90deg);transform-origin:center center;margin-top:-.5rem}.input-group{display:flex;align-items:center;flex-direction:column;gap:.5rem}.ship-img{width:1rem;height:1rem;margin:.25rem}