.game-question {
    width: 100%;
    /* 타이머와 공간을 둔다. */
    /* 모바일에서는 작게 한다. */
    padding: var(--gap-3) 0 0;
}
/* 화면 높이가 가장 작을 때다. */
.small-all .game-question {
    padding: 5px 0 0;
}
.game-question p {
    width: 100%;
    word-break: keep-all;
    text-align: center;
    font-family: var(--font-title);
    font-weight: bold;
    /* 모바일에서는 글자 크기를 작게 한다. */
    font-size: var(--fontsize-p);
}
/* 화면 높이가 가장 작을 때다. */
.small-all .game-question p {
    font-size: var(--fontsize-basic);
}
.game-content {
    position: relative;
    width: 100%;
    /* 게임 문제 등을 빼고 나머지 공간을 전체 사용한다. */
    flex: 1;
}
/* 문제가 나오는 부분이다. */
.game-type {
    position:absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;   
    height: 100%;
    visibility: hidden;
    opacity: 0;
    /* 클릭할 수 없다. */
    pointer-events: none;    
}
/* show 클래스 추가되면 보인다. */
.game-type.show {
    visibility: visible;
    opacity: 1;
    /* 클릭할 수 있다. */
    pointer-events: auto;
}

/* 문제-wrapper로 이름을 정한다. */
/* 
1. word : 이름 주관식 문제다.
2. choice : 이름 객관식 문제다.
3. different : 타입이 다른 것을 고르는 문제다.
4. type : 타입 고르는 문제다.
5. compare : 종족값을 비교해서 고르는 문제다.
6. ability : 포켓몬 특성 고르는 문제다.
7. ability-choice : 포켓몬 특성 설명을 고르는 문제다. 
8. typechart : 상성표 고르는 문제다.
9. circle : 이름 객관식 문제에서 원으로 이미지로 보여주는 문제다.
10. blur : 이름 객관식 문제에서 흐리게 이미지를 보여주는 문제다.
11. wordHard : hard 난이도 이름 주관식 문제다.
12. differentHard : 3*3에서 타입이 다른 포켓몬을 선택하는 문제다.
*/
.word-wrapper,
.choice-wrapper,
.different-wrapper,
.type-wrapper,
.compare-wrapper,
.ability-wrapper,
.ability-choice-wrapper,
.typechart-wrapper,
.circle-wrapper,
.blur-wrapper,
.wordHard-wrapper,
.differentHard-wrapper
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* align-items: center를 안하면 단어 뜻과 포켓몬 이름의 너비가 100%로 된다. */
    align-items: center;
    justify-content: center;
}
/* 퀴즈에서 위쪽 부분이다. */
.question-container {
    /* 남은 공간 전체를 사용한다. */
    flex: 1;
    width: 100%;
}
.option-container {
    width: 100%;
}

/* 정답과 오답일 때다. */
/* 정답을 맞히면 answer 클래스가 추가된다. */
/* 애니메이션 효과가 나타난다. */
.word-select p.answer,
.choice-item.answer,
.type-item.answer,
.compare-img.answer,
.ability-item.answer,
.ability-choice-item.answer,
.typechart-item.answer,
.circle-item.answer,
.blur-item.answer,
.wordHard-select p.answer
 {
    background: var(--answer-color) !important;
    animation: answer var(--answer-delay);
}
.word-select p.answer,
.wordHard-select p.answer
{
   border: none;
}
@keyframes answer {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}
/* 4지 선다 문제다.*/
/* border가 보이지 않게 한다.*/
.choice-item.answer,
.type-item.answer,
.ability-item.answer,
.ability-choice-item.answer,
.typechart-item.answer,
.circle-item.answer,
.blur-item.answer
 {
    border: 2px solid transparent !important;
}

/* 틀렸을 때다. */
/* 틀렸을 때 wrong 클래스가 추가된다. */
.word-select p.wrong,
.type-item.wrong,
.choice-item.wrong,
.compare-img.wrong,
.ability-item.wrong,
.ability-choice-item.wrong,
.typechart-item.wrong,
.circle-item.wrong,
.blur-item.wrong,
.wordHard-select p.wrong
 {
    /* background가 아닌 background로 정한다. */
    background: var(--wrong-color) !important;
    animation: wrong var(--wrong-delay);
}
@keyframes wrong {
    10%,
    90% {
        transform: translate3d(-1px,0,0);
    }

    20%,
    80% {
        transform: translate3d(2px,0,0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px,0,0);
    }

    40%,
    60% {
        transform: translate3d(4px,0,0);
    }
}
.word-select p.wrong,
.wordHard-select p.wrong
{
    border: none;
 }
