/* -- lottie 애니메이션 관련이다. -- */
.confetti-wrapper{   
    position: fixed;
    /* 부모의 공간을 다 사용한다. */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* 배경을 투명하게 한다. */
    background: transparent; 
    /* 클릭하지 못하도록 한다. */
    pointer-events: none; 
    /* show 클래스를 추가하면 보인다. */
    visibility: hidden;
    opacity: 0;
    /* z-index가 result-wrapper보다 커야 한다. */  
    z-index: 7;
}
.confetti-wrapper.show{
    visibility: visible;
    opacity: 1;
}
.confetti-container{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 클릭하지 못하도록 한다. */
    pointer-events: none;  
   
}
/* //lottie 애니메이션 */

/* -- 게임결과 관련이다. -- */
.result-wrapper {
    /* game-wrapper가 부모다. */
    position: absolute;   
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;   
    /* 보이지 않게 한다.*/
    /* show 클래스를 추가하면 보인다. */
    display: none; 
    background: #ffffff;
    padding: var(--gap-1);
    border-radius: var(--gap-3) var(--gap-3) 0 0;
    /* 5이상이면 메뉴보다 위에 있게 된다. */
    z-index: 4;
    overflow-y: scroll;
    /* 스크롤바가 보이지 않게 한다.*/
    /* IE and Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
}
.result-wrapper::-webkit-scrollbar {
    /* 스크롤바가 보이지 않게 한다.*/
    /* Chrome, Safari, Opera*/
    display: none;
}
.result-wrapper.show {   
    display: flex;
    flex-direction: column;
    /* 위쪽으로 정렬한다. */
    justify-content: flex-start;
}
.result-wrapper .score-wrapper {
    width: 100%;   
    /* mobile에서는 5px로 한다. */
    margin: var(--gap-2) 0;
}
.result-wrapper .score-container {
    /* flex-center-col */
    /* 위 아래 공간을 만든다. */
    gap: 15px;
}
/* 랭킹에 들어가거나 최고점수를 넘으면 애니메이션으로 보여준다. */
/* 아무것도 아니면 애니메이션이 없다. */
/* .total-score은 아무 것도 아닐 때다. */
/* mobile에서 작게 보여준다. */
.score-container .high-score,
.score-container .top-rank,
.score-container .total-score,
.result-message
{   
    font-family: 'Fredoka One', cursive;
    font-size: 2rem;
    text-align: center;
    color: var(--site-color-1);
    letter-spacing: 2px;
    /* shadow를 2개해서 두껍게 보이도록 한다. */
    text-shadow: 2px 2px #000000,3px 3px #000000;    
}
.score-container .high-score,
.score-container .top-rank,
.result-message.success
{
    animation: heartbeatResult 1s infinite;
}
@keyframes heartbeatResult {
    50% {
        transform: scale(1.2);
    }
}
/* result-message.njk */
.message .result-message{
    padding: var(--gap-3);
}

/* 점수를 보여준다. */
.score-container .score-point {
    font-family: var(--font-title);
    font-size: var(--fontsize-h1);
    text-shadow: 1px 1px #000000;
    letter-spacing: 1px;
    padding: var(--gap-1) 50px;
    border-radius: var(--gap-1);
}
/* 랭킹에 들어가면 이름을 입력한다. */
/* 최고점수를 깨면 최고 등급과 다음 등급을 보여준다. */
/* 아무것도 아니면 현재 등급과 최고 등급을 보여준다. */
.result-wrapper .result-container {
    width: 100%;
    border-radius: var(--gap-3);
    display: flex;
    flex-direction: column;
    /* 위쪽으로 정렬한다. */
    justify-content: flex-start;
}
/* 랭킹 관련, 최고점수 관련, 아무 것도 아닐 때 관련부분은 result-content 클래스를 가지고 있다. */
/* 처음에는 다 보이지 않는다. */
.result-content {
    display: none;
}
/* 점수에 따라서 정해진 것만 보여준다. */
/* show 클래스가 추가되면 보인다. */
.result-content.show {
    display: block;
}
.result-content.fail.show {
    display: flex!important;
    justify-content: center;
}
/* .ranking-form은 랭킹 안에 들었을 때 정보를 입력하는 부분이다.  */
/* .confirm의 기준이다. */
.result-content.ranking-form.show {
    position: relative;
    width: 100%;
    padding: 5px;
    /* 나중에 flex-center를 추가해도 되는지 확인한다. */
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

/* result-message.njk */
.result-content.fail ul li {
    margin: var(--gap-3) 0;
    list-style: circle;
    font-size: var(--fontsize-h2);
    font-weight: bold;
}

/* 랭킹 안에 들었을 때 정보를 입력하는 form이다. */
#info-form {
    width: 100%;
    padding: var(--gap-1);
    margin: var(--gap-1) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-1);
}
#info-form .input-container {
    position: relative;
    flex: 1;
    width: 90%;
    /* 최대 높이를 정한다. */
    /* max-height를 정하지 않으면 공간을 다 차지한다. */
    max-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* input이다. */
