@media (min-width: 1500px) {
  .return-to-game-con {
    width: 40%;
  }
  .exit-game-con {
    width: 40%;
  }
  .game-popup {
    width: 40%;
  }
  #shipRoom > .ship-room-content > .center > .content > .mid-content > .content{
    height: 50%;
  }
  #shipRoom > .ship-room-content > .center > .content > .mid-content{
    gap: 2%;
  }
}
@media (max-width: 1200px) {
  /* Styles for large screens (desktops) */
  /*  html {
    font-size: 20px;
  } */
  body {
  }
  #shipRoom > .ship-room-content {
    grid-template-columns: 25% 75%;
  }
  #shipRoom > .ship-room-content > .left.sidebar {
    display: none;
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
  }
  #shipRoom > .ship-room-content > .left.sidebar.show {
    display: flex;
    z-index: 10;
  }
  #exitRankPage {
    font-size: 1.3em;
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);

    display: flex;
  }
  #exitRankPage:active {
    transform: translateY(-40%);

    display: flex;
  }
  #shipRoom > .ship-room-content > .game-board-div {
    width: 80%;
  }
  #shipRoom
    > .ship-room-content
    > .game-board-div
    > .game-board
    > .board-container {
    width: 100%;
    height: 100%;
  }
  .lobby-button.small {
            width: 2.5rem;
        height: 2.5rem;
  }
 
  .show-ranks-btn {
    position: relative;

    background: #4f8cb3;
    display: flex;
  }
  .show-ranks-btn:hover {
    background: #4f8cb3;
    filter: brightness(1.2);
  }
  .show-ranks-btn:active {
    background: #4f8cb3;
    transform: translateY(0.2rem);
  }
  .show-ranks-btn > img {
    height: 100%;
  }
  .nav-nofs-con {
    width: 30svw;
  }
  .in-game-nav > .player-banner > .profile-picture {
  }
  .nav-menu {
    width: 35svw;
  }
  .ship-room-content > .player-profile-con {
    width: 60%;
  }
  .redeem-code-con {
    width: 60%;
  }
  .invitations-side-bar {
    width: 30%;
  }
  .return-to-game-con {
    width: 55%;
  }
  .exit-game-con {
    width: 55%;
  }
  .lobby-full-sign {
    width: 45%;
  }
  .clan-con {
    width: 65%;
  }
 .classic-game-con >.content >.players-con>.players {
     width: 50%;
 }
}
/* ////////////////////////////////s/////////////////////////////////////// */
@media (max-width: 900px) {
  body {
    overflow-y: auto;
  }
  #shipRoom
    > .ship-room-content
    > .game-board-div
    > .game-board
    > .board-container
    > .invite-friends
    > .content
    .friends {
    width: 50%;
  }
  .invitations-side-bar {
    width: 45%;
  }
  .nav-nofs-con {
    width: 40svw;
  }
  #shipRoom > .ship-room-content {
    grid-template-columns: 100%;
  }
  #shipRoom > .ship-room-content > .right.sidebar {
    display: none;
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
  }
  #shipRoom > .ship-room-content > .right.sidebar.show {
    display: flex;
    z-index: 10;
  }
  .lobby-button.show-friends-btn {
    display: flex;
  }
  .show-friends-btn {
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
    background: #eba147;
    display: flex;
  }
  .show-friends-btn:hover {
    background: #eba147;
    filter: brightness(1.2);
  }
  .show-friends-btn:active {
    background: #eba147;
    transform: translateY(-40%);
  }
  .show-friends-btn > img {
    height: 80%;
    filter: drop-shadow(0px 1px 1px #00000050);
    aspect-ratio: 1;
  }
  
  

  .in-game-nav > .player-banner > .profile-picture {
  }
  .in-game-nav > .player-banner > .profile-details {
    display: none;
  }
  #shipRoom > .ship-room-content > .left.sidebar {
    width: 65%;
  }
  .nav-menu {
    width: 50svw;
  }
  .return-to-game-con {
    width: 70%;
  }
  .exit-game-con {
    width: 70%;
  }
  .lobby-full-sign {
    width: 60%;
  }
  #shipRoom
    > .ship-room-content
    > .game-board-div
    > .game-board
    > .board-container
    > .invite-friends
    > .content
    .invited {
    width: 50%;
  }
  #shipRoom
    > .ship-room-content
    > .game-board-div
    > .game-board
    > .board-container
    > .invite-friends
    > .content
    .friends
    > .content
    > .user-field {
    width: 100%;
    min-width: 8rem;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 5px;
    margin: 1%;
  }
  #shipRoom
    > .ship-room-content
    > .game-board-div
    > .game-board
    > .board-container
    > .invite-friends
    > .content
    .friends
    > .content {
    max-height: 90%;
    gap: 0%;
    padding-right: 1%;
  }
  #shipRoom
    > .ship-room-content
    > .game-board-div
    > .game-board
    > .board-container
    > .invite-friends
    > .content
    .friend {
    width: 50%;
  }
 
  .play-now-con {
    left: 50%;
    width: 75%;
  }
