*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#fbeff4;
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Trebuchet MS","Segoe UI",system-ui,sans-serif;color:#5b4a6b;
  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:#7d6aa8}.l2{color:#ee7fa6;margin-left:.25em}
#scorebox{position:absolute;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}
#score{font-weight:900;color:#5b4a6b;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 #e7d6ea,0 6px 14px rgba(150,110,170,.18);display:flex;align-items:center;justify-content:center;transition:transform .1s}
.ib:active{transform:translateY(2px);box-shadow:0 1px 0 #e7d6ea}
.ib svg{width:24px;height:24px;fill:#8d79b8;stroke:#8d79b8}
#bSound .off{display:none}#bSound.muted .on{display:none}#bSound.muted .off{display:inline}
#lvl{position:fixed;z-index:4;font-weight:800;color:#8d79b8;pointer-events:none;text-align:center;white-space:nowrap}
.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(91,74,107,.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(91,74,107,.35);display:flex;align-items:center;justify-content:center;z-index:20;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.card{position:relative;background:#fffaf6;border-radius:28px;padding:26px 24px 22px;width:min(360px,88vw);max-height:92vh;overflow:auto;text-align:center;box-shadow:0 10px 0 #ecd9e8,0 20px 50px rgba(120,80,140,.3);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:#5b4a6b}
.close{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:12px;background:#f3e8f1;display:flex;align-items:center;justify-content:center}
.close svg{width:20px;height:20px;stroke:#8d79b8}
#mBody{font-size:16px;line-height:1.4;margin-bottom:16px}
.stat{display:flex;justify-content:space-between;background:#f7eef6;border-radius:14px;padding:10px 16px;margin:6px 0;font-weight:800}
.stat b{color:#ee7fa6;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(#f9a3c1,#ee7fa6);box-shadow:0 5px 0 #c9607f;display:flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #c9607f}
.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 svg{width:24px;height:24px;fill:#4f9a72}
.btn small{font-size:12px;font-weight:700;opacity:.9}
#loader{position:fixed;inset:0;background:linear-gradient(#fdf1f5,#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:#efe3f0;overflow:hidden}
.bar i{display:block;height:100%;width:5%;background:linear-gradient(90deg,#f9a3c1,#c9b6f2);border-radius:6px;transition:width .2s}
#hint{position:fixed;z-index:6;background:rgba(91,74,107,.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}