.choice-item.wrong,
.type-item.wrong,
.ability-item.wrong,
.ability-choice-item.wrong,
.typechart-item.wrong,
.circle-item.wrong,
.blur-item.wrong
 {
    border: 2px solid transparent !important;
}

/* 1번째 포켓몬 이름 주관식 문제다. */
/* 이름문제에서 hard 난이도 주관식 문제다. */
.word-img-container,
.wordHard-img-container
{
    width: 100%;
    flex: 1;
}
/* html에서 크기를 크게하고 css에서 작게해서 선명하게 한다. */
.word-img,
.wordHard-img
{
    /* 모바일에서는 작게 한다.*/
    /* vh를 기준으로 한다. */
    width: 30vh;
    height: 30vh;
}
.word-img.cut,
.choice-img.cut
{
    /* clip-path를 사용해서 원 모양으로 자른다. */
    clip-path: circle(20%);
}
.small-all .word-img,
.small-all .wordHard-img
{
    width: 20vh;
    height: 20vh;
}
/* 버튼을 가로로 배열한다. */
.word-select,
.wordHard-select
{
    display: flex;
    gap: var(--gap-1);
}
/* p태그에 선태한 문자 이외의 글자가 있다. */
/* .word-select p는 mobile에서 작게 한다.*/
/* .pokemon-select p는 mobile에서 작게 한다.*/
/* .image-select p는 mobile에서 작게 한다.*/
.word-select p,
.wordHard-select p
{
    font-size: var(--size-button);
    width: calc(var(--size-button) + 6px);
    height: calc(var(--size-button) + 6px);
    padding: 5px;
    border-radius: 5px;
    text-align: center;  
    border: 2px solid var(--site-color-1);
    box-shadow: 0 0 1px var(--box-shadow-1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.1s ease-in-out;
}
/* 위쪽 버튼을 선택했을 때, 선택을 취소했을 때 애니메이션을 추가한다. */
/* 버튼을 선택했을 대 위쪽에 selected 클래스가 추가된다. */
/* 클래스가 추가되면 애니메이션 효과가 나타난다. */
/* 선택한 것은 구별할 수 있도록 색깔을 다르게 해야 한다.*/
.word-select-btn.selected,
.wordHard-select-btn.selected
{
    background: var(--selected-color);
    border: none;
    animation: btn-selected 0.2s;
}
@keyframes btn-selected {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}
/* 선택한 버튼을 다시 선택하지 않을 때다. */
/* 애니메이션 효과가 있다. */
.word-select-btn.not-selected,
.wordHard-select-btn.not-selected
{  
    animation: not-selected 0.2s;
}
@keyframes not-selected {
    0% {       
        transform: scale(1);
    }
    50% {        
        transform: scale(1.2);
    }
}
.word-wrapper .option-container,
.wordHard-wrapper .option-container
{
    flex: 0.5;
}
.word-option,
.wordHard-option
{
    /* 가로로 배열한다. */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* 넘치면 내려간다. */
    flex-wrap: wrap;
    gap: var(--gap-1);
}
/* 아래쪽 버튼이다. */
.word-option p,
.wordHard-option p
{
    /* 모바일에서 작게 한다.*/
    font-size: var(--size-button);
    width: calc(var(--size-button) + 8px);
    height: calc(var(--size-button) + 8px);
    border-radius: 5px;
    text-align: center;
    border: 2px solid var(--site-color-1);
    box-shadow: 0 0 2px var(--box-shadow-1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.1s;
}
/* 아래쪽 버튼을 클릭하면 clicked 클래스가 추가된다. */
.word-option p.clicked,
.wordHard-option p.clicked
{
    visibility: hidden;
    animation: btn-selected 0.2s;
}
/* 한 번 더 클릭을 할 때도 애니메이션이 되도록 한다. */
.word-option p.not-clicked,
.wordHard-option p.not-clicked
 {
    /* 다른 이름의 애니메이션을 만들어야 애니메이션이 된다. */
    animation: not-clicked 0.2s;
}
@keyframes not-clicked {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* 2번째 포켓몬 이름 객관식 문제다. */
/* 4번째, 6번째도 같다. */
.choice-img,
.type-img,
.ability-img,
.circle-img,
.blur-img
{
    width: 30vh;
    height: 30vh;
    /* js에서 정한다. */
    max-width: var(--gameWrapper-width);
}
/* 화면 높이 크기가 작을 때다. */
.small-choice .choice-img,
.small-choice .circle-img,
.small-choice .blur-img
{
    width: 20vh;
    height: 20vh;
}
.small-all .choice-img,
.small-all .circle-img,
.small-all .blur-img
{
    width: 13vh;
    height: 13vh;
}
.small-compare .type-img,
.small-compare .ability-img
{
    width: 17vh;
    height: 17vh;
}
.small-choice .type-img,
.small-choice .ability-img
{
    width: 11vh;
    height: 11vh;
}
.small-all .type-img,
.small-all .ability-img
{
    width: 8vh;
    height: 8vh;
}
/* 선택지가 조금 위로 올라가도록 한다. */
.choice-wrapper .option-container,
.type-wrapper .option-container,
.ability-wrapper .option-container,
.ability-choice-wrapper .option-container,
.typechart-wrapper .option-container,
.circle-wrapper .option-container,
.blur-wrapper .option-container
{
    flex: 0.6;
    /* 위에 공간을 조금 둔다. */
    padding-top: 10px;  
}
.choice-option,
.type-option,
.ability-option,
.ability-choice-option,
.typechart-option,
.circle-option,
.blur-option
{
    width: 100%;
    height: 100%;
    /* 모바일에서는 작게 한다.*/
    /* 항목 사이에 공간을 둔다. */
    gap: var(--gap-1);
}
.small-all .choice-option,
.small-all .type-option,
.small-all .ability-option,
.small-all .ability-choice-option,
.small-all .typechart-option,
.small-all .circle-option,
.small-all .blur-option
{
    gap: 5px;
}

/* 4지선다 문제 선택지다. */
/* 타입을 묻는 문제는 색깔을 다르게 한다. */
.choice-item,
.ability-item,
.ability-choice-item,
.typechart-item,
.circle-item,
.blur-item
{
    /* 모바일에서는 글자 크기를 조금 작게 한다.*/
    font-size: var(--fontsize-p);
    padding: var(--gap-1);
    border-radius: var(--gap-2);
    box-shadow: 0 0 1px var(--box-shadow-1);
    border: 2px solid var(--site-color-1);
}
.type-item{
    /* 모바일에서는 글자 크기를 조금 작게 한다.*/
    font-size: var(--fontsize-p);
    padding: var(--gap-1);
    border-radius: var(--gap-2);
    box-shadow: 0 0 1px var(--box-shadow-1);   
    /* 색깔이 보이지 않게 한다. */
    border: 2px solid transparent; 
}
.small-compare .choice-item,
.small-compare .circle-item,
.small-compare .blur-item
{
    font-size: var(--fontsize-basic);
    padding: 5px;
    border-radius: var(--gap-1);
}
.small-compare .type-item,
.small-compare .ability-item
{
    font-size: var(--fontsize-basic);
    padding: 5px;
    border-radius: var(--gap-1);
}
.small-all .ability-choice-item,
.small-all .typechart-item
{
    font-size: var(--fontsize-basic);
    padding: 5px;
    border-radius: var(--gap-1);
}

/* 3번째 다른 속성을 선택하는 문제다. */
/* canvas의 부모다. */
/* 아래 글씨를 넣어야 해서 세로로 정렬한다. */
.different-img-container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    padding: var(--gap-3) var(--gap-2) var(--gap-2);
}
.long-different .different-img-container,
.long-different .differentHard-img-container
{
    padding: var(--gap-1) 0 0;
}
.small-all .different-img-container,
.small-all .differentHard-img-container
{
    padding: 5px;
}
.different-img-content
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-2);
    padding: var(--gap-1);
}
.small-all .different-img-content
{
    gap: 5px;
    padding: 5px;
}
/* 100%로 정하면 화면 크기에 따라서 알아서 조정된다.  */
.different-img {
    width: 25vh;
    height: 25vh;
    transition: 0.1s;
    border-radius: var(--gap-3);
}
/* 화면이 긴 경우 gameWrapper의 너비를 기준으로 크기를 정한다. */
.long-different .different-img {
    width: calc(var(--gameWrapper-width) / 2.4) !important;
    height: calc(var(--gameWrapper-width) / 2.4) !important;
}
.small-different .different-img {
    width: 15vh;
    height: 15vh;
}
.small-all .different-img{
    width: 13vh;
    height: 13vh;
}
/* canvas로 스케일이 된다. */
/* mobile에서는 커지지 않는다. */
.different-img:hover
{
    transform: scale(1.1);
}
/* 포켓몬 이름이 나오는 부분이다.  */
.different-img-name,
.type-img-name,
.compare-img-name,
.ability-img-name
 {
    text-align: center;
    font-size: var(--fontsize-p);
}
.small-different .different-img-name,
.small-different .type-img-name,
.small-different .compare-img-name,
.small-different .ability-img-name
{
    font-size: var(--fontsize-example);
}  
.small-all .different-img-name
{
    font-size: var(--fontsize-mobile-placeholder);
}
.different-img-name
{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 4번째 타입 문제다.  */
.type-wrapper {
    gap: var(--gap-2);
}
/* 이미지 아래 포켓몬 이름이 나온다. */
.type-img-container {
    gap: var(--gap-1);
}

/* 5번째 비교 문제다.  */
.compare-wrapper {
    padding-top: var(--gap-2);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 비교문제는 세로로 배열한다. */
/* grid를 해야 안에 있는 canvas를 100%로 했을 때 크기가 화면에 따라서 바뀐다. */
.compare-img-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 32vh);
    gap: var(--gap-1);
}
/* 화면 높이가 작을 때다. */
.small-compare .compare-img-container {
    grid-template-rows: repeat(2, 28vh);
}
.small-all .compare-img-container {
    grid-template-rows: repeat(2, 25vh);
}
.compare-img-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-2);
}
.compare-img {
    height: 70%;
    max-height: 300px;
    border-radius: var(--gap-3);
}
/* 화면의 높이가 너무 긴 경우다. */
.long-compare .compare-img {
    width: calc(var(--gameWrapper-width) - var(--gap-1));
    height: calc(var(--gameWrapper-width)- var(--gap-1));
}
.ability-explain{
    /* 모바일에서는 작게 한다.*/
    font-size: var(--fontsize-h2);    
    padding: var(--gap-1);
}

