*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
body{
  background:#07070c;color:#f2f2f7;
  font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  user-select:none;-webkit-user-select:none;
}
.hidden{display:none !important}

.game-root{position:fixed;inset:0;display:flex;flex-direction:column;height:100%;
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(255,46,77,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(90,140,255,.08), transparent 60%),
    #07070c;
}

/* ================= HUD ================= */
.hud{
  flex:0 0 auto;padding:8px 10px 6px;
  background:linear-gradient(180deg, rgba(12,12,20,.98), rgba(12,12,20,.72));
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;gap:6px;
}
.hud-row{display:flex;align-items:center;gap:8px;min-width:0}
.hud-row.sub{
  gap:8px;font-size:11.5px;color:#8d8da4;letter-spacing:.2px;
  padding-inline:2px;white-space:nowrap;overflow:hidden;
}
.hud-row.sub b{color:#e9e9f2;font-weight:700}
.sepdot{width:3px;height:3px;border-radius:50%;background:#3d3d52;flex:0 0 auto}
.chip{
  display:flex;align-items:center;gap:5px;flex:0 0 auto;
  padding:5px 9px;border-radius:11px;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);
  color:#ececf5;line-height:1;
}
.chip .k{font-size:10px;color:#8d8da4;font-weight:500}
.chip.lvl b{color:#ffd166;font-size:14px}
.chip.ammo{font-variant-numeric:tabular-nums;color:#ffd166}
.chip.ammo .sep{color:#5a5a72;margin:0 1px}
.chip.ammo span:last-child{color:#7a7a92;font-weight:500}
.hpwrap{flex:1 1 auto;display:flex;align-items:center;gap:6px;min-width:44px}
.hpbar{flex:1 1 auto;height:12px;border-radius:8px;background:rgba(255,255,255,.08);
  overflow:hidden;border:1px solid rgba(255,255,255,.08);position:relative}
.hpfill{height:100%;width:100%;border-radius:7px;
  background:linear-gradient(90deg,#28d17c,#8be04a);
  transition:width .16s ease-out, background .3s}
.hpfill.mid{background:linear-gradient(90deg,#f7b731,#ffd166)}
.hpfill.low{background:linear-gradient(90deg,#ff2e4d,#ff6b81)}
.hpnum{font-size:11.5px;font-weight:700;color:#c7c7d6;min-width:26px;text-align:center;
  font-variant-numeric:tabular-nums}
.icobtn{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#dcdce8;
  cursor:pointer;transition:transform .12s, background .15s;
}
.icobtn:active{transform:scale(.93);background:rgba(255,255,255,.13)}
.combo{
  margin-inline-start:auto;color:#0a0a10;background:linear-gradient(90deg,#ffd166,#ff9f1c);
  padding:2px 7px;border-radius:8px;font-weight:800;font-size:11px;
}

/* ================= STAGE ================= */
.stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#08080e}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

.banner{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  padding:7px 18px;border-radius:12px;font-weight:800;font-size:14px;
  background:rgba(255,46,77,.14);border:1px solid rgba(255,46,77,.45);color:#ffdce2;
  backdrop-filter:blur(8px);pointer-events:none;z-index:5;white-space:nowrap;
  animation:bannerIn .3s ease-out;
}
@keyframes bannerIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

.hint{
  position:absolute;inset-inline:0;bottom:10px;text-align:center;font-size:11.5px;
  color:rgba(255,255,255,.32);pointer-events:none;letter-spacing:.3px;
}

/* ================= SCREENS ================= */
.screen{
  position:absolute;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:12px;overflow-y:auto;overflow-x:hidden;
  background:radial-gradient(600px 400px at 50% 20%, rgba(255,46,77,.12), transparent 70%),
             rgba(6,6,11,.96);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:fadeIn .18s ease-out;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.panel{
  width:100%;max-width:380px;margin:auto;flex:0 0 auto;
  background:linear-gradient(170deg, rgba(24,24,36,.97), rgba(14,14,22,.99));
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;padding:20px 16px 16px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:12px;
}
.panel.tall{max-height:none}
.panel.small{max-width:320px;text-align:center;align-items:stretch}

.logo{text-align:center;margin-bottom:2px}
.logo-en{
  font-size:26px;font-weight:900;letter-spacing:1.5px;line-height:1;color:#fff;
  text-shadow:0 0 26px rgba(255,46,77,.55);
}
.logo-en span{color:#ff2e4d}
.logo-ar{font-size:12px;color:#8d8da4;margin-top:6px;letter-spacing:.5px}

.cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:52px;border:none;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,#ff3a57,#c9122f);
  box-shadow:0 8px 22px -10px rgba(255,46,77,.9), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .12s ease, filter .15s;
}
.cta:active{transform:scale(.97);filter:brightness(1.1)}
.cta.sm{min-height:44px;font-size:14px;width:auto;padding:0 16px;margin:8px auto 0}

.ghost{
  width:100%;min-height:46px;border-radius:13px;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:700;color:#c9c9db;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  transition:transform .12s, background .15s;
}
.ghost:active{transform:scale(.97);background:rgba(255,255,255,.11)}

.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mbtn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:48px;border-radius:13px;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:700;color:#dcdce8;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  transition:transform .12s, background .15s;
}
.mbtn:active{transform:scale(.96);background:rgba(255,255,255,.12)}
.mbtn svg{color:#ff5a72;flex:0 0 auto}

.statrow{display:flex;gap:8px}
.statrow>div{
  flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:8px 6px;text-align:center;
}
.statrow small{display:block;font-size:10.5px;color:#82829a;margin-bottom:2px}
.statrow b{font-size:17px;font-weight:800;color:#ffd166;font-variant-numeric:tabular-nums}

.note{font-size:11px;color:#6f6f88;text-align:center;margin:0;line-height:1.6}
.note.tiny{font-size:10.5px;margin-top:2px}

.phead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.phead h2{margin:0;font-size:17px;font-weight:800;color:#fff}
.xbtn{
  width:36px;height:36px;border-radius:11px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:#c9c9db;font-size:15px;cursor:pointer;
  display:grid;place-items:center;flex:0 0 auto;
}
.xbtn:active{transform:scale(.93)}
.sub-note{font-size:11.5px;color:#82829a;margin:0;line-height:1.6}
.sect-title{font-size:12.5px;color:#a6a6bd;margin:2px 0 0;font-weight:700}
.title{font-size:20px;font-weight:900;margin:0;color:#fff}
.tag{
  align-self:center;font-size:11px;font-weight:800;letter-spacing:.4px;
  padding:4px 12px;border-radius:20px;color:#9dffcf;
  background:rgba(40,209,124,.12);border:1px solid rgba(40,209,124,.35);
}
.tag.danger{color:#ffb3bf;background:rgba(255,46,77,.12);border-color:rgba(255,46,77,.4)}

/* weapons */
.weapon-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow-y:auto;max-height:44vh;padding:2px}
.wcard{
  text-align:start;padding:9px 10px;border-radius:13px;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  color:#dcdce8;transition:border-color .15s, background .15s, transform .12s;
}
.wcard:active{transform:scale(.97)}
.wcard.on{border-color:rgba(255,46,77,.75);background:rgba(255,46,77,.13);
  box-shadow:0 0 0 1px rgba(255,46,77,.28), 0 8px 20px -14px rgba(255,46,77,.9)}
.wcard .wn{font-size:13px;font-weight:800;color:#fff;display:block}
.wcard .wt{font-size:10px;color:#82829a;display:block;margin-top:1px}
.wcard .wstats{display:flex;gap:6px;margin-top:6px;font-size:9.5px;color:#9a9ab0}
.wcard .wstats i{font-style:normal;color:#ffd166;font-weight:700}

.skin-row{display:flex;gap:8px}
.skin{
  flex:1;height:42px;border-radius:12px;cursor:pointer;font-family:inherit;
  font-size:11.5px;font-weight:700;color:#dcdce8;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.skin .sw{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.skin.on{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.14)}

/* cheats */
.cheat-list{display:flex;flex-direction:column;gap:8px}
.cheat{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:13px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.cheat .ctxt{min-width:0}
.cheat .cname{font-size:13px;font-weight:800;color:#fff;display:block}
.cheat .cdesc{font-size:10.5px;color:#82829a;display:block;margin-top:1px}
.switch{
  flex:0 0 auto;width:50px;height:29px;border-radius:20px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);position:relative;cursor:pointer;transition:background .18s;
}
.switch::after{
  content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#c9c9db;transition:transform .18s ease, background .18s;
}
.switch.on{background:rgba(255,46,77,.85);border-color:rgba(255,46,77,.9)}
.switch.on::after{transform:translateX(21px);background:#fff}
.warn{
  font-size:11px;color:#ffb3bf;background:rgba(255,46,77,.1);
  border:1px solid rgba(255,46,77,.28);border-radius:11px;padding:8px 10px;line-height:1.5;
}
.warn.off{display:none}

.helplist{margin:0;padding-inline-start:16px;font-size:12.5px;color:#b9b9cd;line-height:1.85}
.helplist b{color:#ffd166;font-weight:700}

/* leaderboard */
.boardlist{display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:46vh;min-height:60px}
.brow{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-size:13px;
}
.brow.you{border-color:rgba(255,209,102,.55);background:rgba(255,209,102,.1)}
.brow .rk{width:22px;color:#82829a;font-weight:800;font-size:12px}
.brow .hd{flex:1;color:#e6e6f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .sc{color:#ffd166;font-weight:800;font-variant-numeric:tabular-nums}
.muted{color:#82829a;font-size:12.5px;text-align:center;line-height:1.7;margin:8px 0}

/* ================= CONTROLS ================= */
.controls{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:8px 14px 12px;
  background:linear-gradient(180deg, rgba(10,10,16,.6), rgba(10,10,16,.98));
  border-top:1px solid rgba(255,255,255,.06);
  touch-action:none;
}
.pad{position:relative;width:138px;height:138px;flex:0 0 auto}
.padbtn{
  position:absolute;width:46px;height:46px;border-radius:14px;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  color:#d6d6e4;transition:transform .09s, background .12s, color .12s;
  touch-action:none;
}
.padbtn.up{left:46px;top:0}
.padbtn.left{left:0;top:46px}
.padbtn.right{left:92px;top:46px}
.padbtn.down{left:46px;top:92px}
.padbtn.on{background:rgba(255,46,77,.42);border-color:rgba(255,90,114,.85);color:#fff;transform:scale(.93)}

.actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.side{display:flex;flex-direction:column;gap:8px}
.rbtn{
  width:58px;height:44px;border-radius:12px;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#d6d6e4;
  transition:transform .09s, background .12s;touch-action:none;
}
.rbtn span{font-size:9.5px;font-weight:700;line-height:1}
.rbtn:active,.rbtn.on{background:rgba(255,255,255,.16);transform:scale(.94);color:#fff}
.rbtn.flash{border-color:rgba(255,209,102,.9);color:#ffd166}

.firebtn{
  width:86px;height:86px;border-radius:50%;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  color:#fff;touch-action:none;
  background:radial-gradient(circle at 35% 28%, #ff5a72, #c9122f 70%, #8d0a22);
  border:2px solid rgba(255,255,255,.22);
  box-shadow:0 10px 26px -12px rgba(255,46,77,.95), inset 0 -4px 10px rgba(0,0,0,.38);
  transition:transform .09s, filter .12s;
}
.firebtn span{font-size:10.5px;font-weight:800;letter-spacing:.3px}
.firebtn.on{transform:scale(.93);filter:brightness(1.18)}

@media (max-height:560px){
  .pad{width:118px;height:118px}
  .padbtn{width:40px;height:40px;border-radius:12px}
  .padbtn.up{left:39px}.padbtn.left{top:39px}.padbtn.right{left:78px;top:39px}.padbtn.down{left:39px;top:78px}
  .firebtn{width:72px;height:72px}
  .rbtn{height:40px;width:54px}
  .hud-row.sub{display:none}
}
@media (max-width:360px){
  .pad{width:126px;height:126px}
  .padbtn{width:42px;height:42px}
  .padbtn.up{left:42px}.padbtn.left{top:42px}.padbtn.right{left:84px;top:42px}.padbtn.down{left:42px;top:84px}
  .firebtn{width:78px;height:78px}
}

/* keep menus compact so the primary action is always reachable */
@media (max-height:650px){
  .screen{padding:8px}
  .panel{padding:14px 12px 12px;gap:9px;border-radius:16px}
  .logo-en{font-size:22px}
  .logo-ar{font-size:11px;margin-top:4px}
  .statrow>div{padding:6px 4px}
  .statrow b{font-size:15px}
  .cta{min-height:48px;font-size:15px}
  .mbtn{min-height:44px;font-size:12.5px}
  .menu-grid{gap:6px}
  .ghost{min-height:42px;font-size:13px}
  .note{font-size:10.5px}
  .weapon-grid{max-height:38vh}
  .boardlist{max-height:40vh}
}