*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#e8f4ef;
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Trebuchet MS","Segoe UI",system-ui,sans-serif;color:#2d4a5e;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;overscroll-behavior:none}
canvas{position:fixed;left:0;top:0;width:100%;height:100%;display:block;touch-action:none}
button{font-family:inherit;cursor:pointer;border:0;outline:0}
#hud{position:fixed;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:0 14px;pointer-events:none;z-index:5}
#hud>*{pointer-events:auto}
#logo,.mlogo{font-weight:900;letter-spacing:.5px;white-space:nowrap;line-height:1}
.l1{color:#3a8f7a}.l2{color:#7b6cc7;margin-left:.25em}
#scorebox{position:absolute;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}
#score{font-weight:900;color:#2d4a5e;line-height:1;text-shadow:0 2px 0 #fff}
#best{display:flex;align-items:center;justify-content:center;gap:4px;font-weight:800;color:#b48a2c;margin-top:2px}
#best svg{fill:#f2c14e;width:1.1em;height:1.1em}
#btns{display:flex;gap:8px}
.ib{width:42px;height:42px;border-radius:14px;background:#fff;box-shadow:0 3px 0 #d4e8df,0 6px 14px rgba(60,120,110,.18);display:flex;align-items:center;justify-content:center;transition:transform .1s}
.ib:active{transform:translateY(2px);box-shadow:0 1px 0 #d4e8df}
.ib svg{width:24px;height:24px;fill:#3a8f7a;stroke:#3a8f7a}
#bSound .off{display:none}#bSound.muted .on{display:none}#bSound.muted .off{display:inline}
#info{position:fixed;z-index:4;left:0;right:0;display:flex;flex-direction:column;align-items:center;pointer-events:none;gap:2px}
#lvl,#meter{font-weight:800;color:#3a8f7a;text-align:center;white-space:nowrap}
#meter{color:#7b6cc7;font-size:0.92em}
.adbtn{position:fixed;z-index:6;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;height:44px;border-radius:22px;
  background:linear-gradient(#9fd9b6,#78c79b);color:#fff;font-weight:800;font-size:15px;box-shadow:0 4px 0 #5aa77e,0 8px 16px rgba(80,150,110,.25);white-space:nowrap}
.adbtn svg{width:24px;height:24px;fill:#4f9a72;flex:none}
.adbtn em{font-style:normal;background:rgba(255,255,255,.3);border-radius:10px;padding:1px 7px;font-size:13px}
.adbtn:active{transform:translateY(2px);box-shadow:0 2px 0 #5aa77e}
.adbtn.busy{opacity:.6;pointer-events:none}
.hidden{display:none!important}
#toast{position:fixed;left:50%;bottom:14%;transform:translateX(-50%) translateY(20px);background:rgba(45,74,94,.92);color:#fff;padding:10px 18px;border-radius:16px;font-weight:700;font-size:15px;opacity:0;transition:all .25s;pointer-events:none;z-index:30;text-align:center;max-width:86vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#modal{position:fixed;inset:0;background:rgba(45,74,94,.38);display:flex;align-items:center;justify-content:center;z-index:20;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.card{position:relative;background:#f7fffb;border-radius:28px;padding:26px 24px 22px;width:min(360px,88vw);max-height:92vh;overflow:auto;text-align:center;box-shadow:0 10px 0 #cfe8dc,0 20px 50px rgba(60,100,90,.28);animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.card .mlogo{font-size:20px;margin-bottom:6px}
.card h2{margin:4px 0 12px;font-size:24px;color:#2d4a5e}
.close{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:12px;background:#e4f3ec;display:flex;align-items:center;justify-content:center}
.close svg{width:20px;height:20px;stroke:#3a8f7a}
#mBody{font-size:16px;line-height:1.4;margin-bottom:16px}
.stat{display:flex;justify-content:space-between;background:#eaf6f0;border-radius:14px;padding:10px 16px;margin:6px 0;font-weight:800}
.stat b{color:#7b6cc7;font-size:20px}
.newbest{color:#d89a1c;font-weight:900;font-size:18px;margin:8px 0}
#mBtns{display:flex;flex-direction:column;gap:10px}
.btn{height:52px;border-radius:26px;font-size:18px;font-weight:900;color:#fff;background:linear-gradient(#7ecfb8,#3a8f7a);box-shadow:0 5px 0 #2d6e5c;display:flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #2d6e5c}
.btn.alt{background:linear-gradient(#cbbdf0,#a693db);box-shadow:0 5px 0 #7f6bb8}
.btn.green{background:linear-gradient(#9fd9b6,#78c79b);box-shadow:0 5px 0 #5aa77e}
.btn.purple{background:linear-gradient(#b5a8e8,#7b6cc7);box-shadow:0 5px 0 #5a4ea0}
.btn svg{width:24px;height:24px;fill:#4f9a72}
.btn.purple svg{fill:#5a4ea0}
.btn small{font-size:12px;font-weight:700;opacity:.9}
#loader{position:fixed;inset:0;background:linear-gradient(#e8f4ef,#eef0ff);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;transition:opacity .4s}
#loader .big{font-size:44px;margin-bottom:24px}
.bar{width:200px;height:12px;border-radius:6px;background:#d4e8df;overflow:hidden}
.bar i{display:block;height:100%;width:5%;background:linear-gradient(90deg,#7ecfb8,#7b6cc7);border-radius:6px;transition:width .2s}
#hint{position:fixed;z-index:6;background:rgba(45,74,94,.88);color:#fff;font-weight:800;padding:9px 16px;border-radius:18px;text-align:center;line-height:1.25;pointer-events:none;width:max-content;animation:pop .3s;max-width:86vw}