@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {
  --background: rgba(27, 35, 27, 0.94);
  --primary-color: rgba(119, 255, 124, 1);
  --primary-color-transparent: rgba(79, 142, 79, 0.1);
  --primary-color-hover: rgba(89, 152, 89, 1);
  --primary-text-color: #ffffff;
  --primary-border-color: rgba(255, 255, 255, 0.13);
  --primary-background: rgba(255, 255, 255, 0.1);
  --primary-text-opacity: rgba(255, 255, 255, 0.55);
}

@font-face {
  font-family: GilroyMedium;
  src: url(./font/Gilroy-Medium_0.ttf);
  font-style: normal;
}

@font-face {
  font-family: GilroySBold;
  src: url(./font/Gilroy-SemiBold_0.ttf);
  font-style: normal;
}

@font-face {
  font-family: GilroyRegular;
  src: url(./font/Gilroy-Medium_0.ttf);
  font-style: normal;
}

@font-face {
  font-family: GilroyBold;
  src: url(./font/Gilroy-Bold_0.ttf);
  font-style: normal;
}

@font-face {
  font-family: Nature;
  src: url(./font/Nature.ttf);
  font-style: normal;
}

* {
  margin: 0;
  box-sizing: border-box;
  user-select: none;
}

body {
  width: 100vw;
  height: 100vh;
}

#app {

  width: 100%;
  height: 100%;
}

.newGeneral {
  overflow: hidden;
  padding: 3vw 4vw;
  width: 100%;
  height: 100%;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
  transform: translateX(0);
}


.newMenu {
  gap: 1.8229vw;
  flex-direction: column;
  padding: 2.0833vw;
  padding-top: 1.25vw !important;
  position: relative;
  display: flex;
  height: 100%;
  width: 40.625vw;
  border-radius: 1.3542vw;
  background: var(--background);
}

.newTitleBox {
  z-index: 10;
  padding: 0vw 0.9896vw;
  top: -0.5208vw;
  left: -0.5208vw;
  position: absolute;
  width: 14.7917vw;
  height: 5.625vw;
  display: flex;
  align-items: center;
  gap: 0.6771vw;
  border-radius: 0.4167vw;
  background: linear-gradient(
    90deg,
    rgba(41, 65, 41, 1) 0%,
    rgba(87, 128, 86, 1) 100%
  );
}

.newTitleIcon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6458vw;
  height: 3.6458vw;
  border-radius: 0.2805vw;
  border: 1.346px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.12);
}

.newLogo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.newTitleTextBox {
  padding-bottom: 0.7vw;
  display: flex;
  flex-direction: column;
}

.newTitleText {
  background: linear-gradient(
    93deg,
    rgba(58, 169, 56, 0.9) -3.7%,
    rgba(137, 240, 135, 0.9) 98.85%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Barlow;
  font-size: 2.1038vw;
  font-style: normal;
  font-weight: 800;
  line-height: 90%; /* 36.353px */
}

.newTitleSubText {
  color: #fff;
  font-family: Nature;
  font-size: 1.4507vw;
  font-style: normal;
  font-weight: 400;
  line-height: 60%; /* 25.069px */
}

.newTopSide {
  width: 100%;
  display: flex;
  padding-left: 13.5vw;
  animation: topSide 1s ease-in-out;
}

.newLevelSide {
  gap: 0.7292vw;
  padding-left: 0.4688vw;
  padding-right: 0.8333vw;
  display: flex;
  align-items: center;
  width: 18.2813vw;
  height: 3.8542vw;
  border-radius: 0.3646vw;
  background: rgba(255, 213, 105, 0.09);
}

.newLevelIcon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2.9167vw;
  height: 2.9167vw;
  border-radius: 0.2083vw;
  gap: 0.0521vw;
  background: rgba(255, 213, 105, 0.22);
  color: #ffd569;
  text-align: right;
  font-family: GilroyBold;
  font-size: 0.5208vw;
  font-style: normal;
  font-weight: 700;
  line-height: 90%; /* 9px */
}

.newLevelSay {
  color: #ffd569;
  text-align: right;
  font-family: GilroySBold;
  font-size: 1.5625vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 27px */
}

.newLevelRightSide {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4167vw;
}

.newLevelText {
  width: 100%;
  color: #ffd569;
  font-family: GilroySBold;
  font-size: 1.0417vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 18px */
}

.newLevelProgress {
  width: 100%;
  height: 0.2604vw;
  border-radius: 1.0417vw;
  background: rgba(255, 255, 255, 0.13);
}

.newLevelProgressSay {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  width: 10%;
  border-radius: 1.0417vw;
  background: #ffd569;
}

.newLevelProgressSay::before {
  content: "";
  position: absolute;
  right: 0;
  width: 0.3646vw;
  height: 0.3646vw;
  border-radius: 50%;
  background: #fff;
}

