*{box-sizing:border-box}html,body{margin:0;padding:0;font-size:14px;width:100%;height:100%}:root{--cell-color: #ededed;--cell-border-color: #ccc;--ship-color: #007bff;--hit-color: #dc3545;--error-color: #fd7e14;--auto-color: #fcd5e5;--miss-color: #bebebe;--cell-size: min(calc(100vw / 13), 2.5rem);--button-height: 2.5rem}body{padding:calc(var(--cell-size) * .5);background-color:#f8f9fa}#app{font-family:Arial,sans-serif}#fullscreen{position:fixed;top:1rem;right:1rem;z-index:1000;width:2rem;height:2rem}#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}#layout-wrapper{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem}h1,h2,h3,h4,h5{margin:0}input{padding:.5rem;font-size:1rem;border:1px solid #ccc;border-radius:.25rem;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:.25rem;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.used-ship-item{background-color:var(--miss-color)}button.active-ship-item{background-color:var(--ship-color)}button.error-ship-item{background-color:var(--error-color)}.gamefield-container{display:flex;flex-direction:column;align-items:center;justify-content:unset;margin-left:-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:before,.gamefield .cell.miss:after{content:"";position:absolute;left:50%;top:50%;width:100%;height:2px;background:var(--miss-color);border-radius:2px;transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}.gamefield .cell.last{border:2px solid var(--error-color)}.gamefield .cell.miss:after{transform:translate(-50%,-50%) rotate(-45deg)}.gamefield .cell.ship{background-color:var(--ship-color)}.gamefield .cell.hit{background-color:var(--hit-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;gap:1rem;margin-top:0;max-width:16rem}.button-group{display:flex;gap:.5rem}.ship-buttons button{padding:0rem .5rem}.ship-buttons.vertical .button-group{justify-content:flex-end}.ship-buttons.vertical .button-group.submarine{display:grid;grid-template-columns:repeat(2,3rem);gap:.5rem}.input-group{display:flex;align-items:center;flex-direction:column;gap:.5rem}.ship-img{width:1rem;height:1rem;margin:.25rem}