#touchControls[hidden] {display:none;}
/* Touch geometry is in CSS pixels, inside both landscape notch safe areas. */
#touchControls {
  --touch-left:max(18px,env(safe-area-inset-left));
  --touch-right:max(18px,env(safe-area-inset-right));
  --touch-bottom:max(22px,env(safe-area-inset-bottom));
  --touch-top:max(12px,env(safe-area-inset-top));
  position:fixed;inset:0;z-index:90;pointer-events:none;user-select:none;-webkit-user-select:none;
  color:#fff;-webkit-touch-callout:none;
}
#touchControls *, #touchControls *::before {box-sizing:border-box;}
#touchControls .touch-look {position:absolute;inset:0;pointer-events:auto;touch-action:none;}
#touchControls .touch-stick {
  position:absolute;left:calc(var(--touch-left) + 16px);bottom:calc(var(--touch-bottom) + 24px);
  width:112px;height:112px;border:1.5px solid #ffffff80;border-radius:50%;
  background:#10182018;pointer-events:auto;touch-action:none;display:grid;place-items:center;
}
#touchControls .touch-stick i {position:absolute;inset:16px;border:1px solid #ffffff24;border-radius:50%;}
#touchControls .touch-stick span {width:44px;height:44px;background:#ffffff14;border:1.5px solid #ffffffb3;border-radius:50%;pointer-events:none;}
#touchControls .touch-stick small {display:none;}
#touchControls .touch-stick.is-sprinting {border-top:3px solid #fff;background:#ffffff18;}
#touchControls .touch-actions {position:absolute;inset:0;pointer-events:none;}
#touchControls .touch-button {
  -webkit-appearance:none;appearance:none;position:absolute;width:50px;height:50px;min-width:44px;min-height:44px;
  margin:0;padding:10px;border:1px solid #ffffff78;border-radius:50%;color:#fffffff2;
  background:#10182026;box-shadow:0 1px 2px #0003;font:500 9px system-ui;
  pointer-events:auto;touch-action:none;display:grid;place-items:center;cursor:pointer;
}
#touchControls .touch-button svg {width:25px;height:25px;pointer-events:none;filter:drop-shadow(0 1px 2px #0008);}
#touchControls .touch-label {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
#touchControls .touch-badge {position:absolute;right:-2px;bottom:-2px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;display:grid;place-items:center;background:#1018209e;color:#fff;font:600 9px system-ui;}
#touchControls .touch-jump .touch-badge {background:#27854f;}
#touchControls .touch-crouch .touch-badge {background:#b6493d;}
#touchControls .touch-reload .touch-badge {background:#267bb4;}
#touchControls .touch-switch .touch-badge {background:#b48b27;}
#touchControls .touch-button.is-held, #touchControls .touch-button[aria-pressed=true], #touchControls .touch-button.is-selected {
  background:#ffffff32;border-color:#fff;box-shadow:0 0 0 3px #ffffff12;
}
#touchControls .touch-button:disabled {opacity:.3;pointer-events:none;}
#touchControls .touch-button:focus-visible {outline:2px solid white;outline-offset:4px;}
#touchControls .touch-fire {right:calc(var(--touch-right) + 22px);bottom:calc(var(--touch-bottom) + 90px);width:76px;height:76px;border:1.5px solid #ffffffc0;background:#10182012;}
#touchControls .touch-fire svg {width:34px;height:34px;}
#touchControls .touch-aim {left:calc(var(--touch-left) + 156px);bottom:calc(var(--touch-bottom) + 104px);width:58px;height:58px;}
#touchControls .touch-jump {right:var(--touch-right);bottom:calc(var(--touch-bottom) + 28px);width:56px;height:56px;}
#touchControls .touch-crouch {right:calc(var(--touch-right) + 66px);bottom:calc(var(--touch-bottom) + 28px);width:54px;height:54px;}
#touchControls .touch-reload {right:calc(var(--touch-right) + 128px);bottom:calc(var(--touch-bottom) + 34px);}
#touchControls .touch-use {right:calc(var(--touch-right) + 132px);bottom:calc(var(--touch-bottom) + 99px);}
#touchControls .touch-sprint {left:calc(var(--touch-left) + 48px);bottom:calc(var(--touch-bottom) + 150px);}
#touchControls .touch-menu {right:var(--touch-right);top:var(--touch-top);width:44px;height:44px;border-color:transparent;box-shadow:none;}
#touchControls .touch-more {right:calc(var(--touch-right) + 56px);top:var(--touch-top);width:44px;height:44px;}
#touchControls .touch-equipment {
  position:absolute;right:calc(var(--touch-right) + 112px);top:var(--touch-top);
  padding:10px;display:flex;gap:10px;max-width:calc(100% - var(--touch-left) - var(--touch-right) - 112px);
  border:1px solid #ffffff40;border-radius:18px;background:#101820cc;pointer-events:auto;touch-action:none;
}
#touchControls .touch-equipment[hidden] {display:none;}
#touchControls .touch-equipment .touch-button {position:relative;flex-shrink:0;width:46px;height:46px;padding:8px;}
#touchControls .touch-equipment .touch-label {position:static;width:auto;height:auto;clip-path:none;overflow:visible;font-size:8px;}
#touchControls .touch-equipment .touch-button svg {width:20px;height:20px;}
@media (max-width:740px) {
  #touchControls .touch-equipment {flex-wrap:wrap;width:244px;}
  #touchControls .touch-aim {left:calc(var(--touch-left) + 138px);}
}
@media (orientation:portrait) {
  #touchControls .touch-aim {left:var(--touch-left);bottom:calc(var(--touch-bottom) + 220px);}
  #touchControls .touch-use {right:var(--touch-right);bottom:calc(var(--touch-bottom) + 185px);}
  #touchControls .touch-reload {right:calc(var(--touch-right) + 62px);bottom:calc(var(--touch-bottom) + 185px);}
  #touchControls .touch-crouch {right:calc(var(--touch-right) + 62px);bottom:calc(var(--touch-bottom) + 28px);}
  #touchControls .touch-stick {left:var(--touch-left);width:96px;height:96px;}
  #touchControls .touch-sprint {left:calc(var(--touch-left) + 24px);}
  #touchControls .touch-equipment {right:var(--touch-right);top:calc(var(--touch-top) + 54px);max-width:calc(100% - var(--touch-left) - var(--touch-right));}
}