*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#07101b;color:#f8fbff;user-select:none}
#game{width:min(100vw,520px);height:100dvh;margin:0 auto;position:relative;overflow:hidden;background:#07101b}
.mg-bg{position:absolute;inset:0;background:linear-gradient(180deg,#0d1830,#07101b)}
.mg-bg::before,.mg-bg::after{content:"";position:absolute;inset:-20%;pointer-events:none}
.city .mg-bg{background:linear-gradient(#0a1630 0%,#163d70 58%,#060a12 100%)}
.city .mg-bg::before{background:repeating-linear-gradient(90deg,transparent 0 34px,rgba(255,216,75,.2) 35px 39px,transparent 40px 70px),linear-gradient(0deg,#050912 0 26%,transparent 27%);animation:mgpan 12s linear infinite}
.neon .mg-bg{background:radial-gradient(circle at 30% 20%,rgba(255,65,175,.35),transparent 25%),linear-gradient(150deg,#11153d,#061322 70%)}
.tower .mg-bg{background:linear-gradient(#13243d,#07101b)}
.lantern .mg-bg{background:radial-gradient(circle at 22% 26%,rgba(255,210,77,.35),transparent 16%),linear-gradient(#160c2a,#09111e)}
.metro .mg-bg{background:linear-gradient(#092d42,#07101b)}
.mg-bg::after{background:radial-gradient(circle,#fff 0 1px,transparent 2px);background-size:42px 50px;animation:mgspark 2.5s ease-in-out infinite alternate;opacity:.45}
@keyframes mgpan{to{transform:translateX(-70px)}}@keyframes mgspark{to{opacity:.15;transform:translateY(10px)}}
.mg-wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));gap:10px}
.mg-top{display:grid;grid-template-columns:1fr auto;gap:10px}
.mg-panel{border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(2,8,18,.72);backdrop-filter:blur(12px);padding:10px 12px;box-shadow:0 14px 36px rgba(0,0,0,.25)}
.mg-label{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:rgba(248,251,255,.66)}
.mg-score{font-size:38px;font-weight:1000;line-height:1;color:#ffd84b;text-shadow:0 0 20px rgba(255,216,75,.65)}
.mg-meta{font-size:15px;font-weight:900}
.mg-clear-progress{color:#ffd84b;text-shadow:0 0 14px rgba(255,216,75,.55)}
.mg-clear-progress.done{color:#39ff91;text-shadow:0 0 16px rgba(57,255,145,.7)}
.mg-timer{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.14)}
.mg-time{font-size:30px;font-weight:1000;line-height:1;color:#28c8ff;text-shadow:0 0 18px rgba(40,200,255,.7)}
.mg-time.danger{color:#ff4f6d;text-shadow:0 0 20px rgba(255,79,109,.85);animation:mgbreathe .55s ease-in-out infinite alternate}
@keyframes mgbreathe{to{transform:scale(1.08);filter:brightness(1.35)}}
.mg-board{position:relative;flex:1;min-height:0;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(2,8,18,.62);backdrop-filter:blur(12px);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(40,200,255,.12),0 18px 44px rgba(0,0,0,.26)}
.mg-board::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-120%);animation:mgshine 4.8s ease-in-out infinite;pointer-events:none;z-index:1}
.advanced .mg-board{border-color:rgba(255,216,75,.5);box-shadow:inset 0 0 0 1px rgba(255,216,75,.2),0 0 34px rgba(255,79,163,.22),0 18px 44px rgba(0,0,0,.28)}
@keyframes mgshine{45%,100%{transform:translateX(120%)}}
.mg-canvas{width:100%;height:100%;display:block;touch-action:none}
.mg-grid{position:relative;z-index:2;height:100%;display:grid;gap:6px;padding:10px;touch-action:none}
.tile{border:1px solid rgba(255,255,255,.2);border-radius:8px;display:grid;place-items:center;font-weight:1000;font-size:clamp(18px,7vw,34px);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 8px 18px rgba(0,0,0,.22),0 0 18px rgba(40,200,255,.12);transition:transform .12s ease,opacity .2s ease,filter .2s ease}
.tile:hover{filter:brightness(1.12)}
.tile:active,.tile.selected{transform:scale(.92);box-shadow:0 0 0 3px rgba(255,216,75,.32),0 0 20px rgba(255,216,75,.52)}
.tile.empty{opacity:.18}
.tile.path{background:#ffd84b!important;color:#181006}
.tile.block{background:#202b3c!important;color:#718096}
.neon .mg-grid{gap:10px;padding:18px;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.08),transparent 58%)}
.neon .mg-grid.shifting{animation:mgshift .28s ease both}
@keyframes mgshift{40%{filter:saturate(1.55) brightness(1.22);transform:scale(.992)}}
.neon .tile{border:0;border-radius:999px;color:transparent;box-shadow:inset 0 7px 10px rgba(255,255,255,.42),inset 0 -10px 18px rgba(0,0,0,.24),0 0 18px currentColor,0 9px 22px rgba(0,0,0,.28);position:relative;overflow:visible}
.neon .tile::before{content:"";position:absolute;inset:18% 22% auto auto;width:24%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.72);filter:blur(.2px)}
.neon .tile::after{content:"";position:absolute;inset:-8px;border-radius:inherit;background:inherit;filter:blur(10px);opacity:.48;z-index:-1}
.neon .tile:active,.neon .tile.selected{transform:scale(.88);box-shadow:0 0 0 4px rgba(255,216,75,.24),0 0 28px rgba(255,216,75,.7)}
.neon .tile.tutorial{transform:scale(1.05);outline:3px solid rgba(255,216,75,.95);box-shadow:inset 0 7px 10px rgba(255,255,255,.5),inset 0 -10px 18px rgba(0,0,0,.2),0 0 0 7px rgba(255,216,75,.2),0 0 34px rgba(255,216,75,.95),0 0 58px rgba(255,79,163,.58);animation:mgtutorial .72s ease-in-out infinite alternate;z-index:3}
@keyframes mgtutorial{to{transform:scale(.95);filter:brightness(1.36)}}
.mg-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mg-btn{min-height:48px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(2,8,18,.76);color:#f8fbff;font-weight:1000;font-size:14px}
.mg-btn.primary{background:linear-gradient(135deg,#ffd84b,#ff992f);border-color:rgba(255,216,75,.75);color:#170f06}
.mg-modal{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.58)}
.mg-card{width:min(100%,360px);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:24px;text-align:center;background:rgba(7,16,27,.96);box-shadow:0 24px 80px rgba(0,0,0,.45)}
.mg-card h1{margin:0 0 10px;font-size:32px;line-height:1.05}.mg-card p{margin:0 0 18px;color:rgba(248,251,255,.7)}
.mg-big{width:100%;min-height:54px;border:0;border-radius:8px;background:linear-gradient(135deg,#ffd84b,#ff992f);color:#170f06;font-size:18px;font-weight:1000}
.mg-mode-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
.mg-mode{border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.06);color:#f8fbff;padding:10px 8px;text-align:left}
.mg-mode strong{display:block;font-size:13px}.mg-mode span{display:block;margin-top:4px;color:rgba(248,251,255,.66);font-size:11px;line-height:1.25}
.mg-mode.active{border-color:#ffd84b;background:linear-gradient(135deg,rgba(255,216,75,.24),rgba(255,79,163,.12));box-shadow:0 0 18px rgba(255,216,75,.24)}
.mg-tutorial{position:absolute;left:18px;right:18px;bottom:78px;z-index:7;border:1px solid rgba(255,216,75,.72);border-radius:8px;padding:11px 14px;background:linear-gradient(135deg,rgba(2,8,18,.92),rgba(28,12,46,.88));color:#fff9d5;font-size:14px;font-weight:1000;line-height:1.35;text-align:center;box-shadow:0 0 24px rgba(255,216,75,.32),0 18px 40px rgba(0,0,0,.32);animation:mgtip .28s ease both;pointer-events:none}
@keyframes mgtip{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.mg-toast{position:absolute;left:50%;bottom:86px;z-index:6;transform:translateX(-50%);border-radius:999px;padding:9px 14px;background:rgba(2,8,18,.86);color:#ffd84b;font-weight:1000;animation:mgtoast 1.2s ease both;white-space:nowrap}
@keyframes mgtoast{20%,80%{opacity:1;transform:translateX(-50%) translateY(-8px)}0%,100%{opacity:0}}
@media(max-height:720px){.mg-score{font-size:30px}.mg-panel{padding:8px 10px}.mg-actions{gap:6px}.mg-btn{min-height:42px}.mg-wrap{gap:8px}.mg-tutorial{bottom:68px;font-size:13px;padding:9px 12px}}