:root{--bg1:#0b1b35;--bg2:#050812;--w:#fff;--b:#000;--panel:#ffffff0f;--panel2:#00000047;--bar:#00000040;--bd:#ffffff14;--bd2:#ffffff1f;--cell:#ffffff0f;--cell2:#ffffff1f;--cell3:#ffffff2e;--sh1:#00000059;--sh2:#00000073;--sh3:#0000008c;--cyan:#46d9ff;--blue:#2c70ff;--red:#ff4646;--green:#2eff82;--glow:#46d9ff26;--glow2:#46d9ff40;--cyanBd:#46d9ff99;--inset:#ffffff0d;--missDot:#ffffffbf;--hitDot:#ffffffeb}*{box-sizing:border-box;margin:0;padding:0}@font-face{font-family:roboto;src:url(/battleship-TS/assets/Roboto-Regular-CN_pkOMA.ttf)}body{background:radial-gradient(circle at top, var(--bg1), var(--bg2));width:100%;min-height:100vh;color:var(--w);justify-content:space-evenly;align-items:center;gap:4em;padding:1.5rem;font-family:roboto;display:flex}.profileCon{height:40em}.profile{align-items:center;gap:10px;width:10em;display:flex}.profileIcon img,.profileText{cursor:pointer;-webkit-user-select:none;user-select:none}dialog{border:.08rem solid var(--bd);width:min(28rem,92%);color:var(--w);box-shadow:0 1.8rem 4rem var(--sh3);z-index:1000;background:#0b1b35eb;border-radius:1.25rem;margin:auto;padding:1.6rem;position:fixed;inset:0}dialog::backdrop{background:0 0}form{flex-direction:column;gap:1.2rem;height:100%;display:flex}input{border:.08rem solid var(--bd2);width:100%;height:3.2rem;color:var(--w);background:#ffffff0f;border-radius:.9rem;outline:none;padding:0 1rem;transition:all .2s}input::placeholder{color:#ffffffa6}input:focus{border:.08rem solid var(--cyanBd);box-shadow:0 0 1.2rem var(--glow2);background:#ffffff17}.modalBtns{justify-content:flex-end;gap:1rem;margin-top:auto;display:flex}.modalBtns button{border-radius:.9rem;min-width:9rem;height:3rem}.modalBtns button:first-child{background:linear-gradient(135deg, var(--cyan), var(--blue));border:none}.modalBtns button:last-child{border:.08rem solid var(--bd2);background:#ffffff14}.overlay{-webkit-backdrop-filter:blur(.8em);opacity:0;pointer-events:none;z-index:999;background:#00000080;transition:all .2s;position:fixed;inset:0}.overlay.show{opacity:1;pointer-events:auto}.playerSide,.computerSide{background:var(--panel);border:.08rem solid var(--bd);width:min(75rem,100%);box-shadow:0 1.25rem 3.4rem var(--sh3);border-radius:1.25rem;grid-template-rows:4em 25em 4em;grid-template-columns:15em 1fr;place-content:center;gap:.9rem 1.1rem;padding:1.1rem;display:grid}.playerTitle,.computerTitle{background:var(--bar);border:.08rem solid var(--bd);border-radius:1rem;grid-column:2;justify-content:flex-start;align-items:center;gap:10px;padding:2.05rem 1.55rem;display:flex}.rotateText{width:23%}.btns{grid-area:1/2;justify-content:center;align-items:center;gap:2.5rem;width:50%;display:flex}button{cursor:pointer;letter-spacing:.02em;min-width:10em;height:3.3em;color:var(--w);border:.08rem solid var(--bd2);box-shadow:0 .9rem 1.6rem var(--sh1);background:#ffffff14;border-radius:.9rem;font-weight:800;transition:all .2s}button:hover{background:#ffffff24;transform:translateY(-.12rem)}button:active{transform:translateY(0)scale(.98)}.btns button:first-child{background:linear-gradient(135deg, var(--cyan), var(--blue));border:none}.btns button:nth-child(2){background:linear-gradient(135deg,#ff4b6e,#ff8a4b);border:none}.startCon{grid-column:2;place-content:center;width:100%;padding-top:.4rem;display:grid}.startCon button{width:min(26.25rem,100%);height:3.4rem;color:var(--b);box-shadow:0 1.1rem 2.2rem var(--sh2);background:linear-gradient(135deg,#33d9c0,#285ed1);border:none;border-radius:1.1rem;font-size:1.05rem;font-weight:900}.shipsContainer{background:var(--panel2);width:100%;height:100%;box-shadow:inset 0 0 1.1rem var(--inset);border:.08rem dashed #ffffff29;border-radius:1.1rem;flex-direction:column;grid-area:2/1/4;justify-content:center;align-items:center;gap:2em;display:flex}.ship{border:.08rem solid var(--bd2);cursor:grab;background:#ffffff12;border-radius:1rem;justify-content:center;align-items:center;width:10em;max-width:11.9rem;padding:.95rem;transition:all .2s;display:flex;position:relative;overflow:hidden}.ship:hover{background:var(--bd2);transform:scale(1.03)}.ship:active{cursor:grabbing;transform:scale(.98)}.ship:before{content:"";background:linear-gradient(120deg,#0000,#46d9ff38,#0000);transition:all .45s;position:absolute;inset:0;transform:translate(-100%)}.ship:hover:before{transform:translate(100%)}.board,.computerBoard{background:var(--panel2);border:.08rem solid var(--bd);width:100%;height:100%;box-shadow:inset 0 0 1.1rem var(--inset);border-radius:1.25rem;grid-area:2/2/4;grid-template-rows:repeat(10,2.35em);grid-template-columns:repeat(10,2.35em);place-content:center;gap:.38em;padding:1.5em 0;display:grid}.board-cell{border:.08rem solid var(--bd2);background:var(--cell);cursor:crosshair;border-radius:.82rem;width:2.35em;height:2.35em;transition:all .16s;position:relative}.board-cell:hover{background:var(--cell2);box-shadow:0 0 1rem var(--glow);transform:scale(1.06)}.highlight{box-shadow:0 0 .9rem var(--glow2);background:var(--cell3)!important;border:.08rem solid var(--cyanBd)!important}.ship-placed{box-shadow:inset 0 0 .9rem #ffffff14;background:linear-gradient(135deg,#46d9ff59,#2c70ff59)!important;border:.08rem solid #46d9ffa6!important}.invalid{box-shadow:0 0 1.1rem #ff464640;background:#ff464673!important;border:.08rem solid #ff4646d9!important}.board-cell.miss{background:var(--cell2)!important;border:.08rem solid var(--cell3)!important}.board-cell.miss:after{content:"";background:var(--missDot);opacity:.65;border-radius:50%;position:absolute;inset:36%}.computer-ship.hit,.ship-placed.hit{animation:.22s pop;box-shadow:0 0 1.1rem #2eff8240;background:radial-gradient(circle,#2eff82e6,#2eff822e)!important;border:.08rem solid #2eff82bf!important}.computer-ship.hit:after,.ship-placed.hit:after{content:"";background:var(--hitDot);border-radius:50%;position:absolute;inset:24%;box-shadow:0 0 .75rem #2eff8299}@keyframes pop{0%{opacity:.7;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@media (width<=71.9rem){body{flex-direction:column;gap:1.1rem;padding:1.1rem}.playerSide{margin-right:0}.playerSide,.computerSide{grid-template-rows:auto auto auto auto;grid-template-columns:1fr}.shipsContainer{flex-flow:wrap;grid-area:auto/1;justify-content:center;min-height:13.75rem}.board,.computerBoard{grid-area:auto/1}.playerTitle{grid-column:1}.btns{grid-column:1;justify-content:center}.startCon{grid-column:1}}