@import url("https://fonts.googleapis.com/css2?family=Lalezar&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-user-select: none; /* Safari/Chrome */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}
html,
body {
  margin: 0;
  padding: 0;
  touch-action: manipulation;
    line-height: 1.5;
}
img {
  pointer-events: none;
}
button,
input {
  cursor: url(../images/cursor.png) 14 0, auto;
}
:root {
  --body-color: #f7f8f9;
  --orange-color: #ffab0f;
  --orange-color-hover: #ffbf47;
  --milk-color: #ebe6c1;
  --dark-brown: #221201;
  /* fonts */
  --Bricolage-Grotesque: "Bricolage Grotesque", sans-serif;
  --Rubik: "El Messiri", sans-serif;
  --Roboto-Mono: "Roboto Mono", monospace;
  --Rubik: "Rubik", sans-serif;
  --Tajawal: "Tajawal Grotesque", sans-serif;
  --Vazirmatn: "Vazirmatn", sans-serif;
  --fontSize: clamp(0.5rem, 1.3vmin, 2rem);;
  --fontFamily: var(--Rubik)
  /* border size */
  --onePx: 1px;
  --twoPx: 2px;
  --threePx: 3px;
  --fourPx: 4px;
  --fivePx: 5px;
  --sixPx: 6px;
  --sevenPx: 7px;
  --eightPx: 8px;
  --ninePx: 9px;
  --tenPx: 10px;
  --elevenPx: 11px;
  --twelvePx: 12px;
  --thirteenPx: 13px;
  --fourteenPx: 14px;
  --fifteenPx: 15px;
  --sixteenPx: 16px;
  --seventeenPx: 17px;
  --eighteenPx: 18px;
  --nineteenPx: 19px;
  --twentyPx: 20px;
  
}
body {
  font-family: var(--Rubik);
  font-size: 25px;
  cursor: url(../images/cursor.png) 14 0, auto;
  overflow: hidden;
  background-color: var(--dark-brown);
  background-position: center;
}
body.goldenCursor {
  cursor: url(../images/golden-cursor.png) 14 0, auto !important;
}
body.attackCursor {
  cursor: url(../images/attack-cursor.png) 14 0, auto !important;
}
a {
  text-decoration: none;
  color: var(--orange-color);
}
a:hover {
  color: var(--orange-color-hover);
}
ul,
li {
  list-style: none;
}
.active-flex {
  display: flex !important;
}
.active-block {
  display: block !important;
}
.hidden {
  display: none !important;
}
.header.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 20px;
  z-index: 4;
}

.small-game-title {
  font-size: 30px;
  color: wheat;
  text-shadow: 0 0 46px #000, 0 0 12px #0000007d;
}

.game-title {
  font-size: 90px;
  color: wheat;
  text-shadow: 0 0 70px #000, 0 0 5px #000;
}

.content-without-ts {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.content-without-ts.game {
  background-image: url(../images/world-map.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.content-without-ts.game.ramadan {
  background-image: url(../images/world-map-ramadan.png);
}
.content-without-ts.game.eid-ad7a{
  background-image: url(../images/world-map-eid-ad7a.png);
}
.game-frame > .rt-palm {
  width: fit-content;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
}
.game-frame > .lt-palm {
  width: fit-content;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}
.game-frame > .lt-palm > img {
  transform: scaleX(-1);
}
.game-frame > .bot-lt-leaves {
  width: fit-content;
  height: 30%;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5;
}
.game-frame > .bot-rt-leaves {
  width: fit-content;
  height: 30%;
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 5;
}
.game-frame > .bot-rt-leaves > img {
  transform: scaleX(-1);
}
/* =====================================================================
===========================   LOGIN PAGE   =============================
======================================================================== */
#loginPage {
  width: 100%;
  height: 100svh;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#loginPage > .login-page-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 88svh;
  background-image: url(../images/world-map.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  font-family: var(--Rubik);
  overflow: hidden;
}
#loginPage > .login-page-content > .login-form {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80%;
  z-index: 1;
}

#loginPage > .login-page-content > .login-form > .content {
  height: auto;
}
#loginPage > .login-page-content > .login-form > .content label {
  color: #00000080;
}
#loginPage > .login-page-content > .login-form > .content > .login-fields {
  background-color: #00000059;
  width: 100%;
  border-radius: 7px;
  padding: 5%;
  gap: 0.7rem;
  height: auto;
}
#loginPage
  > .login-page-content
  > .login-form
  > .content
  > .login-fields
  > .login-reg-span {
  font-size: clamp(1rem, 2vmin, 3rem);
  color: var(--milk-color);
  font-family: var(--Rubik);
}
#loginPage
  > .login-page-content
  > .login-form
  > .content
  > .login-fields
  > .title {
  font-family: var(--Rubik);
  color: var(--milk-color);
}
#loginPage
  > .login-page-content
  > .login-form
  > .content
  > .login-fields
  > div
  > .field {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  background: white;
  width: 24rem;
  max-width: 100%;
  border-radius: 5px;
  overflow: hidden;
  padding: 0 1%;
}
#loginPage
  > .login-page-content
  > .login-form
  > .content
  > .login-fields
  > div
  > .field.error {
  outline: 1px solid red;
}
#loginPage
  > .login-page-content
  > .login-form
  > .content
  > .login-fields
  > div {
  gap: 3px;
}
#loginPage
  > .login-page-content
  > .login-form
  > .content
  > .login-fields
  > div
  > .field
  > .icon {
  width: 10%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #00000080;
}
#loginPage
  > .login-page-content
  > .login-form
  > .content
  > .login-fields
  > div
  > .field
  > .form-input {
  border-radius: 0;
  width: 90%;
  border: none;
}
#loginPage > .footer {
  grid-column: 1 / 4;
  height: 6svh;
  text-align: center;
  gap: 5px;
  background-color: #3a2b1f;
  z-index: 1;
  color: #bc9a7e;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#loginPage > .footer > span {
  font-size: 15px;
}
.play-buttons {
  position: absolute;
  top: 10px;
  right: 40px;
  z-index: 20;
}
.play-buttons > img {
  width: 25px;
  height: 25px;
}
.play-buttons > img:hover {
  filter: drop-shadow(0 0 1px #ffffff);
}
.play-buttons > img:active {
  filter: drop-shadow(0 0 1px #ffffff);
  width: 24px;
  height: 24px;
}
.loginErrorSpan {
  color: rgb(254 104 104);
  font-size: clamp(0.5rem, 1.3vmin, 2rem);
}
.success-span {
  color: #9eff9e;
  font-size: clamp(0.5rem, 1.3vmin, 2rem);
}

.forgot-pass {
  display: block;
}
.aw-btn {
  cursor: url(../images/cursor.png) 14 0, auto;
}
/* =====================================================================
===========================   INDEX PAGE   =============================
======================================================================== */




.transition-overlay-container {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  z-index: 200;
  display: none;
  position: absolute;
}
.transition-overlay {
  width: 100%;
  height: 100svh;
  transition: 1s;
  opacity: 0;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: wheat;

}
.transition-overlay.show {
  opacity: 1;
}
#gameIndex {
  background-image: url("../images/game-index-bg-no-ship.png");
  width: 1920px;
  height: 941px;
  background-size: cover;
  display: none;
}
#gameIndex > .locations {
  height: 100svh;
  width: 100%;
  right: 0;
  margin: 0;
  position: absolute;
  top: 0;
}
#gameIndex > .locations > .shipwreck > svg {
  right: 269px;
  top: 56px;
  position: absolute;
  z-index: 2;
}
.hover-titles {
  font-size: 27px;
  color: wheat;
  width: 220px;
  filter: drop-shadow(0 0 88px wheat);
  text-align: center;
  height: 46px;
  background-size: 220px 46px;
  background-repeat: no-repeat;
  position: absolute;
  background-image: url(../images/plank.png);
  animation: upDownMove 2s ease-in-out infinite;
  display: none;
}
@keyframes upDownMove {
  0% {
    transform: translateY(-4px);
  }
  25% {
    transform: translateY(4px);
  }
  50% {
    transform: translateY(-4px);
  }
  75% {
    transform: translateY(4px);
  }
  100% {
    transform: translateY(-4px);
  }
}
#gameIndex > .locations > .shipwreck {
  position: relative;
}
#gameIndex > .locations > .shipwreck > .enter-ship {
  top: 650px;
  right: 550px;
  display: none;
}
#gameIndex > .locations > .shipwreck > svg path {
  fill: #ccc0;
}
#gameIndex > .locations > .shipwreck > svg path:hover {
  stroke: var(--orange-color);
  stroke-width: 50;
}

#gameIndex > .locations > .shipwreck > svg path.hovered {
  stroke: var(--orange-color);
  stroke-width: 50;
}
#gameIndex > .locations > .shipwreck > .shipwreck-div {
  right: 269px;
  top: 56px;
  position: absolute;
  width: 907px;
  height: 799px;
  background-image: url("../images/shepwrick.png");
  background-size: cover;
}

#gameIndex > .locations > .tent {
  position: relative;
}
#gameIndex > .locations > .tent > svg {
  right: 1056px;
  top: 10px;
  position: absolute;
  z-index: 2;
}
#gameIndex > .locations > .tent > svg path:hover {
  stroke: var(--orange-color);
  stroke-width: 50;
  fill: transparent;
}
#gameIndex > .locations > .tent .enter-tent {
  right: 1113px;
  top: 74px;
}
/* =====================================================================
============================   Ship Room   =============================
======================================================================== */

#shipRoom {
  width: 100svw;
  height: 100svh;

  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
#shipRoom > .locations {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#shipRoom > .locations > .wheel > svg path {
  z-index: 2;
}
#shipRoom > .locations > .wheel > svg path:hover {
  stroke: var(--orange-color);
  stroke-width: 50;
}
#shipRoom > .locations > .wheel > svg path.hovered {
  stroke: var(--orange-color);
  stroke-width: 50;
}
#shipRoom > .locations > .wheel {
  right: 728px;
  top: 289px;
  position: absolute;
  width: 556px;
  height: 513px;
}
#shipRoom > .locations > .wheel > .start-playing {
  bottom: 230px;

  left: 200px;
  display: none;
}
#shipRoom > .ship-room-content {
  display: grid;
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: auto 50px;
  width: 100%;
  height: 88svh;
  background-image: url(../images/world-map.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  font-family: var(--Rubik);
  overflow: hidden;
}
#shipRoom > .ship-room-content > .left,
.center,
.sidebar {
  height: 82svh;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#shipRoom > .ship-room-content > .sidebar > .content {
  height: 70%;
  width: 95%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  position: relative;
}
#shipRoom > .ship-room-content > .sidebar > .content > .header {
  height: 15%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  gap: 0.5rem;
}
#shipRoom > .ship-room-content > .sidebar > .content > .header > span {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  position: relative;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}

#shipRoom > .ship-room-content > .sidebar > .content > .mid-content {
  height: 70%;
  width: 95%;
  background: #ebe6c1;
  border-right: solid 4px #3a2b1f;
  overflow-y: auto;
  border-left: solid 4px #3a2b1f;
  box-shadow: inset -7px 0 #c0a185, inset -9px 0 #000;
  padding: 0 0.36em 0 0;
  white-space: nowrap;
}
#shipRoom > .ship-room-content > .sidebar > .content > .mid-content > .header {
  box-shadow: inset 0 5px #00000029;
  height: 30%;
  width: 100%;
  padding-top: 5px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-content: center;
}
#shipRoom > .ship-room-content > .sidebar > .content > .mid-content > .content {
  height: auto;

  width: 100%;
}
#shipRoom
  > .ship-room-content
  > .right.sidebar
  > .content
  > .mid-content
  > .content {
  height: 100%;

  width: 100%;
}
#shipRoom > .ship-room-content > .sidebar > .content > .mid-content > .footer {
  width: 100%;
  padding: 5px;
  height: auto;
}
#shipRoom > .ship-room-content > .right.sidebar > .content > .mid-content {
  height: 46%;
  position: relative;
}
#shipRoom > .ship-room-content > .sidebar > .content > .footer {
    height: 15%;
    width: 100%;
    border: solid 4px #271705;
    background-color: #87664c;
    display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
#shipRoom > .ship-room-content > .sidebar > .content > .footer >.search-con {
      width: 95%;
    height: 3rem;
    display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3%;
}#shipRoom > .ship-room-content > .sidebar > .content > .footer >.search-con>input {
       width: 77%;
    height: 75%;
    border-radius: 0;
    background: #fff5e4;
    
}#shipRoom > .ship-room-content > .sidebar > .content > .footer >.search-con>.search-chat-btn {
        color: #ffffff;
    height: 75%;
    display: flex
;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
    padding: 0.3rem;
    aspect-ratio: 1;
    background: linear-gradient(to bottom, #3794a9 43%, #1a768b 0);
    box-shadow: inset 0 0 0 0.1vmin #0088b1, inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
    border: solid #005086 0.1vmin;
}
  .hasHover:hover {
    filter: brightness(1.1);
  }.hasHover:active {
transform: translateY(0.1vmin);  }
#shipRoom > .ship-room-content > .center > .content {
  height: 70%;
  width: 95%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#shipRoom > .ship-room-content > .center > .content > .header {
  height: 15%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  gap: 1%;
}
#shipRoom > .ship-room-content > .center > .content > .header > span {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}

#shipRoom > .ship-room-content > .center > .content > .mid-content {
  height: 70%;
  width: 95%;
  background: #ebe6c1;
  border-right: solid 4px #3a2b1f;
  box-shadow: inset 7px 0px #bb9e83, inset -7px 0 #c0a185, inset 9px 0 #3a2b1f,
    inset -9px 0 #3a2b1f;
  border-left: solid 4px #3a2b1f;
  position: relative;
  overflow: hidden;
}

#shipRoom > .ship-room-content > .center > .content > .mid-content > .header {
  height: 20%;
  font-size: clamp(0.8rem, 2.5vmin, 1.1rem);
  box-shadow: inset 0 5px #00000029;
}
#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .header
  > .server-time
  > .server-timer-content {
  gap: 5px;
}
#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .header
  > .player-level {
  width: 37%;
}
#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .header
  > .player-level
  > .from,
.to {
  background: #87664c;
  border-radius: 5px;
  border: solid 2px #3a2b1f;
  padding: 0 1rem;
  color: #ebe6c1;
  font-weight: 500;
  height: 100%;
  width: 15%;
  aspect-ratio: 1;
}
#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .header
  > .player-level
  > .bar {
  width: 100px;
  background: #dbd6b3;
  height: 25px;
  position: relative;
}
#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .header
  > .player-level
  > .bar
  > .bar-progress {
  width: 50%;
  background: #af9a6d;
  height: 100%;
}
#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .header
  > .player-level
  > .bar
  > .progress-level {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
  color: #221201;
  font-weight: 400;
}
#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .header
  > .player-money {
  gap: 10px;
  z-index: 1;
}
#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .header
  > .player-money
  > .player-coins {
  background: #e1d0a2cf;
  border-radius: 5px;
  padding: 0 5px;
  gap: 5px;
  color: #3a2b1f;
  font-weight: 400;
}
#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .header
  > .player-money
  > .player-coins.jewels:hover {
  background: #87664c;

  color: #ffd600;
}
#shipRoom > .ship-room-content > .center > .content > .mid-content > .content {
  width: 100%;
  height: 60%;
}
#shipRoom > .ship-room-content > .center > .content > .mid-content > .footer {
  height: 20%;
  width: calc(100% - 18px);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .footer
  > .game-placement {
  width: calc(100% / 11);
  height: 100%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}
#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .footer
  > .game-placement
  > img {
  height: 100%;
}
#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .footer
  > .game-placement:hover {
  transform: translateY(-0.5rem);
}

#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .footer
  > .game-placement:hover
  > .title {
  display: flex;
}
#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .footer
  > .game-placement
  > .title {
  background: #ddd8b6;
  font-size: clamp(0.7rem, 1.5vmin, 1.5vmin);
  width: 100%;
  min-width: fit-content;
  white-space: nowrap;
  padding: 0 0.1rem;
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 50%;
  font-family: "El Messiri";
  transform: translateX(-50%);
  box-shadow: 0px 2px 0 #00000054;
  display: none;
  justify-content: center;
  align-items: center;
}
#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .content
  > .mid-content-button {
      gap: 1%;
    width: 21%;
    background: #e1d0a2cf;
    padding: 0.5rem;

    font-family: var(--Rubik);

    display: flex
;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    max-height: 100%;
    white-space: nowrap;
    font-size: clamp(1rem, 2.5vmin, 3rem);
    aspect-ratio: 1;
    position: relative;
    height: 100%;
}

#shipRoom
  > .ship-room-content
  > .center
  > .content
  > .mid-content
  > .content
  > .mid-content-button.soon:hover {
  background: #555555;
}

#shipRoom > .ship-room-content > .center > .content > .footer {
  height: 15%;
  display: flex;
  justify-content: center;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
}
#shipRoom > .ship-room-content > .footer {
  grid-column: 1 / 4;
  height: 6svh;
  text-align: center;
  gap: 5px;
  background-color: #3a2b1f;
  z-index: 80;
  color: #bc9a7e;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#shipRoom > .ship-room-content > .footer > span {
  font-size: clamp(0.7rem, 1.5vmin, 2vmin);
}
.go-back {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 200px;
  width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 11;
}
.go-back > .back-arrow {
  background-image: url(../images/back-arrow.png);
  transform: rotate(30deg);
  width: 105px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  display: none;
  animation: goBackMove 2s ease-in-out infinite;
}
.go-back > span {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 24px;
  color: wheat;
  display: none;
  text-shadow: 0 0 20px rgb(0, 0, 0);
}

@keyframes goBackMove {
  0% {
    transform: translate(0, 0) rotate(30deg); /* Start at the top left */
  }
  25% {
    transform: translate(10px, 10px) rotate(30deg); /* Move to the bottom right */
  }
  50% {
    transform: translate(0, 0) rotate(30deg); /* Return to the top left */
  }
  75% {
    transform: translate(10px, 10px) rotate(30deg); /* Move to the bottom right again */
  }
  100% {
    transform: translate(0, 0) rotate(30deg); /* Repeat at the top left */
  }
}
.shipRoom-overlay {
  position: absolute;
  left: 0;
  right: 0;
  backdrop-filter: blur(7px);
  bottom: 0;
  top: 0;
  background-color: #00000075;
  opacity: 1;
  z-index: 0;
  width: 100%;
  height: 100svh;
  display: flex;
}
.game-board-overlay {
  position: absolute;
  left: 0;
  right: 0;
  backdrop-filter: blur(7px);
  bottom: 0;
  top: 0;
  background-color: #00000075;
  opacity: 1;
  z-index: 9;
  width: 100%;
  height: 100svh;
}
#shipRoom > .ship-room-content > .game-board-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  width: 60%;
  position: absolute;
  transition: 1s;

  z-index: 50;
  opacity: 0;
  height: 75%;
  display: none;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  max-width: 50rem;
}

.game-board-div > .header {
  background-color: #87664c;
  width: 100%;
  height: 25%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: solid 4px #271705;
}
.game-board-div > .footer {
  background-color: #87664c;
  width: 100%;
  height: 25%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: solid 4px #271705;
}
.game-board-div > .header > span {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
#shipRoom > .ship-room-content > .game-board-div.show {
  opacity: 1;
  display: flex;
}

#shipRoom > .ship-room-content > .game-board-div > .game-board {
  width: 97%;
  height: 77%;
  position: relative;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  border-bottom: none;
  box-shadow: inset 0 5px #00000029, inset 7px 0px #bb9e83, inset -7px 0 #c0a185,
    inset 9px 0 #000, inset -9px 0 #000;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container {
  position: relative;
  width: 90%;
  height: 100%;
}
.go-back-x {
  position: absolute;
  top: 2%;
  right: 2%;
}

#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .choose-type-group {
  display: flex;
  gap: 1%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 80%;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .choose-type-group
  > .game-type {
     gap: 1%;
    min-width: 30%;
    width: 30%;
    background: #e1d0a2cf;
    padding: 1%;
    font-family: var(--Rubik);
    display: flex
;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    max-height: 100%;
    white-space: nowrap;
    font-size: clamp(1rem, 2.3vmin, 3rem);
    aspect-ratio: 1;
    position: relative;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .choose-type-group
  > .game-type >.inactive {
    width: 100%;
    height: 100%;
    display: flex
;
    gap: 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 2vmin, 1.5rem);
    position: absolute;
    background: #0000008a;
    color: #ffa8a8;
    z-index: 1;
  }

#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .choose-type-group
  > .game-type >.con-details{
    width: 100%;
    height: 50%;
    display: flex
;    gap: 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: start;
  }#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .choose-type-group
  > .game-type >.con-details>img{
   
    height: 70%;
    
  }#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .choose-type-group
  > .game-type >.button {
    width: 90%;
    height: 3rem;
    background: linear-gradient(to bottom, #07a211 43%, #008100 0);
    box-shadow: inset 0 0 0 3px #008100, inset 0px 2px 0 3px #ffffff8a;
    border: solid #005200 3px;
    display: flex
;
    justify-content: center;
    align-items: center;
    font: 1rem var(--Rubik);
    position: relative;
    color: wheat;
    max-width: 8rem;
  }
  #shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .choose-type-group
  > .game-type >.button.soon-button {
    background: linear-gradient(to bottom, #a7a7a7 43%, #7f7f7f 0);
  box-shadow: inset 0 0 0 0.1vmin #a2a2a2,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #3b3b3b 0.1vmin;
  color: #ffffff;
  }
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .choose-type-group
  > .game-type
  > img {
  width: 43%;
  aspect-ratio: 1 / 1;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .choose-type-group
  > .game-type
  > span:first-child {
  font-size: 40px;
}





#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content {
  overflow: hidden;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .invited {
  border-left: 4px solid #dbd6b3;
  height: 100%;
  overflow: auto;
  width: 30%;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .friends {
  width: 70%;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .invited
  > .header {
  height: 50px;
  gap: 1rem;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .invited
  > .header
  > span {
  font-size: 1em;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .friends
  > .header {
  height: 50px;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .friends
  > .header
  > span {
  font-size: 1em;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .friends
  > .content
  > .user-field {
  width: 45%;
  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 {
  overflow: auto;
  flex-wrap: wrap;
  box-sizing: border-box;
  max-height: 90%;
  gap: 0%;
  padding-right: 15px;
  font-size: clamp(1rem, 2vmin, 2rem);
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .friends
  > .content
  > .user-field
  > .username {
  width: 50%;

  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  text-align: start;
}
.board-section {
  display: none;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .invited
  > .footer {
  height: 20%;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .invited
  > .content {
  height: 150px;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .invited
  > .content
  > ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 5px;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .invited
  > .content
  > ul
  > li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .invited
  > .content
  > ul
  > li
  > div {
  width: 62%;
  display: flex;
  gap: 3px;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .invited
  > .content
  > ul
  > li
  > div
  > .user-ready-status {
  width: 16px;
  height: 21px;
  font-size: 20px;
  color: #a96a00;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .invited
  > .content
  > ul
  > li
  > div
  > span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}
#shipRoom
  > .ship-room-content
  > .game-board-div
  > .game-board
  > .board-container
  > .invite-friends
  > .content
  .invited
  > .content
  > ul
  > li
  > button {
  width: 15%;
}

/* loading css loader */
.lds-ring {
  display: none;
  position: absolute;
  width: fit-content;
  left: 50%;
  height: 100%;
  aspect-ratio: 1;
  top: 50%;
  transform: translate(-50%, -50%);
}
#signInBtn {
  position: relative;
  width: 14rem !important;
  max-width: 100%;
  height: 3rem;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  margin: 8px;
  border: 4px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* game page */
#gameMain {
  width: 80svw;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  overflow: hidden;
  scrollbar-width: none;
  box-sizing: border-box;
  height: 99svh;
  aspect-ratio: 1122 / 913;
  z-index: 1;
}
#gameMain > .locations {
  height: 95svh;
  width: auto;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  margin: 0;
  gap: 0px;
  margin: 0px;
  max-height: min-content;
  aspect-ratio: 1122 / 913;
}
#gameMain > .locations > .game-world-map {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: min-content;
  width: auto;
  max-width: 100%;
  max-height: 80svh;
  align-items: center;
}
.world-map-img {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  flex: 1;
}
#gameMain > .locations > .game-world-map > .world-map {
  position: absolute;
  top: 0;
  left: 0;
  fill: transparent;
  width: 100%;
  overflow: hidden;
  height: 100%;
  display: flex;
}
#gameMain > .locations > .game-world-map > .world-map > svg {
  z-index: 6;
  height: 100%;
}

#gameMain > .locations > .game-world-map > .world-map.allow-overflow {
  overflow: visible !important;
}
.game-sign {
  z-index: 11;
  position: absolute;
  transition: 0.5s;
}
.game-sign.active {
  opacity: 1;
}

#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .game-signs
  > .falling-sign {
  top: -45%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .game-signs
  > .falling-sign
  img {
  width: 100%;
}
#gameMain > .locations > .game-world-map > .world-map > .all-map-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  flex-direction: column;
  z-index: 10;
  display: none;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .all-map-overlay
  > .allMapOverlayFText {
  color: white;
  text-shadow: 0 0 32px #000;
  font-size: clamp(1.5rem, 5vmin, 5rem);
  font-weight: bold;
}
#gameMain > .locations > .game-world-map > .world-map > svg path {
  z-index: 6;
  transition: 0.4s;
}

#gameMain > .locations > .game-world-map > .world-map > svg .na-1 {
  position: absolute;
  fill: transparent;
}
#gameMain > .locations > .game-world-map > .world-map > svg path.hover {
  fill: #0000002f;
  stroke: var(--orange-color);
  stroke-width: 0.3rem;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > svg
  path.attacked-map-hover {
  stroke: var(--orange-color) !important;
  stroke-width: 0.3rem !important;
  transition: 0s !important;
  filter: brightness(1.4);
}
.lobby-header-title {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: clamp(1em, 2.7vmin, 3rem);
}
.map-clicked {
  stroke-width: 0.3rem !important;
}
#gameMain > .locations > .game-world-map > .world-map > svg .na-2 {
  position: absolute;
  fill: transparent;
}

#gameMain > .locations > .game-world-map > .world-map > svg .na-3 {
  position: absolute;
  fill: transparent;
}

#gameMain > .locations > .game-world-map > .world-map > svg .na-4 {
  position: absolute;
  fill: transparent;
}

#gameMain > .locations > .game-world-map > .world-map > svg .greenland {
  position: absolute;
  fill: transparent;
}
#gameMain > .locations > .game-world-map > .world-map > svg .africa-1 {
  fill: transparent;
  position: absolute;
}
#gameMain > .locations > .game-world-map > .world-map > svg .africa-2 {
  fill: transparent;
  position: absolute;
}
#gameMain > .locations > .game-world-map > .world-map > svg .europe {
  fill: transparent;
  position: absolute;
}
#gameMain > .locations > .game-world-map > .world-map > svg .asia-1 {
  fill: transparent;
  position: absolute;
}
#gameMain > .locations > .game-world-map > .world-map > svg .asia-2 {
  fill: transparent;
  position: absolute;
}
#gameMain > .locations > .game-world-map > .world-map > svg .asia-3 {
  fill: transparent;
  position: absolute;
}
#gameMain > .locations > .game-world-map > .world-map > svg .asia-4 {
  fill: transparent;
  position: absolute;
}
#gameMain > .locations > .game-world-map > .world-map > svg .asia-5 {
  fill: transparent;
  position: absolute;
}
#gameMain > .locations > .game-world-map > .world-map > svg .asia-6 {
  fill: transparent;
  position: absolute;
}
#gameMain > .locations > .game-world-map > .world-map > svg .australia {
  fill: transparent;
  position: absolute;
}
#gameMain > .locations > .game-world-map > .world-map > svg .world-map-overlay {
  fill: transparent;
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board.low-brightness {
  filter: brightness(0.7);
}
#gameMain > .locations > .game-world-map > .world-map > .questions-board {
  position: absolute;
  width: 90%;
  height: 90%;
  background-image: url(../images/questions-board.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  z-index: 11;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  opacity: 0;
  transition: 0.5s;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--Rubik);
  filter: drop-shadow(0px 0px 20px #00000090);
  font-size: clamp(0.5rem, 2.5vmin, 3rem);
}
.questions-board .player-answer-span {
  font-size: 40px;
  padding: 0 10px;
  color: wheat;
  -webkit-text-stroke: 2px #634a1eb0;
  font-weight: 600;
  text-shadow: 1px 1px 0px #634a1e;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con {
  width: 69%;
  height: 68%;
}