.clan-con {
        width: 80%;
  }
  .no-clan-con {
        width: 50%;
  }
  .search-clan-container {
        width: 70%;
  }
 
.classic-game-con {
      width: 75%;
}



#exitFriendsPage.show {
  display: flex;
}
}
/* /////////////////////////////////////////////////////////////////////// */
@media (max-width: 768px) {
  .search-clan-container {
        width: 75%;
  }
  .lobby-helping-buttons-con {
    width: 90%;
  }
  .nav-nofs-con {
    width: 45svw;
  }
  .in-game-nav > .player-banner > .profile-picture {
  }
  #shipRoom > .ship-room-content > .right.sidebar {
    width: 70%;
  }
  #shipRoom > .ship-room-content > .left.sidebar {
    width: 80%;
  }
  .nav-menu {
    width: 50svw;
  }
  .lobby-helping-button.lock:nth-last-child(-n + 2) {
    display: none;
  }
  .lobby-helping-buttons-con > .lobby-helping-button {
    width: calc(100% / 6 - 2%);
  }
  .ship-room-content > .player-profile-con {
    width: 80%;
  }
  .redeem-code-con {
    width: 80%;
  }
  #shipRoom > .ship-room-content > .game-board-div {
    width: 100%;
  }

  .lobby-full-sign {
    height: 12%;
  }
  
.clan-con {
            width: 100%;
  }
.no-clan-con {
        width: 70%;
  }
 
.classic-game-con {
      width: 65%;
}
}
@media (max-width: 576px) {
  .classic-game-con > .content > .nav > .nav-item >.description-note{
    left: -18%;
  }.classic-game-con > .content > .nav > .nav-item >.description-note:after{
   left: 76%;
  }
  .search-clan-container {
        width: 99%;
  }
  .no-clan-con {
        width: 99%;
  }
  #shipRoom > .ship-room-content > .center > .content > .mid-content > .content > .mid-content-button{
           width: 90% !important;
        height: 21%;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 1rem;
  }
  .mid-content-button >.con-details {
        width: 50%;
    height: 100%;
    display: flex
;
    align-items: center;
    justify-content: right;
    flex-direction: row-reverse;
    gap: 1rem;
  }
  #shipRoom > .ship-room-content > .game-board-div > .game-board > .board-container > .choose-type-group > .game-type >.con-details{
            width: 50%;
        height: 100%;
        display: flex
;
        align-items: center;
        justify-content: right;
        flex-direction: row-reverse;
        gap: 1rem;
  }
  #shipRoom > .ship-room-content > .center > .content > .mid-content > .content > .mid-content-button > .con-details > .icon{
    height: 90%;
    width: auto;
    aspect-ratio: 1;
  }
  #shipRoom > .ship-room-content > .center > .content > .mid-content > .content > .mid-content-button > .con-details > .icon >img{
    height: 100%;
    width: auto;
  }
  #shipRoom > .ship-room-content > .center > .content > .mid-content > .content{
    flex-direction: column;
 
  }
  #playRandomGameBtn > .wheel-spinner-1{
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    transform: translate(0%, -50%);
    position: absolute;
    right: 0;
    bottom: 0;
  }
  #playRandomGameBtn > .cancel-searching{
    height: 90%;
    width: 6rem;
  }
 #searchUserBtn>.title, #showFriendAddCon>.title {
