body{
font-family:system-ui;
background:#f5f5f5;
padding:20px;
text-align:center;
}

.top-bar{
display:flex;
justify-content:space-between;
margin-bottom:20px;
font-weight:bold;
}

.answer-box{
min-height:70px;
border:2px dashed #aaa;
padding:10px;
margin:20px 0;
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
}

.word-bank{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
}

.word{
background:white;
padding:10px 15px;
border-radius:16px;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
cursor:pointer;
transition:0.2s;
}

.word:hover{
transform:scale(1.05);
}

.correct{
background:#4CAF50;
color:white;
}

.wrong{
background:#F44336;
color:white;
animation:shake .3s;
}

@keyframes shake{
0%{transform:translateX(0);}
25%{transform:translateX(-4px);}
50%{transform:translateX(4px);}
75%{transform:translateX(-4px);}
100%{transform:translateX(0);}
}