@font-face{font-family:'Andika';font-weight:400;font-display:swap;src:url(../fonts/andika-regular.woff2) format('woff2')}
@font-face{font-family:'Andika';font-weight:700;font-display:swap;src:url(../fonts/andika-bold.woff2) format('woff2')}
:root{--bg:#FFFBEF;--ink:#1d1a14;--muted:#6b6458;--honey:#F2B33D;--honey-soft:#FCE6B2;--card:#ffffff;--good:#4E9A52;--bad:#D9534F;--line:#1d1a14;color-scheme:light;
 box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1b1812;--ink:#f6efe0;--muted:#b8ad98;--honey:#F2B33D;--honey-soft:#4a3a17;--card:#26221a;--good:#7cc27f;--bad:#ef7a76;--line:#f6efe0;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#1b1812;--ink:#f6efe0;--muted:#b8ad98;--honey:#F2B33D;--honey-soft:#4a3a17;--card:#26221a;--good:#7cc27f;--bad:#ef7a76;--line:#f6efe0;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:'Andika','Comic Sans MS','Trebuchet MS',sans-serif;display:flex;justify-content:center}
main{width:100%;max-width:560px;padding:16px 18px 28px;display:flex;flex-direction:column;gap:18px;min-height:100%}
h1{font-size:2rem;margin:4px 0 0;line-height:1.1}
p{margin:0;color:var(--muted);font-size:1.05rem;line-height:1.4}
button{font-family:inherit;color:var(--ink);cursor:pointer}
button:focus-visible{outline:3px solid var(--honey);outline-offset:3px}
.hidden{display:none!important}
.group{display:flex;flex-direction:column;gap:8px}
.group > span{font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid var(--line);background:var(--card);border-radius:999px;padding:8px 14px;font-size:1rem}
.chip[aria-pressed="true"]{background:var(--honey);color:#1d1a14}
.big{border:3px solid var(--line);background:var(--honey);color:#1d1a14;border-radius:20px;padding:16px;font-size:1.5rem;font-weight:700;box-shadow:0 5px 0 var(--line);margin-top:6px}
.big:active{transform:translateY(4px);box-shadow:0 1px 0 var(--line)}
.hive{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.cell{width:26px;height:30px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--line);position:relative}
.cell::after{content:"";position:absolute;inset:2.5px;clip-path:inherit;background:var(--card);transition:background .3s}
.cell.on::after{background:var(--honey)}
.stage{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;justify-content:center}
.bee{font-size:4rem;line-height:1;transition:transform .3s}
.bee.hop{animation:hop .5s}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-22px) rotate(-8deg)}}
.pic{font-size:5.5rem;line-height:1}
.speak{border:3px solid var(--line);background:var(--card);border-radius:50%;width:92px;height:92px;font-size:2.6rem;box-shadow:0 4px 0 var(--line)}
.speak:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.hint{font-size:1rem;color:var(--muted);text-align:center;min-height:1.4em}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.opt{border:3px solid var(--line);background:var(--card);border-radius:18px;padding:18px 4px;font-size:2.4rem;box-shadow:0 4px 0 var(--line);min-height:96px}
.opt.right{background:var(--good);color:#fff}
.opt.wrong{animation:shake .4s;border-color:var(--bad)}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.done{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;flex:1}
.done .bee{font-size:6rem}
.top{display:flex;justify-content:space-between;align-items:center}
.link{background:none;border:none;font-size:1rem;text-decoration:underline;color:var(--muted);padding:6px}
@media (prefers-reduced-motion:reduce){.bee.hop,.opt.wrong{animation:none}}