:root{--ink:#2E2412;--soft:#7A6A4E;--card:#FFFBF2;--ac:#FF8A1F;--ac2:#C85F00;--line:#EADBBE}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#2E6B3A;color:var(--ink);font:700 16px ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none;padding:0}
#ui{position:fixed;inset:0;pointer-events:none}
#ui>*{pointer-events:auto}
#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:28px;background:linear-gradient(#5DBB63,#2E6B3A)}
#loading span{font-size:15px;opacity:.8}
.ball{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFD27A,#FF8A1F 60%,#C85F00);animation:bob .9s infinite alternate}
@keyframes bob{to{transform:translateY(-10px)}}
.menu{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:16px;overflow-y:auto;background:linear-gradient(rgba(20,50,20,.25),rgba(20,50,20,.45)),url(assets/bgmenu.jpg) center/cover fixed,#4FA65A}
.menu h1{margin:8px 0 0;font-size:clamp(38px,10vw,64px);color:#FFE45C;text-shadow:0 4px 0 #C85F00,0 8px 20px rgba(0,0,0,.25);letter-spacing:1px;text-align:center;line-height:1}
.menu .sub{color:#F2FFE8;margin:8px 0 14px;text-align:center}
.stat{display:flex;gap:16px;color:#fff;margin-bottom:12px}
.grid{width:100%;max-width:560px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding-bottom:20px}
.lv{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#FFE9C2);box-shadow:0 4px 0 #B88A3A,0 6px 12px rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--ink)}
.lv small{font-size:11px;color:#E8A400;letter-spacing:1px;line-height:1}
.lv.lock{background:#6F8C67;box-shadow:0 4px 0 #3E5537;color:#ABC3A3}
.lv.cur{background:radial-gradient(circle at 35% 30%,#FFF4B0,#FFB341);box-shadow:0 4px 0 #C85F00,0 0 0 4px rgba(255,255,255,.6);animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.world{grid-column:1/-1;color:#fff;margin:8px 4px 0;font-size:15px;opacity:.9}
.btn{min-height:48px;padding:0 22px;border-radius:18px;background:var(--ac);color:#fff;font-weight:800;box-shadow:0 4px 0 var(--ac2);display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:17px}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ac2)}
.btn.alt{background:var(--card);color:var(--ink);box-shadow:0 4px 0 var(--line)}
.btn.ad{background:#7C5CFF;box-shadow:0 4px 0 #5638d6}
.back{position:absolute;left:10px;top:10px;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.9);box-shadow:0 3px 0 rgba(0,0,0,.2);font-size:24px;font-weight:800;z-index:2}
.ov{position:absolute;inset:0;background:rgba(20,30,10,.5);display:flex;align-items:center;justify-content:center;padding:16px;z-index:5;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.card{background:var(--card);border-radius:26px;padding:22px 20px;max-width:360px;width:100%;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:12px;animation:up .25s}
@keyframes up{from{transform:translateY(20px) scale(.95)}}
.card h3{margin:0;font-size:28px}
.card p{margin:0;color:var(--soft)}
.stars{font-size:42px;letter-spacing:6px;color:#F5B700}
.stars .off{color:#EADBBE}
.goals{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.goals div{display:flex;flex-direction:column;align-items:center;font-size:18px}
.goals i{width:52px;height:52px;background:url(assets/pieces.png) no-repeat;background-size:1900% 100%}

.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.map{width:100%;max-width:520px;padding-bottom:24px}
.area{position:relative;border-radius:26px;margin:14px 0 0;background-size:cover;background-position:center;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.3),inset 0 0 0 3px rgba(255,255,255,.35)}
.area svg{position:absolute;inset:0;width:100%;height:100%}
.area polyline{fill:none;stroke:rgba(255,255,255,.85);stroke-width:7;stroke-dasharray:1 14;stroke-linecap:round;vector-effect:non-scaling-stroke}
.area .world{position:absolute;top:12px;left:12px;z-index:2;background:rgba(0,0,0,.4);padding:5px 14px;border-radius:14px;margin:0;font-size:15px}
.area .lv{position:absolute;width:60px;transform:translate(-50%,-50%);z-index:1}
.area .lv.cur{animation:pulse2 1.2s infinite}
@keyframes pulse2{50%{transform:translate(-50%,-50%) scale(1.1)}}
.next10{margin-top:14px;background:rgba(255,251,242,.95);border-radius:18px;padding:14px;text-align:center;color:var(--soft);box-shadow:0 4px 0 var(--line)}
.stars i{display:inline-block;font-style:normal;animation:starpop .55s both}
.stars i.off{color:#EADBBE}
@keyframes starpop{0%{transform:scale(0) rotate(-45deg);opacity:0}70%{transform:scale(1.35) rotate(8deg);opacity:1}100%{transform:scale(1)}}
.card{background:linear-gradient(#FFFBF2,#FFF0D2);border:3px solid #E8B05A}