*{box-sizing:border-box}
body{margin:0;font-family:'Baloo 2',system-ui,sans-serif;background:linear-gradient(180deg,#f2f8e8 0%,#f6f9ec 340px);color:#2c3a28}
.wrap{max-width:900px;margin:0 auto;padding:0 18px}
.btn{cursor:pointer;font-family:'Baloo 2',sans-serif;font-weight:700;border:none;border-radius:14px;padding:12px 18px;font-size:16px;transition:transform .08s,background .15s}
.btn:active{transform:scale(.96)}
.btn-primary{background:#86b82c;color:#fff}
.btn-ghost{background:#eef5d8;color:#6a7c2f}
.btn-ghost:hover{background:#e4edc6}

.topbar{background:linear-gradient(135deg,#96c93d 0%,#5fa82b 100%);color:#fff;padding:18px 0;position:sticky;top:0;z-index:20;box-shadow:0 4px 18px rgba(130,180,40,.35)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand-ico{font-size:34px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.15))}
.brand h1{font-family:'Fraunces',serif;font-size:25px}
.brand-txt p{margin:1px 0 0;font-size:13px;opacity:.94;font-weight:600}
.harvest{background:rgba(255,255,255,.2);border-radius:999px;padding:8px 16px;font-weight:700;font-size:15px;white-space:nowrap}

main{padding:20px 0 60px}
.panel{background:#fff;border:1px solid #e6eed0;border-radius:22px;padding:22px;margin-bottom:18px;box-shadow:0 8px 22px rgba(140,170,60,.15)}

.garden{background:#f8fcec;border:1px solid #e6eed0}
.garden-title{font-family:'Fraunces',serif;font-size:15px;color:#6a7c2f;margin-bottom:10px}
.garden-bed{display:flex;flex-wrap:wrap;gap:4px}
.flower{font-size:20px;line-height:1;opacity:.16;transition:opacity .5s,transform .3s}
.flower.bloom{opacity:1;animation:pop .4s ease}

.difficulty{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.dif-label{font-family:'Fraunces',serif;font-size:14px;color:#6a7c2f;font-weight:600}
.dif{cursor:pointer;border:none;background:#eef5d8;color:#6a7c2f;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;transition:.12s}
.dif:hover{background:#e4edc6}
.dif.active{background:#86b82c;color:#fff}
.modes{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.mode{cursor:pointer;border:none;background:#eef5d8;color:#6a7c2f;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;padding:12px 18px;border-radius:16px;transition:.12s}
.mode:hover{background:#e4edc6}
.mode.active{background:#86b82c;color:#fff;box-shadow:0 6px 16px rgba(134,184,44,.35)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
.animal-card{cursor:pointer;background:#fff;border:2px solid #e6eed0;border-radius:16px;padding:14px 8px;text-align:center;transition:.12s}
.animal-card:hover{transform:translateY(-2px);border-color:#a9d45e;box-shadow:0 8px 18px rgba(150,190,70,.2)}
.animal-card .E{font-size:34px;display:block}
.animal-card .N{font-size:14px;font-weight:700;color:#2c3a28;display:block;margin-top:6px}

.q-top{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:#7a8a4a;margin-bottom:10px}
.q-score{color:#86b82c;font-size:18px}
.q-prompt{text-align:center;margin:10px 0 20px}
.q-q{font-family:'Fraunces',serif;font-weight:700;font-size:25px;color:#2f4220;margin-top:12px}
.big{font-size:80px;line-height:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.16))}

.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;max-width:560px;margin:0 auto}
.choice{cursor:pointer;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:17px;color:#2f4220;background:#f6fae9;border:3px solid #e0ecc2;border-radius:16px;min-height:78px;padding:10px 12px;display:flex;align-items:center;justify-content:center;text-align:center;transition:.12s}
.choice .emoji{font-size:30px;margin-right:8px}
.choice:hover{border-color:#a9d45e;background:#f0fade;transform:scale(1.03)}
.choice.correct{background:#c8f0b6;border-color:#5cb84a;animation:pulse .5s}
.choice.wrong{background:#fee2e2;border-color:#ef6a6a}
.feedback{text-align:center;font-size:17px;font-weight:700;min-height:34px;margin-top:16px}
.feedback.good{color:#4a9630}
.feedback.bad{color:#e05252}

.modal{position:fixed;inset:0;background:rgba(50,60,20,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}
.modal[hidden]{display:none}
.letter-card{position:relative;background:#fefeff;border-radius:24px;padding:30px 34px;text-align:center;max-width:320px;width:100%;box-shadow:0 30px 60px rgba(0,0,0,.28);border:3px solid #bfe08e}
.close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:20px;cursor:pointer;color:#8aa06a}
.letter-word{font-family:'Fraunces',serif;font-size:30px;font-weight:600;color:#2f4220;margin-top:6px}
.facts{margin:14px auto;display:grid;gap:8px;max-width:240px}
.fact{background:#eef8da;border-radius:12px;padding:8px 12px;font-size:15px;font-weight:600}
.fact b{color:#5fa82b}
.btn-listen{cursor:pointer;background:#4aa6ff;color:#fff;border:none;font-family:'Baloo 2';font-weight:700;font-size:17px;padding:12px 24px;border-radius:999px;margin:6px 0;transition:.12s}
.btn-listen:hover{background:#3a8fe2}
.letter-card .btn-ghost{width:100%}

@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.bounce{animation:pop .5s ease}

@media(max-width:560px){.choices{grid-template-columns:repeat(2,1fr)}.choice{font-size:15px;min-height:64px}.topbar-in{flex-direction:column;align-items:stretch}}