.vote-question {
  width: 59.11%;
  left: 50%;
  height: 8%;
  position: absolute;
  background: #ffcb6f;
  bottom: 7%;
  transform: translate(-50%, -50%);
  filter: brightness(1);
  display: flex;
  color: white;
  box-shadow: 0 10px 38px #00000047, 0 -10px 38px #00000047,
    inset 0 0 0px 4px #ffcb6f, inset 0 0 0px 7px #aa6f3f;
  z-index: 12;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #aa6f3f;
}
.vote-question > span {
  font-size: clamp(0.5rem, 2.5vmin, 3rem);
}
.vote-question button.clickable:active {
  transform: scale(0.9);
}
.vote-question .downvote-btn {
  position: absolute;
  width: 18%;
  height: 173%;
  left: -31px;
  bottom: -38%;
  border-radius: 15%;
  font-size: clamp(2rem, 6vmin, 7rem);
  display: flex;
  border: none;
  background: #ffe79e;
  box-shadow: inset 0 0 0px 6px #ffcb6f, 12px 0 0px 0px #00000017;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #aa6f3f;
}
.vote-question .downvote-btn.clicked {
  background: #bc5050;
  box-shadow: inset 0 0 0px 6px #ffe5c2, 12px 0 0px 0px #00000017;
}
.vote-question .upvote-btn {
  position: absolute;
  width: 18%;
  height: 173%;
  border-radius: 15%;
  font-size: clamp(2rem, 6vmin, 7rem);
  display: flex;
  border: none;
  right: -7%;
  bottom: -38%;
  background: #ffe79e;
  box-shadow: inset 0 0 0px 6px #ffcb6f, -12px 0 0px 0px #00000017;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #aa6f3f;
}
.vote-question .upvote-btn.clicked {
  background: #5e9731;
  box-shadow: inset 0 0 0px 5px #ffe5c2, -2px 0 0px 0px #00000017;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .header {
  height: 30%;
  width: 96%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .header
  > .question {
  color: #854a21;
  font-weight: 600;
  text-align: center;
  width: 70%;
  font-size: clamp(0.5rem, 2vmin, 1.5rem);
  font-family: var(--Vazirmatn);
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content {
  height: 70%;
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: row;
  align-items: center;
  gap: 0;
  justify-content: space-between;
  transition: 0.8s;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content.expand {
  height: 78.6%;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .left-side,
.right-side {
  height: 100%;
  width: 20%;
  gap: 1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding-top: 1%;
  position: relative;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side {
  height: 100%;
  width: 47%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side.expand {
  width: 78.6%;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-input {
  height: 25%;
  width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#answerInput {
     width: 80%;
    height: 80%;
    outline: none;
    border: solid #634a1e clamp(1px, 1px, 2px);
    border-radius: clamp(4px, 8px, 13px);
    box-shadow: 0 3px 2px #00000054;
    font-size: clamp(0.5rem, 4vmin, 3rem);
    padding: 0 10px;
    color: #775700;
    font-weight: 600;
    user-select: none;
}
input#answerInput:disabled{
      color: #d2d2d2;
    background: #634a1e;
}
#deleteNumbersKey {
      background: #ff8787f7 !important;
    color: #910200 !important;
    
    font-size: clamp(1rem, 3vmin, 3rem) !important;
}
#sendAnswer {
  box-shadow: inset 3px 3px 5px #854a218a;
  background: #2f9e00f7 !important;
  color: white !important;
  text-shadow: 0.15vmin 0.15vmin 0px #000;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-keys {
  height: 75%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-keys
  > .keys {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 82%;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-keys
  > .keys
  .row {
  display: flex;
  flex-direction: row;
  justify-content: end;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-keys
  > .keys
  > .row
  > button {
  width: calc(100% / 5);
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-keys
  > .keys
  > .bottom-con {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: end;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-keys
  > .keys
  > .bottom-con
  > .rows
  button {
  width: calc(100% / 3);
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-keys
  > .keys
  > .bottom-con
  > .enter-key {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(100% / 2.5);
  height: 100%;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-keys
  > .keys
  > .bottom-con
  > .enter-key
  > button {
  width: 100%;
  height: 100%;
  font-size: clamp(2rem, 4svw, 6rem);
  border-radius: 10%;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-keys
  > .keys
  > .bottom-con
  > .rows {
  width: 61%;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-keys
  > .keys
  button {
  outline: none;
  background-color: wheat;
  border: solid #854a21 clamp(1px, 1px, 2px);
  border-radius: 20%;
  color: #854a21;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: clamp(1rem, 4vmin, 3rem);
  font-weight: 700;
  margin: 1px;
  padding: 1%;

  transition: background-color 0.2s;
  box-shadow: inset -0.09em -0.09em 0.08em #854a218a,
    inset 0.09em 0.09em 0.04em #ffffffd6;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-keys.clickable
  > .keys
  button:active {
  box-shadow: inset 3px 3px 2px #854a218a;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-choose {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 1px;
  width: 100%;
  transition: 1s;
  height: 95%;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-choose.hide {
  opacity: 0;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-choose
  > .answer-option {
  white-space: nowrap;
  width: 100%;
  height: 25%;
  outline: none;
  background-color: wheat;
  border: 2px solid #854a21;
  color: #854a21;
  display: flex;
  border-radius: clamp(4px, 8px, 13px);
  flex-direction: row;
  justify-content: start;
  align-items: center;
  font-weight: 600;
      font-size: clamp(0.5rem, 2vmin, 1.5rem);
  overflow: hidden;
  margin: 1px;

  transition: background-color 0.2s;
  box-shadow: inset -1px -1px 2px #854a218a, inset 2px 2px 1px white;
  font-family: var(--Vazirmatn), Arial, Helvetica, sans-serif;
  position: relative;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-choose
  > .answer-option.clicked {
  color: wheat;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-choose
  > .answer-option.true-answer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  border: 5px solid #ffb500;
  animation: true-answer-border 0.5s 6;
  opacity: 0;
}

#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-choose
  > .answer-option
  > span {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side
  > .answer-choose
  > .answer-option.clickable:active {
  box-shadow: inset 2px 2px 1px #854a218a;
}
/* #gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .right-side {
  height: 100%;
  width: 18%;
  gap: 1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding-top: 1%;
  position: relative;
} */
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  .helping-tools {
  width: 100%;
  height: 100%;
  gap: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  .helping-tools
  > button {
  height: 45%;
  padding: 10%;
  border-radius: 10%;
  display: flex;
  border: 1px solid #aa6f3f;
  background-color: wheat;
  box-shadow: inset -0.2em -0.2em 0.5em #854a218a,
    inset 0.5em 0.5em 0.4em #ffffffd6;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #aa6f3f;
  filter: brightness(0.7);
  aspect-ratio: 1;
  max-width: 100%;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  .helping-tools.fight
  button {
  height: 70%;
}

.helping-btn.jerk {
  animation: jerk 0.3s infinite;
}
@keyframes jerk {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0);
  }
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  .helping-tools
  > button
  > .helping-button-span.num {
  font-size: clamp(0.5rem, 3.5vmin, 2rem);
  height: 28px;
  display: flex;
  font-weight: bold;
  font-family: var(--Rubik);
  text-shadow: 0px 1px 0 #fff, 1px 1px 1px #000000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  .helping-tools
  > button
  > .helping-button-span.word {
 font-size: clamp(0.5rem, 2vmin, 1.5rem);
  font-weight: bold;
  font-family: var(--Rubik);
  text-shadow: 1px 1px 0 #fff;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  .helping-tools
  > button.clickable {
  filter: brightness(1);
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  .helping-tools
  > button.clickable:active {
  box-shadow: inset 5px 5px 3px #854a218a;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  .helping-tools
  > button.clickable:active
  img {
  transform: translate(5px);
}

#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  .helping-tools
  > button.clickable:active
  .helping-button-span {
  transform: translate(5px);
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  .helping-tools
  > button
  > img {
  pointer-events: none;
  height: 70%;
}

#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .right-side.squeeze {
  display: none;
}
.qb-player-profile {
  width: 80%;
  height: calc(100% / 3);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  color: wheat;
  filter: drop-shadow(0px 2px 1px #0000009e);
  overflow: hidden;
  z-index: 6;
  transition: 2s;
}
.qb-player-profile.big-size {
  width: 100%;
  height: 35%;
  padding: 5px 3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.qb-player-profile .answering-progress {
  position: absolute;
  background: #00000063;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}
.qb-player-profile.big-size .answering-progress {
  width: 100% !important;
  height: 100% !important;
}
.qb-player-profile.w-70 > .player-picture {
  width: 68%;
}
.qb-player-profile > .player-picture {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  width: 46%;
  aspect-ratio: 1;
  object-fit: cover;
  overflow: hidden;
  background: #ffd9b0;
  margin-top: 8%;
}
.qb-player-profile > .player-picture img {
  width: 95%;
  height: 95%;
  object-fit: cover;
}
.qb-player-profile.big-size > .player-picture img {
  height: 95%;
}

.qb-player-profile > .player-name {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
  font-size: clamp(0.5rem, 2vmin, 1.5rem);
}
.qb-player-profile.red-player {
  background-image: url("../images/player-banner-question-red.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.qb-player-profile.green-player {
  background-image: url("../images/player-banner-question-green.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.qb-player-profile.blue-player {
  background-image: url("../images/player-banner-question-blue.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}


.qb-player-profile span {
  text-shadow: 0vmin 0.2vmin 0 #000000b3;
  white-space: nowrap;
}


#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .player-needles
  > .base
  > div {
  display: none;
  opacity: 0;
  width: 7%;
  position: absolute;
  bottom: -200px;
  z-index: 6;
  transition: 1s;
  height: auto;
  pointer-events: none;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .player-needles
  > .territories-flags
  > div {
  display: block;
  opacity: 1;
  position: absolute;
  bottom: -200px;
  z-index: 6;
  transition: 2s;
  pointer-events: none;
  width: 2.8%;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .player-needles
  > .territories-flags
  > div.inactive {
  filter: grayscale(0.7);
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .player-needles
  > .territories-flags
  > div
  > img {
  width: 100%;
  height: auto;
  /*   filter: drop-shadow(2px 4px 0px #00000060);
 */
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .player-needles
  > .base
  > div.active {
  opacity: 1;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .player-needles
  > .base
  > div
  img {
  width: 100%;
  height: auto;
  filter: drop-shadow(2px 4px 0px #00000060);
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > svg
  .world-map-overlay.active {
  fill: #000000;
  opacity: 0.5;
}
/* svg maps cons  */
#gameMain > .locations > .game-world-map > .continents-icons {
  pointer-events: none;
}
#gameMain > .locations > .game-world-map > .continents-icons > .map-icon {
  width: 5.5%;
  pointer-events: none;
  height: 8.5%;
}

#gameMain > .locations > .game-world-map > .continents-icons img {
  width: 100%;
  height: 100%;
  position: absolute; /* Stack icons on top of each other */
  top: 0;
  left: 0;
  opacity: 1;

  transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Fade effect */
}
#gameMain > .locations > .game-world-map > .continents-icons img.active {
  filter: drop-shadow(0px 2px 0px #00000050);
}
#gameMain > .locations > .game-world-map > .continents-icons img.hidden-icon {
  opacity: 0;
}
#gameMain > .locations > .game-world-map > .continents-icons > .alaska-icon {
  top: 21%;
  left: 16.5%;
}
#gameMain > .locations > .game-world-map > .continents-icons > .na-2-icon {
  top: 33%;
  left: 18.5%;
}
#gameMain > .locations > .game-world-map > .continents-icons > .na-3-icon {
  top: 50%;
  left: 21%;
}
#gameMain
  > .locations
  > .game-world-map
  > .continents-icons
  > .na-3-icon.inactive {
  filter: brightness(0.54);
}
#gameMain > .locations > .game-world-map > .continents-icons > .na-4-icon {
  top: 61%;
  left: 29.5%;
}
#gameMain > .locations > .game-world-map > .continents-icons > .greenland-icon {
  top: 12%;
  left: 37.5%;
}
#gameMain > .locations > .game-world-map > .continents-icons > .africa-icon {
  top: 51.5%;
  left: 52%;
}
#gameMain
  > .locations
  > .game-world-map
  > .continents-icons
  > .south-africa-icon {
  top: 63%;
  left: 55%;
}
#gameMain > .locations > .game-world-map > .continents-icons > div {
  position: absolute;
  z-index: 5;
}
#gameMain > .locations > .game-world-map > .continents-icons > div.active {
  z-index: 6;
}
#gameMain > .locations > .game-world-map > .continents-icons > div.picked {
  opacity: 0.3 !important;
}
#gameMain > .locations > .game-world-map > .continents-icons > .europe-icon {
  top: 32%;
  left: 54%;
}
#gameMain > .locations > .game-world-map > .continents-icons > .asia1-icon {
  top: 26%;
  left: 66%;
}
#gameMain > .locations > .game-world-map > .continents-icons > .asia2-icon {
  top: 37%;
  left: 67%;
}
#gameMain > .locations > .game-world-map > .continents-icons > .asia3-icon {
  top: 19%;
  left: 82%;
}
#gameMain > .locations > .game-world-map > .continents-icons > .asia4-icon {
  top: 35%;
  left: 77.5%;
}
#gameMain > .locations > .game-world-map > .continents-icons > .asia5-icon {
  top: 44%;
  left: 72.7%;
}
#gameMain > .locations > .game-world-map > .continents-icons > .asia6-icon {
  top: 46.2%;
  left: 78.4%;
}
#gameMain > .locations > .game-world-map > .continents-icons > .australia-icon {
  top: 73%;
  left: 86.7%;
}
#gameMain > .locations > .game-world-map > .south-america {
  position: absolute;
  left: 267px;
  fill: transparent;
  bottom: 108px;
}
#gameMain > .locations > .game-world-map > .south-america > svg path:hover {
  fill: #0000002f;
  stroke: var(--orange-color);
  stroke-width: 50px;
}
#gameMain > .locations > .game-world-map > .africa {
  position: absolute;
  left: 457px;
  fill: transparent;
  bottom: 202px;
}
#gameMain > .locations > .game-world-map > .africa > svg path:hover {
  fill: #0000002f;
  stroke: var(--orange-color);
  stroke-width: 50px;
}
#gameMain > .locations > .players-banners {
  height: 15svh;
  width: 100%;
  display: flex;
  flex-direction: row;
  position: relative;
  justify-content: space-between;
  gap: 1%;
  font-size: clamp(0.5rem, 2vmin, 1.5rem);
  max-height: 15svh;
}
#gameMain > .locations > .players-banners.waiting {
  background: #ff7a004d;
  backdrop-filter: blur(7px);
}
#gameMain > .locations > .players-banners > .wheel-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.6);
}
#gameMain > .locations > .players-banners > .banner {
  height: 100%;
  width: calc(99% / 3);
  background-image: url(../images/player-banner-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: 1s;
  opacity: 0;
  position: relative;
  aspect-ratio: 272 / 115;
  padding: 1%;
  overflow: hidden;
  z-index: 1;
}
#gameMain > .locations > .players-banners > .banner.show {
  opacity: 1 !important;
}
#gameMain > .locations > .players-banners > .banner:hover {
  filter: brightness(1) !important;
}
#gameMain > .locations > .players-banners > .banner.inactive {
  filter: brightness(0.5);
}
#gameMain > .locations > .players-banners > .banner.active {
  opacity: 1;
}
#gameMain
  > .locations
  > .players-banners
  > .banner
  > .user-name-points
  > .points
  > .added-points {
  color: wheat;
  font-size: clamp(0.5rem, 1.5vmin, 2rem);
  position: absolute;
  top: -5%;
  left: 10%;
  font-weight: bold;
  transition: 1s;
  display: none;
  opacity: 0;
}
#gameMain
  > .locations
  > .players-banners
  > .banner
  > .user-name-points
  > .points {
  position: relative;
  background-color: #565046;
  font-size: clamp(0.5rem, 2.2vmin, 3rem);
}
.red-player-points {
  text-shadow: -1px -1px 0 #9d0000, 1px -1px 0 #9d0000, -1px 1px 0 #9d0000,
    1px 1px 0 #9d0000;
}

.green-player-points {
  text-shadow: -1px -1px 0 #3a9d00, 1px -1px 0 #3a9d00, -1px 1px 0 #3a9d00,
    1px 1px 0 #3a9d00;
}

.blue-player-points {
  text-shadow: -1px -1px 0 #0051bb, 1px -1px 0 #0051bb, -1px 1px 0 #0051bb,
    1px 1px 0 #0051bb;
}


#gameMain
  > .locations
  > .players-banners
  > .banner
  > .user-name-points
  > .username {
  box-shadow: inset 0px 0.9em #ffffff2b, inset 0 -0.2em 0.7em #00000087;
}
#gameMain > .locations > .players-banners > .banner > .user-image {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(339deg, #4a3423, #b17e54);
  border: 1px solid #d9b376;
  position: relative;
  aspect-ratio: 1;
  object-fit: cover;
  height: 80%;
}
#gameMain
  > .locations
  > .players-banners
  > .banner
  > .user-image
  > .user-banner-status {
  position: absolute;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  z-index: 3;
}
#gameMain
  > .locations
  > .players-banners
  > .banner
  > .user-image
  > .user-banner-status
  > img {
  height: 60%;
  aspect-ratio: 1;
}
#gameMain > .locations > .players-banners > .banner > .user-image > img {
  width: 90%;
  object-fit: cover;
  border: 1px solid #b8a074;
  aspect-ratio: 1;
  background: #dfd4ba;
  object-position: top;
}
#gameMain
  > .locations
  > .players-banners
  > .banner
  > .user-image.default
  > img:first-of-type {
  transform: translateY(-8%);
  height: 85%;
}
#gameMain > .locations > .players-banners > .banner > .user-image.default {
  background: none;
  border: none;
  object-fit: none;
}
#gameMain
  > .locations
  > .players-banners
  > .banner
  > .user-image
  > .player-level {
  position: absolute;
  bottom: -12%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f0e3cb;
  color: #fff;
  padding: 5px;
  border-radius: 0.7vmin;
  border: 0.3vmin solid #664529;
  width: 43%;
  height: 34%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.7em;
  color: #674931;
  font-family: var(--Bricolage-Grotesque);
  font-weight: bold;
  z-index: 3;
}

.wheel-spinner {
  width: 40px;
  height: 40px;
  color: #fff;
  position: relative;
}
.wheel-spinner::after {
  content: url(../images/wheel-spinner.png);
  width: 100%; /* Changed width to 100% to fill the container */
  height: 100%; /* Changed height to 100% to fill the container */
  animation: loading 2s linear infinite; /* Changed ease to linear for smoother rotation */
  position: absolute; /* Added absolute positioning to the pseudo-element */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
@keyframes loading {
  0% {
    transform: rotate(0turn);
  }
  100% {
    transform: rotate(1turn);
  }
}
#QBMiddleSide {
  position: relative;
}
#QBMiddleSide.hide {
  opacity: 0;
  transition: 0.3s;
}
#QBMiddleSide.not-visible {
  opacity: 0;
  transition: 0s;
}
.player-answer-label {
  position: absolute;
  left: -33%;
  height: 23%;
  aspect-ratio: 11 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: wheat;
  text-shadow: 2px 2px 0px #00000040;
  font-weight: 700;
  justify-content: center;
  background: #ffe7ce;
  opacity: 0;
  transition: 0.7s;
  font-family: var(--Bricolage-Grotesque);
  padding: 0.2rem;
  border: solid #000 clamp(2px, 3px, 4px);
  white-space: nowrap;
}
.player-answer-label.active {
  opacity: 1;
  left: 1%;
}
.player-answer-label.attacker-answer {
  top: 36px;
  left: -200px;
}
.player-answer-label.defender-answer {
  top: 36px;
  left: 300px;
}
.player-answer-label.attacker-answer-active {
  opacity: 1;
  left: 3% !important;
}
.player-answer-label.defender-answer-active {
  opacity: 1;
  left: 52% !important;
}
.player-answer-label.true {
  left: 9%;
  animation: true-input-beat 1s ease-in-out infinite;
}

