body{
font-family:Arial;
margin:0;
background:linear-gradient(135deg,#4facfe,#00f2fe);
min-height:100vh;
padding:20px;
color:#333;
}

header{
display:flex;
justify-content:space-between;
align-items:center;
color:white;
margin-bottom:20px;
}

.stats span{
margin-left:10px;
font-weight:bold;
}

.card{
background:white;
padding:15px;
margin-bottom:10px;
border-radius:12px;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
transition:transform .2s;
}

.card:hover{
transform:scale(1.03);
}

#addBtn{
position:fixed;
bottom:20px;
right:20px;
width:65px;
height:65px;
border-radius:50%;
border:none;
font-size:30px;
background:#ff4081;
color:white;
box-shadow:0 6px 15px rgba(0,0,0,0.3);
}

textarea{
width:100%;
height:80px;
margin-bottom:10px;
border-radius:8px;
border:none;
padding:10px;
}

button{
padding:10px 15px;
border:none;
border-radius:8px;
background:#4caf50;
color:white;
font-weight:bold;
}

.hidden{
display:none;
}

#answerBox{
min-height:50px;
background:white;
padding:10px;
border-radius:10px;
margin-bottom:10px;
border:3px dashed #aaa;
}

#words span{
display:inline-block;
background:white;
padding:10px 14px;
margin:6px;
border-radius:10px;
cursor:pointer;
box-shadow:0 3px 8px rgba(0,0,0,0.2);
transition:all .2s;
}

#words span:hover{
background:#ffd54f;
}

.modal{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.5);
display:flex;
align-items:center;
justify-content:center;
}

.modal-content{
background:white;
padding:20px;
border-radius:12px;
width:90%;
max-width:400px;
}