*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#1a2744;
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Trebuchet MS","Segoe UI",system-ui,sans-serif;color:#eef3ff;
  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:#7ec8ff}.l2{color:#f4d35e;margin-left:.25em}
#scorebox{position:absolute;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}
#minesLeft{font-weight:900;color:#fff;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.25)}
#timerRow{display:flex;align-items:center;justify-content:center;gap:4px;font-weight:800;color:#f4d35e;margin-top:2px}
#timerRow svg{stroke:#f4d35e;width:1.1em;height:1.1em}
#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:#1a2744;stroke:#1a2744}
#bSound .off{display:none}#bSound.muted .on{display:none}#bSound.muted .off{display:inline}
#bFlag.on{background:linear-gradient(#ff8a80,#e53935);box-shadow:0 3px 0 #b71c1c}
#bFlag.on svg{fill:#fff;stroke:#fff}
#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:#a8c4e8;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,.18);color:#fff;font-weight:800;font-size:13px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.25)}
.chip:active{transform:translateY(1px)}
.chip.on{background:rgba(126,200,255,.92);color:#1a2744;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(#7ec8ff,#4a9fd8);color:#fff;font-weight:800;font-size:14px;box-shadow:0 4px 0 #2e6fa0,0 8px 16px rgba(40,100,160,.25);white-space:nowrap;max-width:92vw}
.adbtn svg{width:22px;height:22px;fill:#2e6fa0;flex:none}
.adbtn:active{transform:translateY(2px);box-shadow:0 2px 0 #2e6fa0}
.adbtn.busy{opacity:.6;pointer-events:none}
.hidden{display:none!important}
#toast{position:fixed;left:50%;bottom:12%;transform:translateX(-50%) translateY(20px);background:rgba(15,30,55,.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(8,16,36,.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:#f0f6ff;border-radius:28px;padding:26px 24px 22px;width:min(360px,88vw);max-height:92vh;overflow:auto;text-align:center;box-shadow:0 10px 0 #9bb8d8,0 20px 50px rgba(0,20,40,.35);animation:pop .35s cubic-bezier(.2,1.6,.4,1);color:#1a2744}
@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:#3a7ebd}.card .l2{color:#c9a227}
.card h2{margin:4px 0 12px;font-size:24px;color:#1a2744}
.close{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:12px;background:#d6e4f5;display:flex;align-items:center;justify-content:center}
.close svg{width:20px;height:20px;stroke:#1a2744}
#mBody{font-size:16px;line-height:1.4;margin-bottom:16px}
.stat{display:flex;justify-content:space-between;background:#e4eef8;border-radius:14px;padding:10px 16px;margin:6px 0;font-weight:800}
.stat b{color:#2e6fa0;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(#7ec8ff,#3a7ebd);box-shadow:0 5px 0 #1e4e7a;display:flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #1e4e7a}
.btn.alt{background:linear-gradient(#cbbdf0,#8a7bc7);box-shadow:0 5px 0 #5a4ea0}
.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:#2e6fa0}
#loader{position:fixed;inset:0;background:linear-gradient(#1a2744,#0d1528);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,#7ec8ff,#f4d35e);border-radius:6px;transition:width .2s}
#hint{position:fixed;z-index:6;background:rgba(15,30,55,.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}