@keyframes true-answer-border {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.player-answer-label.almost {
  left: 5%;
}

.player-answer-label.red {
  top: 7%;
  border-color: #922828;
}
.player-answer-label.green {
  top: 41%;
  border-color: #4f7d0b;
}
.player-answer-label.blue {
  top: 75%;
  border-color: #185c8d;
}
/* /// */

.player-answer-label > .answer {
  height: 60%;
  height: 60%;
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: clamp(0.5rem, 2.4vmin, 3vmin);
}
.player-answer-label > .answer > span {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.player-answer-label > .answer-details {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-shadow: none;
  height: 40%;
  font-size: clamp(0.3rem, 1.3vmin, 2rem);
}

.player-answer-label.red > .answer-details {
  color: #912828;
}
.player-answer-label.green > .answer-details {
  color: #4f7d0b;
}
.player-answer-label.blue > .answer-details {
  color: #185c8d;
}
.player-answer-label > .answer-details>.difference {
    visibility: hidden;
    opacity: 0;
    transition: 0.7s;
}
.player-answer-label > .answer-details>.difference.active {
visibility: visible;
    opacity: 1;
}
.player-answer-label.red > .answer {
  background: #912828;
}

.player-answer-label.green > .answer {
  background: #4f7d0b;
}

.player-answer-label.blue > .answer {
  background: #185c8d;
}

/* /// */

.player-answer-label.attacker-answer {
  top: 10%;
}
.player-answer-label.defender-answer {
  top: 10%;
}
.qb-final-answer {
  background-image: url(../images/final-answer-plank.png);
  width: 57%;
  height: 97%;
  background-repeat: no-repeat;
  position: absolute;
  left: 100%;
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  background-size: 100%;
  transition: 1s;
}
.qb-final-answer > .content {
  width: 100%;
  height: 43%;
}
.qb-final-answer > .content > .final-result-header {
  color: wheat;
  height: 40%;
  font-weight: 500;
  width: 96%;
}
.qb-final-answer > .content > .final-result-content {
  height: 40%;
  color: #f1c168;
  font-weight: 700;
  text-shadow: 2px 1px 0 #000;
  font-size: clamp(0.5rem, 3vmin, 3rem);
  width: 96%;
}
.qb-final-answer.show {
  opacity: 1;
  left: 42.5%;
}
/*  */
.qb-final-answer-attack {
  background-image: url(../images/final-answer-plank-sign.png);
  background-size: 100% 100%;
  width: 80%;
  height: 59%;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -100%;
  opacity: 0;
  transition: 1s;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.qb-final-answer-attack > .content {
  width: 100%;
  height: 43%;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
.qb-final-answer-attack > .content > .final-result-header {
  color: #ffeedc;
  height: 40%;
  font-weight: bold;
  width: 96%;
  text-shadow: 0px 2px 1px #000000;
}
.qb-final-answer-attack > .content > .final-result-content {
  height: 40%;
  color: #502d08;
  font-weight: 700;
  text-shadow: 0px 1px 0px #b7936b, 0px 2px 0px #000000;
  font-size: clamp(0.8rem, 4vmin, 2rem);
  width: 96%;
  font-family: var(--Rubik);
}
.qb-final-answer-attack.show {
  opacity: 1;
  bottom: 3.5%;
}
.invitations-side-bar {
  width: 20%;
  position: fixed;
  right: 0;
  bottom: 6%;
  max-height: 84%;
  overflow: hidden;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  z-index: 75;
  gap: 1%;
}
.invitations-side-bar > .invite-notification {
  width: 100%;
  background-color: #ebe6c1;
  z-index: 75;
  border-radius: 10px;
  display: flex;
  box-shadow: 0 4px 0px #3a2b1f;
  flex-direction: column;
  transition: 1s;
  opacity: 0;
  aspect-ratio: 15 / 5;
  position: relative;
  border: solid 4px #3a2b1f;
  bottom: -150px;
  justify-content: space-between;
}
.invitations-side-bar > .invite-notification.show {
  bottom: 0;
  opacity: 1;
}
.invitations-side-bar > .invite-notification.hide {
  transform: translateX(500px);
}
.invitations-side-bar > .invite-notification > .right-side {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 1%;
  height: 50%;
  font-size: clamp(0.8rem, 2vmin, 2rem);
  padding: 1%;
}
.invitations-side-bar > .invite-notification > .right-side > span {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.invitations-side-bar > .invite-notification > .right-side > span:nth-child(1) {
  font-size: clamp(0.8rem, 2vmin, 2rem);
  color: #595858;
}
.invitations-side-bar > .invite-notification > .right-side > span:nth-child(2) {
  font-size: clamp(1rem, 2vmin, 2rem);
  display: flex;
  font-family: var(--Rubik);

  display: flex;
  font-weight: bold;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: -2%;
  padding: 0 1%;
}
.invitations-side-bar > .invite-notification > .left-side {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: clamp(0.8rem, 2vmin, 2rem);
  height: 50%;
  overflow: hidden;
  border-top: 4px solid #3a2b1f;
}
.invitations-side-bar > .invite-notification > .left-side > button {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  font-size: clamp(0.8rem, 2vmin, 2rem);
  color: white;
  font-weight: 600;
  font-family: var(--Rubik);
  background-color: transparent;
}
.invitations-side-bar > .invite-notification > .left-side > button.accept {
  border-radius: 0 0 0 5px;

  color: #ebe6c1;
  text-shadow: 0px 1px #124300;
  background-color: #456e10;
  border-left: none;
  border-right: 4px solid #1e2b0d;
  border-bottom: none;
}

.invitations-side-bar
  > .invite-notification
  > .left-side
  > button.accept:hover {
  background-color: #6daa1d;
  color: white;
}
.invitations-side-bar
  > .invite-notification
  > .left-side
  > button.accept:active {
  background-color: rgb(93, 145, 25);
}
.invitations-side-bar > .invite-notification > .left-side > button.reject {
  border-radius: 0 0 5px 0;

  background-color: #7e1111;
  border-left: none;
  border-right: none;
  border-bottom: none;
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
}
.invitations-side-bar
  > .invite-notification
  > .left-side
  > button.reject:hover {
  background-color: #b62020;
}
.invitations-side-bar
  > .invite-notification
  > .left-side
  > button.reject:active {
  background-color: #961919;
}
.connection-status-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.connection-status-container > .connection-status-icon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #979797;
}
.connection-status-container > .connection-status-icon.online {
  background-color: #57bb16;
}
.connection-status-container > .connection-status-icon.playing {
  background-color: #009ccf;
}
.invited-lobby-container {
  height: 60%;
  aspect-ratio: 34 / 35;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  border-radius: 10px;
  background-image: url(../images/scroll.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  position: fixed;
  z-index: 75;
  filter: drop-shadow(2px 4px 6px #00000050);
}

.invited-lobby-overlay {
  position: fixed;
  left: 0;
  right: 0;
  backdrop-filter: blur(7px);
  bottom: 0;
  top: 0;
  background-color: #00000075;

  z-index: 70;
  width: 100%;
  height: 100svh;
  display: none;
}
.invited-lobby-overlay.show {
  display: block;
}
.landing-page-overlay {
  position: absolute;
  left: 0;
  right: 0;
  backdrop-filter: blur(3px);
  bottom: 0;
  top: 0;
  background-color: #00000054;

  z-index: 70;
  width: 100%;
  height: 100svh;
  display: none;
}
.landing-page-overlay.show {
  display: block;
}

.invited-lobby-container > .header {
  height: 19%;
  width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: end;
}
.invited-lobby-container > .header > h2 {
  font-size: clamp(1rem, 5vmin, 3rem);
  color: #896327;
  text-shadow: 0px 1px 0px #c29d61, 0px 3px 0px #000;
}
.invited-lobby-container > .content {
  height: 60%;
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.invited-lobby-container > .footer {
  height: 10%;
  width: 100%;
  gap: 2px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.invited-lobby-container > .footer > span {
  font-size: 20px;
  color: #896745;
  line-height: 23px;
}
.invited-lobby-container > .content > .invited-user-profile {
  height: 32%;
  width: 70%;

  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
.invited-lobby-container > .content > .invited-user-profile > .user-picture {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 25%;
  height: 70%;
  aspect-ratio: 1;
  position: relative;
  object-fit: cover;
}
.invited-lobby-container
  > .content
  > .invited-user-profile
  > .user-picture
  img {
  height: 100%;
  border-radius: clamp(3px, 5px, 5px);
  box-shadow: 0 0 0 3px #ffe5c2, 0 0 0 5px #52330b;
  aspect-ratio: 1;
  object-fit: cover;
  background-color: #be8d4a;
}
.invited-lobby-container > .content > .invited-user-profile > .username {
  font-size: clamp(1rem, 3vmin, 3rem);
  width: 75%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invited-lobby-container > .content > .missing-user-profile {
  height: 32%;
  width: 70%;

  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
.invited-lobby-container > .content > .lobbyButtonsCon {
  width: 70%;

  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.invited-lobby-container > .content > .lobbyButtonsCon > button {
  width: 36%;
  aspect-ratio: 16 / 6;
  background-color: transparent;
  font-family: inherit;
  border: none;
  font-size: clamp(0.8rem, 2vmin, 3rem);
  border-radius: 7px;
  background-image: url(../images/plank.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: wheat;
}
.invited-lobby-container > .content > .lobbyButtonsCon > button:active {
  transform: scale(0.9);
}
.invited-lobby-container
  > .content
  > .lobbyButtonsCon
  > button:not(.ready):hover {
  filter: brightness(1.1);
}
.invited-lobby-container
  > .content
  > .lobbyButtonsCon
  > .get-ready
  > .ready-status {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.invited-lobby-container > .content > .missing-user-profile > .user-picture {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 25%;
  height: 70%;
  aspect-ratio: 1;
  position: relative;
  object-fit: cover;
}
.invited-lobby-container > .content > .missing-user-profile > .label {
  width: 75%;
  font-size: clamp(1rem, 3vmin, 3rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invited-lobby-container
  > .content
  > .missing-user-profile
  > .user-picture
  img {
  filter: brightness(0.5);
  height: 100%;
  border-radius: clamp(3px, 5px, 5px);
  box-shadow: 0 0 0 3px #ffe5c2, 0 0 0 5px #52330b;
  aspect-ratio: 1;
  object-fit: cover;
}
.invited-lobby-container
  > .content
  > .missing-user-profile
  > .user-picture
  > .missing-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f9cf95;
  font-size: clamp(1rem, 5vmin, 4rem);
  font-weight: bold;
}
.invited-lobby-container
  > .content
  > .invited-user-profile
  > .user-picture
  > .host-icon {
  position: absolute;
  top: -20px;
  left: -4px;
  color: #ffac00;
  font-size: 30px;
  font-weight: bold;
  -webkit-text-stroke: 2px #39291b;
}
.lobby-full-sign {
  background-image: url(../images/scroll-2.png);
  background-size: 100% 100%;
  width: 30%;
  height: 12%;
  top: 18%;
  font-size: clamp(0.5rem, 2.5vmin, 3rem);
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  background-repeat: no-repeat;
  position: fixed;
  z-index: 9998;
  filter: drop-shadow(2px 4px 6px #00000050);
  justify-content: center;
  align-items: center;
  flex-direction: row;
  color: #000000;
  opacity: 0;
  transition: 0.3s;
}
.lobby-full-sign.show {
  opacity: 1;
}
.lobby-full-sign > .close-lobby-message {
  position: absolute;
  top: 0%;
  right: 3%;
}
.startGameDisabled {
  filter: grayscale(1);
}
.startGameDisabled:hover {
  filter: grayscale(1) !important;
}
.answer-input-timer {
  width: 3%;
  padding: 0.5% 0;
  height: 100%;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #854a21, inset 1px 1px #854a21;

  display: flex;
  border-radius: 10px;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  opacity: 1;

  /* box-shadow: inset -4px -4px 4px #854a218a, inset 5px 5px 3px white; */
}
.answer-input-timer.squeeze {
  width: 0;
}
.answer-input-timer.active {
  opacity: 1;
}
.answer-input-timer.inactive {
  visibility: hidden;
}
.answer-input-timer > .timer-progress-bar {
  width: 71%;
  height: 44%;
  border-radius: 10px;
  background: #e42c2c;
  box-shadow: inset -0.35em 0 #ffffff47, inset 0 0 0.3em #000000c2;
  transition: 0.3s;
}
.QuestionTimerWarning {
  animation: QuestionTimerWarning 0.5s ease-in-out 6;
}
@keyframes QuestionTimerWarning {
  0% {
    background-color: #ffffff;
  }
  50% {
    background-color: #ffb7b7;
  }
  100% {
    background-color: #fff;
  }
}
.pick-terr-timer {
  width: 100%;
  height: 10%;
  background-color: #42321a;
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  opacity: 0;
  transition: 1s;
  z-index: 12;
}
.pick-terr-timer.active {
  opacity: 1;
}
.pick-terr-timer > .timer-progress-bar {
  width: 100%;
  height: 100%;
  border-radius: 0 10px 10px 0;
  background: repeating-linear-gradient(
    45deg,
    #ca8c30,
    #ca8c30 10px,
    #6b512a 10px,
    #6b512a 20px
  );
  transition: 0.3s;
}

.territory-icons-con > img {
  width: 30px;
  height: 37px;
  transition: 1s;
}
.players-turn-con {
  background-color: #ffbb72;
  width: 32%;
  display: flex;
  position: absolute;
  bottom: -17%;
  left: 5%;
  border-radius: clamp(2px, 5px, 8px);
  gap: 1%;
  flex-direction: row-reverse;
  align-items: start;
  justify-content: center;
  height: 7%;
  transition: 1s;
  box-shadow: 0 0 0 0.25vmin #562f1b, 0 0 0 0.5vmin #f3d9bc, 0 0 1vmin #000;
  opacity: 0;
  z-index: 7;
}
.players-turn-con img.turn-active {
  filter: brightness(1.5);
}
.players-turn-con.show {
  opacity: 1;
  bottom: 6%;
}
.button-inactive {
  filter: brightness(0.7);
}
.player-turn-needle-con {
  width: 6%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.player-turn-needle-con:nth-child(3),
.player-turn-needle-con:nth-child(6),
.player-turn-needle-con:nth-child(9) {
  margin-right: 3%;
}
.player-turn-needle-con > img {
  width: 100%;
  height: auto;
}
.player-turn-needle-con.showAfter::after {
  content: "";
  width: 0;
  height: 0;
  border-right: solid transparent clamp(5px, 5px, 5px);
  border-left: solid transparent clamp(5px, 5px, 5px);
  position: absolute;
  bottom: -29%;
  right: 50%;
  transform: translate(50%, 50%);
  filter: drop-shadow(1px 1px 1px black);
}
.player-turn-needle-con.showAfter.red::after {
  border-bottom: 10px solid #f32424;
}
.player-turn-needle-con.showAfter.green::after {
  border-bottom: 10px solid #83f100;
}
.player-turn-needle-con.showAfter.blue::after {
  border-bottom: 10px solid #00b1f1;
}
.player-attack-needle {
  position: absolute;
  opacity: 0;
  transition: left 1s ease, bottom 1s ease; /* Adjust duration and easing */
  pointer-events: none;
  width: 2.8%;
  z-index: 8;
}

.player-attack-needle.attackAnimation {
  animation: attackAnimation 0.5s ease-in-out;
}
@keyframes attackAnimation {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0px);
  }
}
.player-attack-needle > img {
  filter: drop-shadow(0 0 2px #ffffff80);
  width: 100%;
}
.player-attack-needle.show {
  opacity: 1;
}
.points-elements-con {
  position: absolute;
  left: 11%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.points-elements-con img {
  height: 64%;
  animation: beat 2s ease-in-out infinite;
}
.beat-animation {
  animation: beat 2s ease-in-out infinite;
}
@keyframes true-input-beat {
  0% {
    transform: scale(0.97);
  }
  25% {
    transform: scale(1.03);
  }
  50% {
    transform: scale(0.97);
  }
  75% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(0.97);
  }
}
@keyframes beat {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.9);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(0.9);
  }
}
.path-inactive {
  fill: #361d0080 !important;
}
.path-inactive.red {
  stroke: #9f0000 !important;
}
.path-inactive.green {
  stroke: #2f5100 !important;
}
.path-inactive.blue {
  stroke: #004872 !important;
}
.inactive-flag {
  filter: brightness(0.5);
}
.answer-option > .colored-div {
  width: inherit;
  height: 100%;
  color: wheat;
}
.answer-option > .colored-div.red {
  background-color: #8b2121;
}
.answer-option > .colored-div.green {
  background-color: #2e5c09;
}
.answer-option > .colored-div.blue {
  background-color: #1d4572;
}
.player-lost {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 4;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #000000ad;
}
.player-lost > span {
  font-size: clamp(1rem, 4vmin, 5rem);
  border: solid rgb(218, 61, 61) clamp(3px, 4px, 8px);
  color: rgb(218, 61, 61);
  font-weight: 800;
  line-height: 1.1;
  padding: 3px 13px;
  border-radius: clamp(0.5rem, 2vmin, 2rem);
}
.gray-filter {
  filter: grayscale(1) !important;
}
.hide {
  opacity: 0;
}
.explosion-animation {
  width: 100%;
  height: 100%;
}
.fort-broken-animation {
  width: 130%;
  height: 130%;
}
.fort-broken-animation > img {
  height: 100%;
}
.explosion-animation img {
  height: 100%;
}
.game-results {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 80%;
  width: 99%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 11;
  transform: scale(0) translate(-50%, -50%);
  opacity: 1;
  transition: 0.2s;
  filter: drop-shadow(0px 0px 29px #00000080);
  font-family: var(--Rubik);
  font-size: clamp(0.5rem, 2vmin, 2rem);
}
.game-results.scale {
  transform: scale(1) translate(-50%, -50%);
}
.game-results > .results-container {
  height: 90%;
  width: 100%;
  display: flex;
  flex-direction: column;

  align-items: center;
}
.game-results > .results-container > .header {
  height: 13%;
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: solid 0.5vmin #271705;
  background-color: #87664c;
}
.game-results > .results-container > .header > span {
  font-weight: bold;
  font-family: var(--Rubik);
  color: #ebe6c1;
  text-shadow: 0 0.2vmin 1px #000;
  font-size: 2.5vmin;
  height: 50%;
}
.game-results > .results-container > .content {
  height: 74%;
  width: 98%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  transition: 1s;
  background: #ebe6c1;
  border-right: solid 0.5vmin #3a2b1f;
  box-shadow: inset 1.3vmin 0px #bb9e83, inset -1.3vmin 0 #c0a185,
    inset 1.6vmin 0 #3a2b1f, inset -1.6vmin 0 #3a2b1f;
  border-left: solid 0.5vmin #3a2b1f;
  padding: 0 1.3vmin;
}
.game-results > .results-container > .content > .right {
  height: 100%;
  width: calc(100% / 3);
  display: flex;
  flex-direction: row;
  gap: 3%;
}
.game-results > .results-container > .content > .right > .ranking-headers-con {
  width: 30%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0px 0px 0.3vmin #00000050);
  white-space: nowrap;
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > .heading-rank {
  height: calc(90% / 7);
  position: absolute;
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > .heading-rank
  > img {
  width: 100%;
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > .heading-rank
  > span {
  position: absolute;
  color: white;
  font-size: 1.5vmin;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  text-shadow: 0.1vmin 0.1vmin 0 #000;
  font-family: var(--Rubik);
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > .heading-1 {
  top: 27%;
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > .heading-2 {
  top: 36.9%;
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > .heading-3 {
  top: 46.9%;
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > .heading-4 {
  top: 56.9%;
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > .heading-5 {
  top: 67%;
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > .heading-6 {
  top: 77%;
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > .heading-7 {
  top: 87%;
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > .highest-player-banner {
  width: 100%;
  position: absolute;
  top: 0;
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > .highest-player-banner
  > img {
  width: 100%;
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > .highest-player-banner
  > img.highestRankingWinnerImg {
  border-radius: 50%;
  width: 47%;
  position: absolute;
  left: 51%;
  top: 43%;
  transform: translate(-50%, -50%);
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > img {
  width: 100%;
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > .highest-player-banner
  > .question-mark {
  position: absolute;
  font-size: 3.7vmin;
  left: 50%;
  transform: translateX(-50%);
  bottom: 29%;
  color: #735f00;
  font-family: var(--Rubik);
  font-weight: bold;
}
.game-results
  > .results-container
  > .content
  > .right
  > .ranking-headers-con
  > .highest-player-banner
  > .name {
  position: absolute;
  font-size: 1.7vmin;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10%;
  color: #ffe461;
  text-shadow: 0 0 0.3vmin #501a00, 0 0 0.3vmin #501a00, 0 0 0.3vmin #501a00,
    0 0 0.3vmin #501a00, 0 0 0.3vmin #501a00, 0.2vmin 0.2vmin 0.2vmin #0000009c;
}
.game-results > .results-container > .content > .right > .players-ranks-con {
  width: 62%;
  height: 103%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.game-results
  > .results-container
  > .content
  > .right
  > .players-ranks-con
  > .content {
  width: 100%;
  height: 90%;
  background: #a8a37e;
  border: 0.2vmin solid #634b2a;
  box-shadow: 0 0 0vmin 0.7vmin #ebe6c1, 0 0 0vmin 0.8vmin #634b2a;
  display: flex;
  border-radius: 0.2vmin;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding: 1vmin 0;
  font-family: var(--Rubik);
  gap: 2%;
}
.game-results
  > .results-container
  > .content
  > .right
  > .players-ranks-con
  > .content
  > .header-title {
  width: 90%;
  background: #ddd3a8;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 12%;
  color: #361a00;
  font-size: 1.5vmin;
}
.game-results
  > .results-container
  > .content
  > .right
  > .players-ranks-con
  > .content
  > .ranks {
  height: 86%;
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  padding: 3%;
  gap: 1vmin;
  position: relative;
  overflow-x: hidden;
}
.game-results
  > .results-container
  > .content
  > .right
  > .players-ranks-con
  > .content
  > .ranks
  > .player-banner {
  width: 100%;
  height: 4.5vmin;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.game-results
  > .results-container
  > .content
  > .right
  > .players-ranks-con
  > .content
  > .ranks
  > .week-remaining-counter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  text-shadow: 0vmin 0.1vmin 0 #000;
  width: 100%;
  display: flex;
  justify-content: center;
}
.game-results
  > .results-container
  > .content
  > .right
  > .players-ranks-con
  > .content
  > .ranks
  > .player-banner
  > .user-image {
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: 0 0 0 0.2vmin white, 0 0 0 0.3vmin #341d07;
  border-radius: 0.3vmin;
  background: #fffcf1;
  z-index: 1;
}
.game-results
  > .results-container
  > .content
  > .right
  > .players-ranks-con
  > .content
  > .ranks
  > .player-banner
  > .user-image
  > img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}
.game-results
  > .results-container
  > .content
  > .right
  > .players-ranks-con
  > .content
  > .ranks
  > .player-banner
  > .details {
  width: 95%;
  height: 100%;
  border-radius: 0.3vmin;
  border: 0.2vmin solid #341d07;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(to bottom, #ffffff, #ffe6ad);
  font-size: 1.4vmin;
}
.game-results
  > .results-container
  > .content
  > .right
  > .players-ranks-con
  > .content
  > .ranks
  > .player-banner
  > .details
  > .xp-upward {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 1.4vmin;
  gap: 7%;
  width: 100%;
}
.game-results
  > .results-container
  > .content
  > .right
  > .players-ranks-con
  > .content
  > .ranks
  > .player-banner
  > .details
  > .xp-upward
  > .bxs-up-arrow {
  color: green;
}
.game-results
  > .results-container
  > .content
  > .right
  > .players-ranks-con
  > .content
  > .ranks
  > .player-banner
  > .details
  > .xp-upward
  > .bxs-down-arrow {
  color: #800000;
}
.game-results > .results-container > .content > .center {
  height: 100%;
  width: calc(100% / 3);
  position: relative;
}
.game-results > .results-container > .content > .center > .events-rewards-con {
  height: 14%;
  position: absolute;
  left: 50%;
  background: #ffd194;
  color: #341d07;
  border-radius: 0.5vmin;
  font-size: 2vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2%;
  font-family: var(--Rubik);
  top: 9%;
  transform: translateX(-50%);
  width: 90%;
  flex-direction: column;
}
.game-results
  > .results-container
  > .content
  > .center
  > .events-rewards-con
  > .event-field {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 2.5vmin;
}
.game-results
  > .results-container
  > .content
  > .center
  > .events-rewards-con
  > .event-field
  > .reward-details {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.game-results
  > .results-container
  > .content
  > .center
  > .events-rewards-con
  > .event-field
  > .reward-details
  > img {
  height: 100%;
}
.game-results > .results-container > .content > .center > .rank-podium {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  position: relative;
}
.game-results
  > .results-container
  > .content
  > .center
  > .rank-podium
  > img:first-of-type {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 2vmin #ad450061) drop-shadow(0 0 2vmin #ad450061);
}
.game-results
  > .results-container
  > .content
  > .center
  > .rank-podium
  > .place-picture {
  height: 15%;
  position: absolute;
  width: auto;
  aspect-ratio: 1;
  border-radius: 0.1vmin;
}
.game-results
  > .results-container
  > .content
  > .center
  > .rank-podium
  > .place-picture
  > img {
  height: 100%;
  width: auto;
  aspect-ratio: 1;
}
.game-results
  > .results-container
  > .content
  > .center
  > .rank-podium
  > .place-picture.red {
  box-shadow: 0 0 0 0.3vmin #ebe6c1, 0 0 0 0.6vmin #b40000;
}
.game-results
  > .results-container
  > .content
  > .center
  > .rank-podium
  > .place-picture.green {
  box-shadow: 0 0 0 0.3vmin #ebe6c1, 0 0 0 0.6vmin #479500;
}
.game-results
  > .results-container
  > .content
  > .center
  > .rank-podium
  > .place-picture.blue {
  box-shadow: 0 0 0 0.3vmin #ebe6c1, 0 0 0 0.6vmin #0064b4;
}
.game-results
  > .results-container
  > .content
  > .center
  > .rank-podium
  > .first-place-picture {
  left: 40%;
  bottom: 52%;
}
.game-results
  > .results-container
  > .content
  > .center
  > .rank-podium
  > .second-place-picture {
  left: 10.1%;
  bottom: 43%;
}
.game-results
  > .results-container
  > .content
  > .center
  > .rank-podium
  > .third-place-picture {
  left: 72.8%;
  bottom: 38.8%;
}
.game-results
  > .results-container
  > .content
  > .center
  > .rank-podium
  > .first-place-name {
  position: absolute;
  left: 49.5%;
  bottom: 45.5%;
  transform: translate(-50%, 50%);
  z-index: 1;
  color: white;
  text-shadow: 0vmin 0.2vmin 0 #000;
}
.game-results
  > .results-container
  > .content
  > .center
  > .rank-podium
  > .second-place-name {
  position: absolute;
  left: 18.5%;
  bottom: 37.5%;
  transform: translate(-50%, 50%);
  z-index: 1;
  color: white;
  text-shadow: 0vmin 0.2vmin 0 #000;
}
.game-results
  > .results-container
  > .content
  > .center
  > .rank-podium
  > .third-place-name {
  position: absolute;
  left: 80.5%;
  bottom: 33.5%;
  transform: translate(-50%, 50%);
  z-index: 1;
  color: white;
  text-shadow: 0vmin 0.2vmin 0 #000;
  font-family: var(--Rubik);
  font-size: 1.5vmin;
}
.game-results > .results-container > .content > .left {
  height: 100%;
  width: calc(100% / 3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 2vmin;
  gap: 2%;
  white-space: nowrap;
  filter: drop-shadow(0 0 2vmin #ad450061) drop-shadow(0 0 2vmin #ad450061);
}
.game-results > .results-container > .content > .left > .title {
  height: 8%;
  color: #ffb161;
  text-shadow: 0 0 0.3vmin #501a00, 0 0 0.3vmin #501a00, 0 0 0.3vmin #501a00,
    0 0 0.3vmin #501a00, 0 0 0.3vmin #501a00, 0.2vmin 0.2vmin 0.2vmin #0000009c;
}
.game-results
  > .results-container
  > .content
  > .left
  > .points-details-container {
  width: 75%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: fit-content;
  gap: 0.5vmin;
  color: #ad450061;
}
.game-results > .results-container > .content > .left > .points-total {
  background: #341d07;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 3% 4.5% 3% 12%;
  color: #c9bd91;
  font-size: 1.8vmin;
  border-radius: 2.5vmin;
  z-index: 1;
  width: 85%;
  position: relative;
}
.game-results
  > .results-container
  > .content
  > .left
  > .points-total
  > span:first-child {
  color: #ffd395;
  text-shadow: 0 0 0.5vmin #ff6900, 0 0 1vmin #ff0000;
}
.game-results
  > .results-container
  > .content
  > .left
  > .points-total
  > span:last-child {
  color: #ffe000;
  text-shadow: 0 0 0.5vmin #ff6900, 0 0 1vmin #ff0000;
  font-size: 2.3vmin;
  font-family: var(--Roboto-Mono);
  font-weight: bold;
}
.game-results > .results-container > .content > .left > .player-final-xp {
  width: 75%;
  background: #341d07;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 2% 4.5% 2% 12%;
  color: #c9bd91;
  font-size: 1.5vmin;
  border-radius: 2vmin;
}
.game-results
  > .results-container
  > .content
  > .left
  > .player-final-xp
  > span:first-child {
  color: #ffd395;
  text-shadow: 0 0 0.5vmin #740000, 0 0 1vmin #ff0000;
}
.game-results
  > .results-container
  > .content
  > .left
  > .player-final-xp
  > span:last-child {
  text-shadow: 0 0 0.5vmin #ff9d00, 0 0 0.5vmin #ff7d00;
  color: #e4d7ac;
  font-family: var(--Roboto-Mono);
}
.game-results > .results-container > .content > .left > .player-country-rank {
  width: 75%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.game-results
  > .results-container
  > .content
  > .left
  > .player-country-rank
  > span:first-child {
  color: #ffb161;
  text-shadow: 0 0 0.3vmin #501a00, 0 0 0.3vmin #501a00, 0 0 0.3vmin #501a00,
    0 0 0.3vmin #501a00, 0 0 0.3vmin #501a00, 0.2vmin 0.2vmin 0.2vmin #0000009c;
}
.game-results
  > .results-container
  > .content
  > .left
  > .player-country-rank
  > .country-rank-details {
  width: 100%;
  background: #341d07;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 2% 4.5% 2% 12%;
  color: #c9bd91;
  font-size: 1.5vmin;
  border-radius: 2vmin;
}
.game-results
  > .results-container
  > .content
  > .left
  > .player-country-rank
  > .country-rank-details
  > span:last-child {
  text-shadow: 0 0 0.5vmin #ff9d00, 0 0 0.5vmin #ff7d00;
  color: #e4d7ac;
  font-family: var(--Roboto-Mono);
}
.game-results
  > .results-container
  > .content
  > .left
  > .points-details-container
  > .points-details {
  width: 100%;
  background: #341d07;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 1% 4.5% 1% 12%;
  color: #c9bd91;
  font-size: 1.5vmin;
  border-radius: 1.5vmin;
}
.game-results
  > .results-container
  > .content
  > .left
  > .points-details-container
  > .points-details
  > span:first-child {
  text-shadow: 0.2vmin 0.2vmin 0.1vmin #000;
  color: #e4d7ac;
}
.game-results
  > .results-container
  > .content
  > .left
  > .points-details-container
  > .points-details
  > span:last-child {
  font-family: var(--Roboto-Mono);
  color: #ffffc5;
  text-shadow: 0 0 1vmin #ff6900, 0 0 1vmin #ff0000;
}
.game-results > .results-container > .footer {
  height: 13%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  transition: 1s;
  align-items: center;
  border: solid 0.5vmin #271705;
  background-color: #87664c;
}
/* sss */
.results-container > .footer > .progress-con {
  width: 80%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  opacity: 0;
  transition: 0.5s;
}
.results-container > .footer > .progress-con.show {
  opacity: 1;
}
.results-container > .footer > .progress-con > .lvl-and-progress {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.results-container > .footer > .progress-con > .accept-btn-con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.results-container > .footer > .progress-con > .accept-btn-con > button {
  width: 34%;
  height: auto;
  aspect-ratio: 16 / 4;
  background-color: transparent;
  font-family: inherit;
  border: none;
  font-size: clamp(0.5rem, 2vmin, 2rem);
  border-radius: 7px;
  background-image: url(../images/plank.png);
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: wheat;
}
.results-container > .footer > .progress-con > .accept-btn-con > button:active {
  transform: scale(0.9);
}
.results-container > .footer > .progress-con > .accept-btn-con > button:hover {
  filter: brightness(1.1);
}
.results-container > .footer > .progress-con > .text-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.results-container > .footer > .progress-con > .text-area > span {
  color: #464646;
}
.results-container > .footer > .progress-con > .lvl-and-progress > .player-lvl {
  height: 100%;
  aspect-ratio: 1;
  background: linear-gradient(#575757 1%, #000000 71%, #595959);
  font-weight: bold;
  border: 2px solid #5f5f5f;
  border-radius: clamp(2px, 5px, 10px);
  font-family: cursive;
  display: flex;
  text-shadow: 0 0 5px #000;
  color: #ffd100;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 1%;
}

.results-container
  > .footer
  > .progress-con
  > .lvl-and-progress
  > .progress-bar-con {
  width: 70%;
  height: 70%;
  background-color: #484848;
  box-shadow: inset 0 0 10px #00000054;
  background-image: radial-gradient(#000000 1px, transparent 1px);
  background-size: 4% 40%;
  position: relative;
}
.results-container
  > .footer
  > .progress-con
  > .lvl-and-progress
  > .level-up-req {
  margin-right: 8px;
}
.results-container
  > .footer
  > .progress-con
  > .lvl-and-progress
  > .level-up-req
  > span {
  font-family: cursive;
  color: #414141;
  font-size: 17px;
}
.results-container
  > .footer
  > .progress-con
  > .lvl-and-progress
  > .progress-bar-con
  > span {
  position: absolute;
  top: 40%;
  left: 7%;
  font-family: cursive;
  transform: translate(-50%, -50%);
  color: white;
  text-shadow: 0 0 5px #000;

  z-index: 1;
}
.results-container
  > .footer
  > .progress-con
  > .lvl-and-progress
  > .progress-bar-con
  > .player-progress {
  width: 0;
  background: linear-gradient(#ffcc00 1%, #c85 36%, #ffee00);
  height: 100%;
  border-radius: 15px;
  border-radius: 10px 0 0 10px;
  transition: 1s;
  position: relative;
}
.results-container
  > .footer
  > .progress-con
  > .lvl-and-progress
  > .progress-bar-con
  > .player-progress
  > label {
  position: absolute;
  font-family: cursive;

  font-weight: bold;
  left: 0px;
  top: -100%;
  color: #464646;
  transform: translate(-50%, -50%);
}
.results-container
  > .footer
  > .progress-con
  > .lvl-and-progress
  > .progress-bar-con
  > .player-progress
  > label::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border-left: 5px solid transparent;
  border-top: 10px solid #a96f34;
  border-radius: 4px;
  border-right: 5px solid transparent;
  bottom: -65%;
  transform: translate(-50%, -50%);
  left: 50%;
}
/* eee */
.game-results > .results-container > .footer.expand {
  height: 42%;
}

.game-results > .results-container > .content > .ranks > .player-place {
  width: 17%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.game-results > .results-container > .content > .ranks > .player-place.first {
  height: 100%;
}
.game-results > .results-container > .content > .ranks > .player-place.second {
  height: 91%;
}
.game-results > .results-container > .content > .ranks > .player-place.third {
  height: 85%;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  .results-profile-image {
  width: 85%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: clamp(5px, 8px, 15px);
  border: solid clamp(1px, 2px, 3px);
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  .results-profile-image.red {
  border-color: #db5b56;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  .results-profile-image.green {
  border-color: #50722a;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  .results-profile-image.blue {
  border-color: #30588c;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .place {
  border: solid #000 clamp(1px, 2px, 3px);
  width: 100%;
  overflow: hidden;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .place
  > .head {
  height: 20%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .place
  > .head
  > span {
  color: wheat;

  font-weight: 800;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .place
  > .body {
  height: 80%;
  width: 100%;
  background: wheat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .place
  > .body
  > img {
  height: 65%;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .first {
  height: 70%;
  border-radius: 10px 10px 0 0;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .third {
  height: 52%;
  aspect-ratio: 93 / 121;
  border-radius: 0 10px 0 0;
  border-left: none;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .second {
  height: 57%;
  aspect-ratio: 93 / 121;
  border-radius: 10px 0 0 0;
  border-right: none;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .place.red
  > .head {
  background-color: #db5b56;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .place.blue
  > .head {
  background-color: #30588c;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .place.second
  > .head {
  box-shadow: inset -5px 0 0 #0000002b;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .place.green
  > .head {
  background-color: #50722a;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .place.third
  > .head {
  box-shadow: inset 5px 0 0 #00000052;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .place.first
  > .body {
  height: 100%;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .place.second
  > .body {
  box-shadow: inset -5px 0 0 #0000002b;
}
.game-results
  > .results-container
  > .content
  > .ranks
  > .player-place
  > .place.third
  > .body {
  box-shadow: inset 5px 0 0 #00000052;
}

.wait-owner-p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 52%;
  gap: 1%;
  font-size: clamp(0.5rem, 1.5vmin, 2rem);
  background-color: #b5764d;
  border-radius: clamp(10px, 15px, 20px);
  color: #fff2da;
  white-space: nowrap;
  padding: 1% 0%;
}
.on-lobby-profile-ready {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f9cf95;
  font-size: clamp(0.5rem, 5vmin, 3rem);
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.floating-sign {
  position: absolute;
  top: 8%;
  left: 46%;
  color: #f9cf95;
  z-index: 100;
  width: 23%;
  height: 12.8%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0.05em 0.1em #f3d9bc, 0 0 0.5em #000;
  align-items: center;
  justify-content: center;
  background-image: url(../images/signs/floating-sign.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: "Lalezar", system-ui;
}

.floating-sign.choose-area {
  background-image: url(../images/signs/choose-area.png) !important;
}
.floating-sign.choose-area > .choose-area-timer-con {
  width: 85%;
  background: #fff;
  margin-top: 13%;
  display: flex;
  padding: 2%;
  height: 30%;
  box-shadow: 0 0 0 1px #000, inset 1px 1px #000;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
}
.floating-sign.choose-area > .choose-area-timer-con > .choose-area-bar {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  transition: 0.3s;
}
.floating-sign.choose-area > .choose-area-timer-con > .choose-area-bar.red {
  background: #e42c2c;
}
.floating-sign.choose-area > .choose-area-timer-con > .choose-area-bar.green {
  background: #59b60d;
}
.floating-sign.choose-area > .choose-area-timer-con > .choose-area-bar.blue {
  background: #2c6ce4;
}
.floating-sign.player-turn {
  animation: upDown 2s ease-in-out infinite;
}
.floating-sign.player-turn > .player-turn-con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: clamp(0.5rem, 2.5vmin, 3rem);
}

.floating-sign.player-turn > .player-turn-con > .name-turn {
  font-family: "Lalezar", system-ui;
  color: #fff;
  text-shadow: 0 1px 1px #000;
}
.floating-sign.player-turn > .player-turn-con > .hour-glass {
  font-size: clamp(0.5rem, 2.5vmin, 3rem);
  color: #fff;
}
@keyframes upDown {
  0% {
    transform: translate(0, 0); /* Start position */
  }
  50% {
    transform: translate(0, -20%); /* Upward position */
  }
  100% {
    transform: translate(0, 0); /* Back to start */
  }
}
.no-transition {
  transition: none !important;
}
.turnName {
  text-shadow: 0 0 1px #f3d9bc, 0 0 1px #f3d9bc, 0 0 1px #f3d9bc,
    0 0 1px #f3d9bc, 0 0 1px #f3d9bc, 0 0 1px #f3d9bc, 0 0 1px #f3d9bc,
    0 0 1px #f3d9bc, 0 0 1px #f3d9bc, 0 0 1px #f3d9bc, 0 0 1px #f3d9bc,
    0 0 1px #f3d9bc, 0 0 1px #f3d9bc, 0 0 1px #f3d9bc, 0 0 1px #f3d9bc,
    0 0 1px #f3d9bc, 0 0 1px #f3d9bc, 0 0 1px #f3d9bc, 0 0 1px #f3d9bc,
    0 0 1px #f3d9bc, 0 0 1px #f3d9bc, 0 0 1px #f3d9bc, 0 0 1px #f3d9bc,
    0 0 1px #f3d9bc, 1px 1px 2px #000;
}
.turnName.red {
  color: #bd3f3a;
}
.turnName.green {
  color: #57971e;
}
.turnName.blue {
  color: #4388ad;
}
/* HTML: <div class="loader"></div> */
.banners-loader {
  width: 15px;
  aspect-ratio: 1;
  background: #000;
  border-radius: 50%;
  animation: l6 1s infinite linear alternate;
}
.in-game-nav {
  width: 100%;
  height: 12svh;
  background: #221201;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.main-nav {
  width: 100%;
  height: 12svh;
  background: #221201;
  padding: 0% 2%;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
.main-nav > div {
  height: 100%;
}
.main-nav > div:nth-child(1) {
  width: 20%;
}

.main-nav > div:nth-child(2) {
  width: 10%;
}
.main-nav > div:nth-child(3) {
  width: 40%;
}
.main-nav > div:nth-child(4) {
  font-size: 2rem;
  color: #ebe6c1;
  width: 30%;
  gap: 1rem;
  flex-direction: row;
}
#navMenuBtn {
  position: relative;
}
#navMenuBtn.focus {
  color: #ff952c;
}

.main-nav > .player-banner {
  gap: 7%;
}
.main-nav > .player-banner > .profile-details {
  color: #ebe6c1;
  height: 80%;
  font-family: var(--Rubik);
  width: calc(100% - 100px);
  white-space: nowrap;
  font-size: clamp(0.5rem, 1.4vmin, 3rem);
}

.main-nav > .player-banner > .profile-picture {
  height: 70%;
  aspect-ratio: 1 / 1;
  position: relative;
  object-fit: none;
}
.main-nav > .player-banner > .profile-picture img {
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.main-nav > .title {
  flex-direction: column;
}

.main-nav > .title > h1 {
  color: #ffd100;
  text-shadow: 0px 2px #a74500, 0px 5px 5px #000;
  position: relative;
  height: 50%;
  font-size: clamp(1rem, 5vmin, 4rem);
  transition: 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--Rubik);
}
.main-nav > .title > h1:hover {
  text-shadow: 0px 2px #a74500, 0px 5px 5px #000, 0 0 2rem #ffd100;
}
.main-nav > .title > .test-version {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  text-shadow: 0px 1px #6f6f6f, 0 2px #000;
  font-size: clamp(1rem, 2vmin, 3rem);
  font-family: var(--Rubik), Arial, sans-serif;
  transition: 0.3s;
  height: 25%;
}
.main-nav > .title > .test-version:hover {
  text-shadow: 0px 2px #a74500, 0px 5px 5px #000, 0 0 1rem #fff;
}

.main-nav > .title > h1:hover ~ .test-version {
  text-shadow: 0px 2px #a74500, 0px 5px 5px #000, 0 0 1rem #ffd100;
}
.soon-button {
  position: relative;
}
#gameMain > .locations > .in-game-nav {
  height: 5svh;
  position: relative;
  width: 100%;
}
#gameMain > .locations > .in-game-nav > h1 {
  color: #ffd100;
  text-shadow: 0px 0.2vmin #a74500, 0px 0.4vmin 0.4vmin #000;
  position: relative;
  font-size: clamp(0.5rem, 2.5vmin, 3rem);
  transition: 0.3s;
}
#gameMain > .locations > .in-game-nav > h1:hover {
  text-shadow: 0px 2px #a74500, 0px 5px 5px #000, 0 0 1.5rem #ffd100;
}
#gameMain > .locations > .in-game-nav > h1::before {
  display: none;
}
.server-time {
  gap: 5px;
}
.nav-menu-button {
  position: relative;
}
.nav-menu {
  position: absolute;
    top: 100%;
    left: 10%;
    height: calc(5 * 50px + 2px);
    width: 80%;
    font-size: 20px;
    z-index: 10;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    border-radius: 0 0 1vmin 1vmin;
    font-family: var(--Rubik);
    box-shadow: 0 0.5vmin 0px #3a2b1f;
    backdrop-filter: blur(4px);
    background: #33291fcf;
}
.nav-menu > div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  
}.nav-menu > div >span{
position: relative;
  
}

.nav-menu > div:nth-last-child(1) {
  border-radius: 0 0 0.5vmin 0.5vmin;
}
.nav-menu > div:hover {
    color: #51341c;
    background-color: #ffab0f;
}
.ship-room-content > .player-profile-con {
  position: fixed;

  flex-direction: column;
  justify-content: start;
  width: 40%;
  height: 60%;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: #000;
  font-family: var(--Rubik);
}

.ship-room-content > .player-profile-con > .profile-picture-con {
  height: 30%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #87664c;
  border: solid 4px #3a2b1f;
  gap: 5px;
}
.ship-room-content > .player-profile-con > .profile-picture-con > .img {
  height: 55%;
  aspect-ratio: 1;
  border: solid #ebe6c1 clamp(1px, 2px, 3px);
  border-radius: clamp(5px, 10px, 15px);
  overflow: hidden;
  background: #ebe6c1;
}
.ship-room-content > .player-profile-con > .profile-picture-con > .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ship-room-content > .player-profile-con > .profile-content {
  height: 70%;
  width: 96%;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 3%;
  overflow-y: auto;
  padding: 2% 1%;
}
.ship-room-content
  > .player-profile-con
  > .profile-content
  > .profile-content-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  border-bottom: 1px solid #c5c1a2;
  font-size: clamp(1rem, 2vmin, 3rem);
  width: 100%;
}

.ship-room-content
  > .player-profile-con
  > .profile-content
  > .profile-content-field
  > .profile-label-and-input {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 1%;
  width: 100%;
}
.ship-room-content
  > .player-profile-con
  > .profile-content
  > .profile-content-field
  > .profile-label-and-input
  > label {
  width: 30%;
}
.ship-room-content
  > .player-profile-con
  > .profile-content
  > .profile-content-field
  > .profile-label-and-input
  > label {
  width: 40%;
}
.ship-room-content
  > .player-profile-con
  > .profile-content
  > .profile-content-field
  > .profile-label-and-input
  > .label {
  width: 30%;
}
.ship-room-content
  > .player-profile-con
  > .profile-content
  > .profile-content-field
  > .profile-label-and-input
  > .eye {
  color: #87664c;
}
.ship-room-content
  > .player-profile-con
  > .profile-content
  > .profile-content-field
  > span {
  font-size: 13px;
  min-height: 25px;
}
#editProfilePicture {
  font-size: 1rem;
  color: #ebe6c1;
}
.save-profile {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 15%;
}
.save-profile > .saved-note {
  transition: 0.5s;
  opacity: 0;
  color: green;
  font-size: clamp(1rem, 2vmin, 2rem);
}
.save-profile > .saved-note.show {
  opacity: 1;
}
.player-profile-con > .exit-profile {
  position: absolute;
  top: 2%;
  right: 2%;
  color: #ebe6c1;
  font-size: 30px;
}
.edit-profile-picture-note {
  font-size: 14px;

  color: #ffcaca;
  text-shadow: 1px 1px #000;
}
.profile-edit-notes {
  color: #ff1717;
}
.warning-note {
  color: #d85000;
}
.redeem-code-con {
  position: fixed;

  flex-direction: column;
  justify-content: start;
  width: 40%;
  height: 40%;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: #000;
  font-family: var(--Rubik);
}
.redeem-code-con > .header {
  height: 20%;
  width: 100%;
  border: solid 4px #3a2b1f;
  background-color: #87664c;
}
.redeem-code-con > .header > span {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
}
.redeem-code-con > .content {
  height: 70%;
  width: 95%;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  gap: 10px;
}
.redeem-code-con > .content > span:first-child {
  color: #221201;

  font-size: 0.6em;
}
.game-lobby-input {
  width: 50%;
  outline: none;
  height: 35px;
  border-radius: 5px;
  font-family: var(--Rubik);
  font-size: 15px;
  color: #221201;
  padding: 0 5px;
  border: solid 1px #adadad;
  box-shadow: inset 1px 1px 4px 1px #00000033;
  clear: right;
}
.game-lobby-input.h-50 {
  height: 50px;
}
#exitRedeemBtn {
  position: absolute;
  top: 2%;
  right: 4%;
  color: #ebe6c1;
}
.redeem-code-note {
  font-size: 0.6em;
}
.redeem-code-note.red {
  color: red;
}
.redeem-code-note.green {
  color: green;
}
.suggest-question-note {
  font-size: 0.6em;
  transition: 0.3s;
  opacity: 0;
}
.suggest-question-note.show {
  opacity: 1;
}
.suggest-question-note.red {
  color: red;
}
.suggest-question-note.green {
  color: green;
}
.lobby-button {
  background: #dbd6b3;
  border-radius: 5px;
  font-size: 1rem;
  font-family: var(--Rubik);
  box-shadow: 0 4px 0px #3a2b1f;
  border: 2px #3a2b1f solid;
  color: #3a2a1f;
  aspect-ratio: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 2.5rem;
  padding: 1rem;
}
.lobby-button.small {
  font-size: 1.2rem;
  padding: 0;
   will-change: filter;
}
.lobby-button.small img {
  height: 80%;
}
.lobby-button.small.exit {
  background: #b50000;
  color: var(--milk-color);
}
.lobby-button.small.add-friend {
  background: #4f8cb3;
}
.lobby-button.small.world,
.lobby-button.small.friends {
  background: #d9a14a;
}


.lobby-button.small.add-friend:hover {
  color: var(--dark-brown);
}
.lobby-button.small.add-friend:active {
  color: var(--dark-brown);
}

.lobby-button.small:active {
  filter: brightness(0.8);
}
.lobby-button:not(.small):hover {
  background: #87664c;
  color: #ebe6c1;
  text-shadow: 1px 1px 0px #000;
}
.lobby-button.small:hover {
  filter: brightness(1.1);
  
}
.lobby-button.small:active {
  filter: brightness(0.9);
  
}
.lobby-button:active {
  box-shadow: 0 0;
  transform: translateY(5px);
 
}

.nav-nofs-button {
  position: relative;
  font-size: 40px;
  color: #ebe6c1;
}
#navNotificationsButton.focus {
  color: #ff952c;
}
.nav-nofs-con {
  position: absolute;
  top: 100%;
  width: 26svw;
  font-size: 20px;
  z-index: 10;
  background: #ebe6c1;
  flex-direction: column;
  max-height: 400px;
  min-height: 200px;
  justify-content: start;
  box-shadow: 0 4px 0px #3a2b1f;
  align-items: center;
  border: solid 4px #3a2b1f;
  font-family: var(--Rubik);
  border-radius: 0 0 10px 10px;
  color: #ebe6c1;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 80svh;
}
.nav-nofs-con > .notification-li {
  background: #87664c;
  width: 100%;
  padding: 5px;
  border-bottom: 1px solid #fff;
  font-size: 0.8em;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  min-height: fit-content;
  white-space: normal;
  height: fit-content;
}
.nav-nofs-con > .notification-li > span {
  height: 100%;
  width: 100%;
}
.nav-nofs-con > .notification-li > span img {
  height: 13px;
}
.nav-nofs-con > .notification-li:last-child {
  border-bottom: none;
}
.nav-nofs-con > .notification-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 50px;
  justify-content: center;
  align-items: center;
  color: #221201;
}
/* Scrollbar width */
::-webkit-scrollbar {
  width: 11px;
}

/* Track: the background of the scrollbar */
::-webkit-scrollbar-track {
  background: #a8967f;
}

/* Scrollbar thumb: the draggable part */
::-webkit-scrollbar-thumb {
  border-right: 5px solid #0000001c;
  background: #ffb500;
  border-radius: 5px;
}

/* Hover effect on the thumb */
::-webkit-scrollbar-thumb:hover {
  background: #ffa600;
}

::-webkit-scrollbar-thumb:horizontal {
  border-right: none;
  border-bottom: 9px solid #0000001c;
  background: #ffb500;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:horizontal:hover {
  background: #ffa600;
}
.c-gold {
  color: #ffcf00;
}
.c-brown {
  color: #221201;
}
.bx-world-con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 2.5rem;
}
.bx-world-con > .nav-notification-counter {
  width: 25px;
  height: 25px;
  background-color: #a74500;
  color: #ebe6c1;
  border-radius: 50%;
  position: absolute;
  bottom: -4px;
  box-shadow: 0 0 0 5px #221201;
  right: -14px;
  display: flex;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  font-family: var(--Bricolage-Grotesque);
}
.bx-world-con > .nav-notification-counter > span {
  font-family: var(--Rubik);
}
.lobby-helping-buttons-con {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
}
.lobby-helping-buttons-con > .lobby-helping-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin-top: -4%;
  background-color: #dbd6b3;
  border-radius: clamp(5px, 10px, 10px);
  width: 10%;
  position: relative;
  aspect-ratio: 80 / 100;
}
.lobby-helping-buttons-con > .lobby-helping-button > .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: #dbd6b3;
  left: 0;
  border-radius: clamp(5px, 10px, 10px);
  box-shadow: 0 0 0 3px #00000033, inset 0 0 0 4px #00000014;
}
.lobby-helping-buttons-con > .lobby-helping-button > .claim {
  z-index: 2;
  width: 80%;
  height: 40%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-shadow: 1px 1px 0 #000;
  background: linear-gradient(to bottom, #70a45c 47%, #0b5800 20%, #5bac00 97%);
  border: solid #a7ff00 1px;
}
.lobby-helping-buttons-con > .lobby-helping-button > .claim:hover {
  filter: brightness(1.1);
}
.lobby-helping-buttons-con > .lobby-helping-button > .claim:active {
  transform: scale(0.9);
}
.lobby-helping-buttons-con > .lobby-helping-button > .claim > span {
  color: white;
  color: white;
  font-size: clamp(0.3rem, 2vmin, 2rem);
  font-family: var(--Rubik);
  height: 76%;
  width: 76%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.lobby-helping-buttons-con > .lobby-helping-button > .content > img {
  width: 80%;
  height: auto;
  filter: drop-shadow(1px 2px 0px #00000080);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.lobby-helping-buttons-con > .lobby-helping-button > .content > .count {
  width: 60%;
  height: 31%;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #221201;
  background: #ebe6c1;
  font-family: var(--Bricolage-Grotesque);
  bottom: -14%;
  font-weight: bold;
  color: #5e432d;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  font-size: clamp(0.6rem, 2.1vmin, 3rem);
  min-width: fit-content;
}
.right.sidebar > .content > .mid-content {
  overflow-y: auto;
  overflow-x: hidden;
}
.right.sidebar > .content > .mid-content > .content {
  height: 100%;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  position: relative;
}
.right.sidebar > .content > .mid-content > .content > .no-friends {
  font-size: 0.7em;
  color: #aba996;
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.right.sidebar > .content > .mid-content > .content > .friend-li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px;
  min-height: 80px;

  max-height: 80px;
  gap: 5%;
  border-bottom: 1px solid #948f68;
  font-family: var(--Rubik);
}
.right.sidebar > .content > .mid-content > .content > .friend-li:hover {
  background: #87664c;
  color: #ebe6c1;
  text-shadow: 1px 1px 0px #000;
}
.right.sidebar > .content > .mid-content > .content > .friend-li:last-child {
  border-bottom: none;
}
.right.sidebar > .content > .mid-content > .content > .friend-li > .right {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 1;
  height: 100%;
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .friend-li
  > .right
  > .img {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  height: 100%;
  position: relative;
  aspect-ratio: 1;
}.right.sidebar
  > .content
  > .mid-content
  > .content
  > .friend-li
  > .right
  > .img.circular{
      height: 80%;
    margin-top: 0.5rem;
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .friend-li
  > .right
  > .img
  > img {
  width: 86%;

  object-fit: cover;

  height: 83%;
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .friend-li
  > .right
  > .img
  > .lobby-frame {
  background: none;
  position: absolute;
  border: none;
  width: 130%;
  z-index: 1;
  height: 100%;
  aspect-ratio: 1;
  object-fit: fill;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.small-btn-counter {
      flex-direction: column;
    width: 1rem;
    aspect-ratio: 1;
    position: absolute;
    top: 0%;
    left: -20%;
    transform: translateY(-50%);
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.4rem;
    background-color: #a74500;
    color: #ebe6c1;
    border-radius: 50%;
    box-shadow: 0 0 0 0.2vmin #221201;
    display: flex
;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    font-family: var(--Bricolage-Grotesque);
    font-weight: bold;
    pointer-events: none;
    z-index: 2;
    line-height: 1;
    white-space: nowrap;
}

.right.sidebar > .content > .mid-content > .content > .friend-li > .left {
  width: 75%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 3px;
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .friend-li
  > .left.non-seen {
  font-weight: bold;
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .friend-li
  > .left
  > .name {
  
  font-size: 0.7em;
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .friend-li
  > .left
  > .status-con {
  display: flex;
  flex-direction: row;
  gap: 5px;
  justify-content: start;
  align-items: center;
}

.right.sidebar
  > .content
  > .mid-content
  > .content
  > .friend-li
  > .left
  > .status-con
  > .status {

  font-size: clamp(0.8rem, 2vmin, 2rem);
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .friend-li
  > .left
  > .status-con
  > .status.online {
  color: #408100;
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .friend-li
  > .left
  > .status-con
  > .status.playing {
  color: #009ccf;
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .friend-li
  > .left
  > .status-con
  > .status-icon {
  height: 15px;
  width: 15px;

  border-radius: 50%;
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .friend-li
  > .left
  > .status-con
  > .status-icon.offline {
  background-color: #6a6a6a;
  border: 1px solid #ebe6c1;
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .friend-li
  > .left
  > .status-con
  > .status-icon.online {
  background-color: #58b100;
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .friend-li
  > .left
  > .status-con
  > .status-icon.playing {
  background-color: #009ccf;
}



.right.sidebar > .content > .mid-content > .content > .messages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 10px;
  overflow-y: auto;
  height: 85%;
  width: 100%;
  white-space: normal;
  box-shadow: inset 0 5px #00000029;
}
.right.sidebar > .content > .mid-content > .content > .messages > .message {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 5px;
  white-space: normal !important;
  word-wrap: break-word;
  position: relative;
}
.right.sidebar > .content > .mid-content > .content > .messages > .message.me {
  align-items: start;
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .messages
  > .message.friend {
  align-items: end;
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .messages
  > .message.me
  > .message-content {
  background-color: #c68c00;
  font-size: 15px;
  width: 80%;
  color: #ffffff;
  padding: 5px;
  border: 1px solid #00000038;
  height: auto;
  white-space: normal !important;
  word-wrap: break-word;
}.right.sidebar
  > .content
  > .mid-content
  > .content
  > .messages
  > .message
  > .message-options {
     position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .messages
  > .message.friend
  > .message-content {
  background-color: #dbd6b3;
  width: 80%;
  font-size: 15px;
  padding: 5px;
  border: 1px solid #00000038;
}
.right.sidebar
  > .content
  > .mid-content
  > .content
  > .messages
  > .message.friend
  > .friend-name {
  font-size: 15px;
}
.right.sidebar > .content > .mid-content > .content > .read-status-con {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 10px;
  padding: 10px;
  height: 10%;
  width: 100%;
  font-family: var(--Rubik);
  font-size: 15px;
}
.right.sidebar > .content > .mid-content > .content > .chat-input-con {
  display: flex;
  flex-direction: row;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  height: 20%;
  background-color: #dbd6b3;
  width: 100%;
  border-top: 2px solid #b3b1a8;
}
.right.sidebar > .content > .mid-content > .content > .chat-input-con > input {
  width: 80%;
}
#lobbyChatInput {
  width: 80%;
  height: 100%;
}
#lobbyChatInput:focus {
  border: 1px solid #221201;
}
#lobbyChatSend {
  width: 20%;
  height: 100%;
  font-family: var(--Rubik);
  border-radius: 5px;
  outline: none;
  background: #ff6e00;
  color: #ffffff;
  text-shadow: 0 2px 1px #000;
  font-size: 15px;
  box-shadow: 0 2px 0px #3a2b1f;
  border: 1px #3a2b1f solid;
}
#lobbyChatSend:hover {
  background: #d15a00;
}
#lobbyChatSend:active {
  box-shadow: none;
  transform: translateY(2px);
}
.back-to-friends-button {
  font-size: 30px !important;
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
}
.back-to-friends-button:active {
  transform: translateY(-40%);
}
.lobby-helping-button > .content > .lock {
  font-size: clamp(1rem, 6vmin, 5rem);
  padding: 0;
  margin: 0;
  height: fit-content;
  color: #5e432d;
  filter: drop-shadow(1px 1px 0px #000000);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.telescope-options-con {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: end;
  height: 100%;
  width: 100%;
}
.telescope-options-con > .telescope-option {
  width: 85%;
  height: calc(100% / 4 - 5px);
  border-radius: clamp(2px, 5px, 7px);
  text-shadow: 0px 1px 2px #fff;
  font-size: clamp(0.5rem, 4vmin, 3rem);
  font-weight: bold;
  font-family: var(--Tajawal);
  display: flex;
  border: 1px solid #aa6f3f;
  background-color: wheat;
  box-shadow: inset -5px -5px 3px #854a218a, inset 5px 5px 3px white;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #71431e;
}
.target-percentage {
  height: 100%;
  background-color: #ff9100;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;

  padding: 0 5px 0 0;
}
.target-percentage > span {
  color: rgb(77, 52, 5);

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: 800;

  text-shadow: 0px 1px 1px #fff;
}
.in-game-chat-con {
  position: absolute;
  background-color: #ceb27e;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  height: 7%;
  width: 22%;
  top: 2%;
  right: 1.3%;
  padding: 0.3%;
  z-index: 53;

  max-height: 50%;
      font-size: clamp(0.5rem, 2vmin, 1.5rem);
}

.in-game-chat-con > .header {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  gap: 2px;
  width: 100%;
  height: 100%;
}

.in-game-chat-con > .header > input {
  width: 76%;
  height: 100%;
  padding: 5px;
  background: var(--milk-color);
  outline: none;
  border: 1px solid #000;
  font-family: var(--Rubik);
      font-size: inherit;
}
.in-game-chat-con > .header > input.disabled {
  background-color: #b3af96;
}

.in-game-chat-con > .header > .players-chat-btn {
  width: 23%;
  outline: none;
  height: 100%;
  border: 1px solid #000;
  background: #8b6d34;
  font-family: var(--Rubik);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-shadow: 0.1vmin 0.1vmin 0.1vmin #000;
  font-size: inherit;
}
.in-game-chat-con > .header > .players-chat-btn:active {
  transform: scale(0.9);
}
.in-game-chat-con > .header > .players-chat-btn.close {
  background: #bb9c62;
}
.in-game-chat-con > .header > .send-msg-in-game {
  width: 23%;
  outline: none;
  height: 100%;
  border: 0.1vmin solid #000;
  background: #ff8f0f;
  font-family: var(--Rubik);
  color: white;
  text-shadow: 1px 1px 1px #000;
  font-size: clamp(0.5rem, 2vmin, 1rem);
}
.in-game-chat-con > .header > .send-msg-in-game:active {
  background: #d67608;
  transform: scale(0.9);
}

.in-game-chat-con > .footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0px;
  justify-content: start;
  align-items: center;
  position: absolute;
  bottom: -400%;
  right: 0;
  height: 0%;
  font-size: clamp(0.4rem, 1.5vmin, 3rem);
}

.in-game-chat-con > .footer > .players-chat-con {
  width: 100%;
  height: 100%;
  padding: 2%;
  background: var(--milk-color);
  outline: none;
  border: 1px solid #000;
  font-family: var(--Rubik);
  overflow-y: auto;
}
.in-game-chat-con > .footer.show {
  height: 400%;
}
.player-message-con {
  position: absolute;
  background: #f3e2c1;
  color: #000000;
  width: 64%;
  height: auto;
  max-height: 100%;
  z-index: 70;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  font-size: 1em;
  overflow: hidden;
  border-radius: 7px 0 7px 7px;
  border: 2px solid #000000;
  padding: 5px;
  font-weight: bold;
}
.player-message-con > p {
  overflow: hidden;
  max-height: 100%;
  text-overflow: ellipsis;
  height: 100%;
}
.player-message {
  width: 100%;
  background: #e8dab0;
  padding: 5px;
  border-bottom: 1px solid #00000030;
  white-space: normal !important;
  word-wrap: break-word;
}
.player-message > .header > .player-name.red {
  font-weight: bold;
  color: #ff4646;
  text-shadow: 0px 1px 0px #000;
}
.player-message > .header > .player-name.green {
  font-weight: bold;
  color: #66a90a;
  text-shadow: 0px 1px 0px #000;
}
.player-message > .header > .player-name.blue {
  font-weight: bold;
  color: #0c7eb0;
  text-shadow: 0px 1px 0px #000;
}
.loading-dots::after {
  content: "";
  animation: blink 1.5s infinite step-start;
}

@keyframes blink {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: "";
  }
}
#playRandomGameBtn.searching > img:first-child {
  opacity: 0;
}
#playRandomGameBtn.searching > .title {
  font-size: 0.6em;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100%;
  border-radius: 8px;
  color: #000000;
  padding: 2px;
}
#playRandomGameBtn.searching:hover .title {
  color: var(--milk-color);
}
#playRandomGameBtn > .cancel-searching {
  font-size: 0.6em;
  font-family: inherit;
  padding: 0 5px;
  width: 50%;
  height: 20%;
  background: #d64242;
  border: none;
  color: #ebe6c1;
  border-radius: 5px;
}
.header .class-types {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50%;

  gap: 2%;
}
.header .class-types > .type {
  width: 40%;
  height: 80%;
  border: none;
  color: #87664c;
  border-radius: 5px;
  font-size: 0.6em;
  display: flex;
  flex-direction: row;
  padding: 17px 0;
  justify-content: center;
  align-items: center;
}
.header .class-types > .type.active {
  background: #87664c;
  color: #ebe6c1;
  font-weight: bold;
}
.best-3-players {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.best-3-players > .player-badge {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.best-3-players > .player-badge > .profile-pic {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.best-3-players > .player-badge > .profile-pic > .frame-image {
  width: 100%;
  height: 100%;
}
.best-3-players > .player-badge.first > .profile-pic {
  width: 100%;
  margin-top: -30%;
}

.best-3-players > .player-badge > .profile-pic > span {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    z-index: 1;
    display: flex
;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #00000075, 0px 3px 0 #000;
    font-weight: bold;
    font-family: var(--Rubik);
    color: #ffffff;
}

.best-3-players > .player-badge.first > .profile-pic > .profile-pic-img {
    position: absolute;
    top: 57%;
    left: 51%;
    width: 52%;
    height: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    object-fit: cover;
}
.best-3-players > .player-badge.second > .profile-pic > .profile-pic-img {
      position: absolute;
    top: 57%;
    left: 51%;
    width: 54%;
    height: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    object-fit: cover;
}
.best-3-players > .player-badge.third > .profile-pic > .profile-pic-img {
      position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    object-fit: cover;
    top: 57%;
    left: 51%;
    width: 53.6%;
    height: 51%;
}
.best-3-players > .player-badge > .profile-details {
  font-size: 0.6em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.best-3-players > .player-badge > .profile-details > span {
  height: 1.2em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.best-3-players > .player-badge > .profile-details > .name {
  font-weight: bold;
  text-shadow: 1px 1px 0 #ffffff66;
}
.best-3-players > .player-badge.first > .profile-details > .name {
  color: #f4af36;
}
.best-3-players > .player-badge.second > .profile-details > .name {
  color: #6b6b6b;
}
.best-3-players > .player-badge.third > .profile-details > .name {
  color: #b27011;
}
.best-3-players > .player-badge > .profile-details > .level {
  font-family: var(--Rubik);

  padding: 0 5px;
  border-radius: 10px;
  color: white;
}
.best-3-players > .player-badge.first > .profile-details > .level {
  background: #f4ae34;
}
.best-3-players > .player-badge.second > .profile-details > .level {
  background: #6b6b6b;
}
.best-3-players > .player-badge.third > .profile-details > .level {
  background: #b27011;
}
.best-3-players > .player-badge > .profile-details > .points {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2px;
}
.best-3-players > .player-badge > .profile-details > .points > img {
  width: 11px;
  height: 15px;
}
.header .next-update {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50%;
  font-size: 0.6em;
  padding: 0 6%;
}
.rest-best-players {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  width: 100%;
  height: 80px;
  position: relative;
}
.rest-best-players > .player-badge {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 90px;
  border-bottom: 1px solid #0000001a;
  padding: 10px 0;
  gap: 2%;
}
.rest-best-players > .player-badge > .player-rank {
      display: flex
;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: clamp(1.2rem, 2vmin, 3rem);
    color: white;
    text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000, 0px 2px 0 #000;
    font-weight: bold;
    font-family: "Rubik";
    width: 1.5rem;
}
.rest-best-players > .player-badge:last-child {
  border-bottom: none;
}
.rest-best-players > .player-badge > .profile-pic {
  height: 70%;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.rest-best-players > .player-badge > .profile-pic > img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  border: 1px solid #868686;
  object-fit: cover;
}

.rest-best-players > .player-badge > .profile-details {
  width: 75%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}
.rest-best-players > .player-badge > .profile-details > .details {
  width: 65%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 1%;
  font-size: 0.6em;
  overflow: hidden;
}
.rest-best-players > .player-badge > .profile-details > .details > .name {
   
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    color: #b25600;
}
.rest-best-players > .player-badge > .profile-details > .details > .level {
  font-family: var(--Rubik);
  padding: 0 5px;
  border-radius: 10px;
  color: white;
  background: #006fc0;
  font-size: 0.7em;
  position: absolute;
  top: 28%;
  right: 0;
  transform: translate(-50%, -50%);
}
.rest-best-players > .player-badge > .profile-details > .points {
  width: 35%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 3px;
  font-size: 0.6em;
}
.rest-best-players > .player-badge > .profile-details > .points > img {
  width: 11px;
  height: 15px;
}
.rest-best-players > .no-players {
  width: 100%;
  position: absolute;
  top: 125%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.rest-best-players > .no-players > span {
  font-size: 0.6em;
  color: #707070;
}
.ranks-mid-content > .loading-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ebe6c1;
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 5;
}
.ranks-mid-content {
  position: relative;
}
.ranks-mid-content.loading {
  overflow: hidden;
}
.ranks-mid-content.loading > .loading-overlay {
  display: flex;
}
.ranks-mid-content.loading > .loading-overlay > .wheel-spinner {
  filter: sepia(1) saturate(10) hue-rotate(310deg);
  width: 40px;
  height: 40px;
  transform: scale(2);
}
.show-ranks-btn {
  display: none;
}
#exitRankPage {
  display: none;
}
.lobby-button.show-friends-btn {
  display: none;
}


.mid-content-button > .button-name {
  white-space: nowrap;
  color: #000000;
}
.mid-content-button > .button {
     width: 90%;
    height: 3rem;
    background: linear-gradient(to bottom, #07a211 43%, #008100 0);
    box-shadow: inset 0 0 0 3px #008100, inset 0px 2px 0 3px #ffffff8a;
    border: solid #005200 3px;
    display: flex
;
    justify-content: center;
    align-items: center;
    font: 1rem var(--Rubik);
    position: relative;
    color: wheat;
    max-width: 8rem;
}
.mid-content-button > .con-details {
     width: 100%;
    height: 60%;
    display: flex
;
    align-items: center;
    justify-content: right;
    flex-direction: column;
    gap: 4%;
}
.mid-content-button > .con-details > .icon {
  height: 60%;
}
.mid-content-button > .con-details > .icon > img {
  pointer-events: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 11vmin;
  height: 100%;
}
.server-timer-label {
  white-space: nowrap;
}
.player-coins.jewels > .icon > img {
  width: 22px;
}
.wheel-spinner-1 {
  width: 100%;
  height: 100%;
  position: absolute;

  left: 50%;

  top: 50%;
  margin: auto;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.wheel-spinner-1 > .spinner {
  animation: loading 2s linear infinite;
  background-image: url("../images/wheel-spinner.png");
  background-size: 74%; /* Adjust this value to control the image size */
  background-repeat: no-repeat;
  background-position: center;
  width: auto;
  height: 80%;
  aspect-ratio: 1;
}
.wheel-spinner-1 > .check {
  background-image: url("../images/icons/check.png");
  background-size: 74%; /* Adjust this value to control the image size */
  background-repeat: no-repeat;
  background-position: center;
  width: 80%;
  height: 80%;
  filter: hue-rotate(295deg);
}
#sendAnswer {
  border-radius: 10%;
}
.game-main-blur-bg-overlay {
  width: 100svw;
  height: 100svh;
  z-index: 0;
  position: fixed;
  top: 0;
  left: 0;
  background: rgb(0 0 0 / 38%);
  backdrop-filter: blur(8px);
}
.rotate-phone-overlay {
  height: 100svh;
  width: 100svw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: var(--dark-brown);
  color: var(--milk-color);
  font-size: clamp(1rem, 3vmin, 3rem);
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5%;
}
.rotate-phone-overlay img {
  height: 30%;
  width: auto;
}
.invite-friends.board-section {
  font-size: 1em;
  padding: 0% 2%;
  white-space: nowrap;
}
.aw-btn.add-friend-btn {
  font-size: clamp(0.8rem, 2vmin, 2rem);
}
.aw-btn.cancel-friend-btn {
  font-size: clamp(0.8rem, 2vmin, 2rem);
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  .helping-tools.fight {
  height: 65%;
}
.players-online-now {
  height: 40%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 3%;
  white-space: nowrap;
  width: 37%;
}
.players-online-now > .content {
  height: 100%;
  width: 20%;
}
.players-online-now > .content > .icon {
  height: 100%;
  width: 57%;
}
.players-online-now > .content > .icon img {
  height: 64%;
}
#windowLoadingOverlay {
  z-index: 9999;
  height: 100svh;
  width: 100svw;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--dark-brown);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#windowLoadingOverlay > .game-logo {
  width: 25%;
  min-width: 17rem;
  max-width: 30rem;
  height: auto;
  aspect-ratio: 1;
  top: 10%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  color: #ffb80069;
  animation: lighting-logo 3s infinite;
}
#windowLoadingOverlay > .game-logo > img {
  height: 100%;
}
#windowLoadingOverlay > .wheel-spinner-1 > .spinner {
  background-size: 100% auto;
  width: 100%;
  height: 100%;
}
.players-banners > .wheel-spinner-1 {
  width: 10%;
  height: auto;
}
.players-banners > .wheel-spinner-1 > .spinner {
  background-size: 100% auto;
  width: 100%;
  height: 100%;
}
#playRandomGameBtn > .wheel-spinner-1 {
  width: 50%;
  height: 50%;
  transform: translate(-50%, -90%);
  margin: 0;
}
#playRandomGameBtn > .wheel-spinner-1 > .spinner {
  width: 100%;
  height: 100%;
}
.qb-player-profile.big-size > .player-picture {
  width: 60%;
}
.players-banners > .banner:hover .player-options {
  top: 50%;
}

.banner > .player-options {
  width: 89%;
  height: 93%;
  position: absolute;
  transform: translateY(-50%);
  top: -100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: 0.2s;
  z-index: 10;
  gap: 3%;
  background: #dfd4ba;
}
.banner > .player-options > .btn {
  height: 40%;
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0px 0.9em #ffffff3d, inset 0 -0.2em 0.7em #00000047,
    0 0.1em 0.1em #000000b3;
  font-size: clamp(0.5rem, 2vmin, 3rem);
  border-radius: clamp(2px, 1vmin, 10px);
  padding: 1%;
  text-shadow: 1px 1px 0px #000000;
}
.banner > .player-options > .add-player {
  width: 50%;
  background-color: #109ba9;
}
.banner > .player-options > .add-player.cancel {
  background-color: #717171;
}
.banner > .player-options > .add-player.friends {
  background-color: #0064c8;
}
.banner > .player-options > .add-player.accept {
  background-color: #67a910;
}
.banner > .player-options > .mute-player {
  background-color: #ff9400;
  aspect-ratio: 1;
  width: 20%;
}
.banner > .player-options > .report-player {
  background-color: #ed4040;
  aspect-ratio: 1;
  width: 20%;
}
.banner > .player-options > .btn:hover {
  filter: brightness(1.2);
}
.banner > .player-options > .btn:active {
  filter: brightness(0.8);
  transform: translateY(0.2em);
  box-shadow: inset 0px 0.9em #ffffff3d, inset 0 -0.2em 0.7em #00000047;
}
.banner > .player-options > .btn img {
  height: 80%;
}
.report-player-con {
  height: 50%;
  width: 40%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.report-player-con > .header {
  border: solid 4px #271705;
  background-color: #87664c;
  height: 15%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}

.report-player-con > .header > .title {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: clamp(0.5em, 2.7vmin, 3rem);
}



.report-player-con > .body {
  height: 70%;
  width: 95%;
  background: #ebe6c1;
  border-right: solid 4px #3a2b1f;
  box-shadow: inset 0.28em 0px #bb9e83, inset -0.28em 0 #c0a185,
    inset 0.36em 0 #3a2b1f, inset -0.36em 0 #3a2b1f, inset 0 -0.36em 0px #bb9e83,
    inset 0 -0.47em #3a2b1f, 0 0.2em #3a2b1f;
  border-left: solid 4px #3a2b1f;
  padding: 0em 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 5%;
}

.report-player-con > .body > .reason-f {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
}

.report-player-con > .body > .reason-f > .reason-title {
  font-size: clamp(0.4em, 2.5vmin, 3rem);
}

.report-player-con > .body > .reason-f > .reason-select {
  appearance: none;
  cursor: unset;
  width: 60%;
  padding: 0.5em 0.5em;
  border: none;
  outline: none;
  background-color: #87664c;
  color: #ebe6c1;
  font-size: clamp(0.4em, 2vmin, 3rem);
  font-family: inherit;
}

.report-player-con > .body > .reason-f > .reason-select > option:hover {
  background-color: red;
}

.report-player-con > .body > .details-f {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  width: 100%;
}

.report-player-con > .body > .details-f > .details-title {
  font-size: clamp(0.4em, 2.5vmin, 3rem);
}

.report-player-con > .body > .details-f > .details-textarea {
  appearance: none;
  cursor: unset;
  width: 60%;
  padding: 0.5em;
  border: none;
  outline: none;
  background-color: rgb(135, 102, 76);
  color: rgb(235, 230, 193);
  font-size: clamp(0.4em, 2vmin, 3rem);
  font-family: inherit;
  height: auto;
  resize: none;
}
.report-player-con > .body > .details-f > .details-textarea::placeholder {
  color: #ebe6c178;
}
.report-player-con > .body > .send-f {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0.4rem;
}


.report-player-con > .body > .send-f > .report-msg {
  font-size: clamp(0.3em, 1.6vmin, 2vmin);
}
.game-cons-overlay {
  width: 100svw;
  height: 100svh;
  background-color: #0000005c;
  z-index: 9997;
  position: absolute;
  backdrop-filter: blur(5px);
}
.exit-report {
  position: absolute;
  top: 2%;
  right: 2%;
}
.drop-arrow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  position: relative;
  font-size: clamp(0.5rem, 2vmin, 2rem);
}
.user-banner-status > .player-quit {
  color: red;
  text-shadow: 0 1px 0 #fff;
}
#gameMain
  > .locations
  > .game-world-map
  > .world-map
  > .questions-board
  > .board-con
  > .content
  > .middle-side.expand-attackers {
  width: 59.6%;
}
.login-page-overlay {
  position: absolute;
  left: 0;
  right: 0;
  backdrop-filter: blur(7px);
  bottom: 0;
  top: 0;
  background-color: #00000075;
  opacity: 1;
  z-index: 0;
  width: 100%;
  height: 100svh;
  display: flex;
}
#toggleLoginPassword {
  color: #00000080;
}
.g_id_signin iframe {
  width: auto;
  height: auto;
}

/* Ensure button remains clickable */
.g_id_signin {
  pointer-events: auto;
  display: inline-block;
  width: auto;
  height: auto;
  overflow: hidden;
}
.g_id_signin.linked {
  filter: grayscale(1) brightness(0.8);
}
.link-account-btn {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  overflow: hidden;

  position: relative;
}

.linked-span {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  pointer-events: none;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: #ff9700;
  z-index: 1;
  text-shadow: 0px 1px 0 #000;
}
.login-buttons.forgot {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem !important;
}
.login-buttons.forgot > .timer {
  font-size: clamp(0.2rem, 2vmin, 3rem);
  color: #ffffffa8;
  display: flex;
}
.return-to-game-con {
  width: 50%;
  height: 40%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  z-index: 11;
}
.return-to-game-con > .header {
  height: 20%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.return-to-game-con > .body {
  height: 60%;
  width: 95%;
  background: #ebe6c1;
  border-right: solid 4px #3a2b1f;
  box-shadow: inset 7px 0px #bb9e83, inset -7px 0 #c0a185, inset 9px 0 #3a2b1f,
    inset -9px 0 #3a2b1f, inset 0px -7px #c0a185, inset 0px -9px #3a2b1f;
  border-left: solid 4px #3a2b1f;
  border-bottom: solid 4px #3a2b1f;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  font-size: clamp(0.5em, 2.7vmin, 3rem);
  font-family: var(--Rubik);
}

.return-to-game-con > .body > .footer {
  height: 25%;
  width: 95%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2%;
}

.return-to-game-con > .header > .lobby-button {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);

  height: 2.5rem;
  width: 5rem;
  min-width: fit-content;
}


.return-to-game-con > .body > .footer > button {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0px 0.9em #ffffff3d, inset 0 -0.2em 0.7em #00000047,
    0 0.1em 0.1em #000000b3;
  font-size: clamp(0.5rem, 2vmin, 3rem);
  border-radius: clamp(2px, 1vmin, 10px);
  padding: 0.6rem;
  text-shadow: 1px 1px 0px #000000;
  font-family: inherit;
}
.return-to-game-con > .body > .footer > button:hover {
  filter: brightness(1.1);
}
.return-to-game-con > .body > .footer > button:active {
  filter: brightness(0.9);
  transform: translateY(0.1em);
}
.return-to-game-con > .body > .footer > .return {
  background-color: #579b00;
}

.return-to-game-con > .body > .footer > .cancel {
  background-color: #5e5e5e;
}

.game-popup {
  width: 40rem;
  height: 40%;
  position: absolute;
  max-width: 90%;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  z-index: 9998;
}
.game-popup > .header {
  height: 20%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.game-popup > .body {
  height: 60%;
  width: 95%;
  background: #ebe6c1;
  border-right: solid 4px #3a2b1f;
  box-shadow: inset 7px 0px #bb9e83, inset -7px 0 #c0a185, inset 9px 0 #3a2b1f,
    inset -9px 0 #3a2b1f, inset 0px -7px #c0a185, inset 0px -9px #3a2b1f;
  border-left: solid 4px #3a2b1f;
  border-bottom: solid 4px #3a2b1f;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  font-size: clamp(1rem, 2.3vmin, 3rem);
  font-family: var(--Rubik);
  padding: 0.7rem;
}
.game-popup > .body > img {
  height: 40%;
}
.game-out-of-sync-con > .body {
  height: 80%;
}
.game-popup > .body > .footer {
  height: 25%;
  width: 95%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2%;
}

.game-popup > .header > .lobby-button {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
}


.game-popup > .body > .footer > button {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0px 0.9em #ffffff3d, inset 0 -0.2em 0.7em #00000047,
    0 0.1em 0.1em #000000b3;
  font-size: clamp(1rem, 2vmin, 3rem);
  border-radius: clamp(2px, 1vmin, 10px);
  padding: 0.6rem;
  text-shadow: 1px 1px 0px #000000;
  font-family: inherit;
  border: none;
  position: relative;
  height: 2.5rem;
  width: 5rem;
  min-width: fit-content;
}

.game-popup > .body > .footer > button:hover {
  filter: brightness(1.1);
}
.game-popup > .body > .footer > button:active {
  filter: brightness(0.9);
  transform: translateY(0.1em);
}
.exit-game-con > .body > .footer > .quit {
  background-color: #af0000;
}
.report-question-con > .body > .footer > .send {
  background-color: #af5000;
}
.game-popup > .body > .footer > .cancel {
  background-color: #5e5e5e;
}
.game-popup > .body > .footer > .delete {
  background-color: #af0000;
}
.exit-game-btn {
  font-size: clamp(0.3rem, 2vmin, 3rem);
  color: var(--milk-color);
  position: absolute;
  left: 2%;
}
.exit-game-btn:hover {
  color: var(--orange-color);
}
.report-question-btn {
  position: absolute;
  width: 4%;
  height: 6%;
  background: #c15510;
  top: 16%;
  right: 16%;
  border-radius: 0.8vmin;
  border: solid 1px #0000004d;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-shadow: inset 0px 0.7em #ffffff3d, inset 0 -0.2em 0.7em #00000047,
    0 0.1em 0.1em #000000b3;
}
.report-question-btn > img {
  height: 80%;
}
.report-question-btn:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}
.report-question-btn:active {
  transform: scale(0.9);
  filter: brightness(0.9);
}
.timer-text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(0.3rem, 2vmin, 3rem);
  gap: 1%;
  width: 100%;
  color: #ffffff;
  text-shadow: 1px 1px 0 #000;
}
.page-not-found > .content {
  z-index: 1;
  width: auto;
  height: 20rem;
  max-height: 80%;
  color: var(--milk-color);
  background: #00000057;
  padding: 2rem;
  border-radius: 1rem;
  font-size: clamp(0.5rem, 5vmin, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  white-space: nowrap;
}
.privacy-policy-content > .content {
  z-index: 1;
  width: auto;
  height: 90%;
  max-width: 90%;
  max-height: 80%;
  color: var(--milk-color);
  background: #00000057;
  padding: 2rem;
  border-radius: 1rem;
  font-size: clamp(0.5rem, 2vmin, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: start;
  white-space: normal;
  direction: rtl;
  overflow: auto;
}
.page-not-found > .content > img {
  height: 40%;
}
.page-not-found > .content > h1 {
  font-size: clamp(1rem, 3vmin, 3rem);
}
.page-not-found > .content > .text {
  font-size: clamp(0.8rem, 2.5vmin, 3rem);
}
.page-not-found > .content > button {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0px 0.9em #ffffff3d, inset 0 -0.2em 0.7em #00000047,
    0 0.1em 0.1em #000000b3;
  font-size: clamp(1.5rem, 3vmin, 3rem);
  border-radius: clamp(2px, 1vmin, 10px);
  padding: 2%;
  text-shadow: 1px 1px 0px #000000;
  background: #a25900;
  border: navajowhite;
  font-family: "El Messiri";
}
.page-not-found > .content > button:hover {
  filter: brightness(1.1);
}
.page-not-found > .content > button:active {
  filter: brightness(0.9);
  transform: translateY(0.1em);
}
#shipRoom > .ship-room-content > .sidebar > .content > .header > .friend-menu {
    position: absolute;
    top: 100%;
    left: 10%;
    height: calc(1 * 50px + 2px);
    width: 80%;
    font-size: 20px;
    z-index: 10;
    display: flex
;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    font-family: var(--Rubik);
    box-shadow: 0 3px 0px #3a2b1f;
    color: #ebe6c1;
    backdrop-filter: blur(4px);
    background: #33291fcf;
    border-radius: 0 0 1vmin 1vmin;
}
#shipRoom
  > .ship-room-content
  > .sidebar
  > .content
  > .header
  > .friend-menu
  > .friend-option {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-family: var(--Rubik);
  color: #ebe6c1;
}
#shipRoom
  > .ship-room-content
  > .sidebar
  > .content
  > .header
  > .friend-menu
  > .friend-option:hover {
  color: #221201;
  background-color: #ff952c;
}

#shipRoom
  > .ship-room-content
  > .sidebar
  > .content
  > .header
  > .friend-menu
  > .friend-option::after {
     content: "";
    display: block;
    width: 0;
    height: 0;
    margin: 10px auto 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #33291fcf;
    position: absolute;
    top: -39%;
    left: 50%;
    transform: translateX(-50%);
    backdrop-filter: blur(4px);
}
#shipRoom
  > .ship-room-content
  > .sidebar
  > .content
  > .header
  > .friend-menu
  > .friend-option:first-child {
  border-radius: 10px 10px 0 0;
}
#shipRoom
  > .ship-room-content
  > .sidebar
  > .content
  > .header
  > .friend-menu
  > .friend-option:last-child {
  border-radius: 0 0 10px 10px;
}
.not-adjacent-arrow {
  height: 5%;
  position: absolute;
  animation: arrowDownPause 2s ease-in-out infinite;
  z-index: 6;
}
@keyframes arrowDownPause {
  0% {
    transform: translateY(0); /* Default position */
  }
  50% {
    transform: translateY(10%); /* Downward position */
  }
  80% {
    transform: translateY(0); /* Back to default */
  }
  100% {
    transform: translateY(0); /* Pause at default */
  }
}
.flag-points {
  height: 3%;
  width: auto;
  font-size: clamp(0.5rem, 2vmin, 1rem);  
  color: white;
  z-index: 7;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: var(--Rubik);
  font-weight: bold;
  padding: 0% 0.3%;
  border: 1px solid #000;
  box-shadow: inset 0px 0.6em #ffffff42, inset 0 -0.1em 0.7em #00000059;
  text-shadow: 1px 1px 0 #000;
  position: absolute;
  pointer-events: none;
}
.flag-points.inactive {
  filter: brightness(0.4);
}
.flag-points.red {
  background-color: #ab0000;
}
.flag-points.green {
  background-color: #469704;
}
.flag-points.blue {
  background-color: #004eaa;
}
/* /// */
.attacking-needle-points {
  height: 37%;
  width: auto;
  font-size: 1.7vmin;
  color: white;
  z-index: 7;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: var(--Rubik);
  font-weight: bold;
  padding: 0% 5%;
  border: 1px solid #000;
  box-shadow: inset 0px 0.6em #ffffff42, inset 0 -0.1em 0.7em #00000059;
  text-shadow: 1px 1px 0 #000;
  position: absolute;
  pointer-events: none;
  opacity: 0;
  bottom: 0;
  transition: 1s;
}
.attacking-needle-points.active {
  opacity: 1;
}
.attacking-needle-points.inactive {
  filter: brightness(0.4);
}
.attacking-needle-points.red {
  background-color: #ab0000;
}
.attacking-needle-points.green {
  background-color: #469704;
}
.attacking-needle-points.blue {
  background-color: #004eaa;
}
.label-rank {
  height: 40%;
  width: 18%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 1.7vmin;
  position: absolute;
  top: -34%;
  left: 2%;
  opacity: 0;
  transition: 0.3s;
}
.label-rank.red {
  background-color: #922828;
}
.label-rank.green {
  background-color: #4f7d0b;
}
.label-rank.blue {
  background-color: #185c8d;
}
.label-rank.almost {
  border-radius: 50%;
  border: 1px solid var(--milk-color);
}
.label-rank.wrong {
  border-radius: 50%;
  border: 1px solid var(--milk-color);
}
.label-rank > img {
  height: 100%;
}
.label-rank > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.label-rank.show {
  opacity: 1;
}
.line-1 {
  position: absolute;
  fill: transparent;
  transform: translate(14rem, 305rem);
}
.map-line {
  z-index: 8 !important;
  filter: brightness(0.5);
  opacity: 0;
}
.map-line.active {
  filter: brightness(1);
  opacity: 1;
}
.map-line-border {
  z-index: 7 !important;

  opacity: 0;
}
.map-line-border.active {
  opacity: 1;
}
#arrowhead {
  z-index: 7;
}
.lines-svg {
  top: 0;
  left: 0;
  position: absolute;
  z-index: 7;
  pointer-events: none;
}

.na-na2-line {
  transform: translate(4.3rem, -6rem);
}
.na-na2-line-border {
  transform: translate(4.3rem, -6rem);
}
.na2-na3-line {
  transform: translate(4.3rem, -6rem);
}
.na2-na3-line-border {
  transform: translate(4.3rem, -6rem);
}
.na3-na4-line {
  transform: translate(4.3rem, -6rem);
}
.na3-na4-line-border {
  transform: translate(4.3rem, -6rem);
}
.na4-africa-line {
  transform: translate(4.3rem, -6rem);
}
.na4-africa-line-border {
  transform: translate(4.3rem, -6rem);
}
.treasure-con {
  position: absolute;
  width: auto;
  height: 21%;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  transition: 0.5s;
}
.treasure-con.show {
  opacity: 1;
}
.treasure-con > img {
  height: 100%;
}
.treasure-pack-con {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -42%);
  width: 36rem;
  height: 36rem;
  max-height: 100svh;
  max-width: 100svw;
  z-index: 15;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.treasure-pack-con > .header {
  height: 15%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.treasure-pack-con > .header > .title {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: clamp(0.5em, 2.7vmin, 3rem);
}
.treasure-pack-con > .content {
  height: 80%;
  width: 95%;
  background: #ebe6c1;
  border-right: solid 4px #3a2b1f;
  box-shadow: inset 7px 0px #bb9e83, inset -7px 0 #c0a185, inset 9px 0 #3a2b1f,
    inset -9px 0 #3a2b1f;
  border-left: solid 4px #3a2b1f;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.treasure-pack-con > .content > .gif {
  height: 75%;
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: 0.3s;
}
.treasure-pack-con > .content > .gif.vibrate {
  animation: errorVibration 0.5s ease;
  filter: drop-shadow(0px 0px 1rem #c60000a3);
}
.treasure-pack-con > .content > .gif > .count {
  position: absolute;
  top: 50%;
  left: 47.5%;
  color: #f1efc6;
  font-size: clamp(0.2rem, 4vmin, 3rem);
  font-weight: bold;
  text-shadow: 0 2px 0 #000000;
  font-family: "Rubik";
  display: flex;
  justify-content: center;
  align-items: center;
}
.treasure-pack-con > .content > .gif > img {
  height: 100%;
  filter: drop-shadow(0px 0px 2rem #b06900);
}
.treasure-pack-con > .content > .buttons {
  height: 25%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2%;
  white-space: nowrap;
}
.treasure-pack-con > .content > .buttons > button {
  height: 40%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: row;
  color: var(--milk-color);
  justify-content: center;
  align-items: center;
  box-shadow: inset 0px 0.9em #ffffff3d, inset 0 -0.2em 0.7em #00000047,
    0 0.1em 0.1em #000000b3;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  padding: 3%;

  text-shadow: 1px 1px 0px #000000;
  font-family: "El Messiri";
}
.treasure-pack-con > .content > .buttons > button:hover {
  filter: brightness(1.2);
}

.treasure-pack-con > .content > .buttons > button:active {
  filter: brightness(0.8);
}
.treasure-pack-con > .content > .buttons > .open-more {
  background: #8b4811;
}
.treasure-pack-con > .content > .buttons > .back {
  background: #555555;
}
.treasure-pack-con > .footer {
  height: 15%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
}
.treasure-pack-con > img {
  filter: drop-shadow(0px 0px 38px #bd7800);
  height: 100%;
}
.treasure-packs-button {
  height: 22%;
  width: 100%;
  background: #853c02;
  margin-top: 4%;
  color: wheat;
  border: solid 4px #271705;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.treasure-packs-button > .chest-button {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.treasure-packs-button > .chest-transparent {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;

  height: 100%;
}
.treasure-packs-button > .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  height: 100%;
  width: 100%;
  pointer-events: none;
}
.treasure-packs-button > .text > .number {
  height: 50%;
  color: #ffbf00;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 0 2px 0 #000;
  font-family: "Rubik";
  display: flex;
  justify-content: center;
  align-items: center;
}
.treasure-packs-button > .text > .title {
  color: var(--milk-color);
  font-size: 1rem;
}
.treasure-packs-button:hover {
  filter: brightness(1.2);
}
.treasure-packs-button:active {
  filter: brightness(0.8);
}
@keyframes errorVibration {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}
.fort-button {
  width: auto;
  height: 7%;
  position: absolute;
  z-index: 9;
  filter: drop-shadow(0.15rem 0.15rem 0.1rem #00000090);
}
.fort-button > img {
  height: 100%;
}
.fort-button:hover {
  filter: drop-shadow(0px 0px 0.3rem #ff9700);
  transform: scale(1.2);
}
.wing-button {
  width: auto;
  height: 7%;
  position: absolute;
  z-index: 9;
  filter: drop-shadow(0.15rem 0.15rem 0.1rem #00000090);
}
.wing-button > img {
  height: 100%;
}
.wing-button:hover {
  filter: drop-shadow(0px 0px 0.3rem #ff9700);
  transform: scale(1.2);
}
.base-path-fort-gif {
  position: absolute;
  z-index: 7;
  width: 8%;
  pointer-events: none;
}
.territory-path-fort-gif {
  position: absolute;
  z-index: 7;
  width: 4%;
  pointer-events: none;
}
.base-path-fort-gif > img {
  width: 100%;
}
.territory-path-fort-gif > img {
  width: 100%;
}
#windowLoadingOverlay > .loading-bar {
  width: 12rem;
  max-width: 80svw;
  height: 2.6rem;
  background-color: #221201;
  border-radius: 1rem;
  position: absolute;
  left: 50%;
  top: 66%;
  overflow: hidden;
  transform: translate(-50%, -66%);
  display: flex;
  align-items: center;
  justify-content: end;
  box-shadow: 0 0 0 0.2rem #3a2106, 0 0.2rem 0.4rem 0.2rem #000000,
    inset 0 0.2rem 0.4rem 0rem #000000;
}

#windowLoadingOverlay > .loading-bar > .progress-bar {
  background: linear-gradient(to bottom, #b4a15e 47%, #8c6400 20%, #c47d01 97%);
  height: 90%;
  width: 0%;
  border-radius: 1rem;
  transition: 0.3s ease-in-out;
  box-shadow: 0.1rem 0 0.3rem 0.1rem #0000005e,
    inset 0 0.2rem 0.3rem 0.05rem #ffffff6e;
}
.suggest-question-con {
  position: fixed;
  flex-direction: column;
  justify-content: start;
  width: 38rem;
  max-width: 90svw;
  height: auto;
  max-height: 90svh;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: #000;
  font-family: var(--Rubik);
}
.suggest-question-con > .header {
  height: 5rem;
  width: 100%;
  border: solid 4px #3a2b1f;
  background-color: #87664c;
}
.suggest-question-con > .header > span {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
}
.suggest-question-con > .content {
  height: auto;
  width: 95%;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  gap: 5px;
  overflow: auto;
  padding: 1rem;
}
.suggest-question-con > .content > .options-input > .input-field {
  width: 100%;
  display: flex;
  justify-content: center;
}
.suggest-question-con > .content > .form-input {
  width: 80%;
}
.suggest-question-con > .content > .options-input {
  width: 100%;
  display: flex;
  gap: 5px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#suggestionAnswerInput {
  width: 80%;
}
.single-select {
  width: 5%;
}
.suggest-question-con > .content > .options-input > .input-field > .form-input {
  width: 75%;
}
.suggest-question-con
  > .content
  > .options-input
  > .input-field
  > .form-input::placeholder {
  color: #8f8f8f;
}

.suggest-question-con > .content > .question-type-select {
  width: 80%;
}
.suggest-question-con > .content > .msg {
  color: #221201;
  font-size: 0.6em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.suggest-question-con > .content > .msg > img {
  height: 0.6em;
}
#exitSuggestQuestionBtn {
  position: absolute;
  top: 2%;
  right: 4%;
  color: #ebe6c1;
}
#musicPauseBtn {
  width: auto;
  height: 2.5rem;
  max-height: 90%;
  aspect-ratio: 1;
  background-color: #613a07;
  border-radius: 50%;
  font-size: clamp(2rem, 3vmin, 3vmin);
  color: #ffd42c;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 0 0 1.1rem #f5e300, 1px 1px 0 #000;
  box-shadow: inset 0 0 0.4rem #000, inset 0rem 0.6rem 0 #ffffff30;
  border: 2px solid #795127;
}
.in-game-nav > #musicPauseBtn {
  position: absolute;
  left: 8%;
}
#musicPauseBtn:hover {
  filter: brightness(1.2);
}
#musicPauseBtn:active {
  box-shadow: inset 0 0 0.6rem #000;
}
.not-supported-overlay {
  width: 100svw;
  height: 100svh;
  background-color: var(--dark-brown);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.not-supported-overlay > .msg {
  color: var(--milk-color);
  font-size: 1.1rem;
}
.not-supported-overlay > button {
  display: flex;
  flex-direction: row;
  color: white;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0px 0.9em #ffffff3d, inset 0 -0.2em 0.7em #00000047,
    0 0.1em 0.1em #000000b3;
  font-size: 1rem;
  border-radius: clamp(2px, 1vmin, 10px);
  padding: 0.6rem;
  text-shadow: 1px 1px 0px #000000;
  font-family: inherit;
  background-color: #b27902;
  border: none;
}
.invite-bot-btn {
  height: 2rem;
  width: auto;
  aspect-ratio: 3 / 2;
  background-color: #87664c;
  display: flex;
  justify-content: center;
  border-radius: 5px;
  padding: 0.2rem;
  box-shadow: 0 1px 0 0 #000, inset 0 0.8rem 0 #ebe6c152,
    inset 0 0 0.7rem #00000070;
}
.invite-bot-btn:active {
  transform: translateY(1px);
}
.invite-bot-btn > img {
  height: 100%;
}
.shop-con {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  width: 60rem;
  max-width: 100%;
  position: absolute;
  transition: 1s;
  z-index: 50;
  opacity: 1;
  height: 75%;

  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
}
.shop-con > .header {
  height: 15%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  gap: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shop-con > .header > span {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  position: relative;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.shop-con > .content {
  height: 70%;
  width: 95%;
  background: #ebe6c1;
  border-right: solid 4px #3a2b1f;

  overflow-y: auto;
  border-left: solid 4px #3a2b1f;
  box-shadow: inset -7px 0 #c0a185, inset -9px 0 #000;
  padding: 0rem 1rem 0;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  position: relative;
  gap: 1rem;
}
.shop-con > .content > .items {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 17rem;
  justify-content: space-around;
  align-items: start;

  flex-direction: row;
  gap: 1rem;
  padding: 1rem;
  overflow-x: auto;
}
.shop-con > .content > .category {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: start;
  gap: 1rem;
}
.shop-con > .content > .category > .body {
  display: flex;
  width: 100%;
  height: auto;
  min-height: fit-content;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  gap: 1rem;
  padding: 1rem;
  overflow-x: auto;
}
.shop-con > .content > .category > .body > .item {
  height: auto;
  min-width: 9rem;
  width: 20%;
  background: #d7d3b1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  border: 1px solid #99946f;
}
.shop-con > .content > .category > .body > .item > .image {
  width: auto;
  height: auto;
  max-width: 70%;
  aspect-ratio: 1;
  border: 3px solid #d7d3b1;
  padding: 5px;
  display: flex;
  border-radius: 5px;
  background: #87664c;
  box-shadow: inset 0 0 0.3rem 1px #0000005e, 0 0 3px 1px #0000005e;
  justify-content: center;
  align-items: center;
  min-height: 6rem;
}
.shop-con > .content > .category > .body > .item > .image > img {
  height: 100%;
  width: auto;
  filter: drop-shadow(1px 1px 0px #00000050);
  max-width: 100%;
  aspect-ratio: 1;
}
.shop-con > .content > .category > .title {
  height: 2.7rem;
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  background: #87664c;
  padding: 0 1rem;
  padding-bottom: 0.3rem;
  font-size: clamp(1rem, 2.5vmin, 3rem);
  gap: 1rem;
}
.shop-con > .content > .category > .title > .icon {
  height: 75%;
  width: auto;
  aspect-ratio: 1;
}

.shop-con > .content > .category > .title > .icon > img {
  height: 100%;
  width: 100%;
}
.shop-con > .content > .category > .title > .title-span {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
}
.shop-con > .content > .items > .item {
  height: auto;
  min-width: 9rem;
  width: 20%;
  background: #d7d3b1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  border: 1px solid #99946f;
}
.shop-con > .content > .items > .item > .image {
  width: auto;
  height: auto;
  max-width: 70%;
  aspect-ratio: 1;
  border: 3px solid #d7d3b1;
  padding: 5px;
  display: flex;
  border-radius: 5px;
  background: #87664c;
  box-shadow: inset 0 0 0.3rem 1px #0000005e, 0 0 3px 1px #0000005e;
  justify-content: center;
  align-items: center;
  min-height: 6rem;
}
.shop-con > .content > .items > .item > .image > img {
  height: 90%;
  width: auto;
  filter: drop-shadow(1px 1px 0px #00000050);
  max-width: 100%;
  max-height: max-content;
}
.shop-con > .content > .items > .item > .price {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  gap: 2%;
}
.shop-con > .content > .items > .item > .price > img {
  height: 90%;
}
.shop-con > .content > .items > .item > .price > span {
  font-size: 1.5rem;
  color: #87664c;
  font-weight: bold;
  text-shadow: 0 1px 0px #000000;
}

.purchase-button {
  width: 90%;
  height: 3rem;
  background: linear-gradient(to bottom, #07a211 43%, #008100 0);
  box-shadow: inset 0 0 0 3px #008100, inset 0px 2px 0 3px #ffffffc2;
  border: solid #005200 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 1rem var(--Rubik);
  position: relative;
}
.purchase-button:hover {
  filter: brightness(1.1);
}
.purchase-button:active {
  transform: translateY(2px);
}
.purchase-button > span {
  color: white;
  text-shadow: 1px 1px 0px #000;
}

.shop-con > .footer {
  height: 15%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
}
.exit-store {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  background-color: #c60000;
  color: wheat;
  font-weight: bold;
}
.exit-store:hover {
  background-color: #c60000;
  filter: brightness(1.1);
}
.exit-store:active {
  transform: translateY(-40%);
  background-color: #c60000;
  filter: brightness(0.8);
}
.shop-con > .header > .my-jewels {
  height: 2.5rem;
  width: 6rem;
  background-color: #87664c;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  border-radius: 5px;
  padding: 0.5rem;
  gap: 0.4rem;
  border: 3px solid #87664c;
  background: #dbd6b3;
  transition: 0.3s;
  min-width: fit-content;
}
.shop-con > .header > .my-jewels > img {
  height: 100%;
}
.shop-con > .header > .my-jewels > .count {
  color: #6f523a;
  font-weight: bold;
  font-size: 1.2rem;
}
.shop-con.show {
  display: flex;
}
.purchase-confirm-popup {
  width: 25rem;
  height: 14rem;
  max-width: 90%;
  max-height: 90%;
  background-color: #fff;
  border-radius: 5px;
  padding: 1rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  z-index: 9999;
  font-size: 1rem;
  color: #000;
  text-align: center;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  transition: 0.5s;
}
.purchase-confirm-popup.show {
  top: 50%;
}
.purchase-confirm-popup > .header > .title {
  font-size: 1.3rem;
}
.purchase-confirm-popup > .content {
  display: flex;
  flex-direction: column;
}
.purchase-confirm-popup > .content > span > img {
  height: 1.3rem;
}
.purchase-confirm-popup > .content > div > span {
  font-size: 0.8rem;
}
.purchase-confirm-popup > .content > div {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;
}
.purchase-confirm-popup > .footer {
  width: 100%;
  display: flex;
  gap: 1rem;
}
.purchase-quantity-con {
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.purchase-quantity-con > .quantity-btn {
  width: auto;
  height: 100%;
  min-height: 2rem;
  aspect-ratio: 1;
  background: linear-gradient(to bottom, #07a211 43%, #008100 0);
  box-shadow: inset 0 0 0 3px #008100, inset 0px 2px 0 3px #ffffffc2;
  border: solid #005200 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 1rem var(--Rubik);
  text-shadow: 1px 1px 0px #000;
}
.purchase-quantity-con > .quantity-btn > span {
  color: #ffffff;
  font-size: 2rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.purchase-quantity-con > .quantity-counter {
  font-weight: bold;
  font-size: 1.2rem;
}
.purchase-quantity-con > .quantity-btn:hover {
  filter: brightness(1.1);
}
.purchase-quantity-con > .quantity-btn:active {
  transform: translateY(2px);
}
@keyframes errorPulse {
  0% {
    border-color: transparent;
  }
  50% {
    border-color: red;
  }
  100% {
    border-color: transparent;
  }
}
.errorPulse {
  animation: errorPulse 0.4s ease-in-out 5;
}
.weekly-winner-con {
  position: absolute;
  left: 64%;
  height: auto;
  width: 16%;
  font-size: clamp(0.1rem, 1.5vmin, 1rem);
  bottom: 12%;
}
.weekly-winner-con > img {
  width: 100%;
}
.weekly-winner-con > .title {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  font-weight: bold;
  color: #000000;
  text-shadow: 0px 1px 0 #ffffff9e;
}
.weekly-winner-con > .name {
  position: absolute;
  bottom: 34%;
  color: white;
  right: 0;
  width: 100%;
}
.weekly-winner-con > .country {
  position: absolute;
  bottom: 15%;
  color: white;
  right: 0;
  width: 100%;
}
.weekly-winner-con > .flag {
  position: absolute;
  bottom: 15%;
  color: white;
  left: 9%;
  width: auto;
  height: 25%;
}
.weekly-winner-con > .flag > img {
  height: 100%;
}


#exitFriendsPage{
  display: none;
}

.right-loader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 5;
  justify-content: center;
}
.right-loader-overlay.active {
  display: flex;
}
.right-loader-overlay > .loading-overlay {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
  z-index: 5;
}
#worldChatSend {
  width: 20%;
  height: 100%;
  font-family: var(--Rubik);
  border-radius: 5px;
  outline: none;
  background: #ff6e00;
  color: #ffffff;
  text-shadow: 0 2px 1px #000;
  font-size: 15px;
  box-shadow: 0 2px 0px #3a2b1f;
  border: 1px #3a2b1f solid;
}
#worldChatSend:hover {
  background: #d15a00;
}
#worldChatSend:active {
  box-shadow: none;
  transform: translateY(2px);
}
#lobbyFriendsList > .world-messages {
  display: flex;
  flex-direction: column;

  padding: 10px;
  overflow-y: auto;
  height: 85%;
  width: 100%;
  white-space: normal;
  box-shadow: inset 0 5px #00000029;
}
#lobbyFriendsList > .world-messages > .message-con {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #0000001c;
  font-size: 0.8rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  visibility: visible;
  opacity: 1;
  transition: all 0.4s ease-in-out;
}
#lobbyFriendsList > .world-messages > .message-con:last-child {
  border-bottom: none;
}
#lobbyFriendsList > .world-messages > .message-con.hide {
  visibility: hidden;
  opacity: 0;
}
#lobbyFriendsList > .world-messages > .message-con > .right {
  display: flex;
  flex-direction: row;
  gap: 0.2rem;
  margin: 0.3rem 0;
}
#lobbyFriendsList > .world-messages > .message-con > .right > .name {
  width: 3rem;
  text-overflow: ellipsis;
  overflow: hidden;
  align-items: end;
  display: flex;
  justify-content: left;
  word-break: break-word;
}
#lobbyFriendsList
  > .world-messages
  > .message-con
  > .right
  > .message-text-date {
  max-width: 70%;
  display: flex;
  flex-direction: column;
}
#lobbyFriendsList
  > .world-messages
  > .message-con
  > .right
  > .message-text-date
  > .message-date {
  font-size: 0.7rem;
}
#lobbyFriendsList
  > .world-messages
  > .message-con
  > .right
  > .message-text-date
  > .message-text {
  background: #c5c1a25e;
  font-size: 0.8rem;
  padding: 4px;
  width: fit-content;
  position: relative;
}#lobbyFriendsList
  > .world-messages
  > .message-con
  > .right
  > .message-text-date
  > .message-text>.deleted-message {
     font-style: italic;
    opacity: 0.50;
}
#lobbyFriendsList
  > .world-messages
  > .message-con
  > .right
  > .message-text-date
  > .message-text.clan-invitation {
  background: #6fb8c85e;
}
#lobbyFriendsList
  > .world-messages
  > .message-con
  > .right
  > .message-text-date
  > .message-text
  > .clan-invitation {
  white-space: nowrap;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
#lobbyFriendsList
  > .world-messages
  > .message-con
  > .right
  > .message-text-date
  > .message-text
  > .clan-invitation
  > .details {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.5rem;
}
#lobbyFriendsList
  > .world-messages
  > .message-con
  > .right
  > .message-text-date
  > .message-text
  > .clan-invitation
  > .details
  > img {
  height: 1rem;
}
#lobbyFriendsList
  > .world-messages
  > .message-con
  > .right
  > .message-text-date
  > .message-text
  > .clan-invitation
  > .clan-tag {
  color: #ffd100;
  text-shadow: 0px 0.1vmin 0 #000, 0.1vmin 0px 0 #000, -0.1vmin 0px 0 #000,
    0px -0.1vmin 0 #000, 0px 0.2vmin 0 #000;
  font-weight: bold;
  white-space: nowrap;
}
#lobbyFriendsList
  > .world-messages
  > .message-con
  > .right
  > .message-text-date
  > .message-text
  > .clan-invitation
  > .btn.join {
  flex-direction: row;
  gap: 1vmin;
  width: 100%;
  padding: 0.1rem;
  background: linear-gradient(to bottom, #00a4b1 43%, #0080af 0);
  box-shadow: inset 0 0 0 0.1vmin #0088b1,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2, 0 0.2vmin 0vmin #000;
  border: solid #00548c 0.1vmin;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  font-size: 0.7rem;
}
#lobbyFriendsList
  > .world-messages
  > .message-con
  > .right
  > .message-text-date
  > .message-text
  > .clan-invitation
  > .btn.join.joined {
  background: linear-gradient(to bottom, #a7a7a7 43%, #7f7f7f 0);
  box-shadow: inset 0 0 0 0.1vmin #a2a2a2,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #3b3b3b 0.1vmin;
}
#lobbyFriendsList
  > .world-messages
  > .message-con
  > .right
  > .message-text-date
  > .message-text
  > .clan-invitation
  > .btn.join:hover {
  filter: brightness(1.1);
}
#lobbyFriendsList
  > .world-messages
  > .message-con
  > .right
  > .message-text-date
  > .message-text
  > .clan-invitation
  > .btn.join:active {
  transform: translateY(0.1rem);
}
#lobbyFriendsList
  > .world-messages
  > .message-con
  > .right
  > .message-text-date
  > .message-text
  > .world-chat-message-likes {
  position: absolute;
  bottom: -0.7rem;
  left: 0;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-radius: 0.4vmin;
  border: 0.2vmin solid #000;
  width: 1.5rem;
  min-width: fit-content;
}
#lobbyFriendsList
  > .world-messages
  > .message-con
  > .right
  > .message-text-date
  > .message-text
  > .world-chat-message-likes
  > img {
  height: 100%;
}
#lobbyFriendsList > .world-messages > .message-con > .left {
  font-size: 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
}
#lobbyFriendsList > .world-messages > .message-con > .left > .menu-button {
  position: relative;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#lobbyFriendsList > .world-messages > .message-con > .left > .menu-button > i {
  pointer-events: none;
}


.sanction-con {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40rem;
  height: auto;
  border-radius: 5px;
  overflow: hidden;
  z-index: 9998;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  max-width: 99%;
}
.sanction-con > .header {
  height: 15%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sanction-con > .header > .title {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: 1.5rem;
}
.sanction-con > .content {
  height: auto;
  width: 95%;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  gap: 10px;
  display: flex;
  flex-direction: column;
  font-size: clamp(1rem, 2vmin, 3rem);
  padding: 0.5rem;
}
.sanction-con > .content > .footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.agree-sanction-word {
  color: red;
}
@keyframes lighting-logo {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
  100% {
    opacity: 1;
  }
}
@keyframes lighting-in-game-frame-first {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(-12deg) drop-shadow(0px 0px 1rem orange);
  }
  100% {
    filter: hue-rotate(0deg);
  }
}
@keyframes lighting-in-game-frame-second {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(-12deg) drop-shadow(0px 0px 1rem green);
  }
  100% {
    filter: hue-rotate(0deg);
  }
}
@keyframes lighting-in-game-frame-third {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(-12deg) drop-shadow(0px 0px 1rem brown);
  }
  100% {
    filter: hue-rotate(0deg);
  }
}
#gameMain
  > .locations
  > .players-banners
  > .banner
  > .user-image
  > .default-frame.circular {
  background: none;
  position: absolute;
  border: none;
  width: 127%;
  z-index: 2;
  height: auto;
  aspect-ratio: 1;
  transform: translateY(-5%);

}
@keyframes rotateFiveTimes {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(1800deg); /* 360 * 5 = 1800 */
  }
  100% {
    transform: rotateY(1800deg); /* Hold position after spin */
  }
}




#gameMain
  > .locations
  > .players-banners
  > .banner
  > .user-image
  > .player-image.circular {
     border-radius: 50% !important;
    width: 69% !important;
    z-index: 2 !important;
    height: 65% !important;
    transform: translate(2%, 5%) !important;
}
#gameMain
  > .locations
  > .players-banners
  > .banner
  > .user-image.ranking-winner {
  background: none;
  border: none;
}
.game-world-map > .player-details {
  position: absolute;
  width: calc(80% / 3);
  background: #f7c78c;
  height: auto;
  z-index: 200;
  top: 3%;
  border-radius: 0.7vmin;
  box-shadow: 0 0 0 0.3vmin #ffdaad, 0 0 0 0.5vmin #783e00,
    0 0 0.9vmin 0.4vmin #000;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 1s;
  flex-direction: column;
  font-size: clamp(0.1rem, 1.5vmin, 3rem);
}
.game-world-map > .player-details.show {
  opacity: 1;
  visibility: visible;
}
.game-world-map > .player-details.player-1 {
  left: 70%;
}
.game-world-map > .player-details.player-2 {
  left: 50%;
  transform: translateX(-50%);
}
.game-world-map > .player-details.player-3 {
  left: 3%;
}
.game-world-map > .player-details::after {
  content: "";
  width: 0;
  height: 0;
  border-right: solid #f7c78c00 1.6vmin;
  border-left: solid #f7c78c00 1.6vmin;
  position: absolute;
  top: -1.5vmin;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0px -0.3vmin 0px #783e00);
  border-bottom: 1.6vmin solid #f7c78c;
}
.banner:hover .player-details.player-1 {
  display: flex;
}
.game-world-map > .player-details > .row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 3%;
  box-shadow: 0 2px 0 0px #00000000, 0 1px 0 0px #85410073, 0 2px 0 0px #ffe6c7;
}
.game-world-map > .player-details > .row:last-child {
  box-shadow: none;
}
.map-path-loading {
  position: absolute;
  z-index: 53;

  width: 10%;
  height: 14%;
  transform: scale(1.2);
  transition: transform 0.2s;
  filter: drop-shadow(0px 0px 3px #00000090);
}

.map-path-loading > svg {
  height: 100%;
  width: 100%;
}
.map-path-loading.no-transform {
  transform: none !important;
}
.map-path-loading:active {
  transform: scale(0.9) !important;
}
.question-picker {
  width: 40%;
  height: 60%;
  position: absolute;
  z-index: 101;
}

.question-picker > svg {
  width: 100%;
  height: 100%;
}
.question-picker > svg > circle {
  filter: drop-shadow(0px 0px 2px #fff);
}
.question-picker > .category-image {
  height: 17%;
  position: absolute;
  transition: 0.2s;
  pointer-events: all !important;
}
.question-picker > .category-image:hover {
  transform: scale(1.1);
  filter: drop-shadow(0px 0px 2px black) brightness(1.1);
}
.question-picker > .category-image:active {
  transform: scale(0.9);
}
.question-picker > .category-image.quran {
  left: 39%;
  bottom: 77%;
}
.question-picker > .category-image.politician {
  left: 16%;
  bottom: 71%;
}
.question-picker > .category-image.science {
  left: 63%;
  bottom: 71%;
}
.question-picker > .category-image.square-root {
  left: 7%;
  bottom: 28%;
}
.question-picker > .category-image.football {
  left: 24%;
  bottom: 11%;
}
.question-picker > .category-image.poetry {
  left: 6%;
  bottom: 52%;
}
.question-picker > .category-image.palette {
  left: 77%;
  bottom: 52%;
}
.question-picker > .category-image.history-book {
  left: 53%;
  bottom: 8%;
}
.question-picker > .category-image.location {
  left: 75%;
  bottom: 28%;
}

.question-picker-center {
  width: 40%;
  height: 40%;
  background: #ffffff60;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 22px #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.question-picker-center > .question-picker-icon {
  height: 53%;
  margin-bottom: 23%;
}
.question-picker-center > span.type {
  font-size: clamp(0.1rem, 1.5vmin, 3rem);
}
.questions-board > .board-question-category {
  position: absolute;
  left: 20%;
  top: 9%;
  height: 21%;
  width: auto;
}
.questions-board > .board-question-category > img {
  height: 100%;
}
.world-chat-mod-actions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 1rem;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 5;
  width: 31rem;
  max-width: 90%;
  height: auto;
  min-height: fit-content;
  gap: 1rem;
  display: flex;
  flex-direction: column;
}
.world-chat-mod-actions > .header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: 15%;
}
input[type="text"]:disabled {
  background-color: #ccc;
}
.world-chat-mod-actions > .content {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  height: auto;
  font-size: 1rem;
  gap: 1rem;
}
.world-chat-mod-actions > .footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: 20%;
  gap: 1rem;
}
.lobby-mod-btn {
  width: 6rem;
  height: 2.5rem;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  font-family: inherit;
  box-shadow: 0 2px 0px 1px #000000a3;
  color: #000000;
  text-shadow: 0 1px 0 #000000;
  font-weight: bold;
  background: #d5d5d5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.world-chat-mod-actions > .content > .field {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  gap: 1rem;
}
.world-chat-mod-actions > .content > .field > select,
input[type="text"] {
  padding: 0.2rem;
  font-size: 1rem;
  font-family: var(--Rubik);
  background: #ffffff;
  border: 1px solid #00000038;
  outline: none;
  border-radius: 5px;
  width: 50%;
}
.world-chat-mod-actions > .content > .field > .title {
  width: 15%;
}
input[type="radio"].error {
  outline: 2px solid red;
}
.lobby-mod-btn.blue {
  color: white;
  text-shadow: rgb(0, 0, 0) 0px 1px 0px;
  background: rgb(23, 107, 203);
}
.lobby-mod-btn.grey {
  color: white;
  background: rgb(137, 137, 137);
}
.lobby-mod-btn:hover {
  filter: brightness(1.1);
}
.lobby-mod-btn:active {
  filter: brightness(0.9);
  transform: translateY(2px);
  box-shadow: none;
}
.error-message-con {
  height: 3rem;
  width: auto;
  position: absolute;
  top: 10%;
  left: 50%;
  z-index: 999;
  transform: translateX(-50%);
  background: #b50000;
  color: #ffffff;
  padding: 0 0.5rem;
  transition: 0.3s;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-family: var(--Rubik);
  gap: 0.5rem;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  white-space: nowrap;
}
.error-message-con.active {
  opacity: 1;
}
.success-message-con {
  height: 3rem;
  width: auto;
  position: absolute;
  top: 10%;
  left: 50%;
  z-index: 999;
  transform: translateX(-50%);
  background: #1d8b00;
  color: #ffffff;
  padding: 0 0.5rem;
  transition: 0.3s;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-family: var(--Rubik);
  gap: 0.5rem;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  white-space: nowrap;
}
.success-message-con.active {
  opacity: 1;
}
.checkmark {
  color: #00a600;
  background: white;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 1rem;
}
.x-mark {
  font-size: 1.5rem;
}
.hidden-date-input {
  opacity: 0;
  position: absolute;
  left: 0;
}
.copy-btn {
  color: #ff9436;
}
.copy-btn:hover {
  transform: scale(1.1);
}
.copy-btn:active {
  transform: scale(0.9);
}
@keyframes rotateCoin {
  from {
    transform: rotate3d(0, 1, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 360deg);
  }
}
#inGameChatInput {
  border-radius: 0;
}
#acceptGoHome {
  width: 25%;
  height: 70%;
  background: linear-gradient(to bottom, #07a211 43%, #008100 0);
  box-shadow: inset 0 0 0 0.3vmin #008100, inset 0px 0.2vmin 0 0.3vmin #ffffffc2;
  border: solid #005200 3px;
  color: white;
  font-family: var(--Rubik);
  font-size: 1.8vmin;
}
#acceptGoHome:hover {
  filter: brightness(1.1);
}
#acceptGoHome:active {
  transform: translateY(4%);
}
.heading-1-path {
  transform: translateY(30rem);
}
.heading-2-path {
  transform: translateY(-85rem);
}
.heading-3-path {
  transform: translateY(-203rem);
}
.heading-4-path {
  transform: translateY(-323rem);
}
.heading-5-path {
  transform: translateY(-439rem);
}
.heading-6-path {
  transform: translateY(-560rem);
}
.heading-7-path {
  transform: translateY(-678rem);
}
.heading-path {
  fill: transparent;
}
.heading-path:hover {
  fill: #ffffff3d;
  stroke-width: 6vmin;
  stroke: #fffbaf;
}
.heading-path:active {
  fill: #00000029;
}
#shipRoom > .ship-room-content > .footer > span.footer-social-icon {
  font-size: clamp(1rem, 3vmin, 3vmin);
}

#gameMain
  > .locations
  > .players-banners
  > .banner
  > .user-image
  > .default-frame {
  background: none;
  position: absolute;
  border: none;
  width: 130%;
  z-index: 1;
  height: 100%;
  aspect-ratio: 1;
  object-fit: fill;
}

.main-nav > .player-banner > .profile-picture > .lobby-frame {
  background: none;
  position: absolute;
  border: none;
  width: 130%;
  z-index: 1;
  height: 100%;
  aspect-ratio: 1;
  object-fit: fill;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.main-nav > .player-banner > .profile-picture > .lobby-image {
  height: 86%;
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}
.xpBoostIcon {
  position: absolute;
  left: -4%;
  top: 21%;
  transform: translateY(-50%);
  background: #d70000;
  border-radius: 2vmin;
  color: white;
  font-size: 1.4vmin;
  width: 13%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--Rubik);
  padding: 1%;
  font-weight: bold;
}
.events-con {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  width: 76rem;
  max-width: 99%;
  position: absolute;

  z-index: 50;
  opacity: 1;
  height: 80%;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
}
.events-con.show {
  visibility: visible;
}
.events-con > .header {
  height: 10%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.events-con > .header > .title {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  position: relative;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.events-con > .content {
  height: 80%;
  width: 95%;
  background: #ebe6c1;
  border-right: solid 4px #3a2b1f;
  overflow-y: auto;
  border-left: solid 4px #3a2b1f;
  box-shadow: inset -7px 0 #c0a185, inset -9px 0 #000;
  padding: 0 0.36em 0 0;
  white-space: nowrap;
  overflow-x: hidden;
}
.events-con > .content > .tabs {
  width: 100%;
  height: 15%;
  overflow-x: auto;
  background: linear-gradient(to bottom, #ff860057, transparent);
  overflow-y: hidden;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 0.2rem;
  min-height: 5rem;
  position: relative;
}
.events-con > .content > .tabs > .no-events-span {
  font-size: clamp(1rem, 1vmin, 1vmin);
  font-family: var(--Rubik);
  color: #525252;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.events-con > .content > .tabs::-webkit-scrollbar {
  height: 2vmin;
}
.events-con > .content > .tabs > .tab {
  height: 100%;
  width: 10rem;
  background: #9a8671;
  position: relative;
  min-width: 10rem;
}
.events-con > .content > .tabs > .tab:hover {
  filter: brightness(1.1);
}
.events-con > .content > .tabs > .tab::after {
  content: "";
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff3d;
}.events-con > .content > .tabs > .tab >.notf-dot {
  top: 8%;
}
.events-con > .content > .tabs > .tab > img {
  width: 100%;
  height: 100%;
}
.events-con > .footer {
  height: 10%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
}
.exit-events {
  position: absolute;
  right: 2%;
  top: 47%;
  transform: translateY(-50%);
}
.exit-events:active {
  transform: translateY(-40%);
}
.events-con > .content > .event-content {
  position: relative;
  width: 100%;
  height: 84%;
  padding: 0% 1%;

  display: none;
}
.events-con > .content > .event-content.active {
  display: block;
}
.events-con > .content > .event-content > .event-counter-con {
  position: absolute;
  top: 0%;
  left: 1%;
  background: linear-gradient(45deg, #e0bc81, transparent);
  width: 7%;
  min-width: 4rem;
  border: 0.2vmin solid #1a191f;
  border-radius: 0.8vmin;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.3vmin;
  height: auto;
  aspect-ratio: 20 / 10;
}
.events-con > .content > .event-content > .event-counter-con > img {
  height: 100%;
}
.events-con > .content > .event-content > .event-counter-con > .counter {
  font-family: var(--Roboto-Mono);
  font-weight: bold;
  font-size: clamp(1rem, 2vmin, 3vmin);
}
.events-con > .content > .event-content > .event-rewards-con {
  width: 100%;
  height: 10rem;
  position: relative;
  top: 10%;
  overflow-x: auto;
}
.events-con > .content > .event-content > .event-rewards-con > .rewards-con {
  width: 69rem;
  height: 100%;
  background: radial-gradient(circle, #f1cb8b, #ff758c00);
  position: relative;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con::-webkit-scrollbar {
  height: 2vmin;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .progress-con {
  position: absolute;
  height: 0.7rem;
  width: 83%;
  background: #0000009e;
  top: 65%;
  transform: translate(-50%, -50%);
  left: 50%;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .progress-con
  > .stop-point {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: 3px;
  background: #ffbc00;
  box-shadow: 0 0 0.3vmin 0.1vmin #ff7d00;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .progress-con
  > .stop-point:nth-child(1) {
  right: 20%;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .progress-con
  > .stop-point:nth-child(2) {
  right: 40%;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .progress-con
  > .stop-point:nth-child(3) {
  right: 60%;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .progress-con
  > .stop-point:nth-child(4) {
  right: 80%;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .progress-con
  > .progress-bar {
  height: 100%;
  background: linear-gradient(45deg, #ffd100, #ff7f00);
  max-width: 100%;
}
.needed-event-currency {
  position: absolute;
  transform: translateY(-50%);
  width: auto;
  height: 18%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--Roboto-Mono);
  font-size: 1rem;
  font-weight: bold;
      gap: 15%;
}

.needed-event-currency > img {
  height: 80%;
}
.needed-event-currency.first {
  right: 2%;
  top: 63%;
}
.needed-event-currency.second {
  right: 22.5%;
  top: 85%;
}
.needed-event-currency.third {
  right: 39.5%;
  top: 85%;
}
.needed-event-currency.fourth {
  right: 56%;
  top: 85%;
}
.needed-event-currency.fifth {
  right: 72.5%;
  top: 85%;
}
.needed-event-currency.sixth {
  right: 88.5%;
  top: 85%;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .reward {
  width: 4%;
  height: auto;
  position: absolute;
  transform: translateY(-50%);
  top: 37%;
  cursor: pointer;
}.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con.eid-ad7a
  > .reward {
  width: 6%;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .reward.claimable
  > img {
  animation: glow 1.5s infinite alternate, bounce 1s infinite;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .reward
  > img {
  width: 100%;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .reward.silver {
  left: 72.7%;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .reward.bronze {
  left: 56%;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .reward.blue {
  left: 40%;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .reward.violet {
  left: 23.2%;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .reward.gold {
  left: 6.7%;
}
@keyframes glow {
  0% {
    filter: drop-shadow(0 0 1.5vmin #ffcc00);
  }
  100% {
    filter: drop-shadow(0 0 1vmin #ff9900);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-2%);
  }
  50% {
    transform: translateY(-11%);
  }
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .reward
  > .info {
  height: 60%;
  width: 150%;
  position: absolute;
  left: 186%;
  top: 41%;
  transform: translate(-50%, -50%);
  z-index: 2145;
  background: #f7c78c;
  border-radius: 0.7vmin;
  box-shadow: 0 0 0vmin 0.1vmin #000000;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 1s;
  font-size: clamp(0.8rem, 1.5vmin, 3rem);
  flex-direction: column;
  justify-content: space-around;
  padding: 5%;
  font-family: var(--Roboto-Mono);
  pointer-events: none;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .reward:hover
  > .info {
  visibility: visible;
  opacity: 1;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .reward
  > .info
  > .field {
  height: 50%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 15%;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .reward
  > .info
  > .field
  > img {
  height: 100%;
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .reward
  > .check-icon {
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.events-con
  > .content
  > .event-content
  > .event-rewards-con
  > .rewards-con
  > .reward
  > .check-icon
  > .checkmark {
  color: white;
  background: green;
  border: 0.2vmin solid #fff;
}
.events-con > .content > .event-content > .event-details {
  position: relative;
  top: 10%;
  white-space: break-spaces;
  font-size: clamp(1rem, 1.5vmin, 1.5vmin);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.events-con > .content > .event-content > .event-details > img {
  width: 40%;
  min-width: 15rem;
}

.important-note {
  background: #9a0000;
  color: #ffe200;
  height: 1.7rem;
  width: auto;
  font-size: clamp(0.8rem, 1.8vmin, 2vmin);
  border-radius: 0.7vmin;
  font-weight: bold;
  border: 0.2vmin solid #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 90%;
  padding: 0 0.5vmin;
  text-shadow: 0.1vmin 0.1vmin 0vmin #000;
  position: relative;
  gap: 0.2rem;
}
.important-note::after {
  content: "";
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff47;
  border-radius: 1vmin;
}
.important-note > img {
  height: 100%;
}
.important-note > .details {
  position: absolute;
  width: 20rem;
  height: 2rem;
  font-size: clamp(0.5rem, 1.5vmin, 2vmin);
  max-width: 90svw;
  top: -177%;
  left: 50%;
  transform: translateX(-50%);
  background: #f7c78c;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  padding: 0 1vmin;
  min-width: max-content;
  text-shadow: none;
  border-radius: 1vmin;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
}
.important-note:hover > .details {
  visibility: visible;
  opacity: 1;
}
.play-now-con {
  position: absolute;
  top: 29%;
  left: 60%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 42%;
  z-index: 80;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  font-family: var(--Rubik);
}
.play-now-con > .main-title {
  font-size: clamp(1.5rem, 3vmin, 8vmin);
  padding: 1rem 0;
  text-shadow: 0.2vmin 0.2vmin 0.2vmin #000;
  font-weight: bold;
}
.play-now-con > .sub-title {
  font-size: clamp(1rem, 3vmin, 5vmin);
  text-align: center;
  padding: 1rem 0;
  text-shadow: 0.2vmin 0.2vmin 0.2vmin #000;
}
.play-now-con > .play-now-btn {
  width: 90%;
  height: 16%;
  background: linear-gradient(to bottom, #07a211 43%, #008100 0);
  box-shadow: inset 0 0 0 3px #008100, inset 0px 2px 0 3px #ffffffc2,
    0 0 1vmin 0.1vmin #00000080;
  border: solid #005200 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: clamp(1.5rem, 3vmin, 8vmin);
  font-family: var(--Rubik);
  text-shadow: 0.2vmin 0.2vmin 0.2vmin #000;
  font-weight: bold;
  color: #fff4c0;
}
.play-now-con > .play-now-btn:hover {
  filter: brightness(1.1);
}
.play-now-con > .play-now-btn:active {
  transform: translateY(2px);
}
.no-clan-con {
  width: 40%;
  height: 35%;
  position: absolute;

  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.no-clan-con > .header {
  height: 20%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.no-clan-con > .header > span {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  font-family: var(--Rubik);
}
.no-clan-con > .content {
  height: 80%;
  width: 95%;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5%;
  font-family: var(--Rubik);
}
.no-clan-con > .content > .create-join-clan-con {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}
.no-clan-con > .content > .btn {
  width: 70%;
  background: linear-gradient(to bottom, #07a211 43%, #008100 0);
  box-shadow: inset 0 0 0 3px #008100, inset 0px 2px 0 3px #ffffffc2;
  border: solid #005200 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: clamp(1.5rem, 2vmin, 8vmin);
  font-family: var(--Rubik);
  text-shadow: 0.2vmin 0.2vmin 0.2vmin #000;
  font-weight: bold;
  color: #fff4c0;
  padding: 1rem;
  white-space: nowrap;
}
.no-clan-con > .content > .create-join-clan-con > .btn.back {
  background: linear-gradient(to bottom, #a7a7a7 43%, #7f7f7f 0);
  box-shadow: inset 0 0 0 0.1vmin #a2a2a2,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #3b3b3b 0.1vmin;
}

.no-clan-con > .content > .create-join-clan-con > .btn {
  width: 45%;

  background: linear-gradient(to bottom, #07a211 43%, #008100 0);
  box-shadow: inset 0 0 0 3px #008100, inset 0px 2px 0 3px #ffffffc2;
  border: solid #005200 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: clamp(1.5rem, 2vmin, 8vmin);
  font-family: var(--Rubik);
  text-shadow: 0.2vmin 0.2vmin 0.2vmin #000;
  font-weight: bold;
  color: #fff4c0;
  padding: 0.5rem;
  white-space: nowrap;
}
.no-clan-con > .content > .create-join-clan-con > .btn.creating {
  background: linear-gradient(to bottom, #b17f00 43%, #936900 0);
  box-shadow: inset 0 0 0 3px #b17f00, inset 0px 2px 0 3px #ffffffc2;
  border: solid #5a3900 3px;
  color: #ffffff;
}
.no-clan-con > .content > .note-field {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  color: red;
  width: 80%;
}
.no-clan-con > .content > .note-field > img {
  height: 20px;
}
.no-clan-con > .content .btn:hover {
  filter: brightness(1.1);
}
.no-clan-con > .content .btn:active {
  transform: translateY(2px);
}
.no-clan-con > .content input {
  background: transparent;
  border: none;
  outline: none;
  width: 90%;
}
.no-clan-con > .content select {
  background: transparent;
  border: none;
  outline: none;
  width: 90%;
  box-shadow: none;
}
.no-clan-con > .content .field {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  border-radius: 5px;
  overflow: hidden;
  padding: 0 1%;
  background: white;
  color: #00000080;
  height: 18%;
  width: 80%;
}
.field-error {
  outline: 1px solid red;
}
.clan-con {
  height: 65%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60rem;
  max-width: 99%;
}
.clan-con > .header {
  height: 13%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.left-header-buttons { 
  display: flex;
  justify-content: end;
  align-items: center;
  height: 80%;
  width: auto;
  font-size: clamp(1rem, 1.5vmin, 2vmin);

  position: absolute;
  left: 1vmin;
  top: 50%;
  transform: translateY(-50%);
  gap:0.5rem
}
.left-header-buttons > div {
  height: 60%;
}.left-header-buttons > div>img {
  height: 100%;
}

.qm-icon {
  transform: scaleX(-1);
}
.qm-icon:hover {
  transform: scaleX(-1) scale(1.1);
  filter: brightness(1.1);
}
.qm-icon:active {
  transform: scaleX(-1) scale(1);
}
.clan-con > .header > span {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  font-family: var(--Rubik);
}
.clan-con > .content {
  height: 87%;
  width: 95%;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 2%;
  font-family: var(--Rubik);

  position: relative;
}
.clan-nav {
  width: 100%;
  display: flex;
  justify-content: start;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 1vmin;
  flex-wrap: wrap;
}
.clan-nav > .nav-btn {
  color: #87664c;
  border-radius: 0.5vmin;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 0.1vmin solid #87664c;
  height: auto;
  padding: 0.5vmin;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  white-space: nowrap;
  flex: 1 1 71px;
  min-width: 125px;
  position: relative;
}
.clan-nav > .nav-btn > .notf-dot {
  transform: translate(17%, 4%);
}

.clan-nav > .nav-btn:hover {
  background-color: #dbd6b3;
}
.clan-nav > .nav-btn.active {
  background-color: #87664c;
  color: #ebe6c1;
}
.clan-con > .content > .clan-members {
  width: 95%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  padding: 1vmin;
  overflow-y: auto;
  gap: 8%;
  height: 100%;
}
.clan-memebers-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.5vmin;
}
.clan-memebers-section > .header {
  background: #87664c;
  width: 100%;
  padding: 0.3vmin 1vmin;
  display: flex;
  justify-content: start;
  align-items: center;
  border-bottom: 0.2vmin solid #000000c7;
  position: relative;
  height: 2rem;
}
.clan-memebers-section > .header > .icon {
  color: #5f4129;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  background: linear-gradient(0deg, #a77040, #ffae00, #ffd273);
  height: 150%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.1vmin solid #0000006b;
  border-radius: 0.5vmin;
  padding: 0.1vmin;
  aspect-ratio: 1;
  font-weight: bold;
  box-shadow: 0 0.2vmin 0vmin #000;
  text-shadow: 0 0.1vmin 0 #ffffff99;
}
.clan-memebers-section > .header > .title {
  transform: translate(-50%);
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  left: 50%;
  position: absolute;
}
.clan-memebers-section > .member {
  width: 100%;
  height: 4rem;
  background: #ded7b3;
  padding: 0.5vmin;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 1vmin;
  position: relative;
  white-space: nowrap;
}
.clan-memebers-section > .member > .profile-pic {
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%;
}
.clan-memebers-section > .member > .profile-pic > img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 1;
  border: 1px solid #868686;
  object-fit: cover;
}
.clan-memebers-section > .member > .user-details {
  display: flex;
  flex-direction: column;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.clan-memebers-section > .member > .user-details > .username {
  color: #b25600;
}
.clan-memebers-section > .member > .user-details > .username.me {
  color: #009d3f;
}

.clan-memebers-section > .member > .user-details > .level {
  color: white;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  font-weight: bold;
}

.clan-memebers-section > .member > .left-side {
  position: absolute;
  left: 1vmin;
  top: 50%;
  transform: translateY(-50%);
  height: 90%;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  gap: 0.5vmin;
  display: flex;
  flex-direction: column;
  width: 15%;
  justify-content: center;
  align-items: center;
}

.clan-memebers-section > .member > .left-side > .status {
  display: flex;
  justify-content: center;
  align-items: center;
}
.clan-memebers-section > .member > .left-side > .status > span {
  color: #626262;
}
.clan-memebers-section > .member > .left-side > .status > span.online {
  color: green;
}
.clan-memebers-section > .member > .left-side > .status > span.playing {
  color: #009ccf;
}
.clan-memebers-section > .member > .left-side > .manage {
  height: 50%;
}
.clan-memebers-section > .member > .left-side > .manage > .manage-btn {
  background: linear-gradient(to bottom, #00a4b1 43%, #0080af 0);
  box-shadow: inset 0 0 0 0.1vmin #0088b1,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #00548c 0.1vmin;
  color: #ffffff;
  height: 100%;
  width: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  padding: 0.3rem;
}
.clan-memebers-section > .member > .left-side > .manage > .manage-btn:hover {
  filter: brightness(1.1);
}
.clan-memebers-section > .member > .left-side > .manage > .manage-btn:active {
  transform: translateY(0.1vmin);
}
.manage-clan-member-con {
  width: 65%;
  height: 18rem;
  position: fixed;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  z-index: 2;
}
.manage-clan-member-con > .header {
  height: 20%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.manage-clan-member-con > .header > .title {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.manage-clan-member-con > .content {
  height: 60%;
  width: 95%;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 5%;
  font-family: var(--Rubik);
  padding: 1vmin 0;
}
.manage-clan-member-con > .content > .clan-member {
  height: 4rem;
  width: 97%;
  display: flex;
  padding: 0.5vmin;
  flex-direction: row;
  align-items: start;
  justify-content: start;
  gap: 1vmin;
  background: #ded7b3;
}
.manage-clan-member-con > .content > .clan-member > .profile-pic {
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%;
}
.manage-clan-member-con > .content > .clan-member > .profile-pic > img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 1;
  border: 1px solid #868686;
  object-fit: cover;
}
.manage-clan-member-con > .content > .clan-member > .user-details {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  justify-content: center;
}
.manage-clan-member-con > .content > .clan-member > .user-details > .username {
  color: #b25600;
}
.manage-clan-member-con
  > .content
  > .clan-member
  > .user-details
  > .username.me {
  color: #009d3f;
}
.manage-clan-member-con
  > .content
  > .clan-member
  > .user-details
  > .player-role {
  height: 50%;
}
.manage-clan-member-con
  > .content
  > .clan-member
  > .user-details
  > .player-role
  > span {
  color: #5f4129;
  font-size: clamp(1rem, 1.2vmin, 1.5rem);
  background: linear-gradient(0deg, #a77040, #ffae00, #ffd273);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.1vmin solid #0000006b;
  border-radius: 0.5vmin;
  padding: 0.1vmin;
  aspect-ratio: 1;
  font-weight: bold;
  box-shadow: 0 0.1vmin 0vmin #000;
  text-shadow: 0 0.1vmin 0 #ffffff99;
  height: 90%;
}
.manage-clan-member-con > .content > .footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 1vmin;
}
.manage-clan-member-con > .content > .footer > .manage-button {
  flex-direction: row;
  gap: 1vmin;
  width: auto;
  padding: 0.3rem;
  background: linear-gradient(to bottom, #00a4b1 43%, #0080af 0);
  box-shadow: inset 0 0 0 0.1vmin #0088b1,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2, 0 0.2vmin 0vmin #000;
  border: solid #00548c 0.1vmin;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.manage-clan-member-con > .content > .footer > .manage-button:hover {
  filter: brightness(1.1);
}
.manage-clan-member-con > .content > .footer > .manage-button:active {
  transform: translateY(0.1vmin);
}
.manage-clan-member-con > .content > .footer > .manage-button.inactive {
  filter: grayscale(1) !important;
}
.manage-clan-member-con > .content > .footer > .manage-button.Regrade {
  background: linear-gradient(to bottom, #7ab100 43%, #619500 0);
  box-shadow: inset 0 0 0 0.1vmin #31b100,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #3c6700 0.1vmin;
}
.manage-clan-member-con > .content > .footer > .manage-button.kick {
  background: linear-gradient(to bottom, #b14400 43%, #953400 0);
  box-shadow: inset 0 0 0 0.1vmin #b14d00,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #670000 0.1vmin;
}
.manage-clan-member-con > .content > .footer > .manage-button.show-profile {
  filter: grayscale(1);
}
.exit-popup {
  display: flex !important
;
  justify-content: center !important;
  align-items: center !important;
  height: 1.7rem !important ;
  width: 1.7rem !important;
  font-size: 2.5rem !important;
  font-weight: bold !important;
  color: white !important;
  text-shadow: 0px 0.2vmin 0 #000, 0.2vmin 0px 0 #000, -0.2vmin 0px 0 #000,
    0px -0.2vmin 0 #000, 0px 0.4vmin 0 #000 !important;
  position: absolute !important;
  right: 1vmin !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 99 !important;
}
.exit-popup:hover {
  color: #ff8181 !important;
}
.exit-popup:active {
  transform: translateY(calc(-50% + 0.1vmin)) !important;
}
.clan-invite-con {
  width: 65%;
  height: 18rem;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  z-index: 3;
}
.clan-invite-con > .header {
  height: 20%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.clan-invite-con > .header > span {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.clan-invite-con > .content {
  height: 58%;
  width: 95%;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-around;
  font-family: var(--Rubik);
  padding: 1vmin 0;
  font-size: clamp(1rem, 1.5vmin, 2vmin);
  padding: 0.4rem;
}
.clan-invite-con > .content > .price-note {
  height: 1.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  color: red;
}
.clan-invite-con > .content > .price-note > img {
  height: 100%;
}
.clan-invite-con > .content > .buttons {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.clan-invite-con > .content > .buttons > .btn {
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  padding: 0.5rem;
  flex: 1 1 200px;
  min-width: 120px;
  filter: grayscale(0.3);
  background: linear-gradient(to bottom, #3794a9 43%, #1a768b 0);
  box-shadow: inset 0 0 0 0.1vmin #0088b1,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #005086 0.1vmin;
}
.clan-invite-con > .content > .buttons > .btn:hover {
  filter: grayscale(0) brightness(1.1);
}
.clan-invite-con > .content > .buttons > .btn:active {
  transform: translateY(0.1vmin);
}

.clan-regrade-con {
  width: 65%;
  height: 18rem;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  z-index: 3;
}
.clan-regrade-con > .header {
  height: 20%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.clan-regrade-con > .header > .title {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.clan-regrade-con > .content {
  height: 75%;
  width: 95%;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;

  font-family: var(--Rubik);
  padding: 1vmin 0;
}
.clan-regrade-con > .content > .roles-radios {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 0.5vmin;
}
.clan-regrade-con > .content > .roles-radios > .role {
  width: 90%;
  display: flex;
  background: #ded7b3;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  position: relative;
  padding: 0.5vmin;
}
.clan-regrade-con > .content > .roles-radios > .role {
  width: 90%;
  display: flex;
  background: #ded7b3;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  position: relative;
  padding: 1vmin 9.19px;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.clan-regrade-con > .content > .roles-radios > .role > label {
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  color: #5f4129;
  font-size: clamp(1rem, 1.2vmin, 1.5rem);
  background: linear-gradient(0deg, #a77040, #ffae00, #ffd273);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.1vmin solid #0000006b;
  border-radius: 0.5vmin;
  padding: 0.1vmin;
  aspect-ratio: 1;
  font-weight: bold;
  box-shadow: 0 0.1vmin 0vmin #000;
  text-shadow: 0 0.1vmin 0 #ffffff99;
  height: 90%;
}
.clan-regrade-con > .content > .roles-radios > .role:hover {
  background: #c9c2a2;
}
.clan-regrade-con > .content > .btns {
  width: 90%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.clan-regrade-con > .content > .btns > .btn {
  color: #ffffff;
  height: 100%;
  width: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  padding: 0.3rem;
}
.clan-regrade-con > .content > .btns > .btn.save {
  background: linear-gradient(to bottom, #7ab100 43%, #619500 0);
  box-shadow: inset 0 0 0 0.1vmin #31b100,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #3c6700 0.1vmin;
}
.clan-regrade-con > .content > .btns > .btn.cancel {
  background: linear-gradient(to bottom, #a7a7a7 43%, #7f7f7f 0);
  box-shadow: inset 0 0 0 0.1vmin #a2a2a2,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #3b3b3b 0.1vmin;
}
.clan-regrade-con > .content > .btns > .btn:hover {
  filter: brightness(1.1);
}
.clan-regrade-con > .content > .btns > .btn:active {
  transform: translateY(0.1vmin);
}
.fade-out {
  transition: 0.3s ease-out;
  opacity: 0;
}
.kick-clan-member-con {
  width: 65%;
  height: 12rem;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  z-index: 3;
}
.kick-clan-member-con > .header {
  height: 25%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.kick-clan-member-con > .header > .title {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.kick-clan-member-con > .content {
  height: 75%;
  width: 95%;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  font-family: var(--Rubik);
  padding: 1vmin 0;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.kick-clan-member-con > .content > .footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 1vmin;
}

.action-btn {
  flex-direction: row;
  gap: 1vmin;
  width: auto;
  padding: 0.3rem;
  background: linear-gradient(to bottom, #00a4b1 43%, #0080af 0);
  box-shadow: inset 0 0 0 0.1vmin #0088b1,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2, 0 0.2vmin 0vmin #000;
  border: solid #00548c 0.1vmin;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.action-btn.red {
  background: linear-gradient(to bottom, #b14400 43%, #953400 0);
  box-shadow: inset 0 0 0 0.1vmin #b14d00,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #670000 0.1vmin;
}
.action-btn.green {
  background: linear-gradient(to bottom, #7ab100 43%, #619500 0);
  box-shadow: inset 0 0 0 0.1vmin #31b100,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #3c6700 0.1vmin;
}
.action-btn.gray {
  background: linear-gradient(to bottom, #a7a7a7 43%, #7f7f7f 0);
  box-shadow: inset 0 0 0 0.1vmin #a2a2a2,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #3b3b3b 0.1vmin;
}
.action-btn:hover {
  filter: brightness(1.1);
}
.action-btn:active {
  transform: translateY(0.1vmin);
}
.clan-con > .content > .clan-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 98%;
  height: 85%;
}
.clan-con > .content > .clan-profile > .top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 98%;
  height: 40%;
  gap: 0.5rem;
  background: #ded7b3;
}
.clan-con > .content > .clan-profile > .top > .badge-details {
  flex-direction: row;
  align-items: center;
  justify-content: start;
  width: 60%;
  display: flex;
  height: 100%;
}
.clan-con > .content > .clan-profile > .top > .badge-details > .clan-badge {
  height: 80%;
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.clan-con
  > .content
  > .clan-profile
  > .top
  > .badge-details
  > .clan-badge
  > .clan-flag {
  width: 30%;
}
.clan-con
  > .content
  > .clan-profile
  > .top
  > .badge-details
  > .clan-badge
  > img {
  width: 100%;
  aspect-ratio: 1;
}
.clan-con > .content > .clan-profile > .top > .badge-details > .clan-details {
  font-size: clamp(1rem, 1.5vmin, 2vmin);
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  color: white;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000,
    0px 2px 0 #000;
  font-weight: bold;
  gap: 0.2rem;
  font-family: "Rubik";
  width: 75%;
  white-space: nowrap;
}
.clan-con
  > .content
  > .clan-profile
  > .top
  > .badge-details
  > .clan-details
  > .field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  padding: 0.1vmin;
  border-bottom: 0.1vmin solid #000;
}

.clan-con > .content > .clan-profile > .top > .clan-description {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.clan-description-input {
  width: 90%;
  height: 50%;
  outline: none;
  border: none;
  background: rgb(135, 102, 76);
  border-radius: 0px;
  color: rgb(255 255 255);
  padding: 0.5rem;
  font-family: var(--Rubik);
  resize: none;
  min-height: 6rem;
}
.clan-description-input::placeholder {
  color: #bfa998;
}
.clan-con > .content > .clan-profile > .bottom {
  width: 98%;
  height: 40%;
}
.clan-con > .content > .clan-profile > .bottom > .buttons {
  width: 100%;
  height: 60%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  white-space: nowrap;
}
.clan-con > .content > .clan-profile > .bottom > .buttons > .btn {
  background: linear-gradient(to bottom, #00a4b1 43%, #0080af 0);
  box-shadow: inset 0 0 0 0.1vmin #0088b1,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #00548c 0.1vmin;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  padding: 0.5rem;
  flex: 1 1 200px;
  min-width: 120px;
  filter: grayscale(0.3);
}
.clan-con > .content > .clan-profile > .bottom > .buttons > .btn:hover {
  filter: grayscale(0) brightness(1.1);
}
.clan-con > .content > .clan-profile > .bottom > .buttons > .btn:active {
  transform: translateY(0.1vmin);
}
.clan-con
  > .content
  > .clan-profile
  > .bottom
  > .buttons
  > .btn.invite-to-clan {
  background: linear-gradient(to bottom, #3794a9 43%, #1a768b 0);
  box-shadow: inset 0 0 0 0.1vmin #0088b1,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #005086 0.1vmin;
}
.clan-con
  > .content
  > .clan-profile
  > .bottom
  > .buttons
  > .btn.pending-requests {
  background: linear-gradient(to bottom, #879c3c 43%, #6e8647 0);
  box-shadow: inset 0 0 0 0.1vmin #94b100,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #255a00 0.1vmin;
}
.clan-con > .content > .clan-profile > .bottom > .buttons > .btn.clan-settings {
  background: linear-gradient(to bottom, #ac8849 43%, #8b6b3d 0);
  box-shadow: inset 0 0 0 0.1vmin #b17f00,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #693a00 0.1vmin;
}
.clan-con > .content > .clan-profile > .bottom > .buttons > .btn.leave-clan {
  background: linear-gradient(to bottom, #c17171 43%, #964d4d 0);
  box-shadow: inset 0 0 0 0.1vmin #ff7777,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #410000 0.1vmin;
}
.loading-clan-data-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #00000094;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  color: white;
  text-shadow: 0px 0.2vmin 0 #000, 0.2vmin 0px 0 #000, -1px 0px 0 #000,
    0px -0.2vmin 0 #000, 0px 0.4vmin 0 #000;
  font-weight: bold;
  font-family: "Rubik";
}

.search-clan-container {
  width: 50%;
  height: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 50rem;
}
.search-clan-container > .header {
  height: 15%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.search-clan-container > .header > span {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  font-family: var(--Rubik);
}
.search-clan-container > .content {
  height: 85%;
  width: 95%;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5%;
  font-family: var(--Rubik);
  padding: 0.5rem 0;
  position: relative;
}
.search-clan-container > .content > .search-field {
  width: 100%;
  height: 3rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.search-clan-container > .content > .search-field > input {
  height: 90%;
  border-radius: 0;
}
.search-clan-container > .content > .search-field > .search-button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 0.1vmin 0.1vmin 0.1vmin #000;
  white-space: nowrap;
  height: 90%;
  background: linear-gradient(to bottom, #b17f00 43%, #936900 0);
  box-shadow: inset 0 0 0 3px #b17f00, inset 0px 2px 0 3px #ffffffc2;
  border: solid #5a3900 3px;
  color: #ffffff;
  aspect-ratio: 1;
}
.search-clan-container > .content > .search-field > .search-button > span {
  height: 1.5rem;
}
.search-clan-container > .content > .search-field > .search-button:hover {
  filter: brightness(1.1);
}
.search-clan-container > .content > .search-field > .search-button:active {
  transform: translateY(0.1vmin);
}
.search-clan-container > .content > .clans-cons {
  height: calc(95% - 3rem);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  overflow-y: auto;
  gap: 0.5rem;
}
.search-clan-container > .content > .clans-cons > .clan {
  width: 98%;
  height: 5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: #dbd6b3;
  box-shadow: 0 0.1vmin 0 #00000059;
  padding: 0.2rem;
}
.search-clan-container > .content > .clans-cons > .clan > .right {
  height: 100%;
  width: 70%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
}
.search-clan-container > .content > .clans-cons > .clan > .right > .clan-pic {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
  aspect-ratio: 1;
}
.search-clan-container
  > .content
  > .clans-cons
  > .clan
  > .right
  > .clan-pic
  > img {
  width: 86%;
  object-fit: cover;
  height: 83%;
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}
.search-clan-container
  > .content
  > .clans-cons
  > .clan
  > .right
  > .clan-details {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-around;
  height: 100%;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  font-family: var(--Rubik);
}
.search-clan-container
  > .content
  > .clans-cons
  > .clan
  > .right
  > .clan-details
  > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-clan-container
  > .content
  > .clans-cons
  > .clan
  > .right
  > .clan-details
  > .clan-tag {
  height: calc(100% / 3);
  color: #ffcb5a;
  text-shadow: 0px 0.1vmin 0 #000, 0.1vmin 0px 0 #000, -0.1vmin 0px 0 #000,
    0px -0.1vmin 0 #000, 0px 0.2vmin 0 #000;
  font-weight: bold;
}
.search-clan-container
  > .content
  > .clans-cons
  > .clan
  > .right
  > .clan-details
  > .clan-country {
  height: calc(100% / 3);
}
.search-clan-container
  > .content
  > .clans-cons
  > .clan
  > .right
  > .clan-details
  > .clan-country
  > img {
  height: 100%;
}
.search-clan-container
  > .content
  > .clans-cons
  > .clan
  > .right
  > .clan-details
  > .clan-members-count {
  height: calc(100% / 3);
  color: #000000;
  font-family: var(--Rubik);
  font-size: clamp(1rem, 1vmin, 2vmin);
}

.search-clan-container > .content > .clans-cons > .clan > .left {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-clan-container
  > .content
  > .clans-cons
  > .clan
  > .left
  > .action-button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: clamp(1.5rem, 2vmin, 8vmin);
  font-family: var(--Rubik);
  text-shadow: 0.1vmin 0.1vmin 0.1vmin #000;
  font-weight: bold;
  color: #ffffff;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  min-width: 8rem;
}
.search-clan-container
  > .content
  > .clans-cons
  > .clan
  > .left
  > .action-button:hover {
  filter: brightness(1.1);
}
.search-clan-container
  > .content
  > .clans-cons
  > .clan
  > .left
  > .action-button:active {
  transform: translateY(0.1vmin);
}
.search-clan-container
  > .content
  > .clans-cons
  > .clan
  > .left
  > .action-button.request {
  background: linear-gradient(to bottom, #00a4b1 43%, #0080af 0);
  box-shadow: inset 0 0 0 0.3vmin #0088b1, inset 0px 0.4vmin 0 0.1vmin #ffffffc2;
  border: 0.3vmin solid #00548c;
}
.search-clan-container
  > .content
  > .clans-cons
  > .clan
  > .left
  > .action-button.open {
  background: linear-gradient(to bottom, #07a211 43%, #008100 0);
  box-shadow: inset 0 0 0 3px #008100, inset 0px 2px 0 3px #ffffffc2;
  border: solid #005200 3px;
}
.search-clan-container
  > .content
  > .clans-cons
  > .clan
  > .left
  > .action-button.closed {
  background: linear-gradient(to bottom, #07a211 43%, #008100 0);
  box-shadow: inset 0 0 0 3px #008100, inset 0px 2px 0 3px #ffffffc2;
  border: solid #005200 3px;
  filter: grayscale(1);
}
.search-clan-container
  > .content
  > .clans-cons
  > .clan
  > .left
  > .action-button.requested {
  background: linear-gradient(to bottom, #a7a7a7 43%, #7f7f7f 0);
  box-shadow: inset 0 0 0 0.1vmin #a2a2a2,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #3b3b3b 0.1vmin;
}
.random-clans-loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #00000094;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  color: white;
  text-shadow: 0px 0.2vmin 0 #000, 0.2vmin 0px 0 #000, -1px 0px 0 #000,
    0px -0.2vmin 0 #000, 0px 0.4vmin 0 #000;
  font-weight: bold;
  font-family: "Rubik";
}
.no-clans-found {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(1rem, 2vmin, 1.5rem);
  color: #3f3f3f;
}
.clan-settings-con {
  width: 70%;
  height: 20rem;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  z-index: 3;
}
.clan-settings-con > .header {
  height: 15%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.clan-settings-con > .header > span {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.clan-settings-con > .content {
  height: 85%;
  width: 95%;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  font-family: var(--Rubik);

  font-size: clamp(1rem, 1.5vmin, 2vmin);
  padding: 0.4rem;
}
.clan-settings-con > .content > .field {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
}
.clan-settings-con > .content > .field > .save {
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  padding: 0.5rem;
  flex: 1 1 200px;
  min-width: 120px;
  filter: grayscale(0.3);
  background: linear-gradient(to bottom, #ac8849 43%, #8b6b3d 0);
  box-shadow: inset 0 0 0 0.1vmin #b17f00,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #693a00 0.1vmin;
}
.clan-settings-con > .content > .field > input,
select {
  padding: 0.2rem;
  font-size: 1rem;
  font-family: var(--Rubik);
  background: #ffffff;
  border: 1px solid #00000038;
  outline: none;
  border-radius: 5px;
  width: 50%;
}
.clan-settings-con > .content > .field > .save:hover {
  filter: brightness(1.1);
}
.clan-settings-con > .content > .field > .save:active {
  transform: translateY(0.1vmin);
}

.clan-pending-requests-con {
  width: 70%;
  height: 20rem;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  z-index: 3;
}
.clan-pending-requests-con > .header {
  height: 15%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.clan-pending-requests-con > .header > span {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.clan-pending-requests-con > .content {
  height: 85%;
  width: 95%;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  font-family: var(--Rubik);

  font-size: clamp(1rem, 1.5vmin, 2vmin);
  padding: 0.4rem;
}
.clan-pending-requests-con > .content > .request-con {
  width: 100%;
  height: 4rem;
  background: #ded7b3;
  padding: 0.5vmin;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 1vmin;
  position: relative;
  white-space: nowrap;
}
.clan-pending-requests-con > .content > .request-con > .right {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  height: 100%;
  gap: 1vmin;
}
.clan-pending-requests-con > .content > .request-con > .right > .profile-pic {
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%;
}
.clan-pending-requests-con
  > .content
  > .request-con
  > .right
  > .profile-pic
  > img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 1;
  border: 1px solid #868686;
  object-fit: cover;
}
.clan-pending-requests-con
  > .content
  > .request-con
  > .right
  > .player-details {
  display: flex;
  flex-direction: column;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.clan-pending-requests-con
  > .content
  > .request-con
  > .right
  > .player-details
  > .field {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
}

.clan-pending-requests-con
  > .content
  > .request-con
  > .right
  > .player-details
  > .field
  > .username {
  color: #b25600;
}
.clan-pending-requests-con
  > .content
  > .request-con
  > .right
  > .player-details
  > .field
  > .username {
  color: #b25600;
}
.clan-pending-requests-con
  > .content
  > .request-con
  > .right
  > .player-details
  > .field.level {
  color: white;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  font-weight: bold;
}
.clan-pending-requests-con > .content > .request-con > .left {
  position: absolute;
  left: 2vmin;
  top: 50%;
  transform: translateY(-50%);
  height: 90%;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  display: flex;
  flex-direction: column;
  width: 20%;
  justify-content: center;
  align-items: center;
}
.clan-pending-requests-con > .content > .request-con > .left > .buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5vmin;
  width: 100%;
}
.clan-pending-requests-con > .content > .request-con > .left > .buttons > .btn {
  color: #ffffff;
  height: 100%;
  width: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  padding: 0.3rem;
}
.clan-pending-requests-con
  > .content
  > .request-con
  > .left
  > .buttons
  > .btn.accept-btn {
  background: linear-gradient(to bottom, #879c3c 43%, #6e8647 0);
  box-shadow: inset 0 0 0 0.1vmin #94b100,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #255a00 0.1vmin;
}
.clan-pending-requests-con
  > .content
  > .request-con
  > .left
  > .buttons
  > .btn.decline-btn {
  background: linear-gradient(to bottom, #c17171 43%, #964d4d 0);
  box-shadow: inset 0 0 0 0.1vmin #ff7777,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #410000 0.1vmin;
}
.clan-pending-requests-con
  > .content
  > .request-con
  > .left
  > .buttons
  > .btn:hover {
  filter: brightness(1.1);
}
.clan-pending-requests-con
  > .content
  > .request-con
  > .left
  > .buttons
  > .btn:active {
  transform: translateY(0.1vmin);
}
.clan-con
  > .content
  > .clan-profile
  > .bottom
  > .buttons
  > .btn
  > .counter-nof-con {
  background: #ff1f27;
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-weight: bold;
  font-size: 1.2rem;
  color: white;
  text-shadow: 0px 0.1vmin 0 #000, 0.1vmin 0px 0 #000, -0.1vmin 0px 0 #000,
    0px -0.1vmin 0 #000, 0px 0.2vmin 0 #000;
  font-family: "Rubik";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
}
.no-clan-requests {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(1rem, 2vmin, 1.5rem);
  color: #3f3f3f;
  white-space: nowrap;
}

.leave-clan-confirm-con {
  width: 70%;
  height: 12rem;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  z-index: 3;
}
.leave-clan-confirm-con > .header {
  height: 20%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.leave-clan-confirm-con > .header > span {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.leave-clan-confirm-con > .content {
  height: 80%;
  width: 95%;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  font-family: var(--Rubik);

  font-size: clamp(1rem, 1.5vmin, 2vmin);
  padding: 0.4rem;
}
.leave-clan-confirm-con > .content > span {
  font-size: clamp(1rem, 2.5vmin, 2vmin);
  height: 50%;
}
.leave-clan-confirm-con > .content > .buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 50%;
}
.leave-clan-confirm-con > .content > .buttons > .btn {
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  padding: 0.5rem;
  flex: 1 1 200px;
  min-width: 120px;
  filter: grayscale(0.3);
  background: linear-gradient(to bottom, #3794a9 43%, #1a768b 0);
  box-shadow: inset 0 0 0 0.1vmin #0088b1,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #005086 0.1vmin;
}
.leave-clan-confirm-con > .content > .buttons > .btn.leave {
  background: linear-gradient(to bottom, #c17171 43%, #964d4d 0);
  box-shadow: inset 0 0 0 0.1vmin #ff7777,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #410000 0.1vmin;
}
.leave-clan-confirm-con > .content > .buttons > .btn.cancel {
  background: linear-gradient(to bottom, #a7a7a7 43%, #7f7f7f 0);
  box-shadow: inset 0 0 0 0.1vmin #a2a2a2,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #3b3b3b 0.1vmin;
}
.leave-clan-confirm-con > .content > .buttons > .btn:hover {
  filter: brightness(1.1);
}
.leave-clan-confirm-con > .content > .buttons > .btn:active {
  transform: translateY(0.1vmin);
}
.clan-con > .content > .chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  width: 98%;
  height: 85%;
  gap: 1rem;
}
.clan-con > .content > .chat > .chat-box {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  width: 100%;
  background: #f5f1d2;
  height: 75%;
  overflow-y: auto;
  padding: 0.5rem;
  gap: 1.3rem;
}
.clan-con > .content > .chat > .chat-box > .message {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  gap: 1rem;
}
.clan-con > .content > .chat > .chat-box > .message > .right {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  height: 100%;
  gap: 1vmin;
}
.clan-con > .content > .chat > .chat-box > .message > .right > .player-pic {
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 3rem;
}
.clan-con
  > .content
  > .chat
  > .chat-box
  > .message
  > .right
  > .player-pic
  > .picture {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 1;
  border: 1px solid #868686;
  object-fit: cover;
}
.clan-con > .content > .chat > .chat-box > .message > .right > .player-pic.circular > .picture {
        border-radius: 50%;
    height: 84%;
    top: 72%;
    border: none;
}
.clan-con
  > .content
  > .chat
  > .chat-box
  > .message
  > .right
  > .player-pic
  > .flag {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40%;
  z-index: 3;
}
.clan-con > .content > .chat > .chat-box > .message > .right > .player-pic.circular > .flag {
    bottom: -50%;
    left: 27%;
}
.clan-con
  > .content
  > .chat
  > .chat-box
  > .message
  > .right
  > .player-pic
  > .frame {
  background: none;
  position: absolute;
  border: none;
  width: 150%;
  z-index: 2;
  height: 130%;
  aspect-ratio: 1;
  object-fit: fill;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -45%);
}
.clan-con > .content > .chat > .chat-box > .message > .right > .player-pic.circular > .frame {
    height: 150%;
}
.clan-con > .content > .chat > .chat-box > .message > .left {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 0.5rem;
}
.clan-con > .content > .chat > .chat-box > .message > .left > .user-details {
  font-size: clamp(1rem, 2vmin, 1.5rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: 0.5rem;
}
.clan-con
  > .content
  > .chat
  > .chat-box
  > .message
  > .left
  > .user-details
  > .player-role {
  color: #5f4129;
  font-size: clamp(0.8rem, 1.2vmin, 1.5rem);
  background: linear-gradient(0deg, #a77040, #ffae00, #ffd273);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.1vmin solid #0000006b;
  border-radius: 0.5vmin;
  padding: 0.1vmin;
  aspect-ratio: 1;
  font-weight: bold;
  box-shadow: 0 0.1vmin 0vmin #000;
  text-shadow: 0 0.1vmin 0 #ffffff99;
  height: 90%;
}
.clan-con
  > .content
  > .chat
  > .chat-box
  > .message
  > .left
  > .user-details
  > .username {
  color: #b25600;
}
.clan-con > .content > .chat > .chat-box > .message > .left > .messaege-text {
  padding: 0.4vmin;
  font-size: clamp(1rem, 1.8vmin, 2vmin);
  background: #c5c1a25e;
}
.clan-con > .content > .chat > .actions-field {
  width: 100%;
  height: 10%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.clan-con > .content > .chat > .actions-field > input {
  width: 85%;
  height: 100%;
}
.clan-con > .content > .chat > .actions-field > .send-btn {
  width: 15%;
  font-family: var(--Rubik);
  border-radius: 5px;
  outline: none;
  background: #ff6e00;
  color: #ffffff;
  text-shadow: 0 2px 1px #000;
  box-shadow: 0 2px 0px #3a2b1f;
  border: 1px #3a2b1f solid;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.clan-con > .content > .chat > .actions-field > .send-btn:hover {
  background: #d15a00;
}
.clan-con > .content > .chat > .actions-field > .send-btn:active {
  box-shadow: none;
  transform: translateY(2px);
}
.clan-con > .content > .chat > .chat-box > .time-sent {
  position: relative;
  width: 100%;
  text-align: center;
  font-size: clamp(1rem, 1.5vmin, 2vmin);
  color: #494949;
  font-family: var(--Rubik);
}
.clan-content-container.missions > span {
  color: #212121;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.chat-box-action-span {
  position: relative;
  width: 100%;
  text-align: center;
  font-size: clamp(1rem, 1.5vmin, 2vmin);
  color: #494949;
  font-family: var(--Rubik);
}
.clan-content-container.missions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  width: 98%;
  height: 85%;
}
.clan-content-container.missions > .clan-rewards-con {
  width: 100%;
  height: auto;
  position: relative;
}
.clan-content-container.missions > .clan-rewards-con::-webkit-scrollbar {
  height: 14px; /* scrollbar height */
}

.clan-content-container.missions > .clan-rewards-con > .rewards-con {
  width: auto;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  gap: 0.1rem;
  padding-bottom: 0.6rem;
}
.clan-content-container.missions > .clan-rewards-con > .rewards-con > .reward {
  width: calc((100% - 0.6rem) / 7);
  background: #0000000d;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  justify-content: center;
}
.clan-content-container.missions
  > .clan-rewards-con
  > .rewards-con
  > .reward
  > img {
  height: 50%;
}
.clan-content-container.missions
  > .clan-rewards-con
  > .rewards-con
  > .reward
  > .count {
  color: white;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000,
    0px 2px 0 #000;
  font-weight: bold;
  font-size: clamp(0.8rem, 2.5vmin, 3vmin);
}
.clan-content-container.missions
  > .clan-rewards-con
  > .rewards-con
  > .reward.claimed {
  background: #00000038;
}

.clan-content-container.missions
  > .clan-rewards-con
  > .rewards-con
  > .progress-con {
  width: 100%;
  height: 0.5rem;
  background: #00000052;
  position: absolute;
  bottom: 0;
  right: 0;
  overflow-x: hidden;
}
.clan-content-container.missions
  > .clan-rewards-con
  > .rewards-con
  > .progress-con
  > .progress-bar {
  height: 100%;
  background: linear-gradient(45deg, #ffd100, #ff7f00);
  width: 31%;
  transition: 1s;
}
.clan-content-container.missions > .clan-progress-con {
  width: 100%;
  background: #0000000d;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}

.clan-content-container.missions > .clan-progress-con > .right > .count-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
}
.clan-content-container.missions
  > .clan-progress-con
  > .right
  > .count-field
  > img {
  height: 1.3rem;
}
.clan-content-container.missions > .clan-progress-con > .left {
  height: 2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.clan-content-container.missions > .clan-progress-con > .left > .missions-done {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.clan-content-container.missions
  > .clan-progress-con
  > .left
  > .missions-done
  > img {
  height: 100%;
}
.clan-content-container.missions > .clan-progress-con > .left > .btn.claim {
  background: linear-gradient(to bottom, #a7a7a7 43%, #7f7f7f 0);
  box-shadow: inset 0 0 0 0.1vmin #a2a2a2,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #3b3b3b 0.1vmin;
  color: #ffffff;
  height: 100%;
  width: 7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  padding: 0.3rem;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.clan-content-container.missions
  > .clan-progress-con
  > .left
  > .btn.claim.eligible {
  background: linear-gradient(to bottom, #ccad00 43%, #a48800 0);
  box-shadow: inset 0 0 0 0.1vmin #b19100,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #8c6b00 0.1vmin;
}
.clan-content-container.missions > .clan-progress-con > .left > .btn:hover {
  filter: brightness(1.1);
}
.clan-content-container.missions > .clan-progress-con > .left > .btn:active {
  transform: translateY(0.1vmin);
}

.clan-content-container.missions > .missions-board {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  height: 70%;
  overflow: hidden;
}
.clan-content-container.missions > .missions-board > .header {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
}
.clan-content-container.missions > .missions-board > .content {
  height: 100%;
  overflow-y: auto;
}
.clan-content-container.missions > .missions-board > .header > .tab {
  padding-bottom: 0.5rem;
  color: #505050;
}
.clan-content-container.missions > .missions-board > .header > .tab.active {
  color: #cc6507;
  border-bottom: 0.15rem solid #cc6507;
}
.clan-content-container.missions
  > .missions-board
  > .header
  > .tab:not(.active):hover {
  color: #000;
}
.clan-content-container.missions > .missions-board > .content > .missions {
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: start;
  gap: 1rem;
  width: 100%;

  height: 100%;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 1rem;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category
  > .title {
  font-weight: bold;
  color: #cc6507;
  font-size: clamp(1rem, 1.5vmin, 2vmin);
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category
  > .missions-rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 0.1rem;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category
  > .missions-rows
  > .mission {
  width: 100%;
  display: flex;
  flex-direction: row;
  background: #0000000d;
  height: 5rem;
  padding: 1vmin;
  border-right: 0.2rem solid #ce6200;
  justify-content: space-between;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category
  > .missions-rows
  > .mission.completed {
  border-right: 0.2rem solid #2b9500;
  background: #0000003d;
}

.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category
  > .missions-rows
  > .mission
  > .right {
  height: 100%;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category
  > .missions-rows
  > .mission
  > .left {
  justify-content: center;
  align-items: center;
  display: flex;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category
  > .missions-rows
  > .mission
  > .left
  > span.claimed {
  color: #e1ff00;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000,
    0px 2px 0 #000;
  font-weight: bold;
  font-size: clamp(0.8rem, 2vmin, 3vmin);
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category
  > .missions-rows
  > .mission
  > .left
  > .btn.claim-reward {
  background: linear-gradient(to bottom, #ccad00 43%, #a48800 0);
  box-shadow: inset 0 0 0 0.1vmin #b19100,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #8c6b00 0.1vmin;
  color: #ffffff;
  height: 65%;
  width: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  padding: 0.3rem;
  font-size: clamp(1rem, 2vmin, 1.5rem);
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category
  > .missions-rows
  > .mission
  > .left
  > .btn:hover {
  filter: brightness(1.1);
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category
  > .missions-rows
  > .mission
  > .left
  > .btn:active {
  transform: translateY(0.1vmin);
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category
  > .missions-rows
  > .mission
  > .right
  > .mission-details {
  height: 100%;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category
  > .missions-rows
  > .mission
  > .right
  > .mission-details
  > .top {
  height: 50%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category
  > .missions-rows
  > .mission
  > .right
  > .mission-details
  > .bottom {
  height: 50%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 1rem;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category
  > .missions-rows
  > .mission
  > .right
  > .mission-details
  > .bottom
  > .reward {
  height: 70%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  color: #000000;
  font-size: clamp(0.8rem, 2vmin, 3vmin);
  gap: 0.1rem;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .missions
  > .category
  > .missions-rows
  > .mission
  > .right
  > .mission-details
  > .bottom
  > .reward
  > img {
  height: 100%;
}
.clan-content-container.missions > .missions-board > .content > .leaderboard {
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: start;
  gap: 1rem;
  width: 100%;
  height: 100%;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .leaderboard
  > .players-rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 0.1rem;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .leaderboard
  > .players-rows
  > .row {
  width: 100%;
  display: flex;
  flex-direction: row;
  background: #0000000d;
  height: 5rem;
  padding: 1vmin;
  justify-content: space-between;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .leaderboard
  > .players-rows
  > .row
  > .right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  font-size: clamp(1rem, 2vmin, 1.5rem);
  color: #b25600;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .leaderboard
  > .players-rows
  > .row
  > .right
  > .profile-pic {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
  aspect-ratio: 1;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .leaderboard
  > .players-rows
  > .row
  > .right
  > .profile-pic
  > img.pic {
  width: 86%;
  object-fit: cover;
  height: 83%;
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .leaderboard
  > .players-rows
  > .row
  > .right
  > .profile-pic
  > img.frame {
  background: none;
  position: absolute;
  border: none;
  width: 130%;
  z-index: 1;
  height: 100%;
  aspect-ratio: 1;
  object-fit: fill;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .leaderboard
  > .players-rows
  > .row
  > .left {
  height: 100%;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .leaderboard
  > .players-rows
  > .row
  > .left
  > .missions-done {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.clan-content-container.missions
  > .missions-board
  > .content
  > .leaderboard
  > .players-rows
  > .row
  > .left
  > .missions-done
  > img {
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.notf-dot {
  width: 1rem;
  aspect-ratio: 1;
  position: absolute;
  left: 0%;
  transform: translate(-36%, -38%);
  top: 0;
  background: #ff3b3b;
  border-radius: 50%;

  border: 2px #3a2b1f solid;
      z-index: 50;
}
.hidden-clan-player-data {
  display: none;
}
.exclamation-con {
  height: 1rem;
  width: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.exclamation-con > img {
  height: 100%;
}

.description-note {
  white-space: nowrap;
  position: absolute;
  height: 1.5rem;

  max-width: 90svw;
  top: -110%;
  left: 50%;
  transform: translateX(-50%);
  background: #d6a666;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000000;
  padding: 0 1vmin;
  min-width: max-content;
  text-shadow: none;
  transition: 0.3s;
  font-size: clamp(0.8rem, 1vmin, 2vmin);
  filter: drop-shadow(0vmin 0.2vmin 0.01vmin black);
  visibility: hidden;
  opacity: 0;
}
.description-note::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0.5rem solid #d6a666;
  top: 95%;
}
.description-note.show {
  visibility: visible;
  opacity: 1;
}

.classic-game-con {
  width: 65%;
  height: 18rem;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  z-index: 3;
}
.classic-game-con > .header {
  height: 20%;
  width: 100%;
  border: solid 4px #271705;
  background-color: #87664c;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.classic-game-con > .header > .title {
  color: #ebe6c1;
  text-shadow: 0 2px 1px #000;
  font-size: 1.4em;
}
.classic-game-con > .content {
  height: 80%;
  width: 95%;
  background: #ebe6c1;
  border: solid 4px #3a2b1f;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-around;
  font-family: var(--Rubik);
  padding: 1vmin 0;
  font-size: clamp(1rem, 1.5vmin, 2vmin);
  padding: 0.4rem;
}
.classic-game-con > .content > .nav {
  height: 20%;
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
}
.classic-game-con > .content > .players-con {
  height: 50%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.classic-game-con > .content > .players-con > .players {
  width: 45%;
  height: 85%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* gap: 10%; */
  border: 0.4vmin solid #87664c;
  padding: 0.2rem 0.5rem;
  background: #87664c;
  position: relative;
  box-shadow: 0 0 0.2vmin 0.2vmin #381900;
  overflow: hidden;
}
.classic-game-con > .content > .players-con > .players::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0.7vmin 0 #000;
}
.classic-game-con > .content > .players-con > .players > .player {
  height: 100%;
  aspect-ratio: 1;
}
.classic-game-con > .content > .players-con > .players > .player.animate {
  animation: playerLoop 1s ease-in-out infinite;
}
.classic-game-con > .content > .players-con > .players > .player > .player-pic {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
  aspect-ratio: 1;
}
.classic-game-con
  > .content
  > .players-con
  > .players
  > .player
  > .player-pic
  > .pic {
  width: 86%;
  object-fit: cover;
  height: 83%;
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}
.classic-game-con
  > .content
  > .players-con
  > .players
  > .player
  > .player-pic
  > .frame {
  background: none;
  position: absolute;
  border: none;
  width: 130%;
  z-index: 1;
  height: 100%;
  aspect-ratio: 1;
  object-fit: fill;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.classic-game-con > .content > .buttons {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  height: 25%;
}
.classic-game-con > .content > .buttons > .btn {
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  padding: 0.5rem;
  flex: 1 1 200px;
  min-width: 120px;
  filter: grayscale(0.3);
  background: linear-gradient(to bottom, #3794a9 43%, #1a768b 0);
  box-shadow: inset 0 0 0 0.1vmin #0088b1,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #005086 0.1vmin;
}
.classic-game-con > .content > .buttons > .btn:hover {
  filter: brightness(1.1);
}
.classic-game-con > .content > .buttons > .btn:active {
  transform: translateY(0.1vmin);
}
.classic-game-con > .content > .buttons > .btn.searching {
  background: linear-gradient(to bottom, #c17171 43%, #964d4d 0);
  box-shadow: inset 0 0 0 0.1vmin #ff7777,
    inset 0px 0.1vmin 0 0.12vmin #ffffffc2;
  border: solid #410000 0.1vmin;
}
.classic-game-con > .content > .buttons > .btn.starting {
  filter: grayscale(1);
}

.customized-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: 0.5rem;
}

.customized-checkbox input[type="checkbox"] {
  display: none;
}

.customized-checkbox .checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  border-radius: 4px;
  position: relative;
  transition: all 0.2s ease;
}

.customized-checkbox input[type="checkbox"]:checked + .checkmark {
  background-color: #87664c;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.customized-checkbox input[type="checkbox"]:disabled + .checkmark {
  background-color: #a9a9a9;
}
.customized-checkbox > .checkmark::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 11px;
  border: solid #ffffff;
  border-width: 0 3px 4px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.8) translate(-50%, -50%);
  transition: all 0.2s ease;
  top: 40%;
  left: 14%;
}

.customized-checkbox > input[type="checkbox"]:checked + .checkmark::after {
  opacity: 1;
}

.customized-checkbox > .label-text {
  margin-left: 8px;
  font-size: 16px;
}
.hasDescriptionNote {
  position: relative;
}
.hasDescriptionNote:hover > .description-note {
  visibility: visible;
  opacity: 1;
}
@keyframes playerLoop {
  0% {
    transform: translateY(-105%);
    visibility: hidden;
  }

  50% {
    visibility: visible;
  }

  100% {
    transform: translateY(105%);
  }
}
.description-box {
 
    width:  40rem;
    height: 18rem;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    z-index: 3;
    max-width: 100%;
}.description-box >.header{
height: 20%;
    width: 100%;
    border: solid 4px #271705;
    background-color: #87664c;
    position: relative;
    display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
}.description-box >.header>.title{
      color: #ebe6c1;
    text-shadow: 0 2px 1px #000;
    font-size: clamp(1rem, 2vmin, 1.5rem);
}.description-box >.content{
     height: auto;
    width: 95%;
    background: #ebe6c1;
    border: solid 4px #3a2b1f;
    border-top: none;
    display: flex
;
    flex-direction: column;
    align-items: start;
    justify-content: space-around;
    font-family: var(--Rubik);
    padding: 1vmin 0;
    font-size: clamp(1rem, 1.5vmin, 2vmin);
    padding: 0.4rem;  
    line-height: 1.6; /* Optional: improves readability */
    overflow-y: auto;

}
.sheep-running {
     transform: scaleX(-1);
    height: 20%;
    position: absolute;
    bottom: 0;
    animation: sheep-running 5s linear infinite;
    z-index: 200;
   
}.sheep-running > img {
    height: 100%;
}
.sheep-coming-message {
      height: 7%;
    position: absolute;
    bottom: 4%;
    z-index: 200;
    animation: right-left-loop 0.4s linear infinite alternate;
}
@keyframes sheep-running {
  0% {
    left: 100%;
  }
  100% {
   left: -20%
  }
}@keyframes right-left-loop {
  0% {
    right: 0;
  }
  100% {
   right: 2%
  }
}
.meat-from-sheep {
height: 5%;
    animation: meat-from-sheep 1s ease-in-out;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
flex-direction: row;
z-index: 200;
gap: 8%;
}.meat-from-sheep >span{
 color: #6ade00;
    text-shadow: 0px 0.1vmin 0 #000, 0.1vmin 0px 0 #000, -0.1vmin 0px 0 #000, 0px -0.1vmin 0 #000, 0px 0.2vmin 0 #000;
    font-weight: bold;
       font-size: clamp(0.8rem, 2.5vmin, 3vmin)
}
.meat-from-sheep >img{
  height: 100%;
}
@keyframes meat-from-sheep {
  0% {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  50% {
   
     transform: translateY(-60%);
    opacity: 1;
    visibility: visible;
  }
  100% {
    transform: translateY(-60%);
    opacity: 0;
    visibility: hidden;
  }
}.ads-con{
 position: absolute;
width: auto;
height: auto;
 z-index: 1000;
display: flex;
  align-items: center;
  justify-content: center;
}
.ads-1-con{
 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
}
.tree-background {
  position: absolute;
    height: auto;
    width: 60%;
    left: 0;
    bottom: 0;
    filter: grayscale(0.4) opacity(0.5);
        pointer-events: none;
}.tree-background>img {
 width: 100%;
}
.menu-button > .message-options-menu {
  transform: translateY(90%);
}
.message-options-menu {
       width: 6rem;
    background: #ddd8b6;
    position: absolute;
    font-size: 0.8rem;
    left: 0rem;
    box-shadow: 0px 2px 0 #00000054;
    bottom: 0;
    border-radius: 5px;
    overflow: hidden;
    z-index: 1;
    transform: translateY(30%);
}.message-options-menu
  > .soon {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: #ffffff;
  font-weight: bold;
  background-color: #00000085;
  position: absolute;
  text-shadow: 1px 1px 0 #000;
}
.message-options-menu
  > div {
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #0000001c;
}
.message-options-menu
  > div:last-child {
  border-bottom: none;
}
.message-options-menu
  > div:not(.soon):hover {
  background-color: #d9a14a;
}
.waiting-response-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0000007a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 90;
}

.spinner-con {
  width: 6%;
  height: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}
.a-text {
  color: var(--orange-color);
}.a-text:hover {
color: var(--orange-color-hover);
cursor: pointer;
}
.supporters-list {
          width: 38rem;
    max-width: 95%;
    height: 37rem;
    max-height: 95%;
    background-color: #fff4e0;
    border-radius: 10px;
    display: flex
;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding: 1rem;
    overflow-y: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--Rubik);
    z-index: 2;
    box-shadow: 0px 0px 10px 0px #000000;
    font-size: clamp(1rem, 2vmin, 1.5rem);
}.supporters-list>.header {position: relative;
    width: 100%;
    height: 3rem;
    display: flex
;
    justify-content: center;
    align-items: center;
    font-size: clamp(1rem, 3vmin, 1.5rem);
}
.supporters-list>.content {    width: 100%;
    background: #f4ebdb;
    height: 100%;
    display: flex
;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding: 0.5rem;
    gap: 0.5rem;    overflow-y: auto;
    overflow-x: hidden;
}
.supporters-list>.content >.supporters{
    
       width: 100%;
    height: 100%;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap:3rem
}
.supporters-list>.content >.supporters>.top-3{
         display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 15rem;
}
.supporters-list>.content >.supporters>.top-3>.top-supporter{
      width: 30%;
    height: auto;
    aspect-ratio: 1;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap:0.5rem;
}.supporters-list>.content >.supporters>.top-3>.top-supporter >.profile-pic{
         display: flex
;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    aspect-ratio: 1;
    filter: drop-shadow(0px 1px 1px black);
}
.supporters-list>.content >.supporters>.top-3>.top-supporter >.profile-pic >.pic{
width: 86%;
    object-fit: cover;
    height: 83%;
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
}
.supporters-list>.content >.supporters>.top-3>.top-supporter >.profile-pic >.frame{
    background: none;
    position: absolute;
    border: none;
    width: 130%;
    z-index: 1;
    height: 100%;
    aspect-ratio: 1;
    object-fit: fill;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}.supporters-list>.content >.supporters>.top-3>.top-supporter.second {
  margin-top: 2rem;
}.supporters-list>.content >.supporters>.top-3>.top-supporter.third {
  margin-top: 3rem;
}.supporters-list>.content >.supporters>.top-3>.top-supporter >.username{
      color: #ffbe3b;
    text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000, 0px 2px 0 #000;
    font-weight: bold;
}
.supporters-list>.content >.supporters>.top-3>.top-supporter.second >.username{
      color:#c0c0c0;
 
}.supporters-list>.content >.supporters>.top-3>.top-supporter.third >.username{
      color: #c8ab77;
 
}
.supporters-list>.content >.supporters>.top-3>.top-supporter >.money-sent{
      color: #70c958;
    text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000, 0px 2px 0 #000;
    font-weight: bold;
        border-radius: 0.5rem;
    
    padding: 0.2rem 1rem;
    position: relative;
    overflow: hidden;
}
.supporters-list>.content >.supporters>.top-3>.top-supporter.first >.money-sent{
 background:#ffa200;
}.supporters-list>.content >.supporters>.top-3>.top-supporter.second >.money-sent{
  background: #7c7c7c;
      
}.supporters-list>.content >.supporters>.top-3>.top-supporter.third >.money-sent{
     background: #b99552;
}.supporters-list>.content >.supporters>.top-3>.top-supporter >.money-sent::before{
 content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: #ffffff52;



}
.supporters-list>.content >.supporters>.users {
width: 100%;
    display: flex
;
    justify-content: start;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}.supporters-list>.content >.supporters>.users >.user{
      width: 100%;
    height: 5rem;
    display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.1vmin solid #00000026;
    padding-bottom: 0.5rem;
}
.supporters-list>.content >.supporters>.users >.user:last-child{
   
    border: none;
    
}

.supporters-list>.content >.supporters>.users >.user>.right{
      display: flex
;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 1rem;
}.supporters-list>.content >.supporters>.users >.user>.right>.profile-pic{
    display: flex
;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
    aspect-ratio: 1;
}.supporters-list>.content >.supporters>.users >.user>.right>.profile-pic >.pic{
width: 86%;
    object-fit: cover;
    height: 83%;
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
}.supporters-list>.content >.supporters>.users >.user>.right>.profile-pic >.frame{
background: none;
    position: absolute;
    border: none;
    width: 130%;
    z-index: 1;
    height: 100%;
    aspect-ratio: 1;
    object-fit: fill;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}.supporters-list>.content >.supporters>.users >.user>.right>.username{
    color: #ffffff;
    text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000, 0px 2px 0 #000;
    font-weight: bold;
}.supporters-list>.content >.supporters>.users >.user>.left >.money-sent {
      color: #70c958;
    text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000, 0px 2px 0 #000;
    font-weight: bold;
}
.ad-popup {
         position: absolute;
    z-index: 500;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0px 5px 4px black);
    width: 33rem;
    max-width: 95%;
    max-height: 82%;


}.ad-popup>.header {
  position: relative;
}.ad-popup>img {
      width: 100%;
    height: auto;
    min-height: auto;
    
}.ad-popup:hover {
      filter: drop-shadow(0px 5px 5px black) brightness(1.1);

}
.purchase-page {
  width: 38rem;
    max-width: 95%;
    height: 20rem;
    max-height: 95%;
    background-color: #fff4e0;
    border-radius: 10px;
    display: flex
;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding: 1rem;
    overflow-y: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--Rubik);
    z-index: 501;
    box-shadow: 0px 0px 10px 0px #000000;
    font-size: clamp(1rem, 2vmin, 1.5rem);
}.purchase-page >.header{    position: relative;
    width: 100%;
    height: 3rem;
    display: flex
;
    justify-content: center;
    align-items: center;
    font-size: clamp(1rem, 3vmin, 1.5rem);}.purchase-page >.content {
          line-height: 1.6;
    }.purchase-page>.content>.contact-info>.field {
          display: flex
;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    }
    .player-inventory {
       position: absolute;
    z-index: 10;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 59rem;
    height: 32rem;
    display: flex
;
    flex-direction: row;
    overflow: hidden;
    backdrop-filter: blur(4px);
    background: #33291fcf;
    font-size: clamp(1rem, 2vmin, 1.5rem);
    font-family: var(--Rubik);
    color: var(--orange-color);
    gap: 1%;max-width: 99%;
    max-height: 90%;
    }
    .player-inventory>.right {
        height: 100%;
    width: 35%;
    display: flex
;
    gap: 1%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }
    .player-inventory>.header {
         position: absolute;
    top: 5%;
    }
    
    .player-inventory>.right>.description {
         width: 90%;
    height: 70%;
    background: #271705;
    overflow: hidden;
    gap: 5%;
    display: flex
;
    flex-direction: column;
    }
     .player-inventory>.right>.description >.picture{
          width: 100%;
    height: 50%;
    display: flex
;
    justify-content: center;
    align-items: center;
    position: relative;
     }
    .player-inventory>.right>.description >.picture>.chalk{
            width: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
     }
     .player-inventory>.right>.description >.picture>.item-pic{
       height: 70%;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    filter: drop-shadow(0px 1px 1px black);
     }
.player-inventory>.right>.description >.details {
          width: 100%;
    height: 50%;
    display: flex
;
    justify-content: start;
    align-items: center;
    position: relative;
    flex-direction: column;
    z-index: 2;
    gap: 10%;   
     padding: 0 1rem;
     overflow-y: auto;
}

.player-inventory>.right>.description >.details >.item-name{
      font-size: 1.5em;
}
.player-inventory>.right>.description >.details >.item-rarity{
   width: 100%;
    display: flex
;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
}
.player-inventory>.right>.description >.details >.item-rarity>span.rarity-title {
color: wheat;
}
.player-inventory>.right>.description >.details >.item-rarity>span.rarity-span.common {
  color: #c4c4c4;
}
.player-inventory>.right>.description >.details >.item-rarity>span.rarity-span.uncommon {
 color: #00ff72;
}
.player-inventory>.right>.description >.details >.item-rarity>span.rarity-span.rare {
 color: #00aaff;
}
.player-inventory>.right>.description >.details >.item-rarity>span.rarity-span.epic {
 color: #fd00ff;
}
.player-inventory>.right>.description >.details >.item-rarity>span.rarity-span.legendary  {
  color: #ff0000;

}
.player-inventory>.right>.description >.details >.description{
     text-align: right;
}
    .player-inventory>.right>.action-buttons {
      width: 90%;
    height: 20%;
    display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    }
    .player-inventory>.right>.action-buttons>.btn {
         width: 90%;
    height: 3rem;
    background: linear-gradient(to bottom, #07a211 43%, #008100 0);
    box-shadow: inset 0 0 0 3px #008100, inset 0px 2px 0 3px #ffffff8a;
    border: solid #005200 3px;
    display: flex
;
    justify-content: center;
    align-items: center;
    position: relative;
    color: wheat;
    max-width: 8rem;
    } .player-inventory>.right>.action-buttons>.btn.exchange {
      background: linear-gradient(to bottom, #a26007 43%, #7b4803 0);
    box-shadow: inset 0 0 0 3px #854d02, inset 0px 2px 0 3px #ffffff8a;
    border: solid #3e2402 3px;
    }
    .player-inventory>.middle {
       height: 100%;
    width: 55%;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    }
 .player-inventory>.middle>.header {        width: 100%;
    height: 15%;
    display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
   }
 .player-inventory>.middle>.header>.right {   
      display: flex
;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    height: 100%;
    gap: 5%;
   }
 .player-inventory>.middle>.header>.right>.title {      
       font-size: 1.5em;
    font-weight: bold;
   }
 .player-inventory>.middle>.content {         width: 100%;
    height: 70%;
    background:#271705;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding: 1rem 0;
  gap: 0.5rem;
  }

.player-inventory>.middle>.content>.items {
      width: 90%;
    display: flex
;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: start;
}

.player-inventory>.middle>.content>.items>.item {
     width: calc(100% / 5 - 0.5rem);
    aspect-ratio: 1 / 1;
    display: flex
;
    justify-content: center;
    align-items: center;
    
    border-radius: 0.2rem;
    position: relative;
    background: #1b0c02;
    border: 0.2vmin solid #d09a44;
}
.player-inventory>.middle>.content>.items>.item>span.quantity{
       position: absolute;
    bottom: 0;
    right: 5%;
    color: white;
    text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000, 0px 2px 0 #000;
}
.player-inventory>.middle>.content>.items>.item:hover {
  background-color: #3b1b07;
  filter: brightness(1.1);
}
.player-inventory>.middle>.content>.items>.item:active {
  background-color: #1b0c02;
  filter: brightness(1);
}
.player-inventory>.middle>.content>.items>.item.checked {
    border: 0.3vmin solid #ffda7e;
    background: #693F15;
    box-shadow: inset 0 0 1vmin #ffffffa3;
}
.player-inventory>.middle>.content>.items>.item>img {
      width: 80%;
    object-fit: cover;
    height: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
 .player-inventory>.middle>.footer {    width: 100%;
    height: 15%;
   }

    .player-inventory>.left {
    height: 100%;
    width: 10%;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #271705;
    box-shadow: inset 0 0 0vmin 0.2vmin #d09a44, inset 0 0 0vmin 0.8vmin #4c3111, inset 0 0 0vmin 1vmin #d09a44;
    }.player-inventory>.left>.tabs {
         width: 100%;
    height: 85%;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    }.scroll-fix {
  direction: ltr;
  overflow-y: auto; /* or scroll */
}.scroll-fix > * {
  direction: rtl;
}.player-inventory>.left>.tabs >.tab {
  aspect-ratio: 1;
    width: 60%;
    display: flex
;
    justify-content: center;
    align-items: center;border-radius: 50%;
    padding: 0.5rem;
}.player-inventory>.left>.tabs >.tab>img {
    width: 100%;
}.player-inventory>.left>.tabs >.tab.checked{
  background: #d5a253;
}
.player-inventory>.left>.tabs >.tab.checked>img {

    filter: brightness(0.5);
}.player-inventory>.left>.tabs >.tab:not(.checked):hover {
  filter: brightness(2);
}.player-inventory>.middle>.header>.left{
      height: 100%;
    width: 35%;
    display: flex
;
    justify-content: center;
    align-items: center;
}.player-inventory>.middle>.header>.left>.items-used{
    height: 100%;
    display: flex
;
    justify-content: center;
    align-items: center;
    width: 50%;
    position: relative;
}


.player-inventory>.middle>.header>.left>.items-used>.counter{
    height: 2rem;
    display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
}.player-inventory>.middle>.header>.left>.items-used>.counter>img{
   height: 100%;
    filter: grayscale(0.5);
    position: absolute;
    right: -35%;
}.player-inventory>.middle>.header>.left>.items-used>.counter>.count{
      display: flex
;
    height: 80%;
    width: 4rem;
    background: #271705;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.player-inventory>.middle>.header>.left>.items-used:hover >.items-used-list{
    visibility: visible;
    opacity: 1
}
.player-inventory>.middle>.header>.left>.items-used>.items-used-list{
         position: absolute;
    top: 80%;
    width: 400%;
    z-index: 1;
    background: #271705;
    border: 0.3vmin solid #d09a44;
    padding: 0.3rem;
    font-size: clamp(0.7rem, 1.3vmin, 1.5rem);
    display: flex
;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 0.5rem;max-height: 10rem;

     visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    min-width: 9rem;
}
.player-inventory>.middle>.header>.left>.items-used>.items-used-list::after {
  content: "";
  position: absolute;
  top: -10px; /* positions it above the container */
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
    border-bottom: 10px solid #d09a44;
}.player-inventory>.middle>.header>.left>.items-used>.items-used-list>.items{
     width: 100%;
    display: flex
;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 0.5rem;
    overflow-y: auto;
    padding: 0.5rem;
}
.player-inventory>.middle>.header>.left>.items-used>.items-used-list>.items>.item{
       min-height: 2rem;
    width: 100%;
    display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.player-inventory>.middle>.header>.left>.items-used>.items-used-list>.title{
      color: #d09a44;    font-weight: bold;

}
.player-inventory>.middle>.header>.left>.items-used>.items-used-list>.items>.item>div {
  height: 100%;
    display: flex
;
    flex-direction: row;
    align-items: center;
}
.player-inventory>.middle>.header>.left>.items-used>.items-used-list>.items>.item>.right{
    height: 100%;
      
}
.player-inventory>.middle>.header>.left>.items-used>.items-used-list>.items>.item>.left{
      color: wheat;
}
.player-inventory>.middle>.header>.left>.items-used>.items-used-list>.items>.item>.right>img{
    height: 100%;
}
.player-inventory>.middle>.header>.left>.items-used>.items-used-list>.items>.item>.left>.time-left{
    height: 100%;
}
.main-nav > .player-banner > .profile-picture.circular > .lobby-frame {
      background: none;
    position: absolute;
    border: none;
    width: 130%;
    z-index: 1;
    height: auto;
    aspect-ratio: 1;
    object-fit: fill;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
transition: 1s;
}
.main-nav > .player-banner > .profile-picture.circular > .lobby-frame:hover {
  transform: translate(-50%, -50%) rotateY(180deg);
}
.main-nav > .player-banner > .profile-picture.circular > .lobby-image {
      border-radius: 50%;
    height: 67%;
    position: absolute;
    left: 51%;
    top: 59%;
    transform: translate(-50%, -50%);
}.right.sidebar > .content > .mid-content > .content > .friend-li > .right > .img.circular >img{
width: 76%;
   
    height: 75%;

    left: 51%;
    top: 45%;
      border-radius: 50%;
}.right.sidebar > .content > .mid-content > .content > .friend-li > .right > .img.circular >.lobby-frame {
    width: 140%;
    height: 150%;
    left: 50%;
    top: 35%;
}#exchangeConfirm {
      position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 99%;
    max-height: 90%;
    height: 14rem;
    width: 27rem;
    z-index: 101;
    background: #33291fcf;
    backdrop-filter: blur(4px);
    box-shadow: inset 0 0 0vmin 0.2vmin #d09a44, inset 0 0 0vmin 0.8vmin #4c3111, inset 0 0 0vmin 1vmin #d09a44;
    padding: 1rem;
    display: flex
;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 9%;
}#exchangeConfirm >.header{
      position: relative;
    height: 25%;
    width: 100%;
}#exchangeConfirm >.buttons {
width: 90%;
    height: 50%;
    display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}#exchangeConfirm >.buttons>.btn {
      width: 90%;
    height: 3rem;
     background: linear-gradient(to bottom, #a26007 43%, #7b4803 0);
    box-shadow: inset 0 0 0 3px #854d02, inset 0px 2px 0 3px #ffffff8a;
    border: solid #3e2402 3px;
    display: flex
;
    justify-content: center;
    align-items: center;
    position: relative;
    color: wheat;
    max-width: 8rem;
}#exchangeConfirm >.buttons>.btn.cancel {
  filter: grayscale(1);
}.news-bar {
      position: fixed;
    top: 13svh;
    z-index: 999;
    backdrop-filter: blur(4px);
    background: #0000008a;
    width: 100%;
    pointer-events: none;
    display: flex
;

}.news-bar >span{
        color: wheat;
    font-size: clamp(0.8rem, 1.8vmin, 1.5rem);
    font-family: var(--Rubik);
}
.news-bar >span.news-content {
       display: inline-block;
    white-space: nowrap;
   
    animation: moveAcross 10s linear forwards;
    position: relative;
    transition: 0.3s;
}

@keyframes moveAcross {
  0% {
    transform: translateX(-100vw);
  }
  100% {
    transform: translateX(100%);
  }
  
}
.news-player-name {
  color: var(--orange-color);
}

.legendary-item-text {
  color: red;
}.epic-item-text {
  color: #fd00ff;
}.right-header-buttons { 
  display: flex;
  justify-content: end;
  align-items: center;
  height: 80%;
  width: auto;
  font-size: clamp(1rem, 1.5vmin, 2vmin);

  position: absolute;
  right: 1vmin;
  top: 50%;
  transform: translateY(-50%);
  gap:0.5rem
}
.right-header-buttons > div {
  height: 60%;
}.right-header-buttons > div>img {
  height: 100%;
}
.adpopup-overlay{
      position: absolute;
    left: 0;
    right: 0;
    backdrop-filter: blur(7px);
    bottom: 0;
    top: 0;
    background-color: #00000075;
    opacity: 1;
    z-index: 499;
    width: 100%;
    height: 100svh;
}#friendChatOptionsBtn {
      font-size: 2rem;
    background: #d9a14a;
}.small-lobby-action-btn {
  padding: 0.4rem 0.5rem;
   
  
    background-color: #000000;
    color: #ffffff;
    font-size: 1.2rem;
    font-family: "Vazirmatn", sans-serif;
   
    display: flex
;width: 50%;
    height: auto;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    justify-content: center;
    max-height: 100%;
    position: relative;
}.small-lobby-action-btn.green {
       background: linear-gradient(to bottom, #07a211 43%, #008100 0);
    box-shadow: inset 0 0 0 2px #008100, inset 0px 2px 0 3px #ffffff8a;
    border: solid #005200 2px;
}.small-lobby-action-btn.red {
    background: linear-gradient(to bottom, #d63c3c 43%, #bf2525 0);
    box-shadow: inset 0 0 0 2px #8d1818, inset 0px 2px 0 3px #ffffff8a;
    border: solid #7a0d0d 2px;
}
.general-ranks-con {
        flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 38rem;
    position: absolute;
    z-index: 50;
    opacity: 1;
    height: 75%;
    display: flex
;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 99%;
    font-size: clamp(1rem, 2vmin, 1.5rem);
}.general-ranks-con >.header{
     height: 4rem;
    width: 100%;
    border: solid 4px #271705;
    background-color: #87664c;
    position: relative;
    gap: 0.5rem;
    display: flex
;
    justify-content: center;
    align-items: center;
}.general-ranks-con >.header>.title{
    color: #ebe6c1;
    text-shadow: 0 2px 1px #000;
    position: relative;
}.general-ranks-con >.content{
        height: calc(100% - 4rem);
    width: 95%;
    background: #ebe6c1;
    border-right: solid 4px #3a2b1f;
    overflow-y: auto;
    padding: 0 1em;
    white-space: nowrap;
    gap: 1rem;
    display: flex
;
    flex-direction: column;
    border: solid 4px #3a2b1f;
    border-top: none;
    position: relative;
}.general-ranks-con >.content>.tabs{
      display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 3rem;
}.general-ranks-con >.content>.tabs>.tab{
     width: calc(100% / 3);
    height: 80%;
    border: none;
    color: #87664c;
    border-radius: 5px;
    display: flex
;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}.general-ranks-con >.content>.tabs>.tab.checked{
  background: #87664c;
    color: #ebe6c1;
}
.general-ranks-con >.content>.select-con {
      display: flex
;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 0.5rem;
}.general-ranks-con >.content>.ranks {
        display: flex
;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    height: 75%;
    padding: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
}.general-ranks-con >.content>.ranks>.rank {
        height: 5rem;
    display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 0.1vmin solid #00000026;
    padding: 0.9rem 0.5rem;
}
.general-ranks-con >.content>.ranks>.rank:last-child {
     
    border-bottom: none;
   
}
.general-ranks-con >.content>.ranks>.rank>.right {
       justify-content: start;
    align-items: center;
    aspect-ratio: 1;
    height: 100%;
    display: flex
;
    flex-direction: row;gap: 1rem;
}
.general-ranks-con >.content>.ranks>.rank>.right.clan-info{
  gap:0;
}
.general-ranks-con >.content>.ranks>.rank>.right>.imgs-con {
            display: flex
;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
    aspect-ratio: 1;
}.general-ranks-con >.content>.ranks>.rank>.right>.imgs-con>.frame {
          background: none;
    position: absolute;
    border: none;
    width: 130%;
    z-index: 1;
    height: 100%;
    aspect-ratio: 1;
    object-fit: fill;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}.general-ranks-con >.content>.ranks>.rank>.right>.imgs-con>.pic {
          width: 86%;
    object-fit: cover;
    height: 83%;
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
}
.general-ranks-con >.content>.ranks>.rank>.right>.imgs-con>.clan-logo {
  width: 100%;
    object-fit: cover;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
}
.general-ranks-con >.content>.ranks>.rank>.right>.imgs-con.circular>.frame {
       height: 150%;
    width: auto;
}
.general-ranks-con >.content>.ranks>.rank>.right>.imgs-con.circular>.pic {
        border-radius: 50%;
    height: auto;
    top: 60%;
    border: none;
    width: 78.3%;
    aspect-ratio: 1;
    left: 51.2%;
}

.general-ranks-con >.content>.ranks>.rank>.right>.imgs-con>.flag {
         width: 35%;
    height: auto;
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateX(-67%);
}
.general-ranks-con >.content>.ranks>.rank>.right.clan-info>.imgs-con>.flag{
  transform: translateX(0%);
}
.general-ranks-con >.content>.ranks>.rank>.right>.user-details {
           height: 100%;
    width: 50%;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: center;
        color: #b25600;
}
.general-ranks-con >.content>.ranks>.rank>.right.country-info >.flag{
    height: 100%;
}
.general-ranks-con >.content>.ranks>.rank>.right >.rank-numbner{
      color: white;
    text-shadow: 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000, 0px 2px 0 #000;
    font-weight: bold;
    font-family: "Rubik";
    width: 1.5rem;
}.general-ranks-con >.content>.ranks>.rank>.right >.rank-numbner.first{
      color: #facb02;
 
}.general-ranks-con >.content>.ranks>.rank>.right >.rank-numbner.second{
      color:#979797;
 
}.general-ranks-con >.content>.ranks>.rank>.right >.rank-numbner.third{
      color: #d49b6e;
 
}