@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

body{
font-family:'Nunito',sans-serif;
min-height:100vh;
background:linear-gradient(135deg,#dbeafe 0%,#e0f2fe 40%,#bae6fd 100%);
display:flex;
align-items:center;
justify-content:center;
padding:30px;
color:#1e293b;
overflow-x:hidden;
}

.container{
max-width:750px;
width:100%;
display:flex;
flex-direction:column;
align-items:center;
gap:28px;
}

h1{
font-size:2.2rem;
font-weight:900;
padding:22px 40px;
border-radius:30px;
background:rgba(255,255,255,0.55);
backdrop-filter:blur(16px);
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* CARD */
.clay-card{
width:100%;
padding:28px;
border-radius:28px;
background:rgba(255,255,255,0.6);
backdrop-filter:blur(18px);
box-shadow:0 12px 32px rgba(0,0,0,0.08);
transition:0.25s;
}

.clay-card:hover{
transform:translateY(-6px);
}

/* IMAGE */
#image-container img{
width:100%;
max-width:380px;
border-radius:20px;
display:block;
margin:15px auto;
box-shadow:0 15px 30px rgba(0,0,0,0.2);
}

/* GRID */
.info-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px;
}

.info-item{
padding:15px;
border-radius:18px;
background:rgba(255,255,255,0.7);
}

/* LIST */
.personality-list li{
padding:10px 15px;
margin:6px 0;
border-radius:14px;
background:rgba(255,255,255,0.7);
}

/* RATINGS */
.ratings-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:15px;
}

.rating-item{
padding:14px;
border-radius:16px;
background:rgba(255,255,255,0.7);
}

.full-star{ color:#f59e0b; }
.empty-star{ color:#ddd; }

/* BUTTON */
.fetch-button{
padding:16px 42px;
border:none;
border-radius:50px;
cursor:pointer;
background:linear-gradient(135deg,#6366f1,#3b82f6);
color:white;
font-weight:800;
}

/* ERROR */
.error{
color:#b91c1c;
margin-top:10px;
}