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

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

input,textarea{
width:95%;
padding:10px;
margin:5px 0;
}

button{
padding:10px 20px;
background:#4CAF50;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
}

.word-container{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-top:20px;
}

.word{
background:white;
padding:10px 15px;
border-radius:16px;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
touch-action:none;
transition:transform .2s;
}

.word.dragging{
position:fixed;
z-index:1000;
transform:scale(1.1);
box-shadow:0 8px 20px rgba(0,0,0,.4);
}

.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);}
}