#granny-puzzles{
max-width:720px;
margin:20px auto;
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:#f5f5f5;
background:#0b0b0d;
padding:20px;
border-radius:12px;
border:1px solid #262626;
box-shadow:0 18px 40px rgba(0,0,0,0.7);
}
#granny-puzzles h2{
margin:0 0 12px;
font-size:1.6rem;
text-align:center;
}
#granny-puzzles p{
margin:6px 0;
line-height:1.4;
}
.puzzle-card{
background:#101014;
border-radius:10px;
padding:14px 16px;
margin:14px 0;
border:1px solid #252525;
}
.puzzle-card strong{
font-size:1.05rem;
}
.option{
display:block;
margin:6px 0;
border-radius:999px;
border:1px solid #444;
padding:7px 12px;
cursor:pointer;
transition:background 0.15s,border-color 0.15s,transform 0.08s,color 0.15s;
background:transparent;
}
.option span{
font-size:0.95rem;
}
.option:hover{
background:rgba(255,80,80,0.06);
border-color:#ff4b4b;
transform:translateY(-1px);
}
.option input{
display:none;
}
.option.selected{
border-color:#ff4b4b;
color:#ff8989;
background:rgba(255,75,75,0.08);
}
.result{
margin-top:6px;
font-size:0.9rem;
min-height:1.2em;
}
.result.correct{
color:#2ecc71;
}
.result.incorrect{
color:#ff6b6b;
}
.result.warn{
color:#f1c40f;
}
#check-answers{
margin:10px 0 4px;
width:100%;
border-radius:999px;
background:transparent;
color:#ff4b4b;
padding:10px 16px;
font-size:1rem;
font-weight:600;
cursor:pointer;
transition:background 0.15s,transform 0.08s,box-shadow 0.1s,border-color 0.15s,color 0.15s;
border:1px solid #ff4b4b;
}
#check-answers:hover{
background:rgba(255,75,75,0.1);
box-shadow:0 6px 16px rgba(0,0,0,0.7);
transform:translateY(-1px);
color:#ffecec;
}
#overall-result{
margin-top:6px;
font-size:0.95rem;
text-align:center;
}
#overall-result.good{
color:#2ecc71;
}
#overall-result.mid{
color:#f1c40f;
}
#overall-result.bad{
color:#ff9f43;
}
.small-note{
font-size:0.8rem;
color:#a0a0a0;
text-align:center;
margin-top:4px;
}