:root{--size: 12;--calcGrid: 8, 3%;--darkColor: rgba(0, 0, 0, 0.92);--brigthColor: #fff;--secondBrightColor: #fbfbfd;--darkerBrightColor: #f5f5f7;--brightThird: #f2f2f2;--footerColor: #6e6e73;--contrastColor: #06c;--bless: gray;--transDarkColor: #1d1d1fb4;--staticRad: 10px}@-webkit-keyframes pop{0%{background-color:var(--secondBrightColor);padding-left:150%}50%{background-color:var(--darkColor);padding-left:150%}80%{background-color:var(--secondBrightColor)}100%{padding-left:0%}}@keyframes pop{0%{background-color:var(--secondBrightColor);padding-left:150%}50%{background-color:var(--darkColor);padding-left:150%}80%{background-color:var(--secondBrightColor)}100%{padding-left:0%}}@-webkit-keyframes textclip{to{background-position:200% center}}@keyframes textclip{to{background-position:200% center}}*{transition:1s;font-family:"SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;letter-spacing:-0.005em}html{scroll-behavior:smooth}body{margin:0;overflow:hidden}a{text-decoration:none;color:var(--brigthColor)}input{cursor:pointer}.wrapper{width:100vw;height:auto}.popup{width:100vw;height:100vh;background-color:var(--darkColor);display:flex;justify-content:space-around;align-items:center}.popup__block{display:flex;justify-content:space-around;align-items:center;justify-content:center;flex-direction:column;width:500px;height:200px;padding-left:50px;padding-right:50px}.popup__block--info{font-family:"Tapestry",cursive;opacity:.7;text-align:center;color:var(--secondBrightColor);font-size:32px;margin-bottom:10px}.popup__block--accept{opacity:.7;height:25px;width:130px;border-radius:10px;background-color:var(--secondBrightColor);cursor:pointer}.popup__block #toSettings{color:var(--darkColor)}.preview{display:flex;justify-content:space-around;align-items:center;background-color:var(--darkColor);width:100vw;height:100vh;border-radius:0px;z-index:1}.preview__content{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;width:380px;height:140px}.preview__content--headline{display:flex;justify-content:space-around;align-items:center;font-family:"Tapestry",cursive;color:var(--brigthColor);font-size:36px;letter-spacing:3px;width:100%;height:0px;opacity:.7}@media only screen and (min-width: 1000px){.preview__content--headline{font-size:54px}}.preview__content--secondline{display:flex;justify-content:space-around;align-items:center;width:500px;font-size:13px;color:var(--brigthColor);letter-spacing:6px;opacity:.7}@media only screen and (min-width: 1000px){.preview__content--secondline{font-size:24px}}.preview__content--start{display:flex;justify-content:space-around;align-items:center;opacity:.7;width:50px;height:30px;color:var(--brigthColor);cursor:pointer;border-bottom:dashed 2px var(--brigthColor)}.preview__content--start:hover{border-bottom:solid 2px var(--brigthColor)}#settingsID{height:100vh;width:100vw}.settings{display:flex;justify-content:space-around;align-items:center;overflow:hidden;background-color:var(--secondBrightColor);-webkit-animation-name:pop;animation-name:pop;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:1;animation-iteration-count:1}.settings__input{font-family:"SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;letter-spacing:-0.005em;display:grid;grid-template-columns:100px 100px 100px;grid-template-rows:repeat(10, 30px);gap:5px;justify-items:center;align-items:center;position:relative;width:300px;grid-area:2/2/2/2}.settings__input #settingsHead{font-family:"Tapestry",cursive;font-size:54px;grid-area:1/1/1/4}.settings__input #compInfo{grid-area:2/1/2/4;font-size:22px}.settings__input #checkboxComp{grid-area:3/1/3/4}.settings__input #playerNameInfo{grid-area:8/1/8/4}.settings__input #namePl1{grid-area:9/1/9/4}.settings__input--headline{font-size:2em;font-weight:700}.settings__input--name{width:130px;height:25px;border-radius:10px;text-align:center}.settings__input--submit{font-family:"SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;letter-spacing:-0.005em;grid-area:10/1/10/4;height:25px;width:130px;border-radius:20px}.settings__input--visible{position:absolute;width:100%;height:100%;z-index:5;background-color:var(--secondBrightColor);border-radius:20px;opacity:.5;grid-area:4/1/6/4}.settings__input--hidden{display:none}.nameField{display:flex;justify-content:space-around;align-items:center;justify-content:center;position:fixed;z-index:7;top:0;height:100vh;width:100vw;background-color:var(--darkerBrightColor)}.nameField__input{width:130px;height:25px;margin-right:20px;border-radius:10px}.nameField__close{width:50px;height:25px}.actionOff{display:none}.actionOnScroll{display:grid;grid-template-columns:30% 40% 30%;grid-template-rows:18% 50% 42%;justify-items:center;align-items:center;position:fixed;z-index:6;top:0;position:fixed;top:100px;left:100px;width:100px;height:100px;overflow:hidden;border-radius:50px}.actionOnScroll .childs0,.actionOnScroll .childs1{display:flex;justify-content:space-around;align-items:center;width:100%;height:100%;border:.01px solid #000;color:var(--bless);font-size:1em}.actionOnScroll .childs0:hover,.actionOnScroll .childs1:hover{background:#023047}.action{-webkit-animation-name:pop;animation-name:pop;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:1;animation-iteration-count:1;align-items:center;z-index:7;background-color:var(--brigthColor);width:100vw;height:100vh;align-items:flex-start;overflow:hidden;position:relative}@media only screen and (min-width: 320px){.action{display:grid;justify-content:center;grid-template-columns:5% 270px 5%;grid-template-rows:60px 300px 20px 150px 150px 50px;grid-template-areas:". tr ." ". game ." ". . ." ". score1 ." ". score2 ." ". . ."}}@media only screen and (min-width: 768px){.action{display:grid;grid-template-columns:25% 200px 200px 25%;grid-template-rows:15% 430px 20px 27% 5%;grid-template-areas:". . tr ." ". game game rs" ". . . ." ". score1 score2 ." ". . . ."}}@media only screen and (min-width: 1440px){.action{display:grid;grid-template-columns:20% 420px 30px 200px 20%;grid-template-rows:25% 160px 270px 20%;grid-template-areas:". . . . . " ". game . score1 ." ". gaem . score2 ." ". tr . . ."}}.action__playground{display:grid;grid-template-columns:repeat(var(--size), var(--calcGrid));grid-template-rows:repeat(var(--size), var(--calcGrid));position:absolute;width:270px;height:270px;background:var(--brigthColor);cursor:pointer;border-radius:var(--staticRad);z-index:0}.action__playground::after{content:"";position:absolute;z-index:1;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-position:center;opacity:.7}@media only screen and (min-width: 768px){.action__playground{width:400px;height:400px}}.action #player1{border:1px solid #126782;grid-area:game;top:5%}@media only screen and (min-width: 1440px){.action #player1{top:10%}}.action #player2{border:1px solid #023047;grid-area:game;left:5%}.action .childs0,.action .childs1{display:flex;justify-content:space-around;align-items:center;width:100%;height:100%;border:.01px dashed #000;color:gray;font-size:1em;z-index:2}.action .childs0:hover,.action .childs1:hover{border:.5px solid #023047}.action .hitTrue{font-size:22px}.action .hitTrue::before{content:"💥";filter:saturate(0.7);color:green}.action .hitFalse{font-size:22px}.action .hitFalse::before{content:"💦";filter:saturate(0.7);color:red}.action .oneHor{background-repeat:no-repeat;background-size:cover;background-position:center;background-image:url(/images/SI01-01.gif)}.action .oneVer{background-repeat:no-repeat;background-size:cover;background-position:center;background-image:url(/images/SI01-02.gif)}.action .endHor{background-repeat:no-repeat;background-size:cover;background-position:center;background-image:url(/images/SI02-01.gif)}.action .endVer{background-repeat:no-repeat;background-size:cover;background-position:center;background-image:url(/images/SI02-02.gif)}.action .startHor{background-repeat:no-repeat;background-size:cover;background-position:center;background-image:url(/images/SI03-01.gif)}.action .startVer{background-repeat:no-repeat;background-size:cover;background-position:center;background-image:url(/images/SI03-02.gif)}.action .midHor{background-repeat:no-repeat;background-size:cover;background-position:center;background-image:url(/images/SI04-01.gif)}.action .midVer{background-repeat:no-repeat;background-size:cover;background-position:center;background-image:url(/images/SI04-02.gif)}.action__score{display:flex;justify-content:space-around;align-items:center;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;height:160px;width:200px;font-size:1rem;color:var(--darkColor);margin-top:-20px}.action__score--headline{font-size:1.5rem;margin-right:50px;width:100%;color:var(--darkColor)}.action__score--points{display:flex;justify-content:space-around;align-items:center;justify-content:flex-start;height:20px;width:auto;margin-right:15px;margin-top:-10px}.action .ship4,.action .ship3,.action .ship2,.action .ship1{height:10px;width:10px;margin-right:5px;background-color:var(--bless)}.action .sunk{background-color:green}.action__reset{display:flex;justify-content:space-around;align-items:center;border-radius:var(--staticRad);height:35px;width:35px;color:var(--darkColor);cursor:pointer;grid-area:tr;position:absolute;z-index:2}@media only screen and (min-width: 320px){.action__reset{bottom:-1px;right:-21px}}@media only screen and (min-width: 786px){.action__reset{bottom:1px;right:-23px}}@media only screen and (min-width: 1440px){.action__reset{top:-9px;left:0px}}.action__reset:hover{background-color:var(--bless)}.action__timer{grid-area:tr;width:120px;font-weight:400;position:absolute;font-size:1em;z-index:1}@media only screen and (min-width: 320px){.action__timer{bottom:-8px;right:-24px}}@media only screen and (min-width: 786px){.action__timer{bottom:-6px;right:-12px}}@media only screen and (min-width: 1440px){.action__timer{top:-13px;left:35px}}#score1{grid-area:score1}#score2{grid-area:score2}.reset{display:flex;justify-content:space-around;align-items:center;width:100vw;height:100vh;position:fixed;top:0;background-color:var(--transDarkColor);z-index:20}.reset--sure{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;background-color:var(--brigthColor);height:150px;width:300px;border-radius:var(--staticRad)}.reset--sure--text{width:100%;height:50px;font-size:1.2em;margin-top:20px;text-align:center}.reset--sure--yes,.reset--sure--nah{cursor:pointer;margin-bottom:20px}.winner{display:flex;justify-content:space-around;align-items:center;background:linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);background-size:400% 400%;-webkit-animation:gradient 10s ease infinite;animation:gradient 10s ease infinite;height:100vh;width:100vw;height:100vh;position:fixed;top:0;z-index:20}@-webkit-keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.winner__content{display:flex;justify-content:space-around;align-items:center;flex-direction:column;width:500px;height:200px}.winner__content--text{text-align:center;color:var(--brigthColor)}.winner__content--close{display:flex;justify-content:space-around;align-items:center;cursor:pointer;background-color:var(--brigthColor);height:50px;width:100px;border-radius:var(--staticRad)}.invitation{display:flex;justify-content:space-around;align-items:center;z-index:6;height:100vh;width:100vw;background-color:var(--darkColor)}.invitation__block{display:flex;justify-content:space-around;align-items:center;flex-direction:column;width:90%;height:100px}.invitation__block--head{font-family:"Tapestry",cursive;font-size:18px;letter-spacing:3px;color:var(--secondBrightColor);height:0px;opacity:.7}@media only screen and (min-width: 450px){.invitation__block--head{height:10px;font-size:30px}}@media only screen and (min-width: 1000px){.invitation__block--head{height:10px;font-size:54px}}.invitation__block--link{display:flex;justify-content:space-around;align-items:center;width:100%;height:50px;color:var(--secondBrightColor);font-size:8px;opacity:.7}@media only screen and (min-width: 450px){.invitation__block--link{font-size:12px}}@media only screen and (min-width: 1000px){.invitation__block--link{font-size:20px}}.invitation__block--copy{opacity:.7;height:50px;width:100px;background-color:var(--secondBrightColor);cursor:pointer;border-radius:20px}