/* Mobile shooter HUD: movement left, fire/aim right, vitals bottom-centre. */
body {
  --mobile-bottom:max(18px,env(safe-area-inset-bottom));
  --mobile-edge:max(16px,env(safe-area-inset-right));
  --mobile-action:clamp(54px,10vh,64px);
  --mobile-action-gap:16px;
  --mobile-fire:clamp(78px,15vh,94px);
  --mobile-fire-offset:144px;
  --mobile-fire-bottom:clamp(130px,33vh,190px);
  --mobile-stick:clamp(112px,28vh,140px);
  --mobile-utility-top:max(12px,env(safe-area-inset-top));
  --mobile-mode-height:44px;
}
body #touch-ui.shooter-controls #touch-btns {
  inset:0; width:auto; height:auto; transform:none; pointer-events:none;
}
body #touch-ui.shooter-controls .t-btn.dbtn {
  width:var(--mobile-action); height:var(--mobile-action); padding:0; margin:0;
  border-radius:50%; border:1px solid #d7e8ee88;
  background:#091a2448; color:#eef8fa; box-shadow:0 1px 6px #0003;
  text-shadow:0 1px 3px #000a;
}
body #touch-ui.shooter-controls .t-btn.dbtn :is(svg,.t-control-icon) {
  width:28px; height:28px; margin-top:-5px; filter:drop-shadow(0 1px 2px #0007);
}
body #touch-ui.shooter-controls .t-btn.dbtn .t-lab {
  bottom:8px; font:9px/1 'Share Tech Mono',monospace; letter-spacing:.02em;
}
body #touch-ui.shooter-controls #t-fire {
  left:auto; top:auto; right:calc(var(--mobile-edge) + var(--mobile-fire-offset));
  bottom:var(--mobile-fire-bottom); width:var(--mobile-fire); height:var(--mobile-fire);
  border:2px solid #f3faffb0; background:#0b1c263d;
}
body #touch-ui.shooter-controls #t-fire :is(svg,.t-control-icon) { width:40px; height:40px; }
body #touch-ui.shooter-controls #t-fire.has-gun-art { overflow:visible; }
body #touch-ui.shooter-controls #t-fire .t-fire-art {
  filter:drop-shadow(0 2px 3px #0009) drop-shadow(0 0 1px #d2f2f280);
}
body #touch-ui.shooter-controls #t-fire .t-fire-art-front .t-fire-art { filter:drop-shadow(2px 3px 3px #000b) drop-shadow(0 0 1px #d2f2f280); }
body #touch-ui.shooter-controls #t-fire.down .t-fire-visual { filter:drop-shadow(0 0 3px #b9f4ecaa); }
body #touch-ui.shooter-controls #t-fire:disabled .t-fire-visual { opacity:.45; filter:grayscale(.7); }
body #touch-ui.shooter-controls #t-fire.down { z-index:5; }
body #touch-ui.shooter-controls #t-reload {
  left:auto; top:auto; right:calc(var(--mobile-edge) + 2 * (var(--mobile-action) + var(--mobile-action-gap)));
  bottom:calc(var(--mobile-bottom) + 14px);
  width:var(--mobile-action); height:var(--mobile-action); border-radius:50%;
}
body #touch-ui.shooter-controls #t-reload .t-reload-icon,
body #touch-ui.shooter-controls #t-reload .t-reload-arrows { width:32px; height:32px; }
body #touch-ui.shooter-controls #t-reload .t-reload-icon > .t-control-icon { width:12px; height:19px; }
body #touch-ui.shooter-controls :is(#t-fire,#t-reload,#t-jump,#t-scope) .t-lab { display:none; }
body #touch-ui.shooter-controls :is(#t-fire,#t-reload,#t-jump,#t-scope) :is(svg,.t-control-icon) { margin-top:0; }
body #touch-ui.shooter-controls #t-reload.reloading .t-reload-arrows { animation:mobile-reload-spin 1s linear infinite; }
@keyframes mobile-reload-spin { to { transform:rotate(-360deg); } }
@media(prefers-reduced-motion:reduce) {
  body #touch-ui.shooter-controls #t-reload.reloading .t-reload-arrows { animation:none; }
}
body #touch-ui.shooter-controls #t-scope {
  left:auto; top:auto; right:calc(var(--mobile-edge) + 80px);
  bottom:calc(var(--mobile-fire-bottom) + var(--mobile-fire) + 10px); border-radius:50%;
}
body #touch-ui.shooter-controls #t-jump {
  left:auto; top:auto; right:calc(var(--mobile-edge) + var(--mobile-action) + var(--mobile-action-gap));
  bottom:calc(var(--mobile-bottom) + 14px);
}
body #touch-ui.shooter-controls #t-boost {
  left:auto; top:auto; right:var(--mobile-edge);
  bottom:calc(var(--mobile-bottom) + 14px); color:#ffdda1; border-color:#ffdda199;
  width:var(--mobile-action); height:var(--mobile-action); border-radius:50%;
}
body #touch-ui.shooter-controls .t-btn.down,
body #touch-ui.shooter-controls #t-scope.active {
  color:#fff; background:#d1e9ef42; border-color:#fff; box-shadow:0 0 10px #e0f6ff44;
}
body #touch-ui.shooter-controls #touch-stick {
  left:max(24px,env(safe-area-inset-left)); bottom:max(30px,env(safe-area-inset-bottom));
  width:var(--mobile-stick); height:var(--mobile-stick);
  border-color:#d5e7ee70; background:#091a2429; box-shadow:none;
}
body #touch-ui.shooter-controls #touch-knob {
  width:44px; height:44px; margin:-22px; background:#deedf337;
  border-color:#deedf39c; box-shadow:none;
}
body #touch-ui.shooter-controls #touch-modes {
  left:auto; right:var(--mobile-edge); bottom:auto;
  top:calc(var(--mobile-utility-top) + 48px);
  width:176px; gap:6px; transform:none;
}
body #touch-ui.shooter-controls .t-btn.modebtn {
  height:var(--mobile-mode-height); border-radius:8px; padding:3px; background:#091a245c;
  color:#e0edf1; border-color:#e0edf16b; font:10px/1.2 'Share Tech Mono',monospace;
}
body #touch-ui.shooter-controls .t-btn.modebtn { gap:5px; font-size:9px; }
body #touch-ui.shooter-controls .t-btn.modebtn .t-control-icon { flex:none; width:18px; height:18px; filter:none; }
body #touch-ui.shooter-controls .t-mode-label { white-space:nowrap; }
body #touch-ui.shooter-controls .t-btn.modebtn[aria-pressed=true] { border-color:#a3dedb; color:#a3dedb; }
body #touch-ui.shooter-controls #t-sp1 { left:auto; top:auto; right:var(--mobile-edge); bottom:calc(var(--mobile-bottom) + 168px); }
body #touch-ui.shooter-controls #t-sp2 { left:auto; top:auto; right:var(--mobile-edge); bottom:calc(var(--mobile-bottom) + 238px); }
body #touch-ui.shooter-controls .t-btn.auto { display:none; }
body.br-mode #touch-ui.shooter-controls #touch-top {
  top:auto; right:auto; left:calc(max(24px,env(safe-area-inset-left)) + var(--mobile-stick) + 12px);
  bottom:max(30px,env(safe-area-inset-bottom)); transform:none;
}
body.br-mode #touch-ui.shooter-controls .t-btn.topbtn { width:40px; height:40px; border-radius:50%; background:#091a2448; }
body:not(.br-mode) #touch-ui.shooter-controls #touch-top {
  top:var(--mobile-utility-top); right:var(--mobile-edge); transform:none;
}
body.br-mode #br-hud.br-touch .br-tools {
  top:var(--mobile-utility-top); right:var(--mobile-edge); display:flex; width:auto;
}
body.br-mode #br-hud.br-touch .br-tools .br-button { height:44px; min-height:44px; }
/* Equipment forms a right-side stack; the bottom row is reload/jump/boost. */
body.br-mode #br-hud.br-quick-gear.br-touch .br-supply-rack {
  left:auto; right:var(--mobile-edge); top:auto;
  bottom:calc(var(--mobile-bottom) + 160px); width:56px; max-width:none;
  max-height:calc(100dvh - var(--mobile-utility-top) - 51px - var(--mobile-mode-height) - var(--mobile-bottom) - 160px);
  padding:0; overflow-x:hidden; overflow-y:auto; scrollbar-width:none; pointer-events:auto;
  touch-action:pan-y; overscroll-behavior:contain;
}
body.br-mode #br-hud.br-quick-gear.br-touch .br-supply-rack::-webkit-scrollbar { display:none; }
body.br-mode #br-hud.br-quick-gear.br-touch #br-mounts { flex-direction:column; gap:6px; }
body.br-mode #br-hud.br-quick-gear.br-touch #br-mounts .br-button {
  flex-shrink:0; width:56px; height:54px; min-height:54px; padding:3px; border-radius:8px;
}
body.br-mode #br-hud.br-quick-gear.br-touch #br-mounts .br-quick-art { width:44px; height:42px; }
body.br-mode #br-hud.br-quick-gear.br-touch #br-mounts .br-button kbd { display:none; }
body.br-mode #br-hud.br-quick-gear.br-touch #br-mounts .br-button b {
  left:auto; right:2px; bottom:2px; max-width:none; font-size:9px; padding:1px 2px;
}
body.br-mode #br-hud.br-touch .br-zone {
  left:12px; right:auto; top:104px; width:174px; height:46px; padding:6px 10px;
  display:grid; grid-template-columns:1fr auto; grid-template-rows:20px 6px; gap:6px;
}
body.br-mode #br-hud.br-touch .br-zone :is(#br-sector,.br-zone-caption) { display:none; }
body.br-mode #br-hud.br-touch #br-zone-label { padding:0; align-self:center; font-size:9px; }
body.br-mode #br-hud.br-touch #br-zone { float:none; margin:0; font-size:18px; }
body.br-mode #br-hud.br-touch #br-belt { grid-column:1/-1; height:6px; margin:0; }
body.br-mode #br-hud.br-touch.br-quick-gear #br-ultimate,
body.br-mode #br-hud.br-touch #br-ultimate {
  left:auto; top:auto; right:var(--mobile-edge);
  bottom:calc(var(--mobile-bottom) + 92px); width:56px; height:56px; min-height:56px;
  padding:4px; gap:0; grid-template-columns:1fr; border-radius:50%; background:#091a245c;
}
body.br-mode #br-hud.br-touch #br-ultimate .survival-back-art { width:46px; height:46px; }
body.br-mode #br-hud.br-touch #br-ultimate :is(.survival-action-key,.survival-back-copy) { display:none; }
body.br-mode #br-hud.br-touch #br-ultimate .br-gear-timer { left:50%; bottom:0; transform:translateX(-50%); font-size:9px; }
body.br-mode #br-hud.br-touch #br-ultimate i {
  inset:-3px; width:auto; height:auto; border-radius:50%; pointer-events:none;
  background:conic-gradient(from -90deg,var(--mobile-back-ring,#94ece0) var(--charge,0%),#d7e8ee30 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  transition:none;
}
body.br-mode #br-hud.br-touch #br-ultimate.active { --mobile-back-ring:#ffce91; }
/* Values are drawn inside the bars; no panel, heading or exterior labels. */
body.br-mode #br-hud.br-touch .br-vitals,
body.touch #vitals,
body.touch:not(.hud-expanded) #vitals {
  position:fixed; top:auto; left:50%; right:auto; bottom:var(--mobile-bottom);
  width:clamp(132px,24vw,220px); padding:0; margin:0; transform:translateX(-50%);
  border:0; border-radius:0; background:none; box-shadow:none; pointer-events:none;
}
body.touch #vitals .vit-mobile-meter {
  position:relative; display:block; height:14px; margin:0; overflow:hidden;
  border:1px solid #d9eefb3d; border-radius:3px; background:#06151dd9;
  box-shadow:0 1px 3px #0003;
}
body.touch #vitals .vit-mobile-meter.hull { height:20px; }
body.touch #vitals .vit-mobile-meter > i { display:block; height:100%; background:#65be92; }
body.touch #vitals .vit-mobile-meter.shield > i { background:#569bb8; }
body.touch #vitals .vit-mobile-meter.energy { height:10px; }
body.touch #vitals .vit-mobile-meter.energy > i { background:#b18d56; }
body.touch #vitals .vit-mobile-meter > span {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:4px;
  color:#fff; font:11px/1 'Share Tech Mono',monospace; text-shadow:0 1px 2px #000,0 0 3px #000;
}
body.touch #vitals .vit-mobile-meter.energy > span { font-size:8px; }
body.touch #vitals.low .vit-mobile-meter.hull > i { background:#d16e65; }
.vit-mobile-bars { display:none; }
body.touch #vitals > :not(.vit-mobile-bars), body.touch #vitals::before { display:none; }
body.touch #vitals .vit-mobile-bars { display:flex; flex-direction:column; gap:4px; }
@media(max-width:620px) {
  body { --mobile-action:48px; }
}
@media(max-width:950px) and (max-height:600px), (max-width:620px) {
  body { --mobile-fire-offset:120px; }
}
@media(max-height:450px) {
  body { --mobile-mode-height:32px; }
  body.br-mode #br-hud.br-quick-gear.br-touch #br-mounts .br-button { height:48px; min-height:48px; }
}