/* 8번째 문제다. 상성을 문제다. */
.typechart-example{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.td-title, .td-type{
    padding: 5px;
    width: 200px; 
    font-size: var(--fontsize-p);  
    text-align: center; 
}
.td-title{
    vertical-align : top;    
}
.td-type
.typechart-sign{
    width: 30px;
}
.attack-name,
.defense-name,
.attack-type,
.defense-type
{
    text-align: center;    
}
.attack-type,
.defense-type{
    font-size: var(--fontsize-h2);
    font-weight: bold;
    padding: 5px 10px;
    border-radius: var(--gap-1);
    box-shadow: 0 0 3px var(--box-shadow-1);
}
/* 다음 문제 버튼이다. */
#next {
    /* 부모가 game-container가 된다.*/
    position: absolute;
    bottom: var(--gap-1);
    right: var(--gap-1);
    font-size: 28px;
}


/* mobile 화면 */
@media screen and (max-width: 890px) {    
    .game-container {        
        /* 모바일에서는 작게 한다.*/
        padding: 0 var(--gap-1) 20px;       
    }
    .score-wrapper {
        margin-bottom: 5px;
    }
    .word-select,
    .wordHard-select
     {
        /* !important를 하지 않으면 적용되지 않는다. */
        gap: 4px !important;
    }
    /* 주관식 문제에서 버튼을 작게 만든다. */
    .word-select p,
    .wordHard-select p {
        font-size: calc(var(--size-button) - 6px);
        width: calc(calc(var(--size-button) - 6px) + 6px);
        height: calc(calc(var(--size-button) - 6px) + 6px);
    }
    .word-option p,
    .wordHard-option p
    {
        font-size: calc(var(--size-button) - 4px);
        width: calc(calc(var(--size-button) - 4px) + 6px);
        height: calc(calc(var(--size-button) - 4px) + 6px);
    }
    /* mobile에서는 hover 했을 때 커지지 않는다. */
    .different-img:hover {
        transform: scale(1);
    }      
    .score-container .high-score,
    .score-container .top-rank,
    .score-container .total-score{
        font-size: var(--fontsize-h1);
    }
    .ability-explain{
        font-size: var(--fontsize-h3);
    }   
}