*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#0b1220;
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Trebuchet MS","Segoe UI",system-ui,sans-serif;color:#e8fff4;
  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:#5dffb0}.l2{color:#7ec8ff;margin-left:.25em}
#scorebox{position:absolute;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}
#score{font-weight:900;color:#fff;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.25),0 0 18px rgba(93,255,176,.35)}
#bestRow{font-weight:800;color:#7ec8ff;margin-top:2px;font-size:12px}
#btns{display:flex;gap:8px}
.ib{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.92);box-shadow:0 3px 0 rgba(0,0,0,.18),0 6px 14px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;transition:transform .1s}
.ib:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.ib svg{width:22px;height:22px;fill:#0b1220;stroke:#0b1220}
#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}
#meter{font-weight:800;color:#8bb8a8;text-align:center;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.35)}
#actions{position:fixed;z-index:6;display:flex;gap:8px;pointer-events:none}
#actions>*{pointer-events:auto}
.chip{height:36px;padding:0 14px;border-radius:18px;background:rgba(255,255,255,.14);color:#fff;font-weight:800;font-size:13px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.22)}
.chip:active{transform:translateY(1px)}
.chip.on{background:rgba(93,255,176,.92);color:#0b1220;border-color:transparent}
.adbtn{position:fixed;z-index:6;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;height:42px;border-radius:22px;
  background:linear-gradient(#5dffb0,#2db87a);color:#0b1220;font-weight:800;font-size:14px;box-shadow:0 4px 0 #1a7a52,0 8px 16px rgba(40,160,100,.25);white-space:nowrap;max-width:92vw}
.adbtn svg{width:22px;height:22px;fill:#1a7a52;flex:none}
.adbtn:active{transform:translateY(2px);box-shadow:0 2px 0 #1a7a52}
.adbtn.busy{opacity:.6;pointer-events:none}
.hidden{display:none!important}
#pad{position:fixed;z-index:6;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;opacity:.92}
#pad>*{pointer-events:auto}
.padmid{display:flex;gap:48px}
.padb{width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.16);color:#fff;font-size:20px;font-weight:900;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 3px 0 rgba(0,0,0,.2)}
.padb:active{transform:translateY(2px);background:rgba(93,255,176,.35)}
#toast{position:fixed;left:50%;bottom:12%;transform:translateX(-50%) translateY(20px);background:rgba(8,20,28,.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(4,12,20,.55);display:flex;align-items:center;justify-content:center;z-index:20;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.card{position:relative;background:#e8fff4;border-radius:28px;padding:26px 24px 22px;width:min(360px,88vw);max-height:92vh;overflow:auto;text-align:center;box-shadow:0 10px 0 #6bb896,0 20px 50px rgba(0,40,30,.35);animation:pop .35s cubic-bezier(.2,1.6,.4,1);color:#0b1220}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.card .mlogo{font-size:20px;margin-bottom:6px}
.card .l1{color:#1a9a62}.card .l2{color:#2e6fa0}
.card h2{margin:4px 0 12px;font-size:24px;color:#0b1220}
.close{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:12px;background:#c8ebe0;display:flex;align-items:center;justify-content:center}
.close svg{width:20px;height:20px;stroke:#0b1220}
#mBody{font-size:16px;line-height:1.4;margin-bottom:16px}
.stat{display:flex;justify-content:space-between;background:#d4f5e8;border-radius:14px;padding:10px 16px;margin:6px 0;font-weight:800}
.stat b{color:#1a9a62;font-size:20px}
.newbest{color:#c9a227;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(#5dffb0,#2db87a);box-shadow:0 5px 0 #1a7a52;display:flex;align-items:center;justify-content:center;gap:8px;color:#0b1220}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #1a7a52}
.btn.alt{background:linear-gradient(#a8d4f0,#5a9bc7);box-shadow:0 5px 0 #3a6fa0;color:#fff}
.btn.green{background:linear-gradient(#9fd9b6,#78c79b);box-shadow:0 5px 0 #5aa77e;color:#0b1220}
.btn svg{width:24px;height:24px;fill:#1a7a52}
#loader{position:fixed;inset:0;background:linear-gradient(#0b1220,#061018);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;transition:opacity .4s}
#loader .big{font-size:40px;margin-bottom:24px}
.bar{width:200px;height:12px;border-radius:6px;background:rgba(255,255,255,.2);overflow:hidden}
.bar i{display:block;height:100%;width:5%;background:linear-gradient(90deg,#5dffb0,#7ec8ff);border-radius:6px;transition:width .2s}
#hint{position:fixed;z-index:6;background:rgba(8,20,28,.9);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}