display: none;
 }

  .invitations-side-bar {
    width: 60%;
  }
  .nav-nofs-con {
    width: 60svw;
    right: -156%;
  }
  .in-game-nav > .title > h1 {
    font-size: 0.8em;
    white-space: nowrap;
  }
  .in-game-nav > .player-banner > .profile-picture {
  }
  #shipRoom > .ship-room-content > .left.sidebar {
    width: 95%;
  }
  .nav-menu {
    width: 44svw;
  }
  .mid-content-button > .button-name {
    font-size:1.5rem;
  }
  .lobby-helping-button.lock:nth-last-child(-n + 4) {
    display: none;
  }
  .lobby-helping-buttons-con > .lobby-helping-button {
    width: calc(100% / 5 - 2%);
  }
  #shipRoom > .ship-room-content > .right.sidebar {
    width: 95%;
  }
  .lobby-helping-buttons-con > .lobby-helping-button > .count {
    width: 80%;
  }
  .ship-room-content > .player-profile-con {
    width: 95%;
  }
  #shipRoom > .ship-room-content > .game-board-div {
    height: 71%;
  }
  #shipRoom
    > .ship-room-content
    > .game-board-div
    > .game-board
    > .board-container
    > .choose-type-group
    > .game-type {
              width: 90% !important;
        height: 21%;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 1rem;
  }
  #shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .choose-type-group
  > .game-type>img {
    height: 90%;
    width: auto;
}
#shipRoom > .ship-room-content > .game-board-div > .game-board > .board-container > .choose-type-group{
  flex-direction: column;
  gap: 1rem;
}
  .players-online-now {
    width: 12%;
  }
  .players-online-now > .text {
    display: none;
  }
  .players-online-now > .content {
    width: 100%;
  }
  #shipRoom
    > .ship-room-content
    > .center
    > .content
    > .mid-content
    > .header
    > .player-level {
    width: 46%;
  }
  #shipRoom > .ship-room-content > .center > .content > .mid-content{
    gap: 2%;
  }
  #shipRoom > .ship-room-content > .center > .content > .mid-content > .footer{
    height: 43%;
  }
  #shipRoom > .ship-room-content > .center > .content{
    height: 80%;
  }
  .clan-con > .content{
    gap:1rem;
  }.clan-nav{
    gap: 0.5rem;
  }
  .clan-nav > .nav-btn{
        flex: 1 1 71px;
    min-width: 99px;
        font-size: clamp(1rem, 2vmin, 2vmin);
  }
