body { margin: 0; }
canvas { display: block; }

#miningStatusContainer {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 100;
}

.minerImagesContainer {
  position: relative;
  width: 100%; /* Adjust based on your layout */
  height: 250px; /* Adjust based on your layout */
}

.minerImage {
  position: absolute;
  width: 8vw;  /* 150px 와 20 vw 중 작은 것;*/
  max-width: 150px;
  min-width: 50px;
  height: auto;
}

@media (max-width: 720px) {
  .minerImage {
    width: 20vw; 
  }
}
  
#miningStatus {
  width: 200px;
  padding: 10px 10px 16px 10px;
  border-radius: 5px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
}

#progressBarContainer {
  width: 100%;
  background-color: #ddd;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 5px;
}

#miningprogressBar {
  height: 20px;
  background: #ffcc00;
  width: 0%;
  transition: width 0.4s ease;
}

#org_rewardContainer {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  display: none;
  margin: 0 auto;
  width: 250px;
  border-radius: 14px;
}
#org_rewardImage {
    width: 100%;
    cursor: pointer;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid #000000;
}

#rewardContainer {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  display: none;
  margin: 0 auto;
  width: 250px;
  height: 250px;
  border-radius: 14px;
  overflow: hidden;
}

#rewardImage {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지가 컨테이너를 꽉 채우도록 설정 */
}

#rewardTitle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7); /* 반투명 검은 배경 */
  color: white;
  font-size: 13px;
  padding: 10px;
  margin: 0;
}
#miningVehicleImage {
    width: 160px;
    height: 120px;
    margin-right: 10px;
}


#radarContainer {
  position: absolute;
  bottom: 10px;
  left: 4px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(138, 170, 247, 0.4);
  background: rgba(8, 3, 108, 0.9);
  overflow: hidden;
  z-index: 999;
}

#radarBackground {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0,255,0,0.1) 0%, rgba(0,255,0,0.05) 65%, rgba(0,255,0,0) 100%),
              repeating-radial-gradient(circle, rgba(0,255,0,0.1) 0%, rgba(0,255,0,0.1) 7%, transparent 7.5%),
              repeating-conic-gradient(from 0deg, rgba(0,255,0,0.2) 0deg 1deg, transparent 1deg 30deg);
}
#radarSweep {
  position: absolute;
  width: 100%;
  height: 100%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(225, 225, 225, 0.8) 5deg, transparent 30deg);
  animation: sweep 3s linear infinite;
  transform-origin: center;
}

@keyframes sweep {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

.radarPoint {
  position: absolute;
  width: 4px;
  height: 4px;
  background: red;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.radarPoint.visible {
  opacity: 1;
}

.radarPoint.incomplete {
  background: red;
}

.radarPoint.complete {
  background: rgb(0, 140, 255);
}

/*dash board*/
#gameDashboard {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#topDashboard {
    display: flex;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 10px 20px;
    margin: 10px;
}

.dashboard-item {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.dashboard-item img {
    width: 32px;
    height: 32px;
    margin-right: 5px;
}

.dashboard-text {
    color: white;
    font-size: 16px;
}

#miningAreaName {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(0, 234, 255);
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 20px 10px 20px;
    border-radius: 5px;
    font-size:12px;
    text-align: center;
}
#photoshutter {
  position: absolute;
  bottom: 116px;
  left: 50%;
  transform: translateX(-50%);
  color: rgb(255, 255, 255);
  padding: 10px;
  font-size:48px;
  text-align: center;
  z-index:999;
}

#photochoice {
  position: absolute;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  color: rgb(255, 255, 255);
  padding: 10px;
  font-size:16px;
  text-align: center;
  z-index:999;
}

#photoZone{
  position: absolute;
  bottom: 200px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  z-index:998;
}

#toolbarMenuIcon {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

#toolbarMenuIcon img {
    width: 40px;
    height: 40px;
}

/* 고도조종장치 */
.cockpit {
  position: relative;
  right: 30px;
  top: 160px;
  width: 30px;
  height: 128px;
  z-index:1000;
  padding: 5px;
}

.control-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.altitude-display {
  font-size: 10px;
  margin-bottom: 10px;
}
.lever-container {
  width: 30px;
  height: 100px;
  background-color: rgba(128, 128, 128, 0.1);
  border-radius: 30px;
  position: relative;
  cursor: pointer;
}
.lever {
  width: 30px;
  height: 30px;
  background-color:#3597cc;
  border-radius: 50%;
  position: absolute;
  bottom: 35px;
  background-image: radial-gradient(circle, rgb(54, 54, 54), rgb(0, 0, 0));
}
.lever::after {
/*  content: '⇅';*/
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 24px;
  color: #2a2a2a;
}
/* 고도조종장치 */

#joystick-container {
    position: relative;
    right: 0px;
    top: 150px;
    width: 128px;
    height: 128px;
    z-index:1999;
}
#stick1 {
    position: absolute;
    left: 32px;
    top: 32px;
    z-index:2000;
}