.newLevelExpSide {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.newLevelExp {
  color: rgba(255, 255, 255, 0.41);
  text-align: center;
  font-family: GilroyMedium;
  font-size: 0.5208vw;
  font-style: normal;
  font-weight: 500;
  line-height: 117%; /* 11.7px */
}

.newBottomSide {
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.0417vw;

}

.newRegionBox {
  max-height: 15.3646vw;
  flex: 1.8;
  display: flex;
  flex-direction: column;
  gap: 0.9375vw;
  width: 100%;
  animation: bottomSide 1.1s ease-in-out;
}

.newRegionBoxTopSide {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.newMenuTitleBox {
  display: flex;
  align-items: center;
  gap: 0.7292vw;
}

.newMenuTitleBox img {
  width: 1.5625vw;
  height: 1.9792vw;
}

.newMenuTitleTextBox {
  display: flex;
  flex-direction: column;
  gap: 0.3646vw;
}

.newMenuTitleText {
  color: #fff;
  font-family: GilroySBold;
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 16.2px */
}

.newMenuTitleSubText {
  color: rgba(255, 255, 255, 0.67);
  font-family: GilroyRegular;
  font-size: 0.8333vw;
  font-style: normal;
  font-weight: 400;
  line-height: 90%; /* 14.4px */
}

.newMenuArrowSide {
  display: flex;
  align-items: center;
  gap: 0.3646vw;
}

.newMenuArrow {
  width: 2.3438vw;
  height: 1.5104vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.2083vw;
  background: rgba(255, 255, 255, 0.06);
  transition: all 0.3s ease;
  cursor: pointer;
}

.newMenuArrow img {
  opacity: 0.32;
  width: 1.1979vw;
  height: 1.1979vw;
  transition: all 0.3s ease;
}

/* Aktif ok butonları için stil */
.newMenuArrow.active-arrow {
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
}

.newMenuArrow.active-arrow img {
  opacity: 0.8;
}

/* Pasif ok butonları için stil */
.newMenuArrow:not(.active-arrow) {
  cursor: not-allowed;
  opacity: 0.5;
}

.newMenuArrow:not(.active-arrow):hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Aktif butonlar için hover efekti */
.newMenuArrow.active-arrow:hover {
  background: rgba(255, 255, 255, 0.25);
}

.newMenuArrow.active-arrow:hover img {
  opacity: 1;
}

.newMenuArrow:last-child img {
  transform: rotate(180deg);
}

.newRegionList {
  display: flex;
  width: 100%;
  gap: 0.625vw;
  flex: 1;
  width: 100%;
}

.newRegion {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 12.3958vw;
  flex: 1;
  position: relative;
  border-radius: 0.4688vw;
  background: rgba(255, 255, 255, 0.04);
  transition: 0.15s ease-in-out;
}

.newRegion:hover {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
}

.newRegionSelect {
  background: rgba(255, 255, 255, 0.15);
}

.newRegionTopSide {
  z-index: 2;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7292vw;
  padding: 1.0417vw;
  flex: 1;
}

.newRegionNameBox {
  display: flex;
  align-items: center;
  gap: 0.7292vw;
}

.newRegionNameIcon {
  width: 2.3958vw;
  height: 2.3958vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.2604vw;
  background: rgba(217, 217, 217, 0.23);
}

.newRegionNameIcon img {
  opacity: 0.67;
  width: 1.4583vw;
  height: 1.4583vw;
}

.newRegionNameTextBox {
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
}

.newRegionNameText {
  color: #fff;
  font-family: GilroySBold;
  font-size: 1.0417vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 18px */
}
.newRegionNameSubText {
  color: rgba(255, 255, 255, 0.66);
  font-family: GilroyRegular;
  font-size: 0.7813vw;
  font-style: normal;
  font-weight: 400;
  line-height: 90%; /* 13.5px */
}

.newRegionDetailBox {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.2083vw;
  padding: 0vw 0.3646vw;
  border-radius: 0.1991vw;
  background: rgba(255, 255, 255, 0.07);
  height: 1.7188vw;
}

.newRegionDetail {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  font-family: GilroyMedium;
  font-size: 0.7292vw;
  font-style: normal;
  font-weight: 500;
  line-height: 117%; /* 16.38px */
}

.newRegionDetailLine {
  width: 0.0521vw;
  height: 0.9896vw;
  background: rgba(217, 217, 217, 0.29);
}

.newRegionLevelDetail {
  color: rgba(255, 133, 133, 0.57);
}

.newRegionBottomSide {
  z-index: 2;
  display: flex;
  gap: 0.4167vw;
  padding: 0.5208vw;
  width: 100%;
}

.newRegionAwardBox {
  min-height: 1.875vw;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-family: Gilroy;
  font-size: 0.8333vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 14.4px */
  text-align: center;
}

.newRegionExpAward {
  background: rgba(255, 213, 105, 0.08);
  color: #ffd569;
  text-shadow: 0px 0px 0.6521vw rgba(255, 213, 105, 0.6);
}

.newRegionMoneyAward {
  background: rgba(111, 255, 134, 0.08);
  color: #69ff81;
  text-shadow: 0px 0px 0.6521vw rgba(105, 255, 129, 0.6);
}

.newRegionImg {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  z-index: 1;
  opacity: 0.3;
  width: 100%;
  height: 100%;
}

.newPlayerBox {
  overflow: hidden;
  width: 100%;
  flex: 1.2;
  max-height: 10vw;
  display: flex;
  flex-direction: column;
  gap: 0.7292vw;
  min-height: 5.8vw;
  animation: bottomSide 1.2s ease-in-out;
}

.newHomePage,
.newSettingsPage {
  overflow: hidden;
}

.newPlayerBoxTopSide {
  width: 100%;
  display: flex;
  align-items: center;
}

.newPlayerBoxTopSide .newMenuTitleBox img {
  width: 1.5104vw;
  height: 1.5104vw;
}

.newPlayerList {
  justify-content: space-between;
  align-content: flex-start;
  gap: 0.625vw;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex: 1;
  max-height: 7.7083vw;
  overflow-y: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.newPlayer {
  padding: 0vw 0.5208vw;
  display: flex;
  align-items: center;
  gap: 0.625vw;
  position: relative;
  width: 17.9167vw;
  height: 3.5417vw;
  border-radius: 0.4167vw;
  background: rgba(217, 217, 217, 0.07);
}

.newPlayerProfileImg {
  width: 2.5vw;
  height: 2.5vw;
  background-color: #333;
  background-size: cover;
  border-radius: 0.2604vw;
  background-position: center;
}

.newPlayerProfileTextBox {
  display: flex;
  gap: 0.2083vw;
  flex-direction: column;
}

.newPlayerProfileText {
  color: #fff;
  font-family: GilroySBold;
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 600;
  line-height: 117%; /* 21.06px */
}

.newPlayerProfileLevel {
  padding: 0vw 0.3646vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 1.0417vw;
  color: #ffd569;
  font-family: GilroySBold;
  font-size: 0.6771vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 11.7px */
  border-radius: 0.1543vw;
  background: rgba(255, 213, 105, 0.12);
}


.newPlayerProfileInvite {
  padding: 0vw 0.3646vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 1.0417vw;
  color: #5cff5e;
  font-family: GilroySBold;
  font-size: 0.6771vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 11.7px */
  border-radius: 0.1543vw;
  background: rgba(92, 255, 94, 0.12);
}

.newPlayerIcon {
  position: absolute;
  right: 0.9375vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6667vw;
  height: 1.6667vw;
  border-radius: 0.2381vw;
  background: rgba(255, 255, 255, 0.12);
}

.newPlayerIcon img {
  opacity: 0.26;
  width: 1.0677vw;
  height: 1.0677vw;
}

.newPlayerKickButton {
  border-radius: 0.2381vw;
  background: rgba(255, 95, 95, 0.12);
  transition: 150ms ease-in-out;
}

.newPlayerKickButton:hover {
  cursor: pointer;
  background: rgba(255, 95, 95, 0.3);
}

.newPlayerKickButton:hover img {
opacity: 1;
}

.newPlayerKickButton img {
  opacity: 0.38;
  transition: 150ms ease-in-out;
}

.newNearbyPlayer {
  border-radius: 0.4167vw;
  background: none;
  border: 0.0521vw solid rgba(255, 255, 255, 0.19);
  transition: 150ms ease-in-out;
  animation: nearbySide 0.5s ease-in-out;
}

.newNearbyPlayer:Hover {
  cursor: pointer;
  background:rgba(255, 255, 255, 0.05);
}

.newNearbyPlayer .newPlayerProfileTextBox .newPlayerProfileText {
  color: rgba(255, 255, 255, 0.6);
}

.newNearbyPlayer .newPlayerIcon {
  background: rgba(255, 255, 255, 0.24);
}

.newNearbyPlayer .newPlayerIcon img {
  width: 1.1458vw;
  height: 1.1458vw;
  opacity: 0.55;
}

.newPlayerAddInvite .newPlayerProfileTextBox .newPlayerProfileText {
  color: rgba(255, 255, 255, 0.55);
}

.newPlayerAddInvite .newPlayerProfileImg {
  border-radius: 0.2604vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
}

.newPlayerAddInvite .newPlayerProfileImg img {
  width: 1.5625vw;
  height: 1.5625vw;
  opacity: 0.23;
}

.newPlayerAddInvite .newPlayerIcon {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.newPlayerAddInvite .newPlayerIcon img {
  opacity: 0.41;
}

.newPlayerInviteInput {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.2604vw;
  padding: 0 0.5208vw;
  color: var(--primary-text-color);
  font-family: GilroyMedium;
  font-size: 0.8333vw;
  outline: none;
}

.newPlayerInviteInput::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.newPlayerInviteInput:focus {
  border-color: var(--primary-color);
}

.newDetailBox {
  flex: 1;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7552vw;
  animation: bottomSide 1.3s ease-in-out;
}
.newDetailBoxTopSide {
  width: 100%;
  display: flex;
  align-items: center;
}

.newDetailBoxTopSide .newMenuTitleBox img {
  width: 1.1198vw;
  height: 1.1198vw;
}

.newStartButton {
  height: 3.0208vw;
  width: 100%;
  border-radius: 0.5729vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 142, 79, 0.25);
  color: #7dd47d;
  font-family: GilroySBold;
  font-size: 1.1458vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 19.8px */
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  animation: bottomSide 1.4s ease-in-out;
}

.newStartButton:hover {
  background: rgba(79, 142, 79, 1);
  color: white;
}

.newStartButton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 1s;
}

.newStartButton:hover::after {
  left: 100%;
}

.newDetail {
  padding-right: 1.25vw !important;
  display: flex;
  align-items: center;
  gap: 1.5625vw;
  padding: 1.0417vw;
  flex: 1;
  width: 100%;
  border-radius: 0.625vw;
  background: rgba(255, 255, 255, 0.02);
}

.newDetailAwardBox {
  display: flex;
  flex-direction: column;
  width: 8.2292vw;
  gap: 0.3646vw;
}

.newDetailTextBox {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3125vw;
  color: rgba(255, 255, 255, 0.69);
  font-family: GilroySBold;
  font-size: 0.8854vw;
  font-style: normal;
  font-weight: 600;
  line-height: 117%; /* 19.89px */
}

.newDetailSubText {
  color: rgba(255, 255, 255, 0.46);
  font-family: GilroyRegular;
  font-size: 0.7813vw;
  font-style: normal;
  font-weight: 400;
  line-height: 129%; /* 19.35px */
}

.newExitBox {
  position: absolute;
  right: 1.4583vw;
  top: 1.4583vw;
  width: 1.1979vw;
  height: 1.1979vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.1917vw;
  background: linear-gradient(171deg, #ff5454 6.9%, #d12929 95.31%);
}

.newExitBox img {
  width: 0.7292vw;
  height: 0.7292vw;
}

.newCategoryList {
  display: flex;
  align-items: flex-start;
  position: absolute;
  left: 0.03126vw;
  bottom: 3.3vw;
  gap: 0.6771vw;
  transform-origin: bottom left;
  transform: rotate(-90deg);
  white-space: nowrap;
}

.newCategory {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4167vw;
  padding: 0vw 0.9375vw;
  height: 2.7083vw;
  border-radius: 0.4167vw;
  background: rgba(27, 35, 27, 0.94);
  color: rgba(255, 255, 255, 0.48);
  font-family: GilroyMedium;
  font-size: 1.0417vw;
  font-style: normal;
  font-weight: 500;
  line-height: 129%;
  transition: all 0.6s ease;
  position: relative;
  overflow: hidden;
}

.newCategory img {
  opacity: 0.48;
  width: 1.4583vw;
  height: 1.4583vw;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
  transition: all 0.6s ease;
}

.newSelectCategory {
  color: rgba(163, 255, 189, 0.59);
  height: 3.0208vw;
  border-radius: 0.4167vw 0.4167vw 0px 0px;
  animation: selectAnimation 0.6s ease forwards;
}

.newSelectCategory img {
  filter: none;
  width: 1.25vw;
  height: 1.25vw;
  animation: imageAnimation 0.6s ease forwards;
}

@keyframes selectAnimation {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes imageAnimation {
  0% {
    transform: scale(0.9) rotate(-10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.newCategory:hover:not(.newSelectCategory) {
  cursor: pointer;
  background: rgba(37, 45, 37, 0.94);
  transform: translateY(-2px);
}

.newTaskBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7813vw;
  animation: bottomSide 0.8s ease-in-out;
}

.newTaskBoxTopSide {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.newTaskBoxTopSide .newMenuTitleBox img {
  width: 1.25vw;
  height: 1.25vw;
}

.newTaskList {
  width: 100%;
  display: flex;
  gap: 0.7292vw;
}

.newTask {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.0417vw;
  height: 8.3854vw;
  flex: 1;
  border-radius: 0.4167vw;
  background: rgba(255, 255, 255, 0.04);
}

.newTaskProgressBox {
  width: 100%;
  border-radius: 0.3125vw;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  height: 0.1563vw;
}

.newTaskProgress {
  display: flex;
  align-items: center;
  border-radius: 0.3125vw;
  height: 0.3125vw;
  position: relative;
  width: 40%;
  background: rgba(255, 255, 255, 0.32);
}

.newTaskProgress::before {
  content: "";
  position: absolute;
  right: 0;
  width: 0.42vw;
  height: 0.42vw;
  border-radius: 50%;
  background: #d9d9d9;
}

.newTaskAwardBox {
  width: 100%;
  display: flex;
  gap: 0.4688vw;
}

.newTaskAwardBox .newRegionAwardBox {
  min-height: 1.875vw;
  max-height: 1.875vw;
}

.newHistoryBox {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5729vw;
  min-height: 5vw;
  overflow: hidden;
  animation: bottomSide 0.9s ease-in-out;
}

.newHistoryBoxTopSide {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.newHistoryBoxTopSide .newMenuTitleBox img {
  width: 1.3542vw;
  height: 1.3542vw;
}

.newHistoryList {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: 5.5729vw;
  gap: 0.4167vw;
  overflow-y: scroll;
  overflow-x: hidden;
}

.newHistory {
  gap: 0.9375vw;
  padding: 0.7813vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 5.5729vw;
  border-radius: 0.4688vw;
  background: rgba(255, 255, 255, 0.04);
}

.newHistoryLine {
  height: 100%;
  width: 0.0521vw;
  background: rgba(217, 217, 217, 0.15);
}

.newHistoryAwardBox {
  width: 6.25vw;
  display: flex;
  flex-direction: column;
  gap: 0.4167vw;
}

.newHistoryAward {
  flex: 1;
  min-height: 1.5625vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25vw;
  text-align: center;
  font-family: GilroySBold;
  font-size: 0.6766vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 11.691px */
}

.newHistoryPlayerList {
  width: 16.25vw;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4167vw;
}

.newHistoryPlayer {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.2083vw;
  width: 7.9167vw;
  height: 1.4583vw;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.66);
  font-family: GilroyMedium;
  font-size: 0.6766vw;
  font-style: normal;
  font-weight: 500;
  line-height: 90%; /* 11.691px */
}

.newHistoryRegionInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.newHistoryRegionBox {
  display: flex;
  align-items: center;
  gap: 0.4688vw;
}

.newHistoryRegionIcon {
  width: 1.7708vw;
  height: 1.7708vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.1925vw;
  background: rgba(217, 217, 217, 0.23);
}

.newHistoryRegionIcon img {
  opacity: 0.67;
  width: 1.0677vw;
  height: 1.0677vw;
}

.newHistoryRegionTextBox {
  display: flex;
  flex-direction: column;
  gap: 0.3125vw;
}

.newHistoryRegionText {
  color: rgba(255, 255, 255, 0.54);
  font-family: GilroySBold;
  font-size: 0.8333vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 14.4px */
}

.newHistoryRegionSubText {
  color: #7eff93;
  font-family: GilroySBold;
  font-size: 0.6771vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 11.7px */
}

.newHistoryTimeBox {
  display: flex;
  align-items: center;
  gap: 0.2083vw;
  color: rgba(255, 255, 255, 0.48);
  text-align: right;
  font-family: GilroySBold;
  font-size: 0.6766vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 11.691px */
}

.newHistoryTimeBox img {
  opacity: 0.48;
  width: 0.8854vw;
  height: 0.8854vw;
}

.newSettingBox {
  max-height: 13.0208vw;
  gap: 0.625vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: bottomSide 1s ease-in-out;
}

.newSettingBoxTopSide {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.newSettingBoxTopSide .newMenuTitleBox img {
  width: 1.25vw;
  height: 1.25vw;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(100%) contrast(100%);
}

.newSetting {
  padding: 1.0417vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.7813vw;
  overflow: hidden;
  width: 100%;
  flex: 1;
  border-radius: 0.5208vw;
  background: rgba(255, 255, 255, 0.04);
}

.newSettingTopSide {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625vw;
  flex: 1;
}

.newSettingButtonList {
  gap: 0.6771vw;
  display: flex;
  align-items: center;
  width: 100%;
}

.newSettingSaveButton {
  flex: 1;
  display: flex;
  height: 2.3438vw;
  align-items: center;
  justify-content: center;
  border-radius: 0.4167vw;
  background: rgba(79, 105, 142, 0.25);
  color: #7da6d4;
  font-family: GilroySBold;
  font-size: 1.0417vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 18px */
  transition: all 0.2s ease;
  cursor: pointer;
}

.newSettingSaveButton:hover {
  background: rgba(79, 105, 142, 1);
  color: white;
}

.newSettingCheckBox {
  width: 16.875vw;
  padding: 0.8333vw;
  padding-right: 0.5208vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.63);
  font-family: GilroyMedium;
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 500;
  line-height: 90%; /* 16.2px */
  height: 2.4479vw;
  background: rgba(255, 255, 255, 0.05);
}

.checkbox-wrapper-8 .tgl {
  display: none;
}
.checkbox-wrapper-8 .tgl,
.checkbox-wrapper-8 .tgl:after,
.checkbox-wrapper-8 .tgl:before,
.checkbox-wrapper-8 .tgl *,
.checkbox-wrapper-8 .tgl *:after,
.checkbox-wrapper-8 .tgl *:before,
.checkbox-wrapper-8 .tgl + .tgl-btn {
  box-sizing: border-box;
}
.checkbox-wrapper-8 .tgl::-moz-selection,
.checkbox-wrapper-8 .tgl:after::-moz-selection,
.checkbox-wrapper-8 .tgl:before::-moz-selection,
.checkbox-wrapper-8 .tgl *::-moz-selection,
.checkbox-wrapper-8 .tgl *:after::-moz-selection,
.checkbox-wrapper-8 .tgl *:before::-moz-selection,
.checkbox-wrapper-8 .tgl + .tgl-btn::-moz-selection,
.checkbox-wrapper-8 .tgl::selection,
.checkbox-wrapper-8 .tgl:after::selection,
.checkbox-wrapper-8 .tgl:before::selection,
.checkbox-wrapper-8 .tgl *::selection,
.checkbox-wrapper-8 .tgl *:after::selection,
.checkbox-wrapper-8 .tgl *:before::selection,
.checkbox-wrapper-8 .tgl + .tgl-btn::selection {
  background: none;
}
.checkbox-wrapper-8 .tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 3.5938vw;
  height: 1.3021vw;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkbox-wrapper-8 .tgl + .tgl-btn:after,
.checkbox-wrapper-8 .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.checkbox-wrapper-8 .tgl + .tgl-btn:after {
  left: 0;
}
.checkbox-wrapper-8 .tgl + .tgl-btn:before {
  display: none;
}
.checkbox-wrapper-8 .tgl:checked + .tgl-btn:after {
  left: 50%;
}

.checkbox-wrapper-8 .tgl-skewed + .tgl-btn {
  overflow: hidden;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.2s ease;

  text-align: center;
  font-family: GilroyMedium;
  font-size: 0.6771vw;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border-radius: 0.2083vw;
  background: #ce5858;
}
.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after,
.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
  display: inline-block;
  transition: all 0.2s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: black;

  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after {
  left: 100%;
  content: attr(data-tg-on);
}
.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
  left: 0;
  content: attr(data-tg-off);
}
.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active {
  background: #888;
}
.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active:before {
  left: -10%;
}
.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn {
  background: #58ce79;
}
.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:before {
  left: -100%;
}
.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:after {
  left: 0;
  color: #000;
}
.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:active:after {
  left: 10%;
}

.newSettingLanguageBox {
  position: relative;
  width: 16.875vw;
  height: 2.4479vw;
}

.newSettingLanguageSelected {
  border-radius: 0.3646vw;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.63);
  font-family: GilroyMedium;
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 500;
  line-height: 90%; /* 16.2px */
  padding: 0.7813vw;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.arrow {
  position: absolute;
  right: 1.2vw;
  bottom: 1.1vw;
  width: 0.5208vw;
  height: 0.5208vw;
  opacity: 0.38;
  transition: transform 0.3s ease;
}
.arrow img {
  width: 0.82vw;
  height: 0.82vw;
  transition: transform 0.3s ease;
}

.newSettingLanguageBox.active .arrow {
  opacity: 0.7;
  bottom: 0.8vw;
  right: 1vw;
  width: 0.5208vw;
  height: 0.5208vw;
  transform: rotate(180deg);
  transform-origin: center;
}

.newSettingLanguageList {
  z-index: 50;
  position: absolute;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 6vw;
  top: 110%;
  left: 0;
  width: 100%;
  border-radius: 0.365vw;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.26vw;
  display: none;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-0.521vw);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.newSettingLanguageList div {
  padding: 0.5208vw;
  color: rgba(255, 255, 255, 0.63);
  font-family: Gilroy;
  font-size: 0.8vw;
  font-style: normal;
  font-weight: 500;
  line-height: 90%; /* 16.2px */
  cursor: pointer;
  transition: background 0.15s ease;
}

.newSettingLanguageList div:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 1);
}

.newSettingLanguageBox.active .newSettingLanguageList {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.newSettingResetButton {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.3438vw;
  border-radius: 0.4167vw;
  background: rgba(142, 79, 79, 0.25);
  width: 6.9792vw;
  color: #ff7c7c;
  font-family: GilroySBold;
  font-size: 1.0417vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 18px */
  transition: all 0.2s ease;
  cursor: pointer;
}

.newSettingResetButton:hover {
  background: rgba(142, 79, 79, 1);
  color: white;
}

.newSettingMoveBox {
  padding-left: 0.7813vw;
  padding-right: 0.3646vw;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  height: 2.4479vw;
  border-radius: 0.3646vw;
  border: 0.0521vw solid rgba(255, 255, 255, 0.13);
  color: #fff;
  font-family: GilroySBold;
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 16.2px */
}

.newSettinMoveButton {
  cursor: pointer;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.2604vw;
  background: rgba(255, 255, 255, 0.1);
  width: 9.2708vw;
  height: 1.7188vw;
  color: rgba(255, 255, 255, 0.55);
  font-family: GilroyMedium;
  gap: 0.3125vw;
  font-size: 0.7317vw;
  font-style: normal;
  font-weight: 500;
  line-height: 90%; /* 12.644px */
  transition: all 0.6s ease;
}

.newSettinMoveButton img {
  opacity: 0.55;
  width: 0.9583vw;
  height: 0.9583vw;
}

.newSettinMoveButton:hover {
  background: rgba(255, 255, 255, 0.3);     
  color: #FFF;
}

.newSettinMoveButton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.514),
    transparent
  );
  transition: 1s;
}

.newSettinMoveButton:hover::after {
  left: 100%;
}

.slide-fade-move {
  transition: transform 0.5s ease;
}

.slide-fade-enter-active {
  transition: all 0.5s ease;
}

.slide-fade-leave-active {
  transition: all 0.5s ease;
  position: absolute;
}

.slide-fade-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

/* Sağa doğru animasyon */
.slide-right-enter-from {
    opacity: 0;
    transform: translateX(100%);
}

.slide-right-leave-to {
    opacity: 0;
    transform: translateX(-100%);
}

/* Sola doğru animasyon */
.slide-left-enter-from {
    opacity: 0;
    transform: translateX(-100%);
}

.slide-left-leave-to {
    opacity: 0;
    transform: translateX(100%);
}

/* Ortak transition özellikleri */
.slide-left-move,
.slide-right-move {
    transition: transform 0.5s ease;
}

.slide-left-enter-active,
.slide-right-enter-active {
    transition: all 0.5s ease;
}

.slide-left-leave-active,
.slide-right-leave-active {
    transition: all 0.5s ease;
    position: absolute;
}




/* REQUEST MENU */
.requestMenu {
  padding: 1.25vw;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 27.5vw;
  height: 10.9896vw;
  border-radius: 0.2604vw;
  outline: 0.4688vw solid rgba(0, 0, 0, 0.23);
  background: radial-gradient(
      107.03% 100.88% at 39.96% -20.19%,
      rgba(134, 255, 132, 0.08) 0%,
      rgba(134, 255, 132, 0) 100%
    ),
    rgba(22, 31, 22, 0.96);
}

.requestTitle {
  font-family: Barlow;
  font-size: 1.5734vw;
  font-style: normal;
  font-weight: 800;
  line-height: 117%; /* 35.344px */
  background: linear-gradient(
    93deg,
    rgba(58, 169, 56, 0.9) -3.7%,
    rgba(137, 240, 135, 0.9) 98.85%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.requestText {
  color: #fff;
  text-align: center;
  font-family: Barlow;
  font-size: 0.7519vw;
  font-style: normal;
  font-weight: 400;
  line-height: 153%; /* 22.089px */
}

.requestButtonList {
  display: flex;
  gap: 1.0938vw;
}

.denyButton {
  background: linear-gradient(
    98deg,
    rgba(169, 56, 56, 0.9) -1.83%,
    rgba(240, 135, 135, 0.9) 149.2%
  );
  color: #ffb0b0;
}

.acceptButton {
  background: linear-gradient(
    98deg,
    rgba(58, 169, 56, 0.9) -1.83%,
    rgba(137, 240, 135, 0.9) 149.2%
  );

  box-shadow: 0px 0px 2.474vw 0px rgba(78, 176, 76, 0.35);
  color: #b2ffb0;
}

.denyButton:hover {
  cursor: pointer;
  color: #ffffff;
  box-shadow: 0px 0px 2.474vw 0px rgba(176, 76, 76, 0.6);
}

.acceptButton:hover {
  cursor: pointer;
  color: #ffffff;
  box-shadow: 0px 0px 2.474vw 0px rgba(78, 176, 76, 0.6);
}

.requestButton {
  width: 9.8958vw;
  height: 2.0313vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Barlow;
  font-size: 0.8333vw;
  text-align: center;
  font-style: normal;
  font-weight: 500;
  line-height: 117%; /* 18.72px */
  border-radius: 0.2604vw;
  transition: 200ms ease-in-out;
}

/* REQUEST MENU END */



.newTeamList {
  width: 12.3438vw;
  position: absolute;
  height : fit-content;
  right: 1.5625vw;
  bottom: 1.5625vw;
  display: flex;
  flex-direction: column;
  gap: 0.3646vw;
}

.newTeamBox {
  position: relative;
  padding-left: 0.4688vw;
  padding-right: 0.625vw;
  gap: 0.5208vw;
  display: flex;
  align-items: center;
  height: 2.6563vw;
  width: 100%;
  background: var(--background);
  border-radius: 0.4167vw;
}

.newTeamProfileImg {
  width: 1.7188vw;
  height: 1.7188vw;
  border-radius: 0.2618vw;
  object-fit: cover;
}

.newTeamTextBox {
  display: flex;
  flex-direction: column;
  gap: 0.2604vw;
}

.newTeamText {
  color: #fff;
  font-family: GilroyMedium;
  font-size: 0.7159vw;
  font-style: normal;
  font-weight: 400;
  line-height: 90%; /* 12.372px */
}

.newTeamLevelBox {
  width: fit-content;
  height: 0.7292vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0vw 0.2083vw;
  border-radius: 0.1057vw;
  background: rgba(255, 213, 105, 0.12);
  color: #ffd569;
  font-family: GilroySBold;
  font-size: 0.4688vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 8.1px */
}

.newTeamScoreInfo {
  gap: 0.2083vw;
  padding: 0 0.3125vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0.625vw;
  display: flex;
  width: fit-content;
  height: 1.4063vw;
  border-radius: 0.2083vw;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-family: GilroySBold;
  font-size: 0.9vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 16.028px */
}

.newInviteSide {
  position: absolute;
  right: 1.5625vw;
  top: 1.5625vw;
  padding: 1.0417vw;
  display: flex;
  flex-direction: column;
  gap: 0.625vw;
  width: 25.5208vw;
  border-radius: 0.8333vw;
  background: rgba(27, 35, 27, 0.94);
  animation: inviteAnim 1s ease-in-out !important;
}

.newInviteTopSide {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.newInviteTitle {
  gap: 0.5208vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 2.2917vw;
  padding: 0vw 0.625vw;
  border-radius: 0.2604vw;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-family: GilroyBold;
  font-size: 1.0417vw;
  font-style: normal;
  font-weight: 700;
  line-height: 90%; /* 18px */
}

.newInviteTitle img {
  width: 1.4063vw;
  height: 1.4063vw;
}

.newInvitePlayer {
  display: flex;
  width: fit-content;
  height: 2.2917vw;
  align-items: center;
  padding-left: 0.4167vw;
  padding-right: 0.5729vw;
  border-radius: 0.3646vw;
  border: 0.0521vw solid rgba(255, 255, 255, 0.25);
  gap: 0.5208vw;
  color: #fff;
  font-family: GilroySBold;
  font-size: 0.8333vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 14.4px */
}

.newInvitePlayerImg {
  width: 1.4583vw;
  height: 1.4583vw;
  border-radius: 0.2604vw;
  object-fit: cover;
}

.newInviteInfoText {
  width: 100%;
  color: rgba(255, 255, 255, 0.67);
  font-family: GilroyRegular;
  font-size: 0.8vw;
  font-style: normal;
  font-weight: 400;
  line-height: 134%; /* 22.78px */
}

.newInviteButtonList {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.4167vw;
}

.newInviteButton {
  position: relative;
  padding: 0.2604vw;
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: GilroyMedium;
  font-size: 0.8vw;
  font-style: normal;
  font-weight: 500;
  line-height: 134%; /* 22.78px */
  flex: 1;
  height: 2.0313vw;
  border-radius: 0.3125vw;
}

.newRejectButton {
  color: #ff6363;
  border: 0.0521vw solid rgba(255, 85, 85, 0.18);
}
.newAcceptButton {
  color: #63ff63;
  border: 0.0521vw solid rgba(99, 255, 99, 0.18);
}

.newInviteButtonKey {
  position: absolute;
  left: 0.2604vw;
  width: 1.5104vw;
  height: 1.5104vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.2604vw;
  font-family: GilroySBold;
  font-size: 0.8854vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 15.3px */
}

.newRejectButton .newInviteButtonKey {
  background: rgba(255, 85, 85, 0.18);
  color: #ff6363;
}

.newAcceptButton .newInviteButtonKey {
  background: rgba(99, 255, 99, 0.18);
  color: #63ff63;
}

.newFinishScoreSide {
  flex: 1;
}

.newFinishSide {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 37.1354vw;
  width: 25.5208vw;
  position: absolute;
  padding: 1.5625vw;
  left: 9.2188vw;
  gap: 0.8333vw;
  bottom: 5.2083vw;
  border-radius: 1.3542vw;
  background: var(--background);
}

.newFinishTitle {
  padding: 0vw 0.6771vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 2.7083vw;
  border-radius: 0.4688vw;
  background: rgba(119, 255, 124, 0.09);
  color: #77ff7c;
  font-family: GilroyBold;
  font-size: 1.1458vw;
  font-style: normal;
  font-weight: 700;
  line-height: 90%; /* 19.8px */
  gap: 0.4688vw;
}

.newFinishTitle img {
  width: 1.6667vw;
  height: 1.6667vw;
}

.newFinishScoreList {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.625vw;
}

.newFinishMenuTitle {
  color: #fff;
  font-family: GilroyMedium;
  font-size: 1.0417vw;
  font-style: normal;
  font-weight: 500;
  line-height: 90%; /* 18px */
}

.newFinishScoreListBox {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5208vw;
}

.newFinishScoreBox {
  position: relative;
  padding-top: 0.6771vw;
  flex-direction: column;
  align-items: center;
  gap: 0.8333vw;
  display: flex;
  flex: 1;
  /* height: 4.7917vw; */
  height: 100%;
  border-radius: 0.3646vw;
  background: rgba(255, 255, 255, 0.04);
}

.newFinishScoreText {
  color: rgba(255, 255, 255, 0.59);
  font-family: GilroyMedium;
  font-size: 0.8333vw;
  font-style: normal;
  font-weight: 500;
  line-height: 90%; /* 14.4px */
}

.newFinishScoreSubText {
  margin-top: 0.6vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #baffca;
  text-align: center;
  font-family: GilroySBold;
  font-size: 1.5625vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 27px */
}

.newFinishTeamList {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3646vw;
}

.newFinishTeamList .newTeamBox {
  border-radius: 0.4167vw;
  background: rgba(255, 255, 255, 0.04);
}

.newFinishNoInfo h2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.2);
  text-align: center;
  font-family: GilroyMedium;
  font-size: 0.9276vw;
  font-style: normal;
  font-weight: 500;
  line-height: 90%; /* 16.028px */
}

.newFinishNoInfo {
  background: rgba(255, 255, 255, 0.02) !important;
}

.newFinishEarningList {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4167vw;
}

.newFinishEarning {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3125vw;
  min-height: 2.2917vw;
  flex: 1;
  text-align: center;
  font-family: GilroySBold;
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 16.2px */
}

.newFinishExp {
  text-shadow: 0px 0px 0.6521vw rgba(255, 213, 105, 0.6);
  background: rgba(255, 213, 105, 0.08);
  color: #ffd569;
}

.newFinishMoney {
  background: rgba(111, 255, 134, 0.08);
  color: #69ff81;
  text-shadow: 0px 0px 0.6521vw rgba(105, 255, 129, 0.6);
}

.newFinishEarningListSide {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4167vw;
}

.newFinishSkipInfoSide {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.newFinishSkipInfo {
  display: flex;
  align-items: center;
  gap: 0.3646vw;
  color: rgba(255, 255, 255, 0.53);
  font-family: GilroyMedium;
  font-size: 0.8333vw;
  font-style: normal;
  font-weight: 500;
  line-height: 90%; /* 14.4px */
}

.newFinishSkipInfoIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.2604vw;
  width: 1.5625vw;
  height: 1.5625vw;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.56);
  font-family: GilroyMedium;
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 500;
  line-height: 90%; /* 16.2px */
}

.newTeamScoreInfoImg {
  width: 0.9375vw;
  height: 0.9375vw;
  object-fit: contain;
}



/* ALL SCORE MENU */

/* .allScore-enter-active,
.allScore-leave-active {
  transition: opacity 5s ease, transform 5s ease;
}

.allScore-enter-from,
.allScore-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

.allScore-enter-to,
.allScore-leave-from {
  opacity: 1;
  transform: translateX(0);
} */


.allScoreList {
  position: absolute;
  width: fit-content;
  top: 2.0833vw;
  left: 2.0833vw;
  display: flex;
  flex-direction: column;
  gap: 0.5208vw;
}

.allScoreTopSide {
  gap: 0.6771vw;
  width: 100%;
  display: flex;
  align-items: center;
}
.allScoreBox {
  position: relative;
  padding-right: 0.7813vw;
  height: fit-content;
  display: flex;
  align-items: center;
  width: 13.4375vw;
  border-radius: 0.3646vw;
  background: var(--background);
  padding-top: 0.8333vw;
  padding-left: 0.8333vw;
  padding-right: 0.8333vw;
  padding-bottom: 0.8333vw;
  gap: 0.6771vw;
}

.allScoreListShirts {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.2604vw;
}

.allScoreShirtBox {
  padding: 0vw 0.2604vw;
  display: flex;
  align-items: center;
  gap: 0.2604vw;
  position: relative;
  width: 100%;
  height: 1.3542vw;
  border-radius: 0.2083vw;
  background: rgba(255, 255, 255, 0.08);
}

.allScoreShirtTaskBox {
  display: flex;
  position: absolute;
  right: 0.2083vw;
  align-items: center;
  height: 0.9375vw;
  width: fit-content;
  padding: 0vw 0.2604vw;
  gap: 0.2604vw;
  border-radius: 0.1563vw;
  background: rgba(255, 255, 255, 0.06);
}

.allScoreShirtText {
  color: #fff;
  font-family: Barlow;
  font-size: 0.5729vw;
  font-style: normal;
  font-weight: 500;
  line-height: 90%; /* 9.9px */
}

.allScoreShirts {
  gap: 0.7813vw;
  position: relative;
  padding-top: 0.8333vw;
  padding-left: 0.8333vw;
  padding-right: 0.8333vw;
  padding-bottom: 0.8333vw;
  height: fit-content;
  display: flex;

  flex-direction: column;
  width: 13.4375vw;
  border-radius: 0.3646vw;
}

.allScoreBox:nth-child(1) {
  animation: notify 1s ease-in-out !important;
}

.allScoreBox:nth-child(2) {
  animation: notify 1.1s ease-in-out !important;
}

.allScoreBox:nth-child(3) {
  animation: notify 1.2s ease-in-out !important;
}

.allScoreBox:nth-child(4) {
  animation: notify 1.3s ease-in-out !important;
}

.allScoreBox:nth-child(5) {
  animation: notify 1.4s ease-in-out !important;
}

.allScoreBox:nth-child(6) {
  animation: notify 1.5s ease-in-out !important;
}

.allScoreBox:nth-child(7) {
  animation: notify 1.6s ease-in-out !important;
}

.allScoreBox:nth-child(8) {
  animation: notify 1.7s ease-in-out !important;
}

.allScoreIcon {
  width: 1.8229vw;
  height: 1.8229vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.allScoreIcon svg {
  fill: var(--primary-color);
}

.allScoreTextBox {
  display: flex;
  flex-direction: column;
  gap: 0.2083vw;
  flex: 1;
}

.allScoreText {
  color: var(--primary-color);
  font-family: GilroySBold;
  font-size: 0.83vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 10.8px */
}

.allScoreSubText {
  color: #fff;
  font-family: GilroyRegular;
  font-size: 0.52vw;
  font-style: normal;
  font-weight: 400;
  line-height: 127%; /* 12.7px */
}

.allScoreTaskBox {
  display: flex;
  align-items: center;
  height: 0.9375vw;
  width: fit-content;
  padding: 0vw 0.2604vw;
  gap: 0.2604vw;
  border-radius: 0.1563vw;
  background: rgba(255, 255, 255, 0.06);
}

.allScoreTaskText {
  color: #fff;
  font-family: GilroyMedium;
  font-size: 0.625vw;
  font-style: normal;
  font-weight: 500;
  line-height: 90%; /* 10.8px */
}

.allScoreTextBox span {
  color: rgba(255, 255, 255, 0.54);
  font-family: GilroyRegular;
  font-size: 0.625vw;
  font-style: normal;
  font-weight: 400;
  line-height: 90%;
}

/* ALL SCORE MENU END */


.miniGameSide {
  padding: 0.4688vw;
  position: absolute;
  width: 24.2188vw;
  height: 2.3958vw;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2.0833vw;
  border-radius: 0.4167vw;
  background: var(--background);
}

.miniGameBg {
  padding: 0.1563vw;
  width: 100%;
  height: 100%;
  border-radius: 0.5208vw;
  background: rgba(255, 255, 255, 0.08);
}

.miniGame {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(./img/minigameBg.png);
  background-size: cover;
  border-radius: 0.4167vw;
}

.miniGameGreen {
  right: 4.1667vw;
  position: absolute;
  height: 100%;
  width: 3.3854vw;
  border-radius: 0.1042vw;
  background: rgba(71, 255, 145, 0.4);
}

.miniGameCursor {
  left: 4.1667vw;
  position: absolute;
  z-index: 1;
  width: 0.9375vw;
  height: 3.4896vw;
  background-image: url(./img/minigameCursor.png);
  background-size: cover;
}



@keyframes topSide {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes nearbySide {
  0% {
    transform: translateX(-30%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes bottomSide {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}





.notifyList {
  z-index: 99;
  position: absolute;
  left: 2.0833vw;
  top: 2.0833vw;
  display: flex;
  flex-direction: column;
  gap: 0.6771vw;
}

.notifyBox {
  position: relative;
  padding: 0.625vw 0.7813vw;
  display: flex;
  align-items: center;
  gap: 0.7292vw;
  width: 17vw;
  height: fit-content;
  border-radius: 0.3646vw;
  animation: notify 1s ease-in-out;
}

.notifyBox:nth-child(2) {
  animation: notify 1.1s ease-in-out !important;
}

.notifyBox:nth-child(3) {
  animation: notify 1.2s ease-in-out !important;
}

.notifyBox:nth-child(4) {
  animation: notify 1.3s ease-in-out !important;
}

.notifyBox:nth-child(5) {
  animation: notify 1.4s ease-in-out !important;
}

.notifyBox:nth-child(6) {
  animation: notify 1.5s ease-in-out !important;
}

.notifyBox:nth-child(7) {
  animation: notify 1.6s ease-in-out !important;
}

.notifyBox:nth-child(8) {
  animation: notify 1.7s ease-in-out !important;
}

.info {
  background: rgba(31, 41, 50, 0.96);
}

.succes {
  background: rgba(32, 50, 31, 0.96);
}

.error {
  background: rgba(50, 31, 31, 0.96);
}

.notifyBox svg {
  width: 1.7708vw;
  height: 1.7708vw;
}

.info svg {
  fill: #48bdff !important;
}

.error svg {
  fill: #ff4848 !important;
}

.succes svg {
  fill: #62ff48 !important;
}

.notifyTextBox {
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1042vw;
}

.notifyText {
  font-family: Barlow;
  font-size: 0.8vw;
  font-style: normal;
  font-weight: 600;
  line-height: 90%; /* 10.8px */
}

.info .notifyTextBox .notifyText {
  color: #48bdff;
}

.error .notifyTextBox .notifyText {
  color: #ff4848;
}

.succes .notifyTextBox .notifyText {
  color: #62ff48;
}

.notifySubText {
  color: #fff;
  font-family: Barlow;
  font-size: 0.6vw;
  font-style: normal;
  font-weight: 400;
  line-height: 127%; /* 12.7px */
}

.notifyLine {
  position: absolute;
  left: 0;
  width: 0.1vw;
  height: 45%;
}

.info .notifyLine {
  background: #48bdff;
  box-shadow: 0px 0px 0.7031vw 0.1563vw rgba(72, 189, 255, 0.74);
}

.error .notifyLine {
  background: #ff4848;
  box-shadow: 0px 0px 0.7031vw 3px rgba(255, 72, 72, 0.74);
}

.succes .notifyLine {
  background: #62ff48;

  box-shadow: 0px 0px 0.7031vw 0.1563vw rgba(98, 255, 72, 0.74);
}

@keyframes notify {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes inviteAnim {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


/* LOADING BAR MENU */

.loadingBarBox {
  scale: 1.1;
  display: flex;
  flex-direction: column;
  position: absolute;
  align-items: center;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2.2917vw;
}

.loadingBar {
  display: flex;
  align-items: center;

  padding: 0vw 0.2083vw;
  width: 17.2917vw;
  height: 0.6771vw;
  border-radius: 1.5625vw;
  background: rgba(22, 31, 22, 0.9);
}

.loading {
  display: flex;
  align-items: center;
  position: relative;
  width: 0%;
  border-radius: 1.5625vw;
  background: rgba(22, 31, 22, 0.9);
  height: 0.2604vw;
  border-radius: 1.5625vw;
  background: linear-gradient(90deg, #51994f 0%, #86ff84 100%);
  box-shadow: 0px 0px 0.7031vw 0.1563vw rgba(116, 214, 114, 0.38);
}

.loading:before {
  content: "";
  position: absolute;
  width: 0.3646vw;
  height: 0.3646vw;
  right: 0;
  border-radius: 1.5625vw;
  background: #fff;
  box-shadow: 0px 0px 0.7031vw 0.1563vw rgba(116, 214, 114, 0.38);
}

.loadingTextBox {
  padding-top: 0.2vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.2604vw 0.2604vw 0px 0px;
  background: rgba(22, 31, 22, 0.9);
  width: 5.625vw;
  height: 0.8854vw;
  color: #ceffcd;
  font-family: Barlow;
  font-size: 0.4464vw;
  font-style: normal;
  font-weight: 500;
  line-height: 90%; /* 7.714px */
}

.loadingTextLine {
  position: absolute;
  top: 0;
  width: 2.2917vw;
  height: 0.0521vw;
  background: #85fc82;
}

/* LOADING BAR MENU END */




/* tuto menu */

.tutoMenu {
  z-index: 99;
  width: 32.3958vw;
  padding: 2.3958vw;
  padding-top: 4.4vw !important;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 36.4583vw;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  border-radius: 1.1458vw;
  background: var(--background);
  gap: 1.25vw;
  animation: tutoAnim 0.6s ease-in-out;
}

@keyframes tutoAnim {
  0% {
    opacity: 0;
    transform: translate(-50%, 100%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.tutoMenu .newTitleBox {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -2vw;
}

.tutoTitleBox {
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0.3646vw;
}

.tutoTitle {
  color: #fff;
  text-align: center;
  font-family: Barlow;
  font-size: 1.5625vw;
  font-style: normal;
  font-weight: 700;
  line-height: 90%; /* 27px */
}

.tutoSubTitle {
  color: rgba(255, 255, 255, 0.56);
  text-align: center;
  font-family: Barlow;
  font-size: 0.8333vw;
  font-style: normal;
  font-weight: 400;
  line-height: 117%; /* 18.72px */
}

.tutoList {
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 15;
  flex: 1;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.625vw;
}

.tutoBox {
  position: relative;
  padding-left: 0.9375vw;
  padding-right: 0.5208vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 3.0208vw;
  border-radius: 0.3125vw;
  background: rgba(255, 255, 255, 0.04);
}

.tutoBoxName {
  width: 100%;
  color: #fff;
  text-align: left;
  font-family: Barlow;
  font-size: 1.0417vw;
  font-style: normal;
  font-weight: 500;
  line-height: 117%; /* 23.4px */
}

.arrowicn {
  top: 0.65vw;
  position: absolute;
  right: 0.5208vw;
  width: 1.5625vw;
  height: 1.5625vw;
  opacity: 0.35;
}

.openTutoBox {
  padding-top: 0.8854vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1.4063vw;
  gap: 0.7813vw;
  min-height: fit-content;
}

.tutoBoxDesc {
  width: 100%;
  color: rgba(255, 255, 255, 0.56);
  font-family: Barlow;
  font-size: 0.8333vw;
  font-style: normal;
  font-weight: 400;
  line-height: 117%; /* 18.72px */
}

.tutoGif {
  width: 24.6181vw;
  height: 13.8477vw;
  background-position: center;
  background-size: cover;
  border-radius: 0.3125vw;
}



@keyframes slideAnim {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Transition animasyonları sadece dikey hareketi yönetecek */
.slide-enter-active,
.slide-leave-active {
  transition: transform 1.5s ease, opacity 1.5s ease;
}

/* Giriş öncesi: Element başlangıçta yukarıda ve görünmez olsun */
.slide-enter {
  transform: translateY(-100%);
  opacity: 0;
}

/* Giriş tamamlanırken: Element normal konumuna kayarak görünür hale gelsin */
.slide-enter-to {
  transform: translateY(0);
  opacity: 1;
}

/* Çıkış başlangıcı: Normal konumda */
.slide-leave {
  transform: translateY(0);
  opacity: 1;
}

/* Çıkış tamamlanırken: Element tekrar yukarı kayarak görünmez olsun */
.slide-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

.titleLine {
  position: absolute;
  bottom: 0;
  background: #c6ff36;
  box-shadow: 0px 0px 0.7031vw 0.1563vw #c6ff367f;
  width: 6.4583vw;
  height: 0.07vw;
  border-radius: 0.5208vw;
}
.Title {
  z-index: 3;
  padding: 0vw 0.9375vw;
  gap: 0.9375vw;
  align-items: center;
  justify-content: center;
  display: flex;
  position: absolute;
  display: flex;
  left: 2.3438vw;
  top: -1.3vw;
  max-width: 15.1042vw;
  width: fit-content;
  height: 4.5833vw;
  border-radius: 0.3125vw 0.3125vw 0px 0px;
  background: radial-gradient(11.83% 12.14% at 100% 0%, rgba(255, 56, 56, 0.2) 0%, rgba(255, 56, 56, 0) 100%), radial-gradient(27.43% 27.67% at 50% 0%, rgba(46, 131, 60, 0.19) 0%, rgba(46, 131, 60, 0) 100%), linear-gradient(118deg, rgba(26, 37, 26, 0.96) 10.98%, rgba(98, 139, 114, 0.96) 229.31%);
}

.titleIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7083vw;
  height: 2.7083vw;
  border-radius: 0.2083vw;
  border: 0.0521vw solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.12);
}

.Logo {
  width: 2.7083vw;
  height: 2.7083vw;
  object-fit: cover;
}

.titleTextBox {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.4vw;
}

.titleText {
  font-family: Barlow;
  font-size: 1.628vw;
  font-style: normal;
  font-weight: 800;
  line-height: 90%; /* 28.132px */
  background: linear-gradient(93deg, rgba(45, 88, 34, 0.9) -3.7%, rgba(130, 189, 125, 0.9) 98.85%);

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.titleSubText {
  color: #fff;
  font-family: Nature;
  font-size: 1.1227vw;
  font-style: normal;
  font-weight: 400;
  line-height: 50%; /* 19.4px */
}

.titleLine {
  position: absolute;
  bottom: 0;
  background: #2e833c;
  box-shadow: 0px 0px 0.7031vw 0.1563vw #2e833c;
  width: 6.4583vw;
  height: 0.1042vw;
}