.clan-con > .content > .clan-profile > .bottom > .buttons > .btn{
  flex: 1 1 140px;
    min-width: 42px;
        font-size: clamp(1rem, 2vmin, 2vmin);
}
.clan-con > .content > .clan-profile > .top{
  height: 60%;
}.clan-con > .content > .clan-profile > .bottom{
  height: 40%;

}
.clan-con > .content > .clan-profile > .bottom > .buttons > .btn{
  flex: 1 1 115px;
    min-width: 42px;
}
.clan-con .popup {
  width: 98%;
}
#shipRoom > .ship-room-content > .center > .content > .mid-content > .content > .mid-content-button>.notf-dot{
       left: 100%;
    transform: translate(-50%, -38%);
}
.classic-game-con >.content >.players-con>.players {
      width: 55%;
}
.classic-game-con {
      width: 95%;
}
.player-inventory>.right{
  position: absolute;
  visibility: hidden;
   right: -100%;
   transition: 0.3s;
   width: 60%;
}.player-inventory>.middle{
  width: 85%;
}.player-inventory>.left{
  width: 15%;
}.player-inventory>.middle>.header{
  padding: 0 3rem;
}
.player-inventory>.right.show {
      visibility: visible;
    
    z-index: 100;
    box-shadow: inset 0 0 0vmin 0.2vmin #d09a44, inset 0 0 0vmin 0.8vmin #4c3111, inset 0 0 0vmin 1vmin #d09a44;
    backdrop-filter: blur(2px);
    background: #33291fcf;
    top: 0;
    right: 0%;
    
}
}
@media (max-width: 400px) {
  .clan-con > .content > .clan-profile > .top > .badge-details > .clan-details{
        font-size: clamp(0.8rem, 1.5vmin, 2vmin);
  }
  .clan-con > .content > .clan-profile > .top{
    flex-direction: column;
  }
  .clan-con > .content > .clan-profile > .top > .badge-details{
    width: 100%;
  }
  .clan-con > .content > .clan-profile > .top > .clan-description{
    width: 100%;
  }
  .clan-nav > .nav-btn{
        flex: 1 1 71px;
    min-width: 99px;
        font-size: clamp(0.8rem, 2vmin, 2vmin);
  }
  .lobby-helping-button.lock:nth-last-child(-n + 5) {
    display: none;
  }
  .lobby-helping-buttons-con > .lobby-helping-button {
    width: calc(100% / 3 - 2%);
    margin-top: -18%;
  }
 
.classic-game-con >.content >.players-con>.players {
      width: 70%;
}
.classic-game-con {
      width: 99%;
}
}
@media (max-height: 1200px) {
  #shipRoom
    > .ship-room-content
    > .center
    > .content
    > .mid-content
    > .content
    > .mid-content-button {
    width: 22%;
  }
}
@media (max-height: 900px) {
  #shipRoom > .ship-room-content > .center > .content {
    height: 95%;
  }
  #shipRoom > .ship-room-content > .sidebar > .content {
    height: 95%;
  }
  #shipRoom
    > .ship-room-content
    > .center
    > .content
    > .mid-content
    > .content
    > .mid-content-button {
    width: 22%;
  }
}
@media (max-height: 768px) {

  #shipRoom > .ship-room-content > .center > .content {
    height: 90%;
  }
  #shipRoom > .ship-room-content > .sidebar > .content {
    height: 90%;
  }
  .in-game-nav > .title > h1 {
    font-size: 1em;
  }
  #shipRoom
    > .ship-room-content
    > .center
    > .content
    > .mid-content
    > .content
    > .mid-content-button {
    width: 22%;
  }
  .ship-room-content > .player-profile-con {
    height: 75%;
    top: 56%;
  }
  .return-to-game-con {
    height: 50%;
  }
  .exit-game-con {
    height: 50%;
  }
}
@media (max-height: 576px) {
  #windowLoadingOverlay > .game-logo{
    width: 23%;
    min-width: 15rem;
    top: 0%;
  }
  .shop-con{
    height: 100%;
    top: 50%;
  }

  #shipRoom > .ship-room-content > .sidebar > .content{
    height: 100%;
  }
  #shipRoom > .ship-room-content > .right.sidebar > .content > .mid-content{
    height: 75%;
  }
  .treasure-packs-button{
    display: none;
  }
  .game-board-div > .header {
    height: 16%;
  }
  .game-board-div > .footer {
    height: 7%;
  }
  #shipRoom
    > .ship-room-content
    > .center
    > .content
    > .mid-content
    > .content
    > .mid-content-button {
    width: 22%;
  }
  /* .mid-content-button > .icon > img {
    width: 60%;
  } */
  .lobby-helping-buttons-con > .lobby-helping-button {
    width: calc(80% / 8 - 2%);
  }

  .redeem-code-con {
    height: 75%;
    top: 60%;
  }
  #shipRoom > .ship-room-content > .game-board-div {
    height: 92%;
    top: 45%;
    max-height: 90svh;
  }
  .invited-lobby-container {
    height: 90%;
  }
  .return-to-game-con {
    height: 60%;
  }
  .exit-game-con {
    height: 60%;
  }
  #shipRoom > .ship-room-content > .center > .content > .mid-content > .footer{
    height: 30%;
  }
  #shipRoom > .ship-room-content > .center > .content > .mid-content > .content{
    height: 45%;
  }
  .ad-popup {
    width: 24rem;
  }
}
@media (max-height: 400px) {
  .lobby-helping-buttons-con > .lobby-helping-button {
    width: 6%;
    margin-top: -2%;
  }
  .return-to-game-con {
    height: 70%;
  }
  .exit-game-con {
    height: 70%;
  }
}