*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif}
body{background:#f6fbff;color:#0e2a41}
.topbar{position:sticky;top:0;display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;background:#e9f4ff;border-bottom:1px solid #cfe3f6}
.topbar .logo{height:44px;object-fit:contain}
.topbar h1{flex:1;margin:0;font-size:1.4rem}
.topbar .ver{font-size:.9rem;color:#0d4470;opacity:.7}
.actions button{margin-left:.5rem}
.screen{display:none;padding:1rem;max-width:1100px;margin:0 auto}
.screen.active{display:block}
.hero{background:white;border:1px solid #e3edf7;border-radius:16px;padding:1.25rem;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.start-box{display:flex;gap:.5rem;align-items:center;margin:.75rem 0}
.mode-grid{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.5rem;margin-top:.75rem}
.features>div{background:#f1f7ff;border:1px dashed #bcd5ef;border-radius:12px;padding:.5rem;text-align:center}
.sidebar{width:280px;flex:0 0 280px}
.gamearea{flex:1;min-width:300px;background:white;border:1px solid #e3edf7;border-radius:16px;padding:1rem;position:relative}
#screenGame{display:flex;gap:1rem}
.avatar{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:white;border:1px solid #e3edf7;border-radius:16px;padding:.75rem}
.avatar img{width:160px;height:160px}
.speech{background:#fff8e1;border:1px solid #ffe082;border-radius:12px;padding:.5rem;font-size:.95rem}
.progress{margin:.75rem 0;background:#f6fbff;border:1px solid #d6eaff;border-radius:12px;padding:.5rem;line-height:1.7}
.badges{display:flex;gap:.25rem;flex-wrap:wrap}
.badge{background:#fff3cd;border:1px solid #ffe082;border-radius:999px;padding:.2rem .6rem;font-size:.8rem}
.primary,.secondary,.ghost{border-radius:12px;padding:.6rem .9rem;border:1px solid transparent;cursor:pointer}
.primary{background:#1565c0;color:white;border-color:#1565c0}
.primary:hover{filter:brightness(.98)}
.secondary{background:#e1f2ff;border-color:#bfe0fb;color:#0d4470}
.secondary.full,.ghost.full{width:100%}
.ghost{background:white;border-color:#d2e5f8;color:#0d4470}
.task{margin:.5rem 0 0.3rem 0;font-size:1.05rem}
.answer{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.5rem 0}
.answer input{min-width:220px;padding:.5rem;border-radius:10px;border:1px solid #cfe3f6}
.answer.shake{animation:shake .25s}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-4px)}100%{transform:translateX(0)}}
.solution{background:#f7fbff;border:1px solid #cfe3f6;border-radius:12px;padding:.5rem}
.nav{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}
.footer{padding:1rem;text-align:center;color:#3a5670}
dialog{border:none;border-radius:16px;max-width:800px;width:92%;padding:0;box-shadow:0 10px 30px rgba(0,0,0,.2)}
dialog form{padding:1rem}
dialog::backdrop{background:rgba(0,0,0,.35)}
.helpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem}
.helpgrid section{background:#f6fbff;border:1px solid #cfe3f6;border-radius:12px;padding:.5rem}
.celebrate{position:absolute;inset:0;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center}
.celebrate.hidden{display:none}
#confetti{position:absolute;inset:0;width:100%;height:100%}
.celebrate-card{position:relative;background:white;border-radius:16px;border:1px solid #e3edf7;padding:1rem 1.25rem;box-shadow:0 10px 30px rgba(0,0,0,.25);text-align:center}
.big-emoji{font-size:3rem}
.celebrate-text{font-size:1.1rem;margin-top:.25rem}
.challenge{position:absolute;top:10px;right:10px;background:#e1f2ff;border:1px solid #bfe0fb;border-radius:12px;padding:.35rem .6rem;font-size:.95rem}
@media (max-width: 900px){
  #screenGame{flex-direction:column}
  .sidebar{width:auto}
  .gamearea{order:2}
}