#spinButton {
    position: absolute;
    top: 20px;
    left: 10px;
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    z-index:9999;
}

  /*레벨시스템*/

.p_level-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    aspect-ratio: 5 / 7;
    display: flex;
    flex-direction: column;
}

.p_level-card:hover, .p_level-card:active {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2);
}

.p_levelcardcontainer {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}

.p_level-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.p_level-card:hover .p_level-avatar {
    transform: scale(1.05);
}

.p_card-info {
    padding: 10px;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

  /*
  .levelcontainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    perspective: 1000px;
  }
  .leveltitle {
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
    margin-bottom: 30px;
  }
  .level-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    transform-style: preserve-3d;
    animation: rotate 120s infinite linear;
  }
  @keyframes rotate {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
  }
    */

  .level-button {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    background: radial-gradient(circle at 30% 30%, #4CAF50, #2E7D32);
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.7);
    position: relative;
    overflow: hidden;
  }
  .level-button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
    transform: rotate(45deg);
  }
  .level-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(76, 175, 80, 0.9);
  }
  .level-button:nth-child(5n-4) { background: radial-gradient(circle at 30% 30%, #FF5722, #E64A19); }
  .level-button:nth-child(5n-3) { background: radial-gradient(circle at 30% 30%, #2196F3, #1976D2); }
  .level-button:nth-child(5n-2) { background: radial-gradient(circle at 30% 30%, #FFC107, #FFA000); }
  .level-button:nth-child(5n-1) { background: radial-gradient(circle at 30% 30%, #9C27B0, #7B1FA2); }
  .level-button:nth-child(5n) { background: radial-gradient(circle at 30% 30%, #F44336, #D32F2F); }
/*레벨시스템*/

/*Condensed font Style: https://fonts.google.com/selection/embed*/
.barlow-condensed-light {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.barlow-condensed-regular {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.barlow-condensed-medium {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.barlow-condensed-semibold {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.barlow-condensed-bold {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.barlow-condensed-regular-italic {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.barlow-condensed-medium-italic {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.barlow-condensed-semibold-italic {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-style: italic;
}
/*Condensed font Style*/

.facility-card {
  background-color: #1a1a2e;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.facility-card:hover {
  transform: translateY(-5px);
}

.facility-card__image {
  position: relative;
  overflow: hidden;
}

.facility-card__image img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.facility-card:hover .facility-card__image img {
  transform: scale(1.05);
}

.facility-card__content {
  padding: 1rem;
}

.facility-card__title {
  font-size: 1.2rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.facility-card__stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  /*font-family: 'Barlow Condensed', sans-serif;*/
}

.stat-item {
  text-align: center;
}

.stat-label {
  font-size: 0.8rem;
  color: #a0a0a0;
  display: block;
}

.stat-value {
  font-size: 1rem;
  color: #ffffff;
  font-weight: bold;
}

.facility-card__description {
  font-size: 0.9rem;
  color: #cccccc;
  margin-bottom: 1rem;
  line-height: 1.2em;
  height: 2.4em; /* 2줄의 높이 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2줄로 제한 */
  -webkit-box-orient: vertical;
}

.facility-card__upgrade-btn {
  display: block;
  width: 100%;
  padding: 0.5rem;
  background-color: #e63946;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.facility-card__upgrade-btn:hover {
  background-color: #c02c38;
}

.facility-card__price {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.9rem;
}

.facility-card__price img {
  margin-right: 5px;
}
.facility-card__image {
  position: relative;
  overflow: hidden;
}

.deed-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: rgba(219, 219, 219, 0.7);
  z-index:99999;
}

.deed-progress {
  height: 100%;
  /*background-color: #f40072;  */
  background: linear-gradient(45deg, #19ba00, #004e0d);
  transition: width 0.3s ease;
}

.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.anton-sc-regular {
  font-family: "Anton SC", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 300;
  font-style: normal;
}

/* tcg card 300px;420px;*/
#cardsWrapper {
  position: relative;
  width: 350px; 
  height: 490px; 
}
.picktcg-palyer-card {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transform-origin: center bottom;
  aspect-ratio: 5 / 7;
}

.tcg-palyer-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    margin-bottom: 20px;
    aspect-ratio: 5 / 7;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}

.tcg-palyer-card {
  transition: transform 0.3s ease;
}

.tcg-palyer-card:hover {
  transform: translateY(-5px);
  transform: scale(1.05);
}

.tcg-palyer-card_img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.tcg-palyer-card_content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.6) 100%);
    color: white;
}
.tcg-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5%;
}
.tcginfo-suitx {
  width: 18%;
  aspect-ratio: 1 / 1;
  background: rgba(0,0,0,0.6);
  border: rgba(255,160,0,0.6) 1px solid;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3vw;
  margin-bottom: 6px;
}

.tcginfo-suit, .tcginfo-id, .tcginfo-power, .tcginfo-multiplier, .tcginfo-type {
    width: 18%;
    aspect-ratio: 1 / 1;
    background: rgba(0,0,0,0.6);
    border: rgba(255,160,0,0.6) 1px solid;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3vw;
    margin-bottom: 6px;
}
.tcg-bottom-stats {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    width: 100%;
}
.tcginfo-bomb, .tcginfo-tradingprice {
    font-size: 2.2vw;
}
.tcg-card-description {
  font-size: 13px;
  text-align: center;
  padding: 2% 3%;
  background: rgba(0,0,0,0.6);
  border-radius: 10px;
  margin-top: 2%;
  line-height: 1.8;
  height: 9em;  /*7줄에 해당하는 높이 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  word-break: break-word;
}
.tcg-card-marked{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 34px!important;
  color: rgba(0,0,255,1);
}
/* 반응형 폰트 크기 조정 */
@media (min-width: 1200px) {
    .tcginfo-id { font-size: 36px; }
    .tcginfo-power, .tcginfo-multiplier, .tcginfo-type { font-size: 30px; }
    .tcginfo-bomb, .tcginfo-tradingprice { font-size: 30px; }
}

@media (max-width: 576px) {
  .tcginfo-id, .tcginfo-power, .tcginfo-multiplier, .tcginfo-type { font-size: 16px; }
  .tcginfo-bomb, .tcginfo-tradingprice { font-size: 13px; }
  }
  /* 작은 화면에서의 폰트 크기 조정 
@media (max-width: 576px) {
.tcginfo-id, .tcginfo-power, .tcginfo-multiplier, .tcginfo-type { font-size: 30px; }
.tcginfo-bomb, .tcginfo-tradingprice { font-size: 24px; }
}
*/
/* 다른 글자의 바닥에 일치하도록 정렬시킨다 */
.tcginfo-tail {
  font-size: 12px;
  position: relative;
  top: 0.25em; /* 적절한 값을 찾아 조정합니다 */
}


/*Agent chat bubble*/
.agentchat-bubble {
  --r: 1em;  /* the radius */
  --t: 1.5em; /* the size of the tail */
  
  max-width: 400px;
  font-size: 16px;
  font-weight: 400;
  padding: 1em;
  border-inline: var(--t) solid #0000;
  border-radius: calc(var(--r) + var(--t))/var(--r);
  mask: 
    radial-gradient(100% 100% at var(--_p) 0,#0000 99%,#000 102%) 
      var(--_p) 100%/var(--t) var(--t) no-repeat,
    linear-gradient(#000 0 0) padding-box;
  background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
  color: #fff;
}
.agentchat-left {
  --_p: 0;
  border-bottom-left-radius: 0 0;
  place-self: start;
}
.agentchat-right {
  --_p: 100%;
  border-bottom-right-radius: 0 0;
  place-self: end;
}
.agentchat-body {
  margin: 0;
  display: grid;
  gap: 20px;
}

.agentchat-row {
  margin: 0;
  display: flex;
  align-items: flex-end; /* Align items to the bottom */
}
.agentchat-avatar {
  flex-shrink: 0; /* Ensure avatar does not shrink */
  width: 80px; /* Default size for screens smaller than 768px */
}

@media (min-width: 576px) {
  .agentchat-avatar { width: 130px; }
}

.center-align {
  display: flex;
  justify-content: center;
  align-items: center;
}

#nwfwcontainerflex {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#nwfwcontainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
#messageWrapper {
  margin-top: 20px;
  opacity: 0;
  transform: translateY(20px);
}

/* 슬롯 */
.slot-card{
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  margin-bottom: 20px;
  aspect-ratio: 5 / 7;
 background-color: #a0a0a0;
}
.slot-title{
  font-size: 1.2rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

/*dashboard mining stats */
#miningStatsContainer {
  position: absolute;
  top: 80px;
  right: 0px;
  width: 160px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 5px 0px 0px 5px;
  z-index: 999;
}
.stat-row {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  color: white;
}
.stat-text {
  font-size: 24px;
  font-weight: bold;
  margin-right: 5px;
}
.stat-tail {
  font-size: 13px;
  opacity: 0.7;
}
.stat-label {
  font-size: 13px;
  margin-left: auto;
}

/*quiz */
.quiz-container { max-width: 600px; margin: auto; padding: 20px; color: #fff;}
.option-btn { margin: 4px 0; padding: 20px; border-radius: 12px; background-color: #f9e5cd; color: #000;}
.option-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(76, 175, 80, 0.9);
}

.result-chart { height: 300px; width: 100%; }
.hidden { display: none; }
#quiz-progress-bar { height: 5px; background-color: #4CAF50; width: 0%; transition: width 0.3s; }
/* quiz end */

.basesummarycontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px;
}

.basesummary {
  font-size: 16px;
  padding: 15px;
  background: rgba(0,0,0,0.6);
  border-radius: 10px;
  line-height: 1.6;
  margin-bottom: 14px;
  text-align: left;
  position: relative; /* 부모 컨테이너에 relative 설정 */
}

.upgradebtn {
  position: absolute;
  top: 50%; /* 수직 중앙 */
  right: 10px; /* 오른쪽 여백 */
  transform: translateY(-50%); /* 수직 중앙 정렬 */
}


/*quiz */
#quiz-container {
  background-color: #fff;
  color: #333;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 400px;
  text-align: center;
  position: relative;
}

#question-container {
  margin-bottom: 20px;
}
.guideContainer{
  max-width: 400px;
}
.quiz-option {
  display: block;
  width: 100%;
  padding: 16px;
  margin: 10px 0;
  background-color: #E0E0E0;
  color: #333;
  border: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: 48px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.quiz-option:hover {
  background-color: #9E9E9E;
}

#next-btn {
  background-color: #8E24AA;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#next-btn:hover {
  background-color: #6A1B9A;
}

.feedback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  display: none;
}

/* quiz end */
.baseselbutton{
  margin-right: 4px;
  margin-bottom: 4px;
  padding: 4px;
}

/*기지 업그레이드*/
.upfacil_upgrade-container {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.upfacil_progress-bar {
  width: 300px;
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 0;
}
.upfacil_progress {
  width: 0;
  height: 100%;
  background-color: #af4caf;
  transition: width 0.5s ease-in-out;
}
.upfacil_status {
  font-weight: bold;
  margin-bottom: 10px;
}
.upfacil_complete {
  color: #af4caf;
  display: none;
}

/*우상단 정보창*/

#hud {
  position: absolute;
  top: 190px;
  right: 0px;
  width: 150px;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.7);
  color: rgb(223, 223, 220);
  padding: 10px;
  border-radius: 5px 0px 0px 5px;
  font-size: 12px;
  line-height: 16px;
}

#hud div {
  margin-bottom: 5px;
}

.wf-14{
  width: 14px;
  text-align: center;
}
.wf-16{
  width: 20px;
  text-align: center;
}

#miningcontaner{
  background-color: #000;
}

#nobomulplanetlogo{
  position:absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  /*
  left: 0px;
  */
  z-index: 9999;
}
#nobomulplanetserialno{
  position:absolute;
  bottom: 4px;
  right: 22px;
  font-size: 12px;
  color: rgba(190, 190, 190, 0.2);
  z-index: 9999;
  cursor: pointer;
}


.bg-solana {
  background: linear-gradient(to right, rgb(200, 100, 255), rgb(0, 200, 255));
  color: white;
  border: none;
}

.bg-solana:hover {
  opacity: 0.9;
}

.facility-level-info {
  position: relative;
  font-size: 18px;
  padding: 8px 0px 0px 0px;
  background-color: #000;
  color: white;
}

.facility-progress-bar {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.2)
}

.facility-progress {
  height: 100%;
  background-color: #19bde6;
  transition: width 0.3s ease;
}

/* 추가된 CSS */
.level_start, .level_end {
  position: absolute;
  top: 10px; /* facility-progress-bar 위에 위치시키기 위해 */
  font-size: 14px;
  color: rgb(145, 145, 145);
}

.level_start {
  left: 4px;
}

.level_end {
  right: 4px;
}

.two-column-div {
  display: flex;
  flex-wrap: wrap;
}
.two-column-div > div {
  width: 50%;
}
.text-gijititle {
  display: inline-block;  /* 인라인 요소의 넓이를 설정하기 위해 블록 요소로 처리 */
  max-width: 100x;  /* 텍스트가 차지할 수 있는 최대 너비 설정 (예: 100px) */
  white-space: nowrap;  /* 텍스트가 줄 바꿈되지 않도록 설정 */
  overflow: hidden;  /* 넘치는 텍스트를 숨김 */
  text-overflow: ellipsis;  /* 넘치는 부분을 말줄임표(...)로 처리 */
  vertical-align: middle;  /* 텍스트가 중간에 오도록 정렬 */
}

/* 게임 상단 헤더 */
#inventorycontainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
  padding: 20px 6px 10px 6px;
  border-radius: 10px;
  width: auto; /* Adjust as necessary */
  height: 50px; /* Adjust as necessary */
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  min-width: 200px;
}
.invent_gemperhour {
  color: #ffffff;
  font-size: 10px;
  position: absolute;
  top: -4px; /* Position it where needed */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

.invent_gem {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  margin-right: 8px;
}

.invent_lv {
  color: #f4901f; /* Golden color for level text */
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.invent_symbol img {
  width: 24px; /* Adjust icon size */
  height: 24px;
  vertical-align: middle;
}

.invent_symbol a img {
  width: 24px; /* Adjust icon size */
  height: 24px;
  vertical-align: middle;
}


/* Optional: Add hover effect */
#inventorycontainer:hover {
  background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */
}

.spawned-creature {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/*page 드래그 방지*/
#gamecontainer {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.bottomtoolbar {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
  /*background-color: #f0f0f0;*/
  color: #000;
  text-align: center;
  z-index:1000;
  /* Additional styling if needed */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  /* Additional styling if needed */
}

.bottomtoolbar a:first-child {
  margin-right: auto;
}

.avatarcontainer {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.player-avatar {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-70%, -50%) scale(2); /* Center and scale the image */
}

.player-avatar-ex {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-75%, -50%) scale(2); /* Center and scale the image */
}

/* 선택적: 터치 디바이스에서의 추가 설정 */
@media (hover: none) and (pointer: coarse) {
  #gamecontainer {
    touch-action: none;
    -webkit-overflow-scrolling: none;
  }
}

/* 선택적: iOS에서의 추가 설정 */
@supports (-webkit-overflow-scrolling: touch) {
  #gamecontainer {
    -webkit-overflow-scrolling: auto;
  }
}

/* 메인 게임화면 툴바 */
#maingame-toolbar, #gem-bottom-toolbar {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px 16px;
  border-radius: 10px;
  z-index: 10000;
}

