:root{--bg:#f6f7fb;--card:#fff;--text:#0f172a;--muted:#64748b;--border:#e5e7eb;--primary:#111827;--primaryText:#fff;--ok:#16a34a;--bad:#dc2626;--shadow:0 10px 25px #0f172a14;--radius:18px;--sdg-6:#26bde2;--sdg-7:#fcc30b;--sdg-8:#a21942;--sdg-9:#fd6925;--sdg-10:#dd1367;--sdg-11:#fd9d24;--sdg-12:#bf8b2e;--sdg-13:#3f7e44;--sdg-15:#56c02b;--sdg-16:#00689d;--sdg-17:#19486a}*{box-sizing:border-box}html,body{height:100%}body{background:radial-gradient(1200px 800px at 20% -10%, #eef2ff 0%, var(--bg) 55%);color:var(--text);margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}#app{min-height:100%}.container{max-width:920px;margin:0 auto;padding:18px 16px 40px}.header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.header h1{letter-spacing:-.02em;margin:0;font-size:20px}.xp{color:var(--muted);border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffb3;border-radius:999px;padding:10px 12px;font-size:14px}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.card h2{margin:0 0 10px;font-size:18px}.hint{color:var(--muted);margin:12px 0 0;font-size:13px;line-height:1.4}.levels{flex-wrap:wrap;gap:10px;margin-top:10px;display:flex}.btn{appearance:none;color:var(--primary);cursor:pointer;background:#fff;border:1px solid #1118271a;border-radius:14px;padding:10px 14px;font-weight:700;transition:transform 50ms,box-shadow .15s,background .15s,border-color .15s;box-shadow:0 1px #0f172a0d}.btn:hover{box-shadow:0 12px 20px #0f172a14}.btn:active{transform:translateY(1px)}.btn.btn-ghost{border-color:var(--border);background:#ffffffb3}.btn.btn-locked{opacity:.45;cursor:not-allowed}.actions{flex-wrap:wrap;gap:10px;margin-top:12px;display:flex}.topline{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;display:flex}.meta{color:var(--muted);flex-direction:column;gap:6px;font-size:13px;display:flex}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.lvl{border:1px solid var(--border);color:#111827;letter-spacing:.02em;background:#f8fafc;border-radius:999px;align-self:flex-start;padding:6px 10px;font-weight:800;display:inline-flex}.sdg{color:#fff;letter-spacing:.02em;border-radius:999px;align-items:center;gap:8px;padding:7px 10px;font-size:12px;font-weight:900;display:inline-flex;box-shadow:0 12px 20px #0f172a29}.sdg .sdg-icon{background:#ffffff2e;border:1px solid #ffffff38;border-radius:7px;justify-content:center;align-items:center;width:22px;height:22px;font-size:14px;line-height:1;display:inline-flex}.progressbar{background:#eef2ff;border:1px solid #e5e7eb;border-radius:999px;width:min(520px,100%);height:10px;margin-top:4px;overflow:hidden}.progressbar>div{background:linear-gradient(90deg,#6366f1,#22c55e);width:0%;height:100%}.word{letter-spacing:-.04em;margin:8px 0 16px;font-size:52px;line-height:1.05}@media (width<=520px){.word{font-size:44px}.header h1{display:none}}.choices{flex-direction:column;gap:12px;display:flex}.choice{text-align:left;border:1px solid var(--border);width:100%;color:var(--text);cursor:pointer;background:#fff;border-radius:16px;padding:16px;font-size:16px;line-height:1.3;transition:transform 50ms,box-shadow .15s,border-color .15s}.choice:hover{border-color:#cbd5e1;box-shadow:0 14px 22px #0f172a1a}.choice:active{transform:translateY(1px)}.choice:disabled{opacity:.72;cursor:not-allowed}.feedback{letter-spacing:.01em;margin-top:14px;font-weight:900}.feedback.ok{color:var(--ok)}.feedback.bad{color:var(--bad)}.oktext{color:var(--ok);font-weight:900}.badtext{color:var(--bad);font-weight:900}.badges{flex-wrap:wrap;gap:10px;margin-top:12px;display:flex}.badge{border:1px solid var(--border);background:#fff;border-radius:999px;align-items:center;gap:10px;padding:10px 12px;font-weight:900;display:inline-flex}.badge .medal{color:#fff;background:#111827;border-radius:10px;justify-content:center;align-items:center;width:28px;height:28px;font-size:15px;display:inline-flex}.badge.locked{opacity:.45}.confetti{pointer-events:none;z-index:9999;position:fixed;inset:0;overflow:hidden}.confetti i{opacity:.95;background:#22c55e;border-radius:2px;width:10px;height:14px;animation:1.1s linear forwards fall;position:absolute;top:-20px;transform:rotate(0)}@keyframes fall{to{transform:translateY(110vh)rotate(540deg)}}