*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;font-family:system-ui,Segoe UI,Arial,sans-serif;}
html,body{width:100%;height:100%;overflow:hidden;background:#0b0e13;color:#fff;}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;}
.hidden{display:none!important;}
.screen{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
button{cursor:pointer;font-family:inherit;}
input{font-family:inherit;}

/* rotate */
#rotate{position:fixed;inset:0;background:#0b0e13;z-index:200;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;text-align:center;}
#rotate .ph{width:70px;height:110px;border:3px solid #ff9a3c;border-radius:10px;animation:rot 1.6s ease-in-out infinite;}
@keyframes rot{0%,40%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (orientation:portrait){#rotate{display:flex;}}

/* AUTH */
#auth{background:radial-gradient(130% 120% at 50% 0%,#26406e 0%,#0b0e13 68%);}
.logo{font-size:46px;font-weight:900;letter-spacing:3px;color:#fff;text-shadow:0 3px 0 #7a4a00;}
.logo span{color:#ff9a3c;}
.tag{letter-spacing:5px;font-size:12px;opacity:.7;margin-top:-12px;}
.card{background:rgba(10,16,26,.85);border:1px solid #2a3a55;border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;width:290px;box-shadow:0 12px 40px rgba(0,0,0,.5);}
.tabs{display:flex;gap:6px;margin-bottom:4px;}
.tab{flex:1;padding:8px;border:none;border-radius:8px;background:#1a2438;color:#9fb2d0;font-weight:700;}
.tab.on{background:#ff9a3c;color:#3a2200;}
.card input{padding:12px 14px;border-radius:9px;border:2px solid #2a3a55;background:#0f1826;color:#fff;font-size:15px;}
.card input:focus{outline:none;border-color:#ff9a3c;}
.primary{padding:13px;border:none;border-radius:9px;font-size:16px;font-weight:800;letter-spacing:1px;background:linear-gradient(#ffb347,#ff8a00);color:#3a2200;box-shadow:0 4px 0 #a85e00;}
.primary:active{transform:translateY(3px);box-shadow:0 1px 0 #a85e00;}
.ghost{padding:11px 18px;border:2px solid #43546f;border-radius:9px;background:transparent;color:#cfe0f5;font-weight:700;}
.err{color:#ff7a7a;font-size:12px;min-height:14px;text-align:center;}
.disclaimer{font-size:11px;opacity:.55;max-width:300px;text-align:center;}

/* LOBBY */
#lobby{justify-content:flex-start;background:transparent;}
.topbar{position:fixed;top:10px;left:10px;right:10px;display:flex;align-items:center;gap:10px;z-index:31;}
.pcard{display:flex;align-items:center;gap:10px;background:rgba(10,16,26,.6);padding:6px 12px 6px 6px;border-radius:30px;border:1px solid #2a3a55;}
.pav{width:40px;height:40px;border-radius:50%;background:linear-gradient(#ffb347,#ff6a00);}
.pname{font-weight:800;font-size:15px;}
.pstats{font-size:11px;opacity:.7;}
.chip{margin-left:auto;background:rgba(10,16,26,.6);border:1px solid #2a3a55;color:#cfe0f5;padding:9px 14px;border-radius:22px;font-weight:700;position:relative;}
.chip:nth-of-type(2){margin-left:0;}
.badge{position:absolute;top:-6px;right:-6px;background:#ff3b3b;color:#fff;border-radius:10px;font-size:10px;padding:1px 6px;}
.lobbyCenter{position:fixed;bottom:120px;left:0;right:0;text-align:center;}
.modeTag{display:inline-block;background:rgba(0,0,0,.4);border:1px solid #2a3a55;padding:6px 16px;border-radius:8px;letter-spacing:2px;font-size:12px;color:#9fe0ff;}
.playRow{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:31;}
.partyStrip{display:flex;gap:6px;}
.partyStrip .pm{width:34px;height:34px;border-radius:50%;background:#2ea36b;border:2px solid #fff;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:800;}
.playbtn{width:180px;height:64px;border:none;border-radius:12px;font-size:24px;font-weight:900;letter-spacing:2px;background:linear-gradient(#ffce54,#ff8a00);color:#3a2200;box-shadow:0 6px 0 #a85e00;}
.playbtn:active{transform:translateY(4px);box-shadow:0 2px 0 #a85e00;}

/* DRAWERS */
.drawer{position:fixed;top:0;right:0;bottom:0;width:320px;max-width:88vw;background:rgba(10,15,24,.96);border-left:1px solid #2a3a55;z-index:34;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:-8px 0 30px rgba(0,0,0,.5);}
.drawerHead{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:17px;}
.x{background:none;border:none;color:#9fb2d0;font-size:18px;}
.addRow{display:flex;gap:6px;}
.addRow input{flex:1;padding:9px 12px;border-radius:8px;border:2px solid #2a3a55;background:#0f1826;color:#fff;}
.addRow button{padding:0 16px;border:none;border-radius:8px;background:#ff9a3c;color:#3a2200;font-weight:800;}
.friendList{overflow-y:auto;display:flex;flex-direction:column;gap:6px;flex:1;}
.frow{display:flex;align-items:center;gap:10px;background:#141d2c;border-radius:9px;padding:8px 10px;}
.dot{width:9px;height:9px;border-radius:50%;background:#555;}
.dot.lobby{background:#5dff8f;}.dot.match{background:#ffce54;}
.frow .fn{font-weight:700;}.frow .fs{font-size:10px;opacity:.6;}
.frow .inv{margin-left:auto;background:#2ea36b;border:none;color:#fff;border-radius:7px;padding:6px 10px;font-weight:700;font-size:12px;}
.frow .rm{background:none;border:none;color:#ff7a7a;font-size:14px;}
.reqWrap{display:flex;flex-direction:column;gap:6px;}
.reqRow{display:flex;align-items:center;gap:8px;background:#20283a;border-radius:9px;padding:7px 10px;font-size:13px;}
.reqRow .ok{margin-left:auto;background:#2ea36b;border:none;color:#fff;border-radius:6px;padding:5px 10px;}
.reqRow .no{background:none;border:1px solid #556;color:#cfe0f5;border-radius:6px;padding:5px 10px;}
.setRow{display:flex;justify-content:space-between;align-items:center;background:#141d2c;padding:12px;border-radius:9px;font-size:14px;}
.ftoast,.gtoast{font-size:12px;color:#9fe0ff;text-align:center;min-height:16px;}
.gtoast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.7);padding:8px 16px;border-radius:8px;z-index:60;}

/* MATCHMAKING */
#mm{background:radial-gradient(130% 120% at 50% 0%,#1c2c4e 0%,#0b0e13 70%);}
.mmSpin{width:70px;height:70px;border:6px solid #23324d;border-top-color:#ff9a3c;border-radius:50%;animation:spin 0.9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.mmTitle{font-size:24px;font-weight:800;}
.mmSub{opacity:.8;}

/* HUD */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;}
#mini{position:fixed;left:10px;top:10px;border-radius:8px;border:2px solid rgba(255,255,255,.3);background:rgba(0,0,0,.35);}
#alive{position:fixed;top:12px;left:154px;font-size:13px;text-shadow:0 1px 3px #000;}#alive b{color:#ff9a3c;font-size:17px;}
#zoneinfo{position:fixed;top:12px;left:50%;transform:translateX(-50%);font-size:13px;text-shadow:0 1px 3px #000;text-align:center;}
#feed{position:fixed;top:40px;right:12px;text-align:right;font-size:12px;line-height:1.6;text-shadow:0 1px 2px #000;max-width:48vw;}
#feed .hs{color:#ff5a5a;font-weight:700;}
#board{position:fixed;top:150px;left:10px;font-size:11px;line-height:1.5;background:rgba(0,0,0,.3);padding:6px 8px;border-radius:6px;}
#wpn{position:fixed;top:12px;right:12px;text-align:right;text-shadow:0 1px 3px #000;}
#wpn .ammo{font-size:26px;font-weight:800;}#wpn .ammo small{font-size:14px;opacity:.7;}#wpn .wn{font-size:12px;letter-spacing:1px;opacity:.85;}
#hpwrap{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:38vw;max-width:340px;}
#hpbar{height:14px;border-radius:8px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.3);overflow:hidden;}
#hpfill{height:100%;width:100%;background:linear-gradient(#5dff8f,#1fbf5a);transition:width .12s;}
#hptxt{font-size:11px;text-align:center;margin-top:2px;}
#crosshair{position:fixed;left:50%;top:44%;width:26px;height:26px;transform:translate(-50%,-50%);}
#crosshair:before,#crosshair:after{content:"";position:absolute;background:rgba(255,255,255,.9);box-shadow:0 0 3px #000;}
#crosshair:before{left:12px;top:0;width:2px;height:26px;}#crosshair:after{top:12px;left:0;height:2px;width:26px;}
#hitmark{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%) scale(0);color:#fff;font-size:34px;z-index:23;opacity:0;text-shadow:0 0 4px #000;}
#pickPrompt{position:fixed;left:50%;top:56%;transform:translateX(-50%);background:rgba(0,0,0,.55);padding:8px 16px;border-radius:8px;font-size:14px;}
#dmgv{position:fixed;inset:0;z-index:19;pointer-events:none;box-shadow:inset 0 0 120px rgba(255,0,0,0);transition:box-shadow .2s;}
.ctl{position:fixed;z-index:22;pointer-events:auto;}
#joy{left:20px;bottom:70px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.22);}
#stick{position:absolute;left:40px;top:40px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.32);}
.rbtn{border-radius:50%;background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;text-align:center;}
#fire{right:24px;bottom:70px;width:96px;height:96px;background:rgba(255,60,60,.35);border-color:#ff8080;}
#jump{right:150px;bottom:150px;width:64px;height:64px;}
#crouch{right:150px;bottom:74px;width:60px;height:60px;}
#reload{right:40px;bottom:180px;width:60px;height:60px;}
#pick{right:130px;bottom:16px;width:56px;height:56px;background:rgba(94,255,143,.25);border-color:#5dff8f;}

/* OVERLAYS */
.overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:rgba(10,5,5,.6);}
.overlay h2{font-size:34px;font-weight:900;letter-spacing:2px;}
#dead h2{color:#ff5a5a;}#result h2{color:#ffce54;text-shadow:0 0 20px #ff9a00;}
.killer{opacity:.85;}.place{font-size:20px;color:#ff9a3c;font-weight:800;}
.resboard{background:rgba(0,0,0,.4);padding:12px 20px;border-radius:10px;font-size:14px;line-height:1.7;}