*{box-sizing:border-box}
body{margin:0;font-family:'Quicksand',sans-serif;background:linear-gradient(135deg,#fff9fb,#e8fff7);color:#073642;display:flex;justify-content:center;min-height:100vh;padding:28px;}
.page{width:min(980px,96vw);}
header{ text-align:center;margin-bottom:12px;}
.title{font-family:'Pacifico',cursive;font-size:40px;color:#ff5fa3;text-shadow:0 6px 18px rgba(255,95,163,0.08);}
.subtitle{font-size:14px;color:#3a6b8f;margin-top:6px}
.board{background:#fff;border-radius:18px;padding:20px;box-shadow:0 18px 40px rgba(9,30,45,0.06);}
.top{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.score{background:linear-gradient(90deg,#8ff0d6,#a9dbff);padding:8px 12px;border-radius:999px;font-weight:700;color:#05323a;}
.progress{flex:1;height:12px;background:#eef6ff;border-radius:999px;overflow:hidden;}
.bar{height:100%;width:0%;background:linear-gradient(90deg,#ff88c2,#78dfff);transition:width .35s ease;}
.count{background:linear-gradient(90deg,#8ff0d6,#a9dbff);padding:8px 12px;border-radius:999px;font-weight:700;color:#05323a;}

.card{padding:26px;border-radius:14px;min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.03);}
.animal{font-size:64px;animation:pop .9s ease;}
@keyframes pop{0%{transform:translateY(-10px) scale(.98)}50%{transform:translateY(0) scale(1.02)}100%{transform:translateY(-4px) scale(1)}}
.question{font-size:34px;font-weight:700;margin:12px 0;color:#123;}
.answers{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:10px;}
.opt{width:160px;height:84px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;cursor:pointer;box-shadow:0 14px 30px rgba(8,24,40,0.06);transition:transform .12s,box-shadow .12s;}
.opt:hover{transform:translateY(-6px);box-shadow:0 24px 44px rgba(8,24,40,0.12);}
.opt.c1{background:linear-gradient(180deg,#ffd9e9,#ffeef6);color:#123}
.opt.c2{background:linear-gradient(180deg,#dff6ff,#eefaff);color:#123}
.opt.c3{background:linear-gradient(180deg,#eaffef,#f2fff6);color:#123}
.opt.correct{outline:4px solid rgba(76,175,80,0.18);box-shadow:0 20px 40px rgba(76,175,80,0.08)}
.opt.wrong{outline:4px solid rgba(244,67,54,0.12);box-shadow:0 20px 40px rgba(244,67,54,0.06)}

.feedback{min-height:28px;margin-top:12px;font-weight:700;color:#18434b;}
.endPanel{margin-top:12px;text-align:center;}
.congrats{background:linear-gradient(90deg,#c6f6d8,#d6f7ff);padding:12px;border-radius:12px;color:#05561d;font-weight:800;box-shadow:0 10px 22px rgba(0,0,0,0.06);}
.btn{margin-top:10px;padding:10px 18px;border-radius:10px;border:none;background:linear-gradient(90deg,#38e3a5,#47a9ff);color:#fff;font-weight:800;cursor:pointer}
@media(max-width:640px){.opt{width:92%;height:72px;font-size:20px}.animal{font-size:54px}.question{font-size:28px}}