.input-container input {
    width: 100%;
    padding: var(--gap-3); 
    font-size: var(--fontsize-h3);
    font-weight: bold;
    border: 3px solid var(--site-color-1);
    border-radius: var(--gap-3);
    box-shadow: 0 0 3px var(--box-shadow-1);
    outline: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.2s;
}
/* input에 내용이 있을 때다. */
/* input을 선택했을 때 js로 not-empty 클래스를 추가한다. */
.input-container input.not-empty {
    border: 3px solid var(--selected-color);
    box-shadow: none;
}
.input-container input::placeholder{
    /* mobile에서는 작게 한다. */
    font-size: var(--fontsize-basic);
}
/* .placeholder는 input 태그 안에 들어있는 span이다. */
.input-container .placeholder {
    position: absolute;
    /* transition 효과를 주기 위해서 inline-block로 정한다. */
    display: inline-block;
    top: 50%;
    left: var(--gap-3);
    transform: translateY(-50%);
    padding: 3px;
    font-size: var(--fontsize-h3);
    font-weight: bold;
    border-radius: 5px;
    transition: 0.2s;
    background: #ffffff;
}
/* input를 선택하거나 내용이 있으면 span이 input 위로 올라간다. */
.input-container .placeholder.not-empty {
    /* 폰트 크기의 반을 top으로 정해서 input에 반이 겹치도록 한다. -1를 곱한다. */
    top: calc(var(--fontsize-basic)/ 2 * -1);
    transform: translateY(0);
    font-size: var(--fontsize-basic);
    box-shadow: 0 0 3px var(--box-shadow-1);
}
.result-content .button-container,
.game-result .button-container
{
    /* flex-center */
    width: 100%;
    height: 50px;   
    gap: 30px;
}
.button-container button {
    padding: var(--gap-1) var(--gap-2);
    width: 100px;
    font-size: var(--fontsize-basic);   
    font-weight: bold;
    border-radius: var(--gap-2);
    background: #ffffff;
    border: 3px solid var(--site-color-1);
    box-shadow: 0 0 1px var(--box-shadow-1);
    transition: all 0.2s;
}
.button-container button:hover{
    background: var(--site-color-1);
}
/* .new-score는 최고 점수일 때 나오는 부분이다. */
/* .nothing는 아무것도 아닐 때 나오는 부분이다. */
.result.new-score.show,
.result.nothing.show {
    width: 100%;
    height: 100%;
}
/* .new-score-container에 최고 등급과 다음 등급이 나온다. */
/* .nothing-container에 현재 등급과 최고 등급이 나온다. */
.new-score .new-score-container,
.nothing .nothing-container {
    width: 100%;    
    /* 높이를 너무 크지 않도록 한다. */   
    height: 250px;
    gap: var(--gap-1);
}
/* 최고 등급, 다음 등급, 현재 등급, 최고 등급 부분이다.*/
.new-score-container .high-score-wrapper,
.new-score-container .next-score-wrapper,
.nothing-container .current-score-wrapper,
.nothing-container .high-score-wrapper {
    flex: 1;
    width: 100%;
    padding: var(--gap-1);
    border-radius: var(--gap-3);
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
}
/* 최고 등급, 다음 등급, 현재 등급, 최고 등급는 h2다. */
/* mobile에서는 작게 한다.*/
.new-score-container h2,
.nothing-container h2 {
    /* 왼쪽에 공간을 만든다. */
    padding-left: var(--gap-1);
    font-size: var(--fontsize-h2);
}
/* 최고 등급, 다음 등급, 현재 등급, 최고 등급 안에 나오는 글자다. */
/* mobile에서는 작게 한다.*/
.new-score-container p,
.nothing-container p {
    font-size: var(--fontsize-h3);
}
/* 최고 등급과 현재 등급과 다음 등급과 최고 등급의 배경색을 정한다.*/
.new-score-container .high-score-wrapper,
.nothing-container .current-score-wrapper,
.result-alphabet .current-container {
    background: var(--site-color-1);
    box-shadow: 0 0 3px var(--box-shadow-1);
}
.new-score-container .next-score-wrapper,
.nothing-container .high-score-wrapper,
.result-alphabet .high-container {
    background: var(--second-color);
    box-shadow: 0 0 3px var(--box-shadow-1);
}
/* grade-score-container에 아이콘, 등급 이름, 점수범위가 나온다. */
.new-score .grade-score-container,
.nothing .grade-score-container,
.time-container {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: var(--gap-1);
    overflow: hidden;
    background: #ffffff;
}
/* 등급 아이콘이다. */
.grade-score-container .grade-icon {   
    /* 아이콘의 크기를 고정한다. */
    width: 52px;
    height: 52px;
    /* 배경이미지를 정한다. */
    background-size: cover;
    background-position: center;  
    animation: heartbeatIcon 1s infinite;  
    padding: var(--gap-1);
}
@keyframes heartbeatIcon  {
    50% {
        transform: scale(1.1);
    }
}
/* 등급 이름이다. */
.grade-score-container .grade-name,
.time-text {
    flex: 1;
    /* 왼쪽에 공간을 줬다. */
    margin-left: var(--gap-1);
}
/* 점수 범위다. */
.grade-score-container .score-range {
    /* 등급 이름보다 공간을 더 차지한다. */
    flex: 1.3;
}

