:root{--bg:#FDF6E9;--panel:#fff;--ink:#2b2220;--mute:#8a7a72;--acc:#DF5F4D;--acc2:#EB6443;--ok:#5f7d1f;--bad:#c0392b;--green:#D5D360;--blue:#677FBE;--line:#2b2220}
*{box-sizing:border-box}
body{margin:0;background:var(--bg) radial-gradient(#f3dfc6 1.5px,transparent 1.5px) 0 0/22px 22px;color:var(--ink);font:16px/1.5 "Hanken Grotesk","HK Grotesk",system-ui,sans-serif;min-height:100vh}
main{max-width:720px;margin:0 auto;padding:16px}
h1{margin:8px 0;font-size:1.9rem;font-weight:800;color:var(--acc);letter-spacing:-.02em;line-height:1.15}
h2{font-size:1.3rem;font-weight:800;color:var(--ink);margin:.5em 0}
.bar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.logo{height:44px;width:auto;display:block}.welcome-logo{height:80px;margin:0 auto 8px}
.xp{background:var(--green);border:3px solid var(--line);border-radius:99px;padding:4px 14px;font-weight:800;box-shadow:3px 3px 0 var(--line)}
.card{background:var(--panel);border:3px solid var(--line);border-radius:22px;padding:20px;margin-top:16px;box-shadow:6px 6px 0 var(--acc);animation:in .35s ease-out}
.card.hello{background:#fff}
.big-emoji{font-size:3.4rem;line-height:1}.pop{animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
.emojis{display:flex;gap:10px;justify-content:center;font-size:2rem;margin:6px 0}
.emojis span{animation:bob 2s ease-in-out infinite}.emojis span:nth-child(2n){animation-delay:.3s}.emojis span:nth-child(3n){animation-delay:.6s}
.chip{display:inline-block;background:var(--blue);color:#fff;font-weight:800;font-size:.85rem;border-radius:99px;padding:2px 12px;border:2px solid var(--line)}
.lvl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.track{flex:1;min-width:100px;height:16px;border:3px solid var(--line);border-radius:99px;background:#fff;overflow:hidden}
.fill{height:100%;background:repeating-linear-gradient(45deg,var(--acc),var(--acc) 8px,var(--acc2) 8px,var(--acc2) 16px);transition:width .8s}
.map{position:relative;height:300px;background:#fff;border:3px solid var(--line);border-radius:22px;margin-top:16px;overflow:hidden;box-shadow:6px 6px 0 var(--blue)}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.node{position:absolute;transform:translate(-50%,-50%);border:3px solid var(--line);background:#eee;border-radius:50%;width:58px;height:58px;font-size:26px;cursor:pointer;color:inherit;transition:transform .15s}
.node.open{background:var(--acc);animation:pulse 1.4s infinite}
.node.open:hover{transform:translate(-50%,-50%) scale(1.15) rotate(-6deg)}
.node.done{background:var(--green)}
.node:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(1)}
.node small{position:absolute;top:62px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;white-space:nowrap;color:var(--ink);background:var(--bg);border-radius:99px;padding:0 8px}
.hero{position:absolute;transform:translate(-50%,-130%);font-size:30px;transition:left .8s,top .8s;pointer-events:none;animation:bob 1.2s ease-in-out infinite}
.btn{background:var(--acc);color:#fff;border:3px solid var(--line);border-radius:14px;padding:10px 18px;font:inherit;font-weight:800;cursor:pointer;margin-top:12px;box-shadow:4px 4px 0 var(--line);transition:transform .1s,box-shadow .1s}
.btn:hover{background:var(--acc2);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--line)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--line)}
.btn.big{font-size:1.1rem;padding:12px 22px}
.opt{display:block;width:100%;text-align:left;margin:10px 0;padding:12px 14px;border-radius:14px;border:3px solid var(--line);background:#fff;color:inherit;font:inherit;font-weight:600;cursor:pointer;box-shadow:3px 3px 0 var(--line);transition:transform .1s}
.opt:hover:not(:disabled){background:#eef1fa;transform:translateX(4px)}
.opt.ok{background:var(--green);animation:pop .4s}
.opt.bad{background:#fbd5cf;animation:shake .4s;text-decoration:line-through;opacity:.8}
.fb{margin-top:8px;color:var(--ink)}.cheer{color:var(--acc);font-size:1.15rem}.streak{color:var(--acc2)}
.prog{display:flex;gap:6px;margin-bottom:8px}.prog i{flex:1;height:10px;border:2px solid var(--line);border-radius:99px;background:#fff}
.prog i.on{background:var(--green)}.prog i.cur{background:var(--acc)}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.badge{width:46px;height:46px;border:3px dashed var(--mute);border-radius:50%;display:grid;place-items:center;font-size:1.5rem;color:var(--mute);font-weight:800}
.badge.got{border:3px solid var(--line);background:var(--green);animation:pop .5s}
input{font:inherit;font-weight:600;padding:12px;border-radius:14px;border:3px solid var(--line);background:#fff;color:inherit;width:100%;margin-top:6px}
input:focus{outline:none;box-shadow:4px 4px 0 var(--blue)}
.cert{text-align:center;background:var(--bg);border-style:double;border-width:8px}
.link{background:none;border:0;color:var(--mute);cursor:pointer;text-decoration:underline;font:inherit}
.conf{position:fixed;top:-12px;width:10px;height:14px;border:1px solid var(--line);border-radius:2px;z-index:99;pointer-events:none;animation:fall 2.2s ease-in forwards}
@keyframes fall{to{transform:translate(var(--dx),105vh) rotate(var(--r));opacity:.9}}
@keyframes in{from{opacity:0;transform:translateY(10px)}}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(223,95,77,.25)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{body{background:#fff}.btn,.link,.conf{display:none}}