*{margin:0;padding:0;font-family:Rubik,sans-serif;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}body,html{min-height:calc(var(--vh,1vh) * 100);background-color:#333}body{display:flex;flex-direction:column}#root{flex:1;display:flex;flex-direction:column}:focus{outline:0!important}.button--ok{cursor:pointer;display:flex;align-items:center;font-size:15px;font-weight:500;justify-content:space-between;border:none;background-color:#84cc16;padding:5px 10px 5px 10px;border-radius:20px}.button--ok svg{width:24px;height:24px;margin-left:5px}kbd{border-radius:3px;border:1px solid #b4b4b4;display:inline-block;color:#fff;font-weight:400;line-height:1;padding:2px 4px;white-space:nowrap}.not-found{height:90vh;display:flex;align-items:center}.not-found h1{color:#fff;width:100%;text-align:center;padding:20px;font-weight:500;font-size:30px}.container{max-width:1500px;min-height:60vh;margin:auto;flex:1;margin-bottom:15vh;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:20px}.main-logo{margin:60px}@media screen and (max-width:800px){.main-logo{margin:20px}}.img{width:500px}@media screen and (max-width:800px){.img{width:300px}}.header{display:flex;justify-content:center}.create-game-container{min-height:20vh;margin-top:40px;margin-bottom:40px;display:flex;flex-direction:column;justify-content:space-between}.game-setup-error{font-size:14px;text-align:center;color:red}.navbar{height:60px;width:60px;position:fixed;margin-bottom:60px;z-index:5}.navbar ul{background:#dcdcdc;height:100%;width:0;position:fixed;left:-240px;flex-direction:column;transition:.3s ease all;z-index:15;margin-block-start:0}.navbar ul.active{left:0;width:35%}.navbar ul figure{position:fixed;left:9px;top:10px}.navbar ul li{cursor:pointer}.navbar ul a{color:#333;display:block;padding:15px;font-size:20px;font-weight:500;text-decoration:0}.navbar ul a:hover{background-color:gray}.menu{margin:60px}.menu-icon{width:40px;height:40px;cursor:pointer}.loading{width:100%;height:100%}.spinner{background:0 0;font-size:0;width:100%;height:100%;border-radius:100%;padding:0;border:3px solid transparent;animation-name:loading;animation-duration:.7s;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.loadingx{width:100%;height:100%}.loadingx .spinnerx{background:0 0;font-size:0;width:100%;height:100%;border-radius:100%;padding:0;border:0 solid transparent;animation-name:loading;animation-duration:.7s;animation-iteration-count:infinite;animation-timing-function:linear}.loading-container{width:100%;flex:1;display:flex;align-items:center;justify-content:center}.content{width:100%;flex:1;display:flex;justify-content:center;align-items:center}.input-container{display:flex;flex-direction:column;align-items:center}.input-container label{font-weight:500;padding:10px;color:#fff}.input-container p{min-height:40px;font-size:14px;padding:10px;color:red}.input-fields{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:5px 5px 5px 15px;border-radius:6em;border:0;outline:0;border-radius:5vh;box-shadow:0 .125em .3125em rgba(51,51,51,.3);background-color:#ededed}.input-field{height:100%;width:100%;padding:0 5px;outline:0;border:0;font-weight:500;font-size:14px;background-color:#ededed}.input-field::placeholder{color:#a1a1a1}.submit-button{width:100px;height:35px;border-radius:6em;outline:0;border:0;cursor:pointer;font-weight:500;font-size:14px;display:flex;justify-content:center;align-items:center;transition:ease-in-out background-color .2s;background-color:#6074ff;color:#fff}.submit-button:hover{background-color:#614de8}.submit-button:active{background-color:#9a54ff}:root{--grid-border-color:#1f2937;--grid-border-size:1px;--board-header-background-color:#4b5563;--board-header-color:#fff;--grid-background-color:#9ca3af}.board{border-top:var(--grid-border-size) solid var(--grid-border-color);border-left:var(--grid-border-size) solid var(--grid-border-color)}.board *{box-sizing:border-box}.board .grid-container{width:100%;display:flex}.board .board-header{background-color:var(--board-header-background-color);color:var(--board-header-color)}.board .board-header-top{display:flex}.board .tile{box-sizing:border-box;border-right:var(--grid-border-size) solid var(--grid-border-color);border-bottom:var(--grid-border-size) solid var(--grid-border-color);display:flex;align-items:center;justify-content:center}.board .tile div{width:100%;height:100%}.board .tile>div{transition:background-color .3s ease-out}.board .tile .waiting{background-color:green}.board .grid{width:100%;background-color:var(--grid-background-color)}.board .grid div{float:left;box-sizing:border-box}.board .grid button{width:100%;height:100%;background-color:transparent;border:none;cursor:pointer}.board .grid .tile-state-empty{background-color:transparent}.board .grid .tile-state-hit{display:flex;align-items:center;justify-content:center}.board .grid .tile-state-hit g{fill:#d73502}.board .grid .tile-state-hit div{border-radius:100%;width:60%;height:60%;background-color:#90ee90;border:1px solid green}.board .grid .tile-state-miss{display:flex;align-items:center;justify-content:center}.board .grid .tile-state-miss svg{fill:#000;width:70%;height:70%}.board .grid .tile-state-loading{background-color:#878e9b}.board .grid .tile-state-boat{background-color:#dea801}.board .grid .tile-state-completed{background-color:#84cc16}.boat{box-sizing:border-box;background-color:#dea801;cursor:move;user-select:none}@keyframes easein{from{opacity:.05}to{opacity:1}}.game-error{position:absolute;backdrop-filter:blur(5px);width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;z-index:100}.game-error .game-error-window{background-color:#e75d44;display:flex;align-items:center;margin:10px;padding:25px;animation-name:easein;animation-duration:1s}.game-error .game-error-window p{color:#ededed}.game-error .game-error-window svg{fill:#000;width:36px;height:36px;margin-right:12px}.waiting-container{flex:1;padding:20px;align-self:center;align-items:center;display:flex;width:100%;padding-bottom:100px}.waiting-container .wait{padding:10px;width:100%;max-width:400px;text-align:center;font-weight:500;margin:0 10px 0 10px;background-color:#fec514;border:1px solid #dea801;color:#333;margin:auto;margin-bottom:50px}.waiting-container .gameid-container{width:100%;flex-direction:column}.waiting-container h2{text-align:center;font-size:min(calc(24px + 15vw),120px)}.waiting-container .gameid{text-align:center;font-size:min(calc(24px + 2vw),30px)}.waiting-container .copy-container{display:flex;flex-direction:row;background-color:#000;margin:auto;padding:10px;max-width:400px}.waiting-container .copy-container input{width:100%;background-color:transparent;padding:10px;border:0;color:#fff}.waiting-container .copy-container button{background-color:#000;line-height:0;border:0;cursor:pointer}.waiting-container .copy-container button svg{fill:#fff}.game-container{background-color:#333;flex:1;color:#fff;display:flex;flex-direction:column;align-items:center}.game-container .game-inner-container{display:flex;justify-content:space-around;flex:1;flex-direction:column;max-width:1000px;width:100%}.game-container .game-wrapper{min-width:0;max-width:1000px;width:100%}.game-container .place-boats-container{display:flex;width:100%;height:100%;justify-content:center;align-items:center;flex-direction:column}.game-container .place-boats-container button{margin:20px}.game-container .place-boat-actions{display:flex;justify-content:center;margin:10px;margin-top:20px;margin-bottom:20px}.game-container .place-boat-actions button{padding:10px 15px 10px 15px;border-radius:50px;margin:0 10px 0 10px;border:none;font-weight:500;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:.2s background-color}.game-container .place-boat-actions button svg{width:24px;height:24px;margin-left:10px;fill:#fff}.game-container .place-boat-actions .send{background-color:#84cc16}.game-container .place-boat-actions .send:hover{background-color:#9ee82d}.game-container .place-boat-actions .send:active{background-color:#d8e30e}.game-container .place-boat-actions .random{background-color:#6074ff}.game-container .place-boat-actions .random:hover{background-color:#614de8}.game-container .place-boat-actions .random:active{background-color:#9a54ff}.game-container .game-info{display:flex;justify-content:center;padding-bottom:15px;font-size:15px;font-weight:400;align-items:center}.game-container .game-info button{margin-left:20px}.game-container .game-info .gold{color:gold}.game-container .game-info span{font-weight:500;padding-left:10px;padding-right:10px}.game-container .game-shoot-container{flex:1;display:flex;flex-direction:column}.game-container .game-shoot-container .game-shoot-board{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.game-container .game-shoot-container .game-shoot-switch button{min-height:30px;height:10vh;width:50%;cursor:pointer;font-weight:500;font-size:18px;color:#fff;background-color:#2e2e2e;border:none;transition:.2s background-color}.game-container .game-shoot-container .game-shoot-switch button.active{background-color:#6074ff}.game-container .game-shoot-container .game-shoot-switch button:active{background-color:#9a54ff}.game-container .game-shoot-container .game-shoot-xl{display:flex}.game-container .game-shoot-container .game-shoot-xl>div:first-child{margin-right:15px}.game-container .game-shoot-container .game-shoot-header{width:100%}.game-container .game-shoot-container p{width:100%;text-align:center;padding:10px}.game-container .game-shoot-container .status{padding:10px;width:100%;max-width:400px;text-align:center;font-weight:500;margin:0 10px 0 10px;transition:background-color .5s ease-in-out}.game-container .game-shoot-container .waiting{background-color:#fec514;border:1px solid #dea801;color:#333}.game-container .game-shoot-container .ok{background-color:#84cc16;border:1px solid #9ee82d}.game-container .game-shoot-container .score{text-align:center;font-size:20px;font-weight:500}.game-container .player-info{width:100%;display:flex;align-items:center}.game-container .player-info>div:first-child,.game-container .player-info>div:last-child{padding:10px;width:50%}.game-container .player-info .point{font-size:20px}.game-container .player-info>div:first-child{text-align:end;font-weight:500}.waiting-modal{display:flex;align-items:center;background-color:#fec514;padding:25px;color:#000;animation-name:easein;animation-duration:.5s}.waiting-modal svg{fill:#000;width:36px;height:36px;margin-right:12px}.gameover-modal{background-color:gold;color:#000;animation-name:easein;animation-duration:.5s}.gameover-modal .gameover-header{display:flex;justify-content:flex-end;padding:5px 5px 0 5px}.gameover-modal .gameover-header button{border:0;line-height:0;cursor:pointer;background-color:transparent}.gameover-modal .gameover-header svg{width:24px;height:24px}.gameover-modal .gameover-content{text-align:center;padding:0 40px 40px 40px}.gameover-modal h2{font-size:42px}.gameover-modal p{max-width:150px;margin:auto}.gameover-modal svg{align-self:center;fill:#000;width:56px;height:56px}.loser{background-color:red}.game-header{padding:10px;padding-top:20px;max-width:1000px;width:100%;display:flex;justify-content:space-between;align-items:center}.game-header button{background-color:transparent;border:0;line-height:0;cursor:pointer}.game-header button svg{width:30px;height:30px;fill:#ededed}.game-header img{width:180px}.game-header .space{width:30px}.modal-container{z-index:1000;position:absolute;width:100vw;height:100vh;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center}.modal-container .modal-window{margin:10px}.game-handler-container{background-color:#333;min-height:100vh;color:#fff;display:flex;flex-direction:column;align-items:center}.game-handler-content{align-self:center;align-items:center;display:flex;flex:1;width:100%;max-height:80vh;flex-direction:column;padding:30px;justify-content:space-between}