* { margin:0; padding:0; box-sizing:border-box; }
  html,body { width:100%; height:100%; overflow:hidden; background:#0a0e14; font-family:'Segoe UI',system-ui,sans-serif; touch-action:none; -webkit-user-select:none; user-select:none; }
  html,body { height:100vh; height:100dvh; }
  #c { display:block; width:100%; height:100%; }
  #hud { position:fixed; inset:0; pointer-events:none; z-index:10; }
  #crosshair { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:26px; height:26px; }
  #crosshair i { position:absolute; background:#fff; box-shadow:0 0 4px rgba(0,0,0,.8); border-radius:1px; }
  #crosshair i:nth-child(1){left:12px;top:0;width:2px;height:8px;} #crosshair i:nth-child(2){left:12px;bottom:0;width:2px;height:8px;}
  #crosshair i:nth-child(3){top:12px;left:0;width:8px;height:2px;} #crosshair i:nth-child(4){top:12px;right:0;width:8px;height:2px;}
  #crosshair::after{content:'';position:absolute;top:12px;left:12px;width:2px;height:2px;background:#ffce3a;border-radius:50%;}
  .panel { background:linear-gradient(180deg,rgba(10,16,26,.85),rgba(6,10,17,.78)); border:1px solid rgba(255,206,58,.28); border-radius:10px; padding:8px 14px; color:#e8f0fa; backdrop-filter:blur(4px); box-shadow:0 4px 18px rgba(0,0,0,.35); }
  #topbar { position:absolute; top:12px; left:50%; transform:translateX(-50%); display:flex; gap:10px; }
  #alive { font-size:22px; font-weight:900; color:#ffce3a; text-shadow:0 0 12px rgba(255,206,58,.4); }
  #zoneTimer { font-size:13px; color:#7dd3fc; font-weight:700; display:flex; align-items:center; }
  #killfeed { position:absolute; top:74px; right:12px; display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
  .kf { background:rgba(8,12,20,.78); border-left:3px solid #ff4757; color:#fff; font-size:12px; padding:5px 12px; border-radius:5px; animation:kfin .25s ease, fadeout 4.2s forwards; }
  .kf.me { border-left-color:#ffce3a; background:rgba(50,40,8,.82); }
  @keyframes kfin { from{transform:translateX(30px);opacity:0} }
  @keyframes fadeout { 0%,82%{opacity:1} 100%{opacity:0} }
  #bottombar { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:12px; align-items:flex-end; }
  #hpwrap { width:240px; }
  #hpbar { width:100%; height:16px; background:rgba(255,255,255,.1); border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,.15); }
  #hpfill { height:100%; width:100%; background:linear-gradient(90deg,#22c55e,#a3e635); transition:width .25s; border-radius:8px; }
  #hptext { font-size:11px; color:#cfe; margin-top:4px; text-align:center; letter-spacing:1px; font-weight:700; }
  #ammo { font-size:28px; font-weight:900; color:#fff; line-height:1; }
  #ammo small { font-size:13px; color:#7d8fa5; font-weight:600; }
  #weapon { font-size:11px; color:#ffce3a; text-align:center; letter-spacing:2px; font-weight:700; margin-top:3px; }
  #kills { position:absolute; bottom:14px; right:14px; font-size:13px; color:#cbd5e1; font-weight:700; letter-spacing:1px; }
  #kills b { color:#ff6b6b; font-size:24px; text-shadow:0 0 10px rgba(255,107,107,.5); }
  #zoneWarn { position:absolute; top:112px; left:50%; transform:translateX(-50%); color:#ff4757; font-weight:800; font-size:16px; display:none; text-shadow:0 0 12px rgba(255,0,0,.7); animation:pulse 1s infinite; }
  @keyframes pulse { 50%{opacity:.4} }
  #hitmark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); width:30px; height:30px; display:none; }
  #hitmark::before,#hitmark::after{content:'';position:absolute;background:#ff3b3b;box-shadow:0 0 6px #ff3b3b;}
  #hitmark::before{left:14px;top:0;width:2px;height:30px;} #hitmark::after{top:14px;left:0;width:30px;height:2px;}
  #dmgflash { position:fixed; inset:0; background:radial-gradient(ellipse at center, transparent 35%, rgba(200,0,0,.5)); opacity:0; transition:opacity .35s; }
  #lowhpVignette { position:fixed; inset:0; background:radial-gradient(ellipse at center, transparent 30%, rgba(140,0,0,.8)); opacity:0; pointer-events:none; }
  #dirDmgWrap { position:absolute; top:50%; left:50%; width:220px; height:220px; margin:-110px 0 0 -110px; pointer-events:none; }
  #dirDmg { position:absolute; top:0; left:50%; width:0; height:0; margin-left:-22px; opacity:0;
    border-left:22px solid transparent; border-right:22px solid transparent; border-bottom:36px solid rgba(255,40,40,.85);
    filter:drop-shadow(0 0 6px rgba(255,0,0,.7)); transform-origin:50% 110px; }
  #healmsg { position:absolute; top:150px; left:50%; transform:translateX(-50%); color:#22c55e; font-weight:800; font-size:18px; opacity:0; transition:opacity .3s; text-shadow:0 0 10px rgba(34,197,94,.7); }
  #minimap { position:absolute; top:12px; left:12px; width:140px; height:140px; border-radius:12px; border:2px solid rgba(255,206,58,.35); background:rgba(6,10,17,.7); }
  #compassWrap { position:absolute; top:12px; left:50%; transform:translateX(-50%); width:280px; height:26px; overflow:hidden; background:rgba(6,10,17,.55); border:1px solid rgba(255,255,255,.15); border-radius:6px; }
  #compassStrip { position:absolute; top:0; left:0; height:100%; white-space:nowrap; will-change:transform; }
  #compassStrip span { position:absolute; top:3px; font-size:12px; font-weight:800; color:#cfd8e0; transform:translateX(-50%); }
  #compassStrip span.n { color:#ffce3a; }
  #compassBlips { position:absolute; inset:0; }
  #compassBlips i { position:absolute; top:16px; width:2px; height:8px; background:#ff4757; transform:translateX(-50%); }
  #compassCenter { position:absolute; top:0; left:50%; width:2px; height:100%; background:rgba(255,206,58,.6); transform:translateX(-50%); }
  #sprintHint { position:absolute; bottom:90px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.4); font-size:11px; letter-spacing:1px; }
  .screen { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 25%, rgba(29,43,58,.72) 0%, rgba(5,8,13,.82) 75%); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); color:#fff; text-align:center; padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  @media (max-height:520px){
    .screen .logo { font-size:clamp(24px,6vw,44px) !important; }
    .screen .tagline { margin-top:2px !important; }
    .screen p { margin:10px 0 14px !important; font-size:11px !important; line-height:1.4 !important; }
    .screen .btn { padding:10px 34px !important; font-size:16px !important; }
  }
  .logo { font-size:clamp(38px,9vw,84px); font-weight:900; letter-spacing:6px; line-height:1; }
  .logo .z { color:#ffce3a; text-shadow:0 0 40px rgba(255,206,58,.6); }
  .logo .r { color:#fff; text-shadow:0 0 30px rgba(125,211,252,.5); }
  .tagline { color:#7dd3fc; letter-spacing:4px; font-size:12px; font-weight:700; margin-top:8px; }
  .screen p { color:#94a8bd; margin:22px 0 30px; max-width:460px; line-height:1.7; font-size:13px; }
  .btn { pointer-events:auto; background:linear-gradient(180deg,#ffdb6e,#ffb92e); color:#241a02; font-size:20px; font-weight:900; border:none; padding:17px 58px; border-radius:12px; cursor:pointer; letter-spacing:3px; box-shadow:0 6px 30px rgba(255,190,46,.4), inset 0 1px 0 rgba(255,255,255,.5); }
  .btn:active { transform:scale(.96); }
  .btn:disabled { filter:grayscale(1); opacity:.5; }
  #loadStatus { font-size:12px; color:#7dd3fc; margin-top:16px; letter-spacing:1px; }
  #iosAddHint { display:none; font-size:12px; color:#ffce3a; margin-top:14px; max-width:380px; line-height:1.6; background:rgba(255,206,58,.08); border:1px solid rgba(255,206,58,.3); border-radius:8px; padding:10px 14px; }
  #installBtn { display:none; margin-top:14px; background:rgba(125,211,252,.15); border:1px solid rgba(125,211,252,.5); color:#7dd3fc; font-size:12px; font-weight:700; padding:9px 16px; border-radius:8px; cursor:pointer; letter-spacing:.5px; }
  #settingsBtn { pointer-events:auto; margin-top:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#e8f0fa; font-size:13px; font-weight:700; padding:9px 18px; border-radius:8px; cursor:pointer; letter-spacing:.5px; }
  #settingsPanel { position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center; background:rgba(4,6,10,.65); pointer-events:auto; overflow-y:auto; padding:16px 0; }
  #settingsBox { width:min(460px,90vw); padding:18px 20px; max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #settingsHead { font-size:16px; font-weight:800; letter-spacing:1px; color:#ffce3a; display:flex; justify-content:space-between; margin-bottom:16px; }
  #settingsClose { cursor:pointer; color:#94a8bd; }
  .setRow { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  .setRow label { flex:0 0 130px; font-size:13px; color:#cbd5e1; }
  .setRow input[type="range"] { flex:1; }
  .setRow span { flex:0 0 50px; font-size:12px; color:#7dd3fc; text-align:right; }
  #customizeRow { flex-direction:column; align-items:stretch; gap:8px; }
  #customizeRow button, #doneCustomizeBtn, #resetLayoutBtn { background:rgba(255,206,58,.15); border:1px solid rgba(255,206,58,.4); color:#ffce3a; font-size:12px; font-weight:700; padding:9px; border-radius:8px; cursor:pointer; }
  #customizeHint { display:none; font-size:11px; color:#94a8bd; text-align:center; margin-bottom:10px; }
  #doneCustomizeBtn { width:100%; }
  .hud-dragging { outline:2px dashed rgba(255,206,58,.8) !important; }
  #gameover h1 { font-size:clamp(34px,8vw,64px); font-weight:900; letter-spacing:3px; color:#ffce3a; text-shadow:0 0 30px rgba(255,206,58,.5); }
  #gameover h1.lose { color:#ff4757; }
  #stats { font-size:16px; color:#dfe9f5; margin:14px 0 24px; }
  #mobileUI { position:fixed; inset:0; z-index:15; display:none; pointer-events:none; }
  #joyBase { position:absolute; bottom:90px; left:30px; width:126px; height:126px; border:2px solid rgba(255,255,255,.28); border-radius:50%; background:rgba(255,255,255,.06); pointer-events:auto; }
  #joyStick { position:absolute; top:37px; left:37px; width:52px; height:52px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffe9a8, #ffb92e); box-shadow:0 3px 10px rgba(0,0,0,.4); }
  #fireBtn { position:absolute; bottom:104px; right:32px; width:92px; height:92px; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(255,120,120,.85), rgba(200,30,45,.85)); border:2px solid rgba(255,255,255,.4); pointer-events:auto; color:#fff; font-weight:900; font-size:15px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(200,30,45,.4); }
  #jumpBtn { position:absolute; bottom:216px; right:54px; width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.32); pointer-events:auto; color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  #lookZone { position:absolute; top:0; right:0; width:55%; height:100%; pointer-events:auto; }
  #reloadBtn { position:absolute; bottom:216px; right:130px; width:52px; height:52px; border-radius:50%; background:rgba(125,211,252,.18); border:2px solid rgba(125,211,252,.4); pointer-events:auto; color:#7dd3fc; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; letter-spacing:1px; }
  #lootBtn { position:absolute; bottom:290px; right:60px; width:64px; height:64px; border-radius:14px; background:rgba(255,206,58,.18); border:2px solid rgba(255,206,58,.45); pointer-events:auto; color:#ffce3a; font-size:11px; font-weight:800; display:none; align-items:center; justify-content:center; letter-spacing:1px; }
  #lootBtn.show { display:flex; }
  #lootPrompt, #jumpPrompt, #vehiclePrompt { position:absolute; top:50%; left:50%; transform:translate(-50%,60px); font-size:14px; font-weight:800; color:#ffce3a; display:none; white-space:nowrap; }
  #vehiclePrompt { color:#7dd3fc; transform:translate(-50%,84px); }
  #jumpPrompt { color:#7dd3fc; font-size:18px; transform:translate(-50%,120px); animation:pulse 1s infinite; }
  #reloadBtn:active, #jumpBtn:active, #fireBtn:active { filter:brightness(1.4); }
  #sprintBtn { position:absolute; bottom:100px; left:170px; width:64px; height:64px; border-radius:50%; background:rgba(255,206,58,.14); border:2px solid rgba(255,206,58,.4); pointer-events:auto; color:#ffce3a; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; letter-spacing:1px; }
  #sprintBtn.on { background:rgba(255,206,58,.55); filter:brightness(1.3); }
  #bagBtn { position:absolute; bottom:355px; right:70px; width:46px; height:46px; border-radius:12px; background:rgba(180,150,90,.2); border:2px solid rgba(200,170,110,.45); pointer-events:auto; display:flex; align-items:center; justify-content:center; font-size:20px; }
  #adsBtn { position:absolute; bottom:104px; right:140px; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.3); pointer-events:auto; color:#e8f0fa; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
  #vehicleBtn { position:absolute; bottom:290px; right:150px; width:52px; height:52px; border-radius:12px; background:rgba(125,211,252,.14); border:2px solid rgba(125,211,252,.4); pointer-events:auto; font-size:22px; display:none; align-items:center; justify-content:center; }
  #vehicleBtn.show { display:flex; }
  #grenadeBtn, #smokeBtn { position:absolute; width:46px; height:46px; border-radius:50%; pointer-events:auto; font-size:20px; display:flex; align-items:center; justify-content:center; border:2px solid rgba(255,255,255,.3); }
  #grenadeBtn { bottom:355px; right:210px; background:rgba(120,90,60,.25); }
  #smokeBtn { bottom:355px; right:265px; background:rgba(150,150,150,.2); }
  #adsBtn.on { background:rgba(255,60,60,.3); border-color:#ff4757; }
  #reddot { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; display:none; }
  #reddotRing { position:absolute; inset:0; border:2px solid rgba(255,60,60,.55); border-radius:50%; box-shadow:0 0 10px rgba(255,40,40,.35); }
  #reddotDot { position:absolute; top:50%; left:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:#ff2c2c; border-radius:50%; box-shadow:0 0 8px 2px rgba(255,40,40,.9); }
  #vignette { position:fixed; inset:0; pointer-events:none; z-index:11; box-shadow: inset 0 0 160px 40px rgba(0,0,0,.55); mix-blend-mode:multiply; }
  #backpackPanel { position:fixed; inset:0; z-index:30; display:none; align-items:center; justify-content:center; background:rgba(4,6,10,.55); pointer-events:auto; }
  #backpackBox { width:min(520px,88vw); padding:18px 20px; }
  #backpackHead { font-size:16px; font-weight:800; letter-spacing:1px; color:#ffce3a; display:flex; justify-content:space-between; margin-bottom:12px; }
  #backpackClose { cursor:pointer; color:#94a8bd; }
  #backpackGrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .bpSlot { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:10px; min-height:70px; }
  .bpSlot.empty { display:flex; align-items:center; justify-content:center; color:#5a6b80; font-size:12px; }
  .bpSlot.equipped { border-color:#ffce3a; background:rgba(255,206,58,.08); }
  .bpName { font-weight:800; color:#e8f0fa; font-size:14px; }
  .bpStats { font-size:11px; color:#94a8bd; margin:4px 0 8px; }
  .bpBtns { display:flex; gap:6px; }
  .bpBtns button { flex:1; padding:6px; border:none; border-radius:6px; font-weight:800; font-size:11px; cursor:pointer; }
  .bpBtns button[data-act="equip"] { background:#ffce3a; color:#241a02; }
  .bpBtns button[data-act="drop"] { background:rgba(255,255,255,.12); color:#e8f0fa; }
  #rotateOverlay { position:fixed; inset:0; z-index:999; display:none; flex-direction:column; align-items:center; justify-content:center; background:#05080d; color:#fff; text-align:center; gap:14px; }
  #rotateOverlay .ic { font-size:54px; animation:rot 1.6s ease-in-out infinite; }
  @keyframes rot { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(90deg)} }
  @media (orientation: portrait) and (max-width: 1100px) { #rotateOverlay { display:flex; } }