*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#0b0f24;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#fff;touch-action:none;overscroll-behavior:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.screen{position:fixed;inset:0}
button{font-family:inherit;color:#fff;border:0;cursor:pointer;touch-action:none}
.gold-title{font-weight:900;letter-spacing:2px;line-height:.95;text-transform:uppercase;
 background:linear-gradient(180deg,#fff6c9 0%,#ffd451 35%,#e59a10 60%,#ffe08a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 3px 0 #5a2a00) drop-shadow(0 0 8px rgba(255,170,0,.5));text-align:center}
.gold-title span{display:block;font-size:.55em;letter-spacing:.5em;margin-top:2px}
.btn{background:linear-gradient(180deg,#3a4370,#232a4d);border:2px solid #5b6aa8;border-radius:10px;padding:8px 14px;font-weight:800;letter-spacing:1px;box-shadow:0 3px 0 #11152b}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #11152b}
.btn.gold{background:linear-gradient(180deg,#ffd451,#e08a00);border-color:#fff0a8;color:#3a1c00}
.btn.blue{background:linear-gradient(180deg,#2fb6ff,#1460d8);border-color:#a9e2ff}
.btn.big{font-size:20px;padding:14px 26px;border-radius:14px;min-width:220px}
.small{font-size:12px;opacity:.8}
/* landing */
#landing{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(10,14,40,.35),rgba(5,7,20,.9));z-index:30;overflow:auto}
.land-in{text-align:center;padding:16px;max-width:640px}
.land-logo{width:min(30vh,170px);filter:drop-shadow(0 0 18px rgba(255,180,40,.6));animation:pulse 2.4s ease-in-out infinite}
#landing h1{font-size:min(9vh,44px);margin:6px 0}
.tag{opacity:.9;margin-bottom:12px;font-size:14px}
.land-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.help{background:rgba(0,0,0,.6);border:1px solid #5b6aa8;border-radius:12px;padding:10px;font-size:13px;line-height:1.5;text-align:left;margin:8px auto;max-width:520px}
@keyframes pulse{50%{transform:scale(1.05)}}
#rotate{position:fixed;inset:0;z-index:99;background:#0b0f24;display:flex;align-items:center;justify-content:center;text-align:center;font-size:24px;font-weight:800}
#loading{position:fixed;inset:0;z-index:100;background:#0b0f24;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-weight:800;letter-spacing:3px}
#loading img{width:120px}
/* lobby */
#lobby{pointer-events:none}
#lobby>*{pointer-events:auto}
.topbar{position:absolute;left:0;right:0;top:0;height:16vh;min-height:52px;display:flex;align-items:flex-start;justify-content:space-between;padding:6px 10px;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);pointer-events:none}
.topbar>*{pointer-events:auto}
.brand{position:absolute;left:50%;transform:translateX(-50%);top:4px;display:flex;align-items:center;gap:6px}
.brand img{height:min(13vh,64px)}
.gold-title.sm{font-size:min(5.2vh,26px)}
.player-chip{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.45);border:1px solid #ffffff33;border-radius:24px;padding:3px 10px 3px 3px}
.player-chip img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #ffd451}
.player-chip b{display:block;font-size:13px}.player-chip small{font-size:10px;opacity:.8}
.wallet{display:flex;gap:6px;align-items:center}
.cur{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.55);border:1px solid #ffffff33;border-radius:20px;padding:4px 10px 4px 5px;font-size:14px;min-width:70px}
.coin,.dia{display:inline-block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7b0,#ffc107 45%,#b47800);box-shadow:0 0 6px #ffcc33}
.dia{border-radius:3px;transform:rotate(45deg) scale(.8);background:linear-gradient(135deg,#bff5ff,#22c5ff 50%,#0a6bd6);box-shadow:0 0 6px #33ddff}
.gift{background:linear-gradient(180deg,#ff5fa2,#c2185b);border-radius:50%;width:34px;height:34px;font-size:18px;position:relative}
.gift.ready::after{content:'';position:absolute;top:0;right:0;width:9px;height:9px;border-radius:50%;background:#ff0;box-shadow:0 0 6px #ff0}
.charlist{position:absolute;left:6px;top:17vh;bottom:19vh;width:min(19vw,128px);overflow-y:auto;display:flex;flex-direction:column;gap:5px;padding:4px;scrollbar-width:none;touch-action:pan-y}
.charlist::-webkit-scrollbar{display:none}
.cbtn{display:flex;align-items:center;gap:6px;background:rgba(10,14,40,.7);border:2px solid #ffffff22;border-radius:10px;padding:3px;font-size:11px;font-weight:800;text-align:left;touch-action:pan-y}
.cbtn.sel{border-color:#ffd451;background:rgba(80,60,0,.7);box-shadow:0 0 8px #ffb300}
.port{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;overflow:hidden;border:1px solid #fff5}
.port img{width:100%;height:100%;object-fit:cover}
.heroinfo{position:absolute;right:10px;top:calc(22vh + 18px);width:min(26vw,190px);text-align:right;pointer-events:none}
.hname{font-size:min(6vh,28px);font-weight:900;letter-spacing:2px;text-shadow:0 2px 0 #000,0 0 10px #2f8cff}
.hskill{font-size:12px;background:rgba(0,0,0,.5);border-right:3px solid #2fd0ff;padding:5px 8px;margin-top:4px;border-radius:6px 0 0 6px}
.hskill b{color:#6fe3ff}
.hint{font-size:11px;opacity:.7;margin-top:6px}
.bottombar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:5px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(0,0,0,.6),transparent)}
.btn.nav{display:flex;flex-direction:column;align-items:center;font-size:17px;padding:5px 6px;min-width:min(12vw,84px)}
.btn.nav span{font-size:10px;margin-top:1px}
.startwrap{margin-left:auto;display:flex;flex-direction:column;align-items:stretch;gap:4px}
.modechip{background:rgba(0,0,0,.6);border:1px solid #ffd45188;border-radius:8px;padding:4px 8px;font-size:11px;font-weight:700}
.btn.start{font-size:min(6.5vh,30px);font-weight:900;letter-spacing:4px;padding:8px 30px;background:linear-gradient(180deg,#ffe066,#ff9800 55%,#e65100);border:2px solid #fff3b0;color:#3a1600;border-radius:12px;box-shadow:0 4px 0 #7a2e00,0 0 18px rgba(255,160,0,.6);animation:glow 1.6s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 4px 0 #7a2e00,0 0 30px rgba(255,200,0,.95)}}
/* panel */
.panel{position:fixed;inset:0;z-index:20;background:rgba(3,5,15,.6);display:flex;align-items:center;justify-content:center}
.panel-box{width:min(94vw,860px);height:min(90vh,520px);background:linear-gradient(180deg,#1b2147,#0f1330);border:2px solid #ffd45188;border-radius:14px;display:flex;flex-direction:column;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:rgba(255,212,81,.12);border-bottom:1px solid #ffd45155}
.panel-head h2{font-size:18px;letter-spacing:2px;color:#ffd451}
.xbtn{background:#c62828;border-radius:8px;width:32px;height:32px;font-size:16px}
.panel-body{flex:1;overflow-y:auto;padding:10px;touch-action:pan-y}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.card{background:rgba(255,255,255,.06);border:2px solid #ffffff22;border-radius:10px;padding:8px;text-align:left;font-size:12px;touch-action:pan-y}
.card.sel{border-color:#ffd451;box-shadow:0 0 10px #ffb30088;background:rgba(255,212,81,.1)}
.card h3{font-size:14px;margin:4px 0;letter-spacing:1px}
.card .sk{color:#6fe3ff;font-weight:800;font-size:11px}
.card .ds{opacity:.8;font-size:11px;margin-top:3px;line-height:1.3}
.card .thumb{height:64px;border-radius:8px;display:flex;align-items:flex-end;padding:4px;font-weight:900;font-size:11px;text-shadow:0 1px 2px #000}
.card .port{width:44px;height:44px;font-size:20px}
.stat{display:flex;align-items:center;gap:4px;font-size:10px;margin-top:2px}.stat i{flex:1;height:5px;background:#ffffff22;border-radius:3px;overflow:hidden}.stat i b{display:block;height:100%;background:linear-gradient(90deg,#ffd451,#ff7a00)}
.row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{background:#2a3266;border:1px solid #5b6aa8;border-radius:8px;padding:5px 9px;font-size:11px;font-weight:800}
.chip.on{background:#ffd451;color:#3a1c00;border-color:#fff}
.chip:disabled{opacity:.4}
.sect{font-weight:900;color:#ffd451;letter-spacing:2px;margin:10px 0 6px;font-size:13px}
.setrow{display:flex;align-items:center;justify-content:space-between;padding:8px 4px;border-bottom:1px solid #ffffff15;font-size:13px;font-weight:700;gap:8px}
input[type=range]{width:160px;touch-action:none}
/* HUD */
#hud{position:fixed;inset:0;z-index:10}
#touch{position:absolute;inset:0}
#minimap{position:absolute;left:8px;top:8px;width:min(24vh,120px);height:min(24vh,120px);border-radius:10px;border:2px solid #ffffff55;background:#000a}
#topinfo{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;gap:8px;font-size:13px;pointer-events:none}
#topinfo span{background:rgba(0,0,0,.55);border-radius:6px;padding:3px 8px}
#killfeed{position:absolute;right:52px;top:8px;width:220px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;pointer-events:none}
#killfeed div{background:rgba(0,0,0,.55);font-size:11px;padding:2px 7px;border-radius:5px;font-weight:700}
#killfeed div b{color:#ffd451}
.hbtn{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(20,25,50,.45);border:2px solid rgba(255,255,255,.55);font-size:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.hbtn small{font-size:7px;font-weight:800;margin-top:2px;opacity:.9}
.hbtn.on{background:rgba(255,200,40,.55);border-color:#ffd451}
.hbtn:active,.hbtn.press{transform:scale(.92);background:rgba(255,255,255,.3)}
.hbtn.small{width:36px;height:36px;font-size:15px;top:8px;right:8px}
#btns .fire{right:calc(8vw + 10px);bottom:15vh;width:84px;height:84px;font-size:30px;background:rgba(200,40,30,.45);border-color:#ffb0a0}
#btns .fire2{left:max(2.5vw,14px);bottom:47vh;width:50px;height:50px;font-size:18px;background:rgba(200,40,30,.35);border-color:#ffb0a0}
#btns .aim{right:calc(8vw + 108px);bottom:calc(15vh + 50px)}
#btns .jump{right:calc(8vw - 4px);bottom:calc(15vh + 96px)}
#btns .crouch{right:calc(8vw + 106px);bottom:calc(15vh - 14px)}
#btns .reload{right:calc(8vw + 58px);bottom:calc(15vh + 104px)}
#btns .skill{right:calc(8vw + 170px);bottom:calc(15vh + 10px);width:58px;height:58px;background:rgba(20,100,220,.5);border-color:#7fdcff;overflow:hidden}
#btns .swap{right:8px;bottom:calc(15vh + 160px);width:46px;height:46px}
#btns .mapb{left:calc(min(24vh,120px) + 16px);top:8px;width:40px;height:40px;font-size:15px}
#skillCd{position:absolute;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;border-radius:50%;pointer-events:none}
#bars{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:min(34vw,240px);display:flex;flex-direction:column;gap:3px;pointer-events:none}
.bar{position:relative;height:10px;background:rgba(0,0,0,.6);border-radius:5px;overflow:hidden;border:1px solid #ffffff44}
.bar span{position:absolute;inset:0;font-size:8px;font-weight:900;text-align:center;line-height:9px}
.fill{height:100%;transition:width .15s}.fill.hp{background:linear-gradient(90deg,#e53935,#ff8a65)}.fill.armor{background:linear-gradient(90deg,#1e88e5,#80d8ff)}
#weaponBox{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);text-align:center;pointer-events:none;text-shadow:0 1px 2px #000}
#wName{font-size:11px;font-weight:900;letter-spacing:1px;color:#ffd451}
#ammo{font-size:18px;font-weight:900}#ammo span{font-size:12px;opacity:.8}
#reloadBar{width:80px;height:4px;background:#0008;margin:2px auto 0;border-radius:2px;overflow:hidden;visibility:hidden}#reloadFill{height:100%;background:#ffd451;width:0}
#joy{position:absolute;left:9vw;bottom:12vh;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.35);pointer-events:none}
#knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(255,255,255,.45);border:2px solid #fff}
#crosshair{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
#crosshair i{position:absolute;background:#fff;box-shadow:0 0 2px #000}
#crosshair i:nth-child(1){width:2px;height:8px;left:-1px;top:-14px}#crosshair i:nth-child(2){width:2px;height:8px;left:-1px;top:6px}
#crosshair i:nth-child(3){width:8px;height:2px;left:-14px;top:-1px}#crosshair i:nth-child(4){width:8px;height:2px;left:6px;top:-1px}
#crosshair.hot i{background:#ff3b30}
#hitmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:22px;color:#fff;opacity:0;pointer-events:none;font-weight:900;text-shadow:0 0 3px #000}
#hitmark.head{color:#ff3b30}
#scope{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,transparent 0,transparent 32vh,rgba(0,0,0,.92) 32.4vh)}
#scope::before,#scope::after{content:'';position:absolute;background:#000}
#scope::before{left:50%;top:18vh;bottom:18vh;width:2px;margin-left:-1px}#scope::after{top:50%;left:calc(50% - 32vh);right:calc(50% - 32vh);height:2px;margin-top:-1px}
#vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px rgba(255,0,0,.9);opacity:0;transition:opacity .25s}
#dmgDir{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .4s}
#dmgDir::before{content:'';position:absolute;left:-40px;top:-120px;width:80px;height:24px;border-radius:50%/100% 100% 0 0;border-top:6px solid #ff2a2a;filter:drop-shadow(0 0 4px #f00)}
#msg{position:absolute;left:50%;top:26%;transform:translateX(-50%);font-size:18px;font-weight:900;text-align:center;pointer-events:none;text-shadow:0 2px 4px #000;white-space:nowrap}
#bigmap{position:absolute;inset:0;background:rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;z-index:5}
#bigmapC{width:min(80vh,320px);height:min(80vh,320px);border:2px solid #fff8;border-radius:10px}
#fps{position:absolute;left:8px;bottom:4px;font-size:10px;opacity:.6;pointer-events:none}
.dnum{position:absolute;font-weight:900;font-size:15px;color:#fff;text-shadow:0 1px 2px #000;pointer-events:none;transform:translate(-50%,-50%)}
.dnum.head{color:#ffcc00;font-size:18px}
.overlay{position:fixed;inset:0;z-index:40;background:rgba(3,5,15,.75);display:flex;align-items:center;justify-content:center}
.obox{background:linear-gradient(180deg,#1b2147,#0f1330);border:2px solid #ffd451aa;border-radius:16px;padding:16px 24px;text-align:center;display:flex;flex-direction:column;gap:10px;min-width:280px;max-width:92vw}
#resTitle{font-size:min(10vh,48px)}
.resstats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.resstats div{background:rgba(255,255,255,.07);border-radius:10px;padding:6px 12px;font-size:12px}.resstats b{display:block;font-size:20px;color:#ffd451}
.rbtns{display:flex;gap:10px;justify-content:center}
#toast{position:fixed;left:50%;top:18%;transform:translateX(-50%);background:rgba(0,0,0,.85);border:1px solid #ffd451;border-radius:10px;padding:8px 14px;font-weight:800;font-size:14px;z-index:60;opacity:0;transition:opacity .3s;pointer-events:none;text-align:center}
@media (max-height:380px){.hbtn{width:46px;height:46px}#btns .fire{width:74px;height:74px}#joy{width:104px;height:104px}}

@font-face{font-family:"MR";src:url(mr.woff2) format("woff2");font-weight:700;font-display:swap}
.mr,.mrf{font-family:"MR","Noto Sans Devanagari",system-ui,sans-serif}
#landing{background:#000 url(bg.jpg) center/cover no-repeat}
#landing::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,0) 70%)}
#landing .land-in{position:relative;align-self:flex-end;padding-bottom:max(3vh,10px)}
.land-spacer{height:52vh}
#loading{background:#000 url(bg.jpg) center/cover no-repeat;justify-content:flex-end;padding-bottom:6vh;text-shadow:0 2px 4px #000}
.ldbar{width:min(60vw,320px);height:6px;border:1px solid #ffd451;border-radius:3px;overflow:hidden}.ldbar i{display:block;height:100%;width:30%;background:linear-gradient(90deg,#ffe08a,#e59a10);animation:ld 1.2s ease-in-out infinite}
@keyframes ld{0%{margin-left:-30%}100%{margin-left:100%}}
#splash{z-index:35;background:#000 url(bg.jpg) center/cover no-repeat;display:flex;align-items:center;justify-content:center}
#splash::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.72)}
.splash-in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;max-width:92vw}
.land-logo.sm{width:min(28vh,150px)}
.ig-name{font-size:min(6vh,26px);font-weight:900;color:#fff;text-shadow:0 0 10px #e1306c}
.mr{font-size:min(5vh,20px);font-weight:700;color:#ffe08a;line-height:1.4}
.btn.ig{background:linear-gradient(90deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);border-color:#fff;color:#fff;text-shadow:0 1px 2px #000}
.splash-btns{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap}
.skip{background:rgba(0,0,0,.62);color:#fff;font-size:28px;font-weight:900;letter-spacing:2px;min-height:64px;min-width:170px;padding:10px 28px;border:3px solid #ffd451;border-radius:40px;box-shadow:0 3px 0 #000,0 0 14px rgba(255,212,81,.45);text-shadow:0 2px 3px #000;cursor:pointer;line-height:1}
.skip:active{transform:scale(.96);background:rgba(0,0,0,.8)}
.skip-top{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:2;font-size:26px;min-width:150px}
.igbtn{position:absolute;right:10px;bottom:calc(19vh + 8px);display:flex;align-items:center;gap:6px;background:linear-gradient(90deg,rgba(214,41,118,.85),rgba(150,47,191,.85));border:2px solid #ffd451;border-radius:22px;padding:3px 10px 3px 3px;color:#fff;text-decoration:none;font-size:12px;font-weight:800}
.igbtn img{width:30px;height:30px;object-fit:contain;background:#0008;border-radius:50%}
/* royal storm theme */
.btn{background:linear-gradient(180deg,rgba(40,30,20,.9),rgba(15,12,10,.92));border:2px solid #c9952e;box-shadow:0 3px 0 #000,inset 0 1px 0 #ffd45155;color:#ffe9b0}
.panel-box,.obox{background:linear-gradient(180deg,rgba(28,22,16,.96),rgba(10,8,8,.97));border-color:#c9952e}
.cbtn{background:rgba(15,12,10,.75);border-color:#c9952e55}
.chip{background:#2a2117;border-color:#c9952e}

.port img,.player-chip img{image-rendering:pixelated}
.cbtn em{display:block;font-style:normal;font-size:9px;color:#ffd451;font-weight:900}
.chip.buyc{background:linear-gradient(#ffd451,#c98a12);color:#2a1a00;border-color:#ffe9a0}
.seo{font-size:11px;opacity:.75;max-width:560px;margin:8px auto 0;line-height:1.35}
.seo h1{font-size:13px;margin:0 0 2px}
#vehBtn{position:absolute;right:190px;top:40%;width:96px;height:56px;border-radius:14px;font-size:15px;font-weight:900;background:linear-gradient(#ffd451,#d08a00);color:#2a1500;border:2px solid #fff3c0;display:none;z-index:6}
#vehBtn.show{display:block}
#hud.driving .hbtn.fire,#hud.driving .hbtn.fire2,#hud.driving .hbtn.aim,#hud.driving .hbtn.jump,#hud.driving .hbtn.crouch,#hud.driving .hbtn.reload,#hud.driving .hbtn.swap,#hud.driving #crosshair{display:none}
#hud.driving #vehBtn{right:40px;top:auto;bottom:40px;width:110px;height:64px}
#speedo{position:absolute;right:170px;bottom:40px;font:900 22px sans-serif;color:#fff;text-shadow:0 2px 4px #000;display:none}
#hud.driving #speedo{display:block}

.seo h1.seoh{font-size:13px!important;margin:0 0 2px!important;line-height:1.3;font-family:inherit;background:none;-webkit-text-fill-color:#fff;color:#fff;text-shadow:0 1px 2px #000;letter-spacing:0}
.seo{text-shadow:0 1px 2px #000}

/* car controls */
#drive{display:none}
#hud.driving #drive{display:block}
#hud.driving #joy,#hud.driving .hbtn.skill{display:none}
#wheel{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:14px;width:min(150px,44vh);height:min(150px,44vh);border-radius:50%;z-index:7;touch-action:none;transition:transform .25s ease-out;filter:drop-shadow(0 4px 6px #000a)}
#wheel.held{transition:none}
.pedal{position:absolute;bottom:16px;z-index:7;touch-action:none;border-radius:16px;color:#fff;font-size:28px;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;box-shadow:0 4px 0 #0008}
.pedal small{font-size:11px;letter-spacing:1px;margin-top:3px}
.pedal.gas{right:max(18px,env(safe-area-inset-right));width:84px;height:min(120px,36vh);background:linear-gradient(#3fd46a,#178a3a);border:2px solid #c6ffd6}
.pedal.brake{right:calc(max(18px,env(safe-area-inset-right)) + 96px);width:78px;height:min(84px,26vh);background:linear-gradient(#ff6a5a,#b8261a);border:2px solid #ffd0c8}
.pedal.press{transform:translateY(3px) scale(.96);box-shadow:0 1px 0 #0008;filter:brightness(1.2)}
#hud.driving #vehBtn{right:max(18px,env(safe-area-inset-right));top:auto;bottom:calc(min(120px,36vh) + 26px);width:84px;height:44px;font-size:14px}
#hud.driving #speedo{right:calc(max(18px,env(safe-area-inset-right)) + 190px);bottom:22px}

/* emote + legend */
.emotebtn{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;background:linear-gradient(180deg,#ffd451,#d08a00);color:#2a1500;border:2px solid #fff3c0;border-radius:14px;padding:8px 10px;font-weight:900;font-size:11px;letter-spacing:1px;box-shadow:0 0 14px #ffb30088;animation:pulse 2.4s infinite}
.emotebtn b{font-size:26px;line-height:1}
#btns .emoteb{left:calc(min(24vh,120px) + 16px);top:56px;width:40px;height:40px;font-size:16px;background:rgba(255,180,0,.4);border-color:#ffe08a}
#hud.driving .hbtn.emoteb{display:none}
.emc .emico{font-size:34px;line-height:1.2}
.legendc{border-color:#ffb300!important;box-shadow:0 0 14px #ff6a00aa,inset 0 0 18px #ff9a0033;background:linear-gradient(180deg,rgba(90,30,0,.85),rgba(30,10,0,.85))!important;position:relative}
.legend{position:absolute;top:-8px;right:-6px;background:linear-gradient(90deg,#ff3d00,#ffb300);color:#fff;font-size:10px;font-weight:900;padding:2px 7px;border-radius:8px;letter-spacing:1px;box-shadow:0 0 8px #ff6a00;text-shadow:0 1px 1px #0008}

/* lobby left column */
#leftCol{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;align-items:stretch;width:min(21vw,118px);z-index:3}
#leftCol button{width:100%}
.emotebtn span,.giftbtn span,.rewbtn span{font-size:10px;line-height:1.1}
.giftbtn{display:flex;flex-direction:column;align-items:center;gap:2px;background:linear-gradient(180deg,#ff4d4d,#b3001b);color:#fff;border:2px solid #ffe08a;border-radius:14px;padding:8px 8px;font-weight:900;letter-spacing:1px;box-shadow:0 0 16px #ff3d3d99;animation:giftw 1.6s infinite}
.giftbtn b{font-size:28px;line-height:1}
@keyframes giftw{0%,100%{transform:rotate(0)}10%{transform:rotate(-4deg)}20%{transform:rotate(4deg)}30%{transform:rotate(0)}}
.rewbtn{display:flex;flex-direction:column;align-items:center;gap:2px;background:linear-gradient(180deg,#3fd46a,#137a33);color:#fff;border:2px solid #c6ffd6;border-radius:14px;padding:6px;font-weight:900;letter-spacing:1px}
.rewbtn b{font-size:22px;line-height:1}
.hudeditbtn{position:absolute;right:10px;top:58px;z-index:3;background:rgba(10,14,40,.8);border:2px solid #7fdcff;border-radius:10px;padding:5px 9px;font-size:11px;font-weight:900;color:#fff}
/* hud editor */
#hudEdit{position:fixed;inset:0;z-index:60;touch-action:none;background:repeating-linear-gradient(45deg,rgba(0,0,0,.18) 0 12px,rgba(0,0,0,.1) 12px 24px)}
.hebar{position:absolute;left:50%;top:6px;transform:translateX(-50%);display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;background:rgba(8,10,30,.92);border:2px solid #ffd451;border-radius:12px;padding:6px 10px;max-width:96vw;font-size:11px;font-weight:800;color:#fff}
.hebar label{display:flex;align-items:center;gap:4px}.hebar input[type=range]{width:90px}
.hetabs{display:flex;gap:4px}#heName{color:#ffd451;min-width:120px;text-align:center}
#hud.editing #joy,#hud.editing #drive{display:block}#hud.editing.driving #joy{display:none}#hud.editing #touch{display:none}
#hud.editing .hbtn,#hud.editing #joy,#hud.editing .pedal,#hud.editing #wheel,#hud.editing #vehBtn{outline:2px dashed #ffffff88;outline-offset:2px}
.hsel{outline:3px solid #ffd451!important;box-shadow:0 0 18px #ffd451!important}
/* locker / rewards / gift / maps */
.ofgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))!important}
.ofc{position:relative;padding-top:12px!important}.ofc h3{font-size:10px!important;min-height:24px}
.ofth{width:44px;height:58px;margin:0 auto 4px;position:relative}.ofth i{position:absolute;left:6px;right:6px;top:0;height:28px;border-radius:8px 8px 3px 3px;border:1px solid #fff4}
.ofth b{position:absolute;left:10px;right:10px;top:28px;height:24px;border-radius:2px}.ofth u{position:absolute;left:8px;right:8px;bottom:0;height:6px;border-radius:3px}
.ofc.premium{border-color:#b388ff!important;box-shadow:0 0 10px #b388ff66}.ofc.legend{border-color:#ffd451!important;box-shadow:0 0 18px #ffb300;background:linear-gradient(180deg,rgba(90,60,0,.9),rgba(30,20,0,.9))!important}
.ofc.legend .ofth{filter:drop-shadow(0 0 6px #ffd451)}
.tierb{position:absolute;top:-6px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:8px;font-weight:900;padding:1px 6px;border-radius:6px;background:#6a1bd1;color:#fff}.ofc.basic .tierb{background:#546e7a}.ofc.legend .tierb{background:linear-gradient(90deg,#ff8f00,#ffd451);color:#2a1500}
.lockr{font-size:9px;opacity:.75;font-weight:800}
.chth{width:70px;height:34px;margin:0 auto 4px;border-radius:40px 40px 6px 6px;border:2px solid #fff6}
.spinwrap{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.spinbox{position:relative;width:200px;height:200px}.spinbox canvas{width:200px;height:200px;border-radius:50%;box-shadow:0 0 0 5px #ffd451,0 0 22px #ffb300}
.spinptr{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:24px;color:#ff3d00;text-shadow:0 2px 2px #000}
.spinside{max-width:260px;text-align:center}.spinside h3{color:#ffd451;font-size:18px;margin-bottom:4px}.spinside .btn{margin:8px 0 4px}
.rdays{display:flex;gap:5px;overflow-x:auto;padding-bottom:4px}.rday{flex:1;min-width:64px;background:rgba(10,14,40,.7);border:2px solid #ffffff22;border-radius:10px;padding:5px;text-align:center;display:flex;flex-direction:column;gap:3px;font-size:10px}
.rday b{font-size:11px}.rday.cur{border-color:#ffd451;box-shadow:0 0 10px #ffb300}.rday.done{opacity:.55}
.rrow{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(10,14,40,.6);border-radius:8px;padding:5px 8px;margin-top:4px;font-size:12px}.rrow b{color:#ffd451}.rok{font-size:10px;color:#69f0ae;font-weight:900}
.giftbox{max-width:380px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}.giftico{font-size:48px;line-height:1}.giftbox h3{color:#ffd451}
#giftIn{width:100%;font:900 22px monospace;text-align:center;letter-spacing:3px;padding:10px;border-radius:12px;border:3px solid #ffd451;background:#0b0f24;color:#fff;text-transform:uppercase}
.btn.wa{background:linear-gradient(180deg,#25d366,#128c4a);border-color:#c8ffd9;color:#fff;text-decoration:none;font-size:15px;display:inline-block}
.panel.p-maps .panel-box{background:linear-gradient(rgba(10,6,2,.78),rgba(10,6,2,.9)),url(bg.jpg) center/cover}
.mapsrow{display:flex;gap:12px;overflow-x:auto;padding:6px 4px 10px;scroll-snap-type:x mandatory}
.mapc{flex:0 0 min(30%,210px);min-width:160px;scroll-snap-align:start;background:linear-gradient(180deg,#2a1a08,#140c04);border:3px solid #d4a23c;border-radius:12px;padding:6px;text-align:center;box-shadow:0 0 0 2px #6b4a1a inset,0 4px 14px #000a}
.mapc.sel{border-color:#ffe08a;box-shadow:0 0 18px #ffb300}
.mapimg{height:96px;border-radius:8px;border:2px solid #8a6a2a;display:flex;align-items:center;justify-content:center;font-weight:900}
.mapc h3{color:#ffd451;font-size:15px;margin:6px 0 2px;letter-spacing:1px}.msub{font-size:10px;opacity:.85;margin-bottom:6px}
.msel{width:100%;font-size:14px}

/* plane drop */
#dropBtn{position:absolute;right:max(24px,6vw);top:50%;transform:translateY(-50%);z-index:8;padding:16px 22px;border-radius:18px;font:900 22px sans-serif;color:#fff;background:linear-gradient(180deg,#ff4d4d,#b3001b);border:3px solid #ffe08a;box-shadow:0 0 22px #ff3d3daa;animation:pulse 1.2s infinite}
.altbox{display:none;position:absolute;left:50%;top:44px;transform:translateX(-50%);background:#000a;border:1px solid #ffffff55;border-radius:10px;padding:3px 12px;font-weight:900;color:#fff}
#hud.dropping .altbox{display:block}
#hud.dropping #btns .hbtn:not(.mapb),#hud.dropping #crosshair,#hud.dropping #weaponBox,#hud.dropping #vehBtn{display:none!important}

/* drive modes */
#driveOpt{display:none;position:absolute;left:50%;top:36px;transform:translateX(-50%);z-index:8;gap:4px;background:#000a;border:1px solid #ffd45188;border-radius:12px;padding:3px}
#hud.driving #driveOpt{display:flex}#hud.editing #driveOpt{display:none}
#driveOpt button{width:44px;height:38px;border-radius:9px;background:rgba(30,40,80,.7);border:1px solid #ffffff44;font-size:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
#driveOpt button small{font-size:6px;font-weight:900;margin-top:1px}#driveOpt button.on{background:linear-gradient(#ffd451,#d08a00);color:#2a1500;border-color:#fff3c0}
#arrows{display:none;position:absolute;left:max(18px,env(safe-area-inset-left));bottom:18px;z-index:7;gap:14px}
#arrows button{width:76px;height:76px;border-radius:50%;font-size:30px;color:#fff;background:rgba(20,25,50,.55);border:3px solid #ffffffaa;touch-action:none}
#arrows button.press{background:rgba(255,200,40,.6)}
#hud.driving.dm-arrows #arrows{display:flex}#hud.driving.dm-arrows #wheel,#hud.driving.dm-joy #wheel{display:none}
#hud.driving.dm-joy #joy{display:block}#hud.driving.dm-tilt #wheel{pointer-events:none;opacity:.75}
#hud.editing.driving #arrows{display:flex}
.xpbar{width:86px;height:5px;background:#ffffff22;border-radius:3px;overflow:hidden;margin-top:2px}.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd451,#ff8f00)}.xptxt{display:block;font-size:8px!important;opacity:.8}

/* ===== online / friends / emotes / pets ===== */
.pcid{display:block;color:#7fffb0;font-weight:800;letter-spacing:.5px}
.player-chip{cursor:pointer}
.onlbtn{background:linear-gradient(180deg,#2ecc71,#138a46);color:#fff;border:2px solid #c8ffd9;border-radius:10px;padding:5px 8px;font-size:12px;font-weight:900;letter-spacing:1px;display:flex;align-items:center;gap:6px;justify-content:center;box-shadow:0 0 12px #2ecc7166}
.onlbtn i,#onlDot{width:9px;height:9px;border-radius:50%;background:#888;display:inline-block;flex:none}
#onlDot.online{background:#7dff8a;box-shadow:0 0 6px #7dff8a}#onlDot.connecting,#onlDot.reconnecting{background:#ffd451}#onlDot.error,#onlDot.taken{background:#ff5252}
.btn.start.waiting{animation:none;filter:grayscale(.5);font-size:min(4.5vh,20px);letter-spacing:2px}
.nc{gap:12px}.nclogo{height:min(26vh,150px);width:auto;align-self:center;object-fit:contain}.nct{font-weight:900;color:#ffd451;letter-spacing:1px;font-size:14px}
.ncbtns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ncb{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:min(38vw,220px);padding:16px 14px;border-radius:14px;font-weight:900;color:#fff;border:2px solid #fff;box-shadow:0 4px 0 #000}
.ncb b{font-size:min(7vh,30px);letter-spacing:2px}.ncb small{font-size:12px;opacity:.95}
.ncb.off{background:linear-gradient(180deg,#ffd451,#e08a00);color:#3a1c00}.ncb.on{background:linear-gradient(180deg,#2ecc71,#0f7a3b)}
.np{width:min(94vw,640px);max-height:92vh;padding:0;gap:0;text-align:left;overflow:hidden}
.nph{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,212,81,.12);border-bottom:1px solid #ffd45155}.nph b{color:#ffd451;letter-spacing:1px;flex:1}
.nst{font-size:11px;font-weight:900;padding:3px 8px;border-radius:8px;background:#555}.nst.online{background:#1f9d55}.nst.connecting,.nst.reconnecting{background:#b8860b}.nst.error,.nst.taken{background:#c62828}
.npbody{overflow-y:auto;padding:8px 12px 12px;touch-action:pan-y}
.npid{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:rgba(0,0,0,.35);border:1px solid #ffd45155;border-radius:10px;padding:6px 10px}
.npid small{width:100%;font-size:10px;opacity:.8;letter-spacing:1px}.npid b{font-size:min(7vh,30px);letter-spacing:3px;color:#7fffb0;font-family:monospace;flex:1}
.chip.wa{background:#25d366;color:#04310f;border-color:#c8ffd9}.chip.dim{opacity:.35}.chip.x{background:#5a1f1f;border-color:#a55}
.nprow{display:flex;gap:6px;align-items:center;margin-top:8px}.nprow input{flex:1;min-width:0;background:#0b0f26;border:2px solid #5b6aa8;border-radius:8px;color:#fff;padding:7px 9px;font-size:15px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.nprow.sm span{font-size:10px;font-weight:900;opacity:.75}.nprow.sm input{text-transform:none;font-size:13px;padding:4px 8px}
.nplist{display:flex;flex-direction:column;gap:5px}
.frow{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border-radius:9px;padding:5px 8px}.frow b{font-size:13px}.frow small{opacity:.6;font-size:10px;font-family:monospace}.frow .fst{margin-left:auto;font-size:10px;font-weight:900;opacity:.85}
.dot{width:10px;height:10px;border-radius:50%;background:#777;flex:none}.dot.on{background:#3dff6e;box-shadow:0 0 6px #3dff6e}
.nfr{opacity:.75;font-size:12px;padding:6px}.nphelp{font-size:11px;opacity:.7;margin-top:10px;line-height:1.4}
.sqrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.sqm{background:#1f9d5533;border:1px solid #3dff6e88;border-radius:8px;padding:4px 8px;font-weight:800;font-size:12px}
.crown{font-style:normal;background:#ffd451;color:#3a1c00;border-radius:5px;font-size:8px;font-weight:900;padding:1px 4px;margin-right:4px;vertical-align:middle}
.npop{max-width:min(92vw,460px);font-size:15px;line-height:1.45}.npop small{opacity:.85}
#netPop{z-index:55}
#sqSlots{position:fixed;inset:0;pointer-events:none;z-index:2}
.sqslot{position:absolute;transform:translate(-50%,-50%);pointer-events:auto}
.sqplus{width:min(13vh,64px);height:min(13vh,64px);border-radius:50%;border:3px dashed #ffffffcc;background:rgba(0,0,0,.35);color:#fff;font-size:min(8vh,38px);font-weight:300;line-height:1;box-shadow:0 0 14px #0008}
.sqplus:active{transform:scale(.92)}
.sqtag{background:rgba(0,0,0,.6);border:1px solid #7fd0ff;border-radius:8px;padding:2px 8px;font-size:12px;font-weight:900;white-space:nowrap;color:#bfe9ff}
.sqslot.me .sqtag{border-color:#ffd451;color:#ffe9b0}
#emoPick{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}
#emoPick.hidden{display:none}
.emogrid{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:94vw;background:rgba(10,12,30,.85);border:2px solid #ffd451aa;border-radius:16px;padding:12px}
.emob{width:min(19vh,96px);height:min(19vh,96px);border-radius:14px;background:linear-gradient(180deg,#3a4370,#1b2147);border:2px solid #ffd45188;color:#ffe9b0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:900}
.emob b{font-size:11px;letter-spacing:1px}.emob small{font-size:9px;opacity:.7}.emob:active{transform:scale(.93);background:#ffd451;color:#3a1c00}.emob.lock{background:linear-gradient(180deg,#5d3a00,#2a1a00)}
.emotebtn b svg{display:block;margin:0 auto}
.petth{width:100%;height:96px;object-fit:contain;background:radial-gradient(#ffffff22,transparent 70%);border-radius:8px}

/* FF-style feel v21 */
#btns .med{right:calc(8vw + 176px);bottom:calc(15vh + 78px);background:rgba(30,140,60,.45);border-color:#a5ffbf}
#btns .nade{right:calc(8vw + 118px);bottom:calc(15vh + 112px);background:rgba(70,90,30,.5);border-color:#d4ff8a}
#btns .wall{right:calc(8vw + 60px);bottom:calc(15vh + 158px);background:rgba(20,120,200,.5);border-color:#9fe3ff;overflow:hidden}
.hbtn .cnt{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;background:#ffd451;color:#2a1500;font-size:11px;line-height:17px;font-weight:900;padding:0 3px}
.hcd{position:absolute;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;font-size:17px;font-weight:900;border-radius:50%}
#hud.driving .hbtn.med,#hud.driving .hbtn.nade,#hud.driving .hbtn.wall,#hud.driving #lootBtn{display:none}
#gear{position:absolute;right:100%;bottom:0;margin-right:6px;display:flex;gap:4px}
#gear span{background:rgba(0,0,0,.6);border:1px solid #ffffff44;border-radius:5px;font-size:10px;font-weight:900;padding:2px 5px;white-space:nowrap}
#crosshair i{transition:top .08s,left .08s}
#crosshair i:nth-child(1){top:calc(-8px - var(--g,6px))}#crosshair i:nth-child(2){top:var(--g,6px)}
#crosshair i:nth-child(3){left:calc(-8px - var(--g,6px))}#crosshair i:nth-child(4){left:var(--g,6px)}
#crosshair.hot i{background:#ff3b30;box-shadow:0 0 4px #ff3b30}
#hitmark{transition:opacity .05s}#hitmark.head{color:#ff3b30;font-size:28px}
.dnum{font-size:17px;-webkit-text-stroke:1px #000;animation:dpop .3s ease-out}
.dnum.head{color:#ff4422;font-size:22px;-webkit-text-stroke:1px #ffd451;text-shadow:0 0 6px #ff9100}
.dnum.arm{color:#4fc3ff;font-size:13px}
@keyframes dpop{0%{scale:1.9}100%{scale:1}}
#killBan{position:absolute;left:50%;top:15%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0;text-shadow:0 2px 4px #000}
#killBan.show{animation:kban 2s ease-out forwards}
@keyframes kban{0%{opacity:0;scale:2}10%{opacity:1;scale:1}80%{opacity:1}100%{opacity:0}}
.kbi{display:flex;align-items:center;gap:4px;font-size:30px;background:radial-gradient(#c62828cc,#0000 70%);padding:0 16px}
.kbi b{font-size:26px;color:#ffd451}
.kbt{font-size:14px;font-weight:900;background:linear-gradient(90deg,#0000,#000a 20%,#000a 80%,#0000);padding:2px 30px;white-space:nowrap}
.kbt i{color:#ff5252;font-style:normal}.kbt b{color:#ffd451}
.kbs{font-size:22px;font-weight:900;color:#ffcc00;letter-spacing:2px;-webkit-text-stroke:1px #7a2a00}
#winBan{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:7}
#winBan.show{display:flex}
#winBan.win{background:radial-gradient(circle,#ffd45155 0,#0000 60%),repeating-conic-gradient(from 0deg,#ffd45122 0 8deg,#0000 8deg 20deg)}
#winBan.lose{background:radial-gradient(circle,#0008 0,#0000 70%)}
.wbt{font-size:min(13vw,72px);font-weight:900;font-style:italic;color:#ffd451;-webkit-text-stroke:2px #7a2a00;text-shadow:0 5px 0 #7a2a00,0 0 30px #ff9100;animation:wbin .6s cubic-bezier(.2,1.6,.4,1)}
#winBan.lose .wbt{color:#eee;-webkit-text-stroke:2px #333;text-shadow:0 4px 0 #222}
.wbs{font-size:22px;font-weight:900;margin-top:6px;text-shadow:0 2px 3px #000}
@keyframes wbin{0%{scale:3;opacity:0}100%{scale:1;opacity:1}}
#zoneEdge{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 70px 20px #ff1744aa;opacity:0;display:none}
#zoneEdge.show{display:block;animation:zpulse 1s ease-in-out infinite alternate}
@keyframes zpulse{from{opacity:.35}to{opacity:.9}}
#zoneWarn{position:absolute;left:50%;top:44px;transform:translateX(-50%);display:none;align-items:center;gap:6px;background:#b71c1ccc;border:1px solid #ff8a80;border-radius:8px;padding:3px 10px;font-size:12px;pointer-events:none;white-space:nowrap}
#zoneWarn.show{display:flex}
#zArrow{display:inline-block;font-style:normal;font-size:16px;color:#fff;margin-right:2px;transform-origin:50% 50%}
#zArrow{rotate:-90deg}
#nadeWarn{position:absolute;display:none;transform:translate(-50%,-50%);font-size:24px;width:40px;height:40px;line-height:40px;text-align:center;border-radius:50%;background:#d50000aa;border:2px solid #fff;pointer-events:none;animation:zpulse .3s infinite alternate}
#healBar{position:absolute;left:50%;top:60%;transform:translateX(-50%);display:none;width:160px;text-align:center;font-size:12px;font-weight:900;pointer-events:none;text-shadow:0 1px 2px #000}
#healBar div{height:7px;background:#0009;border-radius:4px;overflow:hidden;margin-top:2px;border:1px solid #fff6}
#healBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#43a047,#b9f6ca)}
#lootBtn{position:absolute;right:190px;top:26%;min-width:110px;padding:6px 12px;border-radius:12px;font-size:16px;font-weight:900;background:linear-gradient(#ffd451,#e08a00);color:#2a1500;border:2px solid #fff3c0;display:none;z-index:6;box-shadow:0 0 14px #ffb300}
#lootBtn small{display:block;font-size:9px;font-weight:800;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lootBtn.show,#hud.editing #lootBtn{display:block}

/* levels 1-100 picker */
.lvbox{background:#1b2150cc;border:1px solid #5b6aa8;border-radius:10px;padding:8px}
.lvtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lvpm{width:40px;height:40px;border-radius:10px;background:#2a3266;border:2px solid #ffd451;color:#ffd451;font-size:24px;font-weight:900;line-height:1;padding:0}
.lvcur{min-width:118px;text-align:center}.lvcur b{display:block;font-size:22px;color:#ffd451;font-weight:900;line-height:1.05}.lvcur small{font-size:10px;font-weight:800;opacity:.92;white-space:nowrap}
.lvq{display:flex;gap:5px}
.lvinfo{font-size:10.5px;opacity:.88;flex:1;min-width:170px;line-height:1.4}
.lvgrid{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px;max-height:112px;overflow-y:auto;margin-top:8px;padding:2px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
.lvc{height:30px;border-radius:7px;background:#2a3266;border:1px solid #5b6aa8;font-size:11px;font-weight:800;color:#fff;padding:0;white-space:nowrap}
.lvc.ms{border-color:#ffd451;background:#3d3266}
.lvc.on{background:#ffd451;color:#3a1c00;border-color:#fff;box-shadow:0 0 8px #ffd451aa}
.lvc.lk{opacity:.38;background:#151a3a}.lvc.lk:not(.ms)::before{content:'🔒';font-size:8px}
.lvbadges{display:flex;gap:4px;align-items:center;margin-top:6px;flex-wrap:wrap}.lvb{font-size:16px;filter:grayscale(1);opacity:.3}.lvb.got{filter:none;opacity:1}.lvbt{font-size:10.5px;font-weight:800;margin-left:6px;color:#ffd451}

/* NEW UPDATE + statue mode */
.newupd{display:flex;flex-direction:row;align-items:center;gap:5px;background:linear-gradient(180deg,#ff2d95,#7c1fd1);color:#fff;border:2px solid #fff3b0;border-radius:14px;padding:4px 4px 4px 4px;font-weight:900;letter-spacing:.5px;box-shadow:0 0 16px #ff4fb3cc;animation:newpulse 1.2s infinite;min-height:56px}
.newupd .nuthumb{position:relative;flex:0 0 auto;width:42px;height:47px;border-radius:9px;overflow:visible;display:block}
.newupd .nuthumb img{width:100%;height:100%;object-fit:cover;border-radius:9px;border:2px solid #fff3b0;box-shadow:0 0 8px #ffe06699;display:block;background:#3b1d5e}
.newupd .nuthumb b{position:absolute;top:-7px;left:-6px;font-size:14px;line-height:1;filter:drop-shadow(0 1px 2px #0009)}
.newupd span{display:flex;flex-direction:column;align-items:flex-start;min-width:0;font-size:11px;letter-spacing:.2px;line-height:1.15;text-align:left;white-space:nowrap;text-shadow:0 1px 2px #0007}.newupd em{font-style:normal;color:#ffe066;font-size:10.5px;margin-top:2px}
@keyframes newpulse{0%,100%{transform:scale(1);box-shadow:0 0 10px #ff4fb3aa}50%{transform:scale(1.05);box-shadow:0 0 22px #ffe066}}
#hud.statue .fire,#hud.statue .fire2,#hud.statue .aim,#hud.statue .reload,#hud.statue .med,#hud.statue .nade,#hud.statue .wall,#hud.statue .swap,#hud.statue #weaponBox,#hud.statue #crosshair,#hud.statue #lootBtn,#hud.statue #gear{display:none!important}
#hud.statue .hbtn.skill{transform:scale(1.25);border-color:#7fe8ff}.hbtn.skill.used{opacity:.35;filter:grayscale(1)}
#stBan{position:absolute;left:50%;top:13%;transform:translateX(-50%);font-size:clamp(20px,6vh,34px);font-weight:900;padding:4px 18px;border-radius:12px;pointer-events:none;white-space:nowrap;text-shadow:0 2px 4px #000;z-index:4}
#stBan.green{background:rgba(0,120,40,.55);color:#b9ffcf;border:2px solid #69f0ae}#stBan.red{background:rgba(160,0,0,.6);color:#fff;border:2px solid #ff5252;animation:stred .4s infinite alternate}
@keyframes stred{to{transform:translateX(-50%) scale(1.08)}}
.stcard{background:#1b2150cc;border:1px solid #ff4fb3;border-radius:12px;padding:10px}.sttitle{font-size:18px;font-weight:900;color:#ffe066;margin-bottom:6px}.stcard .ds{font-size:12.5px;line-height:1.5}
#updBan{position:fixed;left:50%;top:6px;transform:translateX(-50%);z-index:80;background:linear-gradient(90deg,#00b0ff,#7c4dff);color:#fff;font-weight:900;font-size:13px;padding:8px 16px;border-radius:12px;border:2px solid #fff;box-shadow:0 4px 16px #0008;cursor:pointer;white-space:nowrap}
#updBan.hidden{display:none}

.card{position:relative}

/* ===== owner-app remote config ===== */
.wardnav{background:linear-gradient(180deg,#7b2ff7,#3b0f8a)!important;border-color:#d6b8ff!important}
#lobby>#wardBtn{position:absolute;right:112px;top:56px;z-index:3;flex-direction:row;gap:5px;font-size:15px;padding:4px 10px;min-width:0;border-radius:10px}
#lobby>#wardBtn span{font-size:12px;margin:0;font-weight:900}
.wardnav{position:relative}
.wardnav::after{content:'NEW';position:absolute;top:-6px;right:-4px;background:#e53935;color:#fff;font-size:8px;font-weight:900;padding:1px 4px;border-radius:6px}
#rcRight{position:absolute;right:10px;top:calc(22vh + 18px);display:flex;flex-direction:column;gap:8px;align-items:stretch;width:min(21vw,118px);z-index:3}
#rcRight:empty{display:none}#rcRight button{width:100%}
#lobby.rc-hasright .heroinfo{display:none}
#lobby.rc-hasright #hudEditBtn{top:auto}
.rcico{width:1.6em;height:1.6em;object-fit:contain;display:block;margin:0 auto;border-radius:6px}
#leftCol .rcico,#rcRight .rcico{width:30px;height:30px}
.rcglow{animation:rcglow 1.4s ease-in-out infinite!important}
@keyframes rcglow{0%,100%{box-shadow:0 0 6px #ffd451,0 0 0 #ffd451}50%{box-shadow:0 0 18px #ffd451,0 0 30px #ff9800}}
#rcAnn{position:absolute;left:calc(min(21vw,118px) + 30px);top:calc(env(safe-area-inset-top) + 58px);z-index:6;display:flex;align-items:center;gap:6px;max-width:min(34vw,420px);background:rgba(8,10,30,.82);border:1px solid var(--rcac,#ffcc00);border-radius:10px;padding:4px 6px 4px 10px;box-shadow:0 0 12px rgba(0,0,0,.5)}
#rcAnn.hide{display:none}
#rcAnn .rcat{overflow:hidden;white-space:nowrap;flex:1;min-width:0}
#rcAnn .rcat span{display:inline-block;color:var(--rcac,#ffcc00);font-weight:800;font-size:12px}
#rcAnn .rcat span.mq{padding-left:100%;animation:rcmq 14s linear infinite}
@keyframes rcmq{to{transform:translateX(-100%)}}
#rcAnn button{background:none;border:0;color:#fff;opacity:.7;font-size:12px;padding:2px 4px}
#rcMaint{position:fixed;inset:0;z-index:90;background:rgba(3,5,18,.78);display:flex;align-items:center;justify-content:center}
#rcMaint .rcmb{background:#141a3a;border:2px solid #ffd451;border-radius:14px;padding:14px 18px;max-width:min(82vw,460px);text-align:center;color:#fff}
#rcMaint .rcmh{font-weight:900;color:#ffd451;margin-bottom:8px}#rcMaint .rcmt{white-space:pre-wrap;font-size:14px;margin-bottom:12px}
.ofc.remote{border-color:#b388ff}.tierb.rcnew{background:#e53935!important;color:#fff}
body.rcpv #landing,body.rcpv #splash,body.rcpv #updBan{display:none!important}
body.rcpv-of #lobby>*,body.rcpv-of #panel,body.rcpv-of #rcAnn,body.rcpv-of #rload{visibility:hidden!important}
body.rcpv #netChoice,body.rcpv #netPanel,body.rcpv #rotate{display:none!important}

/* v30 squads */
#teamHud{position:absolute;left:8px;top:calc(min(24vh,120px) + 16px);display:flex;flex-direction:column;gap:3px;pointer-events:none;z-index:3}
#teamHud .tm{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.5);border-radius:7px;padding:2px 6px 2px 4px;font-size:11px;line-height:1.2;min-width:118px}
#teamHud .tm i{width:9px;height:9px;border-radius:50%;flex:none;border:1px solid #000}
#teamHud .tm b{flex:1;max-width:72px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#teamHud .tm .hb{width:40px;height:5px;background:#ffffff30;border-radius:3px;overflow:hidden;flex:none}
#teamHud .tm .hb u{display:block;height:100%}
#teamHud .tm em{font-style:normal;font-size:10px;opacity:.9;min-width:26px;text-align:right}
#teamHud .tm.dead{opacity:.6}
#hud.editing #teamHud{display:none}
.sqrow{flex-wrap:wrap;gap:6px;justify-content:center}
.sqchip{display:flex;flex-direction:column;align-items:center;min-width:84px;padding:6px 10px;font-weight:800}
.sqchip small{font-size:10px;opacity:.8;font-weight:600}
.sqhelp{font-size:11px;opacity:.8;text-align:center;margin:6px 0 2px}
.teamchip{color:#ffd451}
.resstats .sqres{flex-basis:100%;width:100%;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:center;font-size:12px}
.resstats .sqres small{width:100%;text-align:center;opacity:.8}
.resstats .sqres span{border:2px solid;border-radius:8px;padding:2px 7px;background:rgba(0,0,0,.35)}
.sqtop{display:flex;gap:4px;align-items:stretch}.sqtop .onlbtn{flex:1}.sqtop .teamchip{flex:none;white-space:nowrap}.sqtop #modeChip{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.netind{font-size:10px;font-weight:800;background:rgba(0,0,0,.6);border-radius:8px;padding:4px 6px;display:flex;align-items:center;white-space:nowrap}.netind.off{color:#ff8a80}.netind.on{color:#b9f6ca}

/* v31 rooms */
#roomPanel .rp{max-width:min(94vw,460px)}
.rpbig{display:flex;flex-direction:column;align-items:center;width:100%;font-size:18px;padding:10px}
.rpbig small,.rpcode small{font-size:11px;opacity:.85}
.rpor{text-align:center;font-size:11px;opacity:.7;margin:6px 0}
.rpcode{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,.35);border:2px dashed #ffd451;border-radius:12px;padding:8px}
.rpcode small{width:100%;text-align:center}
.rpcode b{font-size:34px;letter-spacing:6px;color:#ffd451;font-family:monospace;text-shadow:0 2px 0 #000}
.rpcode a.chip{text-decoration:none}
.rpsz{justify-content:center;margin:6px 0}
.rpslots{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:6px 0}
.rps{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border-radius:8px;padding:5px 7px;font-size:12px;flex-wrap:wrap}
.rps i{width:10px;height:10px;border-radius:50%;background:#888;flex:none}
.rps b{flex:1}
.rps small{width:100%;font-size:10px;opacity:.75}
.rps.bot{opacity:.6}.rps.off{opacity:.5}
.rpact{display:flex;gap:8px;justify-content:center;align-items:center}
#rpStart{font-size:min(5vh,22px);padding:6px 18px;letter-spacing:2px}
#rpStart:disabled{filter:grayscale(.6);animation:none}
.rpmsg{text-align:center;font-size:12px;min-height:16px;margin-top:4px}

/* ===== v33 HUD ===== */
#weaponBox{display:none!important}
#btns .swap{display:none!important}
#topinfo{left:auto;right:calc(max(8px,env(safe-area-inset-right)) + 44px);top:8px;transform:none;gap:5px}
#topinfo span{display:flex;align-items:center;gap:5px;background:linear-gradient(180deg,rgba(14,20,40,.78),rgba(8,12,26,.7));border:1px solid rgba(255,212,81,.35);border-radius:8px;padding:3px 9px;font-size:15px;line-height:20px}
#topinfo span i{font-style:normal;font-size:8px;font-weight:900;letter-spacing:.8px;opacity:.75}
#topinfo b{font-weight:900}#killBox b{color:#ff8a65}
#compass{position:absolute;left:50%;top:5px;transform:translateX(-50%);width:min(38vw,300px);height:26px;pointer-events:none;overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
#cpTape{position:absolute;inset:0 0 auto 0;height:18px;background:linear-gradient(180deg,rgba(6,10,24,.55),rgba(6,10,24,.15));border-bottom:1px solid rgba(255,255,255,.35)}
#cpTape .cpIn{position:absolute;left:0;top:0;height:100%;will-change:transform}
#cpTape span{position:absolute;top:2px;transform:translateX(-50%);font-size:9px;font-weight:800;color:#dfe6ff;opacity:.75;text-shadow:0 1px 2px #000}
#cpTape span.c{font-size:13px;top:0;color:#fff;opacity:1;font-weight:900}#cpTape span.ic{font-size:10px;color:#fff;opacity:.95}
#cpTape span.c:first-letter{color:inherit}
#cpTape span::after{content:'';position:absolute;left:50%;top:15px;width:1px;height:4px;background:#fff9}
#cpMark{position:absolute;left:50%;top:15px;margin-left:-5px;border:5px solid transparent;border-bottom:6px solid #ffd451;border-top:0}
#cpDeg{position:absolute;left:50%;top:18px;transform:translateX(-50%);font-size:8px;font-weight:900;color:#ffd451;text-shadow:0 1px 2px #000;display:none}
#zoneBox{position:absolute;left:50%;top:30px;transform:translateX(-50%);pointer-events:none;white-space:nowrap;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000;background:rgba(0,0,0,.35);border-radius:10px;padding:1px 10px}
#zoneBox b{color:#ffd451;font-weight:900}
#zoneWarn,.altbox{top:52px}#driveOpt{top:50px}
/* weapon panel */
#wPanel{position:absolute;right:max(8px,env(safe-area-inset-right));top:40px;width:196px;z-index:4;display:flex;flex-direction:column;gap:4px;touch-action:none;user-select:none;-webkit-user-select:none}
#wCur{position:relative;height:46px;border-radius:10px;background:linear-gradient(100deg,rgba(255,212,81,.22),rgba(14,20,40,.82) 46%);border:1px solid rgba(255,212,81,.55);display:flex;align-items:center;padding:0 8px 0 4px;gap:4px;overflow:hidden}
#wSil{width:84px;height:30px;flex:none;color:#fff;filter:drop-shadow(0 1px 2px #000)}#wSil svg{width:100%;height:100%;fill:currentColor}
#wSil img{width:100%;height:100%;object-fit:contain}
#wInfo{flex:1;text-align:right;line-height:1}
#wCurName{font-size:9px;font-weight:900;letter-spacing:.6px;color:#ffd451;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wCurAmmo b{font-size:21px;font-weight:900;color:#fff}#wCurAmmo span{font-size:12px;font-weight:800;opacity:.75;margin-left:1px}#wCurAmmo i{font-style:normal}
#wHint{position:absolute;left:6px;bottom:2px;font-size:8px;font-weight:900;color:#ffd451;letter-spacing:.4px;text-shadow:0 1px 2px #000}
#wPanel.low #wHint{color:#ff6b5a;animation:wblink .8s infinite}#wPanel.low #wMag{color:#ff6b5a}
@keyframes wblink{50%{opacity:.35}}
#wRel{position:absolute;left:0;right:0;bottom:0;height:3px;background:#0008;visibility:hidden}#wRel u{display:block;height:100%;width:0;background:#ffd451}
#wCur.swap{animation:wswap .32s ease-out}
@keyframes wswap{0%{transform:translateX(28px);opacity:.2;filter:brightness(2.2)}60%{transform:translateX(-3px);opacity:1}100%{transform:none;filter:none}}
#wSlots{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.ws{position:relative;width:35px;height:35px;border-radius:8px;background:rgba(10,14,30,.66);border:1px solid rgba(255,255,255,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;overflow:hidden}
.ws svg{width:31px;height:13px;fill:currentColor;margin-top:3px}.ws img{width:33px;height:15px;object-fit:contain;margin-top:3px}
.ws.nade svg{width:15px;height:15px;margin-top:2px;fill:#c6ff8a}
.ws small{font-size:7px;font-weight:900;opacity:.9;margin-top:1px;white-space:nowrap}
.ws em{position:absolute;left:3px;top:1px;font-style:normal;font-size:7px;font-weight:900;opacity:.7}
.ws.on{border-color:#ffd451;background:linear-gradient(180deg,rgba(255,212,81,.38),rgba(40,30,0,.7));box-shadow:0 0 8px rgba(255,212,81,.5)}
.ws.on small{color:#ffd451}
.ws.empty{opacity:.45;border-style:dashed}.ws.empty span{font-size:14px;font-weight:900;line-height:1;margin-top:3px}
.ws.tap{transform:scale(.88);background:rgba(255,255,255,.35)}
#hud.dropping #wPanel,#hud.statue #wPanel,#hud.driving #wPanel{display:none!important}
#hud.editing #wPanel{opacity:.5;pointer-events:none}
/* team column */
#teamHud{left:max(8px,env(safe-area-inset-left));top:calc(min(24vh,120px) + 14px);gap:3px}
#teamHud .tm{min-width:0;width:142px;padding:3px 6px 3px 3px;gap:5px;border-radius:8px;background:linear-gradient(90deg,rgba(10,14,30,.8),rgba(10,14,30,.45));border:1px solid rgba(255,255,255,.12)}
#teamHud .tm i{width:16px;height:16px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:10px;font-weight:900;color:#111;border:0}
#teamHud .tm .tmm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#teamHud .tm b{max-width:none;font-size:10px;font-weight:800}
#teamHud .tm .hb{width:100%;height:4px}
#teamHud .tm em{font-size:9px;font-weight:800;min-width:30px;white-space:nowrap}
#teamHud .tm.me{border-color:rgba(255,212,81,.45)}#teamHud .tm.me b{color:#ffd451}
#teamHud .tm.down{opacity:.85;border-color:rgba(255,160,60,.6)}#teamHud .tm.down em{color:#ffb35c}
#teamHud .tm.dead{opacity:.5}
/* kill feed: center-bottom */
#killfeed{left:50%;right:auto;top:auto;bottom:62px;transform:translateX(-50%);width:auto;align-items:center;gap:2px}
#killfeed div{font-size:11px;font-weight:700;padding:2px 9px;border-radius:9px;background:rgba(0,0,0,.5);white-space:nowrap;animation:kfin .25s ease-out}
#killfeed div em{font-style:normal;font-weight:600;opacity:.75;font-size:10px}#killfeed div small{opacity:.8;font-size:9px}
#killfeed div b{color:#ffd451}#killfeed div b.me{color:#ff6b5a}
@keyframes kfin{from{opacity:0;transform:translateY(6px)}}
/* thumb-friendly right cluster (default layout only; a saved custom layout overrides with inline styles) */
#btns .wall{right:calc(8vw + 232px);bottom:calc(15vh + 150px)}
@media (max-height:340px){#wCur{height:40px}.ws{width:31px;height:31px}#wPanel{width:176px;top:36px}#compass{height:22px}#zoneBox{top:24px;font-size:10px}#teamHud .tm{width:126px}}

.ws.r-r{border-color:rgba(62,168,255,.6)}.ws.r-e{border-color:rgba(192,97,255,.7)}.ws.r-l{border-color:rgba(255,194,46,.75)}
.ws.on{border-color:#ffd451}
.gthumb{position:relative;display:flex;align-items:center;justify-content:center}.gthumb img{width:92%;height:auto;max-height:90%;object-fit:contain;filter:drop-shadow(0 3px 4px #000a)}
.gthumb .rar{position:absolute;left:6px;top:4px;font-size:9px;font-weight:900;letter-spacing:.6px;text-shadow:0 1px 2px #000}

.ws{background:radial-gradient(circle at 50% 45%,rgba(120,140,190,.38),rgba(10,14,30,.72) 75%)}
.ws img{filter:brightness(1.55) contrast(1.1) drop-shadow(0 0 1px rgba(255,255,255,.55))}
#wSil img{filter:brightness(1.3) drop-shadow(0 0 1px rgba(255,255,255,.5)) drop-shadow(0 2px 2px #000)}

#gunSwapBtn{position:absolute;right:calc(max(8px,env(safe-area-inset-right)) + 300px);top:30%;min-width:112px;padding:6px 12px;border-radius:12px;font-size:15px;font-weight:900;background:linear-gradient(#3a4a7a,#1c2548);color:#fff;border:2px solid #9fc3ff;display:none;z-index:6;flex-direction:column;align-items:center;line-height:1.1;box-shadow:0 0 12px #3ea8ff88}
#gunSwapBtn small{font-size:9px;font-weight:900;margin-top:2px}#gunSwapBtn.show{display:flex}#hud.driving #gunSwapBtn{display:none!important}
.fi{font-size:16px;line-height:1;margin-top:2px;filter:none}#wSil .fi{font-size:26px;display:block;text-align:center}

#lootBtn{right:calc(max(8px,env(safe-area-inset-right)) + 212px)}

/* v34 street kits */
.card.ofc.street{border-color:#ff7a1a!important;box-shadow:0 0 0 1px #ff7a1a55,0 6px 18px #ff5a0033}
.card.ofc.street .tierb{background:linear-gradient(90deg,#ff3d00,#ffb300);color:#fff}

/* v35 ROYAL HACKER */
#hkBtn{position:fixed;z-index:58;width:52px;height:52px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
 background:radial-gradient(circle at 35% 30%,#fff6c2 0,#ffd451 30%,#e09a00 70%,#7a4a00 100%);border:2px solid #fff3b0;
 box-shadow:0 0 10px #ffd451,0 0 22px rgba(0,255,200,.55),inset 0 -3px 6px rgba(0,0,0,.35);touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;left:30%;top:18%}
#hkBtn span{font-size:24px;line-height:24px}#hkBtn small{font-size:9px;font-weight:900;color:#3a2200;letter-spacing:1px;line-height:10px}
#hkBtn.act{box-shadow:0 0 12px #ffd451,0 0 26px #00ffc8,0 0 40px #00ffc8;animation:hkPulse 1.2s infinite}
@keyframes hkPulse{50%{transform:scale(1.07)}}
#hkBtn.off{filter:grayscale(1) brightness(.6);box-shadow:none;opacity:.7;animation:none}
#hkPan{position:fixed;z-index:59;width:196px;background:rgba(8,12,24,.92);border:2px solid #ffd451;border-radius:14px;padding:6px 8px 8px;box-shadow:0 0 18px rgba(0,255,200,.35);touch-action:none;font-family:inherit}
#hkPan.hidden{display:none}
#hkPan .hkh{font-weight:900;font-size:13px;color:#ffd451;display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;text-shadow:0 0 6px #ffb300}
#hkPan .hkh button{background:none;border:0;color:#fff;font-size:15px;padding:2px 6px;cursor:pointer}
#hkPan .hkrow{display:flex;width:100%;justify-content:space-between;align-items:center;margin:4px 0;padding:7px 8px;border-radius:10px;border:1px solid #3a4a6a;background:#16203a;color:#fff;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit}
#hkPan .hkrow i{width:34px;height:18px;border-radius:9px;background:#444c5e;position:relative;flex:none;transition:background .2s}
#hkPan .hkrow i:after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#ccc;transition:left .2s}
#hkPan .hkrow.on{border-color:#00ffc8;background:#0f2e2c}#hkPan .hkrow.on i{background:#00c896}#hkPan .hkrow.on i:after{left:18px;background:#fff}
#hkPan .hkhint{font-size:10px;color:#9fe;opacity:.9;margin-top:2px;text-align:center}

#hkPan .hkrow.dis{opacity:.45}
#dzBadge{position:fixed;z-index:57;left:50%;bottom:42px;transform:translateX(-50%);background:rgba(160,0,0,.85);color:#fff;font-weight:900;font-size:11px;letter-spacing:1px;padding:3px 10px;border-radius:10px;border:1px solid #ff5252;box-shadow:0 0 12px rgba(255,0,0,.6);pointer-events:none;animation:dzP 1.4s infinite}
@keyframes dzP{50%{box-shadow:0 0 22px rgba(255,0,0,.95)}}
#dangerBtn{position:fixed;z-index:20;left:50%;top:64px;transform:translateX(-50%);padding:5px 12px;border-radius:14px;font-weight:900;font-size:12px;color:#fff;font-family:inherit;cursor:pointer;background:linear-gradient(180deg,#4a0b0b,#220404);border:1.5px solid #ff5252;box-shadow:0 2px 6px rgba(0,0,0,.5)}
#dangerBtn.on{background:linear-gradient(180deg,#e00000,#7f0000);box-shadow:0 0 12px rgba(255,40,40,.85)}#dangerBtn b{color:#ffd451}

/* v36 username */
.unbox{position:fixed;inset:0;z-index:9000;background:rgba(5,8,20,.82);display:flex;align-items:center;justify-content:center;padding:12px;backdrop-filter:blur(3px)}
.unbox.hidden{display:none}
.uncard{width:min(380px,92vw);background:linear-gradient(160deg,#1b2350,#0e1330);border:2px solid #ffd451;border-radius:18px;padding:16px 16px 12px;text-align:center;box-shadow:0 10px 40px #000a;color:#fff}
.untitle{font-size:20px;font-weight:800;color:#ffd451;margin-bottom:10px}.untitle small{font-size:13px;color:#fff;opacity:.85;font-weight:600}
#unIn{width:100%;box-sizing:border-box;font-size:20px;padding:10px 12px;border-radius:12px;border:2px solid #ffffff44;background:#0008;color:#fff;text-align:center;outline:none;user-select:text;-webkit-user-select:text}
#unIn:focus{border-color:#ffd451}
.unhint{font-size:12px;opacity:.75;margin-top:6px}.unerr{min-height:18px;font-size:13px;color:#ff8a80;margin-top:4px}
.unbtns{display:flex;gap:8px;margin-top:6px}
.unb{flex:1;font-size:16px;font-weight:800;padding:11px 6px;border-radius:12px;border:0;cursor:pointer}
.unb.rnd{background:#2e3a7a;color:#fff;border:1px solid #ffffff44}.unb.ok{background:linear-gradient(#ffe066,#ff9d00);color:#2a1600}
.unskip{margin-top:10px;background:none;border:0;color:#fff;opacity:.6;font-size:13px;text-decoration:underline;cursor:pointer}
#pcName{cursor:pointer}#pcName::after{content:" ✏️";font-size:.75em}