.maingame-toolbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 수직 및 수평 가운데 정렬 */
  margin: 0 6px;
  width: 46px;
  cursor: pointer;
}

.maingame-toolbar-item a {
  display: flex;
  justify-content: center; /* 아이콘을 가로 중앙에 정렬 */
  align-items: center; /* 아이콘을 수직 중앙에 정렬 */
  width: 100%; /* a 태그가 전체 너비를 차지하도록 설정 */
}

.maingame-toolbar-item i {
  line-height: 1; /* 아이콘이 정확히 가운데 정렬되도록 조정 */
}

.icon-label {
  margin-top: 5px;
  font-size: 12px;
  color: white;
  text-align: center;
}

.maingame-toolbar-item img {
  width: 30px;
  height: 30px;
  min-width:30px;
}


.gem-toolbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 6px;
}

.gem-toolbar-item img {
  width: 44px;
  height: 44px;
  min-width:44px;
}


/* 메인 UI 툴바 */
.toolbar-item {
  min-width: 44px;
  min-height: 44px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

#gamecontainer, #miningcontainer {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}


.gemContainerLandscape {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 비율로 컨테이너를 설정 (예시) */
  overflow: hidden; /* 컨테이너를 벗어나는 이미지를 숨김 */
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.gemContainer {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* 정사각형 비율을 유지 */
  overflow: hidden; /* 컨테이너를 벗어나는 이미지를 숨김 */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.gemImage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지 비율을 유지하면서 컨테이너를 채움 */
  object-position: center; /* 이미지를 가운데로 맞춤 */
  transform: translate(-50%, -50%); /* 중앙 정렬 */
}

.gem-card {
  position: relative;
  margin-bottom: 10px;
  border: 1px solid rgba(64, 65, 99, .4);
  border-radius: 12px;
}
.gem-card_content-show {
  z-index: 1;
  text-align: left;
  background-color: black;
  padding: 16px 16px;
  opacity: 1;
  visibility: show;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -webkit-transition: all ease 0.4s;
  transition: all ease 0.4s;
}
.gphline, .gcostline {
  display: flex;
  align-items: center; /* 수직 가운데 정렬 */
}
.gtabline {
  display: flex;
  align-items: center; /* 수직 가운데 정렬 */
  justify-content: center;
}

.gtabline img {
  vertical-align: middle; /* 이미지의 수직 정렬 */
}

.gtabline h4, .gtabline h5, .gtabline h6 {
  margin: 0; /* 기본 마진 제거 */
}

.gphline img, .gcostline img {
  display: inline-block;
  margin-right: 3px; /* 이미지와 텍스트 사이에 여백 추가 */
  vertical-align: middle;
}

.gphlabel{
  position: absolute;
  font-size: 12px;
  color: #9c9c9c;
  margin-left: 2px;
  margin-top:-30px;
}
.font-24 {
  font-size: 24px;
}

.titleindented {
  top: 6px;
  border: 1px solid rgba(211, 211, 211, 0.4);
  padding: 0px 6px;
  font-size: 13px;
}
.gphtitle {
  white-space: nowrap;       /* 텍스트를 한 줄로 표시 */
  overflow: hidden;          /* 넘치는 텍스트를 숨김 */
  text-overflow: ellipsis;   /* 넘치는 부분을 말줄임표로 표시 */
  display: block;            /* 블록 요소로 설정 (필요시) */
  width: 100%;               /* 부모 요소의 너비에 맞춤 */
}

.gemImage {
  -webkit-user-drag: none; /* 크롬, 사파리 */
  -moz-user-drag: none;    /* 파이어폭스 */
  -o-user-drag: none;      /* 오페라 */
  user-drag: none;         /* 기본값 */
}

/* earn channel */
.channelbodywrap {
  text-align: left;
  max-width: 640px;
  margin: 0 auto;
}

.earnchannelOuterContainer {
  display: flex;
  align-items: center; /* 수직 가운데 정렬 */
  background-color: #2d2d2d;
  color: #fff;
  border-radius: 16px;
  font-size: 14px;
  padding: 10px 16px; /* padding 조정 */
  margin-bottom: 12px; /* 리스트 간의 간격 조정 */
  transition: background-color 0.3s ease;
}

.earnchannelOuterContainer:hover {
  background-color: #4d4d4d; /* 호버 시 배경색 변화 */
}

.channellogo {
  width: 54px;  /* 고정된 너비를 설정하여 로고 영역이 일정하게 유지 */
  height: 54px; /* 고정된 높이 설정 */
  flex-shrink: 0; /* 텍스트 길이에 따라 로고 크기가 줄어들지 않도록 설정 */
  display: flex;
  justify-content: center; /* 로고 이미지가 중앙에 오도록 정렬 */
  align-items: center; /* 로고 이미지가 수직으로도 중앙에 오도록 정렬 */
}

.channellogo img {
  max-width: 100%;  /* 로고 이미지를 부모 요소에 맞게 조정 */
  max-height: 100%; /* 로고 이미지를 부모 요소에 맞게 조정 */
  object-fit: contain; /* 이미지 비율을 유지하면서 크기를 조정 */
}

.channelbody {
  flex-grow: 1; /* 남은 공간을 채우도록 설정 */
  padding: 0px 10px; /* 좌우 패딩 조정 */
  font-size: 14px;
  line-height: 1.2; /* 줄 간격을 줄이도록 설정 (값은 필요에 따라 조정 가능) */
}

.channelearn {
  padding: 0px;
  display: flex;
  align-items: center;
  margin-top:2px;
}

.gphprofit{
  padding: 0px;
  display: flex;
  align-items: center;
  margin-top:10px;
  gap: 6px;
}
.gphprofit img, .channelearn img {
  margin:0; /* 아이콘과 텍스트 사이 간격 조정 */
}

.channelgo {
  width: 40px;
  min-width: 40px;
  text-align: center;
  color: #ccc; /* 아이콘 색상 설정 */
}

.channelgo i {
  font-size: 20px;
}
.bannerouterwrap{text-align: center;margin-top: 50px;margin-bottom: 40px;}

.bannerwrap {
  display: flex;
  align-items: center; /* 수직 가운데 정렬 */
  justify-content: space-between; /* 아이템 사이에 균등한 간격을 줌 */
  margin: 0px auto; /* 상단과 하단 마진을 20px, 좌우 마진을 auto로 설정하여 가운데 정렬 */
  max-width: 640px; /* 최대 너비 설정 */
  width: 100%; /* max-width 내에서 너비를 100%로 설정 */
}

.tabganewrap{
  margin: 20px auto; /* 상단과 하단 마진을 20px, 좌우 마진을 auto로 설정하여 가운데 정렬 */
  max-width: 640px; /* 최대 너비 설정 */
}

.oldbanneritem {
  padding: 8px 4px 4px 4px;
  background-color: #2d2d2d;
  color: #fff;
  border-radius: 16px;
  text-align: center;
  flex: 1; /* 아이템이 가능한 한 동일한 너비를 가지도록 함 */
  margin: 0 4px; /* 아이템 사이에 일정한 간격을 추가 */
  max-width: 120px;
  min-width: 100px;
  transition: transform 0.2s ease, background-color 0.2s ease; /* 애니메이션 효과 */
}

.banneritem:active {
  background-color: #1c1c1c; /* 탭했을 때 배경색을 어둡게 변경 */
  transform: scale(0.95); /* 탭했을 때 약간 작아지는 효과 */
}

.banneritem:focus {
  outline: none; /* 포커스 시 기본 테두리 제거 */
}

.banneritem:first-child {
  margin-left: 0; /* 첫 번째 아이템의 왼쪽 마진 제거 */
}

.banneritem:last-child {
  margin-right: 0; /* 마지막 아이템의 오른쪽 마진 제거 */
}

.banner_title {
  font-size: 11px;
  color: #fff;
  margin-top: 10px;
}

.banner_nextsec{
  font-size: 10px;
  color: #9e9e9e;
}


.tabgameContainer {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* 정사각형 비율을 유지 */
  overflow: hidden; /* 컨테이너를 벗어나는 이미지를 숨김 */
  border-radius: 50%; /* 모든 모서리를 둥글게 처리하여 원형으로 만듦 */
  border: 2px solid #162997;
  background-color: #0b0b0b; /* 배경색 지정 (필요시) */
}

.Container-sqare {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.comboitem {
  position: relative;
  width: 100%;
  padding: 20px;
  background-color: #2d2d2d;
  border-radius: 8px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border: 2px solid; /* 보더 두께 설정 */
  border-image: linear-gradient(to bottom, gold 60%, transparent 100%) 1 100%; /* 상단에서 중앙까지 황금색 그라디언트 보더 */
}
/*콤보프라이즈*/
.comboprize {
  display: flex;
  justify-content: space-between; /* 좌측과 우측 끝에 배치 */
  align-items: center; /* 수직 가운데 정렬 */
  padding: 10px 0; /* 필요에 따라 위아래 패딩 설정 */
}

.comboprizetitle {
  display: flex;
  align-items: center; /* 수직 가운데 정렬 */
  text-align: left; /* 좌측 끝에 정렬 */
  margin-right: auto; /* 우측 항목과 간격을 유지하도록 설정 */
}

.comboprizeamount {
  display: flex;
  align-items: center; /* 수직 가운데 정렬 */
  flex-shrink: 0; /* 너무 작아지지 않도록 설정 */
  padding: 8px 16px; /* 내부 패딩 설정 */
  background: linear-gradient(45deg, #ffd700, #ff8c00); /* 황금색에서 오렌지색으로 그라디언트 */
  border-radius: 12px; /* 둥근 모서리 설정 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 효과 */
  color: #fff; /* 텍스트 색상 */
  font-weight: bold; /* 텍스트를 굵게 */
}

.comboprizeamount img {
  margin-right: 8px; /* 이미지와 텍스트 사이의 간격 설정 */
}

.comboprizeamount h4 {
  margin: 0; /* 기본 마진 제거 */
  font-size: 16px; /* 텍스트 크기 설정 */
}

.dayrewardouterwrap{text-align: center;margin-top: 70px;margin-bottom: 40px;}

.dayrewardwrap{
  margin: 20px auto; /* 상단과 하단 마진을 20px, 좌우 마진을 auto로 설정하여 가운데 정렬 */
  max-width: 640px; /* 최대 너비 설정 */
}

.dayrewardwrap {
  display: flex;
  flex-wrap: wrap; /* 아이템이 줄을 넘어가도록 설정 */
  justify-content: center; /* 아이템을 가운데 정렬 */
  gap: 10px; /* 아이템 간의 간격을 조정 */
  margin: 20px auto; /* 상단과 하단 마진을 20px, 좌우 마진을 auto로 설정하여 가운데 정렬 */
  max-width: 640px; /* 최대 너비 설정 */
}

.banneritem {
  padding: 8px 4px 4px 4px;
  background-color: #2d2d2d;
  color: #fff;
  border-radius: 16px;
  text-align: center;
  flex: 1 0 calc(25% - 12px); /* 한 줄에 4개가 나오도록 설정, 아이템 간 간격 고려 */
  max-width: 120px;
  margin: 2px; /* 아이템 사이에 일정한 간격을 추가 */
  box-sizing: border-box; /* 패딩과 보더가 요소의 크기에 포함되도록 설정 */
  transition: transform 0.2s ease, background-color 0.2s ease; /* 애니메이션 효과 */
  cursor: pointer;
}
.banner_prize{
  font-size: 12px;
  color: #ffffff;
  font-weight: 600;
}
/* 임무완수 */
.bannercompletedgold {
  background: linear-gradient(45deg, #FFD700, #FFA500); /* 황금색에서 오렌지색으로 그라디언트 */
  border: 2px solid #FFD700; /* 황금색 테두리 */
}

.bannercompleted:hover {
  transform: scale(1.05); /* 호버 시 살짝 확대 효과 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* 호버 시 그림자 강화 */
}

.bannercompleted .banner_title, 
.bannercompleted .banner_prize {
  color: #FFFFFF; /* 텍스트 색상을 흰색으로 유지 */
  font-weight: bold; /* 텍스트를 굵게 */
}

.bannercompleted img {
  margin-top: 8px; /* 이미지와 텍스트 간의 간격 설정 */
  height: 20px;
}

.bannercompleted {
  padding: 8px 4px 4px 4px;
  background: linear-gradient(45deg, #cd3294, #80228b); /* 연한 초록색에서 진한 초록색으로 그라디언트 */
  color: #fff; /* 텍스트 색상 흰색으로 */
  border-radius: 16px;
  text-align: center;
  border: 2px solid #cd32b8; /* 연한 초록색 테두리 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 부드러운 그림자 효과 */
  transition: transform 0.3s ease, background-color 0.3s ease; /* 애니메이션 효과 */
}

.btntext{
    font-siZe:15px;
    font-weight: 600;
    padding: 14px 6px;
}

/* 상단 보더 */
.rewardheader-border {
  border-top-left-radius: 24px; /* 상단 좌측 모서리 둥글게 */
  border-top-right-radius: 24px; /* 상단 우측 모서리 둥글게 */
  border-bottom-left-radius: 0; /* 하단 모서리는 둥글게 하지 않음 */
  border-bottom-right-radius: 0; /* 하단 모서리는 둥글게 하지 않음 */
  border-top: 3px solid; /* 상단 보더 두께 */
  /*border-color: #ffd700;*/
  padding: 15px 10px;  
}

/* 상단 보더 */
.rewardheader {
  background-color: #000000; /* 배경색은 그대로 유지 */
  border-top-left-radius: 16px; /* 상단 좌측 모서리 둥글게 */
  border-top-right-radius: 16px; /* 상단 우측 모서리 둥글게 */
  border-bottom-left-radius: 0; /* 하단 모서리는 둥글게 하지 않음 */
  border-bottom-right-radius: 0; /* 하단 모서리는 둥글게 하지 않음 */
  padding: 16px; /* 내부 패딩 추가 */
  color: #fff; /* 텍스트 색상 흰색 */
  text-align: center; /* 텍스트를 가운데 정렬 */
  position: relative; /* 내부의 가상 요소를 위해 position 설정 */
  z-index: 1; /* 가상 요소보다 위에 나타나도록 설정 */
}

.mmr-2{
  padding-left: 3px!important;
  padding-right: 3px!important;
}

.invent_avatar {
  width: 28px; /* 아바타 컨테이너의 너비 */
  height: 28px; /* 아바타 컨테이너의 높이 */
  border-radius: 50%; /* 컨테이너를 원형으로 만듦 */
  overflow: hidden; /* 원형 영역 밖의 이미지 잘림 */
}

.invent_avatar img {
  width: 100%; /* 이미지를 컨테이너에 맞게 조정 */
  height: 100%; /* 이미지를 컨테이너에 맞게 조정 */
  border-radius: 50%; /* 이미지를 원형으로 만듦 */
  object-fit: cover; /* 이미지가 컨테이너에 맞도록 크기 조정 */
  vertical-align: middle;
}

/* 보더 상단 옆면 */
.selectedborder {
  padding: 1rem;
  color: white;
  border-width: 3px;
  border-style: solid;
  border-image: 
    linear-gradient(
      to bottom, 
      red, 
      rgba(0, 0, 0, 0)
    ) 1 100%;
}

.tabactive{
  background-color: #656565;
  border: #afafaf 1px solid
}

.gradient-border.background-image {
  border:3px solid transparent ;
  border-radius:16px;
  background-image:linear-gradient(#2d2d2d, #2d2d2d), linear-gradient(to  bottom right ,#0060fd ,#03e6c8, #df30e2);
  background-origin:border-box; 
  background-clip:padding-box, border-box;
 
  
}

.itemscenter{
  margin: 0 auto;
}
.filter-menu-active {
  display: inline-flex; /* 인라인 요소처럼 동작하면서 Flexbox 기능 유지 */
  justify-content: center;
  align-items: center;
  gap: 20px; /* 버튼 간의 간격 */
  flex-wrap: wrap; /* 버튼들이 줄을 넘으면 다음 줄로 래핑되도록 설정 */
  width: 100%; /* 필요한 경우 부모 요소의 너비에 맞게 설정 */
}
.filter-menu button {
  background: none;
  border: none;
  padding: 10px 0px;
  font-size: 14px!important;
  cursor: pointer;
  position: relative;
  outline: none;
  color: #fff; /* 버튼 텍스트 색상 */
  transition: color 0.3s ease;
}

.filter-menu button::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #0d06d8, #feb47b); /* 팬시한 그라디언트 줄 */
  transition: width 0.3s ease, left 0.3s ease;
  transform: translateX(-50%);
}

.filter-menu button.active::after {
  width: 100%;
  left: 50%;
}

.filter-menu button:hover {
  color: #feb47b; /* 버튼에 마우스를 올렸을 때 텍스트 색상 변경 */
}

.filter-menu-active {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* 버튼 간의 간격 */
}

.settingContainer {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 버튼 사이의 간격 */
}

.settingContainer button {
  margin-bottom: 10px; /* 버튼 간의 수직 간격 (줄 바뀔 때) */
}
.settingContainer .rounded{
  border-radius: 20px!important;
}

/* 아이폰 핀치 막기 */
.tabgameContainer {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.svg-32{
  width: 32px;
  height: 32px;
}
.svg-24{
  width: 24px;
  height: 24px;
}
 
.screen_center {
  display: flex;
  justify-content: center; /* 수평 중앙 정렬 */
  align-items: center;      /* 수직 중앙 정렬 */
  height: 100vh;            /* 화면의 높이를 100%로 설정 */
  width: 100%;              /* 너비를 100%로 설정 */
  position: absolute;       /* 부모 요소에 대해 절대 위치 지정 */
  top: 0;
  left: 0;
  z-index: 10;              /* 다른 요소 위에 배치될 수 있도록 z-index 설정 (필요시) */
  background-color: transparent; /* 배경색 설정, 필요시 변경 가능 */
}

.playbuttonontabimage{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 30%;
  object-fit: cover;
  object-position: center;
  z-index: 1000; 
}

.bg-darkblue{background-color: #1b0b62!important}