/* 광고가 나오는 부분이다. */
.result-wrapper .multiple-ad-wrapper {
    flex: 1;
    width: 100%;
    padding: var(--gap-1);
}
/* 입력한 내용을 확인하는 부분이다. */
/* 처음에는 보이지 않는다.*/
.database-confirm-wrapper {
    z-index: 9;
    /* 화면 전체를 차지한다. */
    position: fixed;
    /* 게임을 할 때 클릭하지 못하도록 한다. */
    pointer-events: none;
    visibility: hidden;    
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
}
/* show 클래스가 추가되면 보인다. */
.database-confirm-wrapper.show {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}
.database-confirm-wrapper .confirm-container {
    /* .database-confirm-wrapper가 기준이다. */
    position: absolute;
    /* 부모에 가운데에 있도록 한다. */
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 600px;
    width: 90%;
    padding: var(--gap-3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-3);
    font-weight: 700;
    background: #ffffff;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 5px var(--box-shadow-1);
    font-size: var(--fontsize-p);
}
.database-confirm-wrapper .confirm-message {
    text-align: center;
    font-size: var(--fontsize-h2);
    word-break: keep-all;
}
.database-confirm-wrapper .confirm-container .confirm-content {
    width: 100%;
}
.database-confirm-wrapper .confirm-container ul {
    margin-left: var(--gap-3);
    padding-right: var(--gap-3);
}
.database-confirm-wrapper .confirm-container li {
    list-style: circle !important;
    word-break: break-all;
}
/* 올리기 지우기 버튼이 들어있다. */
.database-confirm-wrapper .button-container {
    gap: var(--gap-2);
}
.database-confirm-wrapper button {
    padding: var(--gap-1) var(--gap-2);
    border-radius: var(--gap-2);
    font-size: var(--fontsize-h4);
    background: #ffffff;
    border: 3px solid var(--site-color-1);
}
/* 게임결과  */


/* 아래쪽 데이터베이스 관련이다. */
/* -- block, slide 퍼즐 게임 등에서 사용한다. */
.game-result{  
    margin: var(--gap-2) 0;  
    width: 100%;   
    padding: var(--gap-3); 
    display: none; 
    border-radius: var(--gap-3);
    box-shadow: 0 0 3px var(--box-shadow-1);
    border: 3px solid var(--site-color-1);
}
.game-result.show{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
}
.game-result .result-message{
    padding: var(--gap-3);
    font-size: 2rem;
    font-weight: bold;
    color: var(--site-color-1);
    text-shadow: 2px 2px #000000,3px 3px #000000;
    animation: heartbeatMessage 1s infinite;
}
@keyframes heartbeatMessage {    
    50% {        
        transform: scale(1.05);    
        color: var(--second-color);  
    }
}
.result-container{
    width: 100%;
}
/* mobile 화면 */
@media screen and (max-width: 450px) { 
    .result-wrapper .score-wrapper {      
        /* mobile에서는 5px로 한다. */
        margin: 5px 0;
    } 
    .input-container input{
        font-size: var(--fontsize-example);
    }  
     /* placeholder다 .*/
     .input-container input::placeholder {
        font-size: var(--fontsize-mobile-placeholder);
    }
    /* 최고등급, 다음등급, 현재등급, 최고등급 글씨가 h2다. */
    /* mobile에서 작게 한다.*/
    .new-score-container h2,
    .nothing-container h2 {
        font-size: var(--fontsize-h4);
    }
    /* 최고등급, 다음등급, 현재등급, 최고등급 안에 나오는 글씨다. */
    /* mobile에서 작게 한다.*/
    .new-score-container p,
    .nothing-container p {
        font-size: var(--fontsize-basic);
    }  
}