.mbsg-root{position:fixed;inset:0;z-index:2147483646;background:#0b1a2b;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;font-family:"Lilita One","Arial Black",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;-webkit-tap-highlight-color:transparent}
.mbsg-root *{box-sizing:border-box}
.mbsg-root button{font-family:inherit;cursor:pointer;border:0;color:#fff}
#mbsg-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.mbsg-root .hidden{display:none!important}

/* ---------- obrazovky ---------- */
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:radial-gradient(ellipse at center,rgba(5,25,50,.35),rgba(3,12,25,.85));z-index:50;overflow:auto}
.panel{width:100%;max-width:420px;background:rgba(10,24,44,.88);border:2px solid rgba(120,180,255,.25);border-radius:22px;padding:22px 20px;box-shadow:0 20px 60px rgba(0,0,0,.5);backdrop-filter:blur(6px);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.logo{text-align:center;font:900 30px/1.1 "Arial Black",system-ui;letter-spacing:1px;margin:2px 0 16px;text-shadow:0 3px 0 #0a3b7a,0 6px 18px rgba(0,0,0,.5)}
.logo b{color:#ffd23a}.logo span{display:block;font-size:40px;margin-bottom:4px}
.tabs{display:flex;gap:6px;margin-bottom:14px;background:rgba(255,255,255,.06);padding:4px;border-radius:12px}
.tabs button{flex:1;padding:10px;border-radius:9px;background:transparent;font-weight:700;font-size:15px;opacity:.7}
.tabs button.on{background:#2f7bff;opacity:1}
#mbsg-form input{width:100%;padding:14px 14px;margin-bottom:10px;border-radius:12px;border:2px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);color:#fff;font-size:16px;outline:none}
#mbsg-form input:focus{border-color:#2f7bff}
.big{display:block;width:100%;padding:15px;border-radius:14px;font:900 18px "Arial Black",system-ui;background:linear-gradient(#ff5a5f,#d6262e);box-shadow:0 5px 0 #8e1218,0 8px 18px rgba(0,0,0,.35);margin:8px 0 12px;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 #8e1218}
.big.blue{background:linear-gradient(#4b93ff,#1f5fd6);box-shadow:0 5px 0 #0f3a8a,0 8px 18px rgba(0,0,0,.35)}
.big:disabled{opacity:.5}
.big.land{background:linear-gradient(#e0a24a,#b8741c);box-shadow:0 5px 0 #7a4a0c,0 8px 18px rgba(0,0,0,.35)}
.sect{margin:14px 0 4px;font:800 13px system-ui;letter-spacing:.5px;opacity:.85;text-align:center}
.msg{min-height:20px;color:#ff8f8f;font-size:14px;text-align:center}
.who{text-align:center;font-size:14px;opacity:.9;margin-bottom:12px}
.modes{margin:6px 0}
.rules{background:rgba(255,255,255,.05);border-radius:12px;padding:10px 12px;margin:6px 0 12px;font-size:13.5px;line-height:1.45}
.rules summary{font-weight:700;cursor:pointer}
.rules ul{padding-left:18px;margin:8px 0 0}
.top{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0}
.top th,.top td{padding:6px 8px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}
.top th{opacity:.6;font-weight:600}
.top tr.b td:first-child{color:#8fc1ff}.top tr.r td:first-child{color:#ff9aa1}
.link{background:none;display:block;margin:8px auto 0;opacity:.6;text-decoration:underline;font-size:14px}
.wait{text-align:center;padding:16px 0;font-size:17px;line-height:1.5}
.wait small{opacity:.7}
.spin{width:54px;height:54px;margin:0 auto 16px;border-radius:50%;border:5px solid rgba(255,255,255,.15);border-top-color:#ffd23a;animation:mbsgspin 1s linear infinite}
@keyframes mbsgspin{to{transform:rotate(360deg)}}

/* ---------- HUD ---------- */
#mbsg-hud{position:absolute;inset:0;pointer-events:none;z-index:20}
#mbsg-hud .top{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 6px);display:flex;justify-content:space-between;align-items:flex-start;padding:0 8px;gap:6px}
#mbsg-hud .side{flex:1;max-width:44%;display:flex;flex-direction:column;gap:4px}
#mbsg-hud .side.enemy{align-items:flex-end;text-align:right}
#mbsg-hud .pl{background:rgba(0,0,0,.28);border-radius:10px;padding:4px 8px;min-width:120px}
#mbsg-hud .pl.me{outline:2px solid rgba(255,255,255,.5)}
#mbsg-hud .pl.dead{opacity:.4;filter:grayscale(1)}
#mbsg-hud .nm{font-size:15px;text-shadow:0 2px 0 #000,0 0 6px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mbsg-hud .ld{font-size:12px}
#mbsg-hud .hp{display:flex;gap:2px;margin-top:3px}
#mbsg-hud .hp i{flex:1;height:9px;border-radius:3px;background:rgba(20,30,50,.75);border:1px solid rgba(0,0,0,.5)}
#mbsg-hud .t0 .hp i.ok{background:linear-gradient(#5fa5ff,#2f6fe0)}
#mbsg-hud .t1 .hp i.ok{background:linear-gradient(#ff6a72,#e02a35)}
#mbsg-hud .t2 .hp i.ok{background:linear-gradient(#5fe39a,#1f9d55)}
#mbsg-hud .t3 .hp i.ok{background:linear-gradient(#ffe26a,#d8a90a)}
#mbsg-hud .pl.t0{border-left:4px solid #2f7bff}#mbsg-hud .pl.t1{border-left:4px solid #ff3b47}#mbsg-hud .pl.t2{border-left:4px solid #2ecc71}#mbsg-hud .pl.t3{border-left:4px solid #f1c40f}
#mbsg-hud .mid{display:flex;gap:6px;pointer-events:auto}
.ico{width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.35);font-size:16px}
#mbsg-status{position:absolute;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 54px);display:flex;gap:8px;font-size:14px;white-space:nowrap}
#mbsg-status span{background:rgba(0,0,0,.4);padding:4px 9px;border-radius:20px;text-shadow:0 1px 0 #000}
#mbsg-status .no{opacity:.75}

.stick{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);width:136px;height:136px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,.18));border:3px solid rgba(255,255,255,.75);pointer-events:auto;touch-action:none;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.stick.left{left:22px}.stick.right{right:22px}
.stick .knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d9dde3);box-shadow:0 4px 10px rgba(0,0,0,.35);transition:transform .08s}
.stick.act .knob{transition:none}
.stick.act{border-color:#ffd23a}
.btns{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 176px);display:flex;flex-direction:column;gap:12px;pointer-events:auto}
.btns.left{left:20px}.btns.right{right:20px;align-items:flex-end}
.btn{width:64px;height:64px;border-radius:50%;background:rgba(10,20,35,.55);border:3px solid rgba(255,255,255,.7)!important;font-size:24px;line-height:1;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.btn small{font-size:9.5px;margin-top:2px;letter-spacing:.5px}
.btn.on{background:#2f7bff}
.btn.press{transform:scale(.92)}
.btn.dim{opacity:.45}
.btn.fire{width:84px;height:84px;font-size:32px;background:radial-gradient(circle at 40% 35%,#ff6f6f,#c9161f);border-color:#fff!important}
.btn.fire.dim{background:rgba(80,20,25,.6)}
.btn.fire.small{width:64px;height:64px;font-size:24px}
.btns.left{bottom:calc(env(safe-area-inset-bottom,0px) + 176px)}
#mbsg-buy{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 190px);display:flex;flex-direction:column;gap:8px;pointer-events:auto;animation:mbsgpop .3s}
#mbsg-buy button{padding:9px 14px;border-radius:14px;font-size:15px;background:linear-gradient(#36c95a,#1e8f3a);box-shadow:0 4px 0 #0f5a22;display:flex;flex-direction:column;align-items:center;min-width:120px}
#mbsg-buy button small{font-size:11px;opacity:.9}
#mbsg-buy #mbsg-rocket{background:linear-gradient(#ff9a3a,#d8641a);box-shadow:0 4px 0 #8a3a0a}
#mbsg-buy button:disabled{opacity:.4}
@keyframes mbsgpop{from{transform:translateX(-50%) scale(.6);opacity:0}}

/* ---------- křížek, puškohled ---------- */
#mbsg-cross{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;z-index:15}
#mbsg-cross i{position:absolute;background:#fff;box-shadow:0 0 3px #000}
#mbsg-cross i:nth-child(1){left:16px;top:0;width:2px;height:10px}
#mbsg-cross i:nth-child(2){left:16px;bottom:0;width:2px;height:10px}
#mbsg-cross i:nth-child(3){top:16px;left:0;height:2px;width:10px}
#mbsg-cross i:nth-child(4){top:16px;right:0;height:2px;width:10px}
#mbsg-cross.blk i{background:#ff4040}
#mbsg-scope{position:absolute;inset:0;pointer-events:none;z-index:14;display:none}
#mbsg-scope.on{display:block}
#mbsg-scope .ring{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0,transparent min(38vw,38vh),rgba(0,0,0,.25) calc(min(38vw,38vh) + 2px),#000 calc(min(38vw,38vh) + 14px))}
#mbsg-scope .h{position:absolute;left:8%;right:8%;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,#000 0,#000 22%,rgba(0,0,0,.8) 22%,rgba(0,0,0,.8) 47%,transparent 47%,transparent 53%,rgba(0,0,0,.8) 53%,rgba(0,0,0,.8) 78%,#000 78%)}
#mbsg-scope .v{position:absolute;top:10%;bottom:10%;left:50%;width:2px;margin-left:-1px;background:linear-gradient(180deg,rgba(0,0,0,.7) 0,rgba(0,0,0,.7) 47%,transparent 47%,transparent 53%,#000 53%)}
#mbsg-scope .dot{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#e01818;box-shadow:0 0 6px #f00}
#mbsg-scope .rng{position:absolute;left:50%;top:calc(50% + min(38vw,38vh) - 40px);transform:translateX(-50%);font:700 14px system-ui;color:#ffe08a;text-shadow:0 1px 2px #000}
#mbsg-hitmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.5);font:900 46px Arial;color:#ff3030;opacity:0;pointer-events:none;z-index:16;text-shadow:0 0 6px #000}
#mbsg-hitmark.on{animation:mbsghit .35s}
@keyframes mbsghit{0%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(.8)}}

/* ---------- efekty obrazovky ---------- */
#mbsg-vignette,#mbsg-flash,#mbsg-near{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:12}
#mbsg-vignette{background:radial-gradient(ellipse at center,transparent 35%,rgba(220,0,0,.75) 100%)}
#mbsg-vignette.on{animation:mbsgfade .7s}
#mbsg-near{box-shadow:inset 0 0 80px 18px rgba(255,220,80,.85)}
#mbsg-near.on{animation:mbsgfade .5s}
@keyframes mbsgfade{0%{opacity:1}100%{opacity:0}}

#mbsg-banner{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;z-index:30;font:900 30px/1.1 "Arial Black",system-ui;text-align:center;white-space:nowrap;text-shadow:0 3px 0 #000,0 0 14px rgba(0,0,0,.6);transition:transform .25s cubic-bezier(.2,1.6,.4,1),opacity .2s}
#mbsg-banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#mbsg-banner small{display:block;font-size:15px;opacity:.95;margin-top:4px}
#mbsg-banner.good{color:#7dff8f}#mbsg-banner.bad{color:#ff7b7b}#mbsg-banner.warn{color:#ffe14a;font-size:24px}
#mbsg-banner .hurt{display:inline-flex;flex-direction:column;align-items:center;background:linear-gradient(#ffa13a,#ee6a12);padding:10px 22px 12px;border-radius:14px;border:4px solid #fff;box-shadow:0 6px 0 #8a3a0a,0 10px 24px rgba(0,0,0,.4);transform:rotate(-4deg)}
#mbsg-banner .hurt span{font-size:42px}
#mbsg-banner .hurt b{font-size:30px;color:#fff}
#mbsg-banner .hurt small{color:#fff3d6}

#mbsg-center{position:absolute;left:0;right:0;top:22%;text-align:center;pointer-events:none;z-index:31;opacity:0;transition:opacity .2s}
#mbsg-center.show{opacity:1}
#mbsg-center.cd{background:linear-gradient(90deg,transparent,rgba(10,40,90,.75),transparent);padding:10px 0 16px}
#mbsg-center b{display:block;font:900 84px/1 "Arial Black",system-ui;color:#ffd23a;text-shadow:0 5px 0 #000,0 0 20px rgba(0,0,0,.5);animation:mbsgpulse .9s infinite}
#mbsg-center b.go{color:#7dff8f}
#mbsg-center span{display:block;font:900 20px "Arial Black",system-ui;text-shadow:0 2px 0 #000;margin-top:6px}
#mbsg-center.end{top:38%}
#mbsg-center b.win,#mbsg-center b.lose{font-size:min(17vw,96px);color:#fff;-webkit-text-stroke:3px #000;text-shadow:0 8px 0 #000;animation:mbsgpop2 .5s cubic-bezier(.2,1.6,.4,1)}
#mbsg-center b.win{color:#ffe14a}
@keyframes mbsgpulse{0%{transform:scale(1.25)}30%{transform:scale(1)}}
@keyframes mbsgpop2{from{transform:scale(2.5);opacity:0}}

#mbsg-toasts{position:absolute;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 150px);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:32}
.toast{background:rgba(0,0,0,.65);padding:7px 14px;border-radius:20px;font:600 14px system-ui;transition:opacity .5s,transform .5s;white-space:nowrap}
.toast.good{background:rgba(20,120,50,.8)}.toast.bad{background:rgba(170,20,30,.85)}
.toast.out{opacity:0;transform:translateY(-10px)}

@media (orientation:landscape) and (max-height:500px){
	.stick{width:120px;height:120px;bottom:16px}
	.btns{bottom:18px}
	.btns.left{left:154px;bottom:18px}
	.btns.right{right:154px;bottom:18px}
	.btn.fire{width:74px;height:74px}
	#mbsg-buy{bottom:20px;flex-direction:row}
	#mbsg-center b{font-size:60px}
}

.maps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 6px}
.mapc{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12)!important;border-radius:14px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;font:700 13px system-ui;line-height:1.15}
.mapc b{font-size:22px}.mapc small{font-weight:500;font-size:10.5px;opacity:.7}
.mapc.on{border-color:#ffd23a!important;background:rgba(255,210,58,.12)}
.big.city{background:linear-gradient(#7a8a9e,#4f5f74);box-shadow:0 5px 0 #2b3646,0 8px 18px rgba(0,0,0,.35)}
#mbsg-hud .side.many .pl{padding:2px 7px;min-width:100px}
#mbsg-hud .side.many .nm{font-size:12.5px}
#mbsg-hud .side.many .hp i{height:6px}

#mbsg-statpanel{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 56px);transform:translateX(-50%);width:min(92vw,380px);max-height:60vh;overflow:auto;background:rgba(8,18,32,.92);border:2px solid rgba(120,180,255,.3);border-radius:16px;z-index:40;font:600 14px system-ui;pointer-events:auto}
#mbsg-statpanel .sp-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.1);font-weight:800}
#mbsg-statpanel .sp-head button{background:none;font-size:18px}
#mbsg-statpanel .sp-row{display:grid;grid-template-columns:28px 1fr auto 70px;gap:6px;padding:7px 12px;border-bottom:1px solid rgba(255,255,255,.05);align-items:center}
#mbsg-statpanel .sp-row.me{background:rgba(47,123,255,.25)}
#mbsg-statpanel .sp-row.dead{opacity:.45}
#mbsg-statpanel .sp-row em{font-style:normal;color:#ffd23a}
#mbsg-statpanel .sp-row i{font-style:normal;color:#ff6a72;font-size:11px;text-align:right}