*{
    box-sizing:border-box;
}

body{

    margin:0;

    font-family:"Pretendard","맑은 고딕",sans-serif;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    background-image:url("images/background.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

}

#game{

    width:900px;

    background:rgba(255,255,255,0.88);

    backdrop-filter:blur(10px);

    border-radius:30px;

    padding:35px;

    box-shadow:
    0 15px 45px rgba(0,0,0,.18);

}

h1{

    margin:0 0 25px;

    text-align:center;

    font-size:35px;

    color:#4b67c6;

    text-shadow:0 2px 5px rgba(255,255,255,.7);

}

#topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    font-size:26px;

    color:#666;

}

#questionNumber{

    font-size:28px;

    font-weight:bold;

}

#timerBox{

    background:#ffcc5a;

    color:#7a5400;

    padding:10px 20px;

    border-radius:40px;

    font-weight:bold;

    box-shadow:0 5px 15px rgba(255,180,0,.25);

}

#imageBox{

    width:100%;

    height:500px;

    background:white;

    border-radius:25px;

    border:4px solid #ffe9b0;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

#questionImage{

    max-width:100%;

    max-height:100%;

    transition:.4s;

}

#questionImage:hover{

    transform:scale(1.02);

}

#answerInput{

    width:100%;

    margin-top:25px;

    padding:18px;

    font-size:24px;

    border-radius:15px;

    border:3px solid #b9d7ff;

    background:white;

    color:#444;

    outline:none;
	
	text-align:center;

}

#answerInput:focus{

    border-color:#6aa8ff;

    box-shadow:0 0 15px rgba(80,150,255,.35);

}

#submitBtn{

    width:100%;

    margin-top:18px;

    padding:18px;

    border:none;

    border-radius:15px;

    background:#6cb8ff;

    color:white;

    font-size:25px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

#submitBtn:hover{

    background:#57a8ff;

    transform:translateY(-2px);

}

#submitBtn:active{

    transform:scale(.98);

}

#message{
	
	display:none;

    min-height:90px;

    margin-top:25px;

    text-align:center;

    font-size:40px;

    font-weight:bold;

}

#nextTimer{

	display:none;

    margin-top:10px;

    font-size:24px;

    color:#777;

    font-weight:bold;
	
	text-align:center;

}

#answerArea{

    margin-top:25px;

}

#startScreen{

    text-align:center;

}

.startBtn{

    display:block;

    width:220px;

    margin:15px auto;

    padding:18px;

    font-size:26px;

    border:none;

    border-radius:15px;

    background:#6CB8FF;

    color:white;

    cursor:pointer;

    transition:.2s;

}

.startBtn:hover{

    transform:scale(1.05);

}

/* 결과 화면 */

.result-screen{

    text-align:center;

}

.result-screen h1{

    color:#4b67c6;

    margin-bottom:20px;

}

.result-screen h2{

    color:#555;

    margin:10px 0;

}

.result-score{

    font-size:65px;

    font-weight:bold;

    color:#4CAF50;

    margin:30px 0;

}

.result-comment{

    font-size:28px;

    color:#ff9800;

    margin-bottom:35px;

}

.restart-btn{

    background:linear-gradient(135deg,#6EC6FF,#4F9BFF);

    color:white;

    border:none;

    border-radius:18px;

    padding:18px 55px;

    font-size:24px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 8px 18px rgba(79,155,255,.35);

}

.restart-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(79,155,255,.45);

}

.restart-btn:active{

    transform:scale(.97);

}