#canvasContainer {
		position: relative;
	}
	.explosion {
		position: absolute;
		animation: moveUpFadeOut 1.5s forwards;
		opacity: 0;
		font-family: "Agbalumo";
		font-weight: bold;
		font-size: 2rem;
		color: darkcyan;
	}
	@keyframes explode {
		from { opacity: 1; transform: scale(1); }
		to { opacity: 0; transform: scale(3); }
	}
	
	@keyframes moveUpFadeOut {
	  0% {
		opacity: 1; /* 시작할 때 요소가 완전히 불투명하도록 설정 */
		transform: translateY(0); /* 시작할 때 요소의 위치가 원래 위치에 있도록 설정 */
	  }
	  100% {
		opacity: 0; /* 끝날 때 요소가 완전히 투명하도록 설정 */
		transform: translateY(-100px); /* 요소가 위로 100픽셀 움직이도록 설정 */
	  }
	}	
	
	.game-bg {
		background-color:#00427c;
	}
	body { background-color:#1a6fbb; }
	
	.advertisement { position:relative; height:250px; width:100%; /* border:1px solid #eee;*/ }
	
	table thead th {
		text-align:center;
	}
	table tbody td {
		vertical-align:middle;
		font-weight:bold;
		font-size:13px;
		text-align:center;
	}

/* 모달 기본 스타일 변경 */
.modal-content {
    background: rgba(0, 0, 0, 0.85); /* 어두운 배경으로 게임의 느낌에 맞게 변경 */
    color: white; /* 텍스트 색상을 흰색으로 변경 */
    border: 2px solid #31e3ff; /* 경계선을 게임의 느낌에 맞게 녹색으로 변경 */
    border-radius: 10px; /* 모달 모서리 둥글게 처리 */
}

/* 모달 헤더 스타일 */
.modal-header {
    border-bottom: 0px solid #31e3ff; /* 헤더 아래 경계선 색상 변경 */
    background: #066578; /* 헤더 배경색 변경 */
}

/* 모달 제목 스타일 */
.modal-title {
    color: #ffff00; /* 제목 텍스트 색상 변경 */
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); /* 제목 텍스트에 그림자 추가 */
}

/* 모달 바디 스타일 */
.modal-body {
    background: #066578;
}

/* 테이블 스타일 변경 */
#ranking-board {
	height:400px;
	overflow-y:scroll;
}
#ranking-board .table {
    background: transparent; /* 테이블 배경을 투명하게 */
}

#ranking-board .table th {
    border-bottom: 2px solid #31e3ff; /* 헤더 아래 경계선 색상 변경 */
	background: #066578;
	color: #fff; /* 셀의 텍스트 색상을 흰색으로 변경 */
}

#ranking-board .table td {
    color: #fff; /* 셀의 텍스트 색상을 흰색으로 변경 */
    border:0;
	background: #066578;
	padding: 0;
}

/* 모달 푸터 스타일 변경 */
.modal-footer {
    border-top: 0px solid #31e3ff; /* 푸터 위 경계선 색상 변경 */
    background: #066578; /* 푸터 배경색 변경 */
}

/* 버튼 스타일 변경 */
.modal-footer .btn {
    background: #6ac995; /* 버튼 배경색을 검은색으로 변경 */
	color:#000;
    border: 1px solid #31e3ff; /* 버튼 경계선 색상 변경 */
    box-shadow: none; /* 버튼에서 그림자 제거 */
}



.modal-footer .btn:hover {
    background: #b4d9c4; /* 호버 시 버튼 배경색 변경 */
}



@keyframes rainbow-color {
  0% { background-color: red; }
  17% { background-color: orange; }
  34% { background-color: yellow; }
  51% { background-color: green; }
  68% { background-color: blue; }
  85% { background-color: indigo; }
  100% { background-color: violet; }
}

.rainbow-effect {
  animation: rainbow-color 2s infinite;
}


.crop {
  overflow: hidden;
  display: inline-block;
  height: 36px; /* 48px total height minus 4px top and 4px bottom */
  margin-bottom:10px;
  border: 2px solid transparent;
}

.crop:hover {
	cursor:pointer;
	transform:scale(1.1);
}

.crop img {
  display: block;
  margin-top: -4px; /* Shift the image up to hide the top 4px */
  margin-bottom: -4px; /* Shift the image down to hide the bottom 4px */

  height: 48px;
  width:48px;
}
	
.col-2.crop.selected {
    border-color: blue; /* Visible border for selected item */
  }
  
	/* 모바일 해상도에서만 적용될 스타일 */
@media (max-width: 767.98px) { /* Bootstrap 5의 sm 브레이크포인트 직전의 값 */
  .container {
    width: 100%;
    max-width: 100%;
    /* padding-right:0 !important; */
	margin:auto;
  }
  
  .container .row .col-12 {
	  
  }
  
  .advertisement { max-height:100px !important; }
  
  
}

/* 스크롤바 전체를 위한 스타일 */
::-webkit-scrollbar {
    width: 12px; /* 스크롤바의 너비 */
}

/* 스크롤바 트랙(경로)을 위한 스타일 */
::-webkit-scrollbar-track {
    background: #2e3440; /* 스크롤바 경로의 배경 색상 */
    border-radius: 10px;  /* 둥근 모서리의 반지름 */
}

/* 스크롤바 핸들을 위한 스타일 */
::-webkit-scrollbar-thumb {
    background-color: #4c566a; /* 스크롤바 핸들의 배경 색상 */
    border-radius: 10px; /* 둥근 모서리의 반지름 */
    border: 3px solid #2e3440; /* 스크롤바 핸들의 외곽선 */
}

/* 호버시 스크롤바 핸들을 위한 스타일 */
::-webkit-scrollbar-thumb:hover {
    background-color: #5e81ac; /* 스크롤바 핸들의 호버 